t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import { Meta } from "@storybook/blocks";
2
3import Github from "./assets/github.svg";
4import Discord from "./assets/discord.svg";
5import Youtube from "./assets/youtube.svg";
6import Tutorials from "./assets/tutorials.svg";
7import Styling from "./assets/styling.png";
8import Context from "./assets/context.png";
9import Assets from "./assets/assets.png";
10import Docs from "./assets/docs.png";
11import Share from "./assets/share.png";
12import FigmaPlugin from "./assets/figma-plugin.png";
13import Testing from "./assets/testing.png";
14import Accessibility from "./assets/accessibility.png";
15import Theming from "./assets/theming.png";
16import AddonLibrary from "./assets/addon-library.png";
17
18export const RightArrow = () => <svg
19 viewBox="0 0 14 14"
20 width="8px"
21 height="14px"
22 style={{
23 marginLeft: '4px',
24 display: 'inline-block',
25 shapeRendering: 'inherit',
26 verticalAlign: 'middle',
27 fill: 'currentColor',
28 'path fill': 'currentColor'
29 }}
30>
31 <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
32</svg>
33
34<Meta title="Configure your project" />
35
36<div className="sb-container">
37 <div className='sb-section-title'>
38 # Configure your project
39
40 Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
41 </div>
42 <div className="sb-section">
43 <div className="sb-section-item">
44 <img
45 src={Styling}
46 alt="A wall of logos representing different styling technologies"
47 />
48 <h4 className="sb-section-item-heading">Add styling and CSS</h4>
49 <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
50 <a
51 href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
52 target="_blank"
53 >Learn more<RightArrow /></a>
54 </div>
55 <div className="sb-section-item">
56 <img
57 src={Context}
58 alt="An abstraction representing the composition of data for a component"
59 />
60 <h4 className="sb-section-item-heading">Provide context and mocking</h4>
61 <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
62 <a
63 href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
64 target="_blank"
65 >Learn more<RightArrow /></a>
66 </div>
67 <div className="sb-section-item">
68 <img src={Assets} alt="A representation of typography and image assets" />
69 <div>
70 <h4 className="sb-section-item-heading">Load assets and resources</h4>
71 <p className="sb-section-item-paragraph">To link static files (like fonts) to your projects and stories, use the
72 `staticDirs` configuration option to specify folders to load when
73 starting Storybook.</p>
74 <a
75 href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
76 target="_blank"
77 >Learn more<RightArrow /></a>
78 </div>
79 </div>
80 </div>
81</div>
82<div className="sb-container">
83 <div className='sb-section-title'>
84 # Do more with Storybook
85
86 Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
87 </div>
88
89 <div className="sb-section">
90 <div className="sb-features-grid">
91 <div className="sb-grid-item">
92 <img src={Docs} alt="A screenshot showing the autodocs tag being set, pointing a docs page being generated" />
93 <h4 className="sb-section-item-heading">Autodocs</h4>
94 <p className="sb-section-item-paragraph">Auto-generate living,
95 interactive reference documentation from your components and stories.</p>
96 <a
97 href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
98 target="_blank"
99 >Learn more<RightArrow /></a>
100 </div>
101 <div className="sb-grid-item">
102 <img src={Share} alt="A browser window showing a Storybook being published to a chromatic.com URL" />
103 <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
104 <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
105 <a
106 href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
107 target="_blank"
108 >Learn more<RightArrow /></a>
109 </div>
110 <div className="sb-grid-item">
111 <img src={FigmaPlugin} alt="Windows showing the Storybook plugin in Figma" />
112 <h4 className="sb-section-item-heading">Figma Plugin</h4>
113 <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
114 implementation in one place.</p>
115 <a
116 href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
117 target="_blank"
118 >Learn more<RightArrow /></a>
119 </div>
120 <div className="sb-grid-item">
121 <img src={Testing} alt="Screenshot of tests passing and failing" />
122 <h4 className="sb-section-item-heading">Testing</h4>
123 <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
124 complex.</p>
125 <a
126 href="https://storybook.js.org/docs/writing-tests/?renderer=react"
127 target="_blank"
128 >Learn more<RightArrow /></a>
129 </div>
130 <div className="sb-grid-item">
131 <img src={Accessibility} alt="Screenshot of accessibility tests passing and failing" />
132 <h4 className="sb-section-item-heading">Accessibility</h4>
133 <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
134 <a
135 href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
136 target="_blank"
137 >Learn more<RightArrow /></a>
138 </div>
139 <div className="sb-grid-item">
140 <img src={Theming} alt="Screenshot of Storybook in light and dark mode" />
141 <h4 className="sb-section-item-heading">Theming</h4>
142 <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
143 <a
144 href="https://storybook.js.org/docs/configure/theming/?renderer=react"
145 target="_blank"
146 >Learn more<RightArrow /></a>
147 </div>
148 </div>
149 </div>
150</div>
151<div className='sb-addon'>
152 <div className='sb-addon-text'>
153 <h4>Addons</h4>
154 <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
155 <a
156 href="https://storybook.js.org/addons/"
157 target="_blank"
158 >Discover all addons<RightArrow /></a>
159 </div>
160 <div className='sb-addon-img'>
161 <img src={AddonLibrary} alt="Integrate your tools with Storybook to connect workflows." />
162 </div>
163</div>
164
165<div className="sb-section sb-socials">
166 <div className="sb-section-item">
167 <img src={Github} alt="Github logo" className="sb-explore-image"/>
168 Join our contributors building the future of UI development.
169
170 <a
171 href="https://github.com/storybookjs/storybook"
172 target="_blank"
173 >Star on GitHub<RightArrow /></a>
174 </div>
175 <div className="sb-section-item">
176 <img src={Discord} alt="Discord logo" className="sb-explore-image"/>
177 <div>
178 Get support and chat with frontend developers.
179
180 <a
181 href="https://discord.gg/storybook"
182 target="_blank"
183 >Join Discord server<RightArrow /></a>
184 </div>
185 </div>
186 <div className="sb-section-item">
187 <img src={Youtube} alt="Youtube logo" className="sb-explore-image"/>
188 <div>
189 Watch tutorials, feature previews and interviews.
190
191 <a
192 href="https://www.youtube.com/@chromaticui"
193 target="_blank"
194 >Watch on YouTube<RightArrow /></a>
195 </div>
196 </div>
197 <div className="sb-section-item">
198 <img src={Tutorials} alt="A book" className="sb-explore-image"/>
199 <p>Follow guided walkthroughs on for key workflows.</p>
200
201 <a
202 href="https://storybook.js.org/tutorials/"
203 target="_blank"
204 >Discover tutorials<RightArrow /></a>
205 </div>
206</div>
207
208<style>
209 {`
210 .sb-container {
211 margin-bottom: 48px;
212 }
213
214 .sb-section {
215 width: 100%;
216 display: flex;
217 flex-direction: row;
218 gap: 20px;
219 }
220
221 img {
222 object-fit: cover;
223 }
224
225 .sb-section-title {
226 margin-bottom: 32px;
227 }
228
229 .sb-section a:not(h1 a, h2 a, h3 a) {
230 font-size: 14px;
231 }
232
233 .sb-section-item, .sb-grid-item {
234 flex: 1;
235 display: flex;
236 flex-direction: column;
237 }
238
239 .sb-section-item-heading {
240 padding-top: 20px !important;
241 padding-bottom: 5px !important;
242 margin: 0 !important;
243 }
244 .sb-section-item-paragraph {
245 margin: 0;
246 padding-bottom: 10px;
247 }
248
249 .sb-chevron {
250 margin-left: 5px;
251 }
252
253 .sb-features-grid {
254 display: grid;
255 grid-template-columns: repeat(2, 1fr);
256 grid-gap: 32px 20px;
257 }
258
259 .sb-socials {
260 display: grid;
261 grid-template-columns: repeat(4, 1fr);
262 }
263
264 .sb-socials p {
265 margin-bottom: 10px;
266 }
267
268 .sb-explore-image {
269 max-height: 32px;
270 align-self: flex-start;
271 }
272
273 .sb-addon {
274 width: 100%;
275 display: flex;
276 align-items: center;
277 position: relative;
278 background-color: #EEF3F8;
279 border-radius: 5px;
280 border: 1px solid rgba(0, 0, 0, 0.05);
281 background: #EEF3F8;
282 height: 180px;
283 margin-bottom: 48px;
284 overflow: hidden;
285 }
286
287 .sb-addon-text {
288 padding-left: 48px;
289 max-width: 240px;
290 }
291
292 .sb-addon-text h4 {
293 padding-top: 0px;
294 }
295
296 .sb-addon-img {
297 position: absolute;
298 left: 345px;
299 top: 0;
300 height: 100%;
301 width: 200%;
302 overflow: hidden;
303 }
304
305 .sb-addon-img img {
306 width: 650px;
307 transform: rotate(-15deg);
308 margin-left: 40px;
309 margin-top: -72px;
310 box-shadow: 0 0 1px rgba(255, 255, 255, 0);
311 backface-visibility: hidden;
312 }
313
314 @media screen and (max-width: 800px) {
315 .sb-addon-img {
316 left: 300px;
317 }
318 }
319
320 @media screen and (max-width: 600px) {
321 .sb-section {
322 flex-direction: column;
323 }
324
325 .sb-features-grid {
326 grid-template-columns: repeat(1, 1fr);
327 }
328
329 .sb-socials {
330 grid-template-columns: repeat(2, 1fr);
331 }
332
333 .sb-addon {
334 height: 280px;
335 align-items: flex-start;
336 padding-top: 32px;
337 overflow: hidden;
338 }
339
340 .sb-addon-text {
341 padding-left: 24px;
342 }
343
344 .sb-addon-img {
345 right: 0;
346 left: 0;
347 top: 130px;
348 bottom: 0;
349 overflow: hidden;
350 height: auto;
351 width: 124%;
352 }
353
354 .sb-addon-img img {
355 width: 1200px;
356 transform: rotate(-12deg);
357 margin-left: 0;
358 margin-top: 48px;
359 margin-bottom: -40px;
360 margin-left: -24px;
361 }
362 }
363 `}
364</style>