use storybook subpath imports mock

package.json

@@ -23,6 +23,10 @@
     "chromatic": "chromatic"
   },
   "imports": {
+    "#src/data/contents": {
+      "storybook": "./src/data/contents.mock.ts",
+      "default": "./src/data/contents.ts"
+    },
     "#*": ["./*", "./*.ts", "./*.tsx", "./*/index.ts", "./*/index.tsx"]
   },
   "dependencies": {

src/app/_internal/post-card-list/post-card-list.tsx

@@ -1,7 +1,7 @@
+import type { PropsWithChildren } from "react";
 import { Link } from "#src/components/link";
-import { Text } from "#src/components/text/text.jsx";
+import { Text } from "#src/components/text/text";
 import { cn } from "#src/lib/utils";
-import type { PropsWithChildren } from "react";
 
 function PostCardListRoot({ children }: PropsWithChildren) {
   return <ul className="grid gap-2">{children}</ul>;

src/app/_internal/root-layout/nav-link.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { cn } from "#src/lib/utils";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import type { PropsWithChildren } from "react";
+import { cn } from "#src/lib/utils";
 
 type Props = PropsWithChildren<{
   href: string;

src/app/_internal/root-layout/root-layout.tsx

@@ -1,6 +1,6 @@
+import type { PropsWithChildren } from "react";
 import { Link } from "#src/components/link";
 import { SizedBox } from "#src/components/sized-box";
-import type { PropsWithChildren } from "react";
 import { NavLink } from "./nav-link";
 
 export function RootLayoutRoot({ children }: PropsWithChildren) {

src/app/page.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Page from "./page";
+
+const meta = {
+  component: Page,
+} satisfies Meta<typeof Page>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;

src/app/page.tsx

@@ -1,5 +1,5 @@
 import { Text } from "#src/components/text";
-import { allEntries } from "../data/contents";
+import { allEntries } from "#src/data/contents";
 import { PostCardList } from "./_internal/post-card-list";
 
 export const dynamic = "force-static";

src/app/posts/[slug]/generate-metadata.ts

@@ -1,7 +1,7 @@
-import { allEntries } from "#src/data/contents";
-import { extractTextFromArticleHtml } from "#src/lib/extract-text-from-article-html";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { allEntries } from "#src/data/contents";
+import { extractTextFromArticleHtml } from "#src/lib/extract-text-from-article-html";
 
 type Props = {
   params: {

src/app/tags/[slug]/page.tsx

@@ -1,7 +1,7 @@
+import { notFound } from "next/navigation";
 import { PostCardList } from "#src/app/_internal/post-card-list";
 import { Text } from "#src/components/text";
 import { allEntries } from "#src/data/contents";
-import { notFound } from "next/navigation";
 
 export { generateMetadata } from "./generate-metadata";
 export { generateStaticParams } from "./generate-static-params";

src/app/tags/page.tsx

@@ -1,7 +1,7 @@
+import type { Metadata } from "next";
 import { Link } from "#src/components/link";
 import { Text } from "#src/components/text";
 import { allEntries } from "#src/data/contents";
-import type { Metadata } from "next";
 
 export const metadata = {
   title: "Tags | blog.yoiw.dev",

src/components/sized-box/sized-box.tsx

@@ -1,5 +1,5 @@
-import { cn } from "#src/lib/utils";
 import type { ElementType, PropsWithChildren } from "react";
+import { cn } from "#src/lib/utils";
 
 type Props = PropsWithChildren & {
   as?: ElementType;

src/components/text/text.tsx

@@ -1,6 +1,6 @@
-import { cn } from "#src/lib/utils.js";
 import type { PropsWithChildren } from "react";
 import type { ComponentPropsWithoutRef, ElementType } from "react";
+import { cn } from "#src/lib/utils";
 
 type Props<T extends ElementType> = {
   as?: T;

src/components/ui/button.tsx

@@ -1,7 +1,7 @@
-import { cn } from "#src/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
+import { cn } from "#src/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",

src/data/contents.mock.ts

@@ -0,0 +1,27 @@
+export const allEntries = [
+  {
+    meta: {
+      slug: "entry-1",
+      title: "エントリのタイトル",
+      publishedAt: "2024-12-31",
+      tags: ["vitest", "testing", "vite", "react", "toolchain"],
+    },
+  },
+  {
+    meta: {
+      slug: "entry-2",
+      title: "タグのないエントリ",
+      publishedAt: "2023-01-12",
+      tags: [],
+    },
+  },
+  {
+    meta: {
+      slug: "entry-3",
+      title:
+        "長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長い長いタイトル",
+      publishedAt: "2023-01-12",
+      tags: ["日本語タグ", "記号!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/"],
+    },
+  },
+];