feat: smart controls synchronization

core/core/.babelrc

@@ -1,5 +1,4 @@
 {
-  "plugins": ["lodash"],
   "presets": [
     "@babel/preset-typescript",
     [

core/core/src/index.ts

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

core/core/src/smartControls.ts

@@ -0,0 +1,166 @@
+/* eslint-disable no-console */
+import {
+  ComponentControl,
+  ComponentControls,
+  ControlTypes,
+} from '@component-controls/specification';
+
+export interface PropType {
+  defaultValue: { value?: string | boolean; computed: boolean };
+  type: { name?: string };
+  required: boolean;
+  description: string;
+}
+
+export interface PropTypes {
+  [key: string]: PropType;
+}
+
+const cleanQuotes = (txt?: string) => (txt ? txt.replace(/['"]+/g, '') : txt);
+
+const handledTypes = [
+  'boolean',
+  'bool',
+  'string',
+  'number',
+  'enum',
+  'func',
+  'shape',
+  '(() => void)',
+];
+
+export const controlFromProps = (
+  name: string,
+  propDef: PropType,
+): ComponentControl | null => {
+  if (!propDef) {
+    return null;
+  }
+  let type = propDef.type.name;
+
+  // docgen typescript are ie "boolean | undefined"
+  if (typeof type === 'string') {
+    const splitType = type.split(' | ');
+    if (splitType.length > 1) {
+      // we have a typescrpit type definitio of "|" type
+      for (let i = 0; i < splitType.length; i += 1) {
+        const found = handledTypes.find(a => a === splitType[i]);
+        if (found !== undefined) {
+          type = found;
+          break;
+        }
+      }
+    }
+  }
+  function onClick() {
+    // eslint-disable-next-line prefer-rest-params
+    console.info(`${name}: `, arguments);
+  }
+  const defaultValue = propDef.defaultValue
+    ? propDef.defaultValue.value
+    : undefined;
+
+  switch (type) {
+    case 'string': {
+      let value: string | undefined;
+      if (typeof defaultValue === 'string') {
+        value = defaultValue;
+      }
+      value = cleanQuotes(value);
+      const isColor = name.toLowerCase().includes('color');
+      if (!value && propDef.required) {
+        value = isColor ? 'red' : 'example';
+      }
+      return {
+        type: isColor ? ControlTypes.COLOR : ControlTypes.TEXT,
+        value,
+      };
+    }
+    case 'boolean':
+    case 'bool': {
+      let value;
+      if (defaultValue !== undefined) {
+        // docgen typescript defaultValue.summary is actually a boolean type, not a string
+        if (defaultValue === 'false' || (defaultValue as unknown) === false) {
+          value = false;
+        }
+        if (defaultValue === 'true' || (defaultValue as unknown) === true) {
+          value = true;
+        }
+      }
+      return { type: ControlTypes.BOOLEAN, value };
+    }
+    case 'number': {
+      let value;
+      try {
+        if (typeof defaultValue === 'string') {
+          value = parseFloat(defaultValue);
+        }
+      } catch (e) {
+        // eat exceptoin
+      }
+      return { type: ControlTypes.NUMBER, value };
+    }
+    case 'enum': {
+      const value =
+        typeof defaultValue === 'string'
+          ? cleanQuotes(defaultValue)
+          : undefined;
+      const options = Array.isArray(propDef.type)
+        ? propDef.type
+        : (propDef.type as any).value;
+      if (!Array.isArray(options)) {
+        return null;
+      }
+      return {
+        type: ControlTypes.OPTIONS,
+        options: options.map((v: any) => cleanQuotes(v.value)),
+        value,
+      };
+    }
+    // typescript callback function signature
+    case '(() => void)':
+    case 'func': {
+      return {
+        type: ControlTypes.BUTTON,
+        label: name,
+        onClick,
+        value: onClick,
+      };
+    }
+    case 'shape': {
+      /* let value;
+      try {
+        if (propDef.defaultValue && typeof propDef.defaultValue.summary === 'object') {
+          value = JSON.parse(propDef.defaultValue.summary);
+        }
+      } catch (e) {
+        // eat exception
+      }
+      */
+      return null;
+    }
+    default:
+      return null;
+  }
+};
+
+interface NamedComponentControl {
+  name: string;
+  control: ComponentControl | null;
+}
+export const controlsFromProps = (props: PropTypes): ComponentControls => {
+  return Object.keys(props)
+    .map((key: string) => ({
+      name: key,
+      control: controlFromProps(key, props[key]),
+    }))
+    .filter(p => p.control)
+    .reduce(
+      (acc: ComponentControls, prop: NamedComponentControl) => ({
+        ...acc,
+        [prop.name]: prop.control as any,
+      }),
+      {},
+    );
+};

core/editors/.babelrc

@@ -1,5 +1,4 @@
 {
-  "plugins": ["lodash"],
   "presets": [
     "@babel/preset-typescript",
     [

core/instrument/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

core/instrument/.eslintignore

@@ -0,0 +1 @@
+dist

core/instrument/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'docz-ts',
+}

core/instrument/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

core/instrument/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@component-controls/instrument",
+  "version": "0.5.1",
+  "description": "Component controls instrumentation library",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development yarn build -w",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "yarn jest"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "core/instrument"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/parser": "^7.8.4",
+    "@babel/traverse": "^7.8.4",
+    "typescript": "3.5.3"
+  },
+  "devDependencies": {
+    "@types/jest": "^25.1.2",
+    "cross-env": "^5.2.1",
+    "docz-rollup": "^2.1.0",
+    "eslint": "^6.5.1",
+    "eslint-config-docz-ts": "^2.1.0",
+    "jest": "^24.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ]
+}

core/instrument/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from 'docz-rollup';
+
+export default config({
+  input: './src/index.ts',
+});

core/instrument/src/index.ts

@@ -0,0 +1,14 @@
+import * as parser from '@babel/parser';
+import traverse from '@babel/traverse';
+
+export const parseSource = (source: string) => {
+  const ast = parser.parse(source, {
+    sourceType: 'module',
+    plugins: ['jsx', 'typescript'],
+  });
+  traverse(ast, {
+    enter(path) {
+      console.log(path);
+    },
+  });
+};

core/instrument/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": true,
+    "types": ["node", "jest"],
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
+  },
+  "include": ["src/**/*", "src/typings.d.ts"],
+  "exclude": ["node_modules/**"]
+}

core/specification/.babelrc

@@ -1,5 +1,4 @@
 {
-  "plugins": ["lodash"],
   "presets": [
     "@babel/preset-typescript",
     [

integrations/storybook/.storybook/components/BaseButton.js

@@ -9,14 +9,15 @@ const BaseButton = ({ disabled, label, onClick, style, backgroundColor, color, t
     type={type}
     disabled={disabled}
     onClick={onClick}
-    style={{ ...style, backgroundColor, color: lighten(disabled ? 0.3 : 0, color), padding }}
+    style={{ ...style, backgroundColor, color: lighten(disabled ? 0.4 : 0, color), padding }}
   >
     {label}
   </button>
 );
 
 BaseButton.defaultProps = {
   disabled: false,
+  label: 'default',
   onClick: () => {},
   style: {},
   backgroundColor: '#fefefe',
@@ -29,7 +30,7 @@ BaseButton.propTypes = {
   /** Boolean indicating whether the button should render as disabled */
   disabled: PropTypes.bool,
   /** button label. */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.string,
   /** onClick handler */
   onClick: PropTypes.func,
   /** Custom styles */

integrations/storybook/package.json

@@ -36,6 +36,7 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/editors": "^0.5.1",
+    "@component-controls/instrument": "^0.5.1",
     "@component-controls/specification": "^0.5.1",
     "@theme-ui/presets": "^0.3.0",
     "copy-to-clipboard": "^3.0.8",