-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
Tree.stories.tsx
118 lines (109 loc) · 3.14 KB
/
Tree.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React from 'react';
import type { StoriesHash } from '@storybook/api';
import { screen } from '@testing-library/dom';
import { Tree } from './Tree';
import { stories } from './mockdata.large';
import { DEFAULT_REF_ID } from './data';
export default {
component: Tree,
title: 'UI/Sidebar/Tree',
excludeStories: /.*Data$/,
parameters: { layout: 'fullscreen' },
decorators: [(storyFn: any) => <div style={{ maxWidth: '230px' }}>{storyFn()}</div>],
};
const refId = DEFAULT_REF_ID;
const storyId = Object.values(stories).find((story) => story.isLeaf && !story.isComponent).id;
const log = (id: string) => console.log(id);
export const Full = () => {
const [selectedId, setSelectedId] = React.useState(storyId);
return (
<Tree
isBrowsing
isMain
refId={refId}
data={stories}
highlightedRef={{ current: { itemId: selectedId, refId } }}
setHighlightedItemId={log}
selectedStoryId={selectedId}
onSelectStoryId={setSelectedId}
/>
);
};
const singleStoryComponent = {
single: {
name: 'Single',
id: 'single',
parent: false,
depth: 0,
children: ['single--single'],
isComponent: true,
isLeaf: false,
isRoot: false,
label: <span>🔥 Single</span>,
},
'single--single': {
id: 'single--single',
kind: 'Single',
name: 'Single',
story: 'Single',
args: {},
argTypes: {},
initialArgs: {},
depth: 1,
parent: 'single',
isLeaf: true,
isComponent: false,
isRoot: false,
label: <span>🔥 Single</span>,
},
};
const tooltipStories = Object.keys(stories).reduce((acc, key) => {
if (key === 'tooltip-tooltipselect--default') {
acc['tooltip-tooltipselect--tooltipselect'] = {
...stories[key],
id: 'tooltip-tooltipselect--tooltipselect',
name: 'TooltipSelect',
};
return acc;
}
if (key === 'tooltip-tooltipselect') {
acc[key] = { ...stories[key], children: ['tooltip-tooltipselect--tooltipselect'] };
return acc;
}
if (key.startsWith('tooltip')) acc[key] = stories[key];
return acc;
}, {} as StoriesHash);
export const SingleStoryComponents = () => {
const [selectedId, setSelectedId] = React.useState('tooltip-tooltipbuildlist--default');
return (
<Tree
isBrowsing
isMain
refId={refId}
data={{ ...singleStoryComponent, ...tooltipStories } as StoriesHash}
highlightedRef={{ current: { itemId: selectedId, refId } }}
setHighlightedItemId={log}
selectedStoryId={selectedId}
onSelectStoryId={setSelectedId}
/>
);
};
// node must be selected, highlighted, and focused
// in order to tab to 'Skip to canvas' link
export const SkipToCanvasLinkFocused = {
args: {
isBrowsing: true,
isMain: true,
refId,
data: stories,
highlightedRef: { current: { itemId: 'tooltip-tooltipbuildlist--default', refId } },
setHighlightedItemId: log,
selectedStoryId: 'tooltip-tooltipbuildlist--default',
onSelectStoryId: () => {},
},
parameters: { chromatic: { delay: 300 } },
play: () => {
// focus each instance for chromatic/storybook's stacked theme
screen.getAllByText('Skip to canvas').forEach((x) => x.focus());
},
};