feat: migrate to vite and add storybook

Author: alcercu

.gitignore

@@ -26,3 +26,5 @@ parcel-bundle-reports
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*storybook.log

.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "**/*.{js,jsx,ts,tsx}": ["eslint"]
+  "**/*.{js,jsx,ts,tsx}": ["eslint --fix"]
 }

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

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

@@ -6,32 +6,41 @@
   "main": "dist/index.js",
   "types": "dist/types.d.ts",
   "isLibrary": true,
+  "type": "module",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "repository": "git@github.com:kleros/ui-components-library",
   "author": "Kleros",
   "license": "MIT",
   "scripts": {
-    "clear": "rm -r .parcel-cache",
-    "clean": "rm dist/bundle.js",
-    "start": "parcel src/index.html",
-    "build": "parcel build",
-    "prepare": "husky install",
+    "build": "vite build",
+    "build-storybook": "storybook build",
     "check-style": "eslint 'src/**/*.{ts,tsx}'",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepare": "husky install",
+    "preview": "vite preview",
+    "start": "vite",
+    "storybook": "storybook dev -p 6006"
   },
   "files": [
     "dist"
   ],
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.21.0",
-    "@parcel/packager-ts": "^2.2.1",
-    "@parcel/transformer-svg-react": "^2.0.1",
-    "@parcel/transformer-typescript-types": "^2.2.1",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/test": "^8.6.4",
     "@tailwindcss/postcss": "^4.0.11",
+    "@types/node": "^22.13.10",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@types/styled-components": "^5.1.20",
@@ -46,16 +55,19 @@
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-security": "^3.0.1",
+    "eslint-plugin-storybook": "^0.11.4",
     "globals": "^16.0.0",
     "husky": "^7.0.0",
     "lint-staged": "^12.1.2",
-    "parcel": "^2.13.3",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "process": "^0.11.10",
+    "storybook": "^8.6.4",
     "styled-components": "^5.3.3",
     "tailwindcss": "^4.0.11",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "vite": "^6.2.1",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
     "@tailwindcss/postcss": "^4.0.11",
@@ -87,5 +99,10 @@
     "node": "20.18.3",
     "yarn": "1.22.19"
   },
-  "packageManager": "yarn@1.22.19+sha256.732620bac8b1690d507274f025f3c6cfdc3627a84d9642e38a07452cc00e0f2e"
+  "packageManager": "yarn@4.7.0",
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
 }

package.json

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { Button } from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: "Example/Button",
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: "centered",
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ["autodocs"],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  // 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
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: "Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: "Button",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "large",
+    label: "Button",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "small",
+    label: "Button",
+  },
+};

src/stories/Button.stories.ts

@@ -0,0 +1,41 @@
+import React from "react";
+
+import "./button.css";
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: "small" | "medium" | "large";
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = "medium",
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
+  return (
+    <button
+      type="button"
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " ",
+      )}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};