fix: clean up stories

.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',
   ],

.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 }),
+  },
+});

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,
 };
 

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,
 };
 

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,
 };
 

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,
 };
 

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,

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);

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,
 };
 

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,
 };
 

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,
 };
 

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={{

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,
 };
 

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>
   );
 };

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,
 };
 

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',
+      }}
+    />
+  );
+};

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,

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}

core/editors/src/components/Toggle/Toggle.tsx

@@ -1,18 +1,18 @@
-import React, { forwardRef, HTMLProps } from 'react';
+import React, { forwardRef, HTMLProps, FC } from 'react';
 import { Button } from 'theme-ui';
 
 interface ToggleButtonProps {
   active: boolean;
   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}

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;