@dxos/react-ui 0.3.3-main.76bfae3 → 0.3.3-main.8043a2f

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

@@ -44,7 +44,6 @@ declare const _default: {
             contain?: boolean | undefined;
         }>;
     };
-    args: {};
     decorators: ((Story: any) => JSX.Element)[];
     parameters: {
         layout: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,KAAoD,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4L7D,GAAG;;;;;AAJf,wBAgBE;AAEF,eAAO,MAAM,SAAS,mBAA2B,CAAC;AAClD,eAAO,MAAM,QAAQ,mBAA8B,CAAC;AACpD,eAAO,MAAM,QAAQ,mBAA8B,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/Card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,KAAoD,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA+L7D,GAAG;;;;;AAHf,wBAiBE;AAEF,eAAO,MAAM,SAAS,mBAA2B,CAAC;AAClD,eAAO,MAAM,QAAQ,mBAA8B,CAAC;AACpD,eAAO,MAAM,QAAQ,mBAA8B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.3.3-main.76bfae3",
+  "version": "0.3.3-main.8043a2f",
   "description": "Opinionated, styled, low-level React components for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -40,10 +40,10 @@
     "jdenticon": "^3.2.0",
     "keyborg": "^2.0.0",
     "react-i18next": "^11.18.6",
-    "@dxos/react-hooks": "0.3.3-main.76bfae3",
-    "@dxos/react-input": "0.3.3-main.76bfae3",
-    "@dxos/react-list": "0.3.3-main.76bfae3",
-    "@dxos/react-ui-types": "0.3.3-main.76bfae3"
+    "@dxos/react-hooks": "0.3.3-main.8043a2f",
+    "@dxos/react-input": "0.3.3-main.8043a2f",
+    "@dxos/react-list": "0.3.3-main.8043a2f",
+    "@dxos/react-ui-types": "0.3.3-main.8043a2f"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -58,7 +58,7 @@
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/react-ui-theme": "0.3.3-main.76bfae3"
+    "@dxos/react-ui-theme": "0.3.3-main.8043a2f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

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/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(),
-  }),
-};