@basic-ui/material 0.1.11 → 0.1.14

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/ColorMode/ColorModeProvider.tsx

@@ -65,14 +65,20 @@ export const ColorModeProvider: React.FC<ColorModeProviderProps> = (props) => {
   }, [setColorMode]);
 
   const globalStyles = useMemo(() => {
-    const ret = { body: styles['default'] || {} };
-    ret[`.${DEFAULT_THEME_CLASS}`] = styles['default'] || {};
+    const ret = {
+      body: { colorScheme: 'light', ...(styles['default'] || {}) },
+    };
+
+    ret[`.${DEFAULT_THEME_CLASS}`] = {
+      colorScheme: 'light',
+      ...(styles['default'] || {}),
+    };
 
     for (const key in styles) {
       if (key === 'default') {
         continue;
       }
-      ret[`.${DARK_THEME_CLASS}`] = styles[key];
+      ret[`.${DARK_THEME_CLASS}`] = { colorScheme: 'dark', ...styles[key] };
     }
 
     return ret;

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/Dialog/useDialogAnimation.tsx

@@ -4,7 +4,7 @@ const styles = {
   slide: {
     closed: { opacity: 0.6, transform: 'translateY(100%)' },
     open: { opacity: 1, transform: 'translateY(0%)' },
-    close: { opacity: 0, transform: 'translateY(100%)' },
+    close: { opacity: 0, transform: 'translateY(10%)' },
   },
   grow: {
     closed: { opacity: 0.8, transform: 'scale(0.8)' },

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/Ripple/keyframes.ts

@@ -27,11 +27,9 @@ export const opacityIn: Keyframes = keyframes({
 
 export const opacityOut: Keyframes = keyframes({
   from: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
     opacity: `var(${RIPPLE_OPACITY_END})`,
   },
   to: {
-    transform: `translate(var(${RIPPLE_TRANSLATE_END}, 0)) scale(var(${RIPPLE_SCALE_END}, 1))`,
     opacity: '0',
   },
 });

package/src/Ripple/useRipple.ts

@@ -175,7 +175,9 @@ export const useRipple = (opts: RippleOptions) => {
         `${opacityIn} ${enterDuration / 3}ms forwards`;
       break;
     case 'leaving':
-      animation = `${opacityOut} ${leaveDuration}ms forwards`;
+      animation =
+        `${radiusIn} ${enterDuration}ms forwards,` +
+        `${opacityOut} ${leaveDuration}ms forwards`;
       break;
   }
 

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