-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add new Configure page to CLI templates
- Loading branch information
Showing
32 changed files
with
1,351 additions
and
919 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,309 @@ | ||
import { Meta } from '@storybook/blocks'; | ||
import Image from 'next/image'; | ||
|
||
import Accessibility from "./assets/accessibility.svg"; | ||
import Checkmark from "./assets/checkmark.svg"; | ||
import Document from "./assets/document.svg"; | ||
import Typography from "./assets/typography.svg"; | ||
import Github from "./assets/github.svg"; | ||
import Discord from "./assets/discord.svg"; | ||
import Youtube from "./assets/youtube.svg"; | ||
import Chromatic from "./assets/chromatic.svg"; | ||
import Figma from "./assets/figma.svg"; | ||
import Tutorials from "./assets/tutorials.svg"; | ||
import Styling from "./assets/styling.jpg"; | ||
import Context from "./assets/context.jpg"; | ||
import Assets from "./assets/assets.jpg"; | ||
|
||
<Meta title="Configure your project" /> | ||
|
||
# Configure your project | ||
|
||
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. | ||
|
||
<div className="section"> | ||
<div className="section-item"> | ||
<Image | ||
src={Styling} | ||
alt="A wall of logos representing different styling technologies" | ||
/> | ||
<div className="block"> | ||
<h3>Add styling and CSS</h3> | ||
<p> | ||
Like with web applications, there are many ways to include CSS within | ||
Storybook. Learn more about setting up styling within Storybook. | ||
</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/configure/styling-and-css" | ||
target="_blank" | ||
>Read more on how to set up styling <span className="chevron">›</span></a> | ||
</div> | ||
</div> | ||
<div className="section-item"> | ||
<Image | ||
src={Context} | ||
alt="An abstraction representing the composition of data for a component" | ||
/> | ||
<div className="block"> | ||
<h3>Provide context and mocking</h3> | ||
<p> | ||
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. Learn more about solving these issues by providing context | ||
and mocking to Storybook. | ||
</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/writing-stories/decorators#context-for-mocking" | ||
target="_blank" | ||
>Read more on how to set up context <span className="chevron">›</span></a> | ||
</div> | ||
</div> | ||
<div className="section-item"> | ||
<Image src={Assets} alt="A representation of typography and image assets" /> | ||
<div className="block"> | ||
<h3>Load assets and resources</h3> | ||
<p> | ||
To link static files (like fonts) to your projects and stories, use the | ||
`staticDirs` configuration option to specify folders to load when | ||
starting Storybook. | ||
</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/configure/images-and-assets" | ||
target="_blank" | ||
>Read more on how to load assets <span className="chevron">›</span></a> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
# Do more with Storybook | ||
|
||
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. | ||
|
||
<br /> | ||
|
||
<div className="section"> | ||
<div className="features-grid-container"> | ||
<div className="grid-item"> | ||
<Image src={Document} /> | ||
<h3>Autodocs</h3> | ||
<p> | ||
Auto-generate living, interactive reference documentation from your | ||
components and stories. | ||
</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/writing-docs/autodocs" | ||
target="_blank" | ||
>Learn more <span className="chevron">›</span></a> | ||
</div> | ||
<div className="grid-item"> | ||
<Image src={Checkmark} /> | ||
<h3>Testing</h3> | ||
<p> | ||
Use stories to test a component in all its variations, no matter how | ||
complex. | ||
</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/writing-tests/introduction" | ||
target="_blank" | ||
>Learn more <span className="chevron">›</span></a> | ||
</div> | ||
<div className="grid-item"> | ||
<Image src={Chromatic} /> | ||
<h3>Publish to Chromatic</h3> | ||
<p> | ||
Publish your Storybook to review and collaborate with your entire team. | ||
</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/sharing/publish-storybook#publish-storybook-with-chromatic" | ||
target="_blank" | ||
>Learn more <span className="chevron">›</span></a> | ||
</div> | ||
<div className="grid-item"> | ||
<Image src={Figma} /> | ||
<h3>Figma Plugin</h3> | ||
<p> | ||
Embed your stories into Figma to cross-reference the design and live | ||
implementation in one place. | ||
</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin" | ||
target="_blank" | ||
>Learn more <span className="chevron">›</span></a> | ||
</div> | ||
<div className="grid-item"> | ||
<Image src={Accessibility} /> | ||
<h3>Accessibility</h3> | ||
<p>Automatically test your components for a11y issues as you develop.</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/writing-tests/accessibility-testing" | ||
target="_blank" | ||
>Learn more <span className="chevron">›</span></a> | ||
</div> | ||
<div className="grid-item"> | ||
<Image src={Typography} /> | ||
<h3>Theming</h3> | ||
<p>Theme Storybook's UI to personalize it to your project.</p> | ||
<a | ||
href="https://storybook.js.org/docs/react/configure/theming" | ||
target="_blank" | ||
>Learn more <span className="chevron">›</span></a> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
# Explore and Connect | ||
|
||
Connect with our community on Discord or start contributing directly on Github. You might also be interesting in watching some videos on Youtube explaining how to take full advantage of Storybook. | ||
|
||
<br /> | ||
|
||
<div className="section"> | ||
<div className="card-grid-container"> | ||
<a | ||
className="explore-card" | ||
href="https://discord.gg/storybook" | ||
target="_blank" | ||
> | ||
<Image src={Discord} /> | ||
<span>Discord</span> | ||
</a> | ||
<a | ||
className="explore-card" | ||
href="https://github.com/storybookjs/storybook" | ||
target="_blank" | ||
> | ||
<Image src={Github} /> | ||
<span>Github</span> | ||
</a> | ||
<a | ||
className="explore-card" | ||
href="https://www.youtube.com/@chromaticui" | ||
target="_blank" | ||
> | ||
<Image src={Youtube} /> | ||
<span>Youtube</span> | ||
</a> | ||
<a | ||
className="explore-card" | ||
href="https://storybook.js.org/tutorials/" | ||
target="_blank" | ||
> | ||
<Image src={Tutorials} /> | ||
<span>Tutorials</span> | ||
</a> | ||
</div> | ||
</div> | ||
|
||
<style> | ||
{` | ||
.section { | ||
width: 100%; | ||
margin-bottom: 64px; | ||
} | ||
.section img { | ||
border-radius: 10px; | ||
max-height: 170px; | ||
} | ||
.section-item { | ||
width: 100%; | ||
margin-bottom: 20px; | ||
width: 100%; | ||
display: flex; | ||
gap: 18px; | ||
align-items: center; | ||
} | ||
.section-item a, | ||
.grid-item a { | ||
font-size: 13px; | ||
transition: transform 150ms ease-out,color 150ms ease-out; | ||
} | ||
.section-item img { | ||
width: 297px; | ||
} | ||
.section-item a > p, | ||
.grid-item a > p { | ||
all: unset; | ||
} | ||
.block { | ||
flex: 1; | ||
margin-left: 10px; | ||
} | ||
.chevron { | ||
margin-left: 5px; | ||
} | ||
.features-grid-container { | ||
display: grid; | ||
grid-template-columns: repeat(3, 1fr); | ||
grid-gap: 40px 20px; | ||
} | ||
.grid-item img { | ||
max-height: 48px; | ||
margin-bottom: 12px; | ||
} | ||
.card-grid-container { | ||
display: grid; | ||
grid-template-columns: repeat(4, 1fr); | ||
grid-gap: 20px; | ||
} | ||
.explore-card { | ||
border-radius: 8px; | ||
border: 2px solid #00000010; | ||
padding: 20px; | ||
display: grid; | ||
justify-content: center; | ||
font-weight: 700; | ||
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; | ||
color: #333333; | ||
gap: 8px; | ||
} | ||
.explore-card:hover { | ||
border-color: #1EA7FD50; | ||
transform: translate3d(0, -3px, 0); | ||
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; | ||
} | ||
.explore-card:active { | ||
border-color: #1EA7FD; | ||
transform: translate3d(0, 0, 0); | ||
} | ||
section h3 { | ||
font-size: 16px !important; | ||
} | ||
.card-background { | ||
width: 100%; | ||
height: 150px; | ||
background-color: #ccc; | ||
} | ||
@media screen and (max-width: 600px) { | ||
.section-item { | ||
flex-direction: column; | ||
align-items: flex-start; | ||
} | ||
.block { | ||
margin-left: 0; | ||
margin-top: 10px; | ||
} | ||
.features-grid-container { | ||
grid-template-columns: repeat(1, 1fr); | ||
} | ||
.card-grid-container { | ||
grid-template-columns: repeat(2, 1fr); | ||
} | ||
} | ||
`} | ||
</style> |
Oops, something went wrong.