feat: props table featured controls with actions

ccontrols · May 3, 2020 · fc9a8f7 · fc9a8f7
1 parent 42944f2
commit fc9a8f7
Show file tree

Hide file tree

Showing 30 changed files with 381 additions and 241 deletions.
diff --git a/core/core/src/index.test.ts b/core/core/src/index.test.ts
@@ -1,20 +1,22 @@
-import { ControlTypes } from '@component-controls/specification';
+import {
+  ControlTypes,
+  ComponentControls,
+} from '@component-controls/specification';
 
 import {
   mergeControlValues,
   resetControlValues,
   getControlValues,
-  LoadedComponentControls,
 } from './index';
 
 describe('Controls utils', () => {
-  const controls: LoadedComponentControls = {
-    name: { type: ControlTypes.TEXT, value: 'hello', defaultValue: 'hello' },
-    age: { type: ControlTypes.NUMBER, value: 19, defaultValue: 19 },
+  const controls: ComponentControls = {
+    name: { type: ControlTypes.TEXT, value: 'hello', resetValue: 'hello' },
+    age: { type: ControlTypes.NUMBER, value: 19, resetValue: 19 },
   };
-  const modifiedControls: LoadedComponentControls = {
-    name: { type: ControlTypes.TEXT, value: 'today', defaultValue: 'hello' },
-    age: { type: ControlTypes.NUMBER, value: 19, defaultValue: 19 },
+  const modifiedControls: ComponentControls = {
+    name: { type: ControlTypes.TEXT, value: 'today', resetValue: 'hello' },
+    age: { type: ControlTypes.NUMBER, value: 19, resetValue: 19 },
   };
 
   it('Should merge property value', () => {

diff --git a/core/core/src/randomize.test.ts b/core/core/src/randomize.test.ts
@@ -1,30 +1,33 @@
 const faker = require('faker/locale/en_US');
-import { LoadedComponentControls, LoadedComponentControl } from './utils';
-import { ControlTypes } from '@component-controls/specification';
+import {
+  ControlTypes,
+  ComponentControls,
+  ComponentControl,
+} from '@component-controls/specification';
 import { randomizeData } from '@component-controls/core/src/randomizeData';
 
 describe('Options utility functions', () => {
-  const name: LoadedComponentControl = {
+  const name: ComponentControl = {
     type: ControlTypes.TEXT,
     value: 'Tom',
     defaultValue: 'Tom',
   };
-  const lastName: LoadedComponentControl = {
+  const lastName: ComponentControl = {
     type: ControlTypes.TEXT,
     value: 'Mark',
     defaultValue: 'Mark',
   };
-  const age: LoadedComponentControl = {
+  const age: ComponentControl = {
     type: ControlTypes.NUMBER,
     value: 19,
     defaultValue: 19,
   };
-  const male: LoadedComponentControl = {
+  const male: ComponentControl = {
     type: ControlTypes.BOOLEAN,
     value: true,
     defaultValue: true,
   };
-  const object: LoadedComponentControl = {
+  const object: ComponentControl = {
     type: ControlTypes.OBJECT,
     value: {
       name,
@@ -39,7 +42,7 @@ describe('Options utility functions', () => {
       male,
     },
   };
-  const controls: LoadedComponentControls = {
+  const controls: ComponentControl = {
     name,
     lastName,
     age,

diff --git a/core/core/src/randomizeData.ts b/core/core/src/randomizeData.ts
@@ -2,11 +2,10 @@ import {
   ControlTypes,
   ComponentControlNumber,
   ComponentControlOptions,
+  ComponentControls,
 } from '@component-controls/specification';
 const faker = require('faker/locale/en_US');
 
-import { LoadedComponentControls } from './utils';
-
 const arrayElements = (arr: any[], c?: number) => {
   const array = arr || ['a', 'b', 'c'];
   let count = 0;
@@ -32,9 +31,7 @@ interface RandomizedData {
   [key: string]: any;
 }
 
-export const randomizeData = (
-  controls: LoadedComponentControls,
-): RandomizedData => {
+export const randomizeData = (controls: ComponentControls): RandomizedData => {
   return Object.keys(controls)
     .map(name => {
       const control = controls[name];
@@ -109,7 +106,7 @@ export const randomizeData = (
             return {
               name,
               value: {
-                ...randomizeData(control.value as LoadedComponentControls),
+                ...randomizeData(control.value as ComponentControls),
               },
             };
           }

diff --git a/core/core/src/utils.ts b/core/core/src/utils.ts
@@ -6,31 +6,12 @@ import {
   ControlTypes,
 } from '@component-controls/specification';
 
-/**
- * once controls are loaded, the value is saved into
- * defaultValue, an additional field in Loaded...
- */
-
-export type LoadedComponentControl = ComponentControl & { defaultValue?: any };
-export interface LoadedComponentControls {
-  [name: string]: LoadedComponentControl;
-}
-
-// save default value for 'reset'
-export const loadControls = (
-  controls: ComponentControls,
-): LoadedComponentControls =>
-  Object.keys(controls).reduce((v, key) => {
-    const prop = controls[key];
-    return { ...v, [key]: { ...prop, defaultValue: prop.value } };
-  }, {});
-
 const mergeValue = (control: ComponentControl, value: any): any => {
   if (control && control.type === ControlTypes.OBJECT) {
     return {
       ...control,
       value: mergeControlValues(
-        control.value as LoadedComponentControls,
+        control.value as ComponentControls,
         undefined,
         value,
       ),
@@ -39,18 +20,16 @@ const mergeValue = (control: ComponentControl, value: any): any => {
   return {
     ...control,
     value,
-    defaultValue:
-      (control as LoadedComponentControl).defaultValue === undefined
-        ? control.value
-        : (control as LoadedComponentControl).defaultValue,
+    resetValue:
+      control.resetValue === undefined ? control.value : control.resetValue,
   };
 };
 
 export const mergeControlValues = (
-  controls: LoadedComponentControls,
+  controls: ComponentControls,
   controlName: string | undefined,
   value: any,
-): LoadedComponentControls => {
+): ComponentControls => {
   return controlName
     ? {
         ...controls,
@@ -69,15 +48,15 @@ export const mergeControlValues = (
 };
 
 export const resetControlValues = (
-  controls: LoadedComponentControls,
+  controls: ComponentControls,
   controlName?: string,
 ) => {
   return controlName
-    ? controls[controlName].defaultValue
+    ? controls[controlName].resetValue
     : Object.keys(controls).reduce(
         (acc, key) => ({
           ...acc,
-          [key]: controls[key].defaultValue,
+          [key]: controls[key].resetValue,
         }),
         {},
       );
@@ -88,7 +67,7 @@ export interface ControlValues {
 }
 
 export const getControlValue = (
-  controls: LoadedComponentControls,
+  controls: ComponentControls,
   propName: string,
 ): any => {
   const control: ComponentControl = controls[propName];
@@ -104,16 +83,14 @@ export const getControlValue = (
       control.type === ControlTypes.OBJECT &&
       typeof value === 'object'
     ) {
-      return getControlValues(value as LoadedComponentControls);
+      return getControlValues(value as ComponentControls);
     }
     return value;
   }
   return undefined;
 };
 
-export const getControlValues = (
-  controls: LoadedComponentControls,
-): ControlValues =>
+export const getControlValues = (controls: ComponentControls): ControlValues =>
   controls
     ? Object.keys(controls).reduce((acc, key) => {
         const value = getControlValue(controls, key);

diff --git a/core/instrument/test/__snapshots__/csf-props-info.test.ts.snap b/core/instrument/test/__snapshots__/csf-props-info.test.ts.snap
@@ -16,40 +16,48 @@ Can adapt to multiple groups of controls, displaying them in their own tabs.",
             "description": "if false, will nothave a collapsible frame.",
             "parentName": "BlockContainerProps",
             "type": Object {
-              "name": "boolean",
-              "raw": "boolean",
+              "name": "any",
+              "raw": "any",
+            },
+          },
+          "description": Object {
+            "description": "optional markdown description.",
+            "parentName": "BlockContainerProps",
+            "type": Object {
+              "name": "any",
+              "raw": "any",
             },
           },
           "id": Object {
             "description": "id of the story",
             "parentName": "StoryInputProps",
             "type": Object {
-              "name": "string",
-              "raw": "string",
+              "name": "any",
+              "raw": "any",
             },
           },
           "name": Object {
             "description": "alternatively you can use the name of a story to load from an external file",
             "parentName": "StoryInputProps",
             "type": Object {
-              "name": "string",
-              "raw": "string",
+              "name": "any",
+              "raw": "any",
             },
           },
           "sxStyle": Object {
             "description": "theme-ui styling object for Block Box",
             "parentName": "BlockContainerProps",
             "type": Object {
-              "name": "SystemStyleObject",
-              "raw": "SystemStyleObject",
+              "name": "any",
+              "raw": "any",
             },
           },
           "title": Object {
             "description": "optional section title for the block.",
             "parentName": "BlockContainerProps",
             "type": Object {
-              "name": "string",
-              "raw": "string",
+              "name": "any",
+              "raw": "any",
             },
           },
         },

diff --git a/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap b/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap
@@ -816,6 +816,14 @@ Array values are converted into responsive values.
         ],
       },
     },
+    "description": Object {
+      "description": "optional markdown description.",
+      "parentName": "BlockContainerProps",
+      "type": Object {
+        "name": "string",
+        "raw": "string",
+      },
+    },
     "dir": Object {
       "parentName": "HTMLAttributes",
       "type": Object {
@@ -2246,7 +2254,7 @@ If an array of components is specified, each component will be displayed in a se
 if the function returns false, it can stop chabging to the new tab",
       "type": Object {
         "name": "function",
-        "raw": "((name: string, component: StoryComponent) => boolean | void) & ((event: SyntheticEvent<HTMLDivElement, Event>) => void)",
+        "raw": "((event: SyntheticEvent<HTMLDivElement, Event>) => void) | ((name: string, component: StoryComponent) => boolean | void)",
       },
     },
     "onSelectCapture": Object {
@@ -2902,6 +2910,13 @@ import { jsx } from 'theme-ui'
         "raw": "string",
       },
     },
+    "visibleOnControlsOnly": Object {
+      "description": "set to true if you need the blockto be visible even if only controls are available",
+      "type": Object {
+        "name": "boolean",
+        "raw": "boolean",
+      },
+    },
     "vocab": Object {
       "parentName": "HTMLAttributes",
       "type": Object {

diff --git a/core/specification/src/controls.ts b/core/specification/src/controls.ts
@@ -148,10 +148,28 @@ export interface ComponentControlBase<T> {
    */
   value?: T;
 
+  /**
+   * default value is usually set at run-time, from the value
+   */
+  defaultValue?: T;
+
+  /**
+   * reset value - this is automatically saved as the initial 'value'
+   * used when user wants to click rest and go back to the initial values
+   */
+  resetValue?: T;
+
   /**
    * hide the label from the property editor
    */
   hideLabel?: boolean;
+
+  /**
+   * full text property description.
+   * can use markdown.
+   */
+  description?: string;
+
   /**
    * hide the property editor for this property
    * will only use the value

diff --git a/examples/stories/src/stories/controls-editors-starter.stories.tsx b/examples/stories/src/stories/controls-editors-starter.stories.tsx
@@ -25,11 +25,26 @@ overview.story = {
     'Story with two dynamic control values: `name` and `age`. You can use the controls to edit the story properties at run-time.',
 
   controls: {
-    name: { type: ControlTypes.TEXT, label: 'Name', value: 'Mark' },
+    name: {
+      type: ControlTypes.TEXT,
+      label: 'Name',
+      value: 'Mark',
+      description: `
+## name of the person
+
+any text is allowed
+`,
+    },
     age: {
       type: ControlTypes.NUMBER,
+      description: `
+## age of the person
+
+numeric, values between 10 and 75 allowed
+`,
       label: 'Age',
       value: 19,
+      defaultValue: null,
       min: 10,
       max: 75,
     },

diff --git a/integrations/storybook/rollup.config.js b/integrations/storybook/rollup.config.js
@@ -9,5 +9,6 @@ export default config({
     './src/register-props-panel.tsx',
     './src/register-storysource-panel.tsx',
     './src//docs-page/full-page.tsx',
+    './src//docs-page/testing-page.tsx',
   ],
 });
diff --git a/integrations/storybook/src/docs-page/testing-page.tsx b/integrations/storybook/src/docs-page/testing-page.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { TestingPage } from '@component-controls/pages';
+import { DocsContainer } from './DocsContainer';
+
+export default {
+  key: 'test',
+  title: 'Testing',
+  render: ({ active }: { active: boolean }) => {
+    return (
+      <DocsContainer active={active}>
+        <TestingPage />
+      </DocsContainer>
+    );
+  },
+};