-
-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #237 from oogali/add-storybook
Initial Storybook integration
- Loading branch information
Showing
20 changed files
with
8,800 additions
and
116 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
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,16 @@ | ||
| module.exports = { | ||
| 'stories': [ | ||
| '../src/**/*.stories.mdx', | ||
| '../src/**/*.stories.@(js|jsx|ts|tsx)' | ||
| ], | ||
| 'addons': [ | ||
| '@storybook/addon-links', | ||
| '@storybook/addon-essentials', | ||
| '@storybook/addon-interactions', | ||
| 'storybook-addon-material-ui' | ||
| ], | ||
| 'framework': '@storybook/react', | ||
| 'features': { | ||
| 'modernInlineRender': true | ||
| } | ||
| } |
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,6 @@ | ||
| import { addons } from '@storybook/addons'; | ||
| import theme from './theme'; | ||
|
|
||
| addons.setConfig({ | ||
| theme, | ||
| }); |
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,27 @@ | ||
| import {createContext} from 'react' | ||
| import {addDecorator} from '@storybook/react' | ||
| import {ThemeProvider} from '@mui/material/styles' | ||
| import useTheme from '../src/Theme' | ||
|
|
||
| export const parameters = { | ||
| actions: { argTypesRegex: "^on[A-Z].*" }, | ||
| controls: { | ||
| matchers: { | ||
| color: /(background|color)$/i, | ||
| date: /Date$/, | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| addDecorator((Story) => { | ||
| const {theme, colorMode} = useTheme() | ||
| const ColorModeContext = createContext({toggleColorMode: () => {}}) | ||
|
|
||
| return ( | ||
| <ColorModeContext.Provider value={colorMode}> | ||
| <ThemeProvider theme={theme}> | ||
| {Story()} | ||
| </ThemeProvider> | ||
| </ColorModeContext.Provider> | ||
| ) | ||
| }) |
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,8 @@ | ||
| import { create } from '@storybook/theming'; | ||
|
|
||
| export default create({ | ||
| base: 'light', | ||
| brandTitle: 'BLDRS', | ||
| brandUrl: 'https://bldrs.ai', | ||
| brandTarget: '_self', | ||
| }); |
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 |
|---|---|---|
| @@ -0,0 +1,211 @@ | ||
| import { Meta } from '@storybook/addon-docs'; | ||
| import Code from './assets/code-brackets.svg'; | ||
| import Colors from './assets/colors.svg'; | ||
| import Comments from './assets/comments.svg'; | ||
| import Direction from './assets/direction.svg'; | ||
| import Flow from './assets/flow.svg'; | ||
| import Plugin from './assets/plugin.svg'; | ||
| import Repo from './assets/repo.svg'; | ||
| import StackAlt from './assets/stackalt.svg'; | ||
|
|
||
| <Meta title="Example/Introduction" /> | ||
|
|
||
| <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 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 { | ||
| display: block; | ||
| padding: 20px 30px 20px 15px; | ||
| 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: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 { | ||
| font-size: 14px; | ||
| 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 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. | ||
|
|
||
| Browse example stories now by navigating to them in the sidebar. | ||
| View their code in the `stories` directory to learn how they work. | ||
| We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. | ||
|
|
||
| <div className="subheading">Configure</div> | ||
|
|
||
| <div className="link-list"> | ||
| <a | ||
| className="link-item" | ||
| href="https://storybook.js.org/docs/react/addons/addon-types" | ||
| target="_blank" | ||
| > | ||
| <img src={Plugin} alt="plugin" /> | ||
| <span> | ||
| <strong>Presets for popular tools</strong> | ||
| Easy setup for TypeScript, SCSS and more. | ||
| </span> | ||
| </a> | ||
| <a | ||
| className="link-item" | ||
| href="https://storybook.js.org/docs/react/configure/webpack" | ||
| target="_blank" | ||
| > | ||
| <img src={StackAlt} alt="Build" /> | ||
| <span> | ||
| <strong>Build configuration</strong> | ||
| How to customize webpack and Babel | ||
| </span> | ||
| </a> | ||
| <a | ||
| className="link-item" | ||
| href="https://storybook.js.org/docs/react/configure/styling-and-css" | ||
| target="_blank" | ||
| > | ||
| <img src={Colors} alt="colors" /> | ||
| <span> | ||
| <strong>Styling</strong> | ||
| How to load and configure CSS libraries | ||
| </span> | ||
| </a> | ||
| <a | ||
| className="link-item" | ||
| href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" | ||
| target="_blank" | ||
| > | ||
| <img src={Flow} alt="flow" /> | ||
| <span> | ||
| <strong>Data</strong> | ||
| Providers and mocking for data libraries | ||
| </span> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div className="subheading">Learn</div> | ||
|
|
||
| <div className="link-list"> | ||
| <a className="link-item" href="https://storybook.js.org/docs" target="_blank"> | ||
| <img src={Repo} alt="repo" /> | ||
| <span> | ||
| <strong>Storybook documentation</strong> | ||
| Configure, customize, and extend | ||
| </span> | ||
| </a> | ||
| <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank"> | ||
| <img src={Direction} alt="direction" /> | ||
| <span> | ||
| <strong>In-depth guides</strong> | ||
| Best practices from leading teams | ||
| </span> | ||
| </a> | ||
| <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank"> | ||
| <img src={Code} alt="code" /> | ||
| <span> | ||
| <strong>GitHub project</strong> | ||
| View the source and add issues | ||
| </span> | ||
| </a> | ||
| <a className="link-item" href="https://discord.gg/storybook" target="_blank"> | ||
| <img src={Comments} alt="comments" /> | ||
| <span> | ||
| <strong>Discord chat</strong> | ||
| Chat with maintainers and the community | ||
| </span> | ||
| </a> | ||
| </div> | ||
|
|
||
| <div className="tip-wrapper"> | ||
| <span className="tip">Tip</span>Edit the Markdown in{' '} | ||
| <code>stories/Introduction.stories.mdx</code> | ||
| </div> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.