chore: updated packages (#307)

* chore: update packages * chore: update file according to storybook migration guide * chore: fix error connected with vue-docggen-api in UiControls components * chore: fix code in mdx files * fix: code blocks in dx files * chore: refactor mdx and jsx files * chore: fix errors occured in team.mdx and fix code blocks in utilities/directives * chore: refactor docs in utilities/directives folder * chore: solve errors in UiCheckbox and UiInput stories --------- Co-authored-by: sjarczak <[email protected]>
infermedica · Nov 7, 2023 · 1f3210a · 1f3210a
1 parent 83c2dfb
commit 1f3210a
Show file tree

Hide file tree

Showing 64 changed files with 6,021 additions and 6,522 deletions.
diff --git a/.storybook/addons/cssProperties/components/panel/CssPropertiesTable.jsx b/.storybook/addons/cssProperties/components/panel/CssPropertiesTable.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef, useMemo } from 'react';
 import { styled } from '@storybook/theming';
-import { Table } from '../../../../../docs/components/Table';
+import Table from '../../../../../docs/components/Table';
 import { TableExpandableRows } from './internals/TableExpandableRows';
 import { getTableHeader } from './internals/TableHeader';
 import { useWindowEvent } from '../../hooks/useWindowEvents';

diff --git a/.storybook/addons/cssProperties/register.js b/.storybook/addons/cssProperties/register.js
@@ -18,7 +18,7 @@ export const getStoryId = (api) => {
 };
 
 addons.register(`${ADDON_ID}`, (api) => {
-  addons.addPanel(PANEL_ID, {
+  addons.add(PANEL_ID, {
     type: types.PANEL,
     title: 'CSS Properties',
     render: ({ active }) => {

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -46,25 +46,17 @@ const config: StorybookConfig = {
     '../src/**/*.stories.@(js|jsx|ts|tsx)'
   ],
   addons: [
-    // addons appears in a order that they are declared below
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-a11y',
-    '@storybook/addon-interactions',
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: postcss
-        }
-      }
-    },
-    // @storybook/addon-jest is used to display vitest results
-    '@storybook/addon-jest',
-    // TODO: fix addons below after migration to sb 7.0.0
-    // '@brightlayer-ui/storybook-rtl-addon/register',
-    // 'storybook-addon-designs',
-    './addons/cssProperties/preset.js',
+  // addons appears in a order that they are declared below
+  '@storybook/addon-links', 
+  '@storybook/addon-essentials', 
+  '@storybook/addon-a11y', 
+  '@storybook/addon-interactions', 
+  // @storybook/addon-jest is used to display vitest results
+  '@storybook/addon-jest', // TODO: fix addons below after migration to sb 7.0.0
+  // '@brightlayer-ui/storybook-rtl-addon/register',
+  // 'storybook-addon-designs',
+  './addons/cssProperties/preset.js', 
+  '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/vue3-vite',
@@ -78,4 +70,4 @@ const config: StorybookConfig = {
   }
 };
 
-export default config
+export default config
diff --git a/docs/components/Alert.jsx b/docs/components/Alert.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { styled } from '@storybook/theming';
 
@@ -34,8 +36,14 @@ const Container = styled.div`
   -webkit-font-smoothing: antialiased;
   font-size: 16px;`;
 
-export const Alert = ({ children, theme = 'info' }) => <Container
+const Alert = ({
+  children, theme = 'info',
+}) => (
+  <Container
     theme={theme}
   >
     {children}
-  </Container>;
+  </Container>
+);
+
+export default Alert;
diff --git a/docs/components/Code.jsx b/docs/components/Code.jsx
@@ -1,4 +1,6 @@
 /* eslint-disable no-param-reassign */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { Source } from '@storybook/blocks';
 
@@ -13,16 +15,20 @@ const getCodeBlocksAsObject = (codeBlocks) => codeBlocks.reduce((blocks, item) =
   return blocks;
 }, {});
 
-export const Code = ({
+const Code = ({
   code = '', id, additionalData = '', language = 'css',
 }) => {
   if (id) {
     const codeBlocks = getCodeBlocks(code);
     const codeBlocksAsObject = getCodeBlocksAsObject(codeBlocks);
     code = `${additionalData} ${codeBlocksAsObject[id]}`.trim();
   }
-  return <Source
-    language={language}
-    code={code}
-  />;
+  return (
+    <Source
+      language={language}
+      code={code}
+    />
+  );
 };
+
+export default Code;
diff --git a/docs/components/ComponentsApiSection.jsx b/docs/components/ComponentsApiSection.jsx
@@ -1,15 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable import/prefer-default-export */
 import React from 'react';
 import { styled } from '@storybook/theming';
-import { Table } from './Table';
+import Table from './Table';
 import { capitalizeFirst } from '../../src/utilities/helpers';
 
-const List = styled.ul`
-  list-style-type: none;
-  padding: 0 8px;`;
-const ListItem = styled.ul`
-  padding: 0;
-  margin: 0;`;
 const SectionTitle = styled.h2`
   margin: 20px 0 8px;
   padding-bottom: 4px;
@@ -35,35 +30,45 @@ const Text = styled.p`
   margin: 0 0 8px 8px;
   font-size: 14px`;
 
-export const ComponentsApiSection = ({ diffs }) => <React.Fragment>
-  <SectionTitle>Changes in the API of components</SectionTitle>
-    { Object.keys(diffs).map((componentName) => <React.Fragment key={componentName}>
-      <ComponentTitle>{componentName}</ComponentTitle>
-      { Object.keys(diffs[componentName]).map((apiEl, index) => {
-        if (apiEl === 'component') {
-          return <Text key={index}>{`Component is ${diffs[componentName][apiEl][0].type}`}</Text>;
-        }
-        {
-          const rows = diffs[componentName][apiEl].map(({
-            name, type, description,
-          }) => [
-            name,
-            type,
-            description || '',
-          ]);
-          const apiElCapitalized = capitalizeFirst(apiEl);
-          return <React.Fragment key={index}>
-            <ApiElTitle>{`${apiElCapitalized} changes`}</ApiElTitle>
-            <Table
-              headers={[
-                apiElCapitalized,
-                'Status',
-                'Description',
-              ]}
-              rows={ rows }
-            />
-          </React.Fragment>;
-        }
-      })}
-    </React.Fragment>)}
-</React.Fragment>;
+const ComponentsApiSection = ({ diffs }) => (
+  <>
+    <SectionTitle>Changes in the API of components</SectionTitle>
+    { Object.keys(diffs).map((componentName) => (
+      <React.Fragment key={componentName}>
+        <ComponentTitle>{componentName}</ComponentTitle>
+        { Object.keys(diffs[componentName]).map((apiEl, index) => {
+          if (apiEl === 'component') {
+            // eslint-disable-next-line react/no-array-index-key
+            return <Text key={index}>{`Component is ${diffs[componentName][apiEl][0].type}`}</Text>;
+          }
+          {
+            const rows = diffs[componentName][apiEl].map(({
+              name, type, description,
+            }) => [
+              name,
+              type,
+              description || '',
+            ]);
+            const apiElCapitalized = capitalizeFirst(apiEl);
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              <React.Fragment key={index}>
+                <ApiElTitle>{`${apiElCapitalized} changes`}</ApiElTitle>
+                <Table
+                  headers={[
+                    apiElCapitalized,
+                    'Status',
+                    'Description',
+                  ]}
+                  rows={rows}
+                />
+              </React.Fragment>
+            );
+          }
+        })}
+      </React.Fragment>
+    ))}
+  </>
+);
+
+export default ComponentsApiSection;
diff --git a/docs/components/Maintainer.jsx b/docs/components/Maintainer.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { styled } from '@storybook/theming';
 
@@ -27,30 +29,34 @@ const Social = styled.a`
   display: flex;
   align-items: center;
   justify-content: center;`;
-export const Maintainer = ({
+const Maintainer = ({
   name, role = 'Maintainer', job, location, github,
-}) => <Wrapper>
-  <div>
-    <Avatar
-      src={ `https://github.com/${github}.png` }
-      alt={ name }
-      width="80"
-      height="80"
-    />
-  </div>
-  <Profile>
-    <Name>{ name }</Name>
+}) => (
+  <Wrapper>
     <div>
-      <Role>{ role }</Role>
-      <Job>{ job }</Job>
-      <Location>{location}</Location>
-      <Socials>
-        <Social href={ `https://github.com/${github}` }>
-          <svg width="20" height="20" aria-hidden="true" viewBox="0 0 16 16" version="1.1" >
-            <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
-          </svg>
-        </Social>
-      </Socials>
+      <Avatar
+        src={`https://github.com/${github}.png`}
+        alt={name}
+        width="80"
+        height="80"
+      />
     </div>
-  </Profile>
-</Wrapper>;
+    <Profile>
+      <Name>{ name }</Name>
+      <div>
+        <Role>{ role }</Role>
+        <Job>{ job }</Job>
+        <Location>{location}</Location>
+        <Socials>
+          <Social tag="a" target="_blank" href={`https://github.com/${github}`}>
+            <svg width="20" height="20" aria-hidden="true" viewBox="0 0 16 16" version="1.1">
+              <path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
+            </svg>
+          </Social>
+        </Socials>
+      </div>
+    </Profile>
+  </Wrapper>
+);
+
+export default Maintainer;