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

package/src/TextField/Input.tsx

@@ -2,6 +2,13 @@ import { rem } from 'polished';
 import { InputHTMLAttributes, forwardRef } from 'react';
 import { Box, BoxProps } from '../Box';
 import { alpha } from '../color';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+  PADDING_RIGHT_WITHOUT_ICON,
+  PADDING_RIGHT_WITH_ICON,
+} from './consts';
 
 export interface InputProps
   extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
@@ -36,7 +43,6 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
       {...otherProps}
       __css={{
         WebkitTapHighlightColor: 'transparent',
-        boxSizing: 'border-box',
         appearance: 'none',
         outline: 'none',
         width: '100%',
@@ -50,9 +56,20 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         color: alpha('on.surface', 0.87),
         letterSpacing: rem(0.5),
         textAlign: 'left',
+        display: 'flex',
+        alignItems: 'center',
+        ...(!multiline && {
+          lineHeight: 1,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+        }),
         '::placeholder': {
           opacity: 0,
-          color: alpha('on.surface', 0.54),
+          color:
+            variant === 'filled'
+              ? alpha('on.surface-variant', 0.87)
+              : alpha('on.surface-variant', 0.6),
           transition: `opacity .18s cubic-bezier(.4,0,.2,1)`,
         },
         ':disabled::placeholder': {
@@ -64,7 +81,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
         ':disabled': {
           cursor: 'default',
         },
-        'select&,button&': {
+        'select&,[role="button"]&': {
           cursor: 'pointer',
         },
         'select&': {
@@ -73,20 +90,26 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             color: 'on.surface',
           },
         },
-        paddingLeft: leadingIcon ? rem(18 + 30) : rem(16),
-        paddingRight: trailingIcon ? rem(18 + 30) : rem(16),
+        paddingLeft: leadingIcon
+          ? rem(PADDING_LEFT_WITH_ICON + ICON_WIDTH + PADDING_LEFT_WITHOUT_ICON)
+          : rem(PADDING_LEFT_WITHOUT_ICON),
+        paddingRight: trailingIcon
+          ? rem(
+              PADDING_RIGHT_WITH_ICON + ICON_WIDTH + PADDING_RIGHT_WITHOUT_ICON
+            )
+          : rem(PADDING_RIGHT_WITHOUT_ICON),
         ...(variant === 'outlined' && {
-          paddingTop: hasLabel ? rem(12) : rem(12),
-          paddingBottom: hasLabel ? rem(14) : rem(12),
+          paddingTop: rem(16),
+          paddingBottom: rem(16),
         }),
         ...(variant === 'filled' && {
-          paddingTop: hasLabel ? rem(20) : rem(12),
-          paddingBottom: hasLabel ? rem(6) : rem(12),
+          paddingTop: hasLabel ? rem(24) : rem(16),
+          paddingBottom: hasLabel ? rem(8) : rem(16),
         }),
         ...(multiline && {
           resize: 'vertical',
           paddingTop: 0,
-          marginTop: variant === 'outlined' || !hasLabel ? rem(12) : rem(20),
+          marginTop: variant === 'outlined' || !hasLabel ? rem(18) : rem(26),
         }),
         ...__css,
       }}

package/src/TextField/OutlinedContainer.tsx

@@ -10,6 +10,11 @@ import { NotchedOutline } from '../NotchedOutline';
 import { Box, BoxProps } from '../Box';
 import { FloatingLabel } from '../FloatingLabel';
 import { Theme } from '../theme';
+import {
+  ICON_WIDTH,
+  PADDING_LEFT_WITHOUT_ICON,
+  PADDING_LEFT_WITH_ICON,
+} from './consts';
 
 const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -61,9 +66,10 @@ export const OutlinedContainer = forwardRef<
   }, [label]);
 
   const color = error ? 'error' : colorProp;
+  const inputHeight = 56;
 
   return (
-    <Box position="relative" {...otherProps}>
+    <Box position="relative" lineHeight={0} {...otherProps}>
       <NotchedOutline
         ref={forwardedRef}
         borderRadius={4}
@@ -76,9 +82,17 @@ export const OutlinedContainer = forwardRef<
         label={
           label && (
             <FloatingLabel
-              height={56}
-              offsetX={leadingIcon ? 48 : 16}
-              translateX={leadingIcon ? -32 : 0}
+              height={inputHeight}
+              offsetX={
+                leadingIcon
+                  ? PADDING_LEFT_WITH_ICON +
+                    ICON_WIDTH +
+                    PADDING_LEFT_WITHOUT_ICON
+                  : PADDING_LEFT_WITHOUT_ICON
+              }
+              translateX={
+                leadingIcon ? -(PADDING_LEFT_WITH_ICON + ICON_WIDTH) : 0
+              }
               active={forceActive || labelIsFloating}
               ref={labelRef}
               htmlFor={inputId}

package/src/TextField/TextField.story.tsx

@@ -1,11 +1,27 @@
 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 SearchIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={24}
+    width={24}
+    viewBox="0 0 48 48"
+    fill="currentColor"
+    {...props}
+  >
+    <path d="M39.8 41.95 26.65 28.8q-1.5 1.3-3.5 2.025-2 .725-4.25.725-5.4 0-9.15-3.75T6 18.75q0-5.3 3.75-9.05 3.75-3.75 9.1-3.75 5.3 0 9.025 3.75 3.725 3.75 3.725 9.05 0 2.15-.7 4.15-.7 2-2.1 3.75L42 39.75Zm-20.95-13.4q4.05 0 6.9-2.875Q28.6 22.8 28.6 18.75t-2.85-6.925Q22.9 8.95 18.85 8.95q-4.1 0-6.975 2.875T9 18.75q0 4.05 2.875 6.925t6.975 2.875Z" />
+  </svg>
+);
 
 const Example = ({ variant }) => {
   const [error, setError] = useState<boolean | string>(false);
@@ -156,7 +172,7 @@ const Example = ({ variant }) => {
             label="With icon"
             error={error}
             color={color}
-            leadingIcon={'O'}
+            leadingIcon={<SearchIcon />}
           />
         </Box>
         <Box m={2} width={230} display="inline-block">
@@ -220,7 +236,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/TextField/consts.ts

@@ -0,0 +1,7 @@
+export const PADDING_LEFT_WITH_ICON = 14;
+export const PADDING_LEFT_WITHOUT_ICON = 16;
+
+export const ICON_WIDTH = 24;
+
+export const PADDING_RIGHT_WITH_ICON = 12;
+export const PADDING_RIGHT_WITHOUT_ICON = 16;

package/src/ThemeExplorer/ColorPicker.tsx

@@ -0,0 +1,101 @@
+import {
+  Color,
+  ColorPicker as _BaseColorPicker,
+  Hue as _Hue,
+  HueCursor as _HueCursor,
+  Saturation as _Saturation,
+  SaturationCursor as _SaturationCursor,
+  ColorPickerProps as BaseColorPickerProps,
+  HueProps,
+  HueCursorProps,
+  SaturationProps,
+  SaturationCursorProps,
+} from '@basic-ui/color-picker';
+import { Box, BoxProps } from '../Box';
+import { VFC } from 'react';
+
+export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
+  BaseColorPickerProps) & {
+  color: Color;
+  onChange: (color: Color) => void;
+};
+
+const BaseColorPicker: VFC<
+  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps
+> = _BaseColorPicker as any;
+const Hue: VFC<BoxProps & HueProps> = _Hue as any;
+const HueCursor: VFC<BoxProps & HueCursorProps> = _HueCursor as any;
+const Saturation: VFC<BoxProps & SaturationProps> = _Saturation as any;
+const SaturationCursor: VFC<
+  BoxProps & SaturationCursorProps
+> = _SaturationCursor as any;
+
+export const ColorPicker: VFC<ColorPickerProps> = ({
+  color,
+  onChange,
+  width = 450,
+  height = 225,
+  ...otherProps
+}) => {
+  return (
+    <BaseColorPicker
+      as={Box}
+      width={width}
+      height={height}
+      onChange={onChange}
+      color={color}
+      {...otherProps}
+    >
+      <Saturation
+        as={Box}
+        sx={{
+          position: 'relative',
+          touchAction: 'none',
+          userSelect: 'none',
+          width: '100%',
+          backgroundImage:
+            'linear-gradient(transparent, black), linear-gradient(to right, white, transparent)',
+        }}
+      >
+        <SaturationCursor
+          as={Box}
+          sx={{
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            border: '2px solid #ffffff',
+            borderRadius: 'full',
+            boxShadow: '0 0 15px 0 rgba(0, 0, 0, 0.15)',
+            boxSizing: 'border-box',
+            transform: 'translate(-10px, -10px)',
+          }}
+        />
+      </Saturation>
+      <Hue
+        as={Box}
+        sx={{
+          position: 'relative',
+          touchAction: 'none',
+          userSelect: 'none',
+          width: '100%',
+          height: '12px',
+          backgroundImage: `linear-gradient(to right, rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), rgb(255, 0, 0))`,
+        }}
+      >
+        <HueCursor
+          as={Box}
+          sx={{
+            position: 'absolute',
+            width: '20px',
+            height: '20px',
+            border: '2px solid #ffffff',
+            borderRadius: 'full',
+            boxShadow: 'rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px',
+            boxSizing: 'border-box',
+            transform: 'translate(-10px, -4px)',
+          }}
+        />
+      </Hue>
+    </BaseColorPicker>
+  );
+};

package/src/ThemeExplorer/TextFieldColorPicker.tsx

@@ -0,0 +1,112 @@
+import { Color, toColor } from '@basic-ui/color-picker';
+import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
+import { alpha, Box, TextField, Button, TextFieldProps } from '../';
+import { useRef, useState, memo, useCallback } from 'react';
+import { ColorPicker } from './ColorPicker';
+
+export interface TextFieldColorPickerProps
+  extends Omit<TextFieldProps, 'value' | 'defaultValue' | 'onChange'> {
+  value?: Color;
+  defaultValue?: Color;
+  onChange?: (color: Color) => void;
+}
+
+export const TextFieldColorPicker = memo<TextFieldColorPickerProps>((props) => {
+  const {
+    value: valueProp,
+    defaultValue = toColor('hex', '#33ff33'),
+    onChange: onChangeProp,
+    disabled,
+    ...otherProps
+  } = props;
+
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [text, setText] = useState(valueProp?.hex || defaultValue.hex);
+  const [value, _onChange] = useControlledState<Color, any, []>(
+    valueProp,
+    onChangeProp as any,
+    defaultValue,
+    (setState) => (v: any) => {
+      setState(v);
+      setText(v.hex);
+    }
+  );
+
+  const onChange = useCallback(
+    (color: Color) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      _onChange!(color);
+      setText(color.hex.replace('#', ''));
+    },
+    [_onChange]
+  );
+
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  useOnClickOutside(popoverRef, (e) => {
+    if (e.target === buttonRef?.current) {
+      return;
+    }
+    setPopoverOpen(false);
+  });
+
+  return (
+    <>
+      <TextField
+        disabled={disabled}
+        value={text.replace('#', '')}
+        leadingIcon={'#'}
+        trailingIcon={
+          <Button
+            style={{ backgroundColor: value.hex }}
+            color="on.surface"
+            ref={buttonRef}
+            onClick={() => setPopoverOpen((open) => !open)}
+            disabled={disabled}
+            sx={{
+              pointerEvents: 'all',
+              cursor: 'pointer',
+              width: 32,
+              height: 32,
+              borderRadius: 'extra-small',
+              borderWidth: '1px',
+              borderColor: alpha('on.surface', 0.38),
+              borderStyle: 'solid',
+              outlineColor: 'transparent',
+            }}
+          />
+        }
+        maxLength={6}
+        hideCharacterCounter
+        onChange={(e) => {
+          if (e.target.value.match(/^[a-fA-F0-9]{6}$/)) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            onChange!(toColor('hex', '#' + e.target.value));
+            return;
+          }
+          setText(e.target.value);
+        }}
+        {...otherProps}
+      />
+      {popoverOpen && (
+        <Popper
+          anchorEl={buttonRef}
+          placement="bottom-end"
+          style={{ zIndex: 2 }}
+        >
+          <Box ref={popoverRef} py={2}>
+            <Box boxShadow={4}>
+              <ColorPicker
+                color={value}
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                onChange={onChange!}
+                width={220}
+                height={220}
+              />
+            </Box>
+          </Box>
+        </Popper>
+      )}
+    </>
+  );
+});

package/src/ThemeExplorer/ThemeBuilder.story.tsx

@@ -0,0 +1,169 @@
+import React, { useMemo, useDeferredValue, useEffect } from 'react';
+import { Box } from '..';
+import {
+  CorePalette,
+  argbFromHex,
+  hexFromArgb,
+} from '@material/material-color-utilities';
+import { toColor, Color } from '@basic-ui/color-picker';
+import { TonalColors } from './components';
+import { TextFieldColorPicker } from './TextFieldColorPicker';
+import { ThemeColors } from './ThemeColors';
+import { makeColorScheme } from './makeColorScheme';
+import { theme } from '../theme';
+import { Text } from '../Text';
+import { Button } from '../Button';
+import { useLocalStorageCachedState } from './useLocalStorageCachedState';
+import { useDeferredColor } from './useDeferredColor';
+
+export default {
+  title: 'components/ThemeExplorer',
+};
+
+const ThemeBuilder = () => {
+  const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
+    'primary',
+    toColor('hex', theme.colors.primary)
+  );
+  const deferredPrimaryColor = useDeferredValue(primaryColor);
+
+  const { a1, a2, a3, error, n1, n2 } = useMemo(
+    () => CorePalette.of(argbFromHex(deferredPrimaryColor.hex)),
+    [deferredPrimaryColor.hex]
+  );
+
+  const [
+    secondaryColor,
+    secondaryColorTonal,
+    setSecondaryColor,
+  ] = useDeferredColor('secondary', a2);
+  const [
+    tertiaryColor,
+    tertiaryColorTonal,
+    setTertiaryColor,
+  ] = useDeferredColor('tertiary', a3);
+  const [neutralColor, neutralColorTonal, setNeutralColor] = useDeferredColor(
+    'neutral',
+    n1
+  );
+
+  const scheme = useMemo(
+    () =>
+      makeColorScheme({
+        primary: a1,
+        secondary: secondaryColorTonal,
+        tertiary: tertiaryColorTonal,
+        error: error,
+        neutral: neutralColorTonal,
+        neutralVariant: n2,
+      }),
+    [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]
+  );
+
+  useEffect(() => {
+    localStorage.setItem('theme-builder.themeOverride', JSON.stringify(scheme));
+  }, [scheme]);
+
+  return (
+    <Box display="flex">
+      <Box
+        display="flex"
+        my={3}
+        sx={{ gap: 3 }}
+        flexDirection="column"
+        width="300px"
+      >
+        <Box display="flex">
+          <TextFieldColorPicker
+            label="Primary color"
+            value={primaryColor}
+            onChange={(c) => setPrimaryColor(c)}
+          />
+          <Button variant="text" disabled={true}>
+            Reset
+          </Button>
+        </Box>
+        <Box display="flex">
+          <TextFieldColorPicker
+            label="Secondary color"
+            value={
+              secondaryColor ||
+              toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
+            }
+            onChange={(c) => setSecondaryColor(c)}
+          />
+          <Button
+            variant="text"
+            onClick={() => setSecondaryColor(null)}
+            disabled={secondaryColor === null}
+          >
+            Reset
+          </Button>
+        </Box>
+        <Box display="flex">
+          <TextFieldColorPicker
+            label="Tertiary color"
+            value={
+              tertiaryColor ||
+              toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
+            }
+            onChange={(c) => setTertiaryColor(c)}
+          />
+          <Button
+            variant="text"
+            onClick={() => setTertiaryColor(null)}
+            disabled={tertiaryColor === null}
+          >
+            Reset
+          </Button>
+        </Box>
+        <Box display="flex">
+          <TextFieldColorPicker
+            label="Neutral color"
+            value={
+              neutralColor ||
+              toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
+            }
+            onChange={(c) => setNeutralColor(c)}
+          />
+          <Button
+            variant="text"
+            onClick={() => setNeutralColor(null)}
+            disabled={neutralColor === null}
+          >
+            Reset
+          </Button>
+        </Box>
+      </Box>
+      <Box width="600px" mx="auto">
+        <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
+          <Box flex="1">
+            <Text variant="h5" as="h1" pb={'0.3em'}>
+              Light theme
+            </Text>
+            <ThemeColors scheme={scheme} />
+          </Box>
+          <Box flex="1">
+            <Text variant="h5" as="h1" pb={'0.3em'}>
+              Dark theme
+            </Text>
+            <ThemeColors scheme={scheme.modes.dark} />
+          </Box>
+        </Box>
+        <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
+          <TonalColors palette={a1} />
+          <TonalColors palette={secondaryColorTonal} />
+          <TonalColors palette={tertiaryColorTonal} />
+          <TonalColors palette={error} />
+          <TonalColors palette={neutralColorTonal} />
+          <TonalColors palette={n2} />
+        </Box>
+        <Box as="pre" fontFamily="monospace" fontSize="12px">
+          {JSON.stringify({ colors: scheme }, null, 2)}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const Builder = () => <ThemeBuilder />;

package/src/ThemeExplorer/ThemeColors.tsx

@@ -0,0 +1,88 @@
+import React, { memo } from 'react';
+import { Box } from '..';
+import { ColorRow } from './components';
+import { makeColorScheme } from './makeColorScheme';
+
+export const ThemeColors = memo(
+  ({
+    scheme,
+  }: {
+    scheme: Omit<ReturnType<typeof makeColorScheme>, 'modes'>;
+  }) => {
+    function makeColorArrayForToken(token: string) {
+      return [
+        {
+          token: `${token}`,
+          bg: scheme[token],
+          color: scheme.on[token],
+        },
+        {
+          token: `on.${token}`,
+          bg: scheme.on[token],
+          color: scheme[token],
+        },
+        {
+          token: `${token}-container`,
+          bg: scheme[`${token}-container`],
+          color: scheme.on[`${token}-container`],
+        },
+        {
+          token: `on.${token}-container`,
+          bg: scheme.on[`${token}-container`],
+          color: scheme[`${token}-container`],
+        },
+      ];
+    }
+    return (
+      <Box width="600" display="flex" flexDirection="column" sx={{ gap: 2 }}>
+        <ColorRow colors={makeColorArrayForToken('primary')} height={118} />
+        <ColorRow colors={makeColorArrayForToken('secondary')} />
+        <ColorRow colors={makeColorArrayForToken('tertiary')} />
+        <ColorRow colors={makeColorArrayForToken('error')} />
+        <ColorRow
+          colors={[
+            {
+              token: `background`,
+              bg: scheme.background,
+              color: scheme.on.background,
+            },
+            {
+              token: `on.background`,
+              bg: scheme.on.background,
+              color: scheme.background,
+            },
+            {
+              token: `surface`,
+              bg: scheme.surface,
+              color: scheme.on.surface,
+            },
+            {
+              token: `on.surface`,
+              bg: scheme.on.surface,
+              color: scheme.surface,
+            },
+          ]}
+        />
+        <ColorRow
+          colors={[
+            {
+              token: `surface-variant`,
+              bg: scheme['surface-variant'],
+              color: scheme.on['surface-variant'],
+            },
+            {
+              token: `on.surface-variant`,
+              bg: scheme.on['surface-variant'],
+              color: scheme['surface-variant'],
+            },
+            {
+              token: `outline`,
+              bg: scheme.outline,
+              color: scheme.on.outline,
+            },
+          ]}
+        />
+      </Box>
+    );
+  }
+);