コードフォーマット

.storybook/main.js

@@ -1,11 +1,5 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ],
-  "framework": "@storybook/react"
-}
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react',
+};

.storybook/preview.js

@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

src/stories/Button.tsx

@@ -34,11 +34,15 @@ export const Button = ({
   label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary
+    ? 'storybook-button--primary'
+    : 'storybook-button--secondary';
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['storybook-button', `storybook-button--${size}`, mode].join(
+        ' ',
+      )}
       style={{ backgroundColor }}
       {...props}
     >

src/stories/Header.tsx

@@ -10,11 +10,21 @@ interface HeaderProps {
   onCreateAccount: () => void;
 }
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+export const Header = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: HeaderProps) => (
   <header>
     <div className="wrapper">
       <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <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"
@@ -38,7 +48,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+            />
           </>
         )}
       </div>

src/stories/Page.tsx

@@ -10,48 +10,75 @@ interface PageProps {
   onCreateAccount: () => void;
 }
 
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => (
+export const Page = ({
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: PageProps) => (
   <article>
-    <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
+    <Header
+      user={user}
+      onLogin={onLogin}
+      onLogout={onLogout}
+      onCreateAccount={onCreateAccount}
+    />
 
     <section>
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a{' '}
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://componentdriven.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           <strong>component-driven</strong>
         </a>{' '}
         process starting with atomic components and ending with pages.
       </p>
       <p>
-        Render pages with mock data. This makes it easy to build and review page states without
-        needing to navigate to them in your app. Here are some handy patterns for managing page data
-        in Storybook:
+        Render pages with mock data. This makes it easy to build and review page
+        states without needing to navigate to them in your app. Here are some
+        handy patterns for managing page data in Storybook:
       </p>
       <ul>
         <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
+          Use a higher-level connected component. Storybook helps you compose
+          such data from the "args" of child component stories
         </li>
         <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
+          Assemble data in the page component from your services. You can mock
+          these services out using Storybook.
         </li>
       </ul>
       <p>
         Get a guided tutorial on component-driven development at{' '}
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://storybook.js.org/tutorials/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Storybook tutorials
         </a>
         . Read more in the{' '}
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+        <a
+          href="https://storybook.js.org/docs"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           docs
         </a>
         .
       </p>
       <div className="tip-wrapper">
         <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 12 12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g fill="none" fillRule="evenodd">
             <path
               d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"