@basic-ui/material 0.1.13 → 1.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "0.1.13",
+  "version": "1.0.0-alpha.0",
   "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",
@@ -35,8 +35,10 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
+    "@basic-ui/color-picker": "*",
     "@emotion/react": "11.9.0",
     "@emotion/styled": "11.8.1",
+    "@material/material-color-utilities": "^0.1.1",
     "polished": "^4.1.1"
   },
   "peerDependencies": {
@@ -49,6 +51,5 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "react-spring": "^9.0.0"
-  },
-  "gitHead": "6fe8c9cf2cff7546aeb8c6d0b700f78f9ba6e1a5"
+  }
 }

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

@@ -19,7 +19,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
       __css={{
         p: 3,
         bg: alpha(color, 0.1),
-        borderRadius: rem(4),
+        borderRadius: 'extra-small',
         borderColor: alpha(color, 0.2),
         borderStyle: 'solid',
         borderWidth: rem(1),

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

@@ -54,17 +54,16 @@ export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(function AppBar(
         ref={forwardedRef}
         theme={theme}
         variant="square"
-        backgroundOverlay={variantProp === 'default' ? 4 : 0}
+        backgroundOverlay={
+          elevation === 'elevated' && variantProp === 'default'
+            ? get(theme, `appbar.elevations.${elevation}.boxShadow`, 2)
+            : 0
+        }
         color={
           variantProp === 'default' || variantProp === 'transparent'
             ? 'on.surface'
             : `on.${variantProp}`
         }
-        elevation={
-          elevation === 'elevated'
-            ? get(theme, `appbar.elevations.${elevation}.boxShadow`, 4)
-            : 0
-        }
         __css={{
           boxSizing: 'border-box',
           display: 'inline-flex',

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/BottomSheet/BottomSheetSurface.tsx

@@ -23,7 +23,7 @@ export const BottomSheetSurface = forwardRef<
       ref={forwardedRef}
       as={Paper}
       theme={theme}
-      elevation={24}
+      elevation={5}
       __css={{
         position: 'absolute',
         bg: 'surface',

package/src/Button/BaseButton.tsx

@@ -10,6 +10,7 @@ export interface BaseButtonProps
     React.ButtonHTMLAttributes<HTMLButtonElement>
   > {
   elevation?: string;
+  isGroupedButton?: boolean;
 }
 
 export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(

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
@@ -16,11 +19,12 @@ const AppsIcon = (props) => (
 const Example = (props) => {
   return (
     <Box bg="surface">
-      <Box p={3}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Button variant="filled" {...props}>
+          Filled
+        </Button>
         <Button
           variant="text"
-          mr={2}
-          mb={2}
           {...props}
           color={props.colorTransparent || props.color}
         >
@@ -28,58 +32,44 @@ const Example = (props) => {
         </Button>
         <Button
           variant="outlined"
-          mr={2}
-          mb={2}
           {...props}
           color={props.colorTransparent || props.color}
         >
           Outlined
         </Button>
-        <Button variant="filled" mr={2} mb={2} {...props}>
-          Unelevated
-        </Button>
-        <Button variant="filled" elevation="contained" mr={2} mb={2} {...props}>
-          Contained
+        <Button variant="filled" elevation="elevated" {...props}>
+          Elevated
         </Button>
       </Box>
-      <Box p={3}>
-        <Button variant="fab" elevation="floating" mr={2} mb={2} {...props}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Button variant="fab-mini" elevation="floating" {...props}>
           S
         </Button>
-        <Button
-          variant="fab-mini"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
+        <Button variant="fab" elevation="floating" {...props}>
           S
         </Button>
-        <Button
-          variant="fab-extended"
-          elevation="floating"
-          mr={2}
-          mb={2}
-          {...props}
-        >
+        <Button variant="fab-large" elevation="floating" {...props}>
+          S
+        </Button>
+        <Button variant="fab-extended" elevation="floating" {...props}>
           Fab extended
         </Button>
       </Box>
-      <Box p={3}>
-        <Box bg={props.color} display="inline-block" mr={2}>
-          <Button variant="icon" m={1} {...props} color={`on.${props.color}`}>
+      <Box p={3} display="flex" sx={{ gap: 2 }}>
+        <Box bg={props.color} display="inline-block">
+          <Button variant="icon" {...props} color={`on.${props.color}`}>
             <AppsIcon title="apps icon" />
           </Button>
         </Box>
-        <Box bg={'#333'} display="inline-block" mr={2}>
-          <Button variant="icon" m={1} {...props} color="#fff">
+        <Box bg={'#333'} display="inline-block">
+          <Button variant="icon" {...props} color="#fff">
             <AppsIcon title="apps icon" />
           </Button>
         </Box>
-        <Button variant="icon" m={1} {...props} color="on.surface">
+        <Button variant="icon" {...props} color="on.surface">
           <AppsIcon title="apps icon" />
         </Button>
-        <Button variant="icon" m={1} {...props} color="#f00">
+        <Button variant="icon" {...props} color="#f00">
           <AppsIcon title="apps icon" />
         </Button>
       </Box>
@@ -87,12 +77,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 +93,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/Button.tsx

@@ -1,12 +1,14 @@
 import { forwardRef } from 'react';
 import type * as React from 'react';
 import * as TransparentButton from './TransparentButton';
+import * as FloatingActionButton from './FloatingActionButton';
 import * as FilledButton from './FilledButton';
 import * as OutlinedButton from './OutlinedButton';
 import * as IconButton from './IconButton';
 import { useTheme } from '../theme';
 import { useRippleSurface } from '../Ripple';
 import { BaseButtonProps } from './BaseButton';
+import { useButtonGroupContext } from './context';
 
 export type ButtonVariants =
   | 'text'
@@ -14,6 +16,7 @@ export type ButtonVariants =
   | 'filled'
   | 'fab'
   | 'fab-mini'
+  | 'fab-large'
   | 'fab-extended'
   | 'icon';
 
@@ -22,8 +25,9 @@ const componentMapping = {
   outlined: OutlinedButton.OutlinedButton,
   filled: FilledButton.FilledButton,
   fab: FilledButton.FilledButton,
-  'fab-extended': FilledButton.FilledButton,
   'fab-mini': FilledButton.FilledButton,
+  'fab-large': FilledButton.FilledButton,
+  'fab-extended': FilledButton.FilledButton,
   icon: TransparentButton.TransparentButton,
 };
 
@@ -31,9 +35,10 @@ const rippleMapping = {
   text: TransparentButton.getRippleProperties,
   outlined: TransparentButton.getRippleProperties,
   filled: FilledButton.getRippleProperties,
-  fab: FilledButton.getRippleProperties,
+  fab: FloatingActionButton.getRippleProperties,
+  'fab-mini': FloatingActionButton.getRippleProperties,
+  'fab-large': FloatingActionButton.getRippleProperties,
   'fab-extended': FilledButton.getRippleProperties,
-  'fab-mini': FilledButton.getRippleProperties,
   icon: IconButton.getRippleProperties,
 };
 
@@ -45,19 +50,27 @@ export interface ButtonProps extends BaseButtonProps {
   variant?: ButtonVariants;
   color?: ButtonColors;
   disabled?: boolean;
-  elevation?: 'none' | 'contained' | 'floating';
+  elevation?: 'none' | 'default' | 'contained' | 'floating' | 'elevated';
+}
+
+function getFallbackElevation(variant: ButtonVariants = 'text') {
+  if (variant === 'text' || variant === 'outlined' || variant === 'icon') {
+    return 'none';
+  }
+  return 'default';
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(props, forwardedRef) {
+    const buttonGroup = useButtonGroupContext();
     const {
       children,
-      variant = 'text',
+      variant = buttonGroup?.variant || 'text',
       onPointerDown: onPointerDownProp,
       onKeyDown: onKeyDownProp,
       color = 'primary',
       disabled = false,
-      elevation = 'none',
+      elevation = getFallbackElevation(props.variant),
       style: styleProp,
       ...otherProps
     } = props;
@@ -85,6 +98,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         aria-disabled={disabled ? 'true' : undefined}
         color={color}
         elevation={elevation}
+        isGroupedButton={Boolean(buttonGroup)}
         {...rippleProps}
         {...otherProps}
       >

package/src/Button/ButtonGroup.story.tsx

@@ -0,0 +1,106 @@
+import { Box } from '../Box';
+import { Button } from './Button';
+import { ButtonGroup as BaseButtonGroup } from './ButtonGroup';
+
+export default { title: 'components/ButtonGroup' };
+
+const Example = () => {
+  return (
+    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button>Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+    </Box>
+  );
+};
+
+const Pressable = () => {
+  return (
+    <Box sx={{ gap: 24, flexDirection: 'column', display: 'flex' }}>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="text">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="filled">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+      <BaseButtonGroup variant="outlined">
+        <Button aria-pressed="true">Hello</Button>
+        <Button disabled>Hello</Button>
+        <Button>Hello</Button>
+      </BaseButtonGroup>
+    </Box>
+  );
+};
+
+export const ButtonGroup = () => <Example />;
+export const ButtonGroupPressable = () => <Pressable />;

package/src/Button/ButtonGroup.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef, useMemo } from 'react';
+import { ButtonProps } from './Button';
+import { ButtonGroupContext, ButtonGroupContextProps } from './context';
+
+export type ButtonGroupProps = ButtonProps & ButtonGroupContextProps;
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      variant = 'text',
+      direction = 'row',
+      ...otherProps
+    } = props;
+
+    const value: ButtonGroupContextProps = useMemo(
+      () => ({ direction, variant }),
+      [direction, variant]
+    );
+
+    return (
+      <ButtonGroupContext.Provider value={value}>
+        <Comp
+          ref={forwardedRef}
+          role="group"
+          data-button-group=""
+          data-button-group-direction={direction}
+          {...otherProps}
+        />
+      </ButtonGroupContext.Provider>
+    );
+  }
+);

package/src/Button/FilledButton.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { readableColor } from 'polished';
+import { readableColor, rem } from 'polished';
 import { BaseButton } from './BaseButton';
 import { Theme } from '../theme';
-import { alpha, getDarkThemeBackgroundOverlay } from '../color';
+import { alpha, getBackgroundOverlay } from '../color';
 import { get, css } from '@styled-system/css';
 
 export const FilledButton = styled(BaseButton)(
@@ -21,13 +21,46 @@ export const FilledButton = styled(BaseButton)(
         backgroundBlendMode: 'overlay',
         cursor: 'default',
       },
+      '&:focus-visible': {
+        outlineColor: get(theme, `colors.${String(color)}`) || color,
+        outlineWidth: 2,
+        outlineStyle: 'auto',
+        outlineOffset: '2px',
+      },
     }),
   ({ color = 'primary', elevation = 'none', theme }) =>
     color === 'surface' && {
-      ...getDarkThemeBackgroundOverlay(
+      ...getBackgroundOverlay(
         theme,
-        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0)
+        get(theme, `buttons.elevations.${elevation}.boxShadow`, 0),
+        'primary'
       ),
+    },
+  ({ color = 'primary', theme, isGroupedButton = false }) =>
+    isGroupedButton && {
+      '[data-button-group=""] &': {
+        borderColor:
+          get(theme, `colors.on.${String(color)}`) ||
+          (typeof color === 'string' ? readableColor(color) : undefined),
+        ':first-of-type': {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          borderRightStyle: 'solid',
+          borderRightWidth: rem(1),
+        },
+        ':not(:first-of-type):not(:last-of-type)': {
+          borderRadius: 0,
+        },
+        ':last-of-type': {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          borderLeftStyle: 'solid',
+          borderLeftWidth: rem(1),
+        },
+        ':last-of-type:nth-of-type(2)': {
+          borderLeftWidth: 0,
+        },
+      },
     }
 );
 
@@ -36,5 +69,6 @@ export function getRippleProperties(theme: Theme) {
     hoverOpacity: get(theme, `buttons.overlays.filled.hover.opacity`),
     focusOpacity: get(theme, `buttons.overlays.filled.focus.opacity`),
     pressedOpacity: get(theme, `buttons.overlays.filled.pressed.opacity`),
+    rippleEnabled: false,
   };
 }

package/src/Button/FloatingActionButton.tsx

@@ -0,0 +1,9 @@
+import { getRippleProperties as filledButtonGetProperties } from './FilledButton';
+import { Theme } from '../theme';
+
+export function getRippleProperties(theme: Theme) {
+  return {
+    ...filledButtonGetProperties(theme),
+    rippleEnabled: true,
+  };
+}

package/src/Button/IconButton.tsx

@@ -5,5 +5,6 @@ export function getRippleProperties(theme: Theme) {
   return {
     ...filledButtonGetProperties(theme),
     center: true,
+    rippleEnabled: true,
   };
 }