feat: updated docs and context for block

ccontrols · Mar 22, 2020 · bd76888 · bd76888
1 parent b6502aa
commit bd76888
Show file tree

Hide file tree

Showing 23 changed files with 512 additions and 539 deletions.
diff --git a/integrations/storybook/src/blocks/BlockContext.tsx b/integrations/storybook/src/blocks/BlockContext.tsx
@@ -1,17 +1,56 @@
 import React from 'react';
 import { BlockContext } from '@component-controls/blocks';
+import storyStore from '@component-controls/loader/story-store-data';
 import { DocsContext } from '@storybook/addon-docs/blocks';
+import { FORCE_RE_RENDER } from '@storybook/core-events';
+import {
+  SetControlValueFn,
+  ClickControlFn,
+  ComponentControlButton,
+} from '@component-controls/specification';
+import { mergeControlValues } from '@component-controls/core';
+import { SET_DATA_MSG } from '../shared/shared';
 
 export const BlockContextProvider: React.FC = ({ children }) => {
   const context = React.useContext(DocsContext);
   const { id: currentId, clientApi, channel } = context as any;
-
+  const story = storyStore && storyStore[currentId];
+  const { controls } = story || {};
+  const setControlValue: SetControlValueFn =
+    clientApi && clientApi.setControlValue
+      ? clientApi.setControlValue
+      : (storyId: string, propName: string | undefined, propValue: any) => {
+          if (controls) {
+            const newValues = mergeControlValues(controls, propName, propValue);
+            Object.keys(controls).forEach(key => {
+              controls[key] = newValues[key];
+            });
+            channel.emit(FORCE_RE_RENDER);
+            channel.emit(SET_DATA_MSG, {
+              storyId,
+              controls: newValues,
+            });
+          }
+        };
+  const clickControl: ClickControlFn =
+    clientApi && clientApi.clickControl
+      ? clientApi.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);
+            }
+          }
+        };
   return (
     <BlockContext.Provider
       value={{
-        api: clientApi,
         currentId,
-        channel,
+        setControlValue,
+        clickControl,
       }}
     >
       {children}

diff --git a/integrations/storybook/src/blocks/ControlsTable.tsx b/integrations/storybook/src/blocks/ControlsTable.tsx
@@ -1,18 +1,10 @@
 import React, { FC } from 'react';
-import { FORCE_RE_RENDER } from '@storybook/core-events';
-import {
-  SetControlValueFn,
-  ClickControlFn,
-  ComponentControlButton,
-} from '@component-controls/specification';
-import { mergeControlValues } from '@component-controls/core';
 import {
   BlockControlsTable,
   BlockControlsTableProps,
   useStoryContext,
 } from '@component-controls/blocks';
 
-import { SET_DATA_MSG } from '../shared/shared';
 import { ThemeProvider } from '../shared/ThemeProvider';
 export type ControlsTableProps = BlockControlsTableProps;
 
@@ -21,52 +13,19 @@ export const ControlsTable: FC<ControlsTableProps> = ({
   name,
   ...rest
 }) => {
-  const { id, story, api, channel } = useStoryContext({
+  const { id, story } = useStoryContext({
     id: propId,
     name,
   });
   const { controls } = story || {};
-  const setControlValue: SetControlValueFn =
-    api && api.setControlValue
-      ? api.setControlValue
-      : (storyId: string, propName: string | undefined, propValue: any) => {
-          if (controls) {
-            const newValues = mergeControlValues(controls, propName, propValue);
-            Object.keys(controls).forEach(key => {
-              controls[key] = newValues[key];
-            });
-            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 (!controls || controls.disable) {
     return null;
   }
 
   return id ? (
     <ThemeProvider>
-      <BlockControlsTable
-        id={id}
-        setControlValue={setControlValue}
-        clickControl={clickControl}
-        {...rest}
-      />
+      <BlockControlsTable id={id} {...rest} />
     </ThemeProvider>
   ) : null;
 };
diff --git a/integrations/storybook/src/manager/Panel.tsx b/integrations/storybook/src/manager/Panel.tsx
@@ -8,6 +8,7 @@ import {
 import { SetControlValueFn } from '@component-controls/specification';
 import { SET_STORIES } from '@storybook/core-events';
 import { API } from '@storybook/api';
+import { BlockContext } from '@component-controls/blocks';
 import { ControlsTable as SharedControlsTable } from '@component-controls/blocks';
 import {
   SET_DATA_MSG,
@@ -69,11 +70,14 @@ const WrappedControlsTable: React.FC<WrappedControlsTableProps> = ({
     <Wrapper className="addon-controls-panel">
       <Container>
         <ThemeProvider>
-          <SharedControlsTable
-            id={story?.id}
-            setControlValue={setControlValue}
-            clickControl={api.clickControl}
-          />
+          <BlockContext.Provider
+            value={{
+              currentId: story?.id,
+              setControlValue,
+            }}
+          >
+            <SharedControlsTable id={story?.id} />
+          </BlockContext.Provider>
         </ThemeProvider>
       </Container>
     </Wrapper>

diff --git a/integrations/storybook/src/preview/PreviewPanel.tsx b/integrations/storybook/src/preview/PreviewPanel.tsx
@@ -3,26 +3,16 @@ import { ControlsTable as SharedControlsTable } from '@component-controls/blocks
 
 export const createControlsPanel = ({
   storyId,
-  context,
 }: {
   storyId: string;
-  context: any;
 }): any | null => {
   // @ts-ignore
-  const { clientApi: api } = context;
   const name = 'controls';
-  const { setControlValue, clickControl } = api;
   return (expanded: any): any => {
     switch (true) {
       case expanded === name: {
         return {
-          node: (
-            <SharedControlsTable
-              id={storyId}
-              setControlValue={setControlValue}
-              clickControl={clickControl}
-            />
-          ),
+          node: <SharedControlsTable id={storyId} />,
           title: `Hide ${name}`,
         };
       }

diff --git a/ui/blocks/README.md b/ui/blocks/README.md
@@ -15,6 +15,7 @@
     -   [<ins>StorySource</ins>](#insstorysourceins)
     -   [<ins>Subtitle</ins>](#inssubtitleins)
     -   [<ins>Title</ins>](#institleins)
+    -   [<ins>InvalidType</ins>](#insinvalidtypeins)
 
 # Overview
 
@@ -124,12 +125,6 @@ _BlockControlsTable [source code](https:/github.com/ccontrols/component-controls
 
 **Properties:**
 
--   **setControlValue**? : _SetControlValueFn_
-
-    generic function to update the values of component controls.
--   **clickControl**? : _ClickControlFn_
-
-    generic function to propagate a click event for component controls.
 -   **id**? : _string_
 
     id of the story
@@ -150,12 +145,6 @@ _ControlsTable [source code](https:/github.com/ccontrols/component-controls/blob
 
 **Properties:**
 
--   **setControlValue**? : _SetControlValueFn_
-
-    generic function to update the values of component controls.
--   **clickControl**? : _ClickControlFn_
-
-    generic function to propagate a click event for component controls.
 -   **id**? : _string_
 
     id of the story
@@ -175,13 +164,16 @@ _SingleControlsTable [source code](https:/github.com/ccontrols/component-control
 
 -   **controls**? : _ComponentControls_
 
-    componnet controls to display in the table.
+    component controls to display in the table.
 -   **storyId**? : _string_
 
     storyId, will be used to update the values of the controls
 -   **setControlValue**? : _SetControlValueFn_
 
     generic function to update the values of component controls.
+-   **clickControl**? : _ClickControlFn_
+
+    generic function to propagate a click event for component controls.
 
 ## <ins>Description</ins>
 
@@ -207,6 +199,9 @@ _BlockPropsTable [source code](https:/github.com/ccontrols/component-controls/bl
 
 **Properties:**
 
+-   **extraColumns**? : _Column&lt;{}>\[]_
+
+    extra custom columns passed to the PropsTable.
 -   **of**? : _any_
 
     Specify the component(s), for which to have information displayed.
@@ -243,6 +238,9 @@ _PropsTable [source code](https:/github.com/ccontrols/component-controls/blob/ma
 
 **Properties:**
 
+-   **extraColumns**? : _Column&lt;{}>\[]_
+
+    extra custom columns passed to the PropsTable.
 -   **of**? : _any_
 
     Specify the component(s), for which to have information displayed.
@@ -407,4 +405,10 @@ _Title [source code](https:/github.com/ccontrols/component-controls/blob/master/
     text to be displayed in the component.
 -   **ref**? : _((instance: HTMLHeadingElement) => void) | RefObject&lt;HTMLHeadingElement>_
 
+## <ins>InvalidType</ins>
+
+error message when the control type is not found.
+
+_InvalidType [source code](https:/github.com/ccontrols/component-controls/blob/master/ui/blocks/src/notifications/InvalidType.tsx)_
+
 <!-- END-REACT-DOCGEN-TYPESCRIPT -->
diff --git a/ui/blocks/package.json b/ui/blocks/package.json
@@ -41,8 +41,8 @@
     "qs": "^6.9.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
-    "theme-ui": "^0.3.1",
-    "@theme-ui/prism": "^0.3.0"
+    "react-table": "^7.0.0",
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "@types/jest": "^25.1.2",
@@ -56,7 +56,9 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "react-table": "*",
+    "theme-ui": "*"
   },
   "publishConfig": {
     "access": "public"

diff --git a/ui/blocks/src/ControlsTable/block/BlockControlsTable.stories.tsx b/ui/blocks/src/ControlsTable/block/BlockControlsTable.stories.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import { ControlTypes } from '@component-controls/specification';
-import {
-  LoadedComponentControls,
-  mergeControlValues,
-} from '@component-controls/core';
+import { StoryContextConsumer } from '../../context/story/StoryContext';
 import { MockContext } from '../../test/MockContext';
 import { BlockControlsTable } from './BlockControlsTable';
 
@@ -13,42 +9,14 @@ export default {
 };
 
 export const overview = () => {
-  const [controls, setControls] = React.useState<LoadedComponentControls>({
-    name: {
-      type: ControlTypes.TEXT,
-      label: 'Name',
-      value: 'Mark',
-      defaultValue: 'Mark',
-    },
-    age: {
-      type: ControlTypes.NUMBER,
-      label: 'Age',
-      value: 19,
-      defaultValue: 19,
-    },
-  });
-
   return (
-    <MockContext controls={controls}>
-      <h2>{`Hello, my name is ${controls.name.value}, and I am ${controls.age.value} years old.`}</h2>
-      <BlockControlsTable
-        title="Example controls"
-        id="story"
-        setControlValue={(storyId, name, value) =>
-          setControls(mergeControlValues(controls, name, value))
-        }
-        clickControl={() =>
-          setControls(
-            mergeControlValues(
-              controls,
-              'age',
-              typeof controls.age.value === 'string'
-                ? parseInt(controls.age.value, 10) + 1
-                : 19,
-            ),
-          )
-        }
-      />
+    <MockContext storyId="controls">
+      <StoryContextConsumer id="controls">
+        {({ story: { controls } = {} }) => (
+          <h2>{`Hello, my name is ${controls?.name.value}, and I am ${controls?.age.value} years old.`}</h2>
+        )}
+      </StoryContextConsumer>
+      <BlockControlsTable title="Example controls" id="." />
     </MockContext>
   );
 };