@basic-ui/material 1.0.0-alpha.16 → 1.0.0-alpha.17

package/src/Slider/index.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/src/TextField/OutlinedContainer.tsx

@@ -58,12 +58,17 @@ export const OutlinedContainer = forwardRef<
 
     if (element) {
       setLabelWidth(element.offsetWidth);
-      (document as any)?.fonts?.ready?.then(() => {
+      function handleFontsLoaded() {
         // set the label width again once the fonts have been loaded
         requestAnimationFrame(() => {
-          setLabelWidth(element.offsetWidth);
+          if (element) setLabelWidth(element.offsetWidth);
         });
-      });
+      }
+      document.fonts?.addEventListener?.('loadingdone', handleFontsLoaded);
+      document.fonts?.ready?.then(handleFontsLoaded);
+
+      return () =>
+        document.fonts?.removeEventListener?.('loadingdone', handleFontsLoaded);
     }
   }, [label]);
 

package/src/ThemeExplorer/BorderSlider.tsx

@@ -0,0 +1,73 @@
+import type { ButtonHTMLAttributes, FC } from 'react';
+import { startTransition, useEffect, useRef, useState } from 'react';
+
+import type { BoxProps } from '../Box';
+import { Box } from '../Box';
+import { Link as BaseLink } from '../Link';
+import { Slider, SliderMarker } from '../Slider';
+import { Text } from '../Text';
+
+const Link: FC<
+  BoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>
+> = BaseLink as any;
+
+export function BorderSlider(props: {
+  label: string;
+  defaultValue: number;
+  onChange: (value: number) => void;
+  onReset: () => void;
+  resetDisabled: boolean;
+}) {
+  const [value, setValue] = useState(props.defaultValue);
+
+  const resetting = useRef(false);
+  useEffect(() => {
+    if (resetting.current) {
+      setValue(props.defaultValue);
+      resetting.current = false;
+    }
+  }, [props.defaultValue]);
+
+  return (
+    <Box width="100%" display="flex" flexDirection="column">
+      <Text display="flex" justifyContent="space-between" width="100%" pb={2}>
+        <span>
+          {props.label}{' '}
+          <Link
+            as="button"
+            disabled={props.resetDisabled ? true : undefined}
+            onClick={() => {
+              resetting.current = true;
+              props.onReset();
+            }}
+          >
+            Reset
+          </Link>
+        </span>
+        <span>{value}px</span>
+      </Text>
+      <Slider
+        value={value}
+        onChange={(e, v) => {
+          setValue(v);
+          startTransition(() => {
+            props.onChange(v);
+          });
+        }}
+        min={0}
+        max={64}
+        step={2}
+      >
+        <SliderMarker value={2} />
+        <SliderMarker value={4} />
+        <SliderMarker value={8} />
+        <SliderMarker value={12} />
+        <SliderMarker value={16} />
+        <SliderMarker value={24} />
+        <SliderMarker value={32} />
+        <SliderMarker value={40} />
+        <SliderMarker value={48} />
+      </Slider>
+    </Box>
+  );
+}

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/ThemeBuilder.story.tsx

@@ -1,7 +1,8 @@
+import { theme } from '../theme/theme';
 import { ThemeBuilder } from './ThemeBuilder';
 
 export default {
   title: 'components/ThemeExplorer',
 };
 
-export const Builder = () => <ThemeBuilder />;
+export const Builder = () => <ThemeBuilder baseTheme={theme} />;

package/src/ThemeExplorer/ThemeBuilder.tsx

@@ -1,5 +1,5 @@
 import type { ComponentType } from 'react';
-import { useState, useMemo, useDeferredValue, useEffect } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import {
   CorePalette,
   argbFromHex,
@@ -11,18 +11,22 @@ import {
   THEME_OVERRIDE_STORAGE_KEY,
   injectThemeOverride,
   transformTheme,
+  loadGoogleFont,
 } from '@basic-ui/dynamic-theme';
+import { rem } from 'polished';
+import remToPx from 'polished/lib/helpers/remToPx';
 
 import { Box } from '../Box';
 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';
+import { FontAutoComplete, parseMainFont } from './FontAutoComplete';
+import type { Theme } from '../theme/theme';
+import { BorderSlider } from './BorderSlider';
+import { ColorSchemePicker } from './ColorSchemePicker';
 
 export interface ThemeBuilderProps {
   CodeHighlightingComponent?: ComponentType<{
@@ -30,6 +34,7 @@ export interface ThemeBuilderProps {
     className: string;
     showButtons?: boolean;
   }>;
+  baseTheme: Theme;
 }
 
 function DefaultHighlighter(props: { children: string }) {
@@ -50,16 +55,52 @@ export const ThemeBuilder = (props: ThemeBuilderProps) => {
 };
 
 const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
-  const { CodeHighlightingComponent = DefaultHighlighter } = props;
+  const { baseTheme: theme, CodeHighlightingComponent = DefaultHighlighter } =
+    props;
+  const [plainFont, setPlainFont] = useLocalStorageCachedState(
+    parseMainFont(theme.fonts.plain),
+    'fontFamily.plain'
+  );
+  const [brandFont, setBrandFont] = useLocalStorageCachedState(
+    parseMainFont(theme.fonts.brand),
+    'fontFamily.brand'
+  );
+
+  const [radiusExtraSmall, setRadiusExtraSmall] =
+    useLocalStorageCachedState<number>(
+      parseInt(remToPx(theme.radii['extra-small'])),
+      'radii.extra-small'
+    );
+
+  const [radiusSmall, setRadiusSmall] = useLocalStorageCachedState<number>(
+    parseInt(remToPx(theme.radii['small'])),
+    'radii.small'
+  );
+
+  const [radiusMedium, setRadiusMedium] = useLocalStorageCachedState<number>(
+    parseInt(remToPx(theme.radii['medium'])),
+    'radii.medium'
+  );
+
+  const [radiusLarge, setRadiusLarge] = useLocalStorageCachedState<number>(
+    parseInt(remToPx(theme.radii['large'])),
+    'radii.large'
+  );
+
+  const [radiusExtraLarge, setRadiusExtraLarge] =
+    useLocalStorageCachedState<number>(
+      parseInt(remToPx(theme.radii['extra-large'])),
+      'radii.extra-large'
+    );
+
   const [primaryColor, setPrimaryColor] = useLocalStorageCachedState<Color>(
     toColor('hex', theme.colors.primary),
     'primary'
   );
-  const deferredPrimaryColor = useDeferredValue(primaryColor);
 
   const { a1, a2, a3, error, n1, n2 } = useMemo(
-    () => CorePalette.of(argbFromHex(deferredPrimaryColor.hex)),
-    [deferredPrimaryColor.hex]
+    () => CorePalette.of(argbFromHex(primaryColor.hex)),
+    [primaryColor.hex]
   );
 
   const [secondaryColor, secondaryColorTonal, setSecondaryColor] =
@@ -84,10 +125,43 @@ const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
     [a1, secondaryColorTonal, tertiaryColorTonal, error, neutralColorTonal, n2]
   );
 
+  const newTheme = useMemo(
+    () => ({
+      colors: scheme,
+      fonts: { plain: `"${plainFont}"`, brand: `"${brandFont}"` },
+      radii: {
+        'extra-small': rem(radiusExtraSmall),
+        'extra-small_top': `${rem(radiusExtraSmall)} ${rem(
+          radiusExtraSmall
+        )} 0 0`,
+        small: rem(radiusSmall),
+        medium: rem(radiusMedium),
+        large: rem(radiusLarge),
+        large_end: `0 ${rem(radiusLarge)} ${rem(radiusLarge)} 0`,
+        large_top: `${rem(radiusLarge)} ${rem(radiusLarge)} 0 0`,
+        'extra-large': rem(radiusExtraLarge),
+        'extra-large_top': `${rem(radiusExtraLarge)} ${rem(
+          radiusExtraLarge
+        )} 0 0`,
+      },
+    }),
+    [
+      scheme,
+      plainFont,
+      brandFont,
+      radiusExtraSmall,
+      radiusSmall,
+      radiusMedium,
+      radiusLarge,
+      radiusExtraLarge,
+    ]
+  );
+
   const colorModes = useMemo(
-    () => transformTheme({ colors: scheme }, []).colorModes,
-    [scheme]
+    () => transformTheme(newTheme, ['fonts', 'radii']).colorModes,
+    [newTheme]
   );
+
   useEffect(() => {
     localStorage.setItem(
       THEME_OVERRIDE_STORAGE_KEY,
@@ -98,93 +172,153 @@ const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
 
   return (
     <>
+      {/* Shape */}
+      <Text variant="headline-small">Shape</Text>
       <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
-        <Box display="flex" minWidth="300px" flex="1">
-          <TextFieldColorPicker
-            label="Primary color"
-            value={primaryColor}
-            onChange={(c) => setPrimaryColor(c)}
-          />
-          <Button
-            variant="text"
-            disabled={
-              primaryColor.hex === toColor('hex', theme.colors.primary).hex
-            }
-            onClick={() =>
-              setPrimaryColor(toColor('hex', theme.colors.primary))
-            }
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex" minWidth="300px" flex="1">
-          <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" minWidth="300px" flex="1">
-          <TextFieldColorPicker
-            label="Tertiary color"
-            value={
-              tertiaryColor ||
-              toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
+        <BorderSlider
+          label="Extra small"
+          defaultValue={radiusExtraSmall}
+          onChange={(v) => setRadiusExtraSmall(v)}
+          onReset={() => {
+            setRadiusExtraSmall(parseInt(remToPx(theme.radii['extra-small'])));
+          }}
+          resetDisabled={rem(radiusExtraSmall) === theme.radii['extra-small']}
+        />
+        <BorderSlider
+          label="Small"
+          defaultValue={radiusSmall}
+          onChange={(v) => setRadiusSmall(v)}
+          onReset={() => {
+            setRadiusSmall(parseInt(remToPx(theme.radii['small'])));
+          }}
+          resetDisabled={rem(radiusSmall) === theme.radii.small}
+        />
+        <BorderSlider
+          label="Medium"
+          defaultValue={radiusMedium}
+          onChange={(v) => setRadiusMedium(v)}
+          onReset={() => {
+            setRadiusMedium(parseInt(remToPx(theme.radii['medium'])));
+          }}
+          resetDisabled={rem(radiusMedium) === theme.radii['medium']}
+        />
+        <BorderSlider
+          label="Large"
+          defaultValue={radiusLarge}
+          onChange={(v) => setRadiusLarge(v)}
+          onReset={() => {
+            setRadiusLarge(parseInt(remToPx(theme.radii['large'])));
+          }}
+          resetDisabled={rem(radiusLarge) === theme.radii['large']}
+        />
+        <BorderSlider
+          label="Extra large"
+          defaultValue={radiusExtraLarge}
+          onChange={(v) => setRadiusExtraLarge(v)}
+          onReset={() => {
+            setRadiusExtraLarge(parseInt(remToPx(theme.radii['extra-large'])));
+          }}
+          resetDisabled={rem(radiusExtraLarge) === theme.radii['extra-large']}
+        />
+      </Box>
+      {/* Font pickers */}
+      <Text variant="headline-small">Typography</Text>
+      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
+        <FontAutoComplete
+          label="Brand"
+          initialValue={brandFont}
+          onSelect={(f) => {
+            if (f) {
+              setBrandFont(f);
+              loadGoogleFont([
+                { family: f, weights: [300, 400, 500, 600, 700] },
+              ]);
             }
-            onChange={(c) => setTertiaryColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setTertiaryColor(null)}
-            disabled={tertiaryColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
-        <Box display="flex" minWidth="300px" flex="1">
-          <TextFieldColorPicker
-            label="Neutral color"
-            value={
-              neutralColor ||
-              toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
+          }}
+          onReset={() => {
+            setBrandFont(parseMainFont(theme.fonts.brand));
+          }}
+          resetDisabled={brandFont === parseMainFont(theme.fonts.brand)}
+        />
+        <FontAutoComplete
+          label="Plain"
+          initialValue={plainFont}
+          onSelect={(f) => {
+            if (f) {
+              setPlainFont(f);
+              loadGoogleFont([
+                { family: f, weights: [300, 400, 500, 600, 700] },
+              ]);
             }
-            onChange={(c) => setNeutralColor(c)}
-          />
-          <Button
-            variant="text"
-            onClick={() => setNeutralColor(null)}
-            disabled={neutralColor === null}
-          >
-            Reset
-          </Button>
-        </Box>
+          }}
+          onReset={() => {
+            setPlainFont(parseMainFont(theme.fonts.plain));
+          }}
+          resetDisabled={plainFont === parseMainFont(theme.fonts.plain)}
+        />
+      </Box>
+      {/* Color pickers */}
+      <Text variant="headline-small">Color schemes</Text>
+      <Box display="flex" my={3} sx={{ gap: 3, flexWrap: 'wrap' }}>
+        <ColorSchemePicker
+          label="Primary color"
+          initialValue={primaryColor}
+          onChange={(c) => setPrimaryColor(c)}
+          onReset={() => setPrimaryColor(toColor('hex', theme.colors.primary))}
+          resetDisabled={
+            primaryColor.hex === toColor('hex', theme.colors.primary).hex
+          }
+        />
+        <ColorSchemePicker
+          label="Secondary color"
+          initialValue={
+            secondaryColor ||
+            toColor('hex', hexFromArgb(secondaryColorTonal.tone(40)))
+          }
+          onChange={(c) => setSecondaryColor(c)}
+          onReset={() => setSecondaryColor(null)}
+          resetDisabled={secondaryColor === null}
+        />
+        <ColorSchemePicker
+          label="Tertiary color"
+          initialValue={
+            tertiaryColor ||
+            toColor('hex', hexFromArgb(tertiaryColorTonal.tone(40)))
+          }
+          onChange={(c) => setTertiaryColor(c)}
+          onReset={() => setTertiaryColor(null)}
+          resetDisabled={tertiaryColor === null}
+        />
+        <ColorSchemePicker
+          label="Neutral color"
+          initialValue={
+            neutralColor ||
+            toColor('hex', hexFromArgb(neutralColorTonal.tone(40)))
+          }
+          onChange={(c) => setNeutralColor(c)}
+          onReset={() => setNeutralColor(null)}
+          resetDisabled={neutralColor === null}
+        />
       </Box>
       <Box width="100%">
         <Box display="flex" flexDirection="column" sx={{ gap: 4 }}>
           <Box flex="1">
-            <Text variant="title-medium" as="h1" pb={'0.3em'}>
+            <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
               Light theme
             </Text>
             <ThemeColors scheme={scheme} />
           </Box>
           <Box flex="1">
-            <Text variant="title-medium" as="h1" pb={'0.3em'}>
+            <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
               Dark theme
             </Text>
             <ThemeColors scheme={scheme.modes.dark} />
           </Box>
         </Box>
         <Box my={4} display="flex" sx={{ gap: 3 }} flexDirection="column">
+          <Text variant="title-medium" as="h1" pb={'0.3em'} pt={3}>
+            Palettes
+          </Text>
           <TonalColors palette={a1} />
           <TonalColors palette={secondaryColorTonal} />
           <TonalColors palette={tertiaryColorTonal} />
@@ -192,10 +326,12 @@ const ThemeBuilderImpl = (props: ThemeBuilderProps) => {
           <TonalColors palette={neutralColorTonal} />
           <TonalColors palette={n2} />
         </Box>
-        <CodeHighlightingComponent className={`language-json`}>
-          {JSON.stringify({ colors: scheme }, null, 2)}
-        </CodeHighlightingComponent>
       </Box>
+      {/* Color pickers */}
+      <Text variant="headline-small">Theme</Text>
+      <CodeHighlightingComponent className={`language-json`}>
+        {JSON.stringify(newTheme, null, 2)}
+      </CodeHighlightingComponent>
     </>
   );
 };