[KOA-6046] Add automatic API tables for components that export multip…

…le components (#3011) * Add automatic API tables for components that export multiple components * fix lint * remove flow from TS file * Remove padding from Storybook template * test stories in docs * trigger storybook rebuild * trigger storybook * Remove stories from docs page
Skyscanner · Sep 22, 2023 · 6f86a3e · 6f86a3e
1 parent 59b3c4b
commit 6f86a3e
Show file tree

Hide file tree

Showing 39 changed files with 226 additions and 27 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -19,7 +19,9 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 
 const config: StorybookConfig = {
-  stories: ['../examples/**/stories.@(ts|tsx|js|jsx)'],
+  stories: [
+    '../examples/**/stories.@(ts|tsx|js|jsx)',
+  ],
   addons: [
     '@storybook/addon-a11y',
     '@storybook/addon-actions',
@@ -31,12 +33,18 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: false,
+    autodocs: 'tag',
     defaultName: 'Documentation',
   },
   typescript: {
     reactDocgenTypescriptOptions: {
       shouldIncludePropTagMap: true,
+      propFilter: (prop) => {        
+        const isHTMLElementProp =
+            prop.parent?.fileName.includes("node_modules") ?? false
+
+        return !isHTMLElementProp
+      },
     },
   },
   features: {

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -16,8 +16,9 @@
  * limitations under the License.
  */
 
+import { Title, PRIMARY_STORY } from '@storybook/blocks';
+import { ArgsTable } from '@storybook/addon-docs';
 import type { Preview } from '@storybook/react';
-import { spacingBase } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 import '../packages/bpk-stylesheets';
 import '../packages/bpk-stylesheets/font';
@@ -35,7 +36,7 @@ const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider);
 const preview: Preview = {
   decorators: [
     (story) => (
-      <div style={{ padding: spacingBase }}>
+      <div>
         <EnhancedThemeProvider themeAttributes={themeableAttributes}>
           {story()}
         </EnhancedThemeProvider>
@@ -48,6 +49,19 @@ const preview: Preview = {
       </div>
     ),
   ],
+  parameters: {
+    docs: {
+      source: {
+        type: 'dynamic',
+      },
+      page: () => (
+        <>
+          <Title />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      )
+    },
+  }
 };
 
 export default preview;
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -34,6 +34,13 @@ module.exports = ({ config }) => {
       presets: [['@babel/preset-env']],
     },
   });
+  config.module.rules.push({
+    test: /\.(js|jsx)?$/,
+    loader: 'babel-loader',
+    options: {
+      plugins: ['babel-plugin-react-docgen'],
+    },
+  });
   config.resolve.extensions.push('.tsx');
   config.resolve.extensions.push('.ts');
   /* eslint-disable-next-line no-param-reassign */

diff --git a/examples/bpk-component-accordion/stories.js b/examples/bpk-component-accordion/stories.js
@@ -18,6 +18,10 @@
 
 /* @flow strict */
 
+
+import BpkAccordion from '../../packages/bpk-component-accordion/src/BpkAccordion';
+import BpkAccordionItem from '../../packages/bpk-component-accordion/src/BpkAccordionItem';
+
 import {
   SingleItemExample,
   SingleItemExampleInitiallyExpandedExample,
@@ -35,6 +39,11 @@ import {
 
 export default {
   title: 'bpk-component-accordion',
+  component: BpkAccordion,
+  subcomponents: {
+    BpkAccordionItem,
+  },
+  tags: ['autodocs']
 };
 
 export const SingleItemOnly = SingleItemExample;

diff --git a/examples/bpk-component-banner-alert/stories.js b/examples/bpk-component-banner-alert/stories.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 /* @flow strict */
+
+import BpkBannerAlert from '../../packages/bpk-component-banner-alert/src/BpkBannerAlert';
+import BpkBannerAlertDismissable from '../../packages/bpk-component-banner-alert/src/BpkBannerAlertDismissable';
+import BpkBannerAlertExpandable from '../../packages/bpk-component-banner-alert/src/BpkBannerAlertExpandable';
+
 import {
   NeutralExample,
   PrimaryExample,
@@ -36,6 +41,12 @@ import {
 
 export default {
   title: 'bpk-component-banner-alert',
+  component: BpkBannerAlert,
+  subcomponents: {
+    BpkBannerAlertDismissable,
+    BpkBannerAlertExpandable,
+  },
+  tags: ['autodocs']
 };
 
 export const DocsDefault = DocsDefaultExample;
@@ -44,16 +55,11 @@ export const Neutral = NeutralExample;
 export const Primary = PrimaryExample;
 export const Success = SuccessExample;
 export const SuccessLongMessage = SuccessLongMessageExample;
-
 export const SuccessDismissable = DismissableExample;
-
 export const SuccessExpandable = SuccessExpandableExample;
-
 export const SuccessAnimateOnEnter = SuccessAnimateOnEnterExample;
-
 export const SuccessWithReactRenderedMessage =
   SuccessWithReactRenderedMessageExample;
-
 export const Warn = WarnExample;
 export const Error = ErrorExample;
 export const SuccessDismissableBehaviour = SuccessDismissableBehaviourExample;
@@ -62,7 +68,6 @@ export const SuccessExpandableBehaviour = SuccessExpandableBehaviourExample;
 
 export const SuccessAutomaticallyDismissedAfter5Seconds =
   SuccessAutomaticallyDismissedExample;
-
 export const SuccessWithCustomIcon = SuccessCustomIconExample;
 
 export const VisualTest = DocsDefaultExample;
diff --git a/examples/bpk-component-breadcrumb/stories.js b/examples/bpk-component-breadcrumb/stories.js
@@ -18,10 +18,18 @@
 
 /* @flow strict */
 
+import BpkBreadcrumb from '../../packages/bpk-component-breadcrumb/src/BpkBreadcrumb';
+import BpkBreadcrumbItem from '../../packages/bpk-component-breadcrumb/src/BpkBreadcrumbItem';
+
 import { DefaultExample, ExtremeExample } from './examples';
 
 export default {
+  component: BpkBreadcrumb,
   title: 'bpk-component-breadcrumb',
+  subcomponents: {
+    BpkBreadcrumbItem
+  },
+  tags: ['autodocs']
 };
 
 export const Default = DefaultExample;

diff --git a/examples/bpk-component-calendar/stories.js b/examples/bpk-component-calendar/stories.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+import BpkCalendarGridHeaderComponent from '../../packages/bpk-component-calendar/src/BpkCalendarGridHeader';
+import BpkCalendarGridComponent from '../../packages/bpk-component-calendar/src/BpkCalendarGrid';
+import BpkCalendarNavComponent from '../../packages/bpk-component-calendar/src/BpkCalendarNav';
+import BpkCalendarDateComponent from '../../packages/bpk-component-calendar/src/BpkCalendarDate';
+
 import {
   DefaultExample,
   CalendarNavExample,
@@ -40,6 +45,13 @@ import {
 
 export default {
   title: 'bpk-component-calendar',
+  component: BpkCalendarGridComponent,
+  subcomponents: {
+    BpkCalendarNavComponent,
+    BpkCalendarGridHeaderComponent,
+    BpkCalendarDateComponent,
+  },
+  tags: ['autodocs']
 };
 
 export const BpkCalendarNav = CalendarNavExample;

diff --git a/examples/bpk-component-card/stories.js b/examples/bpk-component-card/stories.js
@@ -17,6 +17,10 @@
  */
 /* @flow strict */
 
+import BpkCard from '../../packages/bpk-component-card/src/BpkCard';
+import BpkDividedCard from '../../packages/bpk-component-card/src/BpkDividedCard';
+import BpkCardWrapper from '../../packages/bpk-component-card/src/BpkCardWrapper';
+
 import {
   DefaultExample,
   WithHrefExample,
@@ -35,6 +39,12 @@ import {
 
 export default {
   title: 'bpk-component-card',
+  component: BpkCard,
+  subcomponents: {
+    BpkDividedCard,
+    BpkCardWrapper,
+  },
+  tags: ['autodocs']
 };
 
 export const Default = DefaultExample;

diff --git a/examples/bpk-component-chip/stories.js b/examples/bpk-component-chip/stories.js
@@ -18,6 +18,10 @@
 
 /* @flow strict */
 
+import BpkSelectableChip from '../../packages/bpk-component-chip/src/BpkSelectableChip';
+import BpkDismissibleChip from '../../packages/bpk-component-chip/src/BpkDismissibleChip';
+import BpkDropdownChip from '../../packages/bpk-component-chip/src/BpkDropdownChip';
+
 import {
   AllTypesExample,
   AllSelectableChipsExample,
@@ -28,6 +32,12 @@ import {
 
 export default {
   title: 'bpk-component-chip',
+  component: BpkSelectableChip,
+  subcomponents: {
+    BpkDismissibleChip,
+    BpkDropdownChip,
+  },
+  tags: ['autodocs'],
 };
 
 export const AllTypes = AllTypesExample;

diff --git a/examples/bpk-component-datatable/stories.js b/examples/bpk-component-datatable/stories.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+import BpkDataTable from '../../packages/bpk-component-datatable/src/BpkDataTable';
+import BpkDataTableColumn from '../../packages/bpk-component-datatable/src/BpkDataTableColumn';
+
 import {
   AutowidthExample,
   NonHoverRowsExample,
@@ -29,6 +32,9 @@ import {
 
 export default {
   title: 'bpk-component-datatable',
+  component: BpkDataTable,
+  subcomponents: { BpkDataTableColumn },
+  tags: ['autodocs'],
 };
 
 export const Autowidth = AutowidthExample;

diff --git a/examples/bpk-component-description-list/stories.js b/examples/bpk-component-description-list/stories.js
@@ -16,10 +16,20 @@
  * limitations under the License.
  */
 
+import BpkDescriptionList from '../../packages/bpk-component-description-list/src/BpkDescriptionList';
+import BpkDescriptionTerm from '../../packages/bpk-component-description-list/src/BpkDescriptionTerm';
+import BpkDescriptionDetails from '../../packages/bpk-component-description-list/src/BpkDescriptionDetails';
+
 import DefaultExample from './examples';
 
 export default {
   title: 'bpk-component-description-list',
+  component: BpkDescriptionList,
+  subcomponents: {
+    BpkDescriptionTerm,
+    BpkDescriptionDetails,
+  },
+  tags: ['autodocs'],
 };
 
 export const DescriptionList = DefaultExample;

diff --git a/examples/bpk-component-flare/stories.js b/examples/bpk-component-flare/stories.js
@@ -18,6 +18,9 @@
 
 /* @flow strict */
 
+import BpkContentBubble from '../../packages/bpk-component-flare/src/BpkContentBubble';
+import BpkFlareBar from '../../packages/bpk-component-flare/src/BpkFlareBar';
+
 import {
   FlareBarExample,
   FlareBarRoundedExample,
@@ -31,6 +34,11 @@ import {
 
 export default {
   title: 'bpk-component-flare',
+  component: BpkContentBubble,
+  subcomponents: {
+    BpkFlareBar,
+  },
+  tags: ['autodocs'],
 };
 
 export const BpkFlareBarDefault = FlareBarExample;

diff --git a/examples/bpk-component-horizontal-nav/stories.js b/examples/bpk-component-horizontal-nav/stories.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+import BpkHorizontalNav from '../../packages/bpk-component-horizontal-nav/src/BpkHorizontalNav';
+import BpkHorizontalNavItem from '../../packages/bpk-component-horizontal-nav/src/BpkHorizontalNavItem';
+
 import {
   DefaultExample,
   ScrollToSelectedExample,
@@ -32,6 +35,9 @@ import {
 
 export default {
   title: 'bpk-component-horizontal-nav',
+  component: BpkHorizontalNav,
+  subcomponents: { BpkHorizontalNavItem },
+  tags: ['autodocs'],
 };
 
 export const Example = DefaultExample;

diff --git a/examples/bpk-component-image/stories.js b/examples/bpk-component-image/stories.js
@@ -16,6 +16,9 @@
  * limitations under the License.
  */
 
+import BpkImage from '../../packages/bpk-component-image/src/BpkImage';
+import BpkBackgroundImage from '../../packages/bpk-component-image/src/BpkBackgroundImage';
+
 import {
   DefaultExample,
   RoundedCornersExample,
@@ -31,6 +34,9 @@ import {
 
 export default {
   title: 'bpk-component-image',
+  component: BpkImage,
+  subcomponents: { BpkBackgroundImage },
+  tags: ['autodocs'],
 };
 
 export const Default = DefaultExample;

diff --git a/examples/bpk-component-input/stories.js b/examples/bpk-component-input/stories.js
@@ -17,6 +17,8 @@
  */
 /* @flow strict */
 
+import BpkInput from '../../packages/bpk-component-input/src/BpkInput';
+
 import {
   TextExample,
   PlaceholderExample,
@@ -36,6 +38,8 @@ import {
 
 export default {
   title: 'bpk-component-input',
+  component: BpkInput,
+  tags: ['autodocs'],
 };
 
 export const TextValue = TextExample;

diff --git a/examples/bpk-component-link/stories.js b/examples/bpk-component-link/stories.js
@@ -18,6 +18,9 @@
 
 /* @flow strict */
 
+import BpkLink from '../../packages/bpk-component-link/src/BpkLink';
+import BpkButtonLink from '../../packages/bpk-component-link/src/BpkButtonLink';
+
 import {
   LinkExample,
   ButtonLinkExample,
@@ -30,6 +33,11 @@ import {
 
 export default {
   title: 'bpk-component-link',
+  component: BpkLink,
+  subcomponents: {
+    BpkButtonLink
+  },
+  tags: ['autodocs'],
 };
 
 export const Example = LinkExample;