feat: support for storybook 5.x

ccontrols · Feb 11, 2020 · b4cf573 · b4cf573
1 parent 767c6c0
commit b4cf573
Show file tree

Hide file tree

Showing 25 changed files with 634 additions and 431 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,5 +1,4 @@
 const path = require('path');
-
 module.exports = {
   presets:[
     {
@@ -8,12 +7,20 @@ module.exports = {
         fileNameResolver: ({ resourcePath, cacheFolder }) => path.join(cacheFolder, resourcePath.replace(/[^a-z0-9]/gi, '_')),
       },
     },  
+    {
+      name: path.resolve(require.resolve('@component-controls/storybook'), '..', '..','src', 'preset.js'),
+      options: {
+      },
+    },  
+
   ],
   stories: [
     '../core/editors/src/**/*.stories.(js|tsx|mdx)',
+    '../integrations/storybook/.storybook/stories/**/*.stories.(js|tsx|mdx)',
   ],
   addons: [
     '@storybook/addon-docs',
+    'storybook-addon-deps',
     '@storybook/addon-storysource',
   ],
   webpackFinal: async (config, { configType }) => ({

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,11 +1,17 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
+import { Title, Subtitle, Source, Story, Stories, Props, Description } from '@storybook/addon-docs/blocks';
+import { getControlValues } from '@component-controls/core';
 import { polaris as theme} from '@theme-ui/presets';
 import { ThemeProvider } from 'theme-ui';
 import { lighten } from 'polished';
+import { DependenciesTable } from 'storybook-addon-deps/blocks';
+import { ControlsEditorsTable } from '@component-controls/storybook';
 
 
-addDecorator((story) => {
+addDecorator((story, ctx ) => {
+  const { controls } = ctx.parameters || {};
+
   return (
     <ThemeProvider theme={{
       ...theme,
@@ -49,13 +55,35 @@ addDecorator((story) => {
 
       },
     }}>
-      {story()}
+      {story(getControlValues(controls))}
     </ThemeProvider>
   );
 })
 
+export const DocsPage = ({
+  titleSlot,
+  subtitleSlot,
+  descriptionSlot,
+  propsSlot,
+  storiesSlot,
+}) => {
+  return (
+    <>
+      <Title slot={titleSlot} />
+      <Subtitle slot={subtitleSlot} />
+      <Description slot={descriptionSlot} />
+      <Story id="." />
+      <Source id="." />
+      <ControlsEditorsTable id="." />
+      <Props slot={propsSlot} />
+      <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />
+      <Stories slot={storiesSlot} />
+    </>
+  );
+};
 const categories = ['Table', 'Editors', 'Components']
 addParameters({
+  docs: { page: DocsPage },
   options: {
     storySort: (a, b) => {
       const aKind = a[1].kind.split('/')[0];

diff --git a/core/core/src/utils.ts b/core/core/src/utils.ts
@@ -79,21 +79,23 @@ export const resetControlValues = (
 export const getControlValues = (
   controls: LoadedComponentControls,
 ): { [name: string]: any } =>
-  Object.keys(controls).reduce((acc, key) => {
-    const control: ComponentControl = controls[key];
-    let { value } = control;
-    if (control.type === ControlTypes.TEXT && control.escapeValue) {
-      if (typeof value === 'string') {
-        value = escape(value);
-      }
-    } else if (
-      control.type === ControlTypes.OBJECT &&
-      typeof value === 'object'
-    ) {
-      return {
-        ...acc,
-        [key]: getControlValues(value as LoadedComponentControls),
-      };
-    }
-    return { ...acc, [key]: value };
-  }, {});
+  controls
+    ? Object.keys(controls).reduce((acc, key) => {
+        const control: ComponentControl = controls[key];
+        let { value } = control;
+        if (control.type === ControlTypes.TEXT && control.escapeValue) {
+          if (typeof value === 'string') {
+            value = escape(value);
+          }
+        } else if (
+          control.type === ControlTypes.OBJECT &&
+          typeof value === 'object'
+        ) {
+          return {
+            ...acc,
+            [key]: getControlValues(value as LoadedComponentControls),
+          };
+        }
+        return { ...acc, [key]: value };
+      }, {})
+    : {};
diff --git a/core/editors/src/components/Tabs/Tabs.tsx b/core/editors/src/components/Tabs/Tabs.tsx
@@ -61,7 +61,8 @@ const TabsContainer = styled.div`
   `}
 `;
 
-const Tabs: FC<TabsProps> = (props: TabsProps) => (
+type OwnTabsProps = Omit<TabsProps, 'ref'>;
+const Tabs: FC<OwnTabsProps> = props => (
   <TabsContainer>
     <OriginalTabs {...props} />
   </TabsContainer>

diff --git a/core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx b/core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx
@@ -139,7 +139,7 @@ export const ControlsEditorsTable: FC<ControlsEditorsTableProps & {
     const groupped: GroupedControlsType = Object.keys(controls)
       .filter(k => {
         const p: LoadedComponentControl = controls[k];
-        return !p.hidden;
+        return p.type && !p.hidden;
       })
       .reduce((acc: GroupedControlsType, k: string) => {
         const groupId = controls[k].groupId || DEFAULT_GROUP_ID;

diff --git a/integrations/storybook/.storybook/stories/controls-editors-table.stories.tsx b/integrations/storybook/.storybook/stories/controls-editors-table.stories.tsx
@@ -1,25 +1,11 @@
 import React from 'react';
 import { ControlTypes } from '@component-controls/specification';
-import { Title, Subtitle, Description, Story, Props, Stories } from '@storybook/addon-docs/blocks';
-import { ControlsEditorsTable } from '../../dist/blocks';
+import { ControlsEditorsTable } from '@component-controls/storybook';
 
 export default {
-  title: 'Docs/PropEditors/ControlsEditorsTable',
+  title: 'Storybook/blocks/ControlsEditorsTable',
   parameters: {
     component: ControlsEditorsTable,
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Story id="." />
-          <ControlsEditorsTable id="." />
-          <Props />
-          <Stories />
-        </>
-      ),
-    },
   },
 };
 
@@ -36,13 +22,15 @@ export const docsControlsEditorsTable = ({ name, age }: DocsControlsEditorsTable
 };
 
 docsControlsEditorsTable.story = {
-  controls: {
-    name: { type: ControlTypes.TEXT, label: 'Name', value: 'Mark' },
-    age: { type: ControlTypes.NUMBER, label: 'Age', value: 19 },
-    clickMe: {
-      type: ControlTypes.BUTTON,
-      label: 'button click',
-      onClick: () => {},
+  parameters: {
+    controls: {
+      name: { type: ControlTypes.TEXT, label: 'Name', value: 'Mark' },
+      age: { type: ControlTypes.NUMBER, label: 'Age', value: 19 },
+      clickMe: {
+        type: ControlTypes.BUTTON,
+        label: 'button click',
+        onClick: () => {},
+      },
     },
-  },
+  }
 };