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