Skip to content

Commit 40eeca2

Browse files
justin212407justin212407
committed
refactor(masonry): update stories for brick
Signed-off-by: Justin Charles <[email protected]>
1 parent 4e878db commit 40eeca2

File tree

3 files changed

+122
-348
lines changed

3 files changed

+122
-348
lines changed

‎modules/masonry/src/brick/view/stories/compound.stories.tsx

Lines changed: 41 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -1,188 +1,63 @@
1-
import React from 'react';
2-
import type { Meta, StoryFn } from '@storybook/react';
3-
import CompoundBrickView, { CompoundBrickViewProps } from '../components/compound';
4-
import type { TColor, TExtent, TVisualState } from '../../@types/brick';
1+
// src/masonry/view/CompoundBrickView.stories.tsx
52

6-
const VISUAL_STATES = [
7-
'default',
8-
'hovered',
9-
'selected',
10-
'executing',
11-
'unconnected',
12-
'dragged',
13-
] as TVisualState[];
3+
import React from 'react';
4+
import type { Meta, StoryObj, Decorator } from '@storybook/react';
5+
import { CompoundBrickView } from '../components/compound';
6+
import type { TBrickRenderPropsCompound } from '../../@types/brick';
147

15-
const centerDecorator = (Story: any) => (
8+
const centerDecorator: Decorator<TBrickRenderPropsCompound> = (Story) => (
169
<div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
1710
<Story />
1811
</div>
1912
);
2013

21-
export default {
14+
const meta: Meta<TBrickRenderPropsCompound> = {
2215
title: 'Bricks/CompoundBrick',
2316
component: CompoundBrickView,
2417
decorators: [centerDecorator],
25-
2618
argTypes: {
27-
// plumbing
28-
uuid: { table: { disable: true } },
29-
name: { table: { disable: true } },
30-
x: { table: { disable: true } },
31-
y: { table: { disable: true } },
32-
onClick: { table: { disable: true } },
33-
34-
// shared props
3519
label: { control: 'text' },
36-
labelType: { control: 'select', options: ['text', 'glyph', 'icon', 'thumbnail'] },
3720
colorBg: { control: 'color' },
3821
colorFg: { control: 'color' },
3922
strokeColor: { control: 'color' },
40-
shadow: { control: 'boolean' },
41-
isHighlighted: { name: 'Highlighted', control: 'boolean' },
23+
strokeWidth: { control: { type: 'number', min: 0, max: 10, step: 1 } },
4224
scale: { control: { type: 'number', min: 0.1, max: 3, step: 0.1 } },
25+
shadow: { control: 'boolean' },
4326
tooltip: { control: 'text' },
27+
topNotch: { control: 'boolean' },
28+
bottomNotch: { control: 'boolean' },
29+
isFolded: { control: 'boolean' },
30+
bboxArgs: { control: 'object' },
31+
bboxNest: { control: 'object' },
4432

45-
// connectors
46-
topNotch: { name: 'Top Notch', control: 'boolean' },
47-
bottomNotch: { name: 'Bottom Notch', control: 'boolean' },
48-
49-
// argument-slot boxes
50-
bboxArgs: {
51-
name: 'Arg Bounding Boxes',
52-
description: 'Array of { w, h } for each argument slot',
53-
control: 'object',
54-
},
55-
56-
// nesting-area boxes
57-
bboxNest: {
58-
name: 'Nest Bounding Boxes',
59-
description: 'Array of { w, h } for nested content area',
60-
control: 'object',
61-
},
62-
63-
// visual flags
64-
visualState: {
65-
name: 'Visual State',
66-
control: { type: 'select', options: VISUAL_STATES },
67-
},
68-
isActionMenuOpen: {
69-
name: 'Action Menu Open',
70-
control: 'boolean',
71-
},
72-
isFolded: {
73-
name: 'Folded',
74-
control: 'boolean',
75-
},
76-
isVisible: {
77-
name: 'Visible',
78-
control: 'boolean',
79-
},
33+
// plumbing
34+
labelType: { table: { disable: true } },
35+
isActionMenuOpen: { table: { disable: true } },
36+
isVisible: { table: { disable: true } },
8037
},
81-
} as Meta<CompoundBrickViewProps>;
82-
83-
const baseArgs: CompoundBrickViewProps = {
84-
uuid: 'compound-1',
85-
name: 'compound-1',
86-
label: 'Compound Brick',
87-
labelType: 'text',
88-
colorBg: '#FFEB3B' as TColor,
89-
colorFg: '#000' as TColor,
90-
strokeColor: '#333' as TColor,
91-
shadow: false,
92-
isHighlighted: false,
93-
tooltip: 'This is a compound brick',
94-
scale: 1,
95-
96-
topNotch: false,
97-
bottomNotch: false,
98-
bboxArgs: [] as TExtent[],
99-
bboxNest: [] as TExtent[],
100-
101-
visualState: 'default',
102-
isActionMenuOpen: false,
103-
isFolded: false,
104-
isVisible: true,
105-
106-
x: 0,
107-
y: 0,
10838
};
10939

110-
const Template: StoryFn<CompoundBrickViewProps> = (args) => <CompoundBrickView {...args} />;
111-
112-
// ── Playground ────────────────────────────────────────────
113-
export const Playground = Template.bind({});
114-
Playground.storyName = 'Playground';
115-
Playground.args = { ...baseArgs };
116-
117-
// ── Visual States ─────────────────────────────────────────
118-
export const VisualStates = Template.bind({});
119-
VisualStates.storyName = 'Visual States';
120-
VisualStates.args = { ...baseArgs };
121-
VisualStates.parameters = {
122-
controls: { include: ['visualState'] },
123-
};
124-
125-
// ── Notch Variants ────────────────────────────────────────
126-
export const NotchVariants = Template.bind({});
127-
NotchVariants.storyName = 'Notch Variants';
128-
NotchVariants.args = { ...baseArgs };
129-
NotchVariants.parameters = {
130-
controls: { include: ['topNotch', 'bottomNotch'] },
131-
};
132-
133-
// ── Arg Bounding Boxes ────────────────────────────────────
134-
export const ArgBoundingBoxes = Template.bind({});
135-
ArgBoundingBoxes.storyName = 'Arg Bounding Boxes';
136-
ArgBoundingBoxes.args = {
137-
...baseArgs,
138-
bboxArgs: [
139-
{ w: 30, h: 40 },
140-
{ w: 60, h: 80 },
141-
],
142-
};
143-
ArgBoundingBoxes.parameters = {
144-
controls: { include: ['bboxArgs'] },
145-
};
146-
147-
// ── Nest Bounding Boxes ───────────────────────────────────
148-
export const NestBoundingBoxes = Template.bind({});
149-
NestBoundingBoxes.storyName = 'Nest Bounding Boxes';
150-
NestBoundingBoxes.args = {
151-
...baseArgs,
152-
bboxNest: [
153-
{ w: 120, h: 60 },
154-
{ w: 100, h: 40 },
155-
],
156-
};
157-
NestBoundingBoxes.parameters = {
158-
controls: { include: ['bboxNest'] },
159-
};
160-
161-
// ── Folded ────────────────────────────────────────────────
162-
export const Folded = Template.bind({});
163-
Folded.storyName = 'Folded';
164-
Folded.args = {
165-
...baseArgs,
166-
isFolded: true,
167-
// give it some nesting space to see the fold effect:
168-
bboxNest: [{ w: 100, h: 50 }],
169-
};
170-
Folded.parameters = {
171-
controls: { include: ['isFolded'] },
172-
};
173-
174-
// ── Action Menu ───────────────────────────────────────────
175-
export const ActionMenu = Template.bind({});
176-
ActionMenu.storyName = 'Action Menu';
177-
ActionMenu.args = { ...baseArgs };
178-
ActionMenu.parameters = {
179-
controls: { include: ['isActionMenuOpen'] },
180-
};
181-
182-
// ── Visibility ────────────────────────────────────────────
183-
export const Visibility = Template.bind({});
184-
Visibility.storyName = 'Visibility';
185-
Visibility.args = { ...baseArgs };
186-
Visibility.parameters = {
187-
controls: { include: ['isVisible'] },
40+
export default meta;
41+
type Story = StoryObj<TBrickRenderPropsCompound>;
42+
43+
/** The default compound-statement brick */
44+
export const Default: Story = {
45+
args: {
46+
label: 'doSomething',
47+
labelType: 'text',
48+
colorBg: '#aad3df',
49+
colorFg: '#000000',
50+
strokeColor: '#000000',
51+
strokeWidth: 1,
52+
scale: 1,
53+
shadow: true,
54+
tooltip: 'A compound-statement brick',
55+
bboxArgs: [],
56+
bboxNest: [],
57+
topNotch: true,
58+
bottomNotch: true,
59+
isFolded: false,
60+
isActionMenuOpen: false,
61+
isVisible: true,
62+
},
18863
};

‎modules/masonry/src/brick/view/stories/expression.stories.tsx

Lines changed: 47 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,62 @@
1-
// src/brick/view/components/expression.stories.tsx
1+
// src/masonry/view/ExpressionBrickView.stories.tsx
2+
23
import React from 'react';
3-
import { Meta, StoryFn } from '@storybook/react';
4-
import ExpressionBrickView from '../components/expression';
5-
import type { TColor, TExtent, TVisualState } from '../../@types/brick';
4+
import type { Meta, StoryObj, Decorator } from '@storybook/react';
5+
import { ExpressionBrickView } from '../components/expression';
6+
import type { TBrickRenderPropsExpression } from '../../@types/brick';
7+
8+
const centerDecorator: Decorator<TBrickRenderPropsExpression> = (Story) => (
9+
<div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
10+
<Story />
11+
</div>
12+
);
613

7-
export default {
14+
const meta: Meta<TBrickRenderPropsExpression> = {
815
title: 'Bricks/ExpressionBrick',
916
component: ExpressionBrickView,
17+
decorators: [centerDecorator],
1018
argTypes: {
11-
// Core appearance controls
19+
// exposed controls
20+
label: { control: 'text' },
1221
colorBg: { control: 'color' },
1322
colorFg: { control: 'color' },
1423
strokeColor: { control: 'color' },
15-
label: { control: 'text' },
24+
strokeWidth: { control: { type: 'number', min: 0, max: 10, step: 1 } },
25+
scale: { control: { type: 'number', min: 0.1, max: 3, step: 0.1 } },
26+
shadow: { control: 'boolean' },
27+
tooltip: { control: 'text' },
1628
value: { control: 'text' },
17-
18-
// State controls
19-
visualState: {
20-
control: {
21-
type: 'select',
22-
options: ['default', 'hovered', 'selected', 'executing', 'unconnected', 'dragged'],
23-
},
24-
},
2529
isValueSelectOpen: { control: 'boolean' },
26-
isVisible: { control: 'boolean' },
2730

28-
// Layout & interaction
29-
scale: { control: { type: 'number', min: 0.1, max: 3, step: 0.1 } },
30-
x: { control: 'number' },
31-
y: { control: 'number' },
32-
onClick: { action: 'clicked' },
31+
// hide plumbing props
32+
labelType: { table: { disable: true } },
33+
bboxArgs: { table: { disable: true } },
34+
isActionMenuOpen: { table: { disable: true } },
35+
isVisible: { table: { disable: true } },
3336
},
34-
} as Meta<typeof ExpressionBrickView>;
35-
36-
type Props = React.ComponentProps<typeof ExpressionBrickView>;
37-
38-
const Template: StoryFn<Props> = (args) => <ExpressionBrickView {...args} />;
39-
40-
export const Default = Template.bind({});
41-
Default.args = {
42-
uuid: 'expr-1',
43-
name: 'expr-1',
44-
label: 'x + y',
45-
labelType: 'text',
46-
colorBg: '#EEE',
47-
colorFg: '#222',
48-
strokeColor: '#444',
49-
shadow: false,
50-
scale: 1,
51-
tooltip: 'An expression brick',
52-
value: 42,
53-
isValueSelectOpen: false,
54-
bboxArgs: [],
55-
x: 0,
56-
y: 0,
57-
visualState: 'default',
58-
isVisible: true,
5937
};
6038

61-
export const Hovered = Template.bind({});
62-
Hovered.args = { ...Default.args, visualState: 'hovered' };
63-
64-
export const Selected = Template.bind({});
65-
Selected.args = { ...Default.args, visualState: 'selected' };
66-
67-
export const Executing = Template.bind({});
68-
Executing.args = { ...Default.args, visualState: 'executing' };
69-
70-
export const Unconnected = Template.bind({});
71-
Unconnected.args = { ...Default.args, visualState: 'unconnected' };
72-
73-
export const Dragged = Template.bind({});
74-
Dragged.args = { ...Default.args, visualState: 'dragged' };
75-
76-
export const ValuePickerOpen = Template.bind({});
77-
ValuePickerOpen.args = {
78-
...Default.args,
79-
isValueSelectOpen: true,
39+
export default meta;
40+
type Story = StoryObj<TBrickRenderPropsExpression>;
41+
42+
/**
43+
* Default story: a plain expression brick with no value-select open.
44+
*/
45+
export const Default: Story = {
46+
args: {
47+
label: 'doSomething',
48+
labelType: 'text',
49+
colorBg: '#aad3df', // hex instead of HSL
50+
colorFg: '#000000', // hex instead of RGB tuple
51+
strokeColor: '#000000', // hex
52+
strokeWidth: 1,
53+
scale: 1,
54+
shadow: true,
55+
tooltip: 'An expression brick',
56+
bboxArgs: [], // no argument slots
57+
isActionMenuOpen: false,
58+
isVisible: true,
59+
value: '',
60+
isValueSelectOpen: false,
61+
},
8062
};

0 commit comments

Comments
 (0)