Skip to content

Commit e6d127e

Browse files
jassmithjassmith
authored
Start getting work in place for in storybook docs
1 parent 4e1e706 commit e6d127e

File tree

4 files changed

+327
-12
lines changed

4 files changed

+327
-12
lines changed

‎package-lock.json‎

Lines changed: 33 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
"react-dom": "^16.12.0 || 17.x",
8787
"react-laag": "^2.0.3",
8888
"react-responsive-carousel": "^3.2.7",
89+
"react-syntax-highlighter": "^15.4.4",
8990
"react-virtualized": "^9.21.0",
9091
"styled-components": "5.2.0",
9192
"typescript": "^4.4.3"

‎src/docs/doc-wrapper.tsx‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import React from "react";
2+
import { styled } from "../common/styles";
3+
import marked from "marked";
4+
import SyntaxHighlighter from "react-syntax-highlighter";
5+
import highlightStyle from "react-syntax-highlighter/dist/esm/styles/hljs/monokai-sublime";
6+
7+
export interface WrapperProps {
8+
height: number;
9+
}
10+
11+
export const Wrapper = styled.div<WrapperProps>`
12+
overflow: hidden;
13+
position: relative;
14+
15+
border-radius: 12px;
16+
17+
width: 100%;
18+
height: ${p => p.height}px;
19+
20+
margin: 24px 0;
21+
22+
> :first-child {
23+
position: absolute;
24+
left: 0;
25+
top: 0;
26+
width: 100%;
27+
height: 100%;
28+
}
29+
`;
30+
31+
export const Highlight: React.VFC<{ children: string }> = p => {
32+
return (
33+
<SyntaxHighlighter
34+
style={highlightStyle}
35+
showLineNumbers={true}
36+
lineNumberStyle={{ opacity: 0.5 }}
37+
language="typescript">
38+
{p.children.trim()}
39+
</SyntaxHighlighter>
40+
);
41+
};
42+
43+
export const Marked: React.VFC<{ children: string }> = p => {
44+
return (
45+
<div
46+
className="marked"
47+
dangerouslySetInnerHTML={{
48+
__html: marked(p.children),
49+
}}
50+
/>
51+
);
52+
};
53+
54+
const BeautifulStyle = styled.div`
55+
background-color: #2790b9;
56+
background: linear-gradient(90deg, #2790b9, #2070a9);
57+
color: white;
58+
59+
padding: 32px 48px;
60+
61+
display: flex;
62+
align-items: center;
63+
flex-direction: column;
64+
min-height: 100vh;
65+
66+
font-family: sans-serif;
67+
68+
& .inner {
69+
position: relative;
70+
max-width: 900px;
71+
72+
> pre {
73+
font-size: 18px;
74+
border-radius: 9px;
75+
background: rgba(25, 26, 23, 0.8) !important;
76+
}
77+
}
78+
79+
.marked {
80+
font-size: 16px;
81+
blockquote {
82+
margin: 0;
83+
padding: 1px 16px;
84+
85+
border-radius: 9px;
86+
background-color: rgba(0, 0, 0, 0.15);
87+
border: 1px solid rgba(0, 0, 0, 0.5);
88+
}
89+
90+
code {
91+
color: #ffcc80;
92+
}
93+
94+
h1 {
95+
font-size: 32px;
96+
font-weight: 600;
97+
padding-bottom: 12px;
98+
margin-top: 40px;
99+
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
100+
}
101+
}
102+
`;
103+
104+
export const PropName = styled.span`
105+
font-family: monospace;
106+
font-weight: 500;
107+
color: #ffe394;
108+
`;
109+
110+
export const Description = styled.p`
111+
font-size: 18px;
112+
flex-shrink: 0;
113+
margin: 0 0 20px 0;
114+
`;
115+
116+
export const MoreInfo = styled.p`
117+
font-size: 14px;
118+
flex-shrink: 0;
119+
margin: 0 0 20px 0;
120+
121+
button {
122+
background-color: #f4f4f4;
123+
color: #2b2b2b;
124+
padding: 2px 6px;
125+
font-family: monospace;
126+
font-size: 14px;
127+
border-radius: 4px;
128+
box-shadow: 0px 1px 2px #00000040;
129+
margin: 0 0.1em;
130+
border: none;
131+
cursor: pointer;
132+
}
133+
`;
134+
135+
export const DocWrapper: React.FC = p => {
136+
const { children } = p;
137+
return (
138+
<BeautifulStyle>
139+
<div className="inner">{children}</div>
140+
</BeautifulStyle>
141+
);
142+
};

‎src/docs/grid-column.stories.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import * as React from "react";
2+
3+
import { GridCell, GridCellKind, GridColumnIcon } from "../data-grid/data-grid-types";
4+
import { DataEditor } from "../data-editor/data-editor";
5+
6+
import { SimpleThemeWrapper } from "../stories/story-utils";
7+
import { DocWrapper, Highlight, Marked, Wrapper } from "./doc-wrapper";
8+
9+
export default {
10+
title: "Docs",
11+
decorators: [
12+
(Story: React.ComponentType) => (
13+
<SimpleThemeWrapper>
14+
<Story />
15+
</SimpleThemeWrapper>
16+
),
17+
],
18+
};
19+
20+
export const GridColumns: React.VFC = () => {
21+
const basicGetCellContent = React.useCallback((cell: readonly [number, number]): GridCell => {
22+
return {
23+
kind: GridCellKind.Text,
24+
allowOverlay: false,
25+
displayData: cell.toString(),
26+
data: cell.toString(),
27+
};
28+
}, []);
29+
30+
const cols = React.useMemo(() => {
31+
return [
32+
{
33+
title: "First",
34+
width: 150,
35+
},
36+
{
37+
title: "Second",
38+
width: 150,
39+
},
40+
];
41+
}, []);
42+
43+
return (
44+
<DocWrapper>
45+
<Marked>
46+
{`
47+
# Basic usage
48+
49+
> The \`GridColumn[]\` passed to the \`DataEditor\` in the \`columns\` property should be memoized to avoid excessive re-rendering. These samples may not do this for the sake of brevity.
50+
51+
There are only two mandatory properties for each \`GridColumn\`: \`title\` and \`width\`. The width is a number which represents the width of the column in pixels.`}
52+
</Marked>
53+
<Highlight>
54+
{`
55+
const columns: GridColumn[] = [
56+
{ title: "First", width: 150 },
57+
{ title: "Second", width: 150 }
58+
];
59+
60+
<DataEditor {...rest} columns={columns} />
61+
`}
62+
</Highlight>
63+
<Wrapper height={200}>
64+
<DataEditor getCellContent={basicGetCellContent} columns={cols} rows={50} />
65+
</Wrapper>
66+
67+
<Marked>
68+
{`
69+
# Header icons
70+
71+
Default header icons are available. They can also be reaplced by passing a new map to the \`headerIcons\` property.`}
72+
</Marked>
73+
<Highlight>
74+
{`
75+
const columns: GridColumn[] = [
76+
{ title: "Name", width: 250, icon: GridColumnIcon.HeaderString,
77+
overlayIcon: GridColumnIcon.RowOwnerOverlay
78+
},
79+
{ title: "Age", width: 100, icon: GridColumnIcon.HeaderNumber },
80+
{ title: "Avatar", width: 80, icon: GridColumnIcon.HeaderImage },
81+
];
82+
83+
<DataEditor {...rest} columns={columns} />
84+
`}
85+
</Highlight>
86+
<Wrapper height={200}>
87+
<DataEditor
88+
getCellContent={basicGetCellContent}
89+
columns={[
90+
{
91+
title: "Name",
92+
width: 250,
93+
icon: GridColumnIcon.HeaderString,
94+
overlayIcon: GridColumnIcon.RowOwnerOverlay,
95+
},
96+
{ title: "Age", width: 120, icon: GridColumnIcon.HeaderNumber },
97+
{ title: "Avatar", width: 100, icon: GridColumnIcon.HeaderImage },
98+
]}
99+
rows={50}
100+
/>
101+
</Wrapper>
102+
103+
<Marked>
104+
{`
105+
# Header theming
106+
107+
Headers can be provided with individual theme overrides which themes both the header and its column cells.`}
108+
</Marked>
109+
<Highlight>
110+
{`
111+
const columns: GridColumn[] = [
112+
{ title: "Name", width: 250, icon: GridColumnIcon.HeaderString },
113+
{ title: "Age", width: 100, icon: GridColumnIcon.HeaderNumber, themeOverride: {
114+
bgIconHeader: "#00967d",
115+
textDark: "#00c5a4",
116+
textHeader: "#00c5a4",
117+
} },
118+
{ title: "Avatar", width: 80, icon: GridColumnIcon.HeaderImage },
119+
];
120+
121+
<DataEditor {...rest} columns={columns} />
122+
`}
123+
</Highlight>
124+
<Wrapper height={200}>
125+
<DataEditor
126+
getCellContent={basicGetCellContent}
127+
columns={[
128+
{ title: "Name", width: 250, icon: GridColumnIcon.HeaderString },
129+
{
130+
title: "Age",
131+
width: 100,
132+
icon: GridColumnIcon.HeaderNumber,
133+
themeOverride: {
134+
bgIconHeader: "#00967d",
135+
textDark: "#00c5a4",
136+
textHeader: "#00c5a4",
137+
},
138+
},
139+
{ title: "Avatar", width: 80, icon: GridColumnIcon.HeaderImage },
140+
]}
141+
rows={50}
142+
/>
143+
</Wrapper>
144+
</DocWrapper>
145+
);
146+
};
147+
(GridColumns as any).parameters = {
148+
options: {
149+
showPanel: false,
150+
},
151+
};

0 commit comments

Comments
 (0)