@dxos/react-ui 0.8.3 → 0.8.4-main.1068cf700f

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';
@@ -44,7 +43,7 @@ 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}>
+    <LabelPrimitive {...props} className={tx('input.label', { srOnly }, classNames)} ref={forwardedRef}>
       {children}
     </LabelPrimitive>
   );
@@ -56,11 +55,7 @@ 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}
-      >
+      <DescriptionPrimitive {...props} className={tx('input.description', { srOnly }, classNames)} ref={forwardedRef}>
         {children}
       </DescriptionPrimitive>
     );
@@ -76,12 +71,7 @@ const Validation = forwardRef<HTMLSpanElement, InputScopedProps<ValidationProps>
     return (
       <ValidationPrimitive
         {...props}
-        className={tx(
-          'input.validation',
-          `input__validation-message input__validation-message--${validationValence}`,
-          { srOnly, validationValence },
-          classNames,
-        )}
+        className={tx('input.validation', { srOnly, validationValence }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -98,7 +88,7 @@ const DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAnd
     return (
       <DescriptionAndValidationPrimitive
         {...props}
-        className={tx('input.descriptionAndValidation', 'input__description-and-validation', { srOnly }, classNames)}
+        className={tx('input.descriptionAndValidation', { srOnly }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -120,7 +110,6 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
       elevation: propsElevation,
       segmentClassName: propsSegmentClassName,
       inputClassName,
-      variant,
       ...props
     },
     forwardedRef,
@@ -129,12 +118,10 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
     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,
@@ -144,9 +131,10 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
             validationValence,
           },
           propsSegmentClassName,
-        ),
+        ) || '',
       [tx, props.disabled, elevation, propsElevation, density],
     );
+
     return (
       <PinInputPrimitive
         {...{
@@ -154,7 +142,7 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
           segmentClassName,
           ...(props.autoFocus && !hasIosKeyboard && { autoFocus: true }),
         }}
-        inputClassName={tx('input.inputWithSegments', 'input input--pin', { disabled: props.disabled }, inputClassName)}
+        inputClassName={tx('input.inputWithSegments', { disabled: props.disabled }, inputClassName) || ''}
         ref={forwardedRef}
       />
     );
@@ -163,24 +151,30 @@ 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 { tx } = useThemeContext();
     const density = useDensityContext(propsDensity);
     const elevation = useElevationContext(propsElevation);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
 
-    const { tx } = themeContextValue;
-
     return (
       <TextInputPrimitive
         {...props}
+        // TODO(wittjosiah): Factor out autofill properies.
+        {...{ 'data-1p-ignore': noAutoFill }}
         className={tx(
           'input.input',
-          'input',
           {
             variant,
             disabled: props.disabled,
@@ -212,7 +206,6 @@ const TextArea = forwardRef<HTMLTextAreaElement, InputScopedProps<TextAreaProps>
         {...props}
         className={tx(
           'input.input',
-          'input--text-area',
           {
             variant,
             disabled: props.disabled,
@@ -230,7 +223,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 +238,6 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
       defaultChecked: propsDefaultChecked,
       onCheckedChange: propsOnCheckedChange,
       size,
-      weight = 'bold',
       classNames,
       ...props
     },
@@ -269,13 +263,13 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
             'aria-invalid': 'true' as const,
             'aria-errormessage': errorMessageId,
           }),
-          className: tx('input.checkbox', 'input--checkbox', { size }, 'shrink-0', classNames),
+          className: tx('input.checkbox', { size }, 'shrink-0', classNames),
         }}
         ref={forwardedRef}
       >
         <Icon
           icon={checked === 'indeterminate' ? 'ph--minus--regular' : 'ph--check--regular'}
-          classNames={tx('input.checkboxIndicator', 'input--checkbox__indicator', { size, checked })}
+          classNames={tx('input.checkboxIndicator', { size, checked })}
         />
       </CheckboxPrimitive>
     );

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 {
-  title: 'ui/react-ui-core/Link',
+import { Link } from './Link';
+
+const meta = {
+  title: 'ui/react-ui-core/components/Link',
   component: Link,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-} as any;
+  decorators: [withTheme()],
+} 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/Link/Link.tsx

@@ -19,6 +19,6 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
   ({ asChild, variant, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.a;
-    return <Root {...props} className={tx('link.root', 'link', { variant }, classNames)} ref={forwardedRef} />;
+    return <Root {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
   },
 );

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 {
-  title: 'ui/react-ui-core/List',
+import { List, ListItem, type ListScopedProps } from './List';
+
+const meta = {
+  title: 'ui/react-ui-core/components/List',
   component: List,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} 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 };
 
@@ -39,7 +40,7 @@ const List = forwardRef<HTMLOListElement, ListProps>(({ classNames, children, ..
 
   return (
     <DensityProvider density={density}>
-      <ListPrimitive {...props} className={tx('list.root', 'list', {}, classNames)} ref={forwardedRef}>
+      <ListPrimitive {...props} className={tx('list.root', {}, classNames)} ref={forwardedRef}>
         {children}
       </ListPrimitive>
     </DensityProvider>
@@ -57,7 +58,7 @@ const ListItemEndcap = forwardRef<HTMLDivElement, ListItemEndcapProps>(
       <Root
         {...(!asChild && { role: 'none' })}
         {...props}
-        className={tx('list.item.endcap', 'list__listItem__endcap', { density }, classNames)}
+        className={tx('list.item.endcap', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -72,13 +73,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return (
-    <div
-      role='none'
-      {...props}
-      className={tx('list.item.openTrigger', 'list__listItem__openTrigger--mock', { density }, classNames)}
-    />
-  );
+  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
@@ -90,7 +85,7 @@ const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
     return (
       <ListPrimitiveItemHeading
         {...props}
-        className={tx('list.item.heading', 'list__listItem__heading', { density }, classNames)}
+        className={tx('list.item.heading', { density }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -106,19 +101,17 @@ 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}
-        className={tx('list.item.openTrigger', 'list__listItem__openTrigger', { density }, classNames)}
+        className={tx('list.item.openTrigger', { density }, classNames)}
         ref={forwardedRef}
       >
         {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', {})}
           />
         )}
       </ListPrimitiveItemOpenTrigger>
@@ -135,7 +128,7 @@ const ListItemRoot = forwardRef<HTMLLIElement, ListItemRootProps>(
     return (
       <ListPrimitiveItem
         {...props}
-        className={tx('list.item.root', 'list__listItem', { density, collapsible: props.collapsible }, classNames)}
+        className={tx('list.item.root', { density, collapsible: props.collapsible }, classNames)}
         ref={forwardedRef}
       >
         {children}

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 {
-  title: 'ui/react-ui-core/Tree',
-  component: Tree,
+const meta = {
+  title: 'ui/react-ui-core/components/Tree',
+  component: Tree as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} 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