@basic-ui/material 1.0.0-alpha.5 → 1.0.0-alpha.51

package/src/ThemeExplorer/ColorSchemePicker.tsx

@@ -0,0 +1,55 @@
+import type { Color } from '@basic-ui/color-picker';
+import { startTransition, useEffect, useRef, useState } from 'react';
+
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { TextFieldColorPicker } from './TextFieldColorPicker';
+
+interface ColorSchemePickerProps {
+  label: string;
+  initialValue: Color;
+  onChange: (c: Color) => void;
+  onReset: () => void;
+  resetDisabled: boolean;
+}
+
+export function ColorSchemePicker(props: ColorSchemePickerProps) {
+  const { label, initialValue, onChange, onReset, resetDisabled } = props;
+  const [value, setValue] = useState(initialValue);
+
+  const remountKey = useRef(0);
+  const resetting = useRef(false);
+  useEffect(() => {
+    if (resetting.current) {
+      remountKey.current++;
+      resetting.current = false;
+      setValue(props.initialValue);
+    }
+  }, [props.initialValue]);
+
+  return (
+    <Box display="flex" minWidth="300px" flex="1" alignItems="center">
+      <TextFieldColorPicker
+        key={remountKey.current}
+        label={label}
+        value={value}
+        onChange={(c) => {
+          setValue(c);
+          startTransition(() => {
+            onChange(c);
+          });
+        }}
+      />
+      <Button
+        variant="text"
+        disabled={resetDisabled}
+        onClick={() => {
+          resetting.current = true;
+          onReset();
+        }}
+      >
+        Reset
+      </Button>
+    </Box>
+  );
+}

package/src/ThemeExplorer/FontAutoComplete.tsx

@@ -0,0 +1,139 @@
+import {
+  useState,
+  useMemo,
+  useEffect,
+  useRef,
+  useDeferredValue,
+  memo,
+} from 'react';
+
+import { Box } from '../Box';
+import { Button } from '../Button';
+import {
+  Combobox,
+  ComboboxOption,
+  ComboboxList,
+  ComboboxPopover,
+  ComboboxInput,
+  ComboboxButton,
+} from '../Combobox';
+import { Text } from '../Text';
+import { googleFonts } from './googleFonts';
+
+export interface FontAutoCompleteProps {
+  label?: string;
+  initialValue?: string;
+  onSelect?: (font: string) => void;
+  onReset: () => void;
+  resetDisabled: boolean;
+}
+
+function useFontMatch(searchTerm: string) {
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === ''
+      ? googleFonts
+      : googleFonts.filter((font) => font.toLowerCase().indexOf(term) !== -1);
+  }, [searchTerm]);
+}
+
+export function parseMainFont(fontStr: string): string | undefined {
+  const fonts = fontStr.split(/, */).map((f) => f.replace(/"([^"]+)"/, '$1'));
+  return fonts.length > 0 ? fonts[0] : undefined;
+}
+
+export function FontAutoComplete({
+  initialValue = '',
+  onSelect,
+  label,
+  onReset,
+  resetDisabled,
+}: FontAutoCompleteProps) {
+  const [term, setTerm] = useState<undefined | string>(undefined);
+  const filterTerm = useDeferredValue(term);
+  const [selected, setSelected] = useState(initialValue);
+
+  const resetting = useRef(false);
+  useEffect(() => {
+    if (resetting.current) {
+      setSelected(initialValue);
+      setTerm(undefined);
+      resetting.current = false;
+    }
+  }, [initialValue]);
+
+  const results = useFontMatch(filterTerm || '');
+  return (
+    <Box display="flex" minWidth="300px" flex="1" alignItems="center">
+      <Combobox
+        onSelect={(text) => {
+          setSelected(text);
+          setTerm(text);
+          onSelect?.(text);
+        }}
+        selectOnBlur
+        width="100%"
+      >
+        <Box position="relative" width="100%">
+          <ComboboxInput
+            onChange={(e) => {
+              setTerm(e.target.value);
+            }}
+            value={term === undefined ? selected : term}
+            label={label}
+          />
+          <Box
+            height={56}
+            width={56}
+            position="absolute"
+            justifyContent="center"
+            alignItems="center"
+            display="flex"
+            top={0}
+            right={0}
+            bottom={0}
+          >
+            <ComboboxButton />
+          </Box>
+        </Box>
+        <SearchResults results={results} />
+      </Combobox>
+      <Button
+        variant="text"
+        onClick={() => {
+          resetting.current = true;
+          onReset();
+        }}
+        disabled={resetDisabled}
+      >
+        Reset
+      </Button>
+    </Box>
+  );
+}
+
+const SearchResults = memo(function SearchResults(props: {
+  results: string[];
+}) {
+  if (!props.results) {
+    return null;
+  }
+
+  return (
+    <ComboboxPopover zIndex={100}>
+      <ComboboxList persistSelection={true}>
+        <Text variant="label-medium" opacity={0.6} px={3} py={2}>
+          Sorted by popularity
+        </Text>
+        {props.results.map((result) => (
+          <ComboboxOption
+            key={result}
+            id={result}
+            text={result}
+            value={result}
+          />
+        ))}
+      </ComboboxList>
+    </ComboboxPopover>
+  );
+});

package/src/ThemeExplorer/TextFieldColorPicker.tsx

@@ -1,115 +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>
-      )}
-    </>
-  );
-});
+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

@@ -1,165 +1,8 @@
-import React, { useMemo, useDeferredValue, useEffect } from 'react';
-import {
-  CorePalette,
-  argbFromHex,
-  hexFromArgb,
-} from '@material/material-color-utilities'; // eslint-disable-line import/no-unresolved
-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 />;
+import { theme } from '../theme/theme';
+import { ThemeBuilder } from './ThemeBuilder';
+
+export default {
+  title: 'components/ThemeExplorer',
+};
+
+export const Builder = () => <ThemeBuilder baseTheme={theme} />;