fix: sb5 compat

.storybook/main.js

@@ -1,4 +1,5 @@
 const path = require('path');
+console.log(path.resolve(path.dirname(require.resolve('@component-controls/storybook')), 'preset.js'));
 module.exports = {
   presets:[
     {
@@ -8,7 +9,7 @@ module.exports = {
       },
     },  
     {
-      name: path.resolve(require.resolve('@component-controls/storybook'), '..', '..','src', 'preset.js'),
+      name: path.resolve(path.dirname(require.resolve('@component-controls/storybook')), 'preset.js'),
       options: {
         legacy: true,
       },

.storybook/preview.js

@@ -38,6 +38,7 @@ export const DocsPage = ({
 const categories = ['Table', 'Editors', 'Components']
 addParameters({
   docs: { page: DocsPage },
+  dependencies: { hideEmpty: true },
   options: {
     storySort: (a, b) => {
       const aKind = a[1].kind.split('/')[0];

core/core/package.json

@@ -31,9 +31,11 @@
   "dependencies": {
     "@component-controls/specification": "^0.3.0",
     "escape-html": "^1.0.3",
+    "faker": "^4.1.0",
     "typescript": "3.5.3"
   },
   "devDependencies": {
+    "@types/faker": "^4.1.9",
     "@types/jest": "^25.1.2",
     "cross-env": "^5.2.1",
     "docz-rollup": "^2.1.0",

core/core/src/index.ts

@@ -1 +1,2 @@
 export * from './utils';
+export { randomizeData } from './randomizeData';

integrations/storybook/src/__tests/randomize.test.ts → core/core/src/randomize.test.ts

@@ -1,10 +1,7 @@
 import faker from 'faker';
-import {
-  LoadedComponentControls,
-  LoadedComponentControl,
-  ControlTypes,
-} from '@component-controls/specification';
-import { randomizeData } from '../shared/randomizeData';
+import { LoadedComponentControls, LoadedComponentControl } from './utils';
+import { ControlTypes } from '@component-controls/specification';
+import { randomizeData } from '@component-controls/core/src/randomizeData';
 
 describe('Options utility functions', () => {
   const name: LoadedComponentControl = {

integrations/storybook/src/shared/randomizeData.ts → core/core/src/randomizeData.ts

@@ -2,7 +2,7 @@ import {
   ControlTypes,
   ComponentControlOptions,
 } from '@component-controls/specification';
-import { LoadedComponentControls } from '@component-controls/core';
+import { LoadedComponentControls } from './utils';
 
 import faker from 'faker';
 

core/core/src/utils.ts

@@ -36,7 +36,14 @@ const mergeValue = (control: ComponentControl, value: any): any => {
       ),
     };
   }
-  return { ...control, value };
+  return {
+    ...control,
+    value,
+    defaultValue:
+      (control as LoadedComponentControl).defaultValue === undefined
+        ? control.value
+        : (control as LoadedComponentControl).defaultValue,
+  };
 };
 
 export const mergeControlValues = (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ControlTypes } from '@component-controls/specification';
-import { ControlsEditorsTable } from '@component-controls/storybook';
+import { ControlsEditorsTable } from '../../src/blocks/ControlsEditorsTable';
 
 export default {
   title: 'Storybook/Blocks/ControlsEditorsTable',

integrations/storybook/package.json

@@ -40,23 +40,20 @@
     "@theme-ui/presets": "^0.3.0",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
-    "faker": "^4.1.0",
     "global": "^4.3.2",
     "qs": "^6.6.0",
     "react": "^16.12.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^6.0.0-alpha.8",
-    "@storybook/addons": "^6.0.0-alpha.8",
-    "@storybook/api": "^6.0.0-alpha.8",
-    "@storybook/client-api": "^6.0.0-alpha.8",
-    "@storybook/components": "^6.0.0-alpha.8",
+    "@storybook/addon-docs": "^5.3.12",
+    "@storybook/addons": "^5.3.12",
+    "@storybook/api": "^5.3.12",
+    "@storybook/client-api": "^5.3.12",
+    "@storybook/components": "^5.3.12",
     "@storybook/csf": "0.0.1",
-    "@storybook/react": "^6.0.0-alpha.8",
-    "@storybook/theming": "^6.0.0-alpha.8",
-    "@types/faker": "^4.1.9",
-    "@types/node": "^13.7.0",
-    "babel-loader": "^8.0.6"
+    "@storybook/react": "^5.3.12",
+    "@storybook/theming": "^5.3.12",
+    "@types/node": "^13.7.0"
   },
   "peerDependencies": {
     "@storybook/addon-docs": "*",

integrations/storybook/rollup.config.js

@@ -1,5 +1,13 @@
 import { config } from 'docz-rollup';
 
 export default config({
-  input: './src/index.ts',
+  input: [
+    './src/index.ts',
+    './src/preset.ts',
+    './src/config-legacy.ts',
+    './src/config-preview.ts',
+    './src/config-props-table.ts',
+    './src/config-smart.ts',
+    './src/register.tsx',
+  ],
 });

integrations/storybook/src/blocks/ControlsEditorsTable.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { toId, storyNameFromExport } from '@storybook/csf';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
 import { SetControlValueFn } from '@component-controls/specification';
@@ -52,7 +52,7 @@ const getPropertyProps = (
     controls: data.controls || data.parameters.controls,
   };
 };
-export const ControlsEditorsTable: React.FC<ControlsEditorsTableProps> = ({
+export const ControlsEditorsTable: FC<ControlsEditorsTableProps> = ({
   title = 'Property Editors',
   ...rest
 }) => (

integrations/storybook/src/config-legacy.js → integrations/storybook/src/config-legacy.ts

@@ -1,4 +1,5 @@
 import { addDecorator, addParameters, useEffect } from '@storybook/client-api';
+import { ComponentControls } from '@component-controls/specification';
 import { __STORYBOOK_STORY_STORE__ as storyStore } from 'global';
 import addons, { makeDecorator } from '@storybook/addons';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
@@ -12,7 +13,13 @@ addDecorator(
     wrapper: (storyFn, context) => {
       const channel = addons.getChannel();
       useEffect(() => {
-        const onNewData = ({ storyId, controls }) => {
+        const onNewData = ({
+          storyId,
+          controls,
+        }: {
+          storyId: string;
+          controls: ComponentControls;
+        }) => {
           const story = storyStore._data[storyId];
           if (story) {
             story.parameters.controls = controls;

integrations/storybook/src/manager/Panel.tsx

@@ -8,13 +8,9 @@ import {
 import { SetControlValueFn } from '@component-controls/specification';
 
 import { API } from '@storybook/api';
-//@ts-ignore
-import { SET_DATA_MSG } from '../shared/shared.ts';
-
-//@ts-ignore
-import { ControlsTable } from '../shared/ControlsTable.tsx';
-//@ts-ignore
-import { NoControls } from './NoControls.tsx';
+import { SET_DATA_MSG } from '../shared/shared';
+import { ControlsTable } from '../shared/ControlsTable';
+import { NoControls } from './NoControls';
 
 interface StoryInput {
   id: string;
@@ -96,7 +92,7 @@ export const PropsPanel: React.FC<PropsPanelProps> = ({
     }) => {
       const story = api.getData(storyId);
       if (story) {
-        story.parameters.controls = controls;
+        (story as any).parameters.controls = controls;
       }
     };
     channel.on(SET_DATA_MSG, onNewData);

integrations/storybook/src/preset.js → integrations/storybook/src/preset.ts

@@ -1,29 +1,29 @@
 module.exports = {
-  config: (entry = [], options = {}) => {
+  config: (entry: any[] = [], options: any = {}) => {
     const result = [...entry];
+    const { legacy = false } = options;
+    if (legacy) {
+      result.push(require.resolve('./config-legacy'));
+    }
+
     const { docsPreview = true } = options;
-    if (docsPreview) {
+    if (!legacy && docsPreview) {
       result.push(require.resolve('./config-preview'));
     }
     const { docsProps = true } = options;
     if (docsProps) {
       result.push(require.resolve('./config-props-table'));
     }
     const { smart = true } = options;
-    if (smart) {
+    if (!legacy && smart) {
       result.push(require.resolve('./config-smart'));
     }
-    const { legacy = false } = options;
-    if (legacy) {
-      result.push(require.resolve('./config-legacy'));
-    }
-
     return result;
   },
-  managerEntries: (entry = [], options = {}) => {
+  managerEntries: (entry: any[] = [], options: any = {}) => {
     const { addonPanel = true } = options;
     if (addonPanel) {
-      return [...entry, require.resolve('./manager/register')];
+      return [...entry, require.resolve('./register')];
     }
     return entry;
   },

integrations/storybook/src/preview/PreviewPanel.tsx

@@ -1,9 +1,4 @@
 import React from 'react';
-import {
-  PreviewPanelCallback,
-  PreviewExpandedState,
-  PanelItemType,
-} from '@storybook/components';
 import { ControlsTable } from '../shared/ControlsTable';
 
 export const createControlsPanel = ({
@@ -12,15 +7,15 @@ export const createControlsPanel = ({
 }: {
   storyId: string;
   context: any;
-}): PreviewPanelCallback | null => {
+}): any | null => {
   // @ts-ignore
   const { storyStore, clientApi: api } = context;
   const data = storyStore.fromId(storyId);
   const name = 'controls';
   if (data && data.controls && Object.keys(data.controls).length) {
-    const { setControlValue, resetControlValue, clickControl } = api;
+    const { setControlValue, clickControl } = api;
     const { controls } = data;
-    return (expanded: PreviewExpandedState): PanelItemType => {
+    return (expanded: any): any => {
       switch (true) {
         case expanded === name: {
           return {
@@ -29,7 +24,6 @@ export const createControlsPanel = ({
                 storyId={storyId}
                 controls={controls}
                 setControlValue={setControlValue}
-                resetControlValue={resetControlValue}
                 clickControl={clickControl}
               />
             ),

integrations/storybook/src/preview/PropsTable.tsx

@@ -1,11 +1,6 @@
 import React from 'react';
 import { styled } from '@storybook/theming';
-import {
-  PropDef,
-  PropsTableExtraColumn,
-  PropsTableExtraRows,
-  Icons,
-} from '@storybook/components';
+import { PropDef, Icons } from '@storybook/components';
 import {
   FlexContainer,
   PropertyEditor,
@@ -25,7 +20,7 @@ export const createPropsTableControls = ({
   storyId: string;
   rows: PropDef[];
   context: any;
-}): PropsTableExtraColumn => {
+}): any => {
   const api: any = (context as any).clientApi;
   const story = context.storyStore.fromId(storyId) || {};
   const { controls } = story;
@@ -42,7 +37,7 @@ export const createPropsTableControls = ({
   const rows = controls
     ? Object.keys(controls)
         .filter(name => propsTable.find(row => row.name === name) !== undefined)
-        .reduce((acc: PropsTableExtraRows, name) => {
+        .reduce((acc: any, name) => {
           const field = controls[name];
           const InputType: PropertyEditor = getPropertyEditor(field.type);
           if (InputType) {

integrations/storybook/src/manager/register.js → integrations/storybook/src/register.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import addons from '@storybook/addons';
-import { PropsPanel } from './Panel.tsx';
-//@ts-ignore
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from '../shared/shared.ts';
+import { PropsPanel } from './manager/Panel';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared/shared';
 
 addons.register(ADDON_ID, api => {
   addons.addPanel(PANEL_ID, {

integrations/storybook/src/shared/ControlsTable.tsx

@@ -3,10 +3,8 @@ import {
   ControlsEditorsTable,
   ControlsEditorsTableProps,
 } from '@component-controls/editors';
-//@ts-ignore
-import { ThemeProvider } from './ThemeProvider.tsx';
-//@ts-ignore
-import { randomizeData } from './randomizeData.ts';
+import { ThemeProvider } from './ThemeProvider';
+import { randomizeData } from '@component-controls/core';
 
 export const ControlsTable: React.FC<ControlsEditorsTableProps> = props => (
   <ThemeProvider>

integrations/storybook/src/shared/ThemeProvider.tsx

@@ -42,7 +42,7 @@ export const ThemeProvider: React.FC = ({ children }) => (
         ...theme.colors,
         accent: '#1EA7FD',
         fadedText: lighten(0.25, theme.colors.text),
-        lightenPrimary: lighten(0.4, theme.colors.primary),
+        lightenPrimary: '#F6F9FC',
       },
     }}
   >

integrations/storybook/tsconfig.json

@@ -8,6 +8,6 @@
     "types": ["node", "jest"],
     "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*", "src/typings.d.ts"],
   "exclude": ["node_modules/**"]
 }

package.json

@@ -50,10 +50,10 @@
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@commitlint/config-lerna-scopes": "^8.2.0",
-    "@storybook/addon-docs": "^6.0.0-alpha.8",
-    "@storybook/addon-storysource": "^6.0.0-alpha.8",
-    "@storybook/react": "^6.0.0-alpha.8",
-    "@storybook/theming": "^6.0.0-alpha.8",
+    "@storybook/addon-docs": "^5.3.12",
+    "@storybook/addon-storysource": "^5.3.12",
+    "@storybook/react": "^5.3.12",
+    "@storybook/theming": "^5.3.12",
     "@types/fs-extra": "^8.0.0",
     "@types/jest": "^24.0.15",
     "@types/lodash": "^4.14.136",
@@ -63,6 +63,7 @@
     "all-contributors-cli": "^6.8.0",
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
     "babel-plugin-lodash": "^3.3.4",
     "babel-preset-react-app": "^9.0.0",
     "commitizen": "^3.1.2",