Skip to content

Commit 227a8b0

Browse files
tractorsstractorss
authored
Merge pull request #66 from kleros/feat/add-storybook
feat: migrate to vite and add storybook
2 parents c4cbd5f + 3882f39 commit 227a8b0

38 files changed

+12117
-7706
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ parcel-bundle-reports
2626
npm-debug.log*
2727
yarn-debug.log*
2828
yarn-error.log*
29+
30+
*storybook.log

‎.lintstagedrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"**/*.{js,jsx,ts,tsx}": ["eslint"]
2+
"**/*.{js,jsx,ts,tsx}": ["eslint --fix"]
33
}

‎.parcelrc‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎.storybook/main.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { StorybookConfig } from "@storybook/react-vite";
2+
3+
const config: StorybookConfig = {
4+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
5+
addons: [
6+
"@storybook/addon-essentials",
7+
"@storybook/addon-onboarding",
8+
"@chromatic-com/storybook",
9+
"@storybook/addon-interactions",
10+
],
11+
framework: {
12+
name: "@storybook/react-vite",
13+
options: {},
14+
},
15+
typescript: {
16+
reactDocgen: "react-docgen-typescript",
17+
},
18+
};
19+
export default config;

‎.storybook/preview.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Preview } from "@storybook/react";
2+
3+
const preview: Preview = {
4+
parameters: {
5+
controls: {
6+
matchers: {
7+
color: /(background|color)$/i,
8+
date: /Date$/i,
9+
},
10+
},
11+
},
12+
};
13+
14+
export default preview;

commitlint.config.js renamed to commitlint.config.cjs

File renamed without changes.

‎eslint.config.mjs‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,6 @@ export default [
6767
react: {
6868
version: "^16.12.0",
6969
},
70-
71-
"import/resolver": {
72-
parcel: {
73-
rootDir: "src",
74-
extensions: [".js", ".jsx", ".ts", ".tsx", ".svg", ".png", ".jpeg"],
75-
},
76-
},
7770
},
7871

7972
rules: {

src/index.html renamed to index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link href="./styles/global.css" type="text/css" rel="stylesheet" />
6+
<link href="/src/styles/global.css" type="text/css" rel="stylesheet" />
77
<title>UI Components Library</title>
88
</head>
99
<body>
1010
<div id="app"></div>
11-
<script type="module" src="App.tsx"></script>
11+
<script type="module" src="/src/App.tsx"></script>
1212
</body>
1313
</html>

‎package.json‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,47 @@
66
"main": "dist/index.js",
77
"types": "dist/types.d.ts",
88
"isLibrary": true,
9+
"type": "module",
910
"browserslist": "> 0.5%, last 2 versions, not dead",
1011
"repository": "git@github.com:kleros/ui-components-library",
1112
"author": "Kleros",
1213
"license": "MIT",
1314
"scripts": {
14-
"clear": "rm -r .parcel-cache",
15-
"clean": "rm dist/bundle.js",
16-
"start": "parcel src/index.html",
17-
"build": "parcel build",
18-
"prepare": "husky install",
15+
"build": "vite build",
16+
"build-storybook": "storybook build",
1917
"check-style": "eslint 'src/**/*.{ts,tsx}'",
20-
"check-types": "tsc --noEmit"
18+
"check-types": "tsc --noEmit",
19+
"clean": "rm -rf dist",
20+
"prepare": "husky install",
21+
"preview": "vite preview",
22+
"start": "vite",
23+
"storybook": "storybook dev -p 6006"
2124
},
2225
"files": [
2326
"dist"
2427
],
2528
"devDependencies": {
29+
"@chromatic-com/storybook": "^3.2.5",
2630
"@commitlint/cli": "^15.0.0",
2731
"@commitlint/config-conventional": "^15.0.0",
2832
"@eslint/compat": "^1.2.7",
2933
"@eslint/eslintrc": "^3.3.0",
3034
"@eslint/js": "^9.21.0",
31-
"@parcel/packager-ts": "^2.2.1",
32-
"@parcel/transformer-svg-react": "^2.0.1",
33-
"@parcel/transformer-typescript-types": "^2.2.1",
35+
"@storybook/addon-essentials": "^8.6.4",
36+
"@storybook/addon-interactions": "^8.6.4",
37+
"@storybook/addon-onboarding": "^8.6.4",
38+
"@storybook/blocks": "^8.6.4",
39+
"@storybook/react": "^8.6.4",
40+
"@storybook/react-vite": "^8.6.4",
41+
"@storybook/test": "^8.6.4",
3442
"@tailwindcss/postcss": "^4.0.11",
43+
"@types/node": "^22.13.10",
3544
"@types/react": "^18.0.9",
3645
"@types/react-dom": "^18.0.3",
3746
"@types/styled-components": "^5.1.20",
3847
"@typescript-eslint/eslint-plugin": "^8.26.0",
3948
"@typescript-eslint/parser": "^8.26.0",
49+
"@vitejs/plugin-react": "^4.3.4",
4050
"babel-plugin-styled-components": "^2.0.2",
4151
"eslint": "^9.21.0",
4252
"eslint-config-prettier": "^10.1.1",
@@ -46,16 +56,19 @@
4656
"eslint-plugin-react": "^7.37.4",
4757
"eslint-plugin-react-hooks": "^5.2.0",
4858
"eslint-plugin-security": "^3.0.1",
59+
"eslint-plugin-storybook": "^0.11.4",
4960
"globals": "^16.0.0",
5061
"husky": "^7.0.0",
5162
"lint-staged": "^12.1.2",
52-
"parcel": "^2.13.3",
5363
"prettier": "^3.5.3",
5464
"prettier-plugin-tailwindcss": "^0.6.11",
5565
"process": "^0.11.10",
66+
"storybook": "^8.6.4",
5667
"styled-components": "^5.3.3",
5768
"tailwindcss": "^4.0.11",
58-
"typescript": "^5.8.2"
69+
"typescript": "^5.8.2",
70+
"vite": "^6.2.1",
71+
"vite-plugin-svgr": "^4.3.0"
5972
},
6073
"peerDependencies": {
6174
"@tailwindcss/postcss": "^4.0.11",
@@ -68,6 +81,7 @@
6881
"dependencies": {
6982
"@datepicker-react/hooks": "^2.8.4",
7083
"@swc/helpers": "^0.3.2",
84+
"@tailwindcss/vite": "^4.0.12",
7185
"clsx": "^2.1.1",
7286
"rc-slider": "^9.7.5",
7387
"react": "^18.0.0",
@@ -85,7 +99,12 @@
8599
},
86100
"volta": {
87101
"node": "20.18.3",
88-
"yarn": "1.22.19"
102+
"yarn": "4.7.0"
89103
},
90-
"packageManager": "yarn@1.22.19+sha256.732620bac8b1690d507274f025f3c6cfdc3627a84d9642e38a07452cc00e0f2e"
104+
"packageManager": "yarn@4.7.0",
105+
"eslintConfig": {
106+
"extends": [
107+
"plugin:storybook/recommended"
108+
]
109+
}
91110
}

‎src/stories/Button.stories.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { fn } from "@storybook/test";
3+
4+
import { Button } from "./Button";
5+
6+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
7+
const meta = {
8+
title: "Example/Button",
9+
component: Button,
10+
parameters: {
11+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
12+
layout: "centered",
13+
},
14+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
15+
tags: ["autodocs"],
16+
// More on argTypes: https://storybook.js.org/docs/api/argtypes
17+
argTypes: {
18+
backgroundColor: { control: "color" },
19+
},
20+
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
21+
args: { onClick: fn() },
22+
} satisfies Meta<typeof Button>;
23+
24+
export default meta;
25+
type Story = StoryObj<typeof meta>;
26+
27+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
28+
export const Primary: Story = {
29+
args: {
30+
primary: true,
31+
label: "Button",
32+
},
33+
};
34+
35+
export const Secondary: Story = {
36+
args: {
37+
label: "Button",
38+
},
39+
};
40+
41+
export const Large: Story = {
42+
args: {
43+
size: "large",
44+
label: "Button",
45+
},
46+
};
47+
48+
export const Small: Story = {
49+
args: {
50+
size: "small",
51+
label: "Button",
52+
},
53+
};

0 commit comments

Comments
 (0)