docs: hide mode and theme props, unhide children props

Automatically hides `mode` and `theme` props from the props table. Unhides `children` prop from props table when it doesn't have an associated jsdoc. Hides the `as` prop on button stories where the type is actually `as?: never`

Author: aresnik11

packages/styleguide/.storybook/main.ts

@@ -25,6 +25,19 @@ const config: StorybookConfig = {
 
   typescript: {
     reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      skipChildrenPropWithoutDoc: false,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: (prop) => {
+        if (prop.parent && /node_modules/.test(prop.parent.fileName)) {
+          return false;
+        }
+        if (['mode', 'theme'].includes(prop.name)) {
+          return false;
+        }
+        return true;
+      },
+    },
   },
 
   webpackFinal(config) {

packages/styleguide/src/lib/Atoms/Buttons/CTAButton/CTAButton.stories.tsx

@@ -12,18 +12,17 @@ const meta: Meta<typeof CTAButton> = {
     href: {
       description: 'If defined, component will use an anchor tag',
     },
-    mode: {
-      control: {
-        type: 'select',
-        options: ['dark', 'light'],
-      },
-    },
     size: {
       control: {
         type: 'select',
         options: ['normal', 'small', 'large'],
       },
     },
+    as: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 

packages/styleguide/src/lib/Atoms/Buttons/FillButton/FillButton.stories.tsx

@@ -13,12 +13,6 @@ const meta: Meta<typeof FillButton> = {
     href: {
       description: 'If defined, component will use an anchor tag',
     },
-    mode: {
-      control: {
-        type: 'select',
-        options: ['dark', 'light'],
-      },
-    },
     size: {
       control: {
         type: 'select',
@@ -30,6 +24,11 @@ const meta: Meta<typeof FillButton> = {
         options: [SearchIcon],
       },
     },
+    as: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 

packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.stories.tsx

@@ -16,12 +16,6 @@ const meta: Meta<typeof IconButton> = {
     href: {
       description: 'If defined, component will use an anchor tag',
     },
-    mode: {
-      control: {
-        type: 'select',
-        options: ['dark', 'light'],
-      },
-    },
     size: {
       control: {
         type: 'select',
@@ -35,6 +29,11 @@ const meta: Meta<typeof IconButton> = {
       options: Object.keys(icons),
       mapping: icons,
     },
+    as: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 

packages/styleguide/src/lib/Atoms/Buttons/StrokeButton/StrokeButton.stories.tsx

@@ -13,12 +13,6 @@ const meta: Meta<typeof StrokeButton> = {
     href: {
       description: 'If defined, component will use an anchor tag',
     },
-    mode: {
-      control: {
-        type: 'select',
-        options: ['dark', 'light'],
-      },
-    },
     size: {
       control: {
         type: 'select',
@@ -30,6 +24,11 @@ const meta: Meta<typeof StrokeButton> = {
         options: [SearchIcon],
       },
     },
+    as: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 

packages/styleguide/src/lib/Atoms/Buttons/TextButton/TextButton.stories.tsx

@@ -13,12 +13,6 @@ const meta: Meta<typeof TextButton> = {
     href: {
       description: 'If defined, component will use an anchor tag',
     },
-    mode: {
-      control: {
-        type: 'select',
-        options: ['dark', 'light'],
-      },
-    },
     size: {
       control: {
         type: 'select',
@@ -30,6 +24,11 @@ const meta: Meta<typeof TextButton> = {
         options: [SearchIcon],
       },
     },
+    as: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 

packages/styleguide/src/lib/Atoms/RadialProgress/RadialProgress.stories.tsx

@@ -8,6 +8,7 @@ const meta: Meta<typeof RadialProgress> = {
     strokeWidth: 10,
     value: 30,
     size: 120,
+    children: '',
   },
 };
 

packages/styleguide/src/lib/Layouts/Boxes/Box/Box.stories.tsx

@@ -11,7 +11,6 @@ type Story = StoryObj<typeof Box>;
 
 export const Default: Story = {
   args: {
-    as: 'div',
     children: 'Hello work, I am a box!',
   },
 };

packages/styleguide/src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.stories.tsx

@@ -16,6 +16,11 @@ const meta: Meta<typeof SubmitButton> = {
         type: 'boolean',
       },
     },
+    as: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };