Skip to content

Commit

Permalink
setup repro
Browse files Browse the repository at this point in the history
  • Loading branch information
yannbf committed Jan 25, 2024
1 parent 134111c commit 90063e5
Show file tree
Hide file tree
Showing 9 changed files with 7,611 additions and 7,669 deletions.
File renamed without changes.
22 changes: 11 additions & 11 deletions .storybook/preview.tsx → .storybook/_preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,17 @@ const preview: Preview = {
date: /Date$/,
},
},
docs: {
toc: true,
source: {
excludeDecorators: true,
},
container: (props: DocsContainerProps) => (
<ThemeProvider theme={lightTheme}>
<DocsContainer {...props} />
</ThemeProvider>
),
},
// docs: {
// toc: true,
// source: {
// excludeDecorators: true,
// },
// container: (props: DocsContainerProps) => (
// <ThemeProvider theme={lightTheme}>
// <DocsContainer {...props} />
// </ThemeProvider>
// ),
// },
},
globalTypes: {
theme: {
Expand Down
15 changes: 5 additions & 10 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,13 @@
import { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
stories: [
'../src/docs/Introduction.mdx',
'../src/docs/*.mdx',
'../src/**/*.mdx',
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
stories: ['../src/docs/Introduction.mdx'],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-a11y',
'@storybook/addon-coverage',
'@storybook/addon-designs',
// '@storybook/addon-interactions',
// '@storybook/addon-a11y',
// '@storybook/addon-coverage',
// '@storybook/addon-designs',
],
typescript: {
reactDocgen: 'react-docgen',
Expand Down
874 changes: 0 additions & 874 deletions .yarn/releases/yarn-3.6.1.cjs

This file was deleted.

893 changes: 893 additions & 0 deletions .yarn/releases/yarn-4.0.2.cjs

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion .yarnrc.yml
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
16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@
"devDependencies": {
"@babel/core": "^7.14.6",
"@ladle/react": "^2.4.5",
"@storybook/addon-a11y": "8.0.0-alpha.10",
"@storybook/addon-a11y": "8.0.0-alpha.14",
"@storybook/addon-coverage": "^0.0.9",
"@storybook/addon-designs": "^7.0.5",
"@storybook/addon-essentials": "8.0.0-alpha.10",
"@storybook/addon-interactions": "8.0.0-alpha.10",
"@storybook/blocks": "8.0.0-alpha.10",
"@storybook/react": "8.0.0-alpha.10",
"@storybook/react-vite": "8.0.0-alpha.10",
"@storybook/test": "8.0.0-alpha.10",
"@storybook/addon-essentials": "8.0.0-alpha.14",
"@storybook/addon-interactions": "8.0.0-alpha.14",
"@storybook/blocks": "8.0.0-alpha.14",
"@storybook/react": "8.0.0-alpha.14",
"@storybook/react-vite": "8.0.0-alpha.14",
"@storybook/test": "8.0.0-alpha.14",
"@storybook/test-runner": "next",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^12.1.2",
Expand Down Expand Up @@ -106,7 +106,7 @@
"prettier": "^2.5.0",
"react-is": "^17.0.2",
"react-test-renderer": "^17.0.2",
"storybook": "8.0.0-alpha.10",
"storybook": "8.0.0-alpha.14",
"storybook-mobile-addon": "^2.0.2",
"vite": "^4.0.0",
"vite-plugin-svgr": "^2.2.2",
Expand Down
201 changes: 0 additions & 201 deletions src/docs/Introduction.mdx
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>
Loading

0 comments on commit 90063e5

Please sign in to comment.