Skip to content

Commit 4a0f84d

Browse files
SaraVieiraSaraVieira
committed
add config example
1 parent f778ba0 commit 4a0f84d

File tree

2 files changed

+239
-0
lines changed

2 files changed

+239
-0
lines changed

‎packages/components/src/examples/configuration-sidebar/index.stories.tsx‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
import React from 'react';
2+
import { Element, Collapsible, Text, Button, Stack } from '../..';
3+
4+
export default {
5+
title: 'examples/SidebarConfig',
6+
};
7+
8+
const NetlifyIcon = props => (
9+
<svg width={12} height={12} fill="none" viewBox="0 0 12 12" {...props}>
10+
<path
11+
fill="#4CAA9F"
12+
d="M.474 7.144a1.619 1.619 0 010-2.288L4.856.474a1.619 1.619 0 012.288 0l4.382 4.382a1.619 1.619 0 010 2.288l-4.382 4.382a1.619 1.619 0 01-2.288 0L.474 7.144z"
13+
/>
14+
</svg>
15+
);
16+
17+
const PrettierIcon = props => (
18+
<svg width={10} height={11} fill="none" viewBox="0 0 10 11" {...props}>
19+
<path
20+
fill="#56B3B4"
21+
d="M8.486 2.057H7.97a.257.257 0 100 .514h.515a.257.257 0 100-.514z"
22+
/>
23+
<path
24+
fill="#EA5E5E"
25+
d="M2.829 10.286H.257a.257.257 0 000 .514H2.83a.257.257 0 100-.514z"
26+
/>
27+
<path
28+
fill="#BF85BF"
29+
d="M7.971 6.171H6.43a.257.257 0 100 .515H7.97a.257.257 0 000-.515z"
30+
/>
31+
<path
32+
fill="#EA5E5E"
33+
d="M5.4 6.171H3.343a.257.257 0 100 .515H5.4a.257.257 0 100-.515z"
34+
/>
35+
<path
36+
fill="#56B3B4"
37+
d="M2.314 6.171H.257a.257.257 0 100 .515h2.057a.257.257 0 100-.515z"
38+
/>
39+
<path
40+
fill="#BF85BF"
41+
d="M2.829 8.229H.257a.257.257 0 100 .514H2.83a.257.257 0 100-.514zM2.829 4.114H.257a.257.257 0 100 .515H2.83a.257.257 0 100-.515z"
42+
/>
43+
<path
44+
fill="#F7BA3E"
45+
d="M7.971 1.028H2.828a.257.257 0 000 .515h5.143a.257.257 0 000-.515z"
46+
/>
47+
<path
48+
fill="#EA5E5E"
49+
d="M1.8 1.028H.257a.257.257 0 000 .515H1.8a.257.257 0 000-.515z"
50+
/>
51+
<path
52+
fill="#F7BA3E"
53+
d="M2.829 9.257h-.515a.257.257 0 000 .515h.515a.257.257 0 100-.515z"
54+
/>
55+
<path
56+
fill="#56B3B4"
57+
d="M2.829 3.086h-.515a.257.257 0 100 .514h.515a.257.257 0 100-.514zM1.286 9.257H.257a.257.257 0 000 .515h1.029a.257.257 0 100-.515z"
58+
/>
59+
<path
60+
fill="#F7BA3E"
61+
d="M1.286 3.086H.257a.257.257 0 100 .514h1.029a.257.257 0 100-.514z"
62+
/>
63+
<path
64+
fill="#56B3B4"
65+
d="M8.486 5.143H4.37a.257.257 0 100 .514h4.115a.257.257 0 100-.514z"
66+
/>
67+
<path
68+
fill="#F7BA3E"
69+
d="M3.343 5.143H1.8a.257.257 0 100 .514h1.543a.257.257 0 100-.514z"
70+
/>
71+
<path
72+
fill="#EA5E5E"
73+
d="M.771 5.143H.257a.257.257 0 100 .514h.514a.257.257 0 100-.514z"
74+
/>
75+
<path
76+
fill="#BF85BF"
77+
d="M6.943 2.057H4.886a.257.257 0 100 .514h2.057a.257.257 0 100-.514z"
78+
/>
79+
<path
80+
fill="#56B3B4"
81+
d="M3.857 2.057h-3.6a.257.257 0 000 .514h3.6a.257.257 0 100-.514z"
82+
/>
83+
<path
84+
fill="#BF85BF"
85+
d="M.771 7.2H.257a.257.257 0 100 .514h.514a.257.257 0 000-.514z"
86+
/>
87+
<path
88+
fill="#EA5E5E"
89+
d="M9 3.086H6.429a.257.257 0 100 .514H9a.257.257 0 100-.514z"
90+
/>
91+
<path
92+
fill="#F7BA3E"
93+
d="M9 4.114H6.429a.257.257 0 100 .515H9a.257.257 0 100-.515z"
94+
/>
95+
<path
96+
fill="#56B3B4"
97+
d="M6.429 0H.257a.257.257 0 000 .514H6.43a.257.257 0 100-.514z"
98+
/>
99+
</svg>
100+
);
101+
102+
const NPMIcon = props => (
103+
<svg width={17} height={16} fill="none" viewBox="0 0 17 16" {...props}>
104+
<path
105+
fill="#FF453A"
106+
d="M.667 16V0h16.172v16H.668zM3.708 2.998v9.98h5.097V5.079h2.97v7.9h2.022V3H3.708z"
107+
/>
108+
</svg>
109+
);
110+
111+
const ZeitIcon = props => (
112+
<svg width={12} height={10} fill="none" viewBox="0 0 12 10" {...props}>
113+
<path fill="#fff" d="M6 0l6 10H0L6 0z" />
114+
</svg>
115+
);
116+
117+
export const Basic = () => (
118+
<Element
119+
as="aside"
120+
css={{
121+
width: '200px',
122+
height: '100vh',
123+
borderRight: '1px solid',
124+
borderColor: 'sideBar.border',
125+
}}
126+
>
127+
<Collapsible title="Configuration Files" defaultOpen>
128+
<Stack direction="vertical" gap={6}>
129+
<Element as="div" css={{ paddingX: 2 }}>
130+
<Text as="div" marginBottom={2}>
131+
Configuration your Sandbox
132+
</Text>
133+
<Text variant="muted">
134+
Codesandbox supports serveral config giles per template, you van see
135+
and edit all supported files for the current sandbox here.
136+
</Text>
137+
</Element>
138+
<Element as="div" css={{ paddingX: 2 }}>
139+
<Stack>
140+
<Element css={{ paddingRight: 2 }} marginBottom={2}>
141+
<NPMIcon />
142+
</Element>
143+
<Text size={2}>package.json</Text>
144+
</Stack>
145+
<Stack gap={4} align="flex-end" justify="space-between">
146+
<Text size={2} variant="muted">
147+
Describes the overall configuration of your project.
148+
</Text>
149+
<Button style={{ width: 100 }} variant="secondary">
150+
Edit
151+
</Button>
152+
</Stack>
153+
<Stack marginTop={4}>
154+
<Element css={{ paddingRight: 2 }} marginBottom={2}>
155+
<NPMIcon />
156+
</Element>
157+
<Text size={2}>sandbox.config.json</Text>
158+
</Stack>
159+
<Stack gap={4} align="flex-end" justify="space-between">
160+
<Text size={2} variant="muted">
161+
Describes the overall configuration of your project.
162+
</Text>
163+
<Button style={{ width: 100 }} variant="secondary">
164+
Edit
165+
</Button>
166+
</Stack>
167+
</Element>
168+
</Stack>
169+
</Collapsible>
170+
<Collapsible title="Other Configuration">
171+
<Stack direction="vertical" gap={6}>
172+
<Element as="div" css={{ paddingX: 2 }}>
173+
<Stack>
174+
<Element css={{ paddingRight: 2 }} marginBottom={2}>
175+
<PrettierIcon />
176+
</Element>
177+
<Text size={2}>.prettierc</Text>
178+
</Stack>
179+
<Stack gap={4} align="flex-end" justify="space-between">
180+
<Text size={2} variant="muted">
181+
Defines how all files will be prettified by Prettier
182+
</Text>
183+
<Button style={{ width: 100 }} variant="secondary">
184+
Edit
185+
</Button>
186+
</Stack>
187+
<Stack marginTop={4}>
188+
<Element css={{ paddingRight: 2 }} marginBottom={2}>
189+
<NetlifyIcon />
190+
</Element>
191+
<Text size={2}>netlify.toml</Text>
192+
</Stack>
193+
<Stack gap={4} align="flex-end" justify="space-between">
194+
<Text size={2} variant="muted">
195+
Configuration for your deployments on netlify
196+
</Text>
197+
<Button style={{ width: 100 }} variant="secondary">
198+
Edit
199+
</Button>
200+
</Stack>
201+
<Stack marginTop={4}>
202+
<Element css={{ paddingRight: 2 }} marginBottom={2}>
203+
<ZeitIcon />
204+
</Element>
205+
<Text size={2}>now.json</Text>
206+
</Stack>
207+
<Stack gap={4} align="flex-end" justify="space-between">
208+
<Text size={2} variant="muted">
209+
Configuration for your deployments on now
210+
</Text>
211+
<Button style={{ width: 100 }} variant="secondary">
212+
Edit
213+
</Button>
214+
</Stack>
215+
</Element>
216+
</Stack>
217+
</Collapsible>
218+
</Element>
219+
);

‎packages/components/src/index.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// primitives
2+
export * from './components/Element';
3+
export * from './components/ThemeProvider';
4+
5+
// atoms
6+
export * from './components/Avatar';
7+
export * from './components/Input';
8+
export * from './components/SearchInput';
9+
export * from './components/Select';
10+
export * from './components/Text';
11+
export * from './components/Textarea';
12+
export * from './components/Button';
13+
14+
// molecules
15+
export * from './components/Collapsible';
16+
export * from './components/List';
17+
18+
// layout
19+
export * from './components/Grid';
20+
export * from './components/Stack';

0 commit comments

Comments
 (0)