added editors package

.prettierrc

@@ -3,7 +3,7 @@
   "printWidth": 80,
   "tabWidth": 2,
   "useTabs": false,
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "trailingComma": "all",
   "bracketSpacing": true,

core/editors/.babelrc

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

core/editors/.eslintignore

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

core/editors/.eslintrc.js

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

core/editors/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/editors/README.md

@@ -0,0 +1 @@
+# Componnet Control Editors

core/editors/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@component-controls/editors",
+  "version": "0.1.2",
+  "description": "Component controls specification and utility routines",
+  "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",
+    "precommit": "lint-staged",
+    "prepare": "yarn build",
+    "test": "yarn jest"
+  },
+  "homepage": "https://github.com/atanasster/component-controls",
+  "bugs": {
+    "url": "https://github.com/atanasster/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atanasster/component-controls.git",
+    "directory": "core/specification"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@component-controls/specification": "0.1.2",
+    "@storybook/components": "6.0.0-alpha.6",
+    "@storybook/theming": "6.0.0-alpha.6",
+    "copy-to-clipboard": "^3.2.1",
+    "global": "^4.3.2",
+    "polished": "^3.4.4",
+    "qs": "^6.9.1",
+    "react": "^16.8.3",
+    "react-color": "^2.17.0",
+    "react-dom": "^16.8.3",
+    "react-select": "^3.0.8",
+    "react-textarea-autosize": "^7.1.0"
+  },
+  "devDependencies": {
+    "@types/qs": "^6.9.1",
+    "@types/react-color": "^3.0.1",
+    "@types/react-select": "^3.0.10",
+    "@types/react-textarea-autosize": "^4.3.3",
+    "@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"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ]
+}

core/editors/rollup.config.js

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

core/editors/src/ArrayEditor/ArrayEditor.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/specification';
+import { ArrayEditor } from './ArrayEditor';
+
+export default {
+  title: 'Basics/PropEditors/ArrayEditor',
+  component: ArrayEditor,
+};
+
+export const sample = () => {
+  const [state, setState] = React.useState(['Laptop', 'Book', 'Whiskey']);
+  return (
+    <>
+      <ArrayEditor
+        name="prop"
+        onChange={(name, newVal) => setState(newVal)}
+        prop={{ type: ControlTypes.ARRAY, value: state }}
+      />
+      <ul>{state && state.map(item => <li key={item}>{item}</li>)}</ul>
+    </>
+  );
+};

core/editors/src/ArrayEditor/ArrayEditor.tsx

@@ -0,0 +1,46 @@
+import React, { ChangeEvent } from 'react';
+import { ComponentControlArray } from '@component-controls/specification';
+import { Form } from '@storybook/components';
+import { PropertyControlProps, PropertyEditor } from '../types';
+
+interface ArrayEditorProps extends PropertyControlProps {
+  prop: ComponentControlArray;
+}
+
+const formatArray = (value: string, separator: string) => {
+  if (value === '') {
+    return [];
+  }
+  return value.split(separator);
+};
+
+const deserialize = (value: string[]) => {
+  if (Array.isArray(value)) return value;
+  return Object.keys(value)
+    .sort()
+    .reduce((array, key) => [...array, value[key]], []);
+};
+
+export const ArrayEditor: PropertyEditor<ArrayEditorProps> = ({
+  prop,
+  name,
+  onChange,
+}) => {
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {
+    const { value } = e.target as HTMLTextAreaElement;
+    const newVal = formatArray(value, prop.separator || ',');
+    onChange(name, newVal);
+  };
+
+  const value = prop.value && deserialize(prop.value).join(prop.separator);
+
+  return (
+    <Form.Textarea
+      id={name}
+      name={name}
+      value={value}
+      onChange={handleChange}
+      size="flex"
+    />
+  );
+};

core/editors/src/ArrayEditor/index.ts

@@ -0,0 +1 @@
+export { ArrayEditor } from './ArrayEditor';

core/editors/src/BooleanEditor/BooleanEditor.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/specification';
+import { BooleanEditor } from './BooleanEditor';
+
+export default {
+  title: 'Basics/PropEditors/BooleanEditor',
+  component: BooleanEditor,
+};
+
+export const sample = () => {
+  const [state, setState] = React.useState(false);
+  return (
+    <BooleanEditor
+      name="prop"
+      onChange={(name, newVal) => setState(newVal)}
+      prop={{ type: ControlTypes.BOOLEAN, value: state }}
+    />
+  );
+};

core/editors/src/BooleanEditor/BooleanEditor.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentControlBoolean } from '@component-controls/specification';
+import { Toggle } from './Toggle';
+import { FlexContainer } from '../FlexContainer';
+import { PropertyControlProps, PropertyEditor } from '../types';
+
+interface BooleanEditorProps extends PropertyControlProps {
+  prop: ComponentControlBoolean;
+}
+
+export const BooleanEditor: PropertyEditor<BooleanEditorProps> = ({
+  prop,
+  name,
+  onChange,
+}) => (
+  <FlexContainer>
+    <Toggle
+      id={name}
+      name={name}
+      onChange={checked => onChange(name, checked)}
+      checked={prop.value}
+    />
+  </FlexContainer>
+);

core/editors/src/BooleanEditor/Toggle.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Icons } from '@storybook/components';
+import { Toggle } from './Toggle';
+
+export default {
+  title: 'Basics/Toggle',
+};
+
+export const allToggles = () => {
+  const [checked, setChecked] = React.useState(false);
+  return (
+    <div>
+      <p>Default toggle</p>
+      <Toggle checked={checked} onChange={check => setChecked(check)} />
+      <br />
+      <p>Toggle on a Form</p>
+      <br />
+      <p>Custom labels</p>
+      <Toggle
+        checked={checked}
+        labels={{
+          true: 'YES',
+          false: 'NO!',
+        }}
+        onChange={check => setChecked(check)}
+      />
+      <br />
+      <p>Custom icon labels</p>
+      <Toggle
+        checked={checked}
+        labels={{
+          true: <Icons icon="check" />,
+          false: <Icons icon="delete" />,
+        }}
+        onChange={check => setChecked(check)}
+      />
+      <br />
+    </div>
+  );
+};

core/editors/src/BooleanEditor/Toggle.tsx

@@ -0,0 +1,83 @@
+import React, { forwardRef, HTMLProps } from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize, darken } from 'polished';
+
+import { Button } from '@storybook/components';
+
+interface ToggleButtonProps {
+  active: boolean;
+  left: boolean;
+  onClick: (e: any) => void;
+}
+const ToggleButton = styled(Button)<ToggleButtonProps>(
+  ({ theme, active, left }) => {
+    const activeColor = darken(0.1, theme.color.light);
+    return {
+      '&&': {
+        borderRadius: left ? '14px 0 0 14px' : '0 14px 14px 0',
+        margin: 0,
+        border: 'none',
+        borderColor: activeColor,
+        color: active
+          ? theme.color.defaultText
+          : transparentize(
+              theme.base === 'light' ? 0.4 : 0.6,
+              theme.color.defaultText,
+            ),
+        background: active ? activeColor : 'unset',
+      },
+    };
+  },
+);
+
+export interface ToggleOwnProps {
+  /** whether checked */
+  checked?: boolean;
+  /** onChange event - when one of the toggles in clicked */
+  onChange?: (checked: boolean) => void;
+
+  /** custom labels - by defaut 'True' and 'False' */
+  labels?: {
+    true: React.ReactNode;
+    false: React.ReactNode;
+  };
+}
+
+export type ToggleProps = Omit<
+  HTMLProps<HTMLDivElement>,
+  keyof ToggleOwnProps
+> &
+  ToggleOwnProps;
+export const Toggle = forwardRef<HTMLDivElement, ToggleProps>(
+  (
+    {
+      checked = false,
+      onChange,
+      labels = {
+        true: 'True',
+        false: 'False',
+      },
+      ...rest
+    }: ToggleProps,
+    ref,
+  ) => (
+    <div ref={ref} {...rest}>
+      <ToggleButton
+        active={checked}
+        left
+        onClick={() => onChange && onChange(true)}
+      >
+        {labels.true}
+      </ToggleButton>
+      <ToggleButton
+        active={!checked}
+        left={false}
+        onClick={() => onChange && onChange(false)}
+      >
+        {labels.false}
+      </ToggleButton>
+    </div>
+  ),
+);
+
+Toggle.displayName = 'Toggle';

core/editors/src/BooleanEditor/index.ts

@@ -0,0 +1 @@
+export { BooleanEditor } from './BooleanEditor';

core/editors/src/ButtonEditor/ButtonEditor.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/specification';
+import { ButtonEditor } from './ButtonEditor';
+
+export default {
+  title: 'Basics/PropEditors/ButtonEditor',
+  component: ButtonEditor,
+};
+
+export const sample = () => (
+  <ButtonEditor
+    name="Check in console"
+    onClick={() => console.log('clicked')}
+    onChange={() => {}}
+    prop={{ type: ControlTypes.BUTTON }}
+  />
+);