Skip to content

Commit f66943e

Browse files
JunichiSugiuraJunichiSugiura
committed
Setup storybook for profile
1 parent f3dcab4 commit f66943e

File tree

8 files changed

+174
-15
lines changed

8 files changed

+174
-15
lines changed

‎packages/keychain/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515
"test:ci": "vitest run",
1616
"storybook": "storybook dev -p 6001 --no-open",
1717
"storybook:build": "storybook build",
18-
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6006 --silent",
18+
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6001 --silent",
1919
"test-storybook": "test-storybook --testTimeout=60000",
20-
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook'"
20+
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6001 'pnpm test-storybook'"
2121
},
2222
"dependencies": {
2323
"@cartridge/account-wasm": "workspace:*",

‎packages/profile/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,5 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
*storybook.log

‎packages/profile/.storybook/main.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { StorybookConfig } from "@storybook/react-vite";
2+
3+
import { join, dirname } from "path";
4+
5+
/**
6+
* This function is used to resolve the absolute path of a package.
7+
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
8+
*/
9+
function getAbsolutePath(value: string) {
10+
return dirname(require.resolve(join(value, "package.json")));
11+
}
12+
const config: StorybookConfig = {
13+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
14+
addons: [
15+
getAbsolutePath("@storybook/addon-essentials"),
16+
getAbsolutePath("@chromatic-com/storybook"),
17+
getAbsolutePath("@storybook/addon-interactions"),
18+
],
19+
framework: {
20+
name: getAbsolutePath("@storybook/react-vite"),
21+
options: {},
22+
},
23+
};
24+
export default config;

‎packages/profile/.storybook/preview.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import type { Preview, ReactRenderer } from "@storybook/react";
3+
import { withThemeByClassName } from "@storybook/addon-themes";
4+
import { SonnerToaster } from "@cartridge/ui-next";
5+
import { Provider } from "../src/components/context/provider";
6+
7+
import "../src/index.css";
8+
9+
const preview: Preview = {
10+
parameters: {
11+
controls: {
12+
matchers: {
13+
color: /(background|color)$/i,
14+
date: /Date$/i,
15+
},
16+
},
17+
preset: "cartridge",
18+
colorMode: "dark",
19+
backgrounds: {
20+
default: "dark",
21+
values: [
22+
{
23+
name: "dark",
24+
value: "hsl(var(--background))",
25+
},
26+
{
27+
name: "light",
28+
value: "hsl(var(--background))",
29+
},
30+
],
31+
},
32+
},
33+
decorators: [
34+
withThemeByClassName<ReactRenderer>({
35+
themes: {
36+
light: "light",
37+
dark: "dark",
38+
},
39+
defaultTheme: "dark",
40+
}),
41+
(Story,
42+
// { parameters }
43+
) => (
44+
<Provider>
45+
<Story />
46+
<SonnerToaster />
47+
</Provider>
48+
),
49+
],
50+
};
51+
52+
export default preview;

‎packages/profile/package.json‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,12 @@
99
"lint": "eslint .",
1010
"format": "prettier --write ./src index.html",
1111
"format:check": "prettier --check ./src index.html",
12-
"preview": "vite preview"
12+
"preview": "vite preview",
13+
"storybook": "storybook dev -p 6003 --no-open",
14+
"storybook:build": "storybook build",
15+
"test-storybook": "test-storybook",
16+
"test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6003 'pnpm test-storybook --url http://127.0.0.1:6003 -u'",
17+
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6003 'pnpm test-storybook --url http://127.0.0.1:6003'"
1318
},
1419
"dependencies": {
1520
"@bal7hazar/arcade-sdk": "^0.0.72",
@@ -35,7 +40,14 @@
3540
},
3641
"devDependencies": {
3742
"@cartridge/eslint": "workspace:*",
43+
"@chromatic-com/storybook": "^3.2.4",
3844
"@eslint/js": "^9.9.0",
45+
"@storybook/addon-essentials": "^8.5.0",
46+
"@storybook/addon-interactions": "^8.5.0",
47+
"@storybook/blocks": "^8.5.0",
48+
"@storybook/react": "^8.5.0",
49+
"@storybook/react-vite": "^8.5.0",
50+
"@storybook/test": "^8.5.0",
3951
"@types/lodash": "^4.17.13",
4052
"@types/node": "^20.6.0",
4153
"@types/react": "^18.3.12",
@@ -45,11 +57,18 @@
4557
"eslint": "^9.12.0",
4658
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
4759
"eslint-plugin-react-refresh": "^0.4.9",
60+
"eslint-plugin-storybook": "^0.6.13",
4861
"globals": "^15.9.0",
4962
"postcss": "^8.4.35",
63+
"storybook": "^8.5.0",
5064
"tailwindcss": "^3.4.3",
5165
"typescript": "^5.5.3",
5266
"typescript-eslint": "^8.0.1",
5367
"vite": "^5.4.1"
68+
},
69+
"eslintConfig": {
70+
"extends": [
71+
"plugin:storybook/recommended"
72+
]
5473
}
5574
}

‎packages/profile/src/components/inventory/index.stories.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
3+
import { Inventory } from './index';
4+
5+
const meta = {
6+
component: Inventory,
7+
} satisfies Meta<typeof Inventory>;
8+
9+
export default meta;
10+
11+
type Story = StoryObj<typeof meta>;
12+
13+
export const Default: Story = {};

‎packages/ui-next/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@
2727
"format": "prettier --write ./src",
2828
"format:check": "prettier --check ./src",
2929
"lint": "eslint .",
30-
"storybook": "storybook dev -p 6003 --no-open",
30+
"storybook": "storybook dev -p 6002 --no-open",
3131
"storybook:build": "storybook build",
32-
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6007 --silent",
32+
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6002 --silent",
3333
"test-storybook": "test-storybook",
34-
"test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007 -u'",
35-
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007'"
34+
"test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6002 'pnpm test-storybook --url http://127.0.0.1:6002 -u'",
35+
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6002 'pnpm test-storybook --url http://127.0.0.1:6002'"
3636
},
3737
"dependencies": {
3838
"@cartridge/utils": "workspace:*",

‎pnpm-lock.yaml‎

Lines changed: 57 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)