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

package/src/Text/Text.story.tsx

@@ -6,7 +6,46 @@ export default {
   title: 'components/Text',
 };
 
+const loremIpsum =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit.' +
+  'Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque,' +
+  'possimus nihil molestias sapiente necessitatibus dolor saepe inventore,' +
+  'soluta id accusantium voluptas beatae.';
+
 const Example = () => {
+  const variantMapping = {
+    'display-large': 'Display large',
+    'display-medium': 'Display medium',
+    'display-small': 'Display small',
+    'headline-large': 'Headline large',
+    'headline-medium': 'Headline medium',
+    'headline-small': 'Headline small',
+    'title-large': 'Title large',
+    'title-medium': 'Title medium',
+    'title-small': 'Title small',
+    'label-large': 'Label large',
+    'label-medium': 'Label medium',
+    'label-small': 'Label small',
+    'body-large': `Body large. ${loremIpsum}`,
+    'body-medium': `Body medium. ${loremIpsum}`,
+    'body-small': `Body small. ${loremIpsum}`,
+  };
+  const variants = Object.keys(variantMapping).map((v) => (
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
+      {variantMapping[v]}
+    </Text>
+  ));
+
+  return (
+    <Box bg="surface" p="2">
+      {variants}
+    </Box>
+  );
+};
+
+export const AllVariants = () => <Example />;
+
+export const LegacyVariants = () => {
   const variantMapping = {
     h1: 'Heading 1',
     h2: 'Heading 2',
@@ -16,16 +55,14 @@ const Example = () => {
     h6: 'Heading 6',
     subtitle1: 'Subtitle 1',
     subtitle2: 'Subtitle 2',
-    body1:
-      'Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.',
-    body2:
-      'Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.',
+    body1: `Body 1. ${loremIpsum}`,
+    body2: `Body 2. ${loremIpsum}`,
     button: 'Button text',
     caption: 'Caption text',
     overline: 'Overline text',
   };
   const variants = Object.keys(variantMapping).map((v) => (
-    <Text key={v} variant={v} mb={2}>
+    <Text key={v} variant={v as keyof typeof variantMapping} mb={2}>
       {variantMapping[v]}
     </Text>
   ));
@@ -36,5 +73,3 @@ const Example = () => {
     </Box>
   );
 };
-
-export const AllVariants = () => <Example />;

package/src/Text/Text.tsx

@@ -1,10 +1,13 @@
+import type { ElementType } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 
-export type TextVariants =
+/**
+ * @deprecated
+ */
+export type LegacyTextVariants =
   | 'h1'
   | 'h2'
   | 'h3'
@@ -19,11 +22,28 @@ export type TextVariants =
   | 'overline'
   | 'button';
 
+export type TextVariants =
+  | 'display-large'
+  | 'display-medium'
+  | 'display-small'
+  | 'headline-large'
+  | 'headline-medium'
+  | 'headline-small'
+  | 'title-large'
+  | 'title-medium'
+  | 'title-small'
+  | 'label-large'
+  | 'label-medium'
+  | 'label-small'
+  | 'body-large'
+  | 'body-medium'
+  | 'body-small';
+
 export interface TextProps extends BoxProps {
-  variant?: TextVariants;
+  variant?: LegacyTextVariants | TextVariants;
 }
 
-const mappings: { [key: string]: React.ElementType<any> } = {
+const mappings: { [key: string]: ElementType<any> } = {
   h1: 'h1',
   h2: 'h2',
   h3: 'h3',
@@ -43,7 +63,7 @@ export const Text = forwardRef<HTMLParagraphElement, TextProps>(function Text(
   props,
   forwardedRef
 ) {
-  const { as, variant = 'body1', ...otherProps } = props;
+  const { as, variant = 'body-medium', ...otherProps } = props;
   let Comp = as;
   if (!Comp) {
     Comp = mappings[variant] || 'p';

package/src/TextField/FilledContainer.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 import { get } from '@styled-system/css';
 import { rem } from 'polished';
 
@@ -78,10 +78,10 @@ const BorderBottom = () => (
 );
 
 export interface FilledContainerProps extends Omit<BoxProps, 'color'> {
-  children?: React.ReactNode;
+  children?: ReactNode;
   color?: string;
   hasFocus?: boolean;
-  label?: React.ReactNode;
+  label?: ReactNode;
   labelIsFloating: boolean;
   inputId: string;
   error?: boolean;

package/src/TextField/HelperText.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
-import * as React from 'react';
 
 import { Box } from '../Box';
 import { Text } from '../Text';
@@ -7,9 +7,9 @@ import { alpha } from '../color';
 import type { TextProps } from '../Text/Text';
 
 export interface HelperTextProps extends TextProps {
-  children?: React.ReactNode;
-  leftSide?: React.ReactNode;
-  rightSide?: React.ReactNode;
+  children?: ReactNode;
+  leftSide?: ReactNode;
+  rightSide?: ReactNode;
   error?: boolean;
   disabled?: boolean;
 }
@@ -46,7 +46,7 @@ export const HelperText = forwardRef<HTMLDivElement, HelperTextProps>(
         display="flex"
         pt={1}
         color={color}
-        variant="caption"
+        variant="label-small"
         ref={forwardedRef}
         lineHeight="normal"
         __css={{

package/src/TextField/IconContainer.tsx

@@ -1,13 +1,12 @@
 import { rem } from 'polished';
-import type { FC } from 'react';
-import * as React from 'react';
+import type { FC, ReactNode } from 'react';
 
 import { Box } from '../Box';
 import { alpha } from '../color';
 import { ICON_WIDTH, PADDING_LEFT_WITH_ICON } from './consts';
 
 export const IconContainer: FC<{
-  children?: React.ReactNode;
+  children?: ReactNode;
   position: 'start' | 'end';
 }> = ({ position, children }) => (
   <Box

package/src/TextField/Input.tsx

@@ -1,10 +1,11 @@
 import { rem } from 'polished';
-import type { InputHTMLAttributes } from 'react';
+import type { InputHTMLAttributes, ReactNode } from 'react';
 import { forwardRef } from 'react';
 
 import type { BoxProps } from '../Box';
 import { Box } from '../Box';
 import { alpha } from '../color';
+import { EASING_STANDARD } from '../motion';
 import {
   ICON_WIDTH,
   PADDING_LEFT_WITHOUT_ICON,
@@ -19,8 +20,8 @@ export interface InputProps
   multiline?: boolean;
   variant?: 'filled' | 'outlined';
   hasLabel?: boolean;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 }
 
 export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
@@ -72,7 +73,7 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(function Input(
             variant === 'filled'
               ? alpha('on.surface-variant', 0.87)
               : alpha('on.surface-variant', 0.6),
-          transition: `opacity .18s cubic-bezier(.4,0,.2,1)`,
+          transition: `opacity .18s ${EASING_STANDARD}`,
         },
         ':disabled::placeholder': {
           color: alpha('on.surface', 0.38),

package/src/TextField/OutlinedContainer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import {
   forwardRef,
   useEffect,
@@ -5,7 +6,6 @@ import {
   useState,
   useRef,
 } from 'react';
-import * as React from 'react';
 
 import { NotchedOutline } from '../NotchedOutline';
 import type { BoxProps } from '../Box';
@@ -22,8 +22,8 @@ const useEnhancedEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
 export interface OutlinedContainerProps extends BoxProps {
-  children?: React.ReactNode;
-  label?: React.ReactNode;
+  children?: ReactNode;
+  label?: ReactNode;
   color?: string;
   error?: boolean;
   theme: Theme;
@@ -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/TextField/TextField.tsx

@@ -1,5 +1,5 @@
+import type { ReactNode } from 'react';
 import { forwardRef, useState, useId } from 'react';
-import * as React from 'react';
 import { wrapEvent, useControlledState } from '@basic-ui/core';
 
 import type { InputProps } from './Input';
@@ -32,7 +32,7 @@ export type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {
   variant?: 'outlined' | 'filled';
   containerProps?: Omit<BoxProps, 'color'>;
   color?: 'primary' | 'secondary';
-  label?: React.ReactNode;
+  label?: ReactNode;
   helperText?: string;
   maxLength?: number;
   hideCharacterCounter?: boolean;
@@ -40,8 +40,8 @@ export type TextFieldProps = Omit<InputProps, 'value' | 'defaultValue'> & {
   value?: string;
   multiline?: boolean;
   error?: boolean | string;
-  leadingIcon?: React.ReactNode;
-  trailingIcon?: React.ReactNode;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
 };
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(

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>
+  );
+});