@basic-ui/material 0.1.13 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.36",
+    "@basic-ui/core": "^0.0.37",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__css": "^5.0.14",
@@ -50,5 +50,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-spring": "^9.0.0"
   },
-  "gitHead": "6fe8c9cf2cff7546aeb8c6d0b700f78f9ba6e1a5"
+  "gitHead": "78b668ff80ce86a4672b3f34ca2c1aaaf79c56eb"
 }

package/src/Alert/Alert.story.tsx

@@ -1,9 +1,12 @@
 import { Alert } from './';
 import { Link } from '../Link';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
-const Example = () => {
+export default {
+  title: 'Components/Alert',
+};
+
+export const Controlled = () => {
   const color = ['primary', 'secondary', 'error'];
   return (
     <>
@@ -23,7 +26,3 @@ const Example = () => {
     </>
   );
 };
-
-const stories = storiesOf('Components/Alert', module);
-
-stories.add('controlled', () => <Example />);

package/src/AppBar/AppBar.story.tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { AppBar, AppBarButton, AppBarProps } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { LoremIpsum } from '../Text/LoremIpsum';
 import { Button } from '../Button';
 import { BaseLine } from '../BaseLine';
 
+export default {
+  title: 'Components/AppBar',
+};
+
 const MenuIcon = (props) => (
   <svg width={24} height={24} {...props}>
     <path d="M0 0h24v24H0z" fill="none" />
@@ -54,24 +57,12 @@ const Example = ({ variant, size }) => {
   );
 };
 
-const stories = storiesOf('Components/AppBar', module);
+export const Default = () => <Example variant="default" size="default" />;
+export const Primary = () => <Example variant="primary" size="default" />;
+export const Secondary = () => <Example variant="secondary" size="default" />;
 
-stories.add('default appbar', () => (
-  <Example variant="default" size="default" />
-));
-stories.add('primary appbar', () => (
-  <Example variant="primary" size="default" />
-));
-stories.add('secondary appbar', () => (
-  <Example variant="secondary" size="default" />
-));
-
-stories.add('default appbar, dense', () => (
-  <Example variant="default" size="dense" />
-));
-stories.add('primary appbar, dense', () => (
-  <Example variant="primary" size="dense" />
-));
-stories.add('secondary appbar, dense', () => (
+export const DefaultDense = () => <Example variant="default" size="dense" />;
+export const PrimaryDense = () => <Example variant="primary" size="dense" />;
+export const SecondaryDense = () => (
   <Example variant="secondary" size="dense" />
-));
+);

package/src/BottomSheet/BottomSheet.story.tsx

@@ -1,12 +1,15 @@
 import { useState } from 'react';
 import { BottomSheet } from './';
-import { storiesOf } from '@storybook/react';
 import { Button } from '../Button';
 import { LoremIpsum } from '../Text/LoremIpsum';
 import { Box } from '../Box';
 import { Switch } from '../Switch';
 
-const Example = () => {
+export default {
+  title: 'components/BottomSheet',
+};
+
+export const Default = () => {
   const [open, setOpen] = useState(false);
   const [long, setLong] = useState(false);
 
@@ -29,7 +32,3 @@ const Example = () => {
     </Box>
   );
 };
-
-const stories = storiesOf('Components/BottomSheet', module);
-
-stories.add('bottomsheet', () => <Example />);

package/src/Button/Button.story.tsx

@@ -1,8 +1,11 @@
 import { useState } from 'react';
 import { Button } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 
+export default {
+  title: 'components/Button',
+};
+
 const AppsIcon = (props) => (
   <svg width={24} height={24} {...props}>
     <path
@@ -87,12 +90,11 @@ const Example = (props) => {
   );
 };
 
-const stories = storiesOf('Components/Button', module);
 const onClick = (e) => {
   console.log('I got clicked', e.target.innerText);
 };
 
-const ButtonDebug = () => {
+export const DebugButtonClick = () => {
   const [count, setCount] = useState(0);
 
   return (
@@ -104,22 +106,20 @@ const ButtonDebug = () => {
   );
 };
 
-stories.add('debug button click', () => <ButtonDebug />);
-
-stories.add('default', () => (
+export const Default = () => (
   <Example color="surface" colorTransparent="on.surface" onClick={onClick} />
-));
+);
 
-stories.add('primary', () => <Example color="primary" onClick={onClick} />);
+export const Primary = () => <Example color="primary" onClick={onClick} />;
 
-stories.add('secondary', () => <Example color="secondary" onClick={onClick} />);
+export const Secondary = () => <Example color="secondary" onClick={onClick} />;
 
-stories.add('error', () => <Example color="error" onClick={onClick} />);
+export const Error = () => <Example color="error" onClick={onClick} />;
 
-stories.add('disabled', () => (
+export const Disabled = () => (
   <Example color="primary" disabled={true} onClick={onClick} />
-));
+);
 
-stories.add('disabled, secondary', () => (
+export const DisabledSecondary = () => (
   <Example color="secondary" disabled={true} onClick={onClick} />
-));
+);

package/src/Button/SpinnerButton.story.tsx

@@ -5,12 +5,15 @@ import {
   SpinnerProps,
   SpinnerButtonProps,
 } from '@basic-ui/core';
-import { storiesOf } from '@storybook/react';
 import { Button, Box, Text } from '../';
 import { alpha } from '../color';
 import { useTheme } from '../theme';
 import { BoxProps } from '../Box';
 
+export default {
+  title: 'components/SpinnerButton',
+};
+
 const Spinner: FC<
   Omit<BoxProps, 'onChange'> & SpinnerProps
 > = SpinnerBase as any;
@@ -18,8 +21,6 @@ const SpinnerButton: FC<
   BoxProps & SpinnerButtonProps
 > = SpinnerButtonBase as any;
 
-const stories = storiesOf('OtherComponents/SpinnerButton', module);
-
 function AddIcon(props) {
   return (
     <svg viewBox="0 0 24 24" width={24} height={24} {...props}>
@@ -87,6 +88,5 @@ const Example = ({ vertical = false }) => {
   );
 };
 
-stories.add('horizontal', () => <Example />);
-
-stories.add('vertical', () => <Example vertical={true} />);
+export const Horizontal = () => <Example />;
+export const Vertical = () => <Example vertical={true} />;

package/src/CheckBox/CheckBox.story.tsx

@@ -1,9 +1,12 @@
 import { useState, useRef } from 'react';
 import { CheckBox, Box } from '../';
-import { storiesOf } from '@storybook/react';
 import { keyframes } from '@emotion/react';
 import { Keyframes } from '@emotion/serialize';
 
+export default {
+  title: 'components/CheckBox',
+};
+
 const HeartOutline = (props) => {
   return (
     <svg height={24} viewBox="0 0 24 24" width={24} {...props}>
@@ -28,7 +31,7 @@ const HeartFilled = (props) => {
   );
 };
 
-export const settingIn: Keyframes = keyframes({
+const settingIn: Keyframes = keyframes({
   '0%': {
     transform: `scale(1)`,
   },
@@ -40,7 +43,7 @@ export const settingIn: Keyframes = keyframes({
   },
 });
 
-export const settingOut: Keyframes = keyframes({
+const settingOut: Keyframes = keyframes({
   '0%': {
     transform: `scale(1)`,
   },
@@ -147,6 +150,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/CheckBox', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/Chip/Chip.story.tsx

@@ -1,11 +1,13 @@
 import { Chip } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { alpha } from '../color';
 import { RadioGroup } from '../RadioButton';
 import { ChoiceChip } from './ChoiceChip';
-// import './styles.css';
+
+export default {
+  title: 'components/Chip',
+};
 
 const CloseIcon = (props) => (
   <Box
@@ -157,7 +159,7 @@ const AllColors = ({ variant }) => (
   </>
 );
 
-const AllVariants = () => {
+export const AllVariants = () => {
   return (
     <>
       <AllColors variant="filled" />
@@ -165,7 +167,3 @@ const AllVariants = () => {
     </>
   );
 };
-
-const stories = storiesOf('Components/Chip', module);
-
-stories.add('choice chip', () => <AllVariants />);

package/src/Combobox/Combobox.story.tsx

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
 import type * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import {
   Combobox,
   ComboboxLabel,
@@ -13,7 +12,9 @@ import {
 import { Box } from '../Box';
 import cities from '../../../core/src/ComboBox/cities';
 
-const stories = storiesOf('Components/Combobox', module);
+export default {
+  title: 'components/Combobox',
+};
 
 function useCityMatch(searchTerm: string) {
   return useMemo(() => {
@@ -28,7 +29,7 @@ function useCityMatch(searchTerm: string) {
   }, [searchTerm]);
 }
 
-export function UncontrolledClientSideExample({ initialValue = '' }) {
+function UncontrolledClientSideExample({ initialValue = '' }) {
   const [term, setTerm] = useState(initialValue);
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
@@ -86,7 +87,7 @@ export function UncontrolledClientSideExample({ initialValue = '' }) {
   );
 }
 
-export function ControlledClientSideExample({ initialValue = '' }) {
+function ControlledClientSideExample({ initialValue = '' }) {
   const [term, setTerm] = useState(initialValue);
   const [selected, setSelected] = useState(initialValue);
   const results = useCityMatch(term);
@@ -147,11 +148,12 @@ export function ControlledClientSideExample({ initialValue = '' }) {
   );
 }
 
-stories.add('Uncontrolled Clientside', () => <UncontrolledClientSideExample />);
-stories.add('Uncontrolled Clientside - Initial', () => (
+export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
+export const UncontrolledClientSideInitial = () => (
   <UncontrolledClientSideExample initialValue="Aberdeen" />
-));
-stories.add('Controlled Clientside', () => <ControlledClientSideExample />);
-stories.add('Controlled Clientside - Initial', () => (
+);
+
+export const ControlledClientSide = () => <ControlledClientSideExample />;
+export const ControlledClientSideInitial = () => (
   <ControlledClientSideExample initialValue="Aberdeen" />
-));
+);

package/src/Dialog/Dialog.story.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { Dialog, DialogAnimationModes } from './';
-import { storiesOf } from '@storybook/react';
 import { Button } from '../Button';
 import { LoremIpsum } from '../Text/LoremIpsum';
 import { Box } from '../Box';
@@ -8,6 +7,10 @@ import { Switch } from '../Switch';
 import { Select } from '../Select';
 import { SelectItem } from '../SelectItem';
 
+export default {
+  title: 'components/Dialog',
+};
+
 const Example = ({ animationMode = 'slide' as DialogAnimationModes }) => {
   const [open, setOpen] = useState(false);
   const [long, setLong] = useState(false);
@@ -43,10 +46,6 @@ const Example = ({ animationMode = 'slide' as DialogAnimationModes }) => {
   );
 };
 
-const stories = storiesOf('Components/Dialog', module);
-
-stories.add('dialog, slide', () => <Example />);
-stories.add('dialog, grow', () => <Example animationMode={'grow'} />);
-stories.add('dialog, slide-grow', () => (
-  <Example animationMode={'slide-grow'} />
-));
+export const DialogSlide = () => <Example />;
+export const DialogGrow = () => <Example animationMode={'grow'} />;
+export const DialogSlideGrow = () => <Example animationMode={'slide-grow'} />;

package/src/Divider/Divider.story.tsx

@@ -1,9 +1,12 @@
 import { Divider } from './';
-import { storiesOf } from '@storybook/react';
 import { Text } from '../Text';
 import { Box } from '../Box';
 // import './styles.css';
 
+export default {
+  title: 'components/Divider',
+};
+
 const ExampleHorizontal = () => {
   return (
     <Box bg="surface">
@@ -32,7 +35,5 @@ const ExampleVertical = () => {
   );
 };
 
-const stories = storiesOf('Components/Divider', module);
-
-stories.add('horizontal', () => <ExampleHorizontal />);
-stories.add('vertical', () => <ExampleVertical />);
+export const Horizontal = () => <ExampleHorizontal />;
+export const Vertical = () => <ExampleVertical />;

package/src/FloatingLabel/FloatingLabel.story.tsx

@@ -1,8 +1,11 @@
 import { useRef, useState } from 'react';
-import { FloatingLabel } from './FloatingLabel';
+import { FloatingLabel as FloatingLabelComponent } from './FloatingLabel';
 import { Box } from '../Box';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'helper components/FloatingLabel',
+};
 
 const Example = () => {
   const ref = useRef<HTMLDivElement>();
@@ -22,9 +25,9 @@ const Example = () => {
         mb={2}
         bg="#eee"
       >
-        <FloatingLabel active={active} height={50}>
+        <FloatingLabelComponent active={active} height={50}>
           Standard
-        </FloatingLabel>
+        </FloatingLabelComponent>
       </Box>
       <Box
         display="flex"
@@ -38,9 +41,9 @@ const Example = () => {
         mb={2}
         bg="#eee"
       >
-        <FloatingLabel active={active} height={50} offsetX={16}>
+        <FloatingLabelComponent active={active} height={50} offsetX={16}>
           Standard
-        </FloatingLabel>
+        </FloatingLabelComponent>
       </Box>
       <Button onClick={() => setActive(true)}>Activate</Button>
       <Button onClick={() => setActive(false)}>Deactivate</Button>
@@ -48,6 +51,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/FloatingLabel', module);
-
-stories.add('floating label', () => <Example />);
+export const FloatingLabel = () => <Example />;

package/src/LineRipple/LineRipple.story.tsx

@@ -3,7 +3,10 @@ import { LineRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'helper components/LineRipple',
+};
 
 const Example = () => {
   const ref = useRef<HTMLDivElement>();
@@ -36,6 +39,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/LineRipple', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/Link/Link.story.tsx

@@ -1,6 +1,7 @@
 import { Link } from './';
 import { Text } from '../Text';
-import { storiesOf } from '@storybook/react';
+
+export default { title: 'components/Link' };
 
 const Example = () => {
   return (
@@ -10,6 +11,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Link', module);
-
-stories.add('simple', () => <Example />);
+export const Simple = () => <Example />;

package/src/ListItem/ListItem.story.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import { ListItem, ListItemText } from './';
 import { List } from '../List';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/ListItem',
+};
+
 const Example = ({ selectable = false }) => {
   const [selectedItem, setSelectedItem] = useState(selectable ? '0' : '-1');
 
@@ -35,7 +38,5 @@ const Example = ({ selectable = false }) => {
   );
 };
 
-const stories = storiesOf('Components/ListItem', module);
-
-stories.add('normal', () => <Example />);
-stories.add('selectable', () => <Example selectable={true} />);
+export const Normal = () => <Example />;
+export const Selectable = () => <Example selectable={true} />;

package/src/Menu/Menu.story.tsx

@@ -1,9 +1,12 @@
 import { Menu, MenuButton, MenuList, MenuItem, MenuPopover } from '.';
 import { Divider } from '../Divider';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 // import './styles.css';
 
+export default {
+  title: 'components/Menu',
+};
+
 const MenuUncontrolled = ({ disabled }) => {
   return (
     <Box px={5}>
@@ -44,10 +47,8 @@ const MenuUncontrolledWithLinks = ({ disabled }) => {
   );
 };
 
-const stories = storiesOf('Components/Menu', module);
-
-stories.add('uncontrolled', () => <MenuUncontrolled disabled={undefined} />);
-stories.add('uncontrolled, with links', () => (
+export const Uncontrolled = () => <MenuUncontrolled disabled={undefined} />;
+export const UncontrolledWithLinks = () => (
   <MenuUncontrolledWithLinks disabled={undefined} />
-));
-stories.add('disabled', () => <MenuUncontrolled disabled={true} />);
+);
+export const Disabled = () => <MenuUncontrolled disabled={true} />;

package/src/NotchedOutline/NotchedOutline.story.tsx

@@ -1,11 +1,14 @@
 import {} from './';
-import { storiesOf } from '@storybook/react';
 import { NotchedOutline } from './NotchedOutline';
 import { Box } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
 import { rem } from 'polished';
 // import './styles.css';
 
+export default {
+  title: 'helper components/NotchedOutline',
+};
+
 const Example = () => {
   const labelWidth = 68.27;
 
@@ -92,6 +95,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/NotchedOutline', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/Paper/Paper.story.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import { Paper } from './';
-import { storiesOf } from '@storybook/react';
 import { Text } from '../Text';
 import { Box } from '../Box';
 
+export default {
+  title: 'components/Paper',
+};
+
 const Example = ({}) => {
   const [elevation, setElevation] = useState(0);
 
@@ -30,6 +33,4 @@ const Example = ({}) => {
   );
 };
 
-const stories = storiesOf('Components/Paper', module);
-
-stories.add('paper', () => <Example />);
+export const Default = () => <Example />;

package/src/ProgressSpinner/ProgressSpinner.story.tsx

@@ -1,8 +1,11 @@
 import { useEffect, useState } from 'react';
 import { ProgressSpinner } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 
+export default {
+  title: 'components/ProgressSpinner',
+};
+
 const Example = () => {
   const steps = [0, 25, 50, 75, 100];
   const [currentProgress, setCurrentProgress] = useState(0);
@@ -28,6 +31,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/ProgressSpinner', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;

package/src/RadioButton/RadioButton.story.tsx

@@ -1,9 +1,12 @@
 import { useState } from 'react';
 import type * as React from 'react';
 import { RadioButton, RadioGroup, Box } from '../';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/RadioButton',
+};
+
 const Example = (props) => {
   return (
     <>
@@ -29,7 +32,7 @@ const Example = (props) => {
   );
 };
 
-const Standalone = (props) => {
+const StandaloneExample = (props) => {
   const [selectedValue, setSelectedValue] = useState('a');
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedValue(e.target.value);
@@ -90,17 +93,16 @@ const Standalone = (props) => {
   );
 };
 
-const stories = storiesOf('Components/RadioButton', module);
-
-stories.add('controlled', () => (
+export const Controlled = () => (
   <>
     <Example name="demo-1" />
     <Example name="demo-2" />
   </>
-));
-stories.add('standalone', () => (
+);
+
+export const Standalone = () => (
   <>
-    <Standalone name="demo-1" />
-    <Standalone name="demo-2" />
+    <StandaloneExample name="demo-1" />
+    <StandaloneExample name="demo-2" />
   </>
-));
+);

package/src/Ripple/Ripple.story.tsx

@@ -3,10 +3,13 @@ import { Ripple, useRipple } from './';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
 import { useTheme } from '../theme';
 import { get } from '@styled-system/css';
 
+export default {
+  title: 'helper components/Ripple',
+};
+
 const Example = () => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>();
@@ -66,6 +69,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Helper Components/Ripple', module);
-
-stories.add('controlled', () => <Example />);
+export const Controlled = () => <Example />;

package/src/Select/Select.story.tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
 import { Select } from './';
 import { SelectItem } from '../SelectItem';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 // import './styles.css';
 
+export default {
+  title: 'components/Select',
+};
+
 const Example = ({ variant, native = false }) => {
   const [error, setError] = useState<boolean | string>(false);
   const [color, setColor] = useState<'primary' | 'secondary'>('primary');
@@ -191,9 +194,7 @@ const Example = ({ variant, native = false }) => {
   );
 };
 
-const stories = storiesOf('Components/Select', module);
-
-stories.add('filled', () => <Example variant="filled" />);
-stories.add('outlined', () => <Example variant="outlined" />);
-stories.add('filled, native', () => <Example variant="filled" native />);
-stories.add('outlined, native', () => <Example variant="outlined" native />);
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;
+export const FilledNative = () => <Example variant="filled" native />;
+export const OutlinedNative = () => <Example variant="outlined" native />;

package/src/Skeleton/Skeleton.story.tsx

@@ -1,9 +1,12 @@
 import { Skeleton } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { DelayAppearance } from './DelayAppearance';
 
+export default {
+  title: 'components/Skeleton',
+};
+
 const Skeletons = ({
   animation = 'pulse',
 }: {
@@ -46,11 +49,9 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Skeleton', module);
-
-stories.add('controlled', () => <Example />);
-stories.add('controlled, delayed appearance', () => (
+export const Default = () => <Example />;
+export const DelayedAppearance = () => (
   <DelayAppearance>
     <Example />
   </DelayAppearance>
-));
+);

package/src/Snackbar/Snackbar.story.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { Snackbar } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { Select } from '../Select';
@@ -9,6 +8,10 @@ import { Link } from '../Link';
 import { StackProvider, useStack } from './Stack';
 // import './styles.css';
 
+export default {
+  title: 'components/Snackbar',
+};
+
 const Example = () => {
   return (
     <>
@@ -90,8 +93,6 @@ const SnackbarStackExample = () => {
   );
 };
 
-const stories = storiesOf('Components/Snackbar', module);
-
-stories.add('simple', () => <Example />);
-stories.add('controlled', () => <ControlledExample />);
-stories.add('snackbar stack', () => <SnackbarStackExample />);
+export const Default = () => <Example />;
+export const Controlled = () => <ControlledExample />;
+export const SnackbarStack = () => <SnackbarStackExample />;

package/src/Switch/Switch.story.tsx

@@ -1,6 +1,9 @@
 import { Switch } from './';
 import { Box } from '../';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'components/Switch',
+};
 
 const Example = () => {
   return (
@@ -21,6 +24,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Switch', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;

package/src/Tab/Tab.story.tsx

@@ -1,8 +1,12 @@
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from './';
 import { AppBar } from '../AppBar';
-import { storiesOf } from '@storybook/react';
+
 // import './styles.css';
 
+export default {
+  title: 'components/Tab',
+};
+
 const Example = () => {
   return (
     <Tabs defaultIndex={0}>
@@ -45,7 +49,5 @@ const ExampleAppBar = () => {
   );
 };
 
-const stories = storiesOf('Components/Tab', module);
-
-stories.add('controlled', () => <Example />);
-stories.add('with app bar', () => <ExampleAppBar />);
+export const Controlled = () => <Example />;
+export const WithAppBar = () => <ExampleAppBar />;

package/src/Table/Table.story.tsx

@@ -1,6 +1,9 @@
 import { Table, TableRow, TableBody, TableHead, TableCell } from './';
 import { Link } from '../Link';
-import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'components/Table',
+};
 
 const data = {
   items: [
@@ -221,6 +224,4 @@ const GitHubTable = () => {
   );
 };
 
-const stories = storiesOf('Components/Table', module);
-
-stories.add('github table', () => <GitHubTable />);
+export const Example = () => <GitHubTable />;

package/src/Text/Text.story.tsx

@@ -1,8 +1,11 @@
 import { Text } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 // import './styles.css';
 
+export default {
+  title: 'components/Text',
+};
+
 const Example = () => {
   const variantMapping = {
     h1: 'Heading 1',
@@ -34,6 +37,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Text', module);
-
-stories.add('all variants', () => <Example />);
+export const AllVariants = () => <Example />;

package/src/TextField/TextField.story.tsx

@@ -1,11 +1,14 @@
 import { useState } from 'react';
-import { TextField } from './';
-import { storiesOf } from '@storybook/react';
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 import { Select, SelectItem } from '../';
 import { Button } from '../Button';
 import { alpha } from '../color';
+import { TextField } from './';
+
+export default {
+  title: 'components/TextField',
+};
 
 const Example = ({ variant }) => {
   const [error, setError] = useState<boolean | string>(false);
@@ -220,7 +223,5 @@ const Example = ({ variant }) => {
   );
 };
 
-const stories = storiesOf('Components/TextField', module);
-
-stories.add('filled', () => <Example variant="filled" />);
-stories.add('outlined', () => <Example variant="outlined" />);
+export const Filled = () => <Example variant="filled" />;
+export const Outlined = () => <Example variant="outlined" />;

package/src/Tooltip/Tooltip.story.tsx

@@ -1,9 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from './';
 import { Button } from '../Button';
-import { storiesOf } from '@storybook/react';
 // import './styles.css';
 
+export default {
+  title: 'components/Tooltip',
+};
+
 const Example = () => {
   const buttonRef = useRef();
   const [counter, setCounter] = useState(0);
@@ -28,6 +31,4 @@ const Example = () => {
   );
 };
 
-const stories = storiesOf('Components/Tooltip', module);
-
-stories.add('controlled', () => <Example />);
+export const Default = () => <Example />;