Format with prettier

storybookjs · Apr 23, 2021 · f8d84c8 · f8d84c8
1 parent 054ad43
commit f8d84c8
Show file tree

Hide file tree

Showing 39 changed files with 982 additions and 850 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,6 @@ npm install # or yarn
 npx sb@next init --builder storybook-builder-vite && npm run storybook
 ```
 
-
 ## Contributing
 
 Contributions are welcome!

diff --git a/packages/example-react/.storybook/main.js b/packages/example-react/.storybook/main.js
@@ -1,18 +1,18 @@
 module.exports = {
-    "stories": [
-        "../stories/**/*.stories.mdx",
-        "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+    stories: [
+        '../stories/**/*.stories.mdx',
+        '../stories/**/*.stories.@(js|jsx|ts|tsx)',
     ],
-    "addons": [
+    addons: [
         // "@storybook/addon-a11y", // still breaks
-        "@storybook/addon-links",
-        "@storybook/addon-essentials"
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
     ],
-    "core": {
-        "builder": "storybook-builder-vite"
+    core: {
+        builder: 'storybook-builder-vite',
     },
-    "viteFinal": async function webpackFinal(config, { configType }) {
+    viteFinal: async function webpackFinal(config, { configType }) {
         // customize the Vite config here
         return config;
     },
-}
+};
diff --git a/packages/example-react/package.json b/packages/example-react/package.json
@@ -4,8 +4,7 @@
     "version": "0.0.4",
     "description": "",
     "main": "index.js",
-    "scripts": {
-    },
+    "scripts": {},
     "author": "",
     "license": "MIT",
     "depencies": {

diff --git a/packages/example-react/stories/Button.jsx b/packages/example-react/stories/Button.jsx
@@ -6,45 +6,51 @@ import './button.css';
  * Primary UI component for user interaction
  */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={backgroundColor && { backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
+    const mode = primary
+        ? 'storybook-button--primary'
+        : 'storybook-button--secondary';
+    return (
+        <button
+            type="button"
+            className={[
+                'storybook-button',
+                `storybook-button--${size}`,
+                mode,
+            ].join(' ')}
+            style={backgroundColor && { backgroundColor }}
+            {...props}
+        >
+            {label}
+        </button>
+    );
 };
 
 Button.propTypes = {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary: PropTypes.bool,
-  /**
-   * What background color to use
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
-  onClick: PropTypes.func,
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary: PropTypes.bool,
+    /**
+     * What background color to use
+     */
+    backgroundColor: PropTypes.string,
+    /**
+     * How large should the button be?
+     */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /**
+     * Button contents
+     */
+    label: PropTypes.string.isRequired,
+    /**
+     * Optional click handler
+     */
+    onClick: PropTypes.func,
 };
 
 Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
+    backgroundColor: null,
+    primary: false,
+    size: 'medium',
+    onClick: undefined,
 };
diff --git a/packages/example-react/stories/Button.stories.jsx b/packages/example-react/stories/Button.stories.jsx
@@ -3,34 +3,34 @@ import React from 'react';
 import { Button } from './Button';
 
 export default {
-  title: 'Example/Button',
-  component: Button,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
+    title: 'Example/Button',
+    component: Button,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
 };
 
 const Template = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.args = {
-  primary: true,
-  label: 'Button',
+    primary: true,
+    label: 'Button',
 };
 
 export const Secondary = Template.bind({});
 Secondary.args = {
-  label: 'Button',
+    label: 'Button',
 };
 
 export const Large = Template.bind({});
 Large.args = {
-  size: 'large',
-  label: 'Button',
+    size: 'large',
+    label: 'Button',
 };
 
 export const Small = Template.bind({});
 Small.args = {
-  size: 'small',
-  label: 'Button',
+    size: 'small',
+    label: 'Button',
 };
diff --git a/packages/example-react/stories/Header.jsx b/packages/example-react/stories/Header.jsx
@@ -5,48 +5,58 @@ import { Button } from './Button';
 import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
-  <header>
-    <div className="wrapper">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <Button size="small" onClick={onLogout} label="Log out" />
-        ) : (
-          <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
-        )}
-      </div>
-    </div>
-  </header>
+    <header>
+        <div className="wrapper">
+            <div>
+                <svg
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <g fill="none" fillRule="evenodd">
+                        <path
+                            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+                            fill="#FFF"
+                        />
+                        <path
+                            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+                            fill="#555AB9"
+                        />
+                        <path
+                            d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+                            fill="#91BAF8"
+                        />
+                    </g>
+                </svg>
+                <h1>Acme</h1>
+            </div>
+            <div>
+                {user ? (
+                    <Button size="small" onClick={onLogout} label="Log out" />
+                ) : (
+                    <>
+                        <Button size="small" onClick={onLogin} label="Log in" />
+                        <Button
+                            primary
+                            size="small"
+                            onClick={onCreateAccount}
+                            label="Sign up"
+                        />
+                    </>
+                )}
+            </div>
+        </div>
+    </header>
 );
 
 Header.propTypes = {
-  user: PropTypes.shape({}),
-  onLogin: PropTypes.func.isRequired,
-  onLogout: PropTypes.func.isRequired,
-  onCreateAccount: PropTypes.func.isRequired,
+    user: PropTypes.shape({}),
+    onLogin: PropTypes.func.isRequired,
+    onLogout: PropTypes.func.isRequired,
+    onCreateAccount: PropTypes.func.isRequired,
 };
 
 Header.defaultProps = {
-  user: null,
+    user: null,
 };
diff --git a/packages/example-react/stories/Header.stories.jsx b/packages/example-react/stories/Header.stories.jsx
@@ -3,15 +3,15 @@ import React from 'react';
 import { Header } from './Header';
 
 export default {
-  title: 'Example/Header',
-  component: Header,
+    title: 'Example/Header',
+    component: Header,
 };
 
 const Template = (args) => <Header {...args} />;
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+    user: {},
 };
 
 export const LoggedOut = Template.bind({});