CLI: react

storybookjs · Jun 11, 2020 · 082667e · 082667e
1 parent fff0916
commit 082667e
Show file tree

Hide file tree

Showing 34 changed files with 360 additions and 332 deletions.
diff --git a/...template-csf/stories/0-Welcome.stories.js → .../frameworks/react/js/0-Welcome.stories.js b/...template-csf/stories/0-Welcome.stories.js → .../frameworks/react/js/0-Welcome.stories.js
@@ -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',

diff --git a/.../template-csf/stories/1-Button.stories.js → ...c/frameworks/react/js/1-Button.stories.js b/.../template-csf/stories/1-Button.stories.js → ...c/frameworks/react/js/1-Button.stories.js
@@ -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',

diff --git a/lib/cli/src/frameworks/react/js/Button.jsx b/lib/cli/src/frameworks/react/js/Button.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+const styles = {
+  border: '1px solid #eee',
+  borderRadius: 3,
+  backgroundColor: '#FFFFFF',
+  cursor: 'pointer',
+  fontSize: 15,
+  padding: '3px 10px',
+  margin: 10,
+};
+
+export const Button = ({ children, onClick }) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
diff --git a/lib/cli/src/frameworks/react/js/Welcome.jsx b/lib/cli/src/frameworks/react/js/Welcome.jsx
@@ -0,0 +1,126 @@
+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>
+);
+
+export 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>
+);
diff --git a/...-csf-ts/src/stories/0-Welcome.stories.tsx → ...frameworks/react/ts/0-Welcome.stories.tsx b/...-csf-ts/src/stories/0-Welcome.stories.tsx → ...frameworks/react/ts/0-Welcome.stories.tsx
@@ -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',

diff --git a/...e-csf-ts/src/stories/1-Button.stories.tsx → .../frameworks/react/ts/1-Button.stories.tsx b/...e-csf-ts/src/stories/1-Button.stories.tsx → .../frameworks/react/ts/1-Button.stories.tsx
@@ -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',

diff --git a/lib/cli/src/frameworks/react/ts/Button.tsx b/lib/cli/src/frameworks/react/ts/Button.tsx
@@ -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,
+};
+
+export type ButtonProps = HTMLAttributes<HTMLButtonElement>;
+export const Button: FunctionComponent<ButtonProps> = ({ children, onClick }: ButtonProps) => (
+  <button onClick={onClick} style={styles} type="button">
+    {children}
+  </button>
+);
+
+export default Button;
diff --git a/lib/cli/src/frameworks/react/ts/Welcome.tsx b/lib/cli/src/frameworks/react/ts/Welcome.tsx
@@ -0,0 +1,159 @@
+import React, {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FunctionComponent,
+  HTMLAttributes,
+} from 'react';
+
+type MainProps = Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'style'>;
+const Main: FunctionComponent<MainProps> = (props) => (
+  <article
+    {...props}
+    style={{
+      padding: 15,
+      lineHeight: 1.4,
+      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      backgroundColor: '#fff',
+      color: '#000',
+    }}
+  />
+);
+
+type TitleProps = DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+const Title: FunctionComponent<TitleProps> = ({ children, ...props }) => (
+  <h1 {...props}>{children}</h1>
+);
+
+type NoteProps = Omit<
+  DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>,
+  'style'
+>;
+const Note: FunctionComponent<NoteProps> = (props) => (
+  <p
+    {...props}
+    style={{
+      opacity: 0.5,
+    }}
+  />
+);
+
+type InlineCodeProps = Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, 'style'>;
+const InlineCode: FunctionComponent<InlineCodeProps> = (props) => (
+  <code
+    {...props}
+    style={{
+      fontSize: 15,
+      fontWeight: 600,
+      padding: '2px 5px',
+      border: '1px solid #eae9e9',
+      borderRadius: 4,
+      backgroundColor: '#f3f2f2',
+      color: '#3a3a3a',
+    }}
+  />
+);
+
+type LinkProps = Omit<
+  DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
+  'style'
+> & {
+  href: string;
+  target: string;
+  rel: string;
+};
+const Link: FunctionComponent<LinkProps> = ({ 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>
+);
+
+type NavButtonProps = Omit<
+  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'style' | 'type'
+> & {};
+const NavButton: FunctionComponent<NavButtonProps> = ({ 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>
+);
+
+export interface WelcomeProps {
+  showApp: () => void;
+}
+export const Welcome: FunctionComponent<WelcomeProps> = ({ showApp }: WelcomeProps) => (
+  <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>
+);
+Welcome.displayName = 'Welcome';
+
+export { Welcome as default };
diff --git a/lib/cli/src/generators/REACT/index.ts b/lib/cli/src/generators/REACT/index.ts
@@ -1,32 +1,12 @@
-import { getBabelDependencies, copyTemplate } from '../../helpers';
+import { baseGenerator, Generator } from '../generator';
 import { StoryFormat } from '../../project_types';
-import { Generator } from '../Generator';
+import { copyTemplate } from '../../helpers';
 
-const generator: Generator = async (packageManager, npmOptions, { storyFormat }) => {
-  const packages = [
-    '@storybook/react',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addons',
-  ];
-  if (storyFormat === StoryFormat.MDX) {
-    packages.push('@storybook/addon-docs');
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(packageManager, npmOptions, options, 'react');
+  if (options.storyFormat === StoryFormat.MDX) {
+    copyTemplate(__dirname, StoryFormat.MDX);
   }
-
-  const versionedPackages = await packageManager.getVersionedPackages(...packages);
-
-  copyTemplate(__dirname, storyFormat);
-
-  const packageJson = packageManager.retrievePackageJson();
-
-  const babelDependencies = await getBabelDependencies(packageManager, packageJson);
-
-  packageManager.addDependencies({ ...npmOptions, packageJson }, [
-    ...versionedPackages,
-    ...babelDependencies,
-  ]);
-
-  packageManager.addStorybookCommandInScripts();
 };
 
 export default generator;