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

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

@@ -0,0 +1,215 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { DndContext, type DragEndEvent } from '@dnd-kit/core';
+import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { faker } from '@faker-js/faker';
+import React, { type FC, type PropsWithChildren, useState } from 'react';
+
+import { chromeSurface, mx } from '@dxos/react-ui-theme';
+
+import { Card } from './Card';
+import { testImages } from './testing';
+import { DensityProvider } from '../DensityProvider';
+import { DropdownMenu } from '../DropdownMenu';
+import { Input } from '../Input';
+import { ScrollArea } from '../ScrollArea';
+
+faker.seed(1);
+
+// TODO(burdon): Menu.
+// TODO(burdon): Collapse.
+// TODO(burdon): Editable.
+
+type CardData = {
+  id: string;
+  title: string;
+  body: string;
+  image?: string;
+};
+
+const DraggableCard: FC<{ data: CardData; onDelete: (id: string) => void }> = ({
+  data: { id, title, body, image },
+  onDelete,
+}) => {
+  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
+  const t = transform ? Object.assign(transform, { scaleY: 1 }) : null;
+
+  return (
+    <Card.Root ref={setNodeRef} style={{ transform: CSS.Transform.toString(t) }}>
+      <Card.Header>
+        <Card.DragHandle {...listeners} {...attributes} />
+        <Card.Title title={title} />
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger asChild>
+            <Card.Menu />
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content>
+            <DropdownMenu.Viewport>
+              <DropdownMenu.Item onClick={() => onDelete(id)}>Delete</DropdownMenu.Item>
+            </DropdownMenu.Viewport>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </Card.Header>
+      <Card.Body classNames={'text-sm'} gutter>
+        <p>{body}</p>
+      </Card.Body>
+      {image && <Card.Media src={image} classNames={'h-[160px]'} />}
+    </Card.Root>
+  );
+};
+
+const DraggableStory: FC<PropsWithChildren> = ({ children }) => {
+  const [cards, setCards] = useState<CardData[]>(
+    Array.from({ length: 7 }).map(() => ({
+      id: faker.string.uuid(),
+      title: faker.lorem.sentence(3),
+      body: faker.lorem.sentences(),
+      image: faker.datatype.boolean() ? faker.helpers.arrayElement(testImages) : undefined,
+    })),
+  );
+
+  const handleDelete = (id: string) => {
+    setCards((cards) => cards.filter((card) => card.id !== id));
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      setCards((cards) => {
+        const oldIndex = cards.findIndex((card) => card.id === active.id);
+        const newIndex = cards.findIndex((card) => card.id === over?.id);
+        return arrayMove(cards, oldIndex, newIndex);
+      });
+    }
+  };
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <SortableContext items={cards.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
+        <div className='flex flex-col overflow-y-scroll'>
+          <div className='flex flex-col m-4 gap-4'>
+            {cards.map((card) => (
+              <DraggableCard key={card.id} data={card} onDelete={handleDelete} />
+            ))}
+          </div>
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+const ReadonlyCardStory = () => {
+  return (
+    <div className='flex flex-col overflow-y-scroll p-8'>
+      <div className='flex flex-col gap-8'>
+        <Card.Root square noPadding>
+          <Card.Header floating>
+            <Card.DragHandle position='left' />
+            <Card.Menu position='right' />
+          </Card.Header>
+          <Card.Media src={testImages[1]} />
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Header>
+            <Card.Title title={faker.lorem.sentence(3)} />
+          </Card.Header>
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Body classNames={'text-sm font-thin h-[100px]'}>
+            <ScrollArea.Root>
+              <ScrollArea.Viewport>{faker.lorem.sentences(16)}</ScrollArea.Viewport>
+              <ScrollArea.Scrollbar orientation='vertical'>
+                <ScrollArea.Thumb />
+              </ScrollArea.Scrollbar>
+            </ScrollArea.Root>
+          </Card.Body>
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Header>
+            <Card.Title center title={faker.lorem.sentence(3)} />
+          </Card.Header>
+          <Card.Body classNames={'text-sm font-thin'}>{faker.lorem.sentences(3)}</Card.Body>
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Header>
+            <Card.DragHandle />
+            <Card.Title title={faker.lorem.sentence(8)} />
+            {/* TODO(burdon): Menu util. */}
+            <Card.Menu />
+          </Card.Header>
+          <Card.Body gutter classNames={'gap-2 text-sm font-thin'}>
+            <p>Content with gutter</p>
+            <p className='line-clamp-3'>{faker.lorem.sentences(3)}</p>
+          </Card.Body>
+        </Card.Root>
+
+        <Card.Root>
+          <Card.Header>
+            <Card.DragHandle />
+            <Card.Title title={faker.lorem.sentence(3)} />
+            <Card.Menu />
+          </Card.Header>
+          <Card.Body gutter classNames={'text-sm gap-2 font-thin'}>
+            <p className='line-clamp-3'>{faker.lorem.sentences(1)}</p>
+          </Card.Body>
+          <Card.Media classNames={'h-[200px] grayscale'} src={testImages[0]} />
+          <Card.Body gutter classNames={'text-sm gap-2 font-thin'}>
+            <p className='line-clamp-3'>{faker.lorem.sentences(3)}</p>
+          </Card.Body>
+        </Card.Root>
+      </div>
+    </div>
+  );
+};
+
+const EditableCardStory = () => {
+  return (
+    <div className='flex flex-col overflow-y-scroll p-8'>
+      <div className='flex flex-col gap-8'>
+        <Card.Root>
+          <Card.Header>
+            <Card.DragHandle />
+            <Input.Root>
+              <Input.TextInput classNames={'-mx-2 px-2'} variant='subdued' placeholder={'Title'} />
+            </Input.Root>
+            <Card.Menu />
+          </Card.Header>
+          <Card.Body gutter classNames={'gap-2 text-sm font-thin'}>
+            {faker.lorem.sentences()}
+          </Card.Body>
+        </Card.Root>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  component: Card,
+  args: {},
+  decorators: [
+    (Story: any) => (
+      <div className={mx('flex h-screen w-full justify-center overflow-hidden', chromeSurface)}>
+        {/* TODO(burdon): Story for different densities. */}
+        <DensityProvider density='fine'>
+          <Story />
+        </DensityProvider>
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Draggable = () => <DraggableStory />;
+export const ReadOnly = () => <ReadonlyCardStory />;
+export const Editable = () => <EditableCardStory />;

package/src/components/Card/Card.tsx

@@ -0,0 +1,114 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotsSixVertical, DotsThreeVertical } from '@phosphor-icons/react';
+import { type Primitive } from '@radix-ui/react-primitive';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type FC, forwardRef } from 'react';
+
+import { useDensityContext, useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+type CardRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  grow?: boolean;
+  square?: boolean;
+  noPadding?: boolean;
+};
+
+// TODO(burdon): Forward refs for all components?
+const CardRoot = forwardRef<HTMLDivElement, CardRootProps>(
+  ({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div {...props} ref={forwardedRef} className={tx('card.root', 'card', { grow, square, noPadding }, classNames)}>
+        {children}
+      </div>
+    );
+  },
+);
+
+type CardHeaderProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { floating?: boolean };
+
+export const CardHeader: FC<CardHeaderProps> = ({ floating, classNames, children, ...props }) => {
+  const { tx } = useThemeContext();
+  return (
+    <div {...props} className={tx('card.header', 'card', { floating }, classNames)}>
+      {children}
+    </div>
+  );
+};
+
+type CardTitleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+  center?: boolean;
+  title?: string;
+};
+
+export const CardTitle: FC<CardTitleProps> = ({ center, title, classNames, ...props }) => {
+  const { tx } = useThemeContext();
+  return (
+    <div {...props} className={tx('card.title', 'card', { center }, classNames)}>
+      {title}
+    </div>
+  );
+};
+
+// TODO(burdon): Reuse ListItemEndcap?
+type CardDragHandleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' };
+
+const CardDragHandle: FC<CardDragHandleProps> = ({ position, classNames, ...props }) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return (
+    <div {...props} className={tx('card.dragHandle', 'card', { density, position }, classNames)}>
+      <DotsSixVertical className={tx('card.dragHandleIcon', 'card')} />
+    </div>
+  );
+};
+
+type CardMenuProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' };
+
+const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(({ position, classNames, ...props }, forwardRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return (
+    <div {...props} className={tx('card.menu', 'card', { density, position }, classNames)} ref={forwardRef}>
+      <DotsThreeVertical className={tx('card.menuIcon', 'card', {})} />
+    </div>
+  );
+});
+
+type CardBodyProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { gutter?: boolean };
+
+export const CardBody: FC<CardBodyProps> = ({ gutter, classNames, children, ...props }) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return (
+    <div {...props} className={tx('card.body', 'card', { density, gutter }, classNames)}>
+      {children}
+    </div>
+  );
+};
+
+type CardMediaProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { src?: string; contain?: boolean };
+
+// TODO(burdon): Option to set to 50% of height of card.
+export const CardMedia: FC<CardMediaProps> = ({ src, contain, classNames, ...props }) => {
+  const { tx } = useThemeContext();
+  return (
+    <div className='flex grow overflow-hidden'>
+      <img {...props} className={tx('card.media', 'card', { contain }, classNames)} src={src} />
+    </div>
+  );
+};
+
+export const Card = {
+  Root: CardRoot,
+  Header: CardHeader,
+  DragHandle: CardDragHandle,
+  Menu: CardMenu,
+  Title: CardTitle,
+  Body: CardBody,
+  Media: CardMedia,
+};
+
+export type { CardRootProps };

package/src/{panels/SpacePanel → components/Card}/index.ts

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

package/src/components/Card/testing.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { faker } from '@faker-js/faker';
+
+// TODO(burdon): Standardize with mosaic.
+
+type CardType = 'document' | 'message' | 'contact' | 'image' | 'event' | 'project' | 'task' | 'result' | 'table';
+
+// https://unsplash.com
+// TODO(burdon): Use https://picsum.photos/
+export const testImages = [
+  // 'https://images.unsplash.com/photo-1554629947-334ff61d85dc',
+  'https://images.unsplash.com/photo-1616394158624-a2ba9cfe2994',
+  'https://images.unsplash.com/photo-1507941097613-9f2157b69235',
+  'https://images.unsplash.com/photo-1431274172761-fca41d930114',
+  'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad',
+  'https://images.unsplash.com/photo-1564221710304-0b37c8b9d729',
+  'https://images.unsplash.com/photo-1605425183435-25b7e99104a4',
+];
+
+type Data = { id: string; type: string };
+
+export const generators: Record<CardType, () => Data & Record<string, any>> = {
+  document: () => ({
+    type: 'document',
+    id: faker.string.uuid(),
+    title: faker.lorem.sentence(),
+    body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),
+  }),
+
+  // TODO(burdon): Timestamp.
+  message: () => ({
+    type: 'message',
+    id: faker.string.uuid(),
+    from: faker.internet.userName(),
+    body: faker.lorem.sentence(),
+  }),
+
+  // TODO(burdon): Avatar.
+  contact: () => ({
+    type: 'contact',
+    id: faker.string.uuid(),
+    name: faker.person.fullName(),
+    username: faker.internet.userName(),
+    email: faker.internet.email(),
+  }),
+
+  image: () => ({
+    type: 'image',
+    id: faker.string.uuid(),
+    image: faker.helpers.arrayElement(testImages),
+    body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,
+  }),
+
+  event: () => ({
+    type: 'event',
+    id: faker.string.uuid(),
+    name: faker.commerce.productName(),
+    date: faker.date.recent(),
+  }),
+
+  project: () => ({
+    type: 'project',
+    id: faker.string.uuid(),
+    name: faker.commerce.productName(),
+    body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),
+    tasks: Array.from({ length: faker.number.int(5) }).map(() => generators.task()),
+  }),
+
+  task: () => ({
+    type: 'task',
+    id: faker.string.uuid(),
+    done: faker.datatype.boolean(),
+    title: faker.lorem.sentence(),
+  }),
+
+  // TODO(burdon): Search result.
+  result: () => ({
+    type: 'result',
+    id: faker.string.uuid(),
+  }),
+
+  // TODO(burdon): Generic data.
+  table: () => ({
+    type: 'table',
+    id: faker.string.uuid(),
+  }),
+};

package/src/components/Center/Center.stories.tsx

@@ -0,0 +1,18 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Center } from './Center';
+
+export default {
+  component: Center,
+  actions: { argTypesRegex: '^on.*' },
+};
+
+export const Normal = (props: any) => {
+  return <Center {...props}>✨</Center>;
+};

package/src/components/Center/Center.tsx

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type DetailedHTMLProps, type PropsWithChildren, type HTMLAttributes } from 'react';
+
+export type CenterProps = PropsWithChildren<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+
+export const Center = (props: CenterProps) => {
+  const { children, className, ...rest } = props;
+  return (
+    <div className={'h-full flex items-center justify-center ' + className} {...rest}>
+      {children}
+    </div>
+  );
+};

package/src/{layouts/PanelDialog → components/Center}/index.ts

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

package/src/components/ComboBox/ComboBox.stories.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { faker } from '@faker-js/faker';
+import React, { type FC, useEffect, useState } from 'react';
+
+import { ComboBox, type ComboBoxItem } from './ComboBox';
+
+type TestItem = { id: string; text: string };
+
+const data: TestItem[] = faker.helpers
+  .uniqueArray(faker.definitions.animal.fish, 100)
+  .sort()
+  .map((text) => ({
+    id: faker.string.uuid(),
+    text,
+  }));
+
+const ComboBoxStory: FC<{ data: TestItem[] }> = ({ data = [] }) => {
+  const [filter, setFilter] = useState<string>();
+  const [items, setItems] = useState<ComboBoxItem[]>([]);
+  const [selected, setSelected] = useState<ComboBoxItem>();
+  useEffect(() => {
+    setItems(() =>
+      filter?.length
+        ? data
+            .filter((item) => item.text?.length && item.text?.toLowerCase().includes(filter.toLowerCase()))
+            .map((item) => ({ id: item.id, label: item.text, data: item }))
+        : [],
+    );
+  }, [filter]);
+
+  return (
+    <div className='flex flex-col w-full bg-neutral-100 dark:bg-neutral-800'>
+      <ComboBox.Root items={items} onChange={setSelected} onInputChange={setFilter}>
+        <ComboBox.Input placeholder={'Select...'} />
+        <ComboBox.Content>
+          {items?.map((item) => (
+            <ComboBox.Item key={item.id} item={item}>
+              {item.label}
+            </ComboBox.Item>
+          ))}
+        </ComboBox.Content>
+      </ComboBox.Root>
+
+      <div className='mt-16 p-2 font-mono text-xs truncate'>
+        <div>{selected?.label}</div>
+      </div>
+    </div>
+  );
+};
+
+export default {
+  component: ComboBoxStory,
+  decorators: [
+    (Story: any) => (
+      <div className='flex flex-col items-center h-screen w-full overflow-hidden'>
+        <div className='flex w-60 m-8 bg-white'>
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+// TODO(burdon): Test controlled and uncontrolled.
+
+export const Default = {
+  args: {
+    data,
+  },
+};
+
+export const Empty = {
+  args: {},
+};