feat: first public commit

.github/workflows/publish.yaml

@@ -0,0 +1,26 @@
+name: Publish
+on:
+  release:
+    types: [published]
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.11.1"
+          registry-url: "https://registry.npmjs.org"
+      - run: pnpm install
+      - run: pnpm typecheck
+      - run: pnpm biome:check
+      - run: pnpm test
+      - run: npx playwright install --with-deps
+      - run: pnpm storybook:test:ci
+      - run: pnpm run build
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/storybook.yaml

@@ -0,0 +1,25 @@
+name: Storybook
+on:
+  push:
+    branches:
+      - main
+env:
+  cache-version: v1
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.11.1"
+          registry-url: "https://registry.npmjs.org"
+      - run: pnpm install
+      - run: npm run storybook:build
+      - uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.github/workflows/test.yaml

@@ -0,0 +1,20 @@
+name: Test
+on: [push]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "20.11.1"
+          registry-url: "https://registry.npmjs.org"
+      - run: pnpm install
+      - run: pnpm typecheck
+      - run: pnpm biome:check
+      - run: pnpm test
+      - run: npx playwright install --with-deps
+      - run: pnpm storybook:test:ci

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+.vscode/*
+*.local
+*.log
+dist
+node_modules
+storybook-static

.node-version

@@ -0,0 +1 @@
+20.11.1

.storybook/@types/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module "*.mdx" {
+    let MDXComponent: (props) => JSX.Element;
+    export default MDXComponent;
+  }
+

.storybook/DocumentationTemplate.mdx

@@ -0,0 +1,22 @@
+
+import { Meta } from "@storybook/blocks";
+
+import {
+  Title,
+  Primary,
+  Stories,
+  Description,
+  ArgTypes,
+} from "@storybook/blocks";
+
+<Meta isTemplate />
+
+<Title />
+
+<Description />
+
+<Primary />
+
+<ArgTypes />
+
+<Stories includePrimary={false} />

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-mdx-gfm",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+    defaultName: "Documentation",
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,55 @@
+import type { Decorator, Preview } from "@storybook/react";
+import DocumentationTemplate from "./DocumentationTemplate.mdx";
+import { useEffect } from "react";
+import React from "react";
+import { themes } from "@storybook/theming";
+
+import "../src/global.css";
+import "./storybook.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    layout: "centered",
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      page: DocumentationTemplate,
+      theme: themes.dark,
+    },
+  },
+};
+
+export const withTheme: Decorator = (StoryFn, context) => {
+  const theme = context.globals.theme;
+
+  useEffect(() => {
+    document.body.dataset.theme = theme;
+  }, [theme]);
+
+  return <StoryFn />;
+};
+
+export const decorators = [withTheme];
+
+export const globalTypes = {
+  theme: {
+    name: "Theme",
+    description: "Global theme for components",
+    defaultValue: "light",
+    toolbar: {
+      icon: "sun",
+      items: [
+        { value: "light", icon: "sun", title: "light" },
+        { value: "dark", icon: "moon", title: "dark" },
+      ],
+      showName: true,
+    },
+  },
+};
+
+export default preview;

.storybook/storybook.css

@@ -0,0 +1,27 @@
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");
+
+html {
+  font-family: "Noto Sans JP", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.material-symbols-outlined {
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 24;
+}
+
+.material-symbols-outlined[data-filled] {
+  font-variation-settings:
+    "FILL" 1,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 24;
+}
+
+.docs-story {
+  background-color: var(--cmpui-bg-color);
+}

.storybook/test-runner.ts

@@ -0,0 +1,11 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+
+const config: TestRunnerConfig = {
+  async postVisit(page) {
+    const elementHandler = await page.$("#storybook-root");
+    const innerHTML = await elementHandler?.innerHTML();
+    expect(innerHTML).toMatchSnapshot();
+  },
+};
+
+export default config;

biome.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+
+      "complexity": {
+        "noForEach": "off"
+      },
+      "suspicious": {
+        "noArrayIndexKey": "off"
+      },
+      "a11y": {
+        "noNoninteractiveTabindex": "off",
+        "noSvgWithoutTitle": "off",
+        "useKeyWithClickEvents": "off",
+        "useKeyWithMouseEvents": "off"
+      }
+    }
+  },
+  "formatter": {
+    "indentWidth": 2,
+    "indentStyle": "space"
+  }
+}

package.json

@@ -0,0 +1,68 @@
+{
+  "name": "cmpui",
+  "version": "1.0.0-alpha.0",
+  "description": "CmpUI is a component library designed for creating complex GUI applications in web browsers.",
+  "main": "dist/index.mjs",
+  "types": "dist/index.d.mts",
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.ci.json",
+    "test:watch": "vitest",
+    "test": "vitest run",
+    "biome:check": "biome check src",
+    "build": "tsup",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:test": "test-storybook",
+    "storybook:test:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook:build && npx http-server storybook-static --port 6006 --silent\" \"wait-on http://127.0.0.1:6006 && pnpm storybook:test\""
+  },
+  "dependencies": {
+    "@radix-ui/react-context-menu": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.4.1",
+    "@playwright/test": "^1.41.2",
+    "@storybook/addon-essentials": "^8.0.0-beta.3",
+    "@storybook/addon-interactions": "^8.0.0-beta.3",
+    "@storybook/addon-links": "^8.0.0-beta.3",
+    "@storybook/addon-mdx-gfm": "^8.0.0-beta.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-themes": "^8.0.0-beta.3",
+    "@storybook/blocks": "^8.0.0-beta.3",
+    "@storybook/react": "^8.0.0-beta.3",
+    "@storybook/react-vite": "^8.0.0-beta.3",
+    "@storybook/test": "^8.0.0-beta.3",
+    "@storybook/test-runner": "^0.16.0",
+    "@storybook/theming": "^8.0.0-beta.3",
+    "@types/jest": "^29.5.11",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "concurrently": "^8.2.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.0.0-beta.3",
+    "tsup": "^8.0.1",
+    "typescript": "^5.2.2",
+    "vitest": "^1.1.0",
+    "wait-on": "^7.2.0"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "components",
+    "ui",
+    "gui"
+  ],
+  "author": "toshusai",
+  "license": "MIT"
+}