feat: synchronize manage/preview legacy mode

.storybook/main.js

@@ -10,6 +10,7 @@ module.exports = {
     {
       name: path.resolve(require.resolve('@component-controls/storybook'), '..', '..','src', 'preset.js'),
       options: {
+        legacy: true,
       },
     },  
 

.storybook/preview.js

@@ -2,59 +2,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 { 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';
-
+import { ControlsEditorsTable, ThemeProvider } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
   const { controls } = ctx.parameters || {};
-
   return (
-    <ThemeProvider theme={{
-      ...theme,
-      styles: {
-        ...theme.styles,
-        table: {
-          margin: 0,
-          borderCollapse: 'collapse',
-          fontSize: '14px',
-          lineHeight: '20px',
-          textAlign: 'left',
-          width: '100%',
-          borderSpacing: '0px',
-        },
-        td: {
-          paddingTop: '16px',
-          paddingBottom: '16px',
-          paddingLeft: '20px',
-        },
-        tr: {
-          borderTop: '1px solid rgba(0, 0, 0, 0.1)',
-        },
-
-      },
-      buttons: {
-        primary: {
-          color: '#333',
-          bg: '#f3f3f3',
-          borderRadius: 5,
-          boxShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset',
-        },
-        secondary: {
-          bg: 'highlight',
-         }  
-      },
-      colors: {
-        ...theme.colors,
-        accent: '#1EA7FD',
-        fadedText: lighten(0.25, theme.colors.text),
-        lightenPrimary: lighten(0.4, theme.colors.primary),
-
-      },
-    }}>
+    <ThemeProvider>
       {story(getControlValues(controls))}
     </ThemeProvider>
   );

core/core/package.json

@@ -47,5 +47,5 @@
   "authors": [
     "Atanas Stoyanov"
   ],
-  "gitHead": "9bf25e7273da18b16567f776a8286496097ed6f5"
+  "gitHead": "d01851e6b244a4e04dd5eed1146bffb5cceb3e5a"
 }

core/editors/package.json

@@ -65,5 +65,6 @@
   },
   "authors": [
     "Atanas Stoyanov"
-  ]
+  ],
+  "gitHead": "d01851e6b244a4e04dd5eed1146bffb5cceb3e5a"
 }

core/editors/src/forms/ControlsTable/ControlEditorsTable.tsx

@@ -65,7 +65,7 @@ const PropGroupTable: FC<ControlsEditorsTableProps> = ({
   setControlValue,
   clickControl,
 }) => (
-  <StyleTable className="docblock-propeditorstable">
+  <StyleTable className="component-controls-table">
     <tbody>
       {controls &&
         Object.keys(controls)
@@ -153,11 +153,14 @@ export const ControlsEditorsTable: FC<ControlsEditorsTableProps & {
           controls: groupped[key],
         };
       });
+    if (groupedItems.length === 0) {
+      return null;
+    }
     return (
       <BlockWrapper>
         {title && <PropEditorsTitle>{title}</PropEditorsTitle>}
-        {Object.keys(groupped).length < 2 ? (
-          <PropGroupTable {...props} />
+        {groupedItems.length === 1 ? (
+          <PropGroupTable {...props} controls={groupedItems[0].controls} />
         ) : (
           <Tabs>
             <TabList>

core/specification/package.json

@@ -45,5 +45,5 @@
   "authors": [
     "Atanas Stoyanov"
   ],
-  "gitHead": "9bf25e7273da18b16567f776a8286496097ed6f5"
+  "gitHead": "d01851e6b244a4e04dd5eed1146bffb5cceb3e5a"
 }

integrations/storybook/.storybook/stories/controls-editors-table.stories.tsx

@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { ControlsEditorsTable } from '@component-controls/storybook';
 
 export default {
-  title: 'Storybook/blocks/ControlsEditorsTable',
+  title: 'Storybook/Blocks/ControlsEditorsTable',
   parameters: {
     component: ControlsEditorsTable,
   },

integrations/storybook/.storybook/stories/controls-editors.stories.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Title, Subtitle, Description, Story, Props, Stories } from '@storybook/addon-docs/blocks';
 
 export default {
-  title: 'Storybook/controls',
+  title: 'Storybook/Controls',
 };
 
 export const textDefaultProp = ({ text }) => text;

integrations/storybook/.storybook/stories/inherit-from-kind.stories.tsx

@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { ControlsEditorsTable } from '@component-controls/storybook';
 
 export default {
-  title: 'Storybook/kind',
+  title: 'Storybook/Kind',
   component: ControlsEditorsTable,
   parameters:{ 
     controls: {

integrations/storybook/.storybook/stories/smart-controls.stories.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Button from '../components/BaseButton';
 
 export default {
-  title: 'Storybook/smart',
+  title: 'Storybook/Smart',
   parameters: {
     component: Button,
   },

integrations/storybook/.storybook/stories/smart-controls.stories.mdx

@@ -9,7 +9,7 @@ import { ControlsEditorsTable } from '@component-controls/storybook';
 import Button from '../components/BaseButton';
 
 
-<Meta title="Storybook/mdx" parameters={{component: Button}} />
+<Meta title="Storybook/MDX" parameters={{component: Button}} />
 
 # Smart controls
 

integrations/storybook/README.md

@@ -13,7 +13,6 @@
     * [With Vue.js](#with-vue.js)
     * [With Angular](#with-angular)
     * [With Ember](#with-ember)
-    * [With Ember](#with-ember)
   * [Available Controls](#available-controls)
   * [Smart Controls](#smart-controls)
     * [Examples](#smart-controls-examples)
@@ -23,7 +22,7 @@
     * [Smart controls options](#smart-controls-options)  
   * [Random Data Generators](#testing-with-random-data-generators)  
   * [Categories](#categories)
-  * [Storybook Docs Block](#doc-blocks)
+  * [Storybook Docs Block](#storybook-docs-block)
   * [Options](#options)
     * [smart](#smart-option)
     * [addonPanel](#addonPanel-option)
@@ -51,13 +50,13 @@ Addon controls and the  bundled "smart-controls" can work with all frameworks su
 ## Introduction writing custom controls
 
 <p align="center">
-  <img src="./docs/controls-react-starter.gif" alt="introduction to using controls" width="738">
+  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/controls-react-starter.gif" alt="introduction to using controls" width="738">
 </p>
 
 ## Intro using smart-controls
 
 <p align="center">
-  <img src="./docs/intro-smart-controls.gif" alt="introduction to using smart-controls" width="738">
+  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/intro-smart-controls.gif" alt="introduction to using smart-controls" width="738">
 </p>
 
 ## Getting Started
@@ -223,7 +222,7 @@ controlsStory.story = {
 The list of available controls and their documented properties is available [here](https://github.com/ccontrols/component-controls/blob/master/core/specification/src/types.ts)
 
 
-## Smart Controls Examples
+## Smart Controls
 
 Smart Controls use a story component's properties table type information to generate automatically controls for the story. 
 
@@ -234,9 +233,10 @@ By default, Addon Controls enables the smart-controls option for your storybook
 A screenshot of smart controls in action.
 
 <p align="center">
-  <img src="./docs/smart-controls.jpg" alt="control groups" width="428">
+  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/smart-controls.jpg" alt="control groups" width="428">
 </p>
 
+## Smart Controls Examples
 
 ### Smart Controls React
 ```js
@@ -369,7 +369,7 @@ groupedControls.story = {
 You can see Controls in separate tabs as shown below.
 
 <p align="center">
-  <img src="./docs/grouped-controls.jpg" alt="control groups" width="428">
+  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/grouped-controls.jpg" alt="control groups" width="428">
 </p>
 
 
@@ -449,7 +449,7 @@ Setting this option to `false` will disable auto-generating of controls for stor
 Setting this option to `false` will disable showing the Controls panel in the addons section within the Storybook Canvas page:
 
 <p align="center">
-  <img src="./docs/option-addonPanel.jpg" alt="addon panel" width="428">
+  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-addonPanel.jpg" alt="addon panel" width="428">
 </p>
 
 
@@ -458,15 +458,15 @@ Setting this option to `false` will disable showing the Controls panel in the ad
 Setting this option to `false` will disable showing an additional tab and panel with Controls in the `<Preview />` component within the Storybopok DocsPage:
 
 <p align="center">
-  <img src="./docs/option-docsPreview.jpg" alt="docs preview addon" width="428">
+  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-docsPreview.jpg" alt="docs preview addon" width="428">
 </p>
 
 ### **docsProps** option
 
 Setting this option to `false` will disable showing an additional columns with Controls in the `<Props />` component within the Storybopok DocsPage:
 
 <p align="center">
-  <img src="./docs/option-docsProps.jpg" alt="docs preview addon" width="428">
+  <img src="https://raw.githubusercontent.com/ccontrols/component-controls/master/integrations/storybook/docs/option-docsProps.jpg" alt="docs preview addon" width="428">
 </p>
 
 

integrations/storybook/package.json

@@ -35,8 +35,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@component-controls/editors": "latest",
-    "@component-controls/specification": "latest",
+    "@component-controls/editors": "^0.2.0",
+    "@component-controls/specification": "^0.2.0",
+    "@theme-ui/presets": "^0.3.0",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "faker": "^4.1.0",
@@ -73,5 +74,6 @@
   },
   "authors": [
     "Atanas Stoyanov"
-  ]
+  ],
+  "gitHead": "d01851e6b244a4e04dd5eed1146bffb5cceb3e5a"
 }

integrations/storybook/src/blocks/ControlsEditorsTable.tsx

@@ -8,6 +8,7 @@ import {
 } from '@component-controls/core';
 import { CURRENT_SELECTION, DocsContext } from '@storybook/addon-docs/blocks';
 import { ControlsTable } from '../shared/ControlsTable';
+import { SET_DATA_MSG } from '../shared/shared';
 
 interface ControlsEditorsTableProps {
   title?: string;
@@ -65,12 +66,17 @@ export const ControlsEditorsTable: React.FC<ControlsEditorsTableProps> = ({
         : (storyId: string, propName: string | undefined, propValue: any) => {
             const story: any = storyStore._data[storyId];
             if (story) {
-              story.parameters.controls = mergeControlValues(
+              const newValues = mergeControlValues(
                 story.parameters.controls,
                 propName,
                 propValue,
               );
+              story.parameters.controls = newValues;
               context.channel.emit(FORCE_RE_RENDER);
+              context.channel.emit(SET_DATA_MSG, {
+                storyId,
+                controls: newValues,
+              });
             }
           };
       return id ? (

integrations/storybook/src/config-legacy.js

@@ -0,0 +1,36 @@
+import { addDecorator, addParameters, useEffect } from '@storybook/client-api';
+import { __STORYBOOK_STORY_STORE__ as storyStore } from 'global';
+import addons, { makeDecorator } from '@storybook/addons';
+import { FORCE_RE_RENDER } from '@storybook/core-events';
+
+import { SET_DATA_MSG } from './shared/shared';
+
+addDecorator(
+  makeDecorator({
+    name: 'legacyControls',
+    parameterName: 'controls',
+    wrapper: (storyFn, context) => {
+      const channel = addons.getChannel();
+      useEffect(() => {
+        const onNewData = ({ storyId, controls }) => {
+          const story = storyStore._data[storyId];
+          if (story) {
+            story.parameters.controls = controls;
+          }
+          channel.emit(FORCE_RE_RENDER);
+        };
+        channel.on(SET_DATA_MSG, onNewData);
+        return () => {
+          channel.removeListener(SET_DATA_MSG, onNewData);
+        };
+      }, []);
+      return storyFn(context);
+    },
+  }),
+);
+
+addParameters({
+  controls: {
+    legacy: true,
+  },
+});

integrations/storybook/src/index.ts

@@ -1,2 +1,3 @@
 export { extractSmartControls } from './smartControls';
 export * from './blocks';
+export { ThemeProvider } from './shared/ThemeProvider';

integrations/storybook/src/manager/NoControls.tsx

@@ -7,7 +7,7 @@ export const NoControls = () => (
     <>
       Learn how to&nbsp;
       <Link
-        href="https://github.com/storybookjs/storybook/tree/master/addons/controls"
+        href="https://github.com/ccontrols/component-controls/tree/master/integrations/storybook/README.md"
         target="_blank"
         withArrow
         cancel={false}