feat: integrate legacy calling

ccontrols · Feb 12, 2020 · fd00bd8 · fd00bd8
1 parent 27b44c1
commit fd00bd8
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 31 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,5 +1,4 @@
 const path = require('path');
-console.log(path.resolve(path.dirname(require.resolve('@component-controls/storybook')), 'preset.js'));
 module.exports = {
   presets:[
     {

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,15 +1,13 @@
 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 { DependenciesTable } from 'storybook-addon-deps/blocks';
 import { ControlsEditorsTable, ThemeProvider } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
-  const { controls } = ctx.parameters || {};
   return (
     <ThemeProvider>
-      {story(getControlValues(controls))}
+      {story(ctx)}
     </ThemeProvider>
   );
 })

diff --git a/integrations/storybook/.storybook/stories/controls-editors-table.stories.tsx b/integrations/storybook/.storybook/stories/controls-editors-table.stories.tsx
@@ -13,7 +13,7 @@ interface DocsControlsEditorsTable {
   name: string;
   age: number;
 }
-export const docsControlsEditorsTable = ({ name, age }: DocsControlsEditorsTable) => {
+export const docsControlsEditorsTable = ({ props: { name, age }}: { props: DocsControlsEditorsTable}) => {
   return (
     <>
       <h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>

diff --git a/integrations/storybook/.storybook/stories/controls-editors.stories.js b/integrations/storybook/.storybook/stories/controls-editors.stories.js
@@ -6,7 +6,7 @@ export default {
   title: 'Storybook/Controls',
 };
 
-export const textDefaultProp = ({ text }) => text;
+export const textDefaultProp = ({ props: { text } }) => text;
 textDefaultProp.story = {
   parameters: {
     controls: {
@@ -15,7 +15,7 @@ textDefaultProp.story = {
   }  
 };
 
-export const selectProp = ({ value }) => <div>{JSON.stringify({ value }, null, 2)}</div>;
+export const selectProp = ({ props: { value } }) => <div>{JSON.stringify({ value }, null, 2)}</div>;
 
 selectProp.propTypes = {
   value: PropTypes.string,
@@ -39,7 +39,7 @@ selectProp.story = {
   }  
 };
 
-export const tweaksStaticValues = ({
+export const tweaksStaticValues = ({ props: {
   userName,
   age,
   fruit,
@@ -54,7 +54,7 @@ export const tweaksStaticValues = ({
   images,
   dog,
   birthday,
-}) => {
+} }) => {
   const intro = `My name is ${userName}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}, and hanging out with my dog ${dog.label}`;
   const style = { backgroundColor, color, ...otherStyles };
   const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
@@ -227,7 +227,7 @@ tweaksStaticValues.story = {
   }  
 };
 
-export const dynamicProps = ({ showOptional }) => {
+export const dynamicProps = ({ props: { showOptional }}) => {
   return (
     <>
       <div>I must be here</div>
@@ -254,7 +254,7 @@ dynamicProps.story = {
   }  
 };
 
-export const complexSelect = ({ m }) => {
+export const complexSelect = ({ props: { m }}) => {
   const value = m.toString();
   const type = Array.isArray(m) ? 'array' : typeof m;
   return (
@@ -264,11 +264,6 @@ export const complexSelect = ({ m }) => {
   );
 };
 
-complexSelect.propTypes = {
-  m: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
-    .isRequired,
-};
-
 complexSelect.story = {
   parameters: {
     controls: {
@@ -288,14 +283,14 @@ complexSelect.story = {
   }  
 };
 
-export const optionsProperties = ({
+export const optionsProperties = ({ props: {
   optionRadio,
   optionInlineRadio,
   optionSelect,
   optionsMultiSelect,
   optionsCheck,
   optionsInlineCheck,
-}) => {
+}}) => {
   return (
     <div>
       <p>Weekday: {optionRadio}</p>
@@ -463,7 +458,7 @@ triggersActionsViaButton.story = {
   },  
 };
 
-export const radioEnum = ({ radio }) => radio;
+export const radioEnum = ({ props: { radio } }) => radio;
 
 radioEnum.story = {
   parameters: {
@@ -493,7 +488,7 @@ reservedKeyword.story = {
   },  
 };
 
-export const XssSafety = ({ content }) => (
+export const XssSafety = ({ props: { content } }) => (
   <div
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML={{
@@ -520,7 +515,7 @@ XssSafety.story = {
   },  
 };
 
-export const generateRandomData = ({ street }) => street;
+export const generateRandomData = ({ props: { street } }) => street;
 
 generateRandomData.story = {
   parameters: {

diff --git a/integrations/storybook/.storybook/stories/inherit-from-kind.stories.tsx b/integrations/storybook/.storybook/stories/inherit-from-kind.stories.tsx
@@ -16,7 +16,7 @@ interface DocsControlsEditorsTable {
   name: string;
   age: number;
 }
-export const docsControlsEditorsTable = ({ name, age }: DocsControlsEditorsTable) => {
+export const docsControlsEditorsTable = ({ props: { name, age } } : { props: DocsControlsEditorsTable }) => {
   return (
     <>
       <h2>{`Hello, my name is ${name}, and I am ${age} years old.`}</h2>

diff --git a/integrations/storybook/.storybook/stories/smart-controls.stories.js b/integrations/storybook/.storybook/stories/smart-controls.stories.js
@@ -8,9 +8,9 @@ export default {
   },
 };
 
-export const allProps = props => <Button {...props} />;
+export const allProps = ({ props }) => <Button {...props} />;
 
-export const onlyColors = props => <Button label="Choose colors" {...props} />;
+export const onlyColors = ({ props }) => <Button label="Choose colors" {...props} />;
 
 onlyColors.story = {
   parameters: {
@@ -22,7 +22,7 @@ onlyColors.story = {
   },
 };
 
-export const noColors = props => <Button label="Choose colors" {...props} />;
+export const noColors = ({ props }) => <Button label="Choose colors" {...props} />;
 
 noColors.story = {
   parameters: {

diff --git a/integrations/storybook/.storybook/stories/smart-controls.stories.mdx b/integrations/storybook/.storybook/stories/smart-controls.stories.mdx
@@ -20,7 +20,7 @@ import Button from '../components/BaseButton';
 
 <Preview>
   <Story name="smart story">
-    {(props) => (
+    {({ props }) => (
       <Button label="default" {...props}/>
     )}  
   </Story>
@@ -36,7 +36,7 @@ import Button from '../components/BaseButton';
       }  
     }}
     >
-    {({ text }) => (
+    {({ props: { text } }) => (
       <Button label={text}/>
     )}  
   </Story>

diff --git a/integrations/storybook/src/config-legacy.ts b/integrations/storybook/src/config-legacy.ts
@@ -1,5 +1,6 @@
 import { addDecorator, addParameters, useEffect } from '@storybook/client-api';
 import { ComponentControls } from '@component-controls/specification';
+import { getControlValues } from '@component-controls/core';
 import { __STORYBOOK_STORY_STORE__ as storyStore } from 'global';
 import addons, { makeDecorator } from '@storybook/addons';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
@@ -31,7 +32,14 @@ addDecorator(
           channel.removeListener(SET_DATA_MSG, onNewData);
         };
       }, []);
-      return storyFn(context);
+      const { controls } = context.parameters || {};
+      const { modernSyntax } = controls;
+      const props = getControlValues(controls);
+      if (modernSyntax) {
+        //@ts-ignore
+        return storyFn(props, context);
+      }
+      return storyFn({ ...context, props });
     },
   }),
 );

diff --git a/integrations/storybook/src/shared/ThemeProvider.tsx b/integrations/storybook/src/shared/ThemeProvider.tsx
@@ -19,9 +19,7 @@ export const ThemeProvider: React.FC = ({ children }) => (
           borderSpacing: '0px',
         },
         td: {
-          paddingTop: '16px',
-          paddingBottom: '16px',
-          paddingLeft: '20px',
+          padding: '16px 20px',
         },
         tr: {
           borderTop: '1px solid rgba(0, 0, 0, 0.1)',