Skip to content

Commit 27f5e07

Browse files
JunichiSugiuraJunichiSugiura
committed
Setup storybook for profile
1 parent 662e67e commit 27f5e07

File tree

11 files changed

+155
-149
lines changed

11 files changed

+155
-149
lines changed

‎packages/keychain/.storybook/main.ts‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,14 @@ function getAbsolutePath(value: string) {
1010
return dirname(require.resolve(join(value, "package.json")));
1111
}
1212
const config: StorybookConfig = {
13-
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
13+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
1414
addons: [
15-
getAbsolutePath("@storybook/addon-links"),
1615
getAbsolutePath("@storybook/addon-essentials"),
17-
getAbsolutePath("@chromatic-com/storybook"),
18-
getAbsolutePath("@storybook/addon-interactions"),
1916
getAbsolutePath("@storybook/addon-themes"),
2017
],
2118
framework: {
2219
name: getAbsolutePath("@storybook/react-vite"),
23-
options: {
24-
builder: {
25-
viteConfigPath: "./vite.config.ts",
26-
},
27-
},
20+
options: {},
2821
},
2922
viteFinal: async (config) => {
3023
return mergeConfig(config, {

‎packages/keychain/package.json‎

Lines changed: 2 additions & 5 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:*",
@@ -50,10 +50,7 @@
5050
"devDependencies": {
5151
"@cartridge/eslint": "workspace:*",
5252
"@cartridge/tsconfig": "workspace:*",
53-
"@chromatic-com/storybook": "^1.9.0",
5453
"@storybook/addon-essentials": "catalog:",
55-
"@storybook/addon-interactions": "catalog:",
56-
"@storybook/addon-links": "catalog:",
5754
"@storybook/addon-themes": "catalog:",
5855
"@storybook/blocks": "catalog:",
5956
"@storybook/react": "catalog:",

‎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: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
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.@(ts|tsx)"],
14+
addons: [
15+
getAbsolutePath("@storybook/addon-essentials"),
16+
getAbsolutePath("@storybook/addon-themes"),
17+
],
18+
framework: {
19+
name: getAbsolutePath("@storybook/react-vite"),
20+
options: {},
21+
},
22+
};
23+
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: 14 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",
@@ -32,6 +37,13 @@
3237
},
3338
"devDependencies": {
3439
"@cartridge/eslint": "workspace:*",
40+
"@storybook/addon-essentials": "catalog:",
41+
"@storybook/addon-themes": "catalog:",
42+
"@storybook/blocks": "catalog:",
43+
"@storybook/react": "catalog:",
44+
"@storybook/react-vite": "catalog:",
45+
"@storybook/test": "catalog:",
46+
"@storybook/test-runner": "catalog:",
3547
"@types/lodash": "^4.17.13",
3648
"@types/node": "catalog:",
3749
"@types/react": "catalog:",
@@ -43,6 +55,7 @@
4355
"postcss": "catalog:",
4456
"postcss-import": "catalog:",
4557
"prettier": "catalog:",
58+
"storybook": "catalog:",
4659
"tailwindcss": "catalog:",
4760
"typescript": "catalog:",
4861
"typescript-eslint": "catalog:",

‎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/.storybook/main.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,7 @@ function getAbsolutePath(value: string) {
1212
const config: StorybookConfig = {
1313
stories: ["../src/stories/**/*.mdx", "../src/**/*.stories.@(ts|tsx)"],
1414
addons: [
15-
getAbsolutePath("@storybook/addon-links"),
1615
getAbsolutePath("@storybook/addon-essentials"),
17-
getAbsolutePath("@storybook/addon-interactions"),
1816
getAbsolutePath("@storybook/addon-themes"),
1917
],
2018
framework: {

‎packages/ui-next/package.json‎

Lines changed: 4 additions & 6 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:*",
@@ -78,8 +78,6 @@
7878
"devDependencies": {
7979
"@cartridge/tsconfig": "workspace:*",
8080
"@storybook/addon-essentials": "catalog:",
81-
"@storybook/addon-interactions": "catalog:",
82-
"@storybook/addon-links": "catalog:",
8381
"@storybook/addon-themes": "catalog:",
8482
"@storybook/blocks": "catalog:",
8583
"@storybook/react": "catalog:",

0 commit comments

Comments
 (0)