feat: legacy context mode

ccontrols · Feb 12, 2020 · 741898b · 741898b
1 parent 5a718f2
commit 741898b
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 44 deletions.
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 = ({ props: { name, age }}: { props: DocsControlsEditorsTable}) => {
+export const docsControlsEditorsTable = ({ name, age }: 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
@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Title, Subtitle, Description, Story, Props, Stories } from '@storybook/addon-docs/blocks';
 
 export default {
   title: 'Storybook/Controls',
 };
 
-export const textDefaultProp = ({ props: { text } }) => text;
+export const textDefaultProp = ({ text }) => text;
 textDefaultProp.story = {
   parameters: {
     controls: {
@@ -15,7 +14,7 @@ textDefaultProp.story = {
   }  
 };
 
-export const selectProp = ({ props: { value } }) => <div>{JSON.stringify({ value }, null, 2)}</div>;
+export const selectProp = ({ value }) => <div>{JSON.stringify({ value }, null, 2)}</div>;
 
 selectProp.propTypes = {
   value: PropTypes.string,
@@ -39,7 +38,7 @@ selectProp.story = {
   }  
 };
 
-export const tweaksStaticValues = ({ props: {
+export const tweaksStaticValues = ({
   userName,
   age,
   fruit,
@@ -54,7 +53,7 @@ export const tweaksStaticValues = ({ props: {
   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 +226,7 @@ tweaksStaticValues.story = {
   }  
 };
 
-export const dynamicProps = ({ props: { showOptional }}) => {
+export const dynamicProps = ({ showOptional }) => {
   return (
     <>
       <div>I must be here</div>
@@ -254,7 +253,7 @@ dynamicProps.story = {
   }  
 };
 
-export const complexSelect = ({ props: { m }}) => {
+export const complexSelect = ({ m }) => {
   const value = m.toString();
   const type = Array.isArray(m) ? 'array' : typeof m;
   return (
@@ -283,14 +282,14 @@ complexSelect.story = {
   }  
 };
 
-export const optionsProperties = ({ props: {
+export const optionsProperties = ({
   optionRadio,
   optionInlineRadio,
   optionSelect,
   optionsMultiSelect,
   optionsCheck,
   optionsInlineCheck,
-}}) => {
+}) => {
   return (
     <div>
       <p>Weekday: {optionRadio}</p>
@@ -458,7 +457,7 @@ triggersActionsViaButton.story = {
   },  
 };
 
-export const radioEnum = ({ props: { radio } }) => radio;
+export const radioEnum = ({ radio }) => radio;
 
 radioEnum.story = {
   parameters: {
@@ -488,7 +487,7 @@ reservedKeyword.story = {
   },  
 };
 
-export const XssSafety = ({ props: { content } }) => (
+export const XssSafety = ({ content }) => (
   <div
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML={{
@@ -515,7 +514,7 @@ XssSafety.story = {
   },  
 };
 
-export const generateRandomData = ({ props: { street } }) => street;
+export const generateRandomData = ({ 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 = ({ props: { name, age } } : { props: DocsControlsEditorsTable }) => {
+export const docsControlsEditorsTable = ({ name, age }: 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,25 +8,25 @@ 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: {
-    controls: {
+    addonControls: {
       smart: {
         include: ['color', 'backgroundColor'],
       },
     },
   },
 };
 
-export const noColors = ({ props }) => <Button label="Choose colors" {...props} />;
+export const noColors = props => <Button label="Choose colors" {...props} />;
 
 noColors.story = {
   parameters: {
-    controls: {
+    addonControls: {
       smart: {
         exclude: ['color', 'backgroundColor'],
       },

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';
       }  
     }}
     >
-    {({ props: { text } }) => (
+    {({ text }) => (
       <Button label={text}/>
     )}  
   </Story>

diff --git a/integrations/storybook/README.md b/integrations/storybook/README.md
@@ -292,7 +292,7 @@ export const smartControls = props => ({
 ```js
 onlyColors.story = {
   parameters: {
-    controls: {
+    addonControls: {
       smart: {
         include: ['color', 'backgroundColor'],
       },
@@ -306,7 +306,7 @@ onlyColors.story = {
 ```js
 noColors.story = {
   parameters: {
-    controls: {
+    addonControls: {
       smart: {
         exclude: ['color', 'backgroundColor'],
       },

diff --git a/integrations/storybook/src/config-legacy.ts b/integrations/storybook/src/config-legacy.ts
@@ -1,4 +1,4 @@
-import { addDecorator, addParameters, useEffect } from '@storybook/client-api';
+import { addDecorator, 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';
@@ -32,20 +32,14 @@ addDecorator(
           channel.removeListener(SET_DATA_MSG, onNewData);
         };
       }, []);
-      const { controls } = context.parameters || {};
-      const { modernSyntax } = controls;
+      const { controls, addonControls } = context.parameters || {};
+      const { legacyContext = false } = addonControls || {};
       const props = getControlValues(controls);
-      if (modernSyntax) {
-        //@ts-ignore
-        return storyFn(props, context);
+      if (legacyContext) {
+        return storyFn({ ...context, props });
       }
-      return storyFn({ ...context, props });
+      //@ts-ignore
+      return storyFn(props, context);
     },
   }),
 );
-
-addParameters({
-  controls: {
-    legacy: true,
-  },
-});
diff --git a/integrations/storybook/src/config-smart.ts b/integrations/storybook/src/config-smart.ts
@@ -5,7 +5,7 @@ addParameters({
   options: {
     enhanceControls: extractSmartControls,
   },
-  controls: {
+  addonControls: {
     smart: true,
   },
 });
diff --git a/integrations/storybook/src/manager/NoControls.tsx b/integrations/storybook/src/manager/NoControls.tsx
@@ -1,9 +1,25 @@
 import React from 'react';
+import { styled } from '@storybook/theming';
 
+const Container = styled.div`
+  padding: 30px;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}  
+`;
+
+const Title = styled.div`
+  font-weight: 700;
+}
+`;
 export const NoControls = () => (
-  <>
-    <>No controls found</>
-    <>
+  <Container>
+    <Title>No controls found</Title>
+    <div>
       Learn how to&nbsp;
       <a
         href="https://github.com/ccontrols/component-controls/tree/master/integrations/storybook/README.md"
@@ -12,6 +28,6 @@ export const NoControls = () => (
       >
         dynamically interact with components
       </a>
-    </>
-  </>
+    </div>
+  </Container>
 );
diff --git a/integrations/storybook/src/smartControls.tsx b/integrations/storybook/src/smartControls.tsx
@@ -183,8 +183,8 @@ export const extractSmartControls = (
   parameters: Parameters,
 ): ComponentControls | null => {
   const params = parameters || {};
-  const { component, framework = null, controls = {} } = params;
-  const { smart: smartControls } = controls;
+  const { component, framework = null, addonControls = {} } = params;
+  const { smart: smartControls } = addonControls;
   if (!smartControls) {
     return null;
   }