@dxos/react-ui-stack 0.8.4-main.f9ba587 → 0.8.4-main.fcfe5033a5
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 +545 -1003
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/browser/{testing → playwright}/index.mjs +5 -1
- package/dist/lib/browser/{testing → playwright}/index.mjs.map +3 -3
- package/dist/lib/node-esm/index.mjs +545 -1003
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/lib/node-esm/{testing → playwright}/index.mjs +5 -1
- package/dist/lib/node-esm/{testing → playwright}/index.mjs.map +3 -3
- package/dist/types/src/components/Stack/Stack.d.ts +13 -10
- package/dist/types/src/components/Stack/Stack.d.ts.map +1 -1
- package/dist/types/src/components/Stack/Stack.stories.d.ts +12 -3
- package/dist/types/src/components/Stack/Stack.stories.d.ts.map +1 -1
- package/dist/types/src/components/StackContext.d.ts +2 -1
- package/dist/types/src/components/StackContext.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/MenuSignifier.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItem.d.ts +14 -17
- package/dist/types/src/components/StackItem/StackItem.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItem.stories.d.ts +13 -5
- package/dist/types/src/components/StackItem/StackItem.stories.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemContent.d.ts +4 -37
- package/dist/types/src/components/StackItem/StackItemContent.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemDragHandle.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemHeading.d.ts +2 -2
- package/dist/types/src/components/StackItem/StackItemHeading.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts +1 -1
- package/dist/types/src/components/StackItem/StackItemResizeHandle.d.ts.map +1 -1
- package/dist/types/src/components/StackItem/StackItemSigil.d.ts +2 -2
- package/dist/types/src/components/StackItem/StackItemSigil.d.ts.map +1 -1
- package/dist/types/src/components/index.d.ts +1 -1
- package/dist/types/src/components/index.d.ts.map +1 -1
- package/dist/types/src/components/{defs.d.ts → types.d.ts} +1 -1
- package/dist/types/src/components/types.d.ts.map +1 -0
- package/dist/types/src/hooks/useStackDropForElements.d.ts +9 -7
- package/dist/types/src/hooks/useStackDropForElements.d.ts.map +1 -1
- package/dist/types/src/index.d.ts +0 -1
- package/dist/types/src/index.d.ts.map +1 -1
- package/dist/types/src/playwright/index.d.ts.map +1 -0
- package/dist/types/src/playwright/stack-manager.d.ts.map +1 -0
- package/dist/types/src/translations.d.ts +10 -10
- package/dist/types/src/translations.d.ts.map +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +48 -39
- package/src/components/Stack/Stack.stories.tsx +15 -18
- package/src/components/Stack/Stack.tsx +239 -53
- package/src/components/StackContext.tsx +2 -1
- package/src/components/StackItem/MenuSignifier.tsx +2 -9
- package/src/components/StackItem/StackItem.stories.tsx +22 -18
- package/src/components/StackItem/StackItem.tsx +61 -43
- package/src/components/StackItem/StackItemContent.tsx +25 -44
- package/src/components/StackItem/StackItemDragHandle.tsx +4 -3
- package/src/components/StackItem/StackItemHeading.tsx +17 -20
- package/src/components/StackItem/StackItemResizeHandle.tsx +2 -2
- package/src/components/StackItem/StackItemSigil.tsx +10 -7
- package/src/components/index.ts +2 -1
- package/src/hooks/useStackDropForElements.ts +61 -47
- package/src/index.ts +0 -3
- package/src/{testing → playwright}/index.ts +1 -1
- package/src/playwright/playwright.config.ts +1 -1
- package/src/playwright/smoke.spec.ts +1 -1
- package/src/translations.ts +9 -9
- package/dist/types/src/components/defs.d.ts.map +0 -1
- package/dist/types/src/components/deprecated/LayoutControls.d.ts +0 -19
- package/dist/types/src/components/deprecated/LayoutControls.d.ts.map +0 -1
- package/dist/types/src/exemplars/Card/Card.d.ts +0 -57
- package/dist/types/src/exemplars/Card/Card.d.ts.map +0 -1
- package/dist/types/src/exemplars/Card/Card.stories.d.ts +0 -13
- package/dist/types/src/exemplars/Card/Card.stories.d.ts.map +0 -1
- package/dist/types/src/exemplars/Card/CardDragPreview.d.ts +0 -6
- package/dist/types/src/exemplars/Card/CardDragPreview.d.ts.map +0 -1
- package/dist/types/src/exemplars/Card/fragments.d.ts +0 -12
- package/dist/types/src/exemplars/Card/fragments.d.ts.map +0 -1
- package/dist/types/src/exemplars/Card/index.d.ts +0 -4
- package/dist/types/src/exemplars/Card/index.d.ts.map +0 -1
- package/dist/types/src/exemplars/CardStack/CardStack.d.ts +0 -40
- package/dist/types/src/exemplars/CardStack/CardStack.d.ts.map +0 -1
- package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts +0 -9
- package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts.map +0 -1
- package/dist/types/src/exemplars/CardStack/CardStackDragPreview.d.ts +0 -9
- package/dist/types/src/exemplars/CardStack/CardStackDragPreview.d.ts.map +0 -1
- package/dist/types/src/exemplars/CardStack/index.d.ts +0 -3
- package/dist/types/src/exemplars/CardStack/index.d.ts.map +0 -1
- package/dist/types/src/exemplars/index.d.ts +0 -3
- package/dist/types/src/exemplars/index.d.ts.map +0 -1
- package/dist/types/src/testing/index.d.ts.map +0 -1
- package/dist/types/src/testing/stack-manager.d.ts.map +0 -1
- package/src/components/deprecated/LayoutControls.tsx +0 -109
- package/src/exemplars/Card/Card.stories.tsx +0 -78
- package/src/exemplars/Card/Card.tsx +0 -167
- package/src/exemplars/Card/CardDragPreview.tsx +0 -22
- package/src/exemplars/Card/fragments.ts +0 -23
- package/src/exemplars/Card/index.ts +0 -7
- package/src/exemplars/CardStack/CardStack.stories.tsx +0 -172
- package/src/exemplars/CardStack/CardStack.tsx +0 -136
- package/src/exemplars/CardStack/CardStackDragPreview.tsx +0 -61
- package/src/exemplars/CardStack/index.ts +0 -6
- package/src/exemplars/index.ts +0 -6
- /package/dist/types/src/{testing → playwright}/index.d.ts +0 -0
- /package/dist/types/src/{testing → playwright}/stack-manager.d.ts +0 -0
- /package/src/components/{defs.ts → types.ts} +0 -0
- /package/src/{testing → playwright}/stack-manager.ts +0 -0
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
|
|
10
|
-
import { faker } from '@dxos/random';
|
|
11
|
-
import { withTheme } from '@dxos/storybook-utils';
|
|
12
|
-
|
|
13
|
-
import { Card } from './Card';
|
|
14
|
-
|
|
15
|
-
// Set a seed for reproducible random values
|
|
16
|
-
faker.seed(0);
|
|
17
|
-
|
|
18
|
-
type CardStoryProps = {
|
|
19
|
-
title: string;
|
|
20
|
-
description: string;
|
|
21
|
-
image: string;
|
|
22
|
-
showImage: boolean;
|
|
23
|
-
showIcon: boolean;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
const meta: Meta<CardStoryProps> = {
|
|
27
|
-
title: 'ui/react-ui-stack/Card',
|
|
28
|
-
decorators: [withTheme],
|
|
29
|
-
argTypes: {
|
|
30
|
-
title: {
|
|
31
|
-
control: 'text',
|
|
32
|
-
description: 'Card title',
|
|
33
|
-
},
|
|
34
|
-
description: {
|
|
35
|
-
control: 'text',
|
|
36
|
-
description: 'Card description',
|
|
37
|
-
},
|
|
38
|
-
image: {
|
|
39
|
-
control: 'text',
|
|
40
|
-
description: 'URL for the poster image',
|
|
41
|
-
},
|
|
42
|
-
showImage: {
|
|
43
|
-
control: 'boolean',
|
|
44
|
-
description: 'Whether to show the image',
|
|
45
|
-
},
|
|
46
|
-
showIcon: {
|
|
47
|
-
control: 'boolean',
|
|
48
|
-
description: 'Whether to show an icon (when image is not shown)',
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
args: {
|
|
52
|
-
title: faker.commerce.productName(),
|
|
53
|
-
description: faker.lorem.paragraph(),
|
|
54
|
-
image: faker.image.url(),
|
|
55
|
-
showImage: true,
|
|
56
|
-
showIcon: true,
|
|
57
|
-
},
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export default meta;
|
|
61
|
-
|
|
62
|
-
export const Default: StoryObj<CardStoryProps> = {
|
|
63
|
-
render: ({ title, description, image, showImage, showIcon }: CardStoryProps) => (
|
|
64
|
-
<div className='max-is-md'>
|
|
65
|
-
<Card.StaticRoot>
|
|
66
|
-
<Card.Toolbar>
|
|
67
|
-
<Card.DragHandle toolbarItem />
|
|
68
|
-
<Card.ToolbarSeparator variant='gap' />
|
|
69
|
-
<Card.ToolbarIconButton iconOnly variant='ghost' icon='ph--x--regular' label={'remove card label'} />
|
|
70
|
-
</Card.Toolbar>
|
|
71
|
-
{showImage && <Card.Poster alt={title} image={image} />}
|
|
72
|
-
{!showImage && showIcon && <Card.Poster alt={title} icon='ph--building-office--regular' />}
|
|
73
|
-
<Card.Heading>{title}</Card.Heading>
|
|
74
|
-
{description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
|
|
75
|
-
</Card.StaticRoot>
|
|
76
|
-
</div>
|
|
77
|
-
),
|
|
78
|
-
};
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { Primitive } from '@radix-ui/react-primitive';
|
|
6
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
7
|
-
import React, {
|
|
8
|
-
type ComponentPropsWithoutRef,
|
|
9
|
-
type ComponentPropsWithRef,
|
|
10
|
-
type FC,
|
|
11
|
-
forwardRef,
|
|
12
|
-
type PropsWithChildren,
|
|
13
|
-
} from 'react';
|
|
14
|
-
|
|
15
|
-
import { Icon, IconButton, type ThemedClassName, Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
|
|
16
|
-
import { hoverableControls, mx } from '@dxos/react-ui-theme';
|
|
17
|
-
|
|
18
|
-
import { cardChrome, cardRoot, cardHeading, cardText, cardSpacing } from './fragments';
|
|
19
|
-
import { StackItem } from '../../components';
|
|
20
|
-
import { translationKey } from '../../translations';
|
|
21
|
-
|
|
22
|
-
type SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
|
|
23
|
-
|
|
24
|
-
const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(
|
|
25
|
-
({ children, classNames, asChild, role = 'group', ...props }, forwardedRef) => {
|
|
26
|
-
const Root = asChild ? Slot : 'div';
|
|
27
|
-
const rootProps = asChild ? { classNames: [cardRoot, classNames] } : { className: mx(cardRoot, classNames), role };
|
|
28
|
-
return (
|
|
29
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
30
|
-
{children}
|
|
31
|
-
</Root>
|
|
32
|
-
);
|
|
33
|
-
},
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* This should be used by Surface fulfillments in cases where the content may or may not already be encapsulated (e.g.
|
|
38
|
-
* in a Popover) and knows this based on the `role` it receives. This will render a `Card.StaticRoot` by default, otherwise
|
|
39
|
-
* it will render a `div` primitive with the appropriate styling for specific handled situations.
|
|
40
|
-
*/
|
|
41
|
-
const CardSurfaceRoot = ({ role = 'never', children }: PropsWithChildren<{ role?: string }>) => {
|
|
42
|
-
if (['popover', 'card--kanban'].includes(role)) {
|
|
43
|
-
return (
|
|
44
|
-
<div className={role === 'popover' ? 'popover-card-width' : role === 'card--kanban' ? 'contents' : ''}>
|
|
45
|
-
{children}
|
|
46
|
-
</div>
|
|
47
|
-
);
|
|
48
|
-
} else {
|
|
49
|
-
return (
|
|
50
|
-
<CardStaticRoot {...(role === 'card--document' && { classNames: ['mlb-[1em]', hoverableControls] })}>
|
|
51
|
-
{children}
|
|
52
|
-
</CardStaticRoot>
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const CardHeading = forwardRef<HTMLDivElement, SharedCardProps>(
|
|
58
|
-
({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
|
|
59
|
-
const Root = asChild ? Slot : 'div';
|
|
60
|
-
const rootProps = asChild
|
|
61
|
-
? { classNames: [cardHeading, cardText, classNames] }
|
|
62
|
-
: { className: mx(cardHeading, cardText, classNames), role };
|
|
63
|
-
return (
|
|
64
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
65
|
-
{children}
|
|
66
|
-
</Root>
|
|
67
|
-
);
|
|
68
|
-
},
|
|
69
|
-
);
|
|
70
|
-
|
|
71
|
-
const CardToolbar = forwardRef<HTMLDivElement, ToolbarRootProps>(({ children, classNames, ...props }, forwardedRef) => {
|
|
72
|
-
return (
|
|
73
|
-
<Toolbar.Root {...props} classNames={['bg-transparent density-coarse', classNames]} ref={forwardedRef}>
|
|
74
|
-
{children}
|
|
75
|
-
</Toolbar.Root>
|
|
76
|
-
);
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
const CardToolbarIconButton = Toolbar.IconButton;
|
|
80
|
-
const CardToolbarSeparator = Toolbar.Separator;
|
|
81
|
-
|
|
82
|
-
const CardDragHandle = forwardRef<HTMLButtonElement, { toolbarItem?: boolean }>(({ toolbarItem }, forwardedRef) => {
|
|
83
|
-
const { t } = useTranslation(translationKey);
|
|
84
|
-
const Root = toolbarItem ? Toolbar.IconButton : IconButton;
|
|
85
|
-
return (
|
|
86
|
-
<Root
|
|
87
|
-
iconOnly
|
|
88
|
-
icon='ph--dots-six-vertical--regular'
|
|
89
|
-
variant='ghost'
|
|
90
|
-
label={t('drag handle label')}
|
|
91
|
-
classNames='pli-2'
|
|
92
|
-
ref={forwardedRef}
|
|
93
|
-
/>
|
|
94
|
-
);
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
const CardDragPreview = StackItem.DragPreview;
|
|
98
|
-
|
|
99
|
-
const CardMenu = Primitive.div as FC<ComponentPropsWithRef<'div'>>;
|
|
100
|
-
|
|
101
|
-
type CardPosterProps = {
|
|
102
|
-
alt: string;
|
|
103
|
-
aspect?: 'video' | 'auto';
|
|
104
|
-
} & Partial<{ image: string; icon: string }>;
|
|
105
|
-
|
|
106
|
-
const CardPoster = (props: CardPosterProps) => {
|
|
107
|
-
const aspect = props.aspect === 'auto' ? 'aspect-auto' : 'aspect-video';
|
|
108
|
-
if (props.image) {
|
|
109
|
-
return (
|
|
110
|
-
<img className={`dx-card__poster ${aspect} object-cover is-full bs-auto`} src={props.image} alt={props.alt} />
|
|
111
|
-
);
|
|
112
|
-
}
|
|
113
|
-
if (props.icon) {
|
|
114
|
-
return (
|
|
115
|
-
<div
|
|
116
|
-
role='image'
|
|
117
|
-
className={`dx-card__poster grid ${aspect} place-items-center bg-inputSurface text-subdued`}
|
|
118
|
-
aria-label={props.alt}
|
|
119
|
-
>
|
|
120
|
-
<Icon icon={props.icon} size={10} />
|
|
121
|
-
</div>
|
|
122
|
-
);
|
|
123
|
-
}
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
const CardChrome = forwardRef<HTMLDivElement, SharedCardProps>(
|
|
127
|
-
({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
|
|
128
|
-
const Root = asChild ? Slot : 'div';
|
|
129
|
-
const rootProps = asChild
|
|
130
|
-
? { classNames: [cardChrome, classNames] }
|
|
131
|
-
: { className: mx(cardChrome, classNames), role };
|
|
132
|
-
return (
|
|
133
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
134
|
-
{children}
|
|
135
|
-
</Root>
|
|
136
|
-
);
|
|
137
|
-
},
|
|
138
|
-
);
|
|
139
|
-
|
|
140
|
-
const CardText = forwardRef<HTMLParagraphElement, SharedCardProps>(
|
|
141
|
-
({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
|
|
142
|
-
const Root = asChild ? Slot : 'p';
|
|
143
|
-
const rootProps = asChild ? { classNames: [cardText, classNames] } : { className: mx(cardText, classNames), role };
|
|
144
|
-
return (
|
|
145
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
146
|
-
{children}
|
|
147
|
-
</Root>
|
|
148
|
-
);
|
|
149
|
-
},
|
|
150
|
-
);
|
|
151
|
-
|
|
152
|
-
export const Card = {
|
|
153
|
-
StaticRoot: CardStaticRoot,
|
|
154
|
-
SurfaceRoot: CardSurfaceRoot,
|
|
155
|
-
Heading: CardHeading,
|
|
156
|
-
Toolbar: CardToolbar,
|
|
157
|
-
ToolbarIconButton: CardToolbarIconButton,
|
|
158
|
-
ToolbarSeparator: CardToolbarSeparator,
|
|
159
|
-
DragHandle: CardDragHandle,
|
|
160
|
-
DragPreview: CardDragPreview,
|
|
161
|
-
Menu: CardMenu,
|
|
162
|
-
Poster: CardPoster,
|
|
163
|
-
Chrome: CardChrome,
|
|
164
|
-
Text: CardText,
|
|
165
|
-
};
|
|
166
|
-
|
|
167
|
-
export { cardRoot, cardHeading, cardText, cardChrome, cardSpacing };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import React, { type PropsWithChildren } from 'react';
|
|
6
|
-
|
|
7
|
-
import { mx } from '@dxos/react-ui-theme';
|
|
8
|
-
|
|
9
|
-
import { cardRoot } from './fragments';
|
|
10
|
-
|
|
11
|
-
const CardDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
|
|
12
|
-
return <div className='p-2'>{children}</div>;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
const CardDragPreviewContent = ({ children }: PropsWithChildren<{}>) => {
|
|
16
|
-
return <div className={mx(cardRoot, 'ring-focusLine ring-neutralFocusIndicator')}>{children}</div>;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export const CardDragPreview = {
|
|
20
|
-
Root: CardDragPreviewRoot,
|
|
21
|
-
Content: CardDragPreviewContent,
|
|
22
|
-
};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
export const cardRoot =
|
|
6
|
-
'rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card';
|
|
7
|
-
|
|
8
|
-
export const cardSpacing = 'pli-cardSpacingInline mlb-cardSpacingBlock';
|
|
9
|
-
export const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';
|
|
10
|
-
|
|
11
|
-
export const cardDialogContent = 'p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden';
|
|
12
|
-
export const cardDialogHeader = 'pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between';
|
|
13
|
-
export const cardDialogOverflow = 'overflow-y-auto min-bs-0 flex-1';
|
|
14
|
-
export const cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;
|
|
15
|
-
export const cardDialogSearchListRoot =
|
|
16
|
-
'pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col';
|
|
17
|
-
|
|
18
|
-
export const cardText = cardSpacing;
|
|
19
|
-
|
|
20
|
-
export const cardHeading = 'text-lg font-medium line-clamp-2';
|
|
21
|
-
|
|
22
|
-
export const cardChrome =
|
|
23
|
-
'pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full';
|
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import '@dxos-theme';
|
|
6
|
-
|
|
7
|
-
import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
8
|
-
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
|
9
|
-
import React, { useState, useCallback } from 'react';
|
|
10
|
-
|
|
11
|
-
import { faker } from '@dxos/random';
|
|
12
|
-
import { IconButton } from '@dxos/react-ui';
|
|
13
|
-
import { withLayout, withTheme } from '@dxos/storybook-utils';
|
|
14
|
-
|
|
15
|
-
import { CardStack } from './CardStack';
|
|
16
|
-
import { StackItem } from '../../components';
|
|
17
|
-
import { Card, CardDragPreview } from '../Card';
|
|
18
|
-
|
|
19
|
-
// Set a seed for reproducible random values
|
|
20
|
-
faker.seed(0);
|
|
21
|
-
|
|
22
|
-
type CardItem = {
|
|
23
|
-
id: string;
|
|
24
|
-
title: string;
|
|
25
|
-
description: string;
|
|
26
|
-
image: string;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
type StackItemData = {
|
|
30
|
-
id: string;
|
|
31
|
-
type?: 'column' | 'card';
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
const CardStackStory = () => {
|
|
35
|
-
const [column, setColumn] = useState<CardItem[]>(
|
|
36
|
-
faker.helpers.multiple(
|
|
37
|
-
() => ({
|
|
38
|
-
id: faker.string.uuid(),
|
|
39
|
-
title: faker.commerce.productName(),
|
|
40
|
-
description: faker.lorem.paragraph(),
|
|
41
|
-
image: faker.image.url(),
|
|
42
|
-
}),
|
|
43
|
-
{ count: 12 },
|
|
44
|
-
),
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
const handleRearrange = useCallback((source: StackItemData, target: StackItemData, closestEdge: Edge | null) => {
|
|
48
|
-
setColumn((prevColumn) => {
|
|
49
|
-
const newColumns = [...prevColumn];
|
|
50
|
-
// Reordering cards within a column
|
|
51
|
-
const sourceCardIndex = prevColumn.findIndex((card) => card.id === source.id);
|
|
52
|
-
const targetCardIndex = prevColumn.findIndex((card) => card.id === target.id);
|
|
53
|
-
|
|
54
|
-
if (typeof sourceCardIndex === 'number' && typeof targetCardIndex === 'number') {
|
|
55
|
-
const [movedCard] = newColumns.splice(sourceCardIndex, 1);
|
|
56
|
-
|
|
57
|
-
let insertIndex;
|
|
58
|
-
if (sourceCardIndex < targetCardIndex) {
|
|
59
|
-
insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
|
|
60
|
-
} else {
|
|
61
|
-
insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
|
|
62
|
-
}
|
|
63
|
-
newColumns.splice(insertIndex, 0, movedCard);
|
|
64
|
-
}
|
|
65
|
-
return newColumns;
|
|
66
|
-
});
|
|
67
|
-
}, []);
|
|
68
|
-
|
|
69
|
-
const handleAddCard = useCallback(() => {
|
|
70
|
-
setColumn((prevColumn) => {
|
|
71
|
-
const newColumn = [...prevColumn];
|
|
72
|
-
const newCard = {
|
|
73
|
-
id: faker.string.uuid(),
|
|
74
|
-
title: faker.commerce.productName(),
|
|
75
|
-
description: faker.lorem.paragraph(),
|
|
76
|
-
image: faker.image.url(),
|
|
77
|
-
} satisfies CardItem;
|
|
78
|
-
newColumn.push(newCard);
|
|
79
|
-
console.log('[add card]', prevColumn.length, newColumn.length);
|
|
80
|
-
return newColumn;
|
|
81
|
-
});
|
|
82
|
-
}, []);
|
|
83
|
-
|
|
84
|
-
const handleRemoveCard = useCallback((cardId: string) => {
|
|
85
|
-
setColumn((prevColumn) => {
|
|
86
|
-
const newColumn = [...prevColumn];
|
|
87
|
-
|
|
88
|
-
const cardIndex = prevColumn.findIndex((card) => card.id === cardId);
|
|
89
|
-
if (cardIndex !== -1) {
|
|
90
|
-
newColumn.splice(cardIndex, 1);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
return newColumn;
|
|
94
|
-
});
|
|
95
|
-
}, []);
|
|
96
|
-
|
|
97
|
-
return (
|
|
98
|
-
<CardStack.Root classNames='is-96'>
|
|
99
|
-
<CardStack.Content>
|
|
100
|
-
<CardStack.Stack id='story column' onRearrange={handleRearrange} itemsCount={column.length}>
|
|
101
|
-
{column.map((card, cardIndex, cardsArray) => {
|
|
102
|
-
const cardItem = { id: card.id, type: 'card' as const };
|
|
103
|
-
const prevCardId = cardIndex > 0 ? cardsArray[cardIndex - 1].id : undefined;
|
|
104
|
-
const nextCardId = cardIndex < cardsArray.length - 1 ? cardsArray[cardIndex + 1].id : undefined;
|
|
105
|
-
|
|
106
|
-
return (
|
|
107
|
-
<CardStack.Item asChild key={card.id}>
|
|
108
|
-
<StackItem.Root
|
|
109
|
-
item={cardItem}
|
|
110
|
-
focusIndicatorVariant='group'
|
|
111
|
-
prevSiblingId={prevCardId}
|
|
112
|
-
nextSiblingId={nextCardId}
|
|
113
|
-
>
|
|
114
|
-
<Card.StaticRoot>
|
|
115
|
-
<Card.Toolbar>
|
|
116
|
-
<StackItem.DragHandle asChild>
|
|
117
|
-
<Card.DragHandle toolbarItem />
|
|
118
|
-
</StackItem.DragHandle>
|
|
119
|
-
<Card.ToolbarSeparator variant='gap' />
|
|
120
|
-
<Card.ToolbarIconButton
|
|
121
|
-
iconOnly
|
|
122
|
-
variant='ghost'
|
|
123
|
-
icon='ph--x--regular'
|
|
124
|
-
label='Remove card'
|
|
125
|
-
onClick={() => handleRemoveCard(card.id)}
|
|
126
|
-
/>
|
|
127
|
-
</Card.Toolbar>
|
|
128
|
-
<Card.Poster alt={card.title} image={card.image} />
|
|
129
|
-
<Card.Heading>{card.title}</Card.Heading>
|
|
130
|
-
<Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
|
|
131
|
-
</Card.StaticRoot>
|
|
132
|
-
<StackItem.DragPreview>
|
|
133
|
-
{({ item }) => (
|
|
134
|
-
<CardDragPreview.Root>
|
|
135
|
-
<CardDragPreview.Content>
|
|
136
|
-
<Card.Toolbar>
|
|
137
|
-
<Card.DragHandle toolbarItem />
|
|
138
|
-
</Card.Toolbar>
|
|
139
|
-
<Card.Poster alt={card.title} image={card.image} />
|
|
140
|
-
<Card.Heading>{card.title}</Card.Heading>
|
|
141
|
-
<Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
|
|
142
|
-
</CardDragPreview.Content>
|
|
143
|
-
</CardDragPreview.Root>
|
|
144
|
-
)}
|
|
145
|
-
</StackItem.DragPreview>
|
|
146
|
-
</StackItem.Root>
|
|
147
|
-
</CardStack.Item>
|
|
148
|
-
);
|
|
149
|
-
})}
|
|
150
|
-
</CardStack.Stack>
|
|
151
|
-
|
|
152
|
-
<CardStack.Footer>
|
|
153
|
-
<IconButton icon='ph--plus--regular' label='Add card' onClick={handleAddCard} classNames='is-full' />
|
|
154
|
-
</CardStack.Footer>
|
|
155
|
-
|
|
156
|
-
<CardStack.Heading>{faker.company.name()}</CardStack.Heading>
|
|
157
|
-
</CardStack.Content>
|
|
158
|
-
</CardStack.Root>
|
|
159
|
-
);
|
|
160
|
-
};
|
|
161
|
-
|
|
162
|
-
const meta: Meta<typeof CardStackStory> = {
|
|
163
|
-
title: 'ui/react-ui-stack/CardStack',
|
|
164
|
-
component: CardStackStory,
|
|
165
|
-
decorators: [withTheme, withLayout({ fullscreen: true })],
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
export default meta;
|
|
169
|
-
|
|
170
|
-
type Story = StoryObj<typeof CardStackStory>;
|
|
171
|
-
|
|
172
|
-
export const Default: Story = {};
|
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
6
|
-
import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
|
|
7
|
-
|
|
8
|
-
import type { ThemedClassName } from '@dxos/react-ui';
|
|
9
|
-
import { mx } from '@dxos/react-ui-theme';
|
|
10
|
-
|
|
11
|
-
import { railGridHorizontalContainFitContent, Stack, type StackProps } from '../../components';
|
|
12
|
-
import { Card } from '../Card';
|
|
13
|
-
|
|
14
|
-
type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
|
|
15
|
-
|
|
16
|
-
const CardStackStack = forwardRef<
|
|
17
|
-
HTMLDivElement,
|
|
18
|
-
Omit<StackProps, 'orientation' | 'size' | 'rail' | 'separatorOnScroll'>
|
|
19
|
-
>(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
|
|
20
|
-
return (
|
|
21
|
-
<Stack
|
|
22
|
-
orientation='vertical'
|
|
23
|
-
size='contain'
|
|
24
|
-
rail={false}
|
|
25
|
-
classNames={
|
|
26
|
-
/* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */
|
|
27
|
-
['plb-1', itemsCount > 0 && 'plb-2', classNames]
|
|
28
|
-
}
|
|
29
|
-
itemsCount={itemsCount}
|
|
30
|
-
separatorOnScroll={9}
|
|
31
|
-
data-density='fine'
|
|
32
|
-
{...props}
|
|
33
|
-
ref={forwardedRef}
|
|
34
|
-
>
|
|
35
|
-
{children}
|
|
36
|
-
</Stack>
|
|
37
|
-
);
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
const CardStackDragHandle = Card.DragHandle;
|
|
41
|
-
|
|
42
|
-
const cardStackHeading = 'mli-2 order-first bg-transparent rounded-bs-md flex items-center';
|
|
43
|
-
|
|
44
|
-
const CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(
|
|
45
|
-
({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
|
|
46
|
-
const Root = asChild ? Slot : 'div';
|
|
47
|
-
const rootProps = asChild
|
|
48
|
-
? { classNames: [cardStackHeading, classNames] }
|
|
49
|
-
: { className: mx(cardStackHeading, classNames), role };
|
|
50
|
-
return (
|
|
51
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
52
|
-
{children}
|
|
53
|
-
</Root>
|
|
54
|
-
);
|
|
55
|
-
},
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
const cardStackFooter =
|
|
59
|
-
'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
|
|
60
|
-
|
|
61
|
-
const CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(
|
|
62
|
-
({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
|
|
63
|
-
const Root = asChild ? Slot : 'div';
|
|
64
|
-
const rootProps = asChild
|
|
65
|
-
? { classNames: [cardStackFooter, classNames] }
|
|
66
|
-
: { className: mx(cardStackFooter, classNames), role };
|
|
67
|
-
return (
|
|
68
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
69
|
-
{children}
|
|
70
|
-
</Root>
|
|
71
|
-
);
|
|
72
|
-
},
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
const cardStackContent = [
|
|
76
|
-
'shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop',
|
|
77
|
-
railGridHorizontalContainFitContent,
|
|
78
|
-
];
|
|
79
|
-
|
|
80
|
-
const CardStackContent = forwardRef<HTMLDivElement, SharedCardStackProps>(
|
|
81
|
-
({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
|
|
82
|
-
const Root = asChild ? Slot : 'div';
|
|
83
|
-
const rootProps = asChild
|
|
84
|
-
? { classNames: [...cardStackContent, classNames] }
|
|
85
|
-
: { className: mx(...cardStackContent, classNames), role };
|
|
86
|
-
return (
|
|
87
|
-
<Root {...props} {...rootProps} data-scroll-separator='false' ref={forwardedRef}>
|
|
88
|
-
{children}
|
|
89
|
-
</Root>
|
|
90
|
-
);
|
|
91
|
-
},
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
const cardStackRoot = 'flex flex-col pli-2 plb-2';
|
|
95
|
-
|
|
96
|
-
const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
|
|
97
|
-
({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
|
|
98
|
-
const Root = asChild ? Slot : 'div';
|
|
99
|
-
const rootProps = asChild
|
|
100
|
-
? { classNames: [cardStackRoot, classNames] }
|
|
101
|
-
: { className: mx(cardStackRoot, classNames), role };
|
|
102
|
-
return (
|
|
103
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
104
|
-
{children}
|
|
105
|
-
</Root>
|
|
106
|
-
);
|
|
107
|
-
},
|
|
108
|
-
);
|
|
109
|
-
|
|
110
|
-
const cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';
|
|
111
|
-
|
|
112
|
-
const CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(
|
|
113
|
-
({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
|
|
114
|
-
const Root = asChild ? Slot : 'div';
|
|
115
|
-
const rootProps = asChild
|
|
116
|
-
? { classNames: [cardStackItem, classNames] }
|
|
117
|
-
: { className: mx(cardStackItem, classNames), role };
|
|
118
|
-
return (
|
|
119
|
-
<Root {...props} {...rootProps} ref={forwardedRef}>
|
|
120
|
-
{children}
|
|
121
|
-
</Root>
|
|
122
|
-
);
|
|
123
|
-
},
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
export const CardStack = {
|
|
127
|
-
Root: CardStackRoot,
|
|
128
|
-
Content: CardStackContent,
|
|
129
|
-
Stack: CardStackStack,
|
|
130
|
-
Heading: CardStackHeading,
|
|
131
|
-
Footer: CardStackFooter,
|
|
132
|
-
DragHandle: CardStackDragHandle,
|
|
133
|
-
Item: CardStackItem,
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem };
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
//
|
|
2
|
-
// Copyright 2025 DXOS.org
|
|
3
|
-
//
|
|
4
|
-
|
|
5
|
-
import React, { type PropsWithChildren } from 'react';
|
|
6
|
-
|
|
7
|
-
import { IconButton, useTranslation } from '@dxos/react-ui';
|
|
8
|
-
import { mx } from '@dxos/react-ui-theme';
|
|
9
|
-
|
|
10
|
-
import { type StackProps } from '../../components';
|
|
11
|
-
import { translationKey } from '../../translations';
|
|
12
|
-
|
|
13
|
-
const CardStackDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
|
|
14
|
-
return (
|
|
15
|
-
<div className='p-2'>
|
|
16
|
-
<div className='rounded-md max-bs-[calc(100dvh-1rem)] overflow-hidden bg-baseSurface border border-separator ring-focusLine ring-neutralFocusIndicator flex flex-col'>
|
|
17
|
-
{children}
|
|
18
|
-
</div>
|
|
19
|
-
</div>
|
|
20
|
-
);
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const CardStackDragPreviewHeading = ({ children }: PropsWithChildren<{}>) => {
|
|
24
|
-
const { t } = useTranslation(translationKey);
|
|
25
|
-
return (
|
|
26
|
-
<div className='flex items-center p-2'>
|
|
27
|
-
<IconButton
|
|
28
|
-
iconOnly
|
|
29
|
-
icon='ph--dots-six-vertical--regular'
|
|
30
|
-
variant='ghost'
|
|
31
|
-
label={t('column drag handle label')}
|
|
32
|
-
classNames='pli-2'
|
|
33
|
-
/>
|
|
34
|
-
{children}
|
|
35
|
-
</div>
|
|
36
|
-
);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
const CardStackDragPreviewContent = ({
|
|
40
|
-
children,
|
|
41
|
-
itemsCount = 0,
|
|
42
|
-
}: PropsWithChildren<Pick<StackProps, 'itemsCount'>>) => {
|
|
43
|
-
return (
|
|
44
|
-
<div
|
|
45
|
-
className={mx('overflow-y-auto flex-1 pli-2 flex flex-col gap-2', 'plb-1', itemsCount > 0 ? 'plb-2' : 'plb-1')}
|
|
46
|
-
>
|
|
47
|
-
{children}
|
|
48
|
-
</div>
|
|
49
|
-
);
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const CardStackDragPreviewFooter = ({ children }: PropsWithChildren<{}>) => {
|
|
53
|
-
return <div className='p-2 border-t border-separator'>{children}</div>;
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
export const CardStackDragPreview = {
|
|
57
|
-
Root: CardStackDragPreviewRoot,
|
|
58
|
-
Heading: CardStackDragPreviewHeading,
|
|
59
|
-
Content: CardStackDragPreviewContent,
|
|
60
|
-
Footer: CardStackDragPreviewFooter,
|
|
61
|
-
};
|
package/src/exemplars/index.ts
DELETED
|
File without changes
|
|
File without changes
|
|
File without changes
|