@dxos/react-ui-stack 0.6.13-main.ed424a1 → 0.6.13

package/dist/lib/node-esm/testing/index.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/testing/generator.ts", "../../../../src/testing/stack-manager.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { create, type ReactiveObject, S } from '@dxos/echo-schema';\nimport { faker } from '@dxos/random';\n\n// TODO(burdon): Reconcile with @dxos/plugin-debug, @dxos/react-ui/testing.\n\n// TODO(burdon): Bug when adding stale objects to space (e.g., static objects already added in previous story invocation).\n\n// TODO(burdon): Util.\nexport const range = <T>(fn: (i: number) => T | undefined, length: number): T[] =>\n  Array.from({ length })\n    .map((_, i) => fn(i))\n    .filter(Boolean) as T[];\n\n// TODO(burdon): Commit to using ECHO to generate all test data? Or convert from raw data?\nexport type TestItem = { id: string; type: string } & Record<string, any>;\n\ntype ObjectDataGenerator = {\n  createSchema?: () => S.Schema<any>;\n  createData: () => any;\n};\n\ntype ObjectFactory<T extends ReactiveObject<any>> = {\n  schema?: S.Schema<any>; // TODO(burdon): Support both typed and expando schema.\n  createObject: () => T;\n};\n\ntype ObjectFactoryMap = { [type: string]: ObjectFactory<any> };\n\nconst createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {\n  const schema = createSchema?.();\n  return {\n    schema,\n    createObject: () => (schema ? create(schema, createData()) : create(createData())),\n  };\n};\n\n// TODO(burdon): Handle restricted values.\nexport const Status = ['pending', 'active', 'done'];\nexport const Priority = [1, 2, 3, 4, 5];\n\nexport const defaultGenerators: { [type: string]: ObjectDataGenerator } = {\n  document: {\n    createData: () => ({\n      title: faker.lorem.sentence(3),\n      body: faker.lorem.sentences({ min: 1, max: faker.number.int({ min: 1, max: 3 }) }),\n    }),\n  },\n\n  image: {\n    createData: () => ({\n      title: faker.lorem.sentence(3),\n      image: faker.helpers.arrayElement(data.images),\n      body: faker.datatype.boolean() ? faker.lorem.sentences() : undefined,\n    }),\n  },\n\n  project: {\n    createSchema: () =>\n      S.Struct({\n        title: S.String,\n        repo: S.String,\n        status: S.String,\n        priority: S.Number,\n      }),\n    createData: () => ({\n      title: faker.commerce.productName(),\n      repo: faker.datatype.boolean({ probability: 0.3 }) ? faker.internet.url() : undefined,\n      status: faker.helpers.arrayElement(Status),\n      priority: faker.helpers.arrayElement(Priority),\n    }),\n  },\n};\n\n/**\n * Typed object generator.\n * @deprecated\n */\n// TODO(wittjosiah): Remove.\nexport class TestObjectGenerator {\n  public readonly factories: ObjectFactoryMap;\n\n  constructor({ types, factories }: { types?: string[]; factories?: ObjectFactoryMap } = {}) {\n    this.factories =\n      factories ??\n      (types ?? Object.keys(defaultGenerators)).reduce<ObjectFactoryMap>((acc, type) => {\n        acc[type] = createFactory(defaultGenerators[type]);\n        return acc;\n      }, {});\n  }\n\n  get schema(): S.Schema<any>[] {\n    return Object.values(this.factories).map((f) => f.schema!);\n  }\n\n  createObject({ types }: { types?: string[] } = {}) {\n    const type = faker.helpers.arrayElement(types ?? Object.keys(this.factories));\n    const factory = this.factories[type];\n    return factory?.createObject();\n  }\n\n  createObjects({ types, length }: { types?: string[]; length: number }) {\n    return range(() => this.createObject({ types }), length);\n  }\n}\n\n// https://unsplash.com\n// TODO(burdon): Use https://picsum.photos?\nconst data = {\n  images: [\n    '/images/image-1.png',\n    '/images/image-2.png',\n    '/images/image-3.png',\n    '/images/image-4.png',\n    '/images/image-5.png',\n    '/images/image-6.png',\n  ],\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type { Locator, Page } from '@playwright/test';\n\nexport class StackManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  empty() {\n    return this.locator.getByTestId('stack.empty');\n  }\n\n  sections() {\n    return this.locator.locator('li');\n  }\n\n  order() {\n    return this.locator.locator('li').evaluateAll((els) => els.map((el) => el.getAttribute('id')));\n  }\n\n  section(index: number) {\n    return new SectionManager(this.locator.locator('li').nth(index));\n  }\n}\n\nexport class SectionManager {\n  private readonly _page: Page;\n\n  constructor(readonly locator: Locator) {\n    this._page = locator.page();\n  }\n\n  async id() {\n    return this.locator.getAttribute('id');\n  }\n\n  async remove() {\n    await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n    await this._page.getByTestId('section.remove').click();\n  }\n\n  async navigateTo() {\n    await this.locator.getByTestId('section.drag-handle-menu-trigger').click();\n    await this._page.getByTestId('section.navigate-to').click();\n  }\n\n  async dragTo(target: Locator, offset: { x: number; y: number } = { x: 0, y: 0 }) {\n    const active = this.locator.getByTestId('section.drag-handle-menu-trigger');\n    const box = await target.boundingBox();\n    if (box) {\n      await active.hover();\n      await this._page.mouse.down();\n      // Timeouts are for input discretization in WebKit\n      await this._page.waitForTimeout(100);\n      await this._page.pause();\n      await this._page.mouse.move(offset.x + box.x + box.width / 2, offset.y + box.y + box.height / 2, { steps: 4 });\n      await this._page.pause();\n      await this._page.waitForTimeout(100);\n      await this._page.mouse.up();\n    }\n  }\n}\n"],
-  "mappings": "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",
-  "names": ["create", "S", "faker", "range", "fn", "length", "Array", "from", "map", "_", "i", "filter", "Boolean", "createFactory", "createSchema", "createData", "schema", "createObject", "create", "Status", "Priority", "defaultGenerators", "document", "title", "faker", "lorem", "sentence", "body", "sentences", "min", "max", "number", "int", "image", "helpers", "arrayElement", "data", "images", "datatype", "boolean", "undefined", "project", "S", "Struct", "String", "repo", "status", "priority", "Number", "commerce", "productName", "probability", "internet", "url", "TestObjectGenerator", "constructor", "types", "factories", "Object", "keys", "reduce", "acc", "type", "values", "f", "factory", "createObjects", "StackManager", "constructor", "locator", "_page", "page", "empty", "getByTestId", "sections", "order", "evaluateAll", "els", "map", "el", "getAttribute", "section", "index", "SectionManager", "nth", "id", "remove", "click", "navigateTo", "dragTo", "target", "offset", "x", "y", "active", "box", "boundingBox", "hover", "mouse", "down", "waitForTimeout", "pause", "move", "width", "height", "steps", "up"]
-}

package/dist/types/src/next/Stack.d.ts

@@ -1,9 +0,0 @@
-import React, { type ComponentPropsWithoutRef } from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-type Orientation = 'horizontal' | 'vertical';
-export type StackProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
-    orientation?: Orientation;
-};
-export declare const Stack: ({ children, classNames, style, orientation, ...props }: StackProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=Stack.d.ts.map

package/dist/types/src/next/Stack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../../src/next/Stack.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAsB,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG;IACpG,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,KAAK,2DAA4D,UAAU,sBAcvF,CAAC"}

package/dist/types/src/next/Stack.stories.d.ts

@@ -1,8 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
-declare const StorybookStack: () => React.JSX.Element;
-declare const meta: Meta<typeof StorybookStack>;
-export default meta;
-type Story = StoryObj<typeof StorybookStack>;
-export declare const Default: Story;
-//# sourceMappingURL=Stack.stories.d.ts.map

package/dist/types/src/next/Stack.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/next/Stack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AA4BrD,QAAA,MAAM,cAAc,yBAgGnB,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,cAAc,CAKrC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/dist/types/src/next/StackItem.d.ts

@@ -1,14 +0,0 @@
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import React, { type ComponentPropsWithoutRef } from 'react';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { type StackProps } from './Stack';
-export type StackItemProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
-    item: {
-        id: string;
-        type: 'column' | 'card';
-    };
-    orientation?: StackProps['orientation'];
-    onReorder: (sourceId: string, targetId: string, closestEdge: Edge | null) => void;
-};
-export declare const StackItem: ({ item, children, classNames, orientation, onReorder, ...props }: StackItemProps) => React.JSX.Element;
-//# sourceMappingURL=StackItem.d.ts.map

package/dist/types/src/next/StackItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../../../src/next/StackItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,IAAI,EAEV,MAAM,uDAAuD,CAAC;AAE/D,OAAO,KAAK,EAAE,EAAoB,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,GAAG;IACxG,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAA;KAAE,CAAC;IAC9C,WAAW,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACnF,CAAC;AAEF,eAAO,MAAM,SAAS,qEAAsE,cAAc,sBAoDzG,CAAC"}

package/dist/types/src/next/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Stack';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/next/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC"}

package/src/next/Stack.stories.tsx

@@ -1,146 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useState, useCallback } from 'react';
-
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Stack } from './Stack';
-import { StackItem } from './StackItem';
-
-type CardItem = {
-  id: string;
-  type: 'card';
-  content: string;
-};
-
-type ColumnItem = {
-  id: string;
-  type: 'column';
-  title: string;
-  cards: CardItem[];
-};
-
-const KanbanBlock = ({ item }: { item: CardItem }) => {
-  return (
-    <div className='is-64 bs-24 bg-input rounded-lg border border-separator shadow-sm grid place-content-center'>
-      <span className='text-sm font-medium'>{item.content}</span>
-    </div>
-  );
-};
-
-const StorybookStack = () => {
-  const [columns, setColumns] = useState<ColumnItem[]>([
-    {
-      id: 'col-0',
-      type: 'column',
-      title: 'To Do',
-      cards: [
-        { id: 'banana', type: 'card', content: 'Banana' },
-        { id: 'pickle', type: 'card', content: 'Pickle' },
-        { id: 'wombat', type: 'card', content: 'Wombat' },
-        { id: 'kazoo', type: 'card', content: 'Kazoo' },
-      ],
-    },
-    {
-      id: 'col-1',
-      type: 'column',
-      title: 'In Progress',
-      cards: [
-        { id: 'noodle', type: 'card', content: 'Noodle' },
-        { id: 'squish', type: 'card', content: 'Squish' },
-        { id: 'wobble', type: 'card', content: 'Wobble' },
-        { id: 'floof', type: 'card', content: 'Floof' },
-      ],
-    },
-    {
-      id: 'col-2',
-      type: 'column',
-      title: 'Done',
-      cards: [
-        { id: 'snorkel', type: 'card', content: 'Snorkel' },
-        { id: 'bloop', type: 'card', content: 'Bloop' },
-        { id: 'wiggle', type: 'card', content: 'Wiggle' },
-        { id: 'zoop', type: 'card', content: 'Zoop' },
-      ],
-    },
-  ]);
-
-  const reorderItem = useCallback((sourceId: string, targetId: string, closestEdge: Edge | null) => {
-    setColumns((prevColumns) => {
-      const newColumns = [...prevColumns];
-      const sourceColumn = newColumns.find(
-        (col) => col.id === sourceId || col.cards.some((card) => card.id === sourceId),
-      );
-      const targetColumn = newColumns.find(
-        (col) => col.id === targetId || col.cards.some((card) => card.id === targetId),
-      );
-
-      if (sourceColumn && targetColumn) {
-        if (sourceId.startsWith('col-') && targetId.startsWith('col-')) {
-          // Reordering columns
-          const sourceIndex = newColumns.findIndex((col) => col.id === sourceId);
-          const targetIndex = newColumns.findIndex((col) => col.id === targetId);
-          const [movedColumn] = newColumns.splice(sourceIndex, 1);
-          const insertIndex = closestEdge === 'right' ? targetIndex + 1 : targetIndex;
-          newColumns.splice(insertIndex, 0, movedColumn);
-        } else {
-          // Reordering cards within a column
-          const sourceCardIndex = sourceColumn.cards.findIndex((card) => card.id === sourceId);
-          const targetCardIndex = targetColumn.cards.findIndex((card) => card.id === targetId);
-          const [movedCard] = sourceColumn.cards.splice(sourceCardIndex, 1);
-
-          let insertIndex;
-          if (sourceColumn === targetColumn && sourceCardIndex < targetCardIndex) {
-            insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
-          } else {
-            insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
-          }
-          targetColumn.cards.splice(insertIndex, 0, movedCard);
-        }
-      }
-
-      return newColumns;
-    });
-  }, []);
-
-  return (
-    <Stack orientation={'horizontal'} classNames='gap-1'>
-      {columns.map((column) => (
-        <StackItem
-          key={column.id}
-          item={column}
-          orientation={'horizontal'}
-          classNames='p-4 bg-deck rounded-md'
-          onReorder={reorderItem}
-        >
-          <Stack orientation={'vertical'} classNames='gap-1'>
-            {column.cards.map((card) => (
-              <StackItem key={card.id} item={card} orientation={'vertical'} onReorder={reorderItem}>
-                <KanbanBlock item={card} />
-              </StackItem>
-            ))}
-          </Stack>
-        </StackItem>
-      ))}
-    </Stack>
-  );
-};
-
-const meta: Meta<typeof StorybookStack> = {
-  title: 'react-ui-stack-next/Stack',
-  component: StorybookStack,
-  decorators: [withTheme],
-  argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof StorybookStack>;
-
-export const Default: Story = {
-  args: { orientation: 'horizontal' },
-};

package/src/next/Stack.tsx

@@ -1,30 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { type CSSProperties, type ComponentPropsWithoutRef } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-type Orientation = 'horizontal' | 'vertical';
-
-export type StackProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
-  orientation?: Orientation;
-};
-
-export const Stack = ({ children, classNames, style, orientation, ...props }: StackProps) => {
-  const childrenCount = React.Children.count(children);
-
-  const styles: CSSProperties = {
-    [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:
-      `repeat(${childrenCount}, min-content)`,
-    ...style,
-  };
-
-  return (
-    <div className={mx('grid relative', classNames)} aria-orientation={orientation} style={styles} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/next/StackItem.tsx

@@ -1,78 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import {
-  attachClosestEdge,
-  type Edge,
-  extractClosestEdge,
-} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
-import React, { useRef, useState, type ComponentPropsWithoutRef } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { type StackProps } from './Stack';
-
-export type StackItemProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
-  item: { id: string; type: 'column' | 'card' };
-  orientation?: StackProps['orientation'];
-  onReorder: (sourceId: string, targetId: string, closestEdge: Edge | null) => void;
-};
-
-export const StackItem = ({ item, children, classNames, orientation, onReorder, ...props }: StackItemProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [closestEdge, setEdge] = useState<Edge | null>(null);
-
-  React.useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    const element = ref.current;
-
-    return combine(
-      draggable({ element, getInitialData: () => ({ id: item.id, type: item.type }) }),
-      dropTargetForElements({
-        element,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id: item.id, type: item.type },
-            { input, element, allowedEdges: orientation === 'vertical' ? ['top', 'bottom'] : ['left', 'right'] },
-          );
-        },
-        onDragEnter: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge(extractClosestEdge(self.data));
-          }
-        },
-        onDrag: ({ self, source }) => {
-          if (source.data.type === self.data.type) {
-            setEdge(extractClosestEdge(self.data));
-          }
-        },
-        onDragLeave: () => setEdge(null),
-        onDrop: ({ self, source }) => {
-          setEdge(null);
-          if (source.data.type === self.data.type) {
-            onReorder(source.data.id as string, self.data.id as string, extractClosestEdge(self.data));
-          }
-        },
-      }),
-    );
-  }, [orientation, item, onReorder]);
-
-  return (
-    <div
-      ref={ref}
-      className={mx('relative', orientation === 'horizontal' ? 'grid-cols-subgrid' : 'grid-rows-subgrid', classNames)}
-      {...props}
-    >
-      {children}
-      {closestEdge && <DropIndicator edge={closestEdge} />}
-    </div>
-  );
-};

package/src/next/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './Stack';