@dxos/react-ui 0.3.3-main.619fab4 → 0.3.3-main.6dfc6c0

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

@@ -13,7 +13,6 @@ 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';
@@ -21,9 +20,16 @@ import { ScrollArea } from '../ScrollArea';
 
 faker.seed(1);
 
-// TODO(burdon): Menu.
-// TODO(burdon): Collapse.
-// TODO(burdon): Editable.
+// https://unsplash.com
+// TODO(burdon): Use https://picsum.photos
+const testImages = [
+  '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 CardData = {
   id: string;
@@ -92,7 +98,7 @@ const DraggableStory: FC<PropsWithChildren> = ({ children }) => {
     <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'>
+          <div className='flex flex-col gap-4'>
             {cards.map((card) => (
               <DraggableCard key={card.id} data={card} onDelete={handleDelete} />
             ))}
@@ -105,8 +111,8 @@ const DraggableStory: FC<PropsWithChildren> = ({ children }) => {
 
 const ReadonlyCardStory = () => {
   return (
-    <div className='flex flex-col overflow-y-scroll p-8'>
-      <div className='flex flex-col gap-8'>
+    <div className='flex flex-col overflow-y-scroll'>
+      <div className='flex flex-col gap-4'>
         <Card.Root square noPadding>
           <Card.Header floating>
             <Card.DragHandle position='left' />
@@ -173,35 +179,34 @@ const ReadonlyCardStory = () => {
 
 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 className='flex flex-col h-full justify-center'>
+      <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>
   );
 };
 
 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 className='flex flex-col w-[360px] overflow-hidden'>
+          {/* TODO(burdon): Story for different densities. */}
+          <DensityProvider density='fine'>
+            <Story />
+          </DensityProvider>
+        </div>
       </div>
     ),
   ],

package/src/components/Card/Card.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DotsSixVertical, DotsThreeVertical } from '@phosphor-icons/react';
+import { DotsSixVertical, DotsThreeVertical, type Icon } from '@phosphor-icons/react';
 import { type Primitive } from '@radix-ui/react-primitive';
 import React, {
   type ComponentPropsWithoutRef,
@@ -72,10 +72,23 @@ const CardDragHandle: FC<CardDragHandleProps> = ({ position, classNames, ...prop
   );
 };
 
+type CardEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { Icon: Icon; position?: 'left' | 'right' };
+
+const CardEndcap: FC<CardEndcapProps> = ({ Icon, position, classNames, ...props }) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext();
+  return (
+    <div {...props} className={tx('card.menu', 'card', { density, position }, classNames)}>
+      <Icon className={tx('card.menuIcon', 'card')} />
+    </div>
+  );
+};
+
 type CardMenuProps = PropsWithChildren<
   ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' }
 >;
 
+// TODO(burdon): Reconcile with Endcap (remove dropdown from here). See ListItem.Endcap (style icon/size?)
 const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(
   ({ children, position, classNames, ...props }, forwardRef) => {
     const { tx } = useThemeContext();
@@ -124,6 +137,7 @@ export const Card = {
   Root: CardRoot,
   Header: CardHeader,
   DragHandle: CardDragHandle,
+  Endcap: CardEndcap,
   Menu: CardMenu,
   Title: CardTitle,
   Body: CardBody,

package/src/components/Main/Main.tsx

@@ -131,8 +131,6 @@ type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogConte
   side: 'inline-start' | 'inline-end';
 };
 
-// TODO(burdon): Factor out Sidebar?
-// TODO(burdon): Style left/right sidebar differently.
 const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
   ({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
     const [isLg] = useMediaQuery('lg', { ssr: false });
@@ -259,9 +257,9 @@ const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames,
 });
 
 export const Main = {
+  Root: MainRoot,
   Content: MainContent,
   Overlay: MainOverlay,
-  Root: MainRoot,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar,
 };

package/dist/types/src/components/Card/testing.d.ts

@@ -1,9 +0,0 @@
-type CardType = 'document' | 'message' | 'contact' | 'image' | 'event' | 'project' | 'task' | 'result' | 'table';
-export declare const testImages: string[];
-type Data = {
-    id: string;
-    type: string;
-};
-export declare const generators: Record<CardType, () => Data & Record<string, any>>;
-export {};
-//# sourceMappingURL=testing.d.ts.map

package/dist/types/src/components/Card/testing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/testing.ts"],"names":[],"mappings":"AAQA,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAIjH,eAAO,MAAM,UAAU,UAQtB,CAAC;AAEF,KAAK,IAAI,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAiEzE,CAAC"}

package/src/components/Card/testing.ts

@@ -1,90 +0,0 @@
-//
-// 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(),
-  }),
-};