@basic-ui/material 0.1.12 → 0.1.15

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/Select/Select.tsx

@@ -5,12 +5,12 @@ import {
   ForwardRefExoticComponent,
   RefAttributes,
   useEffect,
+  useId,
 } from 'react';
 
 import type * as React from 'react';
 import {
   wrapEvent,
-  useId,
   assignMultipleRefs,
   useControlledState,
 } from '@basic-ui/core';

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/LoremIpsum.tsx

@@ -1,8 +1,10 @@
+import { FC } from 'react';
 import { Text } from '.';
 
 const phrase =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt sem ut tincidunt eleifend. Cras eget sem nisi. Mauris at orci pretium, auctor ex non, vestibulum mauris. Etiam at nisi eu enim volutpat semper. Phasellus interdum tincidunt eleifend. Suspendisse potenti. Nulla dapibus felis in purus tristique pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-export const LoremIpsum = ({ count = 50 }) => {
+
+export const LoremIpsum: FC<{ count: number }> = ({ count = 50 }) => {
   const phrases = [];
   for (let i = 0; i < count; i++) {
     phrases.push(

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/TextField/TextField.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, useId } from 'react';
 import type * as React from 'react';
-import { wrapEvent, useId, useControlledState } from '@basic-ui/core';
+import { wrapEvent, useControlledState } from '@basic-ui/core';
 import { Input, InputProps } from './Input';
 import { useTheme } from '../theme';
 import { FilledContainer } from './FilledContainer';

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

package/src/hooks/useAnimation.ts

@@ -43,51 +43,61 @@ export function useAnimation<
   });
 
   const handleClose = useCallback(() => {
-    setAnimation((animation) => ({
-      ...animation,
-      state: 'close',
-      style: animationStyle.close || animationStyle.closed,
-      timing: closeTimeoutInMilliseconds,
-    }));
-
-    return setTimeout(() => {
-      setAnimation({
-        state: 'closed',
-        style: animationStyle.closed,
-        open: false,
-        timing: closeTimeoutInMilliseconds,
-      });
-    }, closeTimeoutInMilliseconds);
+    setAnimation((animation) =>
+      animation.state === 'closed'
+        ? animation
+        : {
+            ...animation,
+            state: 'close',
+            style: animationStyle.close || animationStyle.closed,
+            timing: closeTimeoutInMilliseconds,
+          }
+    );
   }, [animationStyle, closeTimeoutInMilliseconds]);
 
   const handleOpen = useCallback(() => {
-    setAnimation((animation) => ({
-      ...animation,
-      open: true,
-      state: 'opening',
-      style: animationStyle.opening || animationStyle.closed,
-    }));
-    return requestAnimationFrame(() => {
+    setAnimation((animation) =>
+      animation.state === 'open'
+        ? animation
+        : {
+            ...animation,
+            open: true,
+            state: 'opening',
+            style: animationStyle.opening || animationStyle.closed,
+          }
+    );
+  }, [animationStyle]);
+
+  useEffect(() => {
+    if (state === 'opening') {
       setAnimation((animation) => ({
         ...animation,
         state: 'open',
         style: animationStyle.open,
         timing: openTimeoutInMilliseconds,
       }));
-    });
-  }, [animationStyle, openTimeoutInMilliseconds]);
+    }
+  }, [animationStyle.open, openTimeoutInMilliseconds, state]);
+
+  useEffect(() => {
+    if (state === 'close') {
+      const timeout = setTimeout(() => {
+        setAnimation({
+          state: 'closed',
+          style: animationStyle.closed,
+          open: false,
+          timing: closeTimeoutInMilliseconds,
+        });
+      }, closeTimeoutInMilliseconds);
+      return () => clearTimeout(timeout);
+    }
+  }, [animationStyle.closed, closeTimeoutInMilliseconds, state]);
 
   useEffect(() => {
     if (openProp) {
-      const frameHandler = handleOpen();
-      return () => {
-        cancelAnimationFrame(frameHandler);
-      };
+      handleOpen();
     } else {
-      const timeoutHandler = handleClose();
-      return () => {
-        clearTimeout(timeoutHandler);
-      };
+      handleClose();
     }
   }, [handleClose, handleOpen, openProp]);