Skip to content

Commit

Permalink
Setup storybook for profile
Browse files Browse the repository at this point in the history
  • Loading branch information
JunichiSugiura committed Jan 19, 2025
1 parent f3dcab4 commit 5ce2405
Show file tree
Hide file tree
Showing 11 changed files with 168 additions and 12 deletions.
4 changes: 2 additions & 2 deletions packages/keychain/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
"test:ci": "vitest run",
"storybook": "storybook dev -p 6001 --no-open",
"storybook:build": "storybook build",
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6006 --silent",
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6001 --silent",
"test-storybook": "test-storybook --testTimeout=60000",
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6006 'pnpm test-storybook'"
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6001 'pnpm test-storybook'"
},
"dependencies": {
"@cartridge/account-wasm": "workspace:*",
Expand Down
2 changes: 2 additions & 0 deletions packages/profile/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,5 @@ dist-ssr
*.njsproj
*.sln
*.sw?

*storybook.log
24 changes: 24 additions & 0 deletions packages/profile/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import type { StorybookConfig } from "@storybook/react-vite";

import { join, dirname } from "path";

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string) {
return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
getAbsolutePath("@storybook/addon-essentials"),
getAbsolutePath("@chromatic-com/storybook"),
getAbsolutePath("@storybook/addon-interactions"),
],
framework: {
name: getAbsolutePath("@storybook/react-vite"),
options: {},
},
};
export default config;
52 changes: 52 additions & 0 deletions packages/profile/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from "react";
import type { Preview, ReactRenderer } from "@storybook/react";
import { withThemeByClassName } from "@storybook/addon-themes";
import { SonnerToaster } from "@cartridge/ui-next";
import { Provider } from "../src/components/context/provider";

import "../src/index.css";

const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
preset: "cartridge",
colorMode: "dark",
backgrounds: {
default: "dark",
values: [
{
name: "dark",
value: "hsl(var(--background))",
},
{
name: "light",
value: "hsl(var(--background))",
},
],
},
},
decorators: [
withThemeByClassName<ReactRenderer>({
themes: {
light: "light",
dark: "dark",
},
defaultTheme: "dark",
}),
(Story,
// { parameters }
) => (
<Provider>
<Story />
<SonnerToaster />
</Provider>
),
],
};

export default preview;
2 changes: 1 addition & 1 deletion packages/profile/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Cartridge Controller</title>
Expand Down
21 changes: 20 additions & 1 deletion packages/profile/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@
"lint": "eslint .",
"format": "prettier --write ./src index.html",
"format:check": "prettier --check ./src index.html",
"preview": "vite preview"
"preview": "vite preview",
"storybook": "storybook dev -p 6003 --no-open",
"storybook:build": "storybook build",
"test-storybook": "test-storybook",
"test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6003 'pnpm test-storybook --url http://127.0.0.1:6003 -u'",
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6003 'pnpm test-storybook --url http://127.0.0.1:6003'"
},
"dependencies": {
"@bal7hazar/arcade-sdk": "^0.0.72",
Expand All @@ -35,7 +40,14 @@
},
"devDependencies": {
"@cartridge/eslint": "workspace:*",
"@chromatic-com/storybook": "^3.2.4",
"@eslint/js": "^9.9.0",
"@storybook/addon-essentials": "^8.5.0",
"@storybook/addon-interactions": "^8.5.0",
"@storybook/blocks": "^8.5.0",
"@storybook/react": "^8.5.0",
"@storybook/react-vite": "^8.5.0",
"@storybook/test": "^8.5.0",
"@types/lodash": "^4.17.13",
"@types/node": "^20.6.0",
"@types/react": "^18.3.12",
Expand All @@ -45,11 +57,18 @@
"eslint": "^9.12.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.9",
"eslint-plugin-storybook": "^0.6.13",
"globals": "^15.9.0",
"postcss": "^8.4.35",
"storybook": "^8.5.0",
"tailwindcss": "^3.4.3",
"typescript": "^5.5.3",
"typescript-eslint": "^8.0.1",
"vite": "^5.4.1"
},
"eslintConfig": {
"extends": [
"plugin:storybook/recommended"
]
}
}
4 changes: 2 additions & 2 deletions packages/profile/src/components/achievements/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,8 @@ export function Achievements() {
isSelf
? selfname
: username
? username
: (address || self).slice(0, 9)
? username
: (address || self).slice(0, 9)
}
description={<CopyAddress address={address || self} size="sm" />}
right={
Expand Down
13 changes: 13 additions & 0 deletions packages/profile/src/components/inventory/index.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { Meta, StoryObj } from "@storybook/react";

import { Inventory } from "./index";

const meta = {
component: Inventory,
} satisfies Meta<typeof Inventory>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};
8 changes: 4 additions & 4 deletions packages/ui-next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
"format": "prettier --write ./src",
"format:check": "prettier --check ./src",
"lint": "eslint .",
"storybook": "storybook dev -p 6003 --no-open",
"storybook": "storybook dev -p 6002 --no-open",
"storybook:build": "storybook build",
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6007 --silent",
"storybook:serve": "pnpm storybook:build --quiet && pnpm http-server -c-1 storybook-static --port 6002 --silent",
"test-storybook": "test-storybook",
"test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007 -u'",
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6007 'pnpm test-storybook --url http://127.0.0.1:6007'"
"test:storybook:update": "start-server-and-test 'pnpm storybook:serve' 6002 'pnpm test-storybook --url http://127.0.0.1:6002 -u'",
"test:storybook": "start-server-and-test 'pnpm storybook:serve' 6002 'pnpm test-storybook --url http://127.0.0.1:6002'"
},
"dependencies": {
"@cartridge/utils": "workspace:*",
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-next/src/components/primitives/checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ const Checkbox = React.forwardRef<
checked === "indeterminate"
? "minus-line"
: checked
? "line"
: "unchecked-line"
? "line"
: "unchecked-line"
}
/>
</CheckboxPrimitive.Root>
Expand Down
46 changes: 46 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 5ce2405

Please sign in to comment.