From 29de5619ce6eadda4fbef8a9a9c9f64c8b03f722 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Mon, 10 Feb 2020 11:53:27 -0500
Subject: [PATCH] fix: clean up stories

---
 .storybook/main.js                             |  9 ++++++++-
 .storybook/preview.js                          |  9 ++++++++-
 .../src/ArrayEditor/ArrayEditor.stories.tsx    |  2 +-
 .../BooleanEditor/BooleanEditor.stories.tsx    |  2 +-
 .../src/ButtonEditor/ButtonEditor.stories.tsx  |  2 +-
 .../src/ColorEditor/ColorEditor.stories.tsx    |  2 +-
 .../src/ControlEditorsTable.stories.tsx        |  4 ++--
 core/editors/src/ControlEditorsTable.tsx       |  8 ++++----
 .../src/DateEditor/DateEditor.stories.tsx      |  2 +-
 .../src/FilesEditor/FilesEditor.stories.tsx    |  2 +-
 .../src/NumberEditor/NumberEditor.stories.tsx  |  2 +-
 core/editors/src/NumberEditor/NumberEditor.tsx |  6 +++---
 .../src/ObjectEditor/ObjectEditor.stories.tsx  |  2 +-
 core/editors/src/ObjectEditor/ObjectEditor.tsx | 18 ++++++++----------
 .../OptionsEditor/OptionsEditor.stories.tsx    |  2 +-
 .../src/TextEditor/TextEditor.stories.tsx      | 18 +++++++++++++++++-
 .../editors/src/components/Popover/Popover.tsx |  6 +++---
 .../src/components/Toggle/Toggle.stories.tsx   |  3 +--
 core/editors/src/components/Toggle/Toggle.tsx  |  6 +++---
 core/editors/src/types.ts                      |  4 ++--
 20 files changed, 68 insertions(+), 41 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 424f745d6..23b7d1695 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,11 +1,18 @@
 const path = require('path');
 
 module.exports = {
+  presets:[
+    {
+      name: require.resolve('webpack-react-docgen-typescript/preset'),
+      options: {
+        fileNameResolver: ({ resourcePath, cacheFolder }) => path.join(cacheFolder, resourcePath.replace(/[^a-z0-9]/gi, '_')),
+      },
+    },  
+  ],
   stories: [
     '../core/editors/src/**/*.stories.(js|tsx|mdx)',
   ],
   addons: [
-    'webpack-react-docgen-typescript',
     '@storybook/addon-docs',
     '@storybook/addon-storysource',
   ],
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 600bfad84..e11a3a674 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { addDecorator } from '@storybook/react';
+import { addDecorator, addParameters } from '@storybook/react';
 import { polaris as theme} from '@theme-ui/presets';
 import { ThemeProvider } from 'theme-ui';
 import { lighten, darken } from 'polished';
@@ -53,3 +53,10 @@ addDecorator((story) => {
     </ThemeProvider>
   );
 })
+
+addParameters({
+  options: {
+    storySort: (a, b) =>
+      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
+  },
+});
\ No newline at end of file
diff --git a/core/editors/src/ArrayEditor/ArrayEditor.stories.tsx b/core/editors/src/ArrayEditor/ArrayEditor.stories.tsx
index 70b1a318f..4076ed192 100644
--- a/core/editors/src/ArrayEditor/ArrayEditor.stories.tsx
+++ b/core/editors/src/ArrayEditor/ArrayEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { ArrayEditor } from './ArrayEditor';
 
 export default {
-  title: 'Controls/Editors/ArrayEditor',
+  title: 'Editors/ArrayEditor',
   component: ArrayEditor,
 };
 
diff --git a/core/editors/src/BooleanEditor/BooleanEditor.stories.tsx b/core/editors/src/BooleanEditor/BooleanEditor.stories.tsx
index 847999baa..c7cc0ae0c 100644
--- a/core/editors/src/BooleanEditor/BooleanEditor.stories.tsx
+++ b/core/editors/src/BooleanEditor/BooleanEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { BooleanEditor } from './BooleanEditor';
 
 export default {
-  title: 'Controls/Editors/BooleanEditor',
+  title: 'Editors/BooleanEditor',
   component: BooleanEditor,
 };
 
diff --git a/core/editors/src/ButtonEditor/ButtonEditor.stories.tsx b/core/editors/src/ButtonEditor/ButtonEditor.stories.tsx
index 37f2fa581..bf2ac6249 100644
--- a/core/editors/src/ButtonEditor/ButtonEditor.stories.tsx
+++ b/core/editors/src/ButtonEditor/ButtonEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { ButtonEditor } from './ButtonEditor';
 
 export default {
-  title: 'Controls/Editors/ButtonEditor',
+  title: 'Editors/ButtonEditor',
   component: ButtonEditor,
 };
 
diff --git a/core/editors/src/ColorEditor/ColorEditor.stories.tsx b/core/editors/src/ColorEditor/ColorEditor.stories.tsx
index fec58bbb5..c38312739 100644
--- a/core/editors/src/ColorEditor/ColorEditor.stories.tsx
+++ b/core/editors/src/ColorEditor/ColorEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { ColorEditor } from './ColorEditor';
 
 export default {
-  title: 'Controls/Editors/ColorEditor',
+  title: 'Editors/ColorEditor',
   component: ColorEditor,
 };
 
diff --git a/core/editors/src/ControlEditorsTable.stories.tsx b/core/editors/src/ControlEditorsTable.stories.tsx
index ca0524412..c83cfd384 100644
--- a/core/editors/src/ControlEditorsTable.stories.tsx
+++ b/core/editors/src/ControlEditorsTable.stories.tsx
@@ -8,11 +8,11 @@ import {
 import { ControlsEditorsTable } from './ControlEditorsTable';
 
 export default {
-  title: 'Controls/Form/ControlsEditorsTable',
+  title: 'Component Controls/ControlsEditorsTable',
   component: ControlsEditorsTable,
 };
 
-export const pureControlsEditorsTable = () => {
+export const simple = () => {
   const [controls, setControls] = React.useState<LoadedComponentControls>({
     name: {
       type: ControlTypes.TEXT,
diff --git a/core/editors/src/ControlEditorsTable.tsx b/core/editors/src/ControlEditorsTable.tsx
index 0115f217a..fa0bb8fc9 100644
--- a/core/editors/src/ControlEditorsTable.tsx
+++ b/core/editors/src/ControlEditorsTable.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { window, document } from 'global';
 import styled from '@emotion/styled';
 import { Theme } from 'theme-ui';
@@ -55,11 +55,11 @@ const PropEditorsTitle = styled.div<{}>(({ theme }: { theme: Theme }) => ({
 
 const DEFAULT_GROUP_ID = 'Other';
 
-export const BlockWrapper: React.FC = ({ children }) => (
+export const BlockWrapper: FC = ({ children }) => (
   <PropEditorsContainer> {children}</PropEditorsContainer>
 );
 
-const PropGroupTable: React.FC<ControlsEditorsTableProps> = ({
+const PropGroupTable: FC<ControlsEditorsTableProps> = ({
   controls,
   storyId,
   setControlValue,
@@ -100,7 +100,7 @@ interface GroupedControlsType {
   [key: string]: LoadedComponentControls;
 }
 
-export const ControlsEditorsTable: React.FC<ControlsEditorsTableProps & {
+export const ControlsEditorsTable: FC<ControlsEditorsTableProps & {
   title?: string;
 }> = props => {
   const [copied, setCopied] = React.useState(false);
diff --git a/core/editors/src/DateEditor/DateEditor.stories.tsx b/core/editors/src/DateEditor/DateEditor.stories.tsx
index 8848ab4a3..ba554799b 100644
--- a/core/editors/src/DateEditor/DateEditor.stories.tsx
+++ b/core/editors/src/DateEditor/DateEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { DateEditor } from './DateEditor';
 
 export default {
-  title: 'Controls/Editors/DateEditor',
+  title: 'Editors/DateEditor',
   component: DateEditor,
 };
 
diff --git a/core/editors/src/FilesEditor/FilesEditor.stories.tsx b/core/editors/src/FilesEditor/FilesEditor.stories.tsx
index 512b7ae6e..de8bba700 100644
--- a/core/editors/src/FilesEditor/FilesEditor.stories.tsx
+++ b/core/editors/src/FilesEditor/FilesEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { FilesEditor } from './FilesEditor';
 
 export default {
-  title: 'Controls/Editors/FilesEditor',
+  title: 'Editors/FilesEditor',
   component: FilesEditor,
 };
 
diff --git a/core/editors/src/NumberEditor/NumberEditor.stories.tsx b/core/editors/src/NumberEditor/NumberEditor.stories.tsx
index 78725380d..ede2fcf3a 100644
--- a/core/editors/src/NumberEditor/NumberEditor.stories.tsx
+++ b/core/editors/src/NumberEditor/NumberEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { NumberEditor } from './NumberEditor';
 
 export default {
-  title: 'Controls/Editors/NumberEditor',
+  title: 'Editors/NumberEditor',
   component: NumberEditor,
 };
 
diff --git a/core/editors/src/NumberEditor/NumberEditor.tsx b/core/editors/src/NumberEditor/NumberEditor.tsx
index 01a0e49a5..1f43d07ba 100644
--- a/core/editors/src/NumberEditor/NumberEditor.tsx
+++ b/core/editors/src/NumberEditor/NumberEditor.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React, { FC, ChangeEvent } from 'react';
 import { ComponentControlNumber } from '@component-controls/specification';
 import { Input, Box, BoxProps } from 'theme-ui';
 import { PropertyControlProps, PropertyEditor } from '../types';
@@ -7,7 +7,7 @@ export interface NumberEditorProps extends PropertyControlProps {
   prop: ComponentControlNumber;
 }
 
-const RangeLabel: React.FC<BoxProps> = props => (
+const RangeLabel: FC<BoxProps> = props => (
   <Box
     as="span"
     css={{
@@ -20,7 +20,7 @@ const RangeLabel: React.FC<BoxProps> = props => (
   />
 );
 
-const RangeWrapper: React.FC<BoxProps> = props => (
+const RangeWrapper: FC<BoxProps> = props => (
   <Box
     as="div"
     css={{
diff --git a/core/editors/src/ObjectEditor/ObjectEditor.stories.tsx b/core/editors/src/ObjectEditor/ObjectEditor.stories.tsx
index f8c184ca0..055d79944 100644
--- a/core/editors/src/ObjectEditor/ObjectEditor.stories.tsx
+++ b/core/editors/src/ObjectEditor/ObjectEditor.stories.tsx
@@ -6,7 +6,7 @@ import {
 import { ObjectEditor } from './ObjectEditor';
 
 export default {
-  title: 'Controls/Editors/ObjectEditor',
+  title: 'Editors/ObjectEditor',
   component: ObjectEditor,
 };
 
diff --git a/core/editors/src/ObjectEditor/ObjectEditor.tsx b/core/editors/src/ObjectEditor/ObjectEditor.tsx
index 298fedea3..14f9a40d8 100644
--- a/core/editors/src/ObjectEditor/ObjectEditor.tsx
+++ b/core/editors/src/ObjectEditor/ObjectEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Button, Box } from 'theme-ui';
 import {
   ComponentControl,
@@ -15,7 +15,7 @@ export interface ObjectEditorProps extends PropertyControlProps {
   prop: ComponentControlObject;
 }
 
-const ChildContainer: React.FC = props => (
+const ChildContainer: FC = props => (
   <Box
     css={{
       minWidth: 200,
@@ -93,14 +93,12 @@ export const ObjectEditor: PropertyEditor<ObjectEditorProps> = ({
         </ChildContainer>
       )}
     >
-      {() => (
-        <FlexContainer>
-          <Button>
-            Edit object
-            <Box />
-          </Button>
-        </FlexContainer>
-      )}
+      <FlexContainer>
+        <Button>
+          Edit object
+          <Box />
+        </Button>
+      </FlexContainer>
     </Popover>
   );
 };
diff --git a/core/editors/src/OptionsEditor/OptionsEditor.stories.tsx b/core/editors/src/OptionsEditor/OptionsEditor.stories.tsx
index ed7695ebf..deaa00a0d 100644
--- a/core/editors/src/OptionsEditor/OptionsEditor.stories.tsx
+++ b/core/editors/src/OptionsEditor/OptionsEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { OptionsEditor } from './OptionsEditor';
 
 export default {
-  title: 'Controls/Editors/OptionsEditor',
+  title: 'Editors/OptionsEditor',
   component: OptionsEditor,
 };
 
diff --git a/core/editors/src/TextEditor/TextEditor.stories.tsx b/core/editors/src/TextEditor/TextEditor.stories.tsx
index 9513c5550..b3c379988 100644
--- a/core/editors/src/TextEditor/TextEditor.stories.tsx
+++ b/core/editors/src/TextEditor/TextEditor.stories.tsx
@@ -3,7 +3,7 @@ import { ControlTypes } from '@component-controls/specification';
 import { TextEditor } from './TextEditor';
 
 export default {
-  title: 'Controls/Editors/TextEditor',
+  title: 'Editors/TextEditor',
   component: TextEditor,
 };
 
@@ -32,3 +32,19 @@ export const placeholder = () => {
     />
   );
 };
+
+export const textArea = () => {
+  const [state, setState] = React.useState();
+  return (
+    <TextEditor
+      name="prop"
+      onChange={(name, newVal) => setState(newVal)}
+      prop={{
+        type: ControlTypes.TEXT,
+        value: state,
+        rows: 4,
+        placeholder: 'Enter multiple lines of text',
+      }}
+    />
+  );
+};
diff --git a/core/editors/src/components/Popover/Popover.tsx b/core/editors/src/components/Popover/Popover.tsx
index 1f40014ac..1197e00c5 100644
--- a/core/editors/src/components/Popover/Popover.tsx
+++ b/core/editors/src/components/Popover/Popover.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { FC } from 'react';
 import styled from '@emotion/styled';
 import TooltipTrigger from 'react-popper-tooltip';
 import { TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
 import { Box } from 'theme-ui';
 
-export type PopoverProps = Partial<TooltipTriggerProps>;
+export type PopoverProps = Omit<Partial<TooltipTriggerProps>, 'children'>;
 
 const SPACING = 8;
 
@@ -84,7 +84,7 @@ export const Arrow = styled.div<{ placement: string; borderColor: string }>(
   }),
 );
 
-export const Popover: React.FC<PopoverProps> = ({
+export const Popover: FC<PopoverProps> = ({
   trigger,
   placement = 'bottom',
   modifiers,
diff --git a/core/editors/src/components/Toggle/Toggle.stories.tsx b/core/editors/src/components/Toggle/Toggle.stories.tsx
index 88486aaed..719bcc41b 100644
--- a/core/editors/src/components/Toggle/Toggle.stories.tsx
+++ b/core/editors/src/components/Toggle/Toggle.stories.tsx
@@ -3,6 +3,7 @@ import { Toggle } from './Toggle';
 
 export default {
   title: 'Components/Toggle',
+  component: Toggle,
 };
 
 export const allToggles = () => {
@@ -12,8 +13,6 @@ export const allToggles = () => {
       <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}
diff --git a/core/editors/src/components/Toggle/Toggle.tsx b/core/editors/src/components/Toggle/Toggle.tsx
index b940fe050..037628851 100644
--- a/core/editors/src/components/Toggle/Toggle.tsx
+++ b/core/editors/src/components/Toggle/Toggle.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, HTMLProps } from 'react';
+import React, { forwardRef, HTMLProps, FC } from 'react';
 import { Button } from 'theme-ui';
 
 interface ToggleButtonProps {
@@ -6,13 +6,13 @@ interface ToggleButtonProps {
   left: boolean;
   onClick: (e: any) => void;
 }
-const ToggleButton: React.FC<ToggleButtonProps> = ({
+const ToggleButton: FC<ToggleButtonProps> = ({
   active,
   left,
   children,
   onClick,
 }) => {
-  const activeColor = 'primary';
+  const activeColor = 'lightenPrimary';
   return (
     <Button
       onClick={onClick}
diff --git a/core/editors/src/types.ts b/core/editors/src/types.ts
index f9c95e9d2..d4f8981dd 100644
--- a/core/editors/src/types.ts
+++ b/core/editors/src/types.ts
@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import {
   ComponentControl,
   SetControlValueFn,
@@ -14,7 +14,7 @@ export interface PropertyControlProps {
   onClick?: PropertyOnClick;
 }
 
-export type PropertyEditor<T extends PropertyControlProps = any> = React.FC<T>;
+export type PropertyEditor<T extends PropertyControlProps = any> = FC<T>;
 
 export interface ExtraControlAction {
   title: string;