feat: remove storybook/components

ccontrols · Feb 10, 2020 · 5e2f929 · 5e2f929
1 parent 52d3f9a
commit 5e2f929
Show file tree

Hide file tree

Showing 28 changed files with 859 additions and 333 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import { addDecorator } from '@storybook/react';
+import { polaris as theme} from '@theme-ui/presets';
+import { ThemeProvider } from 'theme-ui';
+import { lighten, darken } from 'polished';
+
+
+addDecorator((story) => {
+  console.log(theme);
+  return (
+    <ThemeProvider theme={{
+      ...theme,
+      styles: {
+        ...theme.styles,
+        table: {
+          margin: 0,
+          borderCollapse: 'collapse',
+          fontSize: '14px',
+          lineHeight: '20px',
+          textAlign: 'left',
+          width: '100%',
+          borderSpacing: '0px',
+        },
+        td: {
+          paddingTop: '16px',
+          paddingBottom: '16px',
+          paddingLeft: '20px',
+        },
+        tr: {
+          borderTop: '1px solid rgba(0, 0, 0, 0.1)',
+        },
+
+      },
+      buttons: {
+        primary: {
+          color: '#333',
+          bg: '#f3f3f3',
+          borderRadius: 5,
+          boxShadow: 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset',
+        },
+        secondary: {
+          bg: 'highlight',
+         }  
+      },
+      colors: {
+        ...theme.colors,
+        fadedText: lighten(0.25, theme.colors.text),
+        lightenPrimary: lighten(0.4, theme.colors.primary),
+
+      },
+    }}>
+      {story()}
+    </ThemeProvider>
+  );
+})
diff --git a/core/core/package.json b/core/core/package.json
@@ -15,7 +15,6 @@
     "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"
   },

diff --git a/core/editors/package.json b/core/editors/package.json
@@ -15,7 +15,6 @@
     "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"
   },
@@ -32,33 +31,32 @@
   "dependencies": {
     "@component-controls/core": "^0.1.11",
     "@component-controls/specification": "^0.1.11",
-    "@storybook/components": "^6.0.0-alpha.8",
-    "@storybook/theming": "^6.0.0-alpha.8",
     "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-popper-tooltip": "^2.10.1",
     "react-select": "^3.0.8",
-    "react-textarea-autosize": "^7.1.0"
+    "react-tabs": "^3.1.0",
+    "theme-ui": "^0.3.1"
   },
   "devDependencies": {
     "@types/jest": "^25.1.2",
     "@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/react-tabs": "^2.3.1",
+    "@types/theme-ui": "^0.3.0",
     "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": {
-    "@storybook/components": "*",
-    "@storybook/theming": "*",
     "react": "*",
     "react-dom": "*"
   },

diff --git a/core/editors/src/ArrayEditor/ArrayEditor.tsx b/core/editors/src/ArrayEditor/ArrayEditor.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent } from 'react';
 import { ComponentControlArray } from '@component-controls/specification';
-import { Form } from '@storybook/components';
+import { Textarea } from 'theme-ui';
 import { PropertyControlProps, PropertyEditor } from '../types';
 
 export interface ArrayEditorProps extends PropertyControlProps {
@@ -35,12 +35,8 @@ export const ArrayEditor: PropertyEditor<ArrayEditorProps> = ({
   const value = prop.value && deserialize(prop.value).join(prop.separator);
 
   return (
-    <Form.Textarea
-      id={name}
-      name={name}
-      value={value}
-      onChange={handleChange}
-      size="flex"
-    />
+    <>
+      <Textarea id={name} name={name} value={value} onChange={handleChange} />
+    </>
   );
 };
diff --git a/core/editors/src/BooleanEditor/BooleanEditor.tsx b/core/editors/src/BooleanEditor/BooleanEditor.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentControlBoolean } from '@component-controls/specification';
-import { Toggle } from './Toggle';
+import { Toggle } from '../components/Toggle/Toggle';
 import { FlexContainer } from '../FlexContainer';
 import { PropertyControlProps, PropertyEditor } from '../types';
 

diff --git a/core/editors/src/ButtonEditor/ButtonEditor.tsx b/core/editors/src/ButtonEditor/ButtonEditor.tsx
@@ -1,17 +1,12 @@
 import React from 'react';
-import { styled } from '@storybook/theming';
 import { ComponentControlButton } from '@component-controls/specification';
-import { Form } from '@storybook/components';
+import { Button } from 'theme-ui';
 import {
   PropertyControlProps,
   PropertyEditor,
   PropertyOnClick,
 } from '../types';
 
-const FlexButton = styled(Form.Button)({
-  flex: '1 1',
-});
-
 export interface ButtonEditorProps extends PropertyControlProps {
   prop: ComponentControlButton;
   onClick: PropertyOnClick;
@@ -22,7 +17,7 @@ export const ButtonEditor: PropertyEditor<ButtonEditorProps> = ({
   name,
   onClick,
 }) => (
-  <FlexButton type="button" name={name} onClick={() => onClick(prop)}>
+  <Button name={name} onClick={() => onClick(prop)}>
     {name}
-  </FlexButton>
+  </Button>
 );
diff --git a/core/editors/src/ColorEditor/ColorEditor.tsx b/core/editors/src/ColorEditor/ColorEditor.tsx
@@ -1,57 +1,9 @@
 import React from 'react';
 import { SketchPicker, ColorResult } from 'react-color';
 import { ComponentControlColor } from '@component-controls/specification';
-
-import { styled } from '@storybook/theming';
-import { Form } from '@storybook/components';
-
+import { Button, Box } from 'theme-ui';
 import { PropertyControlProps, PropertyEditor } from '../types';
 
-interface ColorButtonProps {
-  name: string;
-  type: string;
-  size: string;
-  width: string;
-  onClick: () => any;
-}
-
-const { Button } = Form;
-
-const Swatch = styled.div<{ color: string | undefined }>(
-  ({ theme, color }) => ({
-    position: 'absolute',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    left: 6,
-    width: 16,
-    height: 16,
-    backgroundColor: color,
-    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
-    borderRadius: '1rem',
-  }),
-);
-
-const ColorButton = styled(Button)<ColorButtonProps>(() => ({
-  zIndex: 'unset',
-  paddingLeft: '40px',
-  minHeight: '36px',
-  display: 'flex',
-  flexBasis: '100%',
-}));
-
-const Popover = styled.div({
-  position: 'absolute',
-  zIndex: 3,
-});
-
-const Cover = styled.div({
-  position: 'fixed',
-  top: '0px',
-  right: '0px',
-  bottom: '0px',
-  left: '0px',
-});
-
 export interface ColorEditorProps extends PropertyControlProps {
   prop: ComponentControlColor;
 }
@@ -71,21 +23,50 @@ export const ColorEditor: PropertyEditor<ColorEditorProps> = ({
   };
 
   return (
-    <ColorButton
-      active={displayColorPicker}
-      type="button"
+    <Button
       name={name}
       onClick={() => setDisplayColorPicker(!displayColorPicker)}
-      size="flex"
+      css={{
+        zIndex: 'unset',
+        paddingLeft: '10px',
+        minHeight: '36px',
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
     >
+      <Box
+        css={{
+          left: 6,
+          width: 16,
+          height: 16,
+          marginRight: 10,
+          backgroundColor: prop.value,
+          borderRadius: '1rem',
+        }}
+      />
       {prop.value && prop.value.toUpperCase()}
-      <Swatch color={prop.value} />
       {displayColorPicker ? (
-        <Popover>
-          <Cover onClick={() => setDisplayColorPicker(false)} />
+        <Box
+          css={{
+            top: '32px',
+            position: 'absolute',
+            zIndex: 3,
+          }}
+        >
+          <Box
+            css={{
+              position: 'fixed',
+              top: '0px',
+              right: '0px',
+              bottom: '0px',
+              left: '0px',
+            }}
+            onClick={() => setDisplayColorPicker(false)}
+          />
           <SketchPicker color={prop.value} onChange={handleChange} />
-        </Popover>
+        </Box>
       ) : null}
-    </ColorButton>
+    </Button>
   );
 };