storybook追加祭り

client/.storybook/preview.ts

@@ -9,6 +9,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    layout: "fullscreen",
   },
 };
 

client/src/components/icons/__stories__/icons.stories.tsx

@@ -20,7 +20,6 @@ export const Overview = () => (
     <div
       style={{
         display: "flex",
-        justifyContent: "space-between",
         alignItems: "center",
         flexWrap: "wrap",
         width: "100%",

client/src/components/loading-overlay/__stories__/loading-overlay.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta } from "@storybook/react";
+import { Theme } from "@/styles/__stories__/Theme";
+import { LoadingOverlay } from "..";
+import { LoadingOverlayContext } from "@/providers/loading-overlay";
+
+const meta = {
+  title: "Components/LoadingOverlay",
+} satisfies Meta;
+
+export default meta;
+
+const Common = () => (
+  <LoadingOverlayContext.Provider
+    value={{ isLoading: true, setIsLoading: () => {} }}
+  >
+    <LoadingOverlay />
+  </LoadingOverlayContext.Provider>
+);
+
+export const Light = () => (
+  <Theme.Light>
+    <Common />
+  </Theme.Light>
+);
+
+export const Dark = () => (
+  <Theme.Dark>
+    <Common />
+  </Theme.Dark>
+);

client/src/features/onboarding/pages/top/__stories__/top.stories.tsx

@@ -0,0 +1,22 @@
+import { OnboardingPage } from "../page";
+
+import { Meta } from "@storybook/react";
+import { Theme } from "@/styles/__stories__/Theme";
+
+const meta = {
+  title: "Pages/Onboarding",
+} satisfies Meta;
+
+export default meta;
+
+export const Light = () => (
+  <Theme.Light full>
+    <OnboardingPage />
+  </Theme.Light>
+);
+
+export const Dark = () => (
+  <Theme.Dark full>
+    <OnboardingPage />
+  </Theme.Dark>
+);

client/src/styles/__stories__/Theme.tsx

@@ -1,23 +1,31 @@
 import "../global.css";
-import { vars } from "../theme.css";
+import { vars } from "..";
 
-const styles = {
-  background: vars.color.gray[1],
+const styles = (full: boolean) => ({
+  background: vars.color.gray[2],
   color: vars.color.gray[12],
-  padding: "16px",
-  border: `1px solid ${vars.color.gray[6]}`,
-  borderRadius: "8px",
-  width: "fit-content",
-};
+  padding: full ? "0" : "16px",
+});
 
-const LightWrapper = ({ children }: { children: React.ReactNode }) => (
-  <div className="light" style={styles}>
+const LightWrapper = ({
+  children,
+  full = false,
+}: {
+  children: React.ReactNode;
+  full?: boolean;
+}) => (
+  <div className="light" style={styles(full)}>
     {children}
   </div>
 );
-
-const DarkWrapper = ({ children }: { children: React.ReactNode }) => (
-  <div className="dark" style={styles}>
+const DarkWrapper = ({
+  children,
+  full = false,
+}: {
+  children: React.ReactNode;
+  full?: boolean;
+}) => (
+  <div className="dark" style={styles(full)}>
     {children}
   </div>
 );

client/src/styles/__stories__/color-tokens.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta } from "@storybook/react";
-import { vars } from "../theme.css";
+import { vars } from "..";
 import { Theme } from "./Theme";
 
 const meta = {