sparkle-design 0.9.0

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+export * from "./components/ui/badge";
+export * from "./components/ui/breadcrumb";
+export * from "./components/ui/button";
+export * from "./components/ui/card";
+export * from "./components/ui/checkbox";
+export * from "./components/ui/dialog";
+export * from "./components/ui/divider";
+export * from "./components/ui/form";
+export * from "./components/ui/icon";
+export * from "./components/ui/icon-button";
+export * from "./components/ui/inline-message";
+export * from "./components/ui/input";
+export * from "./components/ui/input-password";
+export * from "./components/ui/link";
+export * from "./components/ui/modal";
+export * from "./components/ui/overlay";
+export * from "./components/ui/radio";
+export * from "./components/ui/select";
+export * from "./components/ui/skeleton";
+export * from "./components/ui/slider";
+export * from "./components/ui/spinner";
+export * from "./components/ui/switch";
+export * from "./components/ui/tabs";
+export * from "./components/ui/tag";
+export * from "./components/ui/textarea";
+export * from "./components/ui/toast";
+export * from "./components/ui/tooltip";

package/dist/index.js

@@ -0,0 +1,27 @@
+export * from "./components/ui/badge/index.js";
+export * from "./components/ui/breadcrumb/index.js";
+export * from "./components/ui/button/index.js";
+export * from "./components/ui/card/index.js";
+export * from "./components/ui/checkbox/index.js";
+export * from "./components/ui/dialog/index.js";
+export * from "./components/ui/divider/index.js";
+export * from "./components/ui/form/index.js";
+export * from "./components/ui/icon/index.js";
+export * from "./components/ui/icon-button/index.js";
+export * from "./components/ui/inline-message/index.js";
+export * from "./components/ui/input/index.js";
+export * from "./components/ui/input-password/index.js";
+export * from "./components/ui/link/index.js";
+export * from "./components/ui/modal/index.js";
+export * from "./components/ui/overlay/index.js";
+export * from "./components/ui/radio/index.js";
+export * from "./components/ui/select/index.js";
+export * from "./components/ui/skeleton/index.js";
+export * from "./components/ui/slider/index.js";
+export * from "./components/ui/spinner/index.js";
+export * from "./components/ui/switch/index.js";
+export * from "./components/ui/tabs/index.js";
+export * from "./components/ui/tag/index.js";
+export * from "./components/ui/textarea/index.js";
+export * from "./components/ui/toast/index.js";
+export * from "./components/ui/tooltip/index.js";

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/test/helpers.d.ts

@@ -0,0 +1,56 @@
+import React from "react";
+/**
+ * テストコンテナのセットアップとクリーンアップを管理するヘルパー
+ * en: Helper to manage test container setup and cleanup
+ */
+export declare class TestContainer {
+    private container;
+    private root;
+    setup(): void;
+    cleanup(): void;
+    render(element: React.ReactElement): void;
+    getContainer(): HTMLDivElement;
+    querySelector<T extends Element = Element>(selector: string): T;
+    queryByTestId<T extends HTMLElement = HTMLElement>(testId: string): T;
+    queryInput(selector?: string): HTMLInputElement;
+    queryButton(selector?: string): HTMLButtonElement;
+}
+/**
+ * イベントディスパッチのヘルパー
+ * en: Event dispatch helpers
+ */
+export declare const EventHelpers: {
+    click(element: Element): void;
+    change(element: HTMLInputElement | HTMLTextAreaElement, value: string): void;
+    keyDown(element: Element, key: string): void;
+    focus(element: HTMLElement): void;
+    blur(element: HTMLElement): void;
+};
+/**
+ * アクセシビリティテストのヘルパー
+ * en: Accessibility test helpers
+ */
+export declare const A11yHelpers: {
+    hasAriaLabel(element: Element, expectedLabel: string): boolean;
+    hasAriaDescribedBy(element: Element): boolean;
+    hasRole(element: Element, expectedRole: string): boolean;
+    isDisabled(element: Element): boolean;
+    hasValidAriaExpanded(element: Element): boolean;
+};
+/**
+ * CSS クラステストのヘルパー
+ * en: CSS class test helpers
+ */
+export declare const StyleHelpers: {
+    hasClass(element: Element, className: string): boolean;
+    hasClasses(element: Element, classNames: string[]): boolean;
+    getComputedStyleProperty(element: Element, property: string): string;
+};
+/**
+ * 非同期テストのヘルパー
+ * en: Async test helpers
+ */
+export declare const AsyncHelpers: {
+    waitFor(callback: () => boolean | void, timeout?: number, interval?: number): Promise<void>;
+    delay(ms: number): Promise<void>;
+};

package/dist/test/helpers.js

@@ -0,0 +1,182 @@
+import ReactDOM from "react-dom/client";
+import { act } from "@testing-library/react";
+/**
+ * テストコンテナのセットアップとクリーンアップを管理するヘルパー
+ * en: Helper to manage test container setup and cleanup
+ */
+export class TestContainer {
+    constructor() {
+        this.container = null;
+        this.root = null;
+    }
+    setup() {
+        this.container = document.createElement("div");
+        document.body.appendChild(this.container);
+        this.root = ReactDOM.createRoot(this.container);
+    }
+    cleanup() {
+        if (this.root) {
+            act(() => {
+                this.root.unmount();
+            });
+            this.root = null;
+        }
+        if (this.container) {
+            document.body.removeChild(this.container);
+            this.container = null;
+        }
+    }
+    render(element) {
+        if (!this.root) {
+            throw new Error("Container not set up. Call setup() first.");
+        }
+        act(() => {
+            this.root.render(element);
+        });
+    }
+    getContainer() {
+        if (!this.container) {
+            throw new Error("Container not set up. Call setup() first.");
+        }
+        return this.container;
+    }
+    querySelector(selector) {
+        const element = this.getContainer().querySelector(selector);
+        if (!element) {
+            throw new Error(`Element not found: ${selector}`);
+        }
+        return element;
+    }
+    queryByTestId(testId) {
+        return this.querySelector(`[data-testid="${testId}"]`);
+    }
+    queryInput(selector = "input") {
+        const element = this.getContainer().querySelector(selector);
+        if (!element) {
+            throw new Error(`Input element not found: ${selector}`);
+        }
+        return element;
+    }
+    queryButton(selector = "button") {
+        const element = this.getContainer().querySelector(selector);
+        if (!element) {
+            throw new Error(`Button element not found: ${selector}`);
+        }
+        return element;
+    }
+}
+/**
+ * イベントディスパッチのヘルパー
+ * en: Event dispatch helpers
+ */
+export const EventHelpers = {
+    click(element) {
+        act(() => {
+            element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        });
+    },
+    change(element, value) {
+        act(() => {
+            var _a;
+            // input/textarea 双方に対応した value セッターを取得
+            // en: obtain native value setter for both input and textarea
+            const proto = element instanceof HTMLTextAreaElement
+                ? window.HTMLTextAreaElement.prototype
+                : window.HTMLInputElement.prototype;
+            const nativeValueSetter = (_a = Object.getOwnPropertyDescriptor(proto, "value")) === null || _a === void 0 ? void 0 : _a.set;
+            if (nativeValueSetter) {
+                nativeValueSetter.call(element, value);
+            }
+            else {
+                element.value = value; // フォールバック / fallback
+            }
+            element.dispatchEvent(new Event("input", { bubbles: true }));
+            element.dispatchEvent(new Event("change", { bubbles: true }));
+        });
+    },
+    keyDown(element, key) {
+        act(() => {
+            element.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+        });
+    },
+    focus(element) {
+        act(() => {
+            element.focus();
+        });
+    },
+    blur(element) {
+        act(() => {
+            element.blur();
+        });
+    },
+};
+/**
+ * アクセシビリティテストのヘルパー
+ * en: Accessibility test helpers
+ */
+export const A11yHelpers = {
+    hasAriaLabel(element, expectedLabel) {
+        return element.getAttribute("aria-label") === expectedLabel;
+    },
+    hasAriaDescribedBy(element) {
+        return element.hasAttribute("aria-describedby");
+    },
+    hasRole(element, expectedRole) {
+        return element.getAttribute("role") === expectedRole;
+    },
+    isDisabled(element) {
+        return (element.hasAttribute("disabled") ||
+            element.getAttribute("aria-disabled") === "true");
+    },
+    hasValidAriaExpanded(element) {
+        const ariaExpanded = element.getAttribute("aria-expanded");
+        return ariaExpanded === "true" || ariaExpanded === "false";
+    },
+};
+/**
+ * CSS クラステストのヘルパー
+ * en: CSS class test helpers
+ */
+export const StyleHelpers = {
+    hasClass(element, className) {
+        return element.classList.contains(className);
+    },
+    hasClasses(element, classNames) {
+        return classNames.every(className => element.classList.contains(className));
+    },
+    getComputedStyleProperty(element, property) {
+        return window.getComputedStyle(element).getPropertyValue(property);
+    },
+};
+/**
+ * 非同期テストのヘルパー
+ * en: Async test helpers
+ */
+export const AsyncHelpers = {
+    waitFor(callback, timeout = 1000, interval = 50) {
+        return new Promise((resolve, reject) => {
+            const startTime = Date.now();
+            const check = () => {
+                try {
+                    const result = callback();
+                    if (result !== false) {
+                        resolve();
+                        return;
+                    }
+                }
+                catch (error) {
+                    // Continue checking
+                }
+                if (Date.now() - startTime >= timeout) {
+                    reject(new Error(`Timeout after ${timeout}ms`));
+                    return;
+                }
+                setTimeout(check, interval);
+            };
+            check();
+        });
+    },
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    },
+};

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/setup.js

@@ -0,0 +1,38 @@
+// Vitest テストセットアップファイル
+// en: Vitest test setup file
+import { expect } from "vitest";
+import * as matchers from "@testing-library/jest-dom/matchers";
+// Testing Library matcher拡張
+// en: Extend Testing Library matchers
+expect.extend(matchers);
+// jsdom環境でのReact 18対応
+// en: React 18 support for jsdom environment
+Object.defineProperty(window, "IS_REACT_ACT_ENVIRONMENT", {
+    writable: true,
+    value: true,
+});
+// ResizeObserver polyfill for jsdom
+// en: ResizeObserver polyfill for jsdom
+global.ResizeObserver = class ResizeObserver {
+    constructor(callback) {
+        this.callback = callback;
+    }
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+};
+// MatchMedia polyfill for jsdom
+// en: MatchMedia polyfill for jsdom
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: (query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => { },
+        removeListener: () => { },
+        addEventListener: () => { },
+        removeEventListener: () => { },
+        dispatchEvent: () => { },
+    }),
+});

package/package.json

@@ -0,0 +1,253 @@
+{
+  "name": "sparkle-design",
+  "version": "0.9.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "author": "Goodpatch Inc. <sparkle-design@goodpatch.com>",
+  "type": "module",
+  "license": "Apache-2.0",
+  "description": "Sparkle DesignのReactコンポーネントライブラリ",
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "tailwind",
+    "sparkle-design"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/goodpatch/sparkle-design"
+  },
+  "homepage": "https://sparkle-design.goodpatch.com",
+  "bugs": {
+    "url": "https://github.com/goodpatch/sparkle-design/issues"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "vitest run --project unit",
+    "test:watch": "vitest --project unit",
+    "test:ai-analyze": "npm test > test-output.log 2>&1 && echo 'Test results saved to test-output.log for AI analysis'",
+    "test:failures": "npm test > test-output.log 2>&1 && grep -A 5 -B 5 'FAIL\\|✗\\|Error' test-output.log > test-failures.log && echo 'Test failures extracted to test-failures.log'",
+    "test:cleanup": "rm -f test-output.log test-failures.log test-*.log",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --output-dir public/storybook",
+    "build:css": "npx --yes sparkle-design-cli generate",
+    "build:registry": "shadcn build",
+    "build:registry:full": "make registry",
+    "build:registry:merge": "node scripts/merge-registry.mjs",
+    "build:registry:vercel": "bash scripts/build-registry-vercel.sh",
+    "preinstall": "npx only-allow pnpm",
+    "postinstall": "npx lightningcss --version || true",
+    "build:package": "rm -rf dist && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "format": "prettier --config ./.prettierrc -w \"**/*.{js,ts,tsx,css,md,json}\"",
+    "format:check": "prettier --config ./.prettierrc --check \"**/*.{js,ts,tsx,css,md,json}\"",
+    "lint:fix": "next lint --fix",
+    "lint:check": "next lint",
+    "type-check": "tsc --noEmit",
+    "update:public-domain": "node scripts/update-public-domain.mjs"
+  },
+  "dependencies": {
+    "@figma/code-connect": "^1.3.4",
+    "@hookform/resolvers": "^5.2.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "glob": "^11.0.0",
+    "lucide-react": "^0.487.0",
+    "radix-ui": "^1.4.2",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-hook-form": "^7.63.0",
+    "shadcn": "^2.5.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.2.0",
+    "tw-animate-css": "^1.2.5",
+    "zod": "^4.1.11"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.1",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-onboarding": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/nextjs-vite": "^10.3.5",
+    "@tailwindcss/postcss": "^4.1.7",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitest/browser": "^3.0.9",
+    "@vitest/coverage-v8": "^3.0.9",
+    "axe-core": "^4.10.3",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-storybook": "^10.3.5",
+    "next": "15.5.15",
+    "playwright": "^1.51.1",
+    "prettier": "^3.6.2",
+    "storybook": "^10.3.5",
+    "tailwindcss": "^4",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5",
+    "vite": "6.4.2",
+    "vitest": "^3.0.9"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./badge": {
+      "types": "./dist/components/ui/badge/index.d.ts",
+      "import": "./dist/components/ui/badge/index.js",
+      "require": "./dist/components/ui/badge/index.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/components/ui/breadcrumb/index.d.ts",
+      "import": "./dist/components/ui/breadcrumb/index.js",
+      "require": "./dist/components/ui/breadcrumb/index.js"
+    },
+    "./button": {
+      "types": "./dist/components/ui/button/index.d.ts",
+      "import": "./dist/components/ui/button/index.js",
+      "require": "./dist/components/ui/button/index.js"
+    },
+    "./card": {
+      "types": "./dist/components/ui/card/index.d.ts",
+      "import": "./dist/components/ui/card/index.js",
+      "require": "./dist/components/ui/card/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/components/ui/checkbox/index.d.ts",
+      "import": "./dist/components/ui/checkbox/index.js",
+      "require": "./dist/components/ui/checkbox/index.js"
+    },
+    "./dialog": {
+      "types": "./dist/components/ui/dialog/index.d.ts",
+      "import": "./dist/components/ui/dialog/index.js",
+      "require": "./dist/components/ui/dialog/index.js"
+    },
+    "./divider": {
+      "types": "./dist/components/ui/divider/index.d.ts",
+      "import": "./dist/components/ui/divider/index.js",
+      "require": "./dist/components/ui/divider/index.js"
+    },
+    "./form": {
+      "types": "./dist/components/ui/form/index.d.ts",
+      "import": "./dist/components/ui/form/index.js",
+      "require": "./dist/components/ui/form/index.js"
+    },
+    "./icon": {
+      "types": "./dist/components/ui/icon/index.d.ts",
+      "import": "./dist/components/ui/icon/index.js",
+      "require": "./dist/components/ui/icon/index.js"
+    },
+    "./icon-button": {
+      "types": "./dist/components/ui/icon-button/index.d.ts",
+      "import": "./dist/components/ui/icon-button/index.js",
+      "require": "./dist/components/ui/icon-button/index.js"
+    },
+    "./inline-message": {
+      "types": "./dist/components/ui/inline-message/index.d.ts",
+      "import": "./dist/components/ui/inline-message/index.js",
+      "require": "./dist/components/ui/inline-message/index.js"
+    },
+    "./input": {
+      "types": "./dist/components/ui/input/index.d.ts",
+      "import": "./dist/components/ui/input/index.js",
+      "require": "./dist/components/ui/input/index.js"
+    },
+    "./input-password": {
+      "types": "./dist/components/ui/input-password/index.d.ts",
+      "import": "./dist/components/ui/input-password/index.js",
+      "require": "./dist/components/ui/input-password/index.js"
+    },
+    "./link": {
+      "types": "./dist/components/ui/link/index.d.ts",
+      "import": "./dist/components/ui/link/index.js",
+      "require": "./dist/components/ui/link/index.js"
+    },
+    "./modal": {
+      "types": "./dist/components/ui/modal/index.d.ts",
+      "import": "./dist/components/ui/modal/index.js",
+      "require": "./dist/components/ui/modal/index.js"
+    },
+    "./overlay": {
+      "types": "./dist/components/ui/overlay/index.d.ts",
+      "import": "./dist/components/ui/overlay/index.js",
+      "require": "./dist/components/ui/overlay/index.js"
+    },
+    "./radio": {
+      "types": "./dist/components/ui/radio/index.d.ts",
+      "import": "./dist/components/ui/radio/index.js",
+      "require": "./dist/components/ui/radio/index.js"
+    },
+    "./select": {
+      "types": "./dist/components/ui/select/index.d.ts",
+      "import": "./dist/components/ui/select/index.js",
+      "require": "./dist/components/ui/select/index.js"
+    },
+    "./skeleton": {
+      "types": "./dist/components/ui/skeleton/index.d.ts",
+      "import": "./dist/components/ui/skeleton/index.js",
+      "require": "./dist/components/ui/skeleton/index.js"
+    },
+    "./slider": {
+      "types": "./dist/components/ui/slider/index.d.ts",
+      "import": "./dist/components/ui/slider/index.js",
+      "require": "./dist/components/ui/slider/index.js"
+    },
+    "./spinner": {
+      "types": "./dist/components/ui/spinner/index.d.ts",
+      "import": "./dist/components/ui/spinner/index.js",
+      "require": "./dist/components/ui/spinner/index.js"
+    },
+    "./switch": {
+      "types": "./dist/components/ui/switch/index.d.ts",
+      "import": "./dist/components/ui/switch/index.js",
+      "require": "./dist/components/ui/switch/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/ui/tabs/index.d.ts",
+      "import": "./dist/components/ui/tabs/index.js",
+      "require": "./dist/components/ui/tabs/index.js"
+    },
+    "./tag": {
+      "types": "./dist/components/ui/tag/index.d.ts",
+      "import": "./dist/components/ui/tag/index.js",
+      "require": "./dist/components/ui/tag/index.js"
+    },
+    "./textarea": {
+      "types": "./dist/components/ui/textarea/index.d.ts",
+      "import": "./dist/components/ui/textarea/index.js",
+      "require": "./dist/components/ui/textarea/index.js"
+    },
+    "./toast": {
+      "types": "./dist/components/ui/toast/index.d.ts",
+      "import": "./dist/components/ui/toast/index.js",
+      "require": "./dist/components/ui/toast/index.js"
+    },
+    "./tooltip": {
+      "types": "./dist/components/ui/tooltip/index.d.ts",
+      "import": "./dist/components/ui/tooltip/index.js",
+      "require": "./dist/components/ui/tooltip/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "NOTICE"
+  ]
+}