@dxos/react-ui 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

package/src/components/Input/Input.stories.tsx

@@ -2,23 +2,22 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { baseSurface, modalSurface, activeSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
-import { type MessageValence } from '@dxos/react-ui-types';
+import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/ui-theme';
+import { type MessageValence } from '@dxos/ui-types';
+
+import { withTheme } from '../../testing';
 
 import {
   type CheckboxProps,
   Input,
   type PinInputProps,
   type SwitchProps,
-  type TextInputProps,
   type TextAreaProps,
+  type TextInputProps,
 } from './Input';
-import { withTheme } from '../../testing';
 
 type VariantMap = {
   text: TextInputProps;
@@ -75,10 +74,10 @@ const Wrapper = ({
 const DefaultStory = (props: BaseProps) => {
   return (
     <div className='space-b-4'>
-      <div className={mx(baseSurface, 'p-4')}>
+      <div className={mx(baseSurface, 'p-4 rounded-md')}>
         <Wrapper {...props} />
       </div>
-      <div className={mx(activeSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
+      <div className={mx('bg-cardSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
         <Wrapper {...props} />
       </div>
       <div className={mx(modalSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
@@ -88,13 +87,12 @@ const DefaultStory = (props: BaseProps) => {
   );
 };
 
-const meta: Meta<BaseProps> = {
+const meta = {
   title: 'ui/react-ui-core/Input',
-  component: Input.Root,
+  component: Input.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
@@ -221,10 +219,10 @@ export const Checkbox: Story = {
   },
 };
 
-export const Switch = {
+export const Switch: Story = {
   args: {
     kind: 'switch',
     label: 'This is a switch',
-    description: 'It’s either off... or on.',
+    description: "It's either off... or on.",
   },
 };

package/src/components/Input/Input.tsx

@@ -2,34 +2,33 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconWeight } from '@phosphor-icons/react';
 import { Root as CheckboxPrimitive, type CheckboxProps as CheckboxPrimitiveProps } from '@radix-ui/react-checkbox';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, forwardRef, type ForwardRefExoticComponent, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, type ForwardRefExoticComponent, forwardRef, useCallback } from 'react';
 
 import {
+  DescriptionAndValidation as DescriptionAndValidationPrimitive,
+  type DescriptionAndValidationProps as DescriptionAndValidationPrimitiveProps,
+  Description as DescriptionPrimitive,
+  type DescriptionProps as DescriptionPrimitiveProps,
+  INPUT_NAME,
   InputRoot,
   type InputRootProps,
+  type InputScopedProps,
+  Label as LabelPrimitive,
+  type LabelProps as LabelPrimitiveProps,
   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,
+  TextInput as TextInputPrimitive,
+  type TextInputProps as TextInputPrimitiveProps,
   Validation as ValidationPrimitive,
   type ValidationProps as ValidationPrimitiveProps,
+  useInputContext,
 } from '@dxos/react-input';
-import { mx } from '@dxos/react-ui-theme';
-import { type Density, type Elevation, type ClassNameValue, type Size } from '@dxos/react-ui-types';
+import { mx } from '@dxos/ui-theme';
+import { type ClassNameValue, type Density, type Elevation, type Size } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -163,10 +162,17 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
 
 // TODO(burdon): Implement inline icon within button: e.g., https://www.radix-ui.com/themes/playground#text-field
 
-type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps>;
+type AutoFillProps = {
+  noAutoFill?: boolean;
+};
+
+type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps> & AutoFillProps;
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
-  ({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  (
+    { __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props },
+    forwardedRef,
+  ) => {
     const { hasIosKeyboard } = useThemeContext();
     const themeContextValue = useThemeContext();
     const density = useDensityContext(propsDensity);
@@ -178,6 +184,8 @@ const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>
     return (
       <TextInputPrimitive
         {...props}
+        // TODO(wittjosiah): Factor out autofill properies.
+        {...{ 'data-1p-ignore': noAutoFill }}
         className={tx(
           'input.input',
           'input',
@@ -230,7 +238,9 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
   },
 );
 
-type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & { size?: Size; weight?: IconWeight };
+type CheckboxProps = ThemedClassName<Omit<CheckboxPrimitiveProps, 'children'>> & {
+  size?: Size;
+};
 
 const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
   HTMLButtonElement,
@@ -243,7 +253,6 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
       size,
-      weight = 'bold',
       classNames,
       ...props
     },

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

@@ -2,16 +2,20 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { Link } from './Link';
 import { withTheme } from '../../testing';
 
-export default {
+import { Link } from './Link';
+
+const meta = {
   title: 'ui/react-ui-core/Link',
   component: Link,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-} as any;
+} satisfies Meta<typeof Link>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = { args: { children: 'Hello', href: '#' } };
+export const Default: Story = { args: { children: 'Hello', href: '#' } };

package/src/components/{Lists → List}/List.stories.tsx

@@ -2,14 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
-import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
-import React, { type ReactNode, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type ReactNode, useCallback, useState } from 'react';
 
 import {
   getSize,
@@ -18,17 +16,22 @@ import {
   ghostSelectedTrackingInterFromNormal,
   mx,
   surfaceShadow,
-} from '@dxos/react-ui-theme';
+} from '@dxos/ui-theme';
 
-import { List, ListItem, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
 
-export default {
+import { List, ListItem, type ListScopedProps } from './List';
+
+const meta = {
   title: 'ui/react-ui-core/List',
   component: List,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof List>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 const UniformListItem = ({ id, text }: { id: string; text: string }) => {
   const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
@@ -41,17 +44,17 @@ const UniformListItem = ({ id, text }: { id: string; text: string }) => {
       style={{ transform: CSS.Transform.toString(transform) }}
     >
       <ListItem.Endcap>
-        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={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')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
 };
 
-export const UniformSizeDraggable = {
+export const UniformSizeDraggable: Story = {
   render: ({ ...args }) => {
     const [items, setItems] = useState(
       [...Array(12)].map((_, index) => ({
@@ -60,16 +63,20 @@ export const UniformSizeDraggable = {
       })),
     );
 
-    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);
-        });
-      }
-    };
+    const handleDragEnd = useCallback(
+      (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);
+          });
+        }
+      },
+      [items],
+    );
+
     return (
       <DndContext onDragEnd={handleDragEnd}>
         <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
@@ -103,19 +110,19 @@ const ManySizesDraggableListItem = ({
       style={{ transform: CSS.Translate.toString(transform) }}
     >
       <ListItem.Endcap>
-        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={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')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
 };
 
-export const ManySizesDraggable = {
+export const ManySizesDraggable: Story = {
   render: ({ ...args }) => {
     const [items, setItems] = useState(
       [...Array(12)].map((_, index) => ({
@@ -163,7 +170,7 @@ export const ManySizesDraggable = {
   args: {},
 };
 
-export const Collapsible = {
+export const Collapsible: Story = {
   render: ({ ...args }) => {
     const [items, _setItems] = useState(
       [...Array(12)].map((_, index) => ({
@@ -181,7 +188,7 @@ export const Collapsible = {
               {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')} />
+                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
               </ListItem.Endcap>
             </div>
             {index !== 2 && <ListItem.CollapsibleContent>{body}</ListItem.CollapsibleContent>}
@@ -192,11 +199,10 @@ export const Collapsible = {
   },
   args: {
     variant: 'unordered',
-    // toggleOpenLabel: 'Open/close storybook list item', // TODO(burdon): ???
   },
 };
 
-export const SelectableListbox = {
+export const SelectableListbox: Story = {
   render: () => {
     const [selectedId, setSelectedId] = useState<string>();
     const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical' });
@@ -223,11 +229,11 @@ export const SelectableListbox = {
             key={id}
             tabIndex={0}
             selected={selectedId === id}
-            classNames={mx('items-center', ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
+            classNames={mx(ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >
-            <ListItem.Heading classNames='grow'>Lorem ipsum dolor sit amet</ListItem.Heading>
+            <ListItem.Heading classNames='flex pli-1 items-center grow truncate'>{text}</ListItem.Heading>
           </ListItem.Root>
         ))}
       </List>

package/src/components/{Lists → List}/List.tsx

@@ -2,34 +2,35 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretDown, CaretRight } from '@phosphor-icons/react';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import {
+  LIST_ITEM_NAME,
+  LIST_NAME,
+  ListItemCollapsibleContent,
+  type ListItemCollapsibleContentProps,
+  type ListItemScopedProps,
   List as ListPrimitive,
-  type ListProps as ListPrimitiveProps,
-  type ListScopedProps,
+  ListItem as ListPrimitiveItem,
   ListItemHeading as ListPrimitiveItemHeading,
   type ListItemHeadingProps as ListPrimitiveItemHeadingProps,
   ListItemOpenTrigger as ListPrimitiveItemOpenTrigger,
   type ListItemOpenTriggerProps as ListPrimitiveItemOpenTriggerProps,
-  ListItemCollapsibleContent,
-  type ListItemCollapsibleContentProps,
-  ListItem as ListPrimitiveItem,
   type ListItemProps as ListPrimitiveItemProps,
-  type ListItemScopedProps,
-  LIST_NAME,
-  LIST_ITEM_NAME,
+  type ListProps as ListPrimitiveProps,
+  type ListScopedProps,
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
-import { ListDropIndicator } from './ListDropIndicator';
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
+import { Icon } from '../Icon';
+
+import { ListDropIndicator } from './ListDropIndicator';
 
 type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
 
@@ -106,7 +107,6 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
     const { tx } = useThemeContext();
     const density = useDensityContext();
     const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    const Icon = open ? CaretDown : CaretRight;
     return (
       <ListPrimitiveItemOpenTrigger
         {...props}
@@ -115,10 +115,9 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
       >
         {children || (
           <Icon
-            {...{
-              weight: 'bold',
-              className: tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {}),
-            }}
+            size={3}
+            icon={open ? 'ph--caret-down--bold' : 'ph--caret-right--bold'}
+            classNames={tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {})}
           />
         )}
       </ListPrimitiveItemOpenTrigger>

package/src/components/{Lists → List}/ListDropIndicator.tsx

@@ -18,7 +18,7 @@ const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['classN
   horizontal:
     'h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]',
   vertical:
-    'w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
+    'is-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]',
 };
 
 const edgeStyles: Record<Edge, HTMLAttributes<HTMLElement>['className']> = {

package/src/components/{Lists → List}/Tree.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Tree, TreeItem } from './Tree';
 import { withTheme } from '../../testing';
 
+import { Tree, TreeItem } from './Tree';
+
 type StorybookTreeProps = {
   data: any;
 };
@@ -55,15 +55,18 @@ const DefaultStory = ({ data }: StorybookTreeProps) => {
   return <StorybookTreeItem data={data} />;
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Tree',
-  component: Tree,
+  component: Tree as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     data: {
       foo: 100,

package/src/components/{Lists → List}/Tree.tsx

@@ -2,9 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
+
+import { type ThemedClassName } from '../../util';
 
 import {
+  LIST_ITEM_NAME,
   List,
   ListItem,
   type ListItemCollapsibleContentProps,
@@ -13,11 +16,9 @@ import {
   type ListItemRootProps,
   type ListProps,
   type ListScopedProps,
-  LIST_ITEM_NAME,
   useListItemContext,
 } from './List';
 import { TreeDropIndicator } from './TreeDropIndicator';
-import { type ThemedClassName } from '../../util';
 
 type TreeRootProps = ListProps;
 

package/src/components/{Lists → List}/TreeDropIndicator.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { type HTMLAttributes, type CSSProperties } from 'react';
+import React, { type CSSProperties, type HTMLAttributes } from 'react';
 
 // Tree item hitbox
 // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item

package/src/components/{Lists → List}/Treegrid.stories.tsx

@@ -2,14 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Treegrid } from './Treegrid';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
+import { Treegrid } from './Treegrid';
+
 faker.seed(1234);
 
 type StorybookNode = {
@@ -86,7 +88,7 @@ const content = {
       icon: 'ph--planet--regular',
     },
   ],
-} satisfies StorybookNode;
+} as StorybookNode;
 
 function* visitor(node: StorybookNode, isOpen?: (node: StorybookNode) => boolean): Generator<StorybookIteratorNode> {
   const stack: StorybookIteratorNode[] = [
@@ -141,11 +143,15 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Treegrid',
-  component: Treegrid.Root,
+  component: Treegrid.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};