forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
FluentDocsPage.stories.tsx
95 lines (90 loc) · 2.61 KB
/
FluentDocsPage.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
import * as React from 'react';
import {
DocsContext,
ArgsTable,
Title,
Subtitle,
Description,
HeaderMdx,
Primary,
PRIMARY_STORY,
Stories,
} from '@storybook/addon-docs';
import { makeStyles, shorthands } from '@griffel/react';
import { tokens } from '@fluentui/react-components';
import { DIR_ID, THEME_ID, themes } from '@fluentui/react-storybook-addon';
import { DirSwitch } from './DirSwitch.stories';
import { ThemePicker } from './ThemePicker.stories';
import { Toc, nameToHash } from './Toc.stories';
const useStyles = makeStyles({
divider: {
height: '1px',
backgroundColor: '#e1dfdd',
...shorthands.border('0px', 'none'),
...shorthands.margin('48px', '0px'),
},
wrapper: {
display: 'flex',
...shorthands.gap('16px'),
},
toc: {
flexBasis: '200px',
flexShrink: 0,
[`@media screen and (max-width: 1000px)`]: {
display: 'none',
},
},
container: {
// without a width, this div grows wider than its parent
width: '200px',
flexGrow: 1,
},
globalTogglesContainer: {
columnGap: tokens.spacingHorizontalXXXL,
display: 'flex',
},
});
export const FluentDocsPage = () => {
const context = React.useContext(DocsContext);
const dir = context.parameters?.dir ?? context.globals?.[DIR_ID] ?? 'ltr';
const selectedTheme = themes.find(theme => theme.id === context.globals![THEME_ID]);
const stories = context.componentStories();
const primaryStory = stories[0];
const styles = useStyles();
// DEBUG
// console.log('FluentDocsPage', context);
// console.table(stories.map((s: StoreItem) => ({ id: s.id, kind: s.kind, name: s.name, story: s.story })));
// console.table(
// Object.values((context as any).argTypes).map(arg => ({
// name: arg.name,
// description: arg.description,
// type: arg.table?.type?.summary ?? '?',
// default: arg.table?.defaultValue?.summary ?? '-',
// })),
// );
return (
<div>
<Title />
<div className={styles.wrapper}>
<div className={styles.container}>
<div className={styles.globalTogglesContainer}>
<ThemePicker selectedThemeId={selectedTheme?.id} />
<DirSwitch dir={dir} />
</div>
<Subtitle />
<Description />
<hr className={styles.divider} />
<HeaderMdx as="h3" id={nameToHash(primaryStory.name)}>
{primaryStory.name}
</HeaderMdx>
<Primary />
<ArgsTable story={PRIMARY_STORY} />
<Stories />
</div>
<div className={styles.toc}>
<Toc stories={stories} />
</div>
</div>
</div>
);
};