@basic-ui/material 0.1.16 → 1.0.0-alpha.2

package/src/TextField/TextField.story.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Box } from '../Box';
 import { CheckBox } from '../CheckBox';
 import { Select, SelectItem } from '../';

package/src/TextField/TextField.tsx

@@ -1,12 +1,15 @@
 import { forwardRef, useState, useId } from 'react';
-import type * as React from 'react';
+import * as React from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
-import { Input, InputProps } from './Input';
+
+import type { InputProps } from './Input';
+import { Input } from './Input';
 import { useTheme } from '../theme';
 import { FilledContainer } from './FilledContainer';
 import { OutlinedContainer } from './OutlinedContainer';
 import { HelperText } from './HelperText';
-import { Box, BoxProps } from '../Box';
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
 import { IconContainer } from './IconContainer';
 
 const componentMap = {

package/src/ThemeExplorer/ColorPicker.tsx

@@ -0,0 +1,104 @@
+import type {
+  Color,
+  ColorPickerProps as BaseColorPickerProps,
+  HueProps,
+  HueCursorProps,
+  SaturationProps,
+  SaturationCursorProps,
+} from '@basic-ui/color-picker';
+import {
+  ColorPicker as _BaseColorPicker,
+  Hue as _Hue,
+  HueCursor as _HueCursor,
+  Saturation as _Saturation,
+  SaturationCursor as _SaturationCursor,
+} from '@basic-ui/color-picker';
+import type { FC } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+
+export type ColorPickerProps = (Omit<BoxProps, 'color' | 'onChange'> &
+  BaseColorPickerProps) & {
+  color: Color;
+  onChange: (color: Color) => void;
+};
+
+const BaseColorPicker: FC<
+  Omit<BoxProps, 'color' | 'onChange'> & BaseColorPickerProps
+> = _BaseColorPicker as any;
+const Hue: FC<BoxProps & HueProps> = _Hue as any;
+const HueCursor: FC<BoxProps & HueCursorProps> = _HueCursor as any;
+const Saturation: FC<BoxProps & SaturationProps> = _Saturation as any;
+const SaturationCursor: FC<BoxProps & SaturationCursorProps> =
+  _SaturationCursor as any;
+
+export const ColorPicker: FC<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,115 @@
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
+import { Popper, useControlledState, useOnClickOutside } from '@basic-ui/core';
+import { useRef, useState, memo, useCallback } from 'react';
+
+import type { TextFieldProps } from '../';
+import { alpha, Box, TextField, Button } from '../';
+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,165 @@
+import React, { useMemo, useDeferredValue, useEffect } from 'react';
+import {
+  CorePalette,
+  argbFromHex,
+  hexFromArgb,
+} from '@material/material-color-utilities';
+import type { Color } from '@basic-ui/color-picker';
+import { toColor } from '@basic-ui/color-picker';
+
+import { Box } from '..';
+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,89 @@
+import React, { memo } from 'react';
+
+import { Box } from '..';
+import { ColorRow } from './components';
+import type { 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>
+    );
+  }
+);

package/src/ThemeExplorer/ThemeExplorer.story.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+
+import { ThemeColors } from './ThemeColors';
+import { DARK_THEME_CLASS, DEFAULT_THEME_CLASS, Box } from '../';
+
+export default {
+  title: 'components/ThemeExplorer',
+};
+
+const ThemeExplorer = () => {
+  const theme = useTheme();
+  return (
+    <>
+      <Box
+        flex="1"
+        p={3}
+        borderRadius="extra-large"
+        overflow="hidden"
+        border="1px solid #fff"
+        borderColor="outline"
+        bg="surface"
+        className={DEFAULT_THEME_CLASS}
+      >
+        <ThemeColors scheme={theme.colors as any} />
+      </Box>
+      <Box
+        flex="1"
+        p={3}
+        borderRadius="extra-large"
+        overflow="hidden"
+        border="1px solid #fff"
+        borderColor="outline"
+        bg="surface"
+        className={DARK_THEME_CLASS}
+      >
+        <ThemeColors scheme={theme.colors.modes.dark as any} />
+      </Box>
+    </>
+  );
+};
+
+export const Explorer = () => <ThemeExplorer />;