-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
7,611 additions
and
7,669 deletions.
There are no files selected for viewing
File renamed without changes.
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
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
This file was deleted.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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 |
---|---|---|
@@ -1,3 +1,3 @@ | ||
nodeLinker: node-modules | ||
|
||
yarnPath: .yarn/releases/yarn-3.6.1.cjs | ||
yarnPath: .yarn/releases/yarn-4.0.2.cjs |
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
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 |
---|---|---|
@@ -1,206 +1,5 @@ | ||
import { Meta } from '@storybook/blocks' | ||
import Code from './assets/code-brackets.svg' | ||
import Comments from './assets/comments.svg' | ||
import Twitter from './assets/twitter.svg' | ||
import Github from './assets/github.svg' | ||
import MealdropLogo from './assets/logo.svg' | ||
import Flow from './assets/flow.svg' | ||
import Repo from './assets/repo.svg' | ||
import Colors from './assets/colors.svg' | ||
import banner from './assets/mealdrop-banner.png' | ||
|
||
<Meta title="Getting Started/With Mealdrop" /> | ||
|
||
<style> | ||
{` | ||
.subheading { | ||
--mediumdark: '#999999'; | ||
font-weight: 900; | ||
font-size: 13px; | ||
color: #999; | ||
letter-spacing: 6px; | ||
line-height: 24px; | ||
text-transform: uppercase; | ||
margin-bottom: 12px; | ||
margin-top: 40px; | ||
} | ||
.link-list { | ||
display: grid; | ||
grid-template-columns: 1fr; | ||
grid-template-rows: 1fr; | ||
row-gap: 10px; | ||
} | ||
@media (min-width: 620px) { | ||
.link-list { | ||
row-gap: 20px; | ||
column-gap: 20px; | ||
grid-template-columns: 1fr 1fr; | ||
} | ||
} | ||
@media all and (-ms-high-contrast:none) { | ||
.link-list { | ||
display: -ms-grid; | ||
-ms-grid-columns: 1fr 1fr; | ||
-ms-grid-rows: 1fr 1fr; | ||
} | ||
} | ||
.link-item { | ||
padding: 20px; | ||
border: 1px solid #00000010; | ||
border-radius: 5px; | ||
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out; | ||
color: #333333; | ||
display: flex; | ||
align-items: flex-start; | ||
} | ||
.link-item--title-only { | ||
align-items: center; | ||
} | ||
.link-item:hover { | ||
border-color: #1EA7FD50; | ||
transform: translate3d(0, -3px, 0); | ||
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0; | ||
} | ||
.link-item:active { | ||
border-color: #1EA7FD; | ||
transform: translate3d(0, 0, 0); | ||
} | ||
.link-item strong { | ||
font-weight: 700; | ||
display: block; | ||
margin-bottom: 2px; | ||
} | ||
.link-item img { | ||
height: 40px; | ||
width: 40px; | ||
margin-right: 15px; | ||
flex: none; | ||
} | ||
.link-item span, | ||
.link-item p { | ||
margin: 0; | ||
font-size: 14px; | ||
line-height: 20px; | ||
} | ||
.link-item span strong:first-of-type { | ||
font-size: 15px; | ||
line-height: 20px; | ||
} | ||
.tip { | ||
display: inline-block; | ||
border-radius: 1em; | ||
font-size: 11px; | ||
line-height: 12px; | ||
font-weight: 700; | ||
background: #E7FDD8; | ||
color: #66BF3C; | ||
padding: 4px 12px; | ||
margin-right: 10px; | ||
vertical-align: top; | ||
} | ||
.tip-wrapper { | ||
font-size: 13px; | ||
line-height: 20px; | ||
margin-top: 40px; | ||
margin-bottom: 40px; | ||
} | ||
.tip-wrapper code { | ||
font-size: 12px; | ||
display: inline-block; | ||
} | ||
`} | ||
</style> | ||
|
||
# Welcome to Mealdrop's Storybook! | ||
|
||
Storybook helps you build UI components in isolation from your app's business logic, data, and context. | ||
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. | ||
|
||
This Storybook is part of the [Storybook for React apps](https://www.newline.co/courses/storybook-for-react-apps) course made by [Yann Braga](https://twitter.com/yannbf), where you learn how to unleash the full potential of Storybook for React apps. We start from the basics and quickly build up to learn how to develop features and even pages straight from Storybook, saving lots of development time, and at the same time creating a living documentation of components. | ||
|
||
We will see the power of addons and how they help improve the development experience and the end quality of components. We will also connect Figma to Storybook, write interaction tests using Testing Library, test accessibility, dark/light mode, and much more! | ||
|
||
**By the end of the course**, you'll be able to impress your team by implementing a tool which will _drastically_ improve the development workflow of your projects! | ||
|
||
<img src={banner} /> | ||
|
||
<div class="subheading">Check this out</div> | ||
<div class="link-list"> | ||
<a | ||
class="link-item" | ||
href="https://www.newline.co/courses/storybook-for-react-apps/welcome" | ||
target="_blank" | ||
> | ||
<img src={Repo} alt="code" /> | ||
<span> | ||
<strong>Watch the course</strong> | ||
Including some free lessons :) | ||
</span> | ||
</a> | ||
<a class="link-item" href="https://mealdrop.vercel.app/" target="_blank"> | ||
<img src={MealdropLogo} alt="direction" /> | ||
<span> | ||
<strong>Check the mealdrop app</strong> | ||
App used in the course | ||
</span> | ||
</a> | ||
<a | ||
class="link-item" | ||
href="https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop" | ||
target="_blank" | ||
> | ||
<img src={Colors} alt="direction" /> | ||
<span> | ||
<strong>Figma design</strong> | ||
Design was built by the incredible <strong>Maxim Molenaars</strong> | ||
</span> | ||
</a> | ||
</div> | ||
|
||
<div class="subheading">Already a student?</div> | ||
|
||
<div class="link-list"> | ||
<a class="link-item" href="https://github.com/yannbf/mealdrop" target="_blank"> | ||
<img src={Code} alt="code" /> | ||
<span> | ||
<strong>Mealdrop's repository</strong> | ||
This project is open source, check it out! | ||
</span> | ||
</a> | ||
<a class="link-item" href="https://discord.gg/wrn8CUMkuH" target="_blank"> | ||
<img src={Comments} alt="comments" /> | ||
<span> | ||
<strong>Discord chat</strong> | ||
Chat with the course instructor and the <strong>newline community</strong> in the <pre>#storybook-for-react-apps</pre> channel | ||
</span> | ||
</a> | ||
</div> | ||
|
||
<div class="subheading">Follow me for updates!</div> | ||
|
||
<div class="link-list"> | ||
<a class="link-item link-item--title-only" href="https://twitter.com/yannbf" target="_blank"> | ||
<img src={Twitter} alt="code" /> | ||
<strong>Twitter</strong> | ||
</a> | ||
<a class="link-item link-item--title-only" href="https://github.com/yannbf" target="_blank"> | ||
<img src={Github} alt="code" /> | ||
<strong>Github</strong> | ||
</a> | ||
</div> |
Oops, something went wrong.