feat(component-library): initialize component library

.prettierignore

@@ -19,3 +19,5 @@ patches/
 apps/api-reference
 apps/staking
 governance/pyth_staking_sdk
+packages/component-library
+packages/fonts

packages/component-library/.prettierignore

@@ -0,0 +1,2 @@
+coverage/
+node_modules/

packages/component-library/.storybook/main.ts

@@ -0,0 +1,52 @@
+import { createRequire } from "node:module";
+
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const resolve = createRequire(import.meta.url).resolve;
+
+const config = {
+  framework: "@storybook/nextjs",
+
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/?(*.)story.tsx",
+    "../src/**/?(*.)stories.tsx",
+  ],
+
+  addons: [
+    "@storybook/addon-essentials",
+    "@storybook/addon-themes",
+    {
+      name: "@storybook/addon-styling-webpack",
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            use: [
+              "style-loader",
+              {
+                loader: "css-loader",
+                options: { importLoaders: 1 },
+              },
+              {
+                loader: "postcss-loader",
+                options: { implementation: resolve("postcss") },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+
+  webpackFinal: (config) => ({
+    ...config,
+    resolve: {
+      ...config.resolve,
+      extensionAlias: {
+        ".js": [".js", ".ts", ".tsx"],
+      },
+    },
+  }),
+} satisfies StorybookConfig;
+export default config;

packages/component-library/.storybook/postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: `${__dirname}/../tailwind.config.ts`,
+    },
+    autoprefixer: {},
+  },
+};

packages/component-library/.storybook/preview.tsx

@@ -0,0 +1,48 @@
+import { sans } from "@pythnetwork/fonts";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview, Decorator } from "@storybook/react";
+import { useEffect } from "react";
+
+import "./tailwind.css";
+
+const preview = {
+  parameters: {
+    backgrounds: { disable: true },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+  },
+} satisfies Preview;
+
+export default preview;
+
+const withRootClasses =
+  (...classes: string[]): Decorator =>
+  (storyFn) => {
+    useEffect(() => {
+      const root = document.querySelector("html");
+      const classList = classes
+        .flatMap((cls) => cls.split(" "))
+        .filter(Boolean);
+      if (root) {
+        root.classList.add(...classList);
+        return () => {
+          root.classList.remove(...classList);
+        };
+      } else {
+        return;
+      }
+    }, []);
+    return storyFn();
+  };
+
+export const decorators: Decorator[] = [
+  withRootClasses("font-sans antialiased", sans.variable),
+  withThemeByClassName({
+    themes: {
+      white: "light bg-white",
+      light: "light bg-beige-50",
+      dark: "dark bg-steel-800",
+      darker: "dark bg-steel-900",
+    },
+    defaultTheme: "light",
+  }),
+];

packages/component-library/.storybook/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/component-library/README.md

@@ -0,0 +1 @@
+# @pythnetwork/component-library

packages/component-library/eslint.config.js

@@ -0,0 +1,10 @@
+import { fileURLToPath } from "node:url";
+
+import { react, tailwind, storybook } from "@cprussin/eslint-config";
+
+const config = [
+  ...react,
+  ...tailwind(fileURLToPath(import.meta.resolve("./tailwind.config.ts"))),
+  ...storybook,
+];
+export default config;

packages/component-library/jest.config.js

@@ -0,0 +1 @@
+export { base as default } from "@cprussin/jest-config";

packages/component-library/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@pythnetwork/component-library",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build:storybook": "storybook build",
+    "fix": "pnpm fix:lint && pnpm fix:format",
+    "fix:format": "prettier --write .",
+    "fix:lint": "eslint --fix .",
+    "start:storybook": "storybook dev --port 4000 --no-open",
+    "test": "pnpm test:types && pnpm test:lint && pnpm test:format",
+    "test:format": "prettier --check .",
+    "test:lint": "jest --selectProjects lint",
+    "test:types": "tsc"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "react-aria": "^3.35.0",
+    "react-aria-components": "^1.4.0"
+  },
+  "devDependencies": {
+    "@cprussin/eslint-config": "^3.0.0",
+    "@cprussin/jest-config": "^1.4.1",
+    "@cprussin/prettier-config": "^2.1.1",
+    "@cprussin/tsconfig": "^3.0.1",
+    "@phosphor-icons/react": "^2.1.7",
+    "@pythnetwork/fonts": "workspace:^",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-themes": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/nextjs": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@tailwindcss/forms": "^0.5.9",
+    "@types/jest": "^29.5.13",
+    "@types/react": "^18.3.11",
+    "autoprefixer": "^10.4.20",
+    "css-loader": "^7.1.2",
+    "eslint": "^9.12.0",
+    "jest": "^29.7.0",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "storybook": "^8.3.5",
+    "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.13",
+    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-react-aria-components": "^1.1.6",
+    "typescript": "^5.6.3"
+  }
+}

packages/component-library/prettier.config.js

@@ -0,0 +1,10 @@
+import { fileURLToPath } from "node:url";
+
+import { base, tailwind, mergeConfigs } from "@cprussin/prettier-config";
+
+const config = mergeConfigs([
+  base,
+  tailwind(fileURLToPath(import.meta.resolve("./tailwind.config.ts"))),
+]);
+
+export default config;

packages/component-library/src/Button/arg-types.ts

@@ -0,0 +1,61 @@
+import * as Icon from "@phosphor-icons/react/dist/ssr";
+import type { ArgTypes } from "@storybook/react";
+
+import { VARIANTS, SIZES } from "./index.js";
+
+export const Category = {
+  State: "State",
+  Variant: "Variant",
+  Contents: "Contents",
+};
+
+export const argTypes = {
+  children: {
+    control: "text",
+    table: {
+      category: Category.Contents,
+    },
+  },
+  isDisabled: {
+    control: "boolean",
+    table: {
+      category: Category.State,
+    },
+  },
+  variant: {
+    control: "inline-radio",
+    options: VARIANTS,
+    table: {
+      category: Category.Variant,
+    },
+  },
+  size: {
+    control: "inline-radio",
+    options: SIZES,
+    table: {
+      category: Category.Variant,
+    },
+  },
+  rounded: {
+    control: "boolean",
+    table: {
+      category: Category.Variant,
+    },
+  },
+  beforeIcon: {
+    control: "select",
+    options: Object.keys(Icon),
+    mapping: Icon,
+    table: {
+      category: Category.Contents,
+    },
+  },
+  afterIcon: {
+    control: "select",
+    options: Object.keys(Icon),
+    mapping: Icon,
+    table: {
+      category: Category.Contents,
+    },
+  },
+} satisfies ArgTypes;

packages/component-library/src/Button/button-link.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { argTypes } from "./arg-types.js";
+import { ButtonLink as ButtonLinkComponent } from "./index.js";
+
+const meta = {
+  component: ButtonLinkComponent,
+  title: "Button/ButtonLink",
+  argTypes: {
+    ...argTypes,
+    href: {
+      control: "text",
+      table: {
+        category: "Link",
+      },
+    },
+    target: {
+      control: "text",
+      table: {
+        category: "Link",
+      },
+    },
+  },
+} satisfies Meta<typeof ButtonLinkComponent>;
+export default meta;
+
+export const ButtonLink = {
+  args: {
+    children: "Link",
+    href: "https://www.pyth.network",
+    target: "_blank",
+    variant: "primary",
+    size: "md",
+    isDisabled: false,
+    rounded: false,
+  },
+} satisfies StoryObj<typeof ButtonLinkComponent>;

packages/component-library/src/Button/index.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Category, argTypes } from "./arg-types.js";
+import { Button as ButtonComponent } from "./index.js";
+
+const meta = {
+  component: ButtonComponent,
+  argTypes: {
+    ...argTypes,
+    onPress: {
+      table: {
+        category: "Behavior",
+      },
+    },
+    isPending: {
+      control: "boolean",
+      table: {
+        category: Category.State,
+      },
+    },
+  },
+} satisfies Meta<typeof ButtonComponent>;
+export default meta;
+
+export const Button = {
+  args: {
+    children: "Button",
+    variant: "primary",
+    size: "md",
+    isDisabled: false,
+    isPending: false,
+    rounded: false,
+  },
+} satisfies StoryObj<typeof ButtonComponent>;