@dxos/react-ui 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

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

@@ -4,44 +4,28 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
 import { baseSurface, modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
-import {
-  type CheckboxProps,
-  Input,
-  type PinInputProps,
-  type SwitchProps,
-  type TextInputProps,
-  type TextAreaProps,
-} from './Input';
+import { Input } from './Input';
 import { withTheme } from '../../testing';
 
-type VariantMap = {
-  text: TextInputProps;
-  pin: PinInputProps;
-  textarea: TextAreaProps;
-  checkbox: CheckboxProps;
-  switch: SwitchProps;
-};
-
-type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
-
-type BaseProps = Partial<{
-  kind: keyof VariantMap;
+type StoryInputProps = Partial<{
   label: string;
-  labelVisuallyHidden: boolean;
+  placeholder: string;
+  disabled: boolean;
   description: string;
+  labelVisuallyHidden: boolean;
   descriptionVisuallyHidden: boolean;
-  validationValence: MessageValence;
+  type: 'default' | 'pin' | 'textarea' | 'checkbox' | 'switch';
   validationMessage: string;
+  validationValence: MessageValence;
 }>;
 
-const Wrapper = ({
-  kind,
+const StoryInputContent = ({
+  type = 'default',
   label,
   description,
   labelVisuallyHidden,
@@ -49,17 +33,15 @@ const Wrapper = ({
   validationValence,
   validationMessage,
   ...props
-}: BaseProps) => {
+}: StoryInputProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
-
-      {kind === 'text' && <Input.TextInput {...props} />}
-      {kind === 'pin' && <Input.PinInput {...props} />}
-      {kind === 'textarea' && <Input.TextArea {...props} />}
-      {kind === 'checkbox' && <Input.Checkbox {...props} />}
-      {kind === 'switch' && <Input.Switch {...props} />}
-
+      {type === 'pin' && <Input.PinInput {...props} />}
+      {type === 'textarea' && <Input.TextArea {...props} />}
+      {type === 'checkbox' && <Input.Checkbox {...props} />}
+      {type === 'switch' && <Input.Switch {...props} />}
+      {type === 'default' && <Input.TextInput {...props} />}
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
         {validationMessage && (
           <>
@@ -72,37 +54,47 @@ const Wrapper = ({
   );
 };
 
-const DefaultStory = (props: BaseProps) => {
+const StoryInput = (props: StoryInputProps) => {
+  // TODO(thure): Implement
   return (
     <div className='space-b-4'>
       <div className={mx(baseSurface, 'p-4')}>
-        <Wrapper {...props} />
+        <StoryInputContent {...props} />
       </div>
       <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
-        <Wrapper {...props} />
+        <StoryInputContent {...props} />
       </div>
       <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'dialog' }))}>
-        <Wrapper {...props} />
+        <StoryInputContent {...props} />
       </div>
     </div>
   );
 };
 
-const meta: Meta<BaseProps> = {
+export default {
   title: 'ui/react-ui-core/Input',
-  component: Input.Root,
-  render: DefaultStory,
+  component: Input,
+  render: StoryInput,
+  // TODO(thure): Refactor.
+  argTypes: {
+    label: { control: 'text' },
+    description: { control: 'text' },
+    validationMessage: { control: 'text' },
+    validationValence: {
+      control: 'select',
+      options: ['success', 'info', 'warning', 'error'],
+    },
+    type: {
+      control: 'select',
+      options: ['default', 'textarea', 'pin'],
+    },
+  },
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
-export default meta;
-
-type Story = StoryObj<BaseProps & Variant>;
-
-export const Default: Story = {
+export const Default = {
   args: {
-    kind: 'text',
     label: 'Hello',
     placeholder: 'This is an input',
     disabled: false,
@@ -111,12 +103,12 @@ export const Default: Story = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
+    length: 6,
   },
 };
 
-export const DensityFine: Story = {
+export const DensityFine = {
   args: {
-    kind: 'text',
     label: 'This is an Input with a density value of ‘fine’',
     placeholder: 'This is a density:fine input',
     disabled: false,
@@ -125,13 +117,13 @@ export const DensityFine: Story = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
+    length: 6,
     density: 'fine',
   },
 };
 
-export const Subdued: Story = {
+export const Subdued = {
   args: {
-    kind: 'text',
     label: 'Hello',
     placeholder: 'This is a subdued input',
     disabled: false,
@@ -140,40 +132,37 @@ export const Subdued: Story = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
+    length: 6,
     variant: 'subdued',
   },
 };
 
-export const Disabled: Story = {
+export const Disabled = {
   args: {
-    kind: 'text',
     label: 'Disabled',
     placeholder: 'This is a disabled input',
     disabled: true,
   },
 };
 
-export const LabelVisuallyHidden: Story = {
+export const LabelVisuallyHidden = {
   args: {
-    kind: 'text',
     label: 'The label is for screen readers',
     labelVisuallyHidden: true,
     placeholder: 'The label for this input exists but is only read by screen readers',
   },
 };
 
-export const InputWithDescription: Story = {
+export const InputWithDescription = {
   args: {
-    kind: 'text',
     label: 'Described input',
     placeholder: 'This input has an accessible description',
     description: 'This helper text is accessibly associated with the input.',
   },
 };
 
-export const InputWithErrorAndDescription: Story = {
+export const InputWithErrorAndDescription = {
   args: {
-    kind: 'text',
     label: 'Described invalid input',
     placeholder: 'This input has both an accessible description and a validation error',
     description: 'This description is identified separately in the accessibility tree.',
@@ -182,9 +171,8 @@ export const InputWithErrorAndDescription: Story = {
   },
 };
 
-export const InputWithValidationAndDescription: Story = {
+export const InputWithValidationAndDescription = {
   args: {
-    kind: 'text',
     label: 'Described input with validation message',
     placeholder: 'This input is styled to express a validation valence',
     description: 'This description is extra.',
@@ -193,38 +181,39 @@ export const InputWithValidationAndDescription: Story = {
   },
 };
 
-export const TextArea: Story = {
+export const TextArea = {
   args: {
-    kind: 'textarea',
     label: 'This input is a text area input',
+    type: 'textarea',
     description: 'Type a long paragraph',
     placeholder: 'Lorem ipsum dolor sit amet',
   },
 };
 
-export const PinInput: Story = {
+export const PinInput = {
   args: {
-    kind: 'pin',
     label: 'This input is a PIN-style input',
+    type: 'pin',
     length: 6,
     description: 'Type in secret you received',
     placeholder: '••••••',
   },
 };
 
-export const Checkbox: Story = {
+export const Checkbox = {
   args: {
-    kind: 'checkbox',
     label: 'This is a checkbox',
+    type: 'checkbox',
     description: 'It’s checked, indeterminate, or unchecked',
     size: 5,
+    weight: 'bold',
   },
 };
 
 export const Switch = {
   args: {
-    kind: 'switch',
     label: 'This is a switch',
+    type: 'switch',
     description: 'It’s either off... or on.',
   },
 };

package/src/components/Input/Input.tsx

@@ -342,7 +342,6 @@ export const Input = {
 export type {
   InputVariant,
   InputRootProps,
-  InputSharedProps,
   PinInputProps,
   TextInputProps,
   TextAreaProps,

package/src/components/Lists/Tree.stories.tsx

@@ -51,14 +51,14 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
   );
 };
 
-const DefaultStory = ({ data }: StorybookTreeProps) => {
+const StorybookTree = ({ data }: StorybookTreeProps) => {
   return <StorybookTreeItem data={data} />;
 };
 
 export default {
   title: 'ui/react-ui-core/Tree',
   component: Tree,
-  render: DefaultStory,
+  render: StorybookTree,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Lists/Treegrid.stories.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Treegrid } from './Treegrid';
+import { Treegrid as Tg } from './Treegrid';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
@@ -122,30 +122,30 @@ const flattenedContent = Array.from(visitor(content, () => true));
 
 const DefaultStory = () => {
   return (
-    <Treegrid.Root gridTemplateColumns='1fr'>
+    <Tg.Root gridTemplateColumns='1fr'>
       {flattenedContent.map(({ node, parentOf, path }) => {
         return (
-          <Treegrid.Row
+          <Tg.Row
             key={node.id}
-            id={path.join(Treegrid.PATH_SEPARATOR)}
-            {...(parentOf && { parentOf: parentOf.join(Treegrid.PARENT_OF_SEPARATOR) })}
+            id={path.join(Tg.PATH_SEPARATOR)}
+            {...(parentOf && { parentOf: parentOf.join(Tg.PARENT_OF_SEPARATOR) })}
           >
-            <Treegrid.Cell indent classNames='flex items-center'>
+            <Tg.Cell indent classNames='flex items-center'>
               {node.icon && <Icon icon={node.icon} classNames='is-[1em] bs-[1em] mlb-1' />}
               {node.title}
-            </Treegrid.Cell>
-          </Treegrid.Row>
+            </Tg.Cell>
+          </Tg.Row>
         );
       })}
-    </Treegrid.Root>
+    </Tg.Root>
   );
 };
 
+export const Default = {};
+
 export default {
   title: 'ui/react-ui-core/Treegrid',
-  component: Treegrid.Root,
+  component: Tg.Root,
   render: DefaultStory,
   decorators: [withTheme],
 };
-
-export const Default = {};

package/src/components/Main/Main.stories.tsx

@@ -22,7 +22,7 @@ const ComplementarySidebarToggle = () => {
   return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
 };
 
-const DefaultStory = (_args: StoryMainArgs) => {
+const StoryMain = (_args: StoryMainArgs) => {
   return (
     <Main.Root>
       <Main.Overlay />
@@ -48,7 +48,7 @@ const DefaultStory = (_args: StoryMainArgs) => {
 export default {
   title: 'ui/react-ui-core/Main',
   component: Main.Root,
-  render: DefaultStory,
+  render: StoryMain,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Menus/ContextMenu.stories.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { ContextMenu } from './ContextMenu';
 import { withTheme } from '../../testing';
 
-const DefaultStory = () => {
+const StorybookContextMenu = () => {
   // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
   return (
     <ContextMenu.Root>
@@ -94,7 +94,7 @@ const DefaultStory = () => {
 export default {
   title: 'ui/react-ui-core/ContextMenu',
   component: ContextMenu,
-  render: DefaultStory,
+  render: StorybookContextMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Menus/DropdownMenu.stories.tsx

@@ -10,7 +10,7 @@ import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-const DefaultStory = () => {
+const StorybookDropdownMenu = () => {
   return (
     <DropdownMenu.Root defaultOpen>
       <DropdownMenu.Trigger asChild>
@@ -94,7 +94,7 @@ const DefaultStory = () => {
 export default {
   title: 'ui/react-ui-core/DropdownMenu',
   component: DropdownMenu,
-  render: DefaultStory,
+  render: StorybookDropdownMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Message/Message.stories.tsx

@@ -12,13 +12,13 @@ import { type MessageValence } from '@dxos/react-ui-types';
 import { Message } from './Message';
 import { withTheme } from '../../testing';
 
-type StoryProps = {
+type StoryMessageProps = {
   valence: MessageValence;
   title: string;
   body: string;
 };
 
-const DefaultStory = ({ valence, title, body }: StoryProps) => (
+const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
   <Message.Root valence={valence}>
     <Message.Title>
       <Info className='inline w-5 h-5 mb-1' weight='duotone' /> {title}
@@ -30,7 +30,7 @@ const DefaultStory = ({ valence, title, body }: StoryProps) => (
 export default {
   title: 'ui/react-ui-core/Message',
   component: Message,
-  render: DefaultStory,
+  render: StoryMessage,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Popover/Popover.stories.tsx

@@ -14,7 +14,7 @@ import { Button } from '../Buttons';
 
 faker.seed(1234);
 
-const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
+const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
   return (
     <Popover.Root defaultOpen>
       <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
@@ -31,7 +31,7 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
 export default {
   title: 'ui/react-ui-core/Popover',
   component: Popover,
-  render: DefaultStory,
+  render: StorybookPopover,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Popover/Popover.tsx

@@ -246,13 +246,13 @@ PopoverPortal.displayName = PORTAL_NAME;
 
 const CONTENT_NAME = 'PopoverContent';
 
-type PopoverContentProps = ThemedClassName<PopoverContentTypeProps> & {
+interface PopoverContentProps extends PopoverContentTypeProps {
   /**
    * Used to force mounting when more control is needed. Useful when
    * controlling animation with React animation libraries.
    */
-  forceMount?: boolean;
-};
+  forceMount?: true;
+}
 
 const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps>(
   (props: ScopedProps<PopoverContentProps>, forwardedRef) => {
@@ -277,8 +277,7 @@ PopoverContent.displayName = CONTENT_NAME;
 /* ----------------------------------------------------------------------------------------------- */
 
 type PopoverContentTypeElement = PopoverContentImplElement;
-export interface PopoverContentTypeProps
-  extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
+interface PopoverContentTypeProps extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
 
 const PopoverContentModal = forwardRef<PopoverContentTypeElement, PopoverContentTypeProps>(
   (props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
@@ -572,8 +571,6 @@ const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
 
 const getState = (open: boolean) => (open ? 'open' : 'closed');
 
-type PopoverContentInteractOutsideEvent = Parameters<NonNullable<PopoverContentProps['onInteractOutside']>>[0];
-
 export const Popover = {
   Root: PopoverRoot,
   Anchor: PopoverAnchor,
@@ -598,5 +595,4 @@ export type {
   PopoverCloseProps,
   PopoverArrowProps,
   PopoverViewportProps,
-  PopoverContentInteractOutsideEvent,
 };

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -14,7 +14,7 @@ import { withTheme } from '../../testing';
 
 faker.seed(1234);
 
-const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
+const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
   return (
     <ScrollArea.Root
       classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceShadow({ elevation: 'positioned' })]}
@@ -36,7 +36,7 @@ const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
 export default {
   title: 'ui/react-ui-core/Scroll area',
   component: ScrollArea,
-  render: DefaultStory,
+  render: StorybookScrollArea,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/ScrollArea/ScrollArea.tsx

@@ -23,9 +23,6 @@ type ScrollAreaVariant = 'coarse' | 'fine';
 
 type ScrollAreaRootProps = ThemedClassName<ScrollAreaPrimitiveRootProps>;
 
-/**
- * @deprecated
- */
 const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (

package/src/components/Toast/Toast.stories.tsx

@@ -13,27 +13,27 @@ import { Button } from '../Buttons';
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
 type StorybookToastProps = Partial<{
+  openTrigger: string;
   title: string;
   description: string;
   actionTriggers: ActionTriggerProps[];
-  openTrigger: string;
   closeTrigger: ReactNode;
 }>;
 
-const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTrigger }: StorybookToastProps) => {
+const StorybookToast = (props: StorybookToastProps) => {
   const [open, setOpen] = useState(true);
   return (
     <Toast.Provider>
-      <Button onClick={() => setOpen(true)}>{openTrigger}</Button>
+      <Button onClick={() => setOpen(true)}>{props.openTrigger}</Button>
       <Toast.Viewport />
       <Toast.Root open={open} onOpenChange={setOpen}>
         <Toast.Body>
-          <Toast.Title>{title}</Toast.Title>
-          <Toast.Description>{description}</Toast.Description>
+          <Toast.Title>{props.title}</Toast.Title>
+          <Toast.Description>{props.description}</Toast.Description>
         </Toast.Body>
         <Toast.Actions>
-          <Toast.Close asChild={typeof closeTrigger !== 'string'}>{closeTrigger}</Toast.Close>
-          {(actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
+          <Toast.Close asChild={typeof props.closeTrigger !== 'string'}>{props.closeTrigger}</Toast.Close>
+          {(props.actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
             <Toast.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
               {trigger}
             </Toast.Action>
@@ -47,7 +47,7 @@ const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTr
 export default {
   title: 'ui/react-ui-core/Toast',
   component: Toast,
-  render: DefaultStory,
+  render: StorybookToast,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
@@ -55,14 +55,9 @@ export default {
 export const Default = {
   args: {
     openTrigger: 'Open toast',
-    title: 'This is a toast',
+    title: 'Hi, this is a toast',
     description: 'This goes away on its own with a timer.',
-    actionTriggers: [
-      {
-        altText: 'Press F5 to reload the page',
-        trigger: <Button variant='primary'>Reload</Button>,
-      },
-    ],
+    actionTriggers: [{ altText: 'Press F5 to reload the page', trigger: <Button variant='primary'>Reload</Button> }],
     closeTrigger: <Button>Close</Button>,
   },
   parameters: {

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -14,7 +14,7 @@ import { Select } from '../Select';
 
 type StorybookToolbarProps = {};
 
-const DefaultStory = (props: StorybookToolbarProps) => {
+const StorybookToolbar = (props: StorybookToolbarProps) => {
   return (
     <Toolbar.Root>
       {/* TODO(burdon): Should be fixed width (regardless of selection). */}
@@ -72,7 +72,7 @@ const DefaultStory = (props: StorybookToolbarProps) => {
 export default {
   title: 'ui/react-ui-core/Toolbar',
   component: Toolbar,
-  render: DefaultStory,
+  render: StorybookToolbar,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };