stories(frontend): 📖 formatting of various stories files (#7)

vhs · Sep 29, 2024 · 12c9720 · 12c9720
1 parent af781d7
commit 12c9720
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 83 deletions.
diff --git a/packages/frontend/src/components/App/App.lazy.tsx b/packages/frontend/src/components/App/App.lazy.tsx
@@ -2,9 +2,7 @@ import React, { lazy, Suspense } from 'react'
 
 const LazyApp = lazy(() => import('./App'))
 
-const App = (
-    props: JSX.IntrinsicAttributes & { children?: React.ReactNode }
-) => (
+const App = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode }) => (
     <Suspense fallback={null}>
         <LazyApp {...props} />
     </Suspense>

diff --git a/packages/frontend/src/stories/Button.tsx b/packages/frontend/src/stories/Button.tsx
@@ -14,24 +14,12 @@ export interface ButtonProps {
 }
 
 /** Primary UI component for user interaction */
-export const Button = ({
-    primary = false,
-    size = 'medium',
-    backgroundColor,
-    label,
-    ...props
-}: ButtonProps) => {
-    const mode = primary
-        ? 'storybook-button--primary'
-        : 'storybook-button--secondary'
+export const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props }: ButtonProps) => {
+    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}
         >

diff --git a/packages/frontend/src/stories/Header.tsx b/packages/frontend/src/stories/Header.tsx
@@ -12,34 +12,18 @@ export interface HeaderProps {
     onCreateAccount?: () => void
 }
 
-export const Header = ({
-    user,
-    onLogin,
-    onLogout,
-    onCreateAccount
-}: HeaderProps) => (
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
     <header>
         <div className='storybook-header'>
             <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'
                             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'
-                        />
+                        <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>
@@ -50,21 +34,12 @@ export const Header = ({
                         <span className='welcome'>
                             Welcome, <b>{user.name}</b>!
                         </span>
-                        <Button
-                            size='small'
-                            onClick={onLogout}
-                            label='Log out'
-                        />
+                        <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'
-                        />
+                        <Button primary size='small' onClick={onCreateAccount} label='Sign up' />
                     </>
                 )}
             </div>

diff --git a/packages/frontend/src/stories/Page.tsx b/packages/frontend/src/stories/Page.tsx
@@ -23,61 +23,39 @@ export const Page: React.FC = () => {
                 <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.
+                    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'
-                    >
+                    <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'>
                         <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'