improve examples

chromaui · Nov 22, 2024 · 22a538c · 22a538c
1 parent 75c2c5f
commit 22a538c
Show file tree

Hide file tree

Showing 16 changed files with 333 additions and 241 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -11,12 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     # Job steps
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - run: yarn
+      - name: Install dependencies
+        run: yarn
         #👇 Adds Chromatic as a step in the workflow
-      - uses: chromaui/action@v1
+      - uses: chromaui/action@latest
         # Options required for Chromatic's GitHub Action
         with:
           #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/en/deploy/ to obtain it

diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -13,8 +13,6 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+  docs: {},
 }
 export default config
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -22,6 +22,17 @@
     "storybook": "storybook dev -p 6006",
     "test-storybook": "vitest --project=storybook"
   },
+  "imports": {
+    "#*": [
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx"
+    ],
+    "#utils/date": {
+      "storybook": "./src/utils/date.mock.ts",
+      "default": "./src/utils/date.ts"
+    }
+  },
   "dependencies": {
     "@reduxjs/toolkit": "^2.0.1",
     "react": "^18.2.0",
@@ -30,13 +41,13 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-a11y": "^8.4.0",
-    "@storybook/addon-essentials": "^8.4.0",
-    "@storybook/blocks": "^8.4.0",
-    "@storybook/experimental-addon-test": "^8.4.4",
-    "@storybook/react": "^8.4.0",
-    "@storybook/react-vite": "^8.4.0",
-    "@storybook/test": "^8.4.0",
+    "@storybook/addon-a11y": "^8.5.0-alpha.9",
+    "@storybook/addon-essentials": "^8.5.0-alpha.9",
+    "@storybook/blocks": "^8.5.0-alpha.9",
+    "@storybook/experimental-addon-test": "^8.5.0-alpha.9",
+    "@storybook/react": "^8.5.0-alpha.9",
+    "@storybook/react-vite": "^8.5.0-alpha.9",
+    "@storybook/test": "^8.5.0-alpha.9",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
@@ -48,18 +59,18 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
+    "mockdate": "^3.0.5",
     "msw": "^2.3.0",
     "msw-storybook-addon": "^2.0.3",
     "playwright": "^1.49.0",
     "prop-types": "^15.8.1",
-    "storybook": "^8.4.0",
+    "storybook": "^8.5.0-alpha.9",
     "ts-migrate": "^0.1.35",
     "typescript": "^5.6.3",
     "vite": "^5.2.0",
     "vitest": "^2.1.5"
   },
   "msw": {
     "workerDirectory": "public"
-  },
-  "packageManager": "[email protected]"
+  }
 }
diff --git a/src/components/InboxScreen.stories.tsx b/src/components/InboxScreen.stories.tsx
@@ -1,17 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react'
 import { HttpResponse, http, delay } from 'msw'
 import { Provider } from 'react-redux'
+import MockDate from 'mockdate'
 
 import store from '../lib/store'
 import InboxScreen from './InboxScreen'
-import { MockedState } from './TaskList.stories'
+import * as mocks from '../mocks/data'
 
 import {
   userEvent,
   waitFor,
   within,
   waitForElementToBeRemoved,
 } from '@storybook/test'
+import { getFormattedDate } from '#utils/date.mock.ts'
 
 const meta = {
   component: InboxScreen,
@@ -29,22 +31,26 @@ export const Default: Story = {
         http.get(
           'https://jsonplaceholder.typicode.com/todos',
           () => {
-            return HttpResponse.json(MockedState.tasks)
+            return HttpResponse.json(mocks.tasks)
           }
         ),
       ],
     },
   },
+}
+
+export const PinnedTasks: Story = {
+  ...Default,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     // Waits for the component to transition from the loading state
     await waitForElementToBeRemoved(await canvas.findByTestId('loading'))
     // Waits for the component to be updated based on the store
     await waitFor(async () => {
       // Simulates pinning the first task
-      await userEvent.click(canvas.getByLabelText('pinTask-1'))
+      await userEvent.click(canvas.getByLabelText('Pin Learn more about Storybook'))
       // Simulates pinning the third task
-      await userEvent.click(canvas.getByLabelText('pinTask-3'))
+      await userEvent.click(canvas.getByLabelText('Pin Schedule annual health check-up'))
     })
   },
 }
@@ -72,3 +78,17 @@ export const Loading: Story = {
     },
   },
 }
+
+export const MockedDateWithModuleMocking: Story = {
+  ...Default,
+  beforeEach: async () => {
+    getFormattedDate.mockReturnValue('August 23, 1993')
+  }
+}
+
+export const MockedDateWithDateMocking: Story = {
+  ...Default,
+  beforeEach: async () => {
+    MockDate.set('2000-01-01T12:24:02Z')
+  }
+}
diff --git a/src/components/InboxScreen.tsx b/src/components/InboxScreen.tsx
@@ -1,9 +1,10 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 import { useDispatch, useSelector } from "../lib/hooks";
 import { fetchTasks } from "../lib/store";
 import { selectTaskbox } from "../lib/selectors";
 import TaskList from "./TaskList";
+import { getFormattedDate } from "#utils/date";
 
 export default function InboxScreen() {
   const dispatch = useDispatch();
@@ -14,6 +15,8 @@ export default function InboxScreen() {
     dispatch(fetchTasks());
   }, []);
 
+  const today = useMemo(() => getFormattedDate(new Date()), []);
+
   if (error) {
     return (
       <div className="page lists-show">
@@ -28,7 +31,7 @@ export default function InboxScreen() {
   return (
     <div className="page lists-show">
       <nav>
-        <h1 className="title-page">Taskbox</h1>
+        <h1 className="title-page">Taskbox - {today}</h1>
       </nav>
       <TaskList />
     </div>

diff --git a/src/components/Task.stories.tsx b/src/components/Task.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test';
+import { expect, fn, userEvent } from '@storybook/test';
+import * as mocks from '../mocks/data'
 
 import Task from "./Task";
 
@@ -18,11 +19,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    task: {
-      id: "1",
-      title: "Test Task",
-      state: "TASK_INBOX",
-    },
+    task: mocks.task,
   },
 };
 
@@ -44,13 +41,23 @@ export const Archived: Story = {
   },
 };
 
-const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;
-
 export const LongTitle: Story = {
   args: {
     task: {
       ...Default.args.task,
-      title: longTitleString,
+      title: `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`,
     },
   },
 };
+
+export const Test: Story = {
+  ...Default,
+  play: async({ canvas, args }) => {
+    await userEvent.click(canvas.getByLabelText('Pin Learn more about Storybook'))
+    await expect(args.onPinTask).toHaveBeenCalledWith(mocks.task.id)
+
+    await userEvent.click(canvas.getByLabelText('Archive Learn more about Storybook'))
+    await expect(args.onArchiveTask).toHaveBeenCalledWith(mocks.task.id)
+  },
+  tags: ['!autodocs']
+}
diff --git a/src/components/Task.tsx b/src/components/Task.tsx
@@ -12,11 +12,12 @@ export default function TaskComponent({
   onPinTask,
 }: TaskProps) {
   return (
-    <div className={`list-item ${state}`}>
+    <li className={`list-item ${state}`}>
       <label
         htmlFor="checked"
-        aria-label={`archiveTask-${id}`}
+        aria-label={`Archive ${title}`}
         className="checkbox"
+        onClick={() => onArchiveTask(id)} 
       >
         <input
           type="checkbox"
@@ -25,31 +26,24 @@ export default function TaskComponent({
           id={`archiveTask-${id}`}
           checked={state === "TASK_ARCHIVED"}
         />
-        <span className="checkbox-custom" onClick={() => onArchiveTask(id)} />
+        <span className="checkbox-custom"/>
       </label>
 
       <label htmlFor="title" aria-label={title} className="title">
-        <input
-          type="text"
-          value={title}
-          readOnly={true}
-          name="title"
-          placeholder="Input title"
-          style={{ textOverflow: "ellipsis" }}
-        />
+        {title}
       </label>
 
       {state !== "TASK_ARCHIVED" && (
         <button
           className="pin-button"
           onClick={() => onPinTask(id)}
           id={`pinTask-${id}`}
-          aria-label={`pinTask-${id}`}
+          aria-label={`Pin ${title}`}
           key={`pinTask-${id}`}
         >
           <span className={`icon-star`} />
         </button>
       )}
-    </div>
+    </li>
   );
 }