@dxos/react-ui 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5

package/src/components/{Buttons → Button}/IconButton.stories.tsx

@@ -2,36 +2,41 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IconButton, type IconButtonProps } from './IconButton';
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
+import { Button } from './Button';
+import { IconButton, type IconButtonProps } from './IconButton';
 
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
-      <div className='mbe-4'>
+      <div role='none' className='flex gap-4'>
         <IconButton {...props} />
-      </div>
-      <div className='mbe-4'>
         <IconButton iconOnly {...props} />
+        <Button>{props.label}</Button>
       </div>
     </Tooltip.Provider>
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/IconButton',
+const meta = {
+  title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  render: DefaultStory as any,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     label: 'Bold',
     icon: 'ph--text-b--regular',

package/src/components/{Buttons → Button}/IconButton.tsx

@@ -4,28 +4,37 @@
 
 import React, { forwardRef } from 'react';
 
-import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
 import { Tooltip, type TooltipSide } from '../Tooltip';
+import { Button, type ButtonProps } from './Button';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
-  Pick<IconProps, 'icon' | 'size'> & {
+  Partial<Pick<IconProps, 'icon' | 'size'>> & {
     label: string;
-    iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
+    iconOnly?: boolean;
+    iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
-    tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
   };
 
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
+  props.iconOnly ? (
+    <IconOnlyButton {...props} ref={forwardedRef} />
+  ) : (
+    <LabelledIconButton {...props} ref={forwardedRef} />
+  ),
+);
+
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+  ({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
+
     return (
       <Tooltip.Trigger asChild content={props.label} side={tooltipSide}>
         <LabelledIconButton {...props} ref={forwardedRef} />
@@ -35,26 +44,22 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 );
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+  (
+    { size, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
-        <Icon icon={icon} size={size} classNames={iconClassNames} />
+      <Button {...props} classNames={tx('iconButton.root', { iconOnly }, classNames)} ref={forwardedRef}>
+        {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
+        {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );
   },
 );
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
-  props.iconOnly ? (
-    <IconOnlyButton {...props} ref={forwardedRef} />
-  ) : (
-    <LabelledIconButton {...props} ref={forwardedRef} />
-  ),
-);
-
 export { IconButton };
 
 export type { IconButtonProps };

package/src/components/Button/Toggle.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+import { Toggle, type ToggleProps } from './Toggle';
+
+const DefaultStory = (props: ToggleProps) => {
+  return (
+    <Toggle {...props}>
+      <Icon icon='ph--text-b--regular' />
+    </Toggle>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/Toggle',
+  component: Toggle,
+  render: DefaultStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/{Buttons → Button}/Toggle.tsx

@@ -2,19 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Toggle as TogglePrimitive, type ToggleProps as TogglePrimitiveProps } from '@radix-ui/react-toggle';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
 import React, { forwardRef } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 
-type ToggleProps = Omit<TogglePrimitiveProps, 'asChild'> & ButtonProps;
+type ToggleProps = Omit<TogglePrimitive.ToggleProps, 'asChild'> & ButtonProps;
 
 const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
   ({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
     return (
-      <TogglePrimitive {...{ defaultPressed, pressed, onPressedChange }} asChild>
+      <TogglePrimitive.Root {...{ defaultPressed, pressed, onPressedChange }} asChild>
         <Button {...props} ref={forwardedRef} />
-      </TogglePrimitive>
+      </TogglePrimitive.Root>
     );
   },
 );

package/src/components/{Buttons → Button}/ToggleGroup.stories.tsx

@@ -2,37 +2,39 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { TextB, TextItalic } from '@phosphor-icons/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 
 // TODO(burdon): Create Radix-style Root, Item, etc?
 const DefaultStory = (props: ToggleGroupProps) => {
   return (
     <ToggleGroup {...props}>
       <ToggleGroupItem value='textb'>
-        <TextB />
+        <Icon icon='ph--text-b--regular' />
       </ToggleGroupItem>
       <ToggleGroupItem value='texti'>
-        <TextItalic />
+        <Icon icon='ph--text-italic--regular' />
       </ToggleGroupItem>
     </ToggleGroup>
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/ToggleGroup',
+const meta = {
+  title: 'ui/react-ui-core/components/ToggleGroup',
   component: ToggleGroup,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     type: 'single',
   },

package/src/components/Button/ToggleGroup.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import React, { forwardRef } from 'react';
+
+import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps } from './Button';
+import { IconButton, type IconButtonProps } from './IconButton';
+
+type ToggleGroupProps =
+  | Omit<ToggleGroupPrimitive.ToggleGroupSingleProps, 'className'>
+  | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps, 'className'>;
+
+const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps & ButtonGroupProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupPrimitive.Root {...props} asChild>
+        <ButtonGroup {...{ classNames, children }} ref={forwardedRef} />
+      </ToggleGroupPrimitive.Root>
+    );
+  },
+);
+
+type ToggleGroupItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & ButtonProps;
+
+const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  ({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupPrimitive.Item {...props} asChild>
+        <Button {...{ variant, elevation, density, classNames, children }} ref={forwardedRef} />
+      </ToggleGroupPrimitive.Item>
+    );
+  },
+);
+
+type ToggleGroupIconItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & IconButtonProps;
+
+const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemProps>(
+  ({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupPrimitive.Item {...props} asChild>
+        <IconButton {...{ variant, elevation, density, classNames, label, icon, size }} ref={forwardedRef} />
+      </ToggleGroupPrimitive.Item>
+    );
+  },
+);
+
+export { ToggleGroup, ToggleGroupItem, ToggleGroupIconItem };
+export type { ToggleGroupProps, ToggleGroupItemProps };

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useRef } from 'react';
+
+import { random } from '@dxos/random';
+import { Icon } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Card } from './Card';
+
+random.seed(0);
+
+type DefaultStoryProps = {
+  title: string;
+  description?: string;
+  image?: string;
+  fullWidth?: boolean;
+};
+
+const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProps) => {
+  const handleRef = useRef<HTMLButtonElement>(null);
+  console.log(title);
+  return (
+    <Card.Root fullWidth={fullWidth}>
+      <Card.Toolbar>
+        <Card.DragHandle ref={handleRef} />
+        <Card.Title>{title}</Card.Title>
+        <Card.CloseIconButton onClick={() => console.log('close')} />
+      </Card.Toolbar>
+      <Card.Content>
+        <Card.Poster alt='Card.Poster' image={image} />
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Heading>Card.Heading</Card.Heading>
+        </Card.Row>
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Text>Card.Text (default)</Card.Text>
+        </Card.Row>
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Text variant='description'>
+            Card.Text (description)
+            <br />
+            {description}
+          </Card.Text>
+        </Card.Row>
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Heading variant='subtitle'>Card.Heading (subtitle)</Card.Heading>
+        </Card.Row>
+        <Card.Action label='Card.Action' onClick={() => console.log('action')} />
+        <Card.Link label='Card.Link' href='https://dxos.org' />
+      </Card.Content>
+    </Card.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/Card',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'grid w-[30rem] place-items-center' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const image = random.image.url();
+
+export const Default: Story = {
+  args: {
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
+    image,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
+    image,
+    fullWidth: true,
+  },
+};
+
+export const Simple: Story = {
+  args: {
+    title: random.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Toolbar>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.CloseIconButton onClick={() => console.log('close')} />
+        </Card.Toolbar>
+      </Card.Root>
+    );
+  },
+};
+
+export const Description: Story = {
+  args: {
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
+  },
+  render: ({ title, description }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Toolbar>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.CloseIconButton onClick={() => console.log('close')} />
+        </Card.Toolbar>
+        <Card.Content>
+          <Card.Row>
+            <Card.Text variant='description'>{description}</Card.Text>
+          </Card.Row>
+        </Card.Content>
+      </Card.Root>
+    );
+  },
+};
+
+export const Mock = () => (
+  <div className='grid grid-cols-[2rem_1fr_2rem] w-full dx-card-min-width dx-card-max-width border border-separator rounded-xs'>
+    <div className='grid grid-cols-subgrid col-span-full'>
+      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+        <Icon icon='ph--dots-six-vertical--regular' />
+      </div>
+      <div className='p-1 whitespace-normal break-words text-description items-center'>
+        This line is very very long and it should wrap.
+      </div>
+      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+        <Icon icon='ph--x--regular' />
+      </div>
+    </div>
+    <div className='grid grid-cols-subgrid col-span-3'>
+      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+        <Icon icon='ph--dots-six-vertical--regular' />
+      </div>
+      <div className='p-1 text-description items-center col-span-2'>
+        This line is very very long and it should wrap.
+      </div>
+    </div>
+  </div>
+);