Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cli: colocate stories and components, centralize main.js #10913

Closed
wants to merge 56 commits into from
Closed
Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
dae9d40
rename generator
tooppaaa May 25, 2020
5597f5a
CLI: react stories
tooppaaa May 25, 2020
b2d5744
fix build
tooppaaa May 25, 2020
fb1a124
fixes
tooppaaa May 25, 2020
8434dcc
fix tests
tooppaaa May 25, 2020
8673294
fix unit test
tooppaaa May 25, 2020
2b5372e
fix lint
tooppaaa May 25, 2020
93eaae0
fix tests
tooppaaa May 25, 2020
665163d
fix unit test
tooppaaa May 25, 2020
7cf2595
Feedbacks
tooppaaa May 26, 2020
f535af4
Move ember
tooppaaa May 26, 2020
2783b12
Move Meteor
tooppaaa May 26, 2020
79d6b00
Move mithril
tooppaaa May 26, 2020
06e3c14
Move preact
tooppaaa May 26, 2020
fb3845d
Move rax
tooppaaa May 26, 2020
5ba3eef
Move riot
tooppaaa May 26, 2020
ba37d85
Move svelte
tooppaaa May 26, 2020
4722220
Move marko and cleanup
tooppaaa May 26, 2020
0e2f5f6
Move marionette
tooppaaa May 26, 2020
cdea7b9
Move vue
tooppaaa May 26, 2020
6d3eec2
Move html
tooppaaa May 26, 2020
6aad11e
no tabs
ndelangen May 28, 2020
c40b550
Merge remote-tracking branch 'origin/next' into tech/colocateReactSto…
tooppaaa May 28, 2020
858ff9f
Merge branch 'tech/colocateReactStories' into tech/colocateSomeStories
tooppaaa May 28, 2020
62d58b2
Merge pull request #10935 from storybookjs/tech/colocateSomeStories
tooppaaa May 28, 2020
10dbb81
Move WebComponents
tooppaaa May 28, 2020
6a29fb0
Move react-native
tooppaaa May 28, 2020
15f14a3
Move & clean aurelia
tooppaaa May 28, 2020
5931abc
Move and clean Angular
tooppaaa May 28, 2020
29f0473
Oops
tooppaaa May 28, 2020
b3a46d8
fix tests
tooppaaa May 29, 2020
61f6968
Merge remote-tracking branch 'origin/next' into tech/colocateReactSto…
tooppaaa Jun 5, 2020
e052b64
Merge branch 'tech/colocateReactStories' into tech/colocateMoreStories
tooppaaa Jun 5, 2020
2ce9d3e
Merge pull request #10972 from storybookjs/tech/colocateMoreStories
tooppaaa Jun 5, 2020
dde7de4
add angular stories back
tooppaaa Jun 5, 2020
4ef5c55
fix aurelia
tooppaaa Jun 5, 2020
68d6644
fix welcome story
tooppaaa Jun 5, 2020
fde26b3
remove plugin-external-helpers from fixtures
tooppaaa Jun 6, 2020
6802976
Merge remote-tracking branch 'origin/next' into tech/colocateReactSto…
tooppaaa Jun 7, 2020
6dc8533
merge
tooppaaa Jun 7, 2020
0002cd9
fix copy template when needed
tooppaaa Jun 7, 2020
5fda409
fix build
tooppaaa Jun 7, 2020
eb0cd84
switch to docs over essentials
tooppaaa Jun 8, 2020
5cb9011
fix build
tooppaaa Jun 8, 2020
c928b20
make it green
tooppaaa Jun 8, 2020
fbb5d89
Fix yarn 2
tooppaaa Jun 9, 2020
2570a66
fix(cli): use the same list of addons to build `main.js` as the one a…
gaetanmaisse Jun 9, 2020
0e8ae86
fix(cli): add peer deps of storybook addons when init a project
gaetanmaisse Jun 9, 2020
6e68926
PR Feedbacks
tooppaaa Jun 9, 2020
aca5302
Use docs & actions for now
tooppaaa Jun 9, 2020
d7113b5
Merge branch 'next' into tech/colocateReactStories
ndelangen Jun 10, 2020
afffa12
Revert "remove plugin-external-helpers from fixtures"
tooppaaa Jun 11, 2020
bf7616d
move vue
tooppaaa Jun 11, 2020
638b51e
Merge remote-tracking branch 'origin/next' into tech/colocateReactSto…
tooppaaa Jun 11, 2020
669fdb8
finish merge
tooppaaa Jun 11, 2020
6fc491c
fix merge
tooppaaa Jun 11, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/cli/.babelrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
]
],
"ignore": [
"./src/frameworks",
"./src/generators/**/template",
"./src/generators/**/template-csf",
"./src/generators/**/template-csf-ts",
Expand Down
17 changes: 15 additions & 2 deletions lib/cli/src/generators/.eslintrc.js → lib/cli/src/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ const ignore = 0;
module.exports = {
overrides: [
{
files: '*/template[-?]*/**',
files: '**/template[-?]*/**',
env: {
browser: true,
},
rules: {
'react/no-this-in-sfc': ignore,
'import/no-unresolved': ignore,
'react/react-in-jsx-scope': ignore,
'import/no-extraneous-dependencies': ignore,
'global-require': ignore,
'react/react-in-jsx-scope': ignore,
},
},
{
Expand All @@ -21,5 +21,18 @@ module.exports = {
browser: false,
},
},
{
files: 'frameworks/**/*',
env: {
browser: true,
},
rules: {
'jsx-a11y/anchor-is-valid': ignore,
'import/no-unresolved': ignore,
'react/prop-types': ignore,
'react/react-in-jsx-scope': ignore,
'import/no-extraneous-dependencies': ignore,
},
},
],
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';
import Welcome from './Welcome';
tooppaaa marked this conversation as resolved.
Show resolved Hide resolved

export default {
title: 'Welcome',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { Button } from '@storybook/react/demo';
import Button from './Button';

export default {
title: 'Button',
Expand Down
19 changes: 19 additions & 0 deletions lib/cli/src/frameworks/react/js/Button.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';

const styles = {
border: '1px solid #eee',
borderRadius: 3,
backgroundColor: '#FFFFFF',
cursor: 'pointer',
fontSize: 15,
padding: '3px 10px',
margin: 10,
};

const Button = ({ children, onClick }) => (
<button onClick={onClick} style={styles} type="button">
{children}
</button>
);

export default Button;
128 changes: 128 additions & 0 deletions lib/cli/src/frameworks/react/js/Welcome.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import React from 'react';

const Main = (props) => (
<article
{...props}
style={{
padding: 15,
lineHeight: 1.4,
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
backgroundColor: '#fff',
color: '#000',
}}
/>
);

const Title = ({ children, ...props }) => <h1 {...props}>{children}</h1>;

const Note = (props) => (
<p
{...props}
style={{
opacity: 0.5,
}}
/>
);

const InlineCode = (props) => (
<code
{...props}
style={{
fontSize: 15,
fontWeight: 600,
padding: '2px 5px',
border: '1px solid #eae9e9',
borderRadius: 4,
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
}}
/>
);

const Link = ({ children, href, target, rel, ...props }) => (
<a
href={href}
{...props}
target={target}
rel={rel}
style={{
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
}}
>
{children}
</a>
);

const NavButton = ({ children, onClick, ...props }) => (
<button
{...props}
type="button"
onClick={onClick}
style={{
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
borderTop: 'none',
borderRight: 'none',
borderLeft: 'none',
backgroundColor: 'transparent',
padding: 0,
cursor: 'pointer',
font: 'inherit',
}}
>
{children}
</button>
);

const Welcome = ({ showApp }) => (
<Main>
<Title>Welcome to storybook</Title>
<p>This is a UI component dev environment for your app.</p>
<p>
We've added some basic stories inside the <InlineCode>src/stories</InlineCode> directory.
<br />A story is a single state of one or more UI components. You can have as many stories as
you want.
<br />
(Basically a story is like a visual test case.)
</p>
<p>
See these sample <NavButton onClick={showApp}>stories</NavButton> for a component called&nbsp;
<InlineCode>Button</InlineCode>.
</p>
<p>
Just like that, you can add your own components as stories.
<br />
You can also edit those components and see changes right away.
<br />
(Try editing the <InlineCode>Button</InlineCode> stories located at&nbsp;
<InlineCode>src/stories/1-Button.stories.js</InlineCode>
.)
</p>
<p>
Usually we create stories with smaller UI components in the app.
<br />
Have a look at the&nbsp;
<Link
href="https://storybook.js.org/basics/writing-stories"
target="_blank"
rel="noopener noreferrer"
>
Writing Stories
</Link>
&nbsp;section in our documentation.
</p>
<Note>
<b>NOTE:</b>
<br />
Have a look at the <InlineCode>.storybook/webpack.config.js</InlineCode> to add webpack
loaders and plugins you are using in this project.
</Note>
</Main>
);

export default Welcome;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';
import Welcome from './Welcome';

export default {
title: 'Welcome',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { Button } from '@storybook/react/demo';
import Button from './Button';

export default {
title: 'Button',
Expand Down
20 changes: 20 additions & 0 deletions lib/cli/src/frameworks/react/ts/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, { FunctionComponent, HTMLAttributes } from 'react';

const styles = {
border: '1px solid #eee',
borderRadius: 3,
backgroundColor: '#FFFFFF',
cursor: 'pointer',
fontSize: 15,
padding: '3px 10px',
margin: 10,
};

type Props = Pick<HTMLAttributes<HTMLButtonElement>, 'onClick'>;
const Button: FunctionComponent<Props> = ({ children, onClick }) => (
<button onClick={onClick} style={styles} type="button">
{children}
</button>
);

export default Button;
Loading