test(stories): replace external image sources with inline data URIs

te6-in · claude · te6-in · commit df295b5e8b0e · 2026-06-24T14:45:34.000+09:00
External image hosts caused flaky Chromatic diffs: picsum.photos is unreliable and avatars.githubusercontent.com changes when the GitHub user updates their profile photo. Replace both with deterministic inline SVG data URIs, defined per story file. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01BQ6efpa1qn6RJN1mq3A1fy
diff --git a/docs/stories/AttachmentDisplay.stories.tsx b/docs/stories/AttachmentDisplay.stories.tsx
@@ -7,7 +7,20 @@ import { createStoryWithParameters } from "@/stories/utils/parameters";
 import { SeedThemeDecorator } from "./components/decorator";
 import { VariantTable } from "./components/variant-table";
 
-const sampleThumbnailUrl = (seed: string) => `https://picsum.photos/seed/${seed}/200/200`;
+const sampleThumbnailColors: Record<string, string> = {
+  pending: "#f4a261",
+  uploading: "#2a9d8f",
+  success: "#8ab17d",
+  error: "#e76f51",
+  a: "#577590",
+  b: "#43aa8b",
+  c: "#f9c74f",
+};
+
+const sampleThumbnailUrl = (seed: string) =>
+  `data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect width='200' height='200' fill='${sampleThumbnailColors[seed] ?? "#adb5bd"}'/></svg>`,
+  )}`;
 
 interface AttachmentDisplayStoryProps
   extends Omit<React.ComponentProps<typeof AttachmentDisplayField>, "children"> {}
diff --git a/docs/stories/AttachmentDisplayReorderable.stories.tsx b/docs/stories/AttachmentDisplayReorderable.stories.tsx
@@ -8,7 +8,18 @@ import { createStoryWithParameters } from "@/stories/utils/parameters";
 import { SeedThemeDecorator } from "./components/decorator";
 import { VariantTable } from "./components/variant-table";
 
-const sampleThumbnailUrl = (seed: string) => `https://picsum.photos/seed/${seed}/200/200`;
+const sampleThumbnailColors: Record<string, string> = {
+  a: "#577590",
+  b: "#43aa8b",
+  c: "#f9c74f",
+  d: "#9b5de5",
+  e: "#e76f51",
+};
+
+const sampleThumbnailUrl = (seed: string) =>
+  `data:image/svg+xml,${encodeURIComponent(
+    `<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><rect width='200' height='200' fill='${sampleThumbnailColors[seed] ?? "#adb5bd"}'/></svg>`,
+  )}`;
 
 interface AttachmentDisplayReorderableStoryProps
   extends Omit<React.ComponentProps<typeof AttachmentDisplayField>, "children"> {}
diff --git a/docs/stories/ImageFrame.stories.tsx b/docs/stories/ImageFrame.stories.tsx
@@ -7,6 +7,10 @@ import { createStoryWithParameters } from "@/stories/utils/parameters";
 import { SeedThemeDecorator } from "./components/decorator";
 import { VariantTable } from "./components/variant-table";
 
+const SAMPLE_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6ba6ff'/><stop offset='1' stop-color='#b06bff'/></linearGradient></defs><rect width='200' height='200' fill='url(#g)'/></svg>",
+)}`;
+
 const meta = {
   component: ImageFrame,
   decorators: [SeedThemeDecorator],
@@ -32,7 +36,7 @@ const conditionMap = {
 
 const CommonStoryTemplate: Story = {
   args: {
-    src: "https://avatars.githubusercontent.com/u/54893898?v=4",
+    src: SAMPLE_IMAGE,
     alt: "ImageFrame placeholder",
   },
   render: (args) => (
diff --git a/docs/stories/ListButtonItem.stories.tsx b/docs/stories/ListButtonItem.stories.tsx
@@ -16,6 +16,10 @@ import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
 import { ActionButton } from "seed-design/ui/action-button";
 import { ListHeader } from "seed-design/ui/list-header";
 
+const SAMPLE_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6ba6ff'/><stop offset='1' stop-color='#b06bff'/></linearGradient></defs><rect width='200' height='200' fill='url(#g)'/></svg>",
+)}`;
+
 const meta = {
   component: ListButtonItem,
   decorators: [SeedThemeDecorator],
@@ -30,13 +34,7 @@ const prefixVariants = [
   { key: "icon", element: <Icon svg={<IconPersonCircleLine />} /> },
   {
     key: "avatar",
-    element: (
-      <Avatar
-        size="48"
-        src="https://avatars.githubusercontent.com/u/54893898?v=4"
-        fallback={<IdentityPlaceholder />}
-      />
-    ),
+    element: <Avatar size="48" src={SAMPLE_IMAGE} fallback={<IdentityPlaceholder />} />,
   },
 ];
 
diff --git a/docs/stories/ListCheckItem.stories.tsx b/docs/stories/ListCheckItem.stories.tsx
@@ -16,6 +16,10 @@ import { Avatar } from "seed-design/ui/avatar";
 import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
 import { ListHeader } from "seed-design/ui/list-header";
 
+const SAMPLE_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6ba6ff'/><stop offset='1' stop-color='#b06bff'/></linearGradient></defs><rect width='200' height='200' fill='url(#g)'/></svg>",
+)}`;
+
 const meta = {
   component: ListCheckItem,
   decorators: [SeedThemeDecorator],
@@ -40,13 +44,7 @@ const prefixVariants = [
   { key: "icon", element: <Icon svg={<IconPersonCircleLine />} /> },
   {
     key: "avatar",
-    element: (
-      <Avatar
-        size="48"
-        src="https://avatars.githubusercontent.com/u/54893898?v=4"
-        fallback={<IdentityPlaceholder />}
-      />
-    ),
+    element: <Avatar size="48" src={SAMPLE_IMAGE} fallback={<IdentityPlaceholder />} />,
   },
 ];
 
diff --git a/docs/stories/ListItem.stories.tsx b/docs/stories/ListItem.stories.tsx
@@ -16,6 +16,10 @@ import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
 import { ActionButton } from "seed-design/ui/action-button";
 import { ListHeader } from "seed-design/ui/list-header";
 
+const SAMPLE_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6ba6ff'/><stop offset='1' stop-color='#b06bff'/></linearGradient></defs><rect width='200' height='200' fill='url(#g)'/></svg>",
+)}`;
+
 const meta = {
   component: ListItem,
   decorators: [SeedThemeDecorator],
@@ -30,13 +34,7 @@ const prefixVariants = [
   { key: "icon", element: <Icon svg={<IconPersonCircleLine />} /> },
   {
     key: "avatar",
-    element: (
-      <Avatar
-        size="48"
-        src="https://avatars.githubusercontent.com/u/54893898?v=4"
-        fallback={<IdentityPlaceholder />}
-      />
-    ),
+    element: <Avatar size="48" src={SAMPLE_IMAGE} fallback={<IdentityPlaceholder />} />,
   },
 ];
 
diff --git a/docs/stories/ListLinkItem.stories.tsx b/docs/stories/ListLinkItem.stories.tsx
@@ -16,6 +16,10 @@ import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
 import { ActionButton } from "seed-design/ui/action-button";
 import { ListHeader } from "seed-design/ui/list-header";
 
+const SAMPLE_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6ba6ff'/><stop offset='1' stop-color='#b06bff'/></linearGradient></defs><rect width='200' height='200' fill='url(#g)'/></svg>",
+)}`;
+
 const meta = {
   component: ListLinkItem,
   decorators: [SeedThemeDecorator],
@@ -30,13 +34,7 @@ const prefixVariants = [
   { key: "icon", element: <Icon svg={<IconPersonCircleLine />} /> },
   {
     key: "avatar",
-    element: (
-      <Avatar
-        size="48"
-        src="https://avatars.githubusercontent.com/u/54893898?v=4"
-        fallback={<IdentityPlaceholder />}
-      />
-    ),
+    element: <Avatar size="48" src={SAMPLE_IMAGE} fallback={<IdentityPlaceholder />} />,
   },
 ];
 
diff --git a/docs/stories/ListRadioItem.stories.tsx b/docs/stories/ListRadioItem.stories.tsx
@@ -18,6 +18,10 @@ import { Avatar } from "seed-design/ui/avatar";
 import { IdentityPlaceholder } from "seed-design/ui/identity-placeholder";
 import { ListHeader } from "seed-design/ui/list-header";
 
+const SAMPLE_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#6ba6ff'/><stop offset='1' stop-color='#b06bff'/></linearGradient></defs><rect width='200' height='200' fill='url(#g)'/></svg>",
+)}`;
+
 const meta = {
   component: ListRadioItem,
   decorators: [SeedThemeDecorator],
@@ -42,13 +46,7 @@ const prefixVariants = [
   { key: "icon", element: <Icon svg={<IconPersonCircleLine />} /> },
   {
     key: "avatar",
-    element: (
-      <Avatar
-        size="48"
-        src="https://avatars.githubusercontent.com/u/54893898?v=4"
-        fallback={<IdentityPlaceholder />}
-      />
-    ),
+    element: <Avatar size="48" src={SAMPLE_IMAGE} fallback={<IdentityPlaceholder />} />,
   },
 ];
 
