@dxos/react-ui 0.1.41-next.d517c89 → 0.3.3-main.3ce60d4

package/src/components/Input/Input.tsx

@@ -0,0 +1,369 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Check, type IconWeight, Minus } from '@phosphor-icons/react';
+import {
+  Root as CheckboxPrimitive,
+  type CheckboxProps as CheckboxPrimitiveProps,
+  Indicator as CheckboxIndicatorPrimitive,
+} from '@radix-ui/react-checkbox';
+import {
+  Root as SwitchPrimitive,
+  Thumb as SwitchThumbPrimitive,
+  type SwitchProps as SwitchPrimitiveProps,
+} from '@radix-ui/react-switch';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { forwardRef, type ForwardRefExoticComponent, Fragment, useCallback } from 'react';
+
+import {
+  InputRoot,
+  type InputRootProps,
+  PinInput as PinInputPrimitive,
+  type PinInputProps as PinInputPrimitiveProps,
+  TextInput as TextInputPrimitive,
+  type TextInputProps as TextInputPrimitiveProps,
+  TextArea as TextAreaPrimitive,
+  type TextAreaProps as TextAreaPrimitiveProps,
+  useInputContext,
+  INPUT_NAME,
+  type InputScopedProps,
+  Description as DescriptionPrimitive,
+  DescriptionAndValidation as DescriptionAndValidationPrimitive,
+  type DescriptionAndValidationProps as DescriptionAndValidationPrimitiveProps,
+  type DescriptionProps as DescriptionPrimitiveProps,
+  Label as LabelPrimitive,
+  type LabelProps as LabelPrimitiveProps,
+  Validation as ValidationPrimitive,
+  type ValidationProps as ValidationPrimitiveProps,
+} from '@dxos/react-input';
+import { type Density, type Elevation, type ClassNameValue, type Size } from '@dxos/react-ui-types';
+
+import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+type InputVariant = 'default' | 'subdued';
+
+type InputSharedProps = Partial<{ density: Density; elevation: Elevation; variant: InputVariant }>;
+
+type LabelProps = ThemedClassName<LabelPrimitiveProps> & { srOnly?: boolean };
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(({ srOnly, classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <LabelPrimitive {...props} className={tx('input.label', 'input__label', { srOnly }, classNames)} ref={forwardedRef}>
+      {children}
+    </LabelPrimitive>
+  );
+});
+
+type DescriptionProps = ThemedClassName<DescriptionPrimitiveProps> & { srOnly?: boolean };
+
+const Description = forwardRef<HTMLSpanElement, DescriptionProps>(
+  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DescriptionPrimitive
+        {...props}
+        className={tx('input.description', 'input__description', { srOnly }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </DescriptionPrimitive>
+    );
+  },
+);
+
+type ValidationProps = ThemedClassName<ValidationPrimitiveProps> & { srOnly?: boolean };
+
+const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>>(
+  ({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+    return (
+      <ValidationPrimitive
+        {...props}
+        className={tx(
+          'input.validation',
+          `input__validation-message input__validation-message--${validationValence}`,
+          { srOnly, validationValence },
+          classNames,
+        )}
+        ref={forwardedRef}
+      >
+        {children}
+      </ValidationPrimitive>
+    );
+  },
+);
+
+type DescriptionAndValidationProps = ThemedClassName<DescriptionAndValidationPrimitiveProps> & { srOnly?: boolean };
+
+const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(
+  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DescriptionAndValidationPrimitive
+        {...props}
+        className={tx('input.descriptionAndValidation', 'input__description-and-validation', { srOnly }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </DescriptionAndValidationPrimitive>
+    );
+  },
+);
+
+type PinInputProps = InputSharedProps &
+  Omit<PinInputPrimitiveProps, 'segmentClassName' | 'inputClassName'> & {
+    segmentClassName?: ClassNameValue;
+    inputClassName?: ClassNameValue;
+  };
+
+const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
+  (
+    {
+      density: propsDensity,
+      elevation: propsElevation,
+      segmentClassName: propsSegmentClassName,
+      inputClassName,
+      variant,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { hasIosKeyboard } = useThemeContext();
+    const { tx } = useThemeContext();
+    const density = useDensityContext(propsDensity);
+    const elevation = useElevationContext(propsElevation);
+
+    const segmentClassName = useCallback(
+      ({ focused, validationValence }: Parameters<Exclude<PinInputPrimitiveProps['segmentClassName'], undefined>>[0]) =>
+        tx(
+          'input.input',
+          'input--pin-segment',
+          {
+            variant: 'static',
+            focused,
+            disabled: props.disabled,
+            density,
+            elevation,
+            validationValence,
+          },
+          propsSegmentClassName,
+        ),
+      [tx, props.disabled, elevation, propsElevation, density],
+    );
+    return (
+      <PinInputPrimitive
+        {...{
+          ...props,
+          segmentClassName,
+          ...(props.autoFocus && !hasIosKeyboard && { autoFocus: true }),
+        }}
+        inputClassName={tx('input.inputWithSegments', 'input input--pin', { disabled: props.disabled }, inputClassName)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+// TODO(burdon): Input width is overridden by default 'is-full' style.
+// TODO(burdon): Implement inline icon within button: e.g., https://www.radix-ui.com/themes/playground#text-field
+
+type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps>;
+
+const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
+  ({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+    const { hasIosKeyboard } = useThemeContext();
+    const { tx } = useThemeContext();
+    const density = useDensityContext(propsDensity);
+    const elevation = useElevationContext(propsElevation);
+    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+
+    return (
+      <TextInputPrimitive
+        {...props}
+        className={tx(
+          'input.input',
+          'input',
+          {
+            variant,
+            disabled: props.disabled,
+            density,
+            elevation,
+            validationValence,
+          },
+          classNames,
+        )}
+        {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type TextAreaProps = InputSharedProps & ThemedClassName<TextAreaPrimitiveProps>;
+
+const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>>(
+  ({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+    const { hasIosKeyboard } = useThemeContext();
+    const { tx } = useThemeContext();
+    const density = useDensityContext(propsDensity);
+    const elevation = useElevationContext(propsElevation);
+    const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
+
+    return (
+      <TextAreaPrimitive
+        {...props}
+        className={tx(
+          'input.input',
+          'input--text-area',
+          {
+            variant,
+            disabled: props.disabled,
+            density,
+            elevation,
+            validationValence,
+          },
+          classNames,
+        )}
+        {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+// TODO(burdon): Provide inline checkbox label left/right.
+
+type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & { size?: Size; weight?: IconWeight };
+
+const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
+  HTMLButtonElement,
+  InputScopedProps<CheckboxProps>
+>(
+  (
+    {
+      __inputScope,
+      checked: propsChecked,
+      defaultChecked: propsDefaultChecked,
+      onCheckedChange: propsOnCheckedChange,
+      size,
+      weight = 'bold',
+      classNames,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const [checked, onCheckedChange] = useControllableState({
+      prop: propsChecked,
+      defaultProp: propsDefaultChecked,
+      onChange: propsOnCheckedChange,
+    });
+    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+    const { tx } = useThemeContext();
+    const Icon = checked === 'indeterminate' ? Minus : checked ? Check : Fragment;
+    return (
+      <CheckboxPrimitive
+        {...{
+          ...props,
+          checked,
+          onCheckedChange,
+          id,
+          'aria-describedby': descriptionId,
+          ...(validationValence === 'error' && {
+            'aria-invalid': 'true' as const,
+            'aria-errormessage': errorMessageId,
+          }),
+          className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
+        }}
+        ref={forwardedRef}
+      >
+        <CheckboxIndicatorPrimitive asChild>
+          <Icon
+            {...(checked && {
+              weight,
+              className: tx('input.checkboxIndicator', 'input--checkbox__indicator', { size }),
+            })}
+          />
+        </CheckboxIndicatorPrimitive>
+      </CheckboxPrimitive>
+    );
+  },
+);
+
+type SwitchProps = ThemedClassName<Omit<SwitchPrimitiveProps, 'children'>> & { size?: Size };
+
+const Switch: ForwardRefExoticComponent<SwitchProps> = forwardRef<HTMLButtonElement, InputScopedProps<SwitchProps>>(
+  (
+    {
+      __inputScope,
+      checked: propsChecked,
+      defaultChecked: propsDefaultChecked,
+      onCheckedChange: propsOnCheckedChange,
+      size,
+      classNames,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const [checked, onCheckedChange] = useControllableState({
+      prop: propsChecked,
+      defaultProp: propsDefaultChecked,
+      onChange: propsOnCheckedChange,
+    });
+    const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+    // const { tx } = useThemeContext();
+    return (
+      <SwitchPrimitive
+        {...{
+          ...props,
+          checked,
+          onCheckedChange,
+          id,
+          'aria-describedby': descriptionId,
+          ...(validationValence === 'error' && {
+            'aria-invalid': 'true' as const,
+            'aria-errormessage': errorMessageId,
+          }),
+          // className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
+          className:
+            'w-[56px] h-[32px] bg-transparent rounded-full px-[4px] border-2 border-neutral-500 relative data-[state=checked]:border-primary-500 data-[state=checked]:bg-primary-500 outline-none cursor-default',
+        }}
+        ref={forwardedRef}
+      >
+        {/* TODO(wittjosiah): Embed icons/text for on/off states.
+             e.g., https://codepen.io/alvarotrigo/pen/oNoJePo (#13) */}
+        <SwitchThumbPrimitive className='block w-[22px] h-[22px] bg-neutral-500 rounded-full border-neutral-100 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-white'></SwitchThumbPrimitive>
+      </SwitchPrimitive>
+    );
+  },
+);
+
+export const Input = {
+  Root: InputRoot,
+  PinInput,
+  TextInput,
+  TextArea,
+  Checkbox,
+  Switch,
+  Label,
+  Description,
+  Validation,
+  DescriptionAndValidation,
+};
+
+export type {
+  InputVariant,
+  InputRootProps,
+  PinInputProps,
+  TextInputProps,
+  TextAreaProps,
+  CheckboxProps,
+  SwitchProps,
+  LabelProps,
+  DescriptionProps,
+  ValidationProps,
+  DescriptionAndValidationProps,
+};

package/src/{composites/SpaceDialog → components/Input}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './SpaceDialog';
+export * from './Input';

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,13 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { Link } from './Link';
+
+export default {
+  component: Link,
+} as any;
+
+export const Default = { args: { children: 'Hello', href: '#' } };

package/src/components/Link/Link.tsx

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+export type LinkProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.a>> & {
+  asChild?: boolean;
+};
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(({ asChild, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root = asChild ? Slot : Primitive.a;
+  return <Root {...props} className={tx('link.root', 'link', {}, classNames)} ref={forwardedRef} />;
+});

package/src/components/Link/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Link';

package/src/components/List/List.stories.tsx

@@ -0,0 +1,184 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
+import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
+import React, { type FC, type ReactNode, useState } from 'react';
+
+import { getSize, mx, surfaceElevation } from '@dxos/react-ui-theme';
+
+import { List, ListItem, type ListProps, type ListScopedProps } from './List';
+
+export default {
+  component: List as FC<ListProps>,
+};
+
+const UniformListItem = ({ id, text }: { id: string; text: string }) => {
+  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
+  return (
+    <ListItem.Root
+      id={id}
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      style={{ transform: CSS.Transform.toString(transform) }}
+    >
+      <ListItem.Endcap>
+        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+      </ListItem.Endcap>
+      <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
+      <ListItem.Endcap>
+        <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+      </ListItem.Endcap>
+    </ListItem.Root>
+  );
+};
+
+export const UniformSizeDraggable = {
+  render: ({ ...args }) => {
+    const [items, setItems] = useState(
+      [...Array(12)].map((_, index) => ({
+        id: `listItem-${index}`,
+        text: `List item ${index + 1}`,
+      })),
+    );
+
+    const handleDragEnd = (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (active.id !== over?.id) {
+        setItems((items) => {
+          const oldIndex = items.findIndex((item) => item.id === active.id);
+          const newIndex = items.findIndex((item) => item.id === over?.id);
+          return arrayMove(items, oldIndex, newIndex);
+        });
+      }
+    };
+    return (
+      <DndContext onDragEnd={handleDragEnd}>
+        <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
+          <List {...args} itemSizes='one'>
+            {items.map((item) => (
+              <UniformListItem key={item.id} {...item} />
+            ))}
+          </List>
+        </SortableContext>
+      </DndContext>
+    );
+  },
+  args: {},
+};
+
+const ManySizesDraggableListItem = ({
+  id,
+  text,
+  className,
+  dragging,
+  __listScope,
+}: ListScopedProps<{ id: string; text: ReactNode; className?: string; dragging?: boolean }>) => {
+  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
+  return (
+    <ListItem.Root
+      id={id}
+      classNames={[dragging && 'relative z-10', className]}
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      style={{ transform: CSS.Translate.toString(transform) }}
+    >
+      <ListItem.Endcap>
+        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+      </ListItem.Endcap>
+      <ListItem.Heading classNames='grow pbs-2' asChild>
+        {text}
+      </ListItem.Heading>
+      <ListItem.Endcap>
+        <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+      </ListItem.Endcap>
+    </ListItem.Root>
+  );
+};
+export const ManySizesDraggable = {
+  render: ({ ...args }) => {
+    const [items, setItems] = useState(
+      [...Array(12)].map((_, index) => ({
+        id: `listItem-${index}`,
+        text: (
+          <p
+            className={mx(
+              index % 3 === 0 ? 'bs-20' : index % 2 === 0 ? 'bs-12' : 'bs-8',
+              surfaceElevation({ elevation: 'group' }),
+              'mbe-2 p-2 bg-white dark:bg-neutral-800 rounded',
+            )}
+          >{`List item ${index + 1}`}</p>
+        ),
+      })),
+    );
+
+    const [activeId, setActiveId] = useState<string | null>(null);
+
+    const handleDragStart = ({ active: { id } }: DragStartEvent) => setActiveId(id.toString());
+
+    const handleDragEnd = (event: DragEndEvent) => {
+      const { active, over } = event;
+
+      if (active.id !== over?.id) {
+        setItems((items) => {
+          const oldIndex = items.findIndex((item) => item.id === active.id);
+          const newIndex = items.findIndex((item) => item.id === over?.id);
+          return arrayMove(items, oldIndex, newIndex);
+        });
+      }
+    };
+
+    return (
+      <DndContext onDragEnd={handleDragEnd} onDragStart={handleDragStart}>
+        <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
+          <List {...args}>
+            {items.map(({ id, text }) => (
+              <ManySizesDraggableListItem key={id} {...{ id, text }} dragging={activeId === id} />
+            ))}
+          </List>
+        </SortableContext>
+      </DndContext>
+    );
+  },
+  args: {},
+};
+
+export const Collapsible = {
+  render: ({ ...args }) => {
+    const [items, _setItems] = useState(
+      [...Array(12)].map((_, index) => ({
+        id: `listItem-${index}`,
+        text: `List item ${index + 1}`,
+        body: `Collapsible content for item ${index + 1}`,
+      })),
+    );
+
+    return (
+      <List {...args}>
+        {items.map(({ id, text, body }, index) => (
+          <ListItem.Root key={id} id={id} collapsible={index !== 2} defaultOpen={index % 2 === 0}>
+            <div role='none' className='grow flex'>
+              {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
+              <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
+              <ListItem.Endcap>
+                <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+              </ListItem.Endcap>
+            </div>
+            {index !== 2 && <ListItem.CollapsibleContent>{body}</ListItem.CollapsibleContent>}
+          </ListItem.Root>
+        ))}
+      </List>
+    );
+  },
+  args: {
+    variant: 'unordered',
+    toggleOpenLabel: 'Open/close storybook list item',
+  },
+};