Skip to content
This repository has been archived by the owner on Dec 11, 2024. It is now read-only.

Commit

Permalink
Merge pull request #36 from saitamau-maximum/feat/fill-storybook
Browse files Browse the repository at this point in the history
storybook追加祭り
  • Loading branch information
sor4chi authored Nov 16, 2023
2 parents 5bcdb8a + d6cabba commit 90d1313
Show file tree
Hide file tree
Showing 6 changed files with 75 additions and 15 deletions.
1 change: 1 addition & 0 deletions client/.storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const preview: Preview = {
date: /Date$/i,
},
},
layout: "fullscreen",
},
};

Expand Down
1 change: 0 additions & 1 deletion client/src/components/icons/__stories__/icons.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export const Overview = () => (
<div
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
flexWrap: "wrap",
width: "100%",
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
);
Original file line number Diff line number Diff line change
@@ -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>
);
34 changes: 21 additions & 13 deletions client/src/styles/__stories__/Theme.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion client/src/styles/__stories__/color-tokens.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Meta } from "@storybook/react";
import { vars } from "../theme.css";
import { vars } from "..";
import { Theme } from "./Theme";

const meta = {
Expand Down

0 comments on commit 90d1313

Please sign in to comment.