feat: ✨ bump storybook to v8.4.0 (#123)

.storybook/main.ts

@@ -1,19 +1,19 @@
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/addon-themes",
     "@storybook/addon-a11y",
   ],
+  docs: {},
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {},
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
 } satisfies StorybookConfig;
 
 export default config;

.storybook/preview.ts

@@ -1,9 +1,21 @@
 import "../src/main.css";
 
-import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react";
 
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+
 const preview = {
+  decorators: [
+    withThemeByDataAttribute({
+      attributeName: "data-theme",
+      defaultTheme: "dark",
+      themes: {
+        dark: "dark",
+        light: "light",
+      },
+    }),
+  ],
+
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
@@ -13,17 +25,6 @@ const preview = {
       },
     },
   },
-
-  decorators: [
-    withThemeByDataAttribute({
-      themes: {
-        light: "light",
-        dark: "dark",
-      },
-      defaultTheme: "dark",
-      attributeName: "data-theme",
-    }),
-  ],
 } satisfies Preview;
 
 export default preview;

.vscode/settings.json

@@ -7,6 +7,7 @@
     "daisyui",
     "gitzy",
     "iconify",
+    "jiti",
     "knip",
     "lefthook",
     "lockb",

e2e/app.spec.ts

@@ -12,7 +12,7 @@ test("not found", async ({ page }) => {
   await expect(page).toHaveTitle(/React Starter/);
 
   await expect(
-    page.getByRole("heading", { name: "Error", level: 1 }),
+    page.getByRole("heading", { level: 1, name: "Error" }),
   ).toBeInViewport();
 });
 
@@ -21,7 +21,7 @@ test.describe("external links", () => {
     await page.goto("/");
   });
 
-  test("opened vite docs", async ({ page, context }) => {
+  test("opened vite docs", async ({ context, page }) => {
     const pagePromise = context.waitForEvent("page");
 
     await page.getByRole("link", { name: /vite/i }).click();
@@ -33,10 +33,10 @@ test.describe("external links", () => {
     await expect(newPage).toHaveURL("https://vite.dev/");
   });
 
-  test("opened React docs", async ({ page, context }) => {
+  test("opened React docs", async ({ context, page }) => {
     const pagePromise = context.waitForEvent("page");
 
-    await page.getByRole("link", { name: "React", exact: true }).click();
+    await page.getByRole("link", { exact: true, name: "React" }).click();
 
     const newPage = await pagePromise;
 
@@ -45,7 +45,7 @@ test.describe("external links", () => {
     await expect(newPage).toHaveURL("https://react.dev/");
   });
 
-  test("opened TypeScript docs", async ({ page, context }) => {
+  test("opened TypeScript docs", async ({ context, page }) => {
     const pagePromise = context.waitForEvent("page");
 
     await page.getByRole("link", { name: /TypeScript/i }).click();
@@ -57,7 +57,7 @@ test.describe("external links", () => {
     await expect(newPage).toHaveURL("https://www.typescriptlang.org/");
   });
 
-  test("opened tailwindcss docs", async ({ page, context }) => {
+  test("opened tailwindcss docs", async ({ context, page }) => {
     const pagePromise = context.waitForEvent("page");
 
     await page.getByRole("link", { name: /tailwindcss/i }).click();
@@ -69,7 +69,7 @@ test.describe("external links", () => {
     await expect(newPage).toHaveURL("https://tailwindcss.com/");
   });
 
-  test("opened repo", async ({ page, context }) => {
+  test("opened repo", async ({ context, page }) => {
     const pagePromise = context.waitForEvent("page");
 
     await page.getByRole("link", { name: "GitHub" }).click();
@@ -83,7 +83,7 @@ test.describe("external links", () => {
     );
   });
 
-  test("opened Bun", async ({ page, context }) => {
+  test("opened Bun", async ({ context, page }) => {
     const pagePromise = context.waitForEvent("page");
 
     await page.getByRole("link", { name: "Bun" }).click();
@@ -95,7 +95,7 @@ test.describe("external links", () => {
     await expect(newPage).toHaveURL("https://bun.sh");
   });
 
-  test("opened daisyUI docs", async ({ page, context }) => {
+  test("opened daisyUI docs", async ({ context, page }) => {
     const pagePromise = context.waitForEvent("page");
 
     await page.getByRole("link", { name: /daisyUI/i }).click();

eslint.config.ts

@@ -5,5 +5,5 @@ import eslintPluginStorybook from "eslint-plugin-storybook";
 export default jimmyDotCodes({
   autoDetect: true,
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-  overrides: [...eslintPluginStorybook.configs["flat/recommended"]],
+  configs: [...eslintPluginStorybook.configs["flat/recommended"]],
 });

package.json

@@ -26,7 +26,7 @@
   "prettier": "@jimmy.codes/prettier-config",
   "dependencies": {
     "@tanstack/react-query": "5.59.16",
-    "@tanstack/react-router": "1.77.8",
+    "@tanstack/react-router": "1.77.9",
     "clsx": "2.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -36,22 +36,22 @@
     "@iconify-json/logos": "1.2.3",
     "@iconify-json/lucide": "1.2.11",
     "@iconify/tailwind": "1.1.3",
-    "@jimmy.codes/eslint-config": "2.0.0",
+    "@jimmy.codes/eslint-config": "3.2.1",
     "@jimmy.codes/prettier-config": "1.1.0",
     "@playwright/test": "1.48.2",
-    "@storybook/addon-a11y": "8.3.6",
-    "@storybook/addon-essentials": "8.3.6",
-    "@storybook/addon-interactions": "8.3.6",
-    "@storybook/addon-links": "8.3.6",
-    "@storybook/addon-themes": "8.3.6",
-    "@storybook/react": "8.3.6",
-    "@storybook/react-vite": "8.3.6",
+    "@storybook/addon-a11y": "8.4.0",
+    "@storybook/addon-essentials": "8.4.0",
+    "@storybook/addon-interactions": "8.4.0",
+    "@storybook/addon-links": "8.4.0",
+    "@storybook/addon-themes": "8.4.0",
+    "@storybook/react": "8.4.0",
+    "@storybook/react-vite": "8.4.0",
     "@tailwindcss/typography": "0.5.15",
     "@tanstack/react-query-devtools": "5.59.16",
-    "@tanstack/router-devtools": "1.77.8",
+    "@tanstack/router-devtools": "1.77.9",
     "@tanstack/router-vite-plugin": "1.77.7",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.6.2",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@total-typescript/ts-reset": "0.6.1",
@@ -69,12 +69,12 @@
     "happy-dom": "15.7.4",
     "is-ci": "3.0.1",
     "jiti": "2.3.3",
-    "knip": "5.34.4",
+    "knip": "5.36.0",
     "lefthook": "1.8.2",
     "msw": "2.6.0",
     "postcss": "8.4.47",
     "prettier": "3.3.3",
-    "storybook": "8.3.6",
+    "storybook": "8.4.0",
     "tailwindcss": "3.4.14",
     "turbo": "2.2.3",
     "typescript": "5.6.3",

playwright.config.ts

@@ -26,6 +26,6 @@ export default defineConfig({
   reporter: "html",
   retries: isCI ? 2 : 0,
   testDir: "./e2e",
-  use: { trace: "on-first-retry", baseURL },
+  use: { baseURL, trace: "on-first-retry" },
   ...(isCI && { workers: 1 }),
 });

postcss.config.js

@@ -1,8 +1,8 @@
 /** @type {import("postcss").Postcss} */
 const config = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
+    tailwindcss: {},
   },
 };
 

src/components/ext-link.stories.ts

@@ -3,12 +3,12 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ExtLink } from "./ext-link";
 
 const meta = {
-  title: "Components/ExtLink",
   component: ExtLink,
   parameters: {
     layout: "centered",
   },
   tags: ["autodocs"],
+  title: "Components/ExtLink",
 } satisfies Meta<typeof ExtLink>;
 
 export default meta;
@@ -17,39 +17,39 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    to: "daisyUI",
     children: "daisyUI",
+    to: "daisyUI",
   },
 };
 
 export const Primary: Story = {
   args: {
-    to: "React",
-    color: "primary",
     children: "React",
+    color: "primary",
+    to: "React",
   },
 };
 
 export const Secondary: Story = {
   args: {
-    to: "Vite",
-    color: "secondary",
     children: "Vite",
+    color: "secondary",
+    to: "Vite",
   },
 };
 
 export const Accent: Story = {
   args: {
-    to: "tailwindcss",
-    color: "accent",
     children: "tailwindcss",
+    color: "accent",
+    to: "tailwindcss",
   },
 };
 
 export const Button: Story = {
   args: {
+    children: "TypeScript",
     to: "TypeScript",
     variant: "button",
-    children: "TypeScript",
   },
 };

src/components/ext-link.tsx

@@ -4,14 +4,14 @@ import { externalLinks } from "@/config/external-links";
 import { cn } from "@/lib/cn";
 
 type Color = "accent" | "primary" | "secondary";
-type Variant = "default" | "button";
+type Variant = "button" | "default";
 
 interface ExtLinkProps {
+  children: ReactNode;
   className?: string;
-  to: keyof typeof externalLinks;
   color?: Color;
+  to: keyof typeof externalLinks;
   variant?: Variant;
-  children: ReactNode;
 }
 
 /**
@@ -21,27 +21,27 @@ interface ExtLinkProps {
  * <ExtLink to='tailwindcss'>tailwindcss</ExtLink> // https://tailwindcss.com
  */
 export const ExtLink = ({
-  to,
+  children,
   className,
   color,
+  to,
   variant = "default",
-  children,
 }: ExtLinkProps) => {
   return (
     <a
-      href={externalLinks[to]}
-      target="_blank"
-      rel="noreferrer"
       className={cn(
         {
-          "dsy-link-hover dsy-link": variant === "default",
           "dsy-btn": variant === "button",
+          "dsy-btn-accent": color === "accent",
           "dsy-btn-primary": color === "primary",
           "dsy-btn-secondary": color === "secondary",
-          "dsy-btn-accent": color === "accent",
+          "dsy-link-hover dsy-link": variant === "default",
         },
         className,
       )}
+      href={externalLinks[to]}
+      rel="noreferrer"
+      target="_blank"
     >
       {children}
     </a>

src/config/external-links.ts

@@ -1,12 +1,12 @@
 export const externalLinks = {
-  "Vite": "https://vite.dev",
-  "React": "https://react.dev",
-  "TypeScript": "https://www.typescriptlang.org",
-  "tailwindcss": "https://tailwindcss.com",
-  "GitHub": "https://github.com/jimmy-guzman/react-starter",
+  "Bun": "https://bun.sh",
+  "daisyUI": "https://daisyui.com",
   "Deploy":
     "https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fjimmy-guzman%2Freact-starter&project-name=my-awesome-react-project&repository-name=my-awesome-react-project",
-  "Bun": "https://bun.sh",
+  "GitHub": "https://github.com/jimmy-guzman/react-starter",
+  "React": "https://react.dev",
+  "tailwindcss": "https://tailwindcss.com",
   "TanStack Router": "https://tanstack.com/router/latest",
-  "daisyUI": "https://daisyui.com",
+  "TypeScript": "https://www.typescriptlang.org",
+  "Vite": "https://vite.dev",
 } satisfies Record<string, `https://${string}.${string}`>;

src/lib/cn.ts

@@ -1,4 +1,6 @@
-import { type ClassValue, clsx } from "clsx";
+import type { ClassValue } from "clsx";
+
+import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export const cn = (...classes: ClassValue[]) => {

src/pages/error.spec.tsx

@@ -5,7 +5,7 @@ import { Error as ErrorPage } from "./error";
 describe("<Error />", () => {
   it('should render "Something went Wrong!" message', async () => {
     await render(
-      <ErrorPage reset={vi.fn()} error={new Error("Something went Wrong!")} />,
+      <ErrorPage error={new Error("Something went Wrong!")} reset={vi.fn()} />,
     );
 
     expect(screen.getByText("Something went Wrong!")).toBeInTheDocument();

src/pages/error.tsx

@@ -1,4 +1,6 @@
-import { type ErrorComponentProps, Link } from "@tanstack/react-router";
+import type { ErrorComponentProps } from "@tanstack/react-router";
+
+import { Link } from "@tanstack/react-router";
 
 export const Error = ({ error }: ErrorComponentProps) => {
   return (

src/pages/home.spec.tsx

@@ -7,7 +7,7 @@ describe("<Home />", () => {
     await render(<Home />);
 
     expect(
-      screen.getByRole("heading", { name: "React Starter", level: 1 }),
+      screen.getByRole("heading", { level: 1, name: "React Starter" }),
     ).toBeInTheDocument();
   });
 });