@dxos/react-ui-stack 0.6.12-main.15a606f → 0.6.12-main.2d19bf1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +9 -8
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/testing/index.mjs +1 -1
- package/dist/lib/browser/testing/index.mjs.map +3 -3
- package/dist/lib/node/index.cjs +7 -6
- package/dist/lib/node/index.cjs.map +3 -3
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node/testing/index.cjs.map +2 -2
- package/dist/lib/node-esm/index.mjs +9 -8
- package/dist/lib/node-esm/index.mjs.map +3 -3
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/testing/index.mjs +1 -1
- package/dist/lib/node-esm/testing/index.mjs.map +3 -3
- package/dist/types/src/components/Section.d.ts +2 -3
- package/dist/types/src/components/Section.d.ts.map +1 -1
- package/dist/types/src/next/Stack.d.ts +9 -0
- package/dist/types/src/next/Stack.d.ts.map +1 -0
- package/dist/types/src/next/Stack.stories.d.ts +8 -0
- package/dist/types/src/next/Stack.stories.d.ts.map +1 -0
- package/dist/types/src/next/StackItem.d.ts +14 -0
- package/dist/types/src/next/StackItem.d.ts.map +1 -0
- package/dist/types/src/next/index.d.ts +2 -0
- package/dist/types/src/next/index.d.ts.map +1 -0
- package/dist/types/src/testing/generator.d.ts +1 -1
- package/dist/types/src/testing/generator.d.ts.map +1 -1
- package/package.json +21 -17
- package/src/components/Deck.stories.tsx +10 -10
- package/src/components/Section.tsx +9 -18
- package/src/next/Stack.stories.tsx +146 -0
- package/src/next/Stack.tsx +30 -0
- package/src/next/StackItem.tsx +78 -0
- package/src/next/index.ts +5 -0
- package/src/playwright/smoke.spec.ts +2 -2
- package/src/testing/generator.ts +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytes":3080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytes":707,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/translations.ts":{"bytes":2050,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytes":3080,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytes":707,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/translations.ts":{"bytes":2050,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytes":39706,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-deck","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx","kind":"import-statement","original":"./CaretDownUp"},{"path":"packages/ui/react-ui-stack/src/components/style-fragments.ts","kind":"import-statement","original":"./style-fragments"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytes":16626,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-stack/src/components/Section.tsx","kind":"import-statement","original":"./Section"},{"path":"packages/ui/react-ui-stack/src/components/style-fragments.ts","kind":"import-statement","original":"./style-fragments"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/components/index.ts":{"bytes":832,"imports":[{"path":"packages/ui/react-ui-stack/src/components/Stack.tsx","kind":"import-statement","original":"./Stack"},{"path":"packages/ui/react-ui-stack/src/components/Section.tsx","kind":"import-statement","original":"./Section"}],"format":"esm"},"packages/ui/react-ui-stack/src/index.ts":{"bytes":718,"imports":[{"path":"packages/ui/react-ui-stack/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-stack/src/translations.ts","kind":"import-statement","original":"./translations"}],"format":"esm"},"packages/ui/react-ui-stack/src/testing/generator.ts":{"bytes":12336,"imports":[{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/random","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytes":7412,"imports":[],"format":"esm"},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytes":612,"imports":[{"path":"packages/ui/react-ui-stack/src/testing/generator.ts","kind":"import-statement","original":"./generator"},{"path":"packages/ui/react-ui-stack/src/testing/stack-manager.ts","kind":"import-statement","original":"./stack-manager"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":33619},"packages/ui/react-ui-stack/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"@radix-ui/react-collapsible","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-attention","kind":"import-statement","external":true},{"path":"@dxos/react-ui-deck","kind":"import-statement","external":true},{"path":"@dxos/react-ui-mosaic","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["DEFAULT_TYPE","SectionToolbar","Stack","sectionToolbarLayout","translations"],"entryPoint":"packages/ui/react-ui-stack/src/index.ts","inputs":{"packages/ui/react-ui-stack/src/components/Stack.tsx":{"bytesInOutput":3542},"packages/ui/react-ui-stack/src/components/Section.tsx":{"bytesInOutput":10044},"packages/ui/react-ui-stack/src/components/CaretDownUp.tsx":{"bytesInOutput":779},"packages/ui/react-ui-stack/src/components/style-fragments.ts":{"bytesInOutput":79},"packages/ui/react-ui-stack/src/translations.ts":{"bytesInOutput":508},"packages/ui/react-ui-stack/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-stack/src/index.ts":{"bytesInOutput":0}},"bytes":15603},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":9965},"packages/ui/react-ui-stack/dist/lib/node-esm/testing/index.mjs":{"imports":[{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/random","kind":"import-statement","external":true}],"exports":["Priority","SectionManager","StackManager","Status","TestObjectGenerator","defaultGenerators","range"],"entryPoint":"packages/ui/react-ui-stack/src/testing/index.ts","inputs":{"packages/ui/react-ui-stack/src/testing/generator.ts":{"bytesInOutput":2244},"packages/ui/react-ui-stack/src/testing/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-stack/src/testing/stack-manager.ts":{"bytesInOutput":1569}},"bytes":4176}}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
3
|
// packages/ui/react-ui-stack/src/testing/generator.ts
|
|
4
|
-
import {
|
|
4
|
+
import { create, S } from "@dxos/echo-schema";
|
|
5
5
|
import { faker } from "@dxos/random";
|
|
6
6
|
var range = (fn, length) => Array.from({
|
|
7
7
|
length
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/testing/generator.ts", "../../../../src/testing/stack-manager.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\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\
|
|
5
|
-
"mappings": ";;;
|
|
6
|
-
"names": ["
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { create, type EchoReactiveObject, 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 EchoReactiveObject<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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { type IconProps } from '@phosphor-icons/react';
|
|
2
1
|
import React, { type ForwardRefExoticComponent, type RefAttributes, type FC, type PropsWithChildren, type ComponentPropsWithRef } from 'react';
|
|
3
2
|
import { type Label, type ThemedClassName } from '@dxos/react-ui';
|
|
4
3
|
import { type MosaicActiveType, type MosaicDataItem, type MosaicTileComponent, type MosaicTileProps } from '@dxos/react-ui-mosaic';
|
|
@@ -30,13 +29,13 @@ export type StackSectionItem = MosaicDataItem & {
|
|
|
30
29
|
custom?: Record<string, any>;
|
|
31
30
|
};
|
|
32
31
|
metadata?: {
|
|
33
|
-
icon?:
|
|
32
|
+
icon?: string;
|
|
34
33
|
placeholder?: Label;
|
|
35
34
|
viewActions?: (item: StackSectionItem) => StackAction;
|
|
36
35
|
};
|
|
37
36
|
};
|
|
38
37
|
export type StackAction = {
|
|
39
|
-
icon:
|
|
38
|
+
icon: string;
|
|
40
39
|
label: Label;
|
|
41
40
|
onClick: () => void;
|
|
42
41
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../../src/components/Section.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { type ThemedClassName } from '@dxos/react-ui';
|
|
3
|
+
type Orientation = 'horizontal' | 'vertical';
|
|
4
|
+
export type StackProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
|
|
5
|
+
orientation?: Orientation;
|
|
6
|
+
};
|
|
7
|
+
export declare const Stack: ({ children, classNames, style, orientation, ...props }: StackProps) => React.JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=Stack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type Meta, type StoryObj } from '@storybook/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
declare const StorybookStack: () => React.JSX.Element;
|
|
4
|
+
declare const meta: Meta<typeof StorybookStack>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<typeof StorybookStack>;
|
|
7
|
+
export declare const Default: Story;
|
|
8
|
+
//# sourceMappingURL=Stack.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
2
|
+
import React, { type ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import { type ThemedClassName } from '@dxos/react-ui';
|
|
4
|
+
import { type StackProps } from './Stack';
|
|
5
|
+
export type StackItemProps = Omit<ThemedClassName<ComponentPropsWithoutRef<'div'>>, 'aria-orientation'> & {
|
|
6
|
+
item: {
|
|
7
|
+
id: string;
|
|
8
|
+
type: 'column' | 'card';
|
|
9
|
+
};
|
|
10
|
+
orientation?: StackProps['orientation'];
|
|
11
|
+
onReorder: (sourceId: string, targetId: string, closestEdge: Edge | null) => void;
|
|
12
|
+
};
|
|
13
|
+
export declare const StackItem: ({ item, children, classNames, orientation, onReorder, ...props }: StackItemProps) => React.JSX.Element;
|
|
14
|
+
//# sourceMappingURL=StackItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/next/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../../../../src/testing/generator.ts"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,kBAAkB,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAQvE,eAAO,MAAM,KAAK,GAAI,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS,UAAU,MAAM,KAAG,CAAC,EAGlD,CAAC;AAG5B,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE1E,KAAK,mBAAmB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACnC,UAAU,EAAE,MAAM,GAAG,CAAC;CACvB,CAAC;AAEF,KAAK,aAAa,CAAC,CAAC,SAAS,kBAAkB,CAAC,GAAG,CAAC,IAAI;IACtD,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC,CAAC;CACvB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAA;CAAE,CAAC;AAW/D,eAAO,MAAM,MAAM,UAAgC,CAAC;AACpD,eAAO,MAAM,QAAQ,UAAkB,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE;IAAE,CAAC,IAAI,EAAE,MAAM,GAAG,mBAAmB,CAAA;CA+BpE,CAAC;AAEF;;;GAGG;AAEH,qBAAa,mBAAmB;IAC9B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;gBAEhC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,SAAS,CAAC,EAAE,gBAAgB,CAAA;KAAO;IASzF,IAAI,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAE5B;IAED,YAAY,CAAC,EAAE,KAAK,EAAE,GAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;KAAO;IAMjD,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;CAGtE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-stack",
|
|
3
|
-
"version": "0.6.12-main.
|
|
3
|
+
"version": "0.6.12-main.2d19bf1",
|
|
4
4
|
"description": "A stack component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -37,6 +37,10 @@
|
|
|
37
37
|
"src"
|
|
38
38
|
],
|
|
39
39
|
"dependencies": {
|
|
40
|
+
"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
|
|
41
|
+
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
|
|
42
|
+
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
|
|
43
|
+
"@effect/schema": "^0.75.1",
|
|
40
44
|
"@fluentui/react-tabster": "^9.19.0",
|
|
41
45
|
"@radix-ui/primitive": "^1.0.0",
|
|
42
46
|
"@radix-ui/react-collapsible": "^1.0.2",
|
|
@@ -45,11 +49,12 @@
|
|
|
45
49
|
"@radix-ui/react-menu": "^2.0.6",
|
|
46
50
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
47
51
|
"react-resize-detector": "^11.0.1",
|
|
48
|
-
"@dxos/react-ui": "0.6.12-main.
|
|
49
|
-
"@dxos/
|
|
50
|
-
"@dxos/react-ui-attention": "0.6.12-main.
|
|
51
|
-
"@dxos/react-ui-
|
|
52
|
-
"@dxos/react-ui-
|
|
52
|
+
"@dxos/react-ui": "0.6.12-main.2d19bf1",
|
|
53
|
+
"@dxos/echo-schema": "0.6.12-main.2d19bf1",
|
|
54
|
+
"@dxos/react-ui-attention": "0.6.12-main.2d19bf1",
|
|
55
|
+
"@dxos/react-ui-mosaic": "0.6.12-main.2d19bf1",
|
|
56
|
+
"@dxos/react-ui-deck": "0.6.12-main.2d19bf1",
|
|
57
|
+
"@dxos/react-ui-theme": "0.6.12-main.2d19bf1"
|
|
53
58
|
},
|
|
54
59
|
"devDependencies": {
|
|
55
60
|
"@phosphor-icons/react": "^2.1.5",
|
|
@@ -58,22 +63,21 @@
|
|
|
58
63
|
"react": "~18.2.0",
|
|
59
64
|
"react-dom": "~18.2.0",
|
|
60
65
|
"vite": "5.4.7",
|
|
61
|
-
"@dxos/
|
|
62
|
-
"@dxos/
|
|
63
|
-
"@dxos/
|
|
64
|
-
"@dxos/
|
|
65
|
-
"@dxos/
|
|
66
|
-
"@dxos/
|
|
67
|
-
"@dxos/
|
|
68
|
-
"@dxos/
|
|
66
|
+
"@dxos/echo-schema": "0.6.12-main.2d19bf1",
|
|
67
|
+
"@dxos/random": "0.6.12-main.2d19bf1",
|
|
68
|
+
"@dxos/client": "0.6.12-main.2d19bf1",
|
|
69
|
+
"@dxos/react-ui-editor": "0.6.12-main.2d19bf1",
|
|
70
|
+
"@dxos/react-ui-table": "0.6.12-main.2d19bf1",
|
|
71
|
+
"@dxos/storybook-utils": "0.6.12-main.2d19bf1",
|
|
72
|
+
"@dxos/util": "0.6.12-main.2d19bf1",
|
|
73
|
+
"@dxos/test-utils": "0.6.12-main.2d19bf1"
|
|
69
74
|
},
|
|
70
75
|
"peerDependencies": {
|
|
71
76
|
"@phosphor-icons/react": "^2.1.5",
|
|
72
77
|
"react": "~18.2.0",
|
|
73
78
|
"react-dom": "~18.2.0",
|
|
74
|
-
"@dxos/
|
|
75
|
-
"@dxos/client": "0.6.12-main.
|
|
76
|
-
"@dxos/random": "0.6.12-main.15a606f"
|
|
79
|
+
"@dxos/random": "0.6.12-main.2d19bf1",
|
|
80
|
+
"@dxos/client": "0.6.12-main.2d19bf1"
|
|
77
81
|
},
|
|
78
82
|
"publishConfig": {
|
|
79
83
|
"access": "public"
|
|
@@ -9,7 +9,7 @@ import React, { type PropsWithChildren, useState, type ComponentProps } from 're
|
|
|
9
9
|
|
|
10
10
|
import { faker } from '@dxos/random';
|
|
11
11
|
import { Button, Icon, Main } from '@dxos/react-ui';
|
|
12
|
-
import {
|
|
12
|
+
import { RootAttentionProvider } from '@dxos/react-ui-attention';
|
|
13
13
|
import { PlankHeading, Deck as NaturalDeck, Plank } from '@dxos/react-ui-deck';
|
|
14
14
|
import { Mosaic, type MosaicDataItem } from '@dxos/react-ui-mosaic';
|
|
15
15
|
import { withTheme } from '@dxos/storybook-utils';
|
|
@@ -102,10 +102,10 @@ export default {
|
|
|
102
102
|
export const StaticBasicStacks = {
|
|
103
103
|
args: {},
|
|
104
104
|
render: () => {
|
|
105
|
-
const [
|
|
105
|
+
const [attention] = useState({ attended: [] });
|
|
106
106
|
return (
|
|
107
107
|
<Mosaic.Root>
|
|
108
|
-
<
|
|
108
|
+
<RootAttentionProvider attention={attention}>
|
|
109
109
|
<Mosaic.DragOverlay />
|
|
110
110
|
<NaturalDeck.Root classNames='fixed inset-0 z-0'>
|
|
111
111
|
<DemoStackPlank />
|
|
@@ -116,7 +116,7 @@ export const StaticBasicStacks = {
|
|
|
116
116
|
<DemoStackPlank />
|
|
117
117
|
<DemoStackPlank />
|
|
118
118
|
</NaturalDeck.Root>
|
|
119
|
-
</
|
|
119
|
+
</RootAttentionProvider>
|
|
120
120
|
</Mosaic.Root>
|
|
121
121
|
);
|
|
122
122
|
},
|
|
@@ -125,10 +125,10 @@ export const StaticBasicStacks = {
|
|
|
125
125
|
export const StaticBasicStacksWithOverscrolling = {
|
|
126
126
|
args: {},
|
|
127
127
|
render: () => {
|
|
128
|
-
const [
|
|
128
|
+
const [attention] = useState({ attended: [] });
|
|
129
129
|
return (
|
|
130
130
|
<Mosaic.Root>
|
|
131
|
-
<
|
|
131
|
+
<RootAttentionProvider attention={attention}>
|
|
132
132
|
<Mosaic.DragOverlay />
|
|
133
133
|
<NaturalDeck.Root classNames='fixed inset-0 z-0'>
|
|
134
134
|
<DemoStackPlank />
|
|
@@ -139,7 +139,7 @@ export const StaticBasicStacksWithOverscrolling = {
|
|
|
139
139
|
<DemoStackPlank />
|
|
140
140
|
<DemoStackPlank />
|
|
141
141
|
</NaturalDeck.Root>
|
|
142
|
-
</
|
|
142
|
+
</RootAttentionProvider>
|
|
143
143
|
</Mosaic.Root>
|
|
144
144
|
);
|
|
145
145
|
},
|
|
@@ -195,7 +195,7 @@ export const DynamicBasicStacks = () => {
|
|
|
195
195
|
return acc;
|
|
196
196
|
}, {}),
|
|
197
197
|
);
|
|
198
|
-
const [
|
|
198
|
+
const [attention] = useState({ attended: [] });
|
|
199
199
|
|
|
200
200
|
const [navOpen, setNavOpen] = useState(true);
|
|
201
201
|
const [c11yOpen, setC11yOpen] = useState(false);
|
|
@@ -285,7 +285,7 @@ export const DynamicBasicStacks = () => {
|
|
|
285
285
|
|
|
286
286
|
return (
|
|
287
287
|
<Mosaic.Root>
|
|
288
|
-
<
|
|
288
|
+
<RootAttentionProvider attention={attention}>
|
|
289
289
|
<Main.Root complementarySidebarOpen={c11yOpen} navigationSidebarOpen={navOpen}>
|
|
290
290
|
<Main.Overlay />
|
|
291
291
|
<Mosaic.DragOverlay />
|
|
@@ -359,7 +359,7 @@ export const DynamicBasicStacks = () => {
|
|
|
359
359
|
)}
|
|
360
360
|
</NaturalDeck.Root>
|
|
361
361
|
</Main.Root>
|
|
362
|
-
</
|
|
362
|
+
</RootAttentionProvider>
|
|
363
363
|
</Mosaic.Root>
|
|
364
364
|
);
|
|
365
365
|
};
|
|
@@ -3,15 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { useFocusableGroup, useTabsterAttributes } from '@fluentui/react-tabster';
|
|
6
|
-
import {
|
|
7
|
-
ArrowLineDown,
|
|
8
|
-
ArrowLineUp,
|
|
9
|
-
ArrowSquareOut,
|
|
10
|
-
CaretUpDown,
|
|
11
|
-
DotsNine,
|
|
12
|
-
type IconProps,
|
|
13
|
-
Trash,
|
|
14
|
-
} from '@phosphor-icons/react';
|
|
6
|
+
import { ArrowLineDown, ArrowLineUp, ArrowSquareOut, CaretUpDown, Trash } from '@phosphor-icons/react';
|
|
15
7
|
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
16
8
|
import React, {
|
|
17
9
|
forwardRef,
|
|
@@ -26,6 +18,7 @@ import React, {
|
|
|
26
18
|
import {
|
|
27
19
|
Button,
|
|
28
20
|
DropdownMenu,
|
|
21
|
+
Icon,
|
|
29
22
|
type Label,
|
|
30
23
|
List,
|
|
31
24
|
ListItem,
|
|
@@ -35,7 +28,7 @@ import {
|
|
|
35
28
|
toLocalizedString,
|
|
36
29
|
useTranslation,
|
|
37
30
|
} from '@dxos/react-ui';
|
|
38
|
-
import {
|
|
31
|
+
import { useAttendableAttributes } from '@dxos/react-ui-attention';
|
|
39
32
|
import { DropDownMenuDragHandleTrigger, resizeHandle, resizeHandleHorizontal } from '@dxos/react-ui-deck';
|
|
40
33
|
import {
|
|
41
34
|
type MosaicActiveType,
|
|
@@ -92,14 +85,14 @@ export type StackSectionItem = MosaicDataItem & {
|
|
|
92
85
|
};
|
|
93
86
|
// TODO(wittjosiah): Common type? Factor out?
|
|
94
87
|
metadata?: {
|
|
95
|
-
icon?:
|
|
88
|
+
icon?: string;
|
|
96
89
|
placeholder?: Label;
|
|
97
90
|
viewActions?: (item: StackSectionItem) => StackAction;
|
|
98
91
|
};
|
|
99
92
|
};
|
|
100
93
|
|
|
101
94
|
export type StackAction = {
|
|
102
|
-
icon:
|
|
95
|
+
icon: string;
|
|
103
96
|
label: Label;
|
|
104
97
|
onClick: () => void;
|
|
105
98
|
};
|
|
@@ -133,7 +126,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
133
126
|
{
|
|
134
127
|
id,
|
|
135
128
|
title,
|
|
136
|
-
icon
|
|
129
|
+
icon = 'ph--placeholder--regular',
|
|
137
130
|
size = 'intrinsic',
|
|
138
131
|
collapsed,
|
|
139
132
|
active,
|
|
@@ -157,8 +150,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
157
150
|
mover: { cyclic: true, direction: 1, memorizeCurrent: false },
|
|
158
151
|
});
|
|
159
152
|
const sectionContentGroup = useFocusableGroup({});
|
|
160
|
-
const attendableAttrs =
|
|
161
|
-
const hasAttention = useHasAttention(id);
|
|
153
|
+
const attendableAttrs = useAttendableAttributes(id);
|
|
162
154
|
|
|
163
155
|
return (
|
|
164
156
|
<CollapsiblePrimitive.Root
|
|
@@ -180,10 +172,9 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
180
172
|
role='none'
|
|
181
173
|
className={mx(
|
|
182
174
|
'grid col-span-2 grid-cols-subgrid',
|
|
183
|
-
'bg-base
|
|
175
|
+
'bg-base attention-surface',
|
|
184
176
|
hoverableControls,
|
|
185
177
|
hoverableFocusedWithinControls,
|
|
186
|
-
(active || hasAttention) && 'attention-surface border-separator',
|
|
187
178
|
(active === 'origin' || active === 'rearrange' || active === 'destination') && 'opacity-0',
|
|
188
179
|
)}
|
|
189
180
|
>
|
|
@@ -206,7 +197,7 @@ export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTM
|
|
|
206
197
|
}}
|
|
207
198
|
>
|
|
208
199
|
<DropDownMenuDragHandleTrigger active={!!active} variant='ghost' classNames='m-0' {...draggableProps}>
|
|
209
|
-
<Icon
|
|
200
|
+
<Icon icon={icon} size={5} classNames='transition-opacity' />
|
|
210
201
|
</DropDownMenuDragHandleTrigger>
|
|
211
202
|
<DropdownMenu.Portal>
|
|
212
203
|
<DropdownMenu.Content>
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
6
|
+
import { type Meta, type StoryObj } from '@storybook/react';
|
|
7
|
+
import React, { useState, useCallback } from 'react';
|
|
8
|
+
|
|
9
|
+
import { withTheme } from '@dxos/storybook-utils';
|
|
10
|
+
|
|
11
|
+
import { Stack } from './Stack';
|
|
12
|
+
import { StackItem } from './StackItem';
|
|
13
|
+
|
|
14
|
+
type CardItem = {
|
|
15
|
+
id: string;
|
|
16
|
+
type: 'card';
|
|
17
|
+
content: string;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
type ColumnItem = {
|
|
21
|
+
id: string;
|
|
22
|
+
type: 'column';
|
|
23
|
+
title: string;
|
|
24
|
+
cards: CardItem[];
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
const KanbanBlock = ({ item }: { item: CardItem }) => {
|
|
28
|
+
return (
|
|
29
|
+
<div className='is-64 bs-24 bg-input rounded-lg border border-separator shadow-sm grid place-content-center'>
|
|
30
|
+
<span className='text-sm font-medium'>{item.content}</span>
|
|
31
|
+
</div>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const StorybookStack = () => {
|
|
36
|
+
const [columns, setColumns] = useState<ColumnItem[]>([
|
|
37
|
+
{
|
|
38
|
+
id: 'col-0',
|
|
39
|
+
type: 'column',
|
|
40
|
+
title: 'To Do',
|
|
41
|
+
cards: [
|
|
42
|
+
{ id: 'banana', type: 'card', content: 'Banana' },
|
|
43
|
+
{ id: 'pickle', type: 'card', content: 'Pickle' },
|
|
44
|
+
{ id: 'wombat', type: 'card', content: 'Wombat' },
|
|
45
|
+
{ id: 'kazoo', type: 'card', content: 'Kazoo' },
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
id: 'col-1',
|
|
50
|
+
type: 'column',
|
|
51
|
+
title: 'In Progress',
|
|
52
|
+
cards: [
|
|
53
|
+
{ id: 'noodle', type: 'card', content: 'Noodle' },
|
|
54
|
+
{ id: 'squish', type: 'card', content: 'Squish' },
|
|
55
|
+
{ id: 'wobble', type: 'card', content: 'Wobble' },
|
|
56
|
+
{ id: 'floof', type: 'card', content: 'Floof' },
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
id: 'col-2',
|
|
61
|
+
type: 'column',
|
|
62
|
+
title: 'Done',
|
|
63
|
+
cards: [
|
|
64
|
+
{ id: 'snorkel', type: 'card', content: 'Snorkel' },
|
|
65
|
+
{ id: 'bloop', type: 'card', content: 'Bloop' },
|
|
66
|
+
{ id: 'wiggle', type: 'card', content: 'Wiggle' },
|
|
67
|
+
{ id: 'zoop', type: 'card', content: 'Zoop' },
|
|
68
|
+
],
|
|
69
|
+
},
|
|
70
|
+
]);
|
|
71
|
+
|
|
72
|
+
const reorderItem = useCallback((sourceId: string, targetId: string, closestEdge: Edge | null) => {
|
|
73
|
+
setColumns((prevColumns) => {
|
|
74
|
+
const newColumns = [...prevColumns];
|
|
75
|
+
const sourceColumn = newColumns.find(
|
|
76
|
+
(col) => col.id === sourceId || col.cards.some((card) => card.id === sourceId),
|
|
77
|
+
);
|
|
78
|
+
const targetColumn = newColumns.find(
|
|
79
|
+
(col) => col.id === targetId || col.cards.some((card) => card.id === targetId),
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
if (sourceColumn && targetColumn) {
|
|
83
|
+
if (sourceId.startsWith('col-') && targetId.startsWith('col-')) {
|
|
84
|
+
// Reordering columns
|
|
85
|
+
const sourceIndex = newColumns.findIndex((col) => col.id === sourceId);
|
|
86
|
+
const targetIndex = newColumns.findIndex((col) => col.id === targetId);
|
|
87
|
+
const [movedColumn] = newColumns.splice(sourceIndex, 1);
|
|
88
|
+
const insertIndex = closestEdge === 'right' ? targetIndex + 1 : targetIndex;
|
|
89
|
+
newColumns.splice(insertIndex, 0, movedColumn);
|
|
90
|
+
} else {
|
|
91
|
+
// Reordering cards within a column
|
|
92
|
+
const sourceCardIndex = sourceColumn.cards.findIndex((card) => card.id === sourceId);
|
|
93
|
+
const targetCardIndex = targetColumn.cards.findIndex((card) => card.id === targetId);
|
|
94
|
+
const [movedCard] = sourceColumn.cards.splice(sourceCardIndex, 1);
|
|
95
|
+
|
|
96
|
+
let insertIndex;
|
|
97
|
+
if (sourceColumn === targetColumn && sourceCardIndex < targetCardIndex) {
|
|
98
|
+
insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
|
|
99
|
+
} else {
|
|
100
|
+
insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
|
|
101
|
+
}
|
|
102
|
+
targetColumn.cards.splice(insertIndex, 0, movedCard);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return newColumns;
|
|
107
|
+
});
|
|
108
|
+
}, []);
|
|
109
|
+
|
|
110
|
+
return (
|
|
111
|
+
<Stack orientation={'horizontal'} classNames='gap-1'>
|
|
112
|
+
{columns.map((column) => (
|
|
113
|
+
<StackItem
|
|
114
|
+
key={column.id}
|
|
115
|
+
item={column}
|
|
116
|
+
orientation={'horizontal'}
|
|
117
|
+
classNames='p-4 bg-deck rounded-md'
|
|
118
|
+
onReorder={reorderItem}
|
|
119
|
+
>
|
|
120
|
+
<Stack orientation={'vertical'} classNames='gap-1'>
|
|
121
|
+
{column.cards.map((card) => (
|
|
122
|
+
<StackItem key={card.id} item={card} orientation={'vertical'} onReorder={reorderItem}>
|
|
123
|
+
<KanbanBlock item={card} />
|
|
124
|
+
</StackItem>
|
|
125
|
+
))}
|
|
126
|
+
</Stack>
|
|
127
|
+
</StackItem>
|
|
128
|
+
))}
|
|
129
|
+
</Stack>
|
|
130
|
+
);
|
|
131
|
+
};
|
|
132
|
+
|
|
133
|
+
const meta: Meta<typeof StorybookStack> = {
|
|
134
|
+
title: 'react-ui-stack-next/Stack',
|
|
135
|
+
component: StorybookStack,
|
|
136
|
+
decorators: [withTheme],
|
|
137
|
+
argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
export default meta;
|
|
141
|
+
|
|
142
|
+
type Story = StoryObj<typeof StorybookStack>;
|
|
143
|
+
|
|
144
|
+
export const Default: Story = {
|
|
145
|
+
args: { orientation: 'horizontal' },
|
|
146
|
+
};
|