@basic-ui/material 0.1.12 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.12",
+  "version": "0.1.15",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -14,20 +14,20 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "concurrently \"yarn:build:*\"",
-    "build:dts": "tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
-    "build:cjs": "rollup -c ../../rollup.config.js",
-    "build:esm": "cross-env NODE_ENV=production BABEL_ENV=esm babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
-    "build-storybook": "build-storybook -c ../../scripts/storybook -o .out",
-    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
-    "format": "prettier --write '**/*.js'",
-    "start": "yarn run -T start-storybook -p 9001 -c ./scripts/storybook",
-    "serve": "http-server .out",
-    "typecheck": "tsc --noEmit",
+    "build": "run -T concurrently \"yarn:build:*\"",
+    "build:dts": "run -T tsc -p ./tsconfig.json --isolatedModules false --declaration --emitDeclarationOnly",
+    "build:cjs": "run -T rollup -c ../../rollup.config.js",
+    "build:esm": "run -T cross-env NODE_ENV=production BABEL_ENV=esm run -T babel --config-file ../../babel.config.js ./src --extensions \".ts,.tsx,.js,.jsx\" --source-maps --out-dir ./build/esm --ignore \"**/*.story.tsx,**/*.story.ts,**/*.test.tsx,**/*.test.ts\"",
+    "build-storybook": "run -T build-storybook -c ../../scripts/storybook -o .out",
+    "lint": "run -T eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
+    "format": "run -T prettier --write '**/*.js'",
+    "start": "run -T start-storybook -p 9001 -c ./scripts/storybook",
+    "serve": "run -T http-server .out",
+    "typecheck": "run -T tsc --noEmit -p ./tsconfig.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.36",
+    "@basic-ui/core": "^0.0.38",
     "@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": "b38f03ef63550fa2c1b3b0012129f31cb192e9fe"
+  "gitHead": "f3a2affbe87fb4f5e59f5528f9e3af53fc311120"
 }

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

@@ -77,7 +77,9 @@ export const ButtonChip = forwardRef<HTMLDivElement, ButtonChipProps>(
           <Box as="span" pl={rem(4)} pr={rem(8)}>
             {leftIcon}
           </Box>
-          <Box as="span">{children}</Box>
+          <Box as="span" __css={{ minWidth: 'auto', whiteSpace: 'nowrap' }}>
+            {children}
+          </Box>
           <Box as="span" pl={rem(6)} pr={rem(6)}>
             {rightIcon}
           </Box>

package/src/Chip/Chip.story.tsx

@@ -1,11 +1,14 @@
 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';
+import { LoremIpsum } from '../Text/LoremIpsum';
+
+export default {
+  title: 'components/Chip',
+};
 
 const CloseIcon = (props) => (
   <Box
@@ -157,7 +160,7 @@ const AllColors = ({ variant }) => (
   </>
 );
 
-const AllVariants = () => {
+export const AllVariants = () => {
   return (
     <>
       <AllColors variant="filled" />
@@ -166,6 +169,53 @@ const AllVariants = () => {
   );
 };
 
-const stories = storiesOf('Components/Chip', module);
-
-stories.add('choice chip', () => <AllVariants />);
+export const HorizontallyScrollableExample = () => {
+  const texts = [
+    'Temakis',
+    'Sushis',
+    'Beers',
+    'Wine',
+    'Soft drinks',
+    'Cold drinks',
+  ];
+  return (
+    <Box maxWidth="300px" sx={{ backgroundColor: '#ccc' }}>
+      <Box
+        as="nav"
+        sx={{
+          position: 'sticky',
+          top: 0,
+          overflowX: 'auto',
+          bg: 'surface',
+          py: 3,
+          zIndex: 1,
+          borderColor: '#aeaeae',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+        }}
+      >
+        <Box
+          sx={{
+            px: 3,
+            display: 'flex',
+            minWidth: 'auto',
+            width: 'auto',
+            scrollbarWidth: 'none',
+            '& > :not(first-of-type)': {
+              marginLeft: 2,
+            },
+          }}
+        >
+          {texts.map((text) => (
+            <Box key={text} sx={{ minWidth: 'auto' }}>
+              <Chip key={text}>{text}</Chip>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+      <Box>
+        <LoremIpsum count={20} />
+      </Box>
+    </Box>
+  );
+};

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,9 +1,7 @@
 import { useMemo, useState } from 'react';
 import type * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import {
   Combobox,
-  ComboboxLabel,
   ComboboxOption,
   ComboboxList,
   ComboboxPopover,
@@ -13,7 +11,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 +28,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 +86,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);
@@ -106,8 +106,6 @@ export function ControlledClientSideExample({ initialValue = '' }) {
       <p>Selection: {selected}</p>
       <p>Term: {term}</p>
       <Combobox onSelect={handleSelect} selectOnBlur>
-        <ComboboxLabel>Enter a city name</ComboboxLabel>
-        <br />
         <Box position="relative">
           <ComboboxInput
             onChange={handleChange}
@@ -147,11 +145,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} />;