feat: componnt import source

ccontrols · Feb 27, 2020 · d8a8231 · d8a8231
1 parent 3d69fe1
commit d8a8231
Show file tree

Hide file tree

Showing 9 changed files with 183 additions and 170 deletions.
diff --git a/blocks/core/src/Source/Source.stories.tsx b/blocks/core/src/Source/Source.stories.tsx
@@ -52,8 +52,7 @@ simpleSource.story = {
       source: {
         type: 'text',
         rows: 10,
-        value: `
-export const sample = () => {
+        value: `export const sample = () => {
   const [state, setState] = React.useState(false);
   return (
     <BooleanEditor
@@ -62,8 +61,7 @@ export const sample = () => {
       prop={{ type: ControlTypes.BOOLEAN, value: state }}
     />
   );
-};      
-      `,
+};`,
       },
     },
   },

diff --git a/blocks/core/src/Source/Source.tsx b/blocks/core/src/Source/Source.tsx
@@ -21,6 +21,7 @@ export const Source: React.FC<SourceProps> = ({
   theme,
   children,
 }) => {
+  console.log(source);
   const renderProps =
     typeof children === 'function'
       ? children

diff --git a/core/specification/src/stories.ts b/core/specification/src/stories.ts
@@ -109,6 +109,10 @@ export interface Story {
    * name of the Story.
    */
   name?: string;
+  /**
+   * title of the file/group of stories
+   */
+  kind?: string;
   /**
    * arguments pass to a CSF story
    * eg `export const story = props => <Story {...props} />;`

diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
 import { Title, Subtitle, Story, Stories, Props, Description } from '@storybook/addon-docs/blocks';
 import { DependenciesTable } from 'storybook-addon-deps/blocks';
-import { ControlsTable, ThemeProvider, Source, ImportSource } from '@component-controls/storybook';
+import { ControlsTable, ThemeProvider, Source, ImportSource, BlockContextProvider } from '@component-controls/storybook';
 
 addDecorator((story, ctx ) => {
   return (
@@ -20,18 +20,18 @@ export const DocsPage = ({
   storiesSlot,
 }) => {
   return (
-    <>
+    <BlockContextProvider>
       <Title slot={titleSlot} />
       <Subtitle slot={subtitleSlot} />
       <Description slot={descriptionSlot} />
-      <ImportSource />
+      <ImportSource id="." />
       <Story id="." />
       <Source id="." />
       <ControlsTable id="." />
       <Props slot={propsSlot} />
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />
       <Stories slot={storiesSlot} />
-    </>
+    </BlockContextProvider>  
   );
 };
 const categories = ['Storybook', 'Blocks', 'Editors', 'Components']

diff --git a/integrations/storybook/src/blocks/BlockContext.tsx b/integrations/storybook/src/blocks/BlockContext.tsx
@@ -1,41 +1,28 @@
 import React from 'react';
 import { toId, storyNameFromExport } from '@storybook/csf';
 import myStoryStore from '@component-controls/loader/story-store-data';
-import { Story, StoryArguments } from '@component-controls/specification';
+import {
+  Story,
+  StoryArguments,
+  StoryComponent,
+} from '@component-controls/specification';
 import { LoadedComponentControls } from '@component-controls/core';
 import { CURRENT_SELECTION, DocsContext } from '@storybook/addon-docs/blocks';
-import { ThemeProvider } from '../shared/ThemeProvider';
 
 export interface BlockContextProps {
-  controls: LoadedComponentControls;
-  args?: StoryArguments;
-  story: any;
   api?: any;
-  id?: string;
   channel: any;
-  source?: string;
-  fileSource?: string;
-  import?: string;
+  currentId?: string;
+  storyStore: any;
+  storyIdFromName: (name?: string) => string | undefined;
 }
 export const BlockContext = React.createContext<BlockContextProps>({
-  controls: {},
-  story: {},
   channel: {},
-  source: '',
+  storyStore: {},
+  storyIdFromName: name => name,
 });
 
-export interface BlockContextProviderProps {
-  /** id of the story */
-  id?: string;
-  /** name of the story */
-  name?: string;
-}
-
-export const BlockContextProvider: React.FC<BlockContextProviderProps> = ({
-  id,
-  name,
-  children,
-}) => {
+export const BlockContextProvider: React.FC = ({ children }) => {
   const context = React.useContext(DocsContext);
   const {
     id: currentId,
@@ -45,49 +32,86 @@ export const BlockContextProvider: React.FC<BlockContextProviderProps> = ({
     mdxComponentMeta,
     channel,
   } = context as any;
-  const inputId = id === CURRENT_SELECTION ? currentId : id;
-  const previewId =
-    inputId ||
-    (mdxStoryNameToKey &&
+
+  const storyIdFromName = (name?: string): string | undefined => {
+    return (
+      mdxStoryNameToKey &&
       mdxComponentMeta &&
       name &&
       toId(
         mdxComponentMeta.id || mdxComponentMeta.title,
         storyNameFromExport(mdxStoryNameToKey[name]),
-      ));
-  if (!previewId) {
-    return null;
-  }
-  const story = storyStore.fromId(previewId) || {};
-  // console.log(myStoryStore);
-  const myStory: Story = myStoryStore && myStoryStore.stories[previewId];
-  const kindTitle =
-    myStoryStore &&
-    myStoryStore.kinds &&
-    Object.keys(myStoryStore.kinds).find(key => {
-      const k = myStoryStore.kinds[key];
-      return k.stories.indexOf(previewId) > -1;
-    });
-  const kind = kindTitle ? myStoryStore.kinds[kindTitle] : undefined;
-  const source: string | undefined = myStory ? myStory.source : undefined;
-  if (kind && kind.component) {
-    console.log(kind.component.import);
-  }
+      )
+    );
+  };
   return (
     <BlockContext.Provider
       value={{
         api: clientApi,
-        id: story.id,
-        story,
+        currentId,
         channel,
-        source,
-        fileSource: kind ? kind.source : undefined,
-        import: kind && kind.component ? kind.component.import : undefined,
-        args: myStory.arguments,
-        controls: story.controls || story.parameters.controls,
+        storyIdFromName,
+        storyStore,
       }}
     >
-      <ThemeProvider>{children}</ThemeProvider>
+      {children}
     </BlockContext.Provider>
   );
 };
+
+export interface ControlsContextInputProps {
+  /** id of the story */
+  id?: string;
+  /** name of the story */
+  name?: string;
+}
+
+export interface ControlsContextProps {
+  api?: any;
+  channel?: any;
+  controls?: LoadedComponentControls;
+  args?: StoryArguments;
+  story?: any;
+  id?: string;
+  source?: string;
+  fileSource?: string;
+  component?: StoryComponent;
+}
+
+export const useControlsContext = ({
+  id,
+  name,
+}: ControlsContextInputProps): ControlsContextProps => {
+  const {
+    currentId,
+    storyStore,
+    storyIdFromName,
+    api,
+    channel,
+  } = React.useContext(BlockContext);
+  const inputId = id === CURRENT_SELECTION ? currentId : id;
+  const previewId = inputId || storyIdFromName(name);
+  if (!previewId) {
+    return {
+      api,
+      channel,
+    };
+  }
+  const story = storyStore.fromId(previewId) || {};
+  // console.log(myStoryStore);
+  const myStory: Story = myStoryStore && myStoryStore.stories[previewId];
+  const kindTitle = myStory.kind;
+  const kind = kindTitle ? myStoryStore.kinds[kindTitle] : undefined;
+  console.log(kind.component);
+  const source: string | undefined = myStory ? myStory.source : undefined;
+  return {
+    api,
+    channel,
+    story,
+    source,
+    fileSource: kind ? kind.source : undefined,
+    component: kind ? kind.component : undefined,
+    args: myStory.arguments,
+    controls: story.controls || story.parameters.controls,
+  };
+};
diff --git a/integrations/storybook/src/blocks/ControlsTable.tsx b/integrations/storybook/src/blocks/ControlsTable.tsx
@@ -6,73 +6,68 @@ import {
   ComponentControlButton,
 } from '@component-controls/specification';
 import { mergeControlValues } from '@component-controls/core';
-import {
-  BlockContext,
-  BlockContextProvider,
-  BlockContextProviderProps,
-} from './BlockContext';
+import { useControlsContext, ControlsContextInputProps } from './BlockContext';
 import { SharedControlsTable } from '../shared/ControlsTable';
 import { SET_DATA_MSG } from '../shared/shared';
-
-export interface ControlsTableProps {
+import { ThemeProvider } from '../shared/ThemeProvider';
+export type ControlsTableProps = ControlsContextInputProps & {
   /** a title to display */
   title?: string;
-}
-
-const ControlsTableBlock: FC<ControlsTableProps> = ({ title }) => (
-  <BlockContext.Consumer>
-    {({ id, controls, story, api, channel }) => {
-      const setControlValue: SetControlValueFn =
-        api && api.setControlValue
-          ? api.setControlValue
-          : (storyId: string, propName: string | undefined, propValue: any) => {
-              if (story) {
-                const newValues = mergeControlValues(
-                  story.parameters.controls,
-                  propName,
-                  propValue,
-                );
-                story.parameters.controls = newValues;
-                channel.emit(FORCE_RE_RENDER);
-                channel.emit(SET_DATA_MSG, {
-                  storyId,
-                  controls: newValues,
-                });
-              }
-            };
-      const clickControl: ClickControlFn =
-        api && api.clickControl
-          ? api.clickControl
-          : (storyId: string, propName: string) => {
-              if (controls && controls[propName]) {
-                const control: ComponentControlButton = controls[
-                  propName
-                ] as ComponentControlButton;
-                if (control && typeof control.onClick === 'function') {
-                  control.onClick(control);
-                }
-              }
-            };
-      if (!story || !controls || controls.disable) {
-        return null;
-      }
+};
 
-      return id ? (
-        <SharedControlsTable
-          title={title}
-          controls={controls}
-          storyId={id}
-          setControlValue={setControlValue}
-          clickControl={clickControl}
-        />
-      ) : null;
-    }}
-  </BlockContext.Consumer>
-);
+export const ControlsTable: FC<ControlsTableProps> = ({
+  title,
+  id: propId,
+  name,
+}) => {
+  const { id, controls, story, api, channel } = useControlsContext({
+    id: propId,
+    name,
+  });
+  const setControlValue: SetControlValueFn =
+    api && api.setControlValue
+      ? api.setControlValue
+      : (storyId: string, propName: string | undefined, propValue: any) => {
+          if (story) {
+            const newValues = mergeControlValues(
+              story.parameters.controls,
+              propName,
+              propValue,
+            );
+            story.parameters.controls = newValues;
+            channel.emit(FORCE_RE_RENDER);
+            channel.emit(SET_DATA_MSG, {
+              storyId,
+              controls: newValues,
+            });
+          }
+        };
+  const clickControl: ClickControlFn =
+    api && api.clickControl
+      ? api.clickControl
+      : (storyId: string, propName: string) => {
+          if (controls && controls[propName]) {
+            const control: ComponentControlButton = controls[
+              propName
+            ] as ComponentControlButton;
+            if (control && typeof control.onClick === 'function') {
+              control.onClick(control);
+            }
+          }
+        };
+  if (!story || !controls || controls.disable) {
+    return null;
+  }
 
-export const ControlsTable: FC<BlockContextProviderProps &
-  ControlsTableProps> = ({ title = 'Property Editors', ...rest }) => (
-  <BlockContextProvider {...rest}>
-    <ControlsTableBlock title={title} />
-  </BlockContextProvider>
-);
+  return id ? (
+    <ThemeProvider>
+      <SharedControlsTable
+        title={title}
+        controls={controls}
+        storyId={id}
+        setControlValue={setControlValue}
+        clickControl={clickControl}
+      />
+    </ThemeProvider>
+  ) : null;
+};