Skip to content

Commit

Permalink
Add new Configure page to CLI templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@yannbf
yannbf committed Jun 21, 2023
1 parent ed10589 commit ea6b5e4
Show file tree
Hide file tree
Showing 33 changed files with 1,270 additions and 922 deletions.
288 changes: 288 additions & 0 deletions code/frameworks/nextjs/template/cli/js/Configure.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,288 @@
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">&#8250;</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">&#8250;</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">&#8250;</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} alt="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">&#8250;</span></a>
</div>
<div className="grid-item">
<Image src={Checkmark} alt="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">&#8250;</span></a>
</div>
<div className="grid-item">
<Image src={Chromatic} alt="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">&#8250;</span></a>
</div>
<div className="grid-item">
<Image src={Figma} alt="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">&#8250;</span></a>
</div>
<div className="grid-item">
<Image src={Accessibility} alt="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">&#8250;</span></a>
</div>
<div className="grid-item">
<Image src={Typography} alt="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">&#8250;</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} alt="Discord" />
<span>Discord</span>
</a>
<a
className="explore-card"
href="https://github.com/storybookjs/storybook"
target="_blank"
>
<Image src={Github} alt="Github" />
<span>Github</span>
</a>
<a
className="explore-card"
href="https://www.youtube.com/@chromaticui"
target="_blank"
>
<Image src={Youtube} alt="Youtube" />
<span>Youtube</span>
</a>
<a
className="explore-card"
href="https://storybook.js.org/tutorials/"
target="_blank"
>
<Image src={Tutorials} alt="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>
Loading

0 comments on commit ea6b5e4

Please sign in to comment.