@vtspecian/ui-core-design-system 0.1.0

package/README.md

@@ -0,0 +1,57 @@
+# @victorts1991/ui-core-design-system
+
+A high-performance, accessible, and scalable UI Design System built for modern web applications. This project follows industry-leading architectural patterns for component libraries, ensuring a robust foundation for React-based ecosystems.
+
+## 🚀 **Tech Stack**
+
+* **React 19**: Leveraging the newest concurrent rendering features and hooks.
+* **Tailwind CSS 4**: Utilizing the latest CSS-engine for optimized, utility-first styling.
+* **TypeScript 5**: Strict type-safety across all components and utility functions.
+* **tsup**: Advanced bundler powered by **esbuild** for dual-format (ESM/CJS) distribution.
+* **Storybook 8**: Comprehensive documentation and isolated development environment.
+* **Vitest & React Testing Library**: Modern testing suite for reliable unit and interaction testing.
+
+## 🛠 **Project Architecture**
+
+The project follows a modular structure designed for maintainability and clear separation of concerns:
+
+```text
+src/
+├── components/     # Atomic UI components with logic and variants
+├── styles/         # Global styles and Tailwind v4 theme definitions
+├── test/           # Test setup and global configuration
+└── index.ts        # Library public API (Entry point)
+```
+
+## 🧪 **Quality Assurance (QA)**
+
+As an **Architect-led project**, code reliability is a priority. Every component is tested for interaction logic and visual states.
+
+### **Automated Testing**
+To run the unit test suite:
+```bash
+npm test
+```
+
+### **Documentation & Visual Testing**
+To explore the component library in isolation via **Storybook**:
+```bash
+npm run storybook
+```
+
+## 🏗 **Development Workflow**
+
+1. **Building for Production**: Generates an optimized bundle in the **dist/** directory, including type definitions.
+   ```bash
+   npm run build
+   ```
+2. **Linting**: Static analysis to ensure code consistency.
+   ```bash
+   npm run lint
+   ```
+
+## 📖 **Component Principles**
+
+* **Accessibility First**: Every component is designed with **ARIA compliance** and keyboard navigation in mind.
+* **Performance**: Zero-runtime overhead by leveraging **Tailwind CSS 4** and optimized build steps.
+* **Extensibility**: Components use the **composition pattern**, allowing consumers to extend functionality via props and className merging.

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var n=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var r in e)n(t,r,{get:e[r],enumerable:!0})},h=(t,e,r,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of p(e))!u.call(t,o)&&o!==r&&n(t,o,{get:()=>e[o],enumerable:!(a=g(e,o))||a.enumerable});return t};var y=t=>h(n({},"__esModule",{value:!0}),t);var f={};x(f,{Button:()=>v});module.exports=y(f);var s=require("react/jsx-runtime"),v=({children:t,variant:e="primary",size:r="md",isLoading:a=!1,className:o="",disabled:i,...c})=>{let l="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",d={primary:"bg-blue-600 text-white hover:bg-blue-700",secondary:"bg-gray-100 text-gray-900 hover:bg-gray-200",danger:"bg-red-600 text-white hover:bg-red-700",ghost:"hover:bg-gray-100 text-gray-700"},m={sm:"h-8 px-3 text-xs",md:"h-10 px-4 text-sm",lg:"h-12 px-6 text-base"},b=`${l} ${d[e]} ${m[r]} ${o}`;return(0,s.jsx)("button",{className:b,disabled:i||a,...c,children:a?(0,s.jsxs)("span",{className:"flex items-center gap-2",children:[(0,s.jsxs)("svg",{className:"animate-spin h-4 w-4",viewBox:"0 0 24 24",children:[(0,s.jsx)("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4",fill:"none"}),(0,s.jsx)("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Loading..."]}):t})};0&&(module.exports={Button});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Button.tsx"],"sourcesContent":["export * from './components/Button'","import { ButtonHTMLAttributes, ReactNode } from 'react';\n\n// A interface estende ButtonHTMLAttributes para incluir onClick, disabled, className, etc.\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n  isLoading?: boolean;\n}\n\nexport const Button = ({\n  children,\n  variant = 'primary',\n  size = 'md',\n  isLoading = false,\n  className = '',\n  disabled,\n  ...props // Repassa todas as outras propriedades nativas (como onClick)\n}: ButtonProps) => {\n  \n  // Definição manual das classes caso não esteja usando uma lib de variants ainda\n  const baseStyles = \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50\";\n  \n  const variants = {\n    primary: \"bg-blue-600 text-white hover:bg-blue-700\",\n    secondary: \"bg-gray-100 text-gray-900 hover:bg-gray-200\",\n    danger: \"bg-red-600 text-white hover:bg-red-700\",\n    ghost: \"hover:bg-gray-100 text-gray-700\",\n  };\n\n  const sizes = {\n    sm: \"h-8 px-3 text-xs\",\n    md: \"h-10 px-4 text-sm\",\n    lg: \"h-12 px-6 text-base\",\n  };\n\n  // Combinação das classes (recomendo usar a lib 'clsx' ou 'tailwind-merge' futuramente)\n  const combinedClasses = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;\n\n  return (\n    <button\n      className={combinedClasses}\n      disabled={disabled || isLoading} // O botão fica desativado se estiver carregando\n      {...props} // Aplica o onClick e outros atributos passados\n    >\n      {isLoading ? (\n        <span className=\"flex items-center gap-2\">\n          <svg className=\"animate-spin h-4 w-4\" viewBox=\"0 0 24 24\">\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" fill=\"none\" />\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n          </svg>\n          Loading...\n        </span>\n      ) : (\n        children\n      )}\n    </button>\n  );\n};"],"mappings":"yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,IAAA,eAAAC,EAAAH,GC+CU,IAAAI,EAAA,6BArCGC,EAAS,CAAC,CACrB,SAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,UAAAC,EAAY,GACZ,SAAAC,EACA,GAAGC,CACL,IAAmB,CAGjB,IAAMC,EAAa,oLAEbC,EAAW,CACf,QAAS,2CACT,UAAW,8CACX,OAAQ,yCACR,MAAO,iCACT,EAEMC,EAAQ,CACZ,GAAI,mBACJ,GAAI,oBACJ,GAAI,qBACN,EAGMC,EAAkB,GAAGH,CAAU,IAAIC,EAASP,CAAO,CAAC,IAAIQ,EAAMP,CAAI,CAAC,IAAIE,CAAS,GAEtF,SACE,OAAC,UACC,UAAWM,EACX,SAAUL,GAAYF,EACrB,GAAGG,EAEH,SAAAH,KACC,QAAC,QAAK,UAAU,0BACd,qBAAC,OAAI,UAAU,uBAAuB,QAAQ,YAC5C,oBAAC,UAAO,UAAU,aAAa,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,OAAO,eAAe,YAAY,IAAI,KAAK,OAAO,KACxG,OAAC,QAAK,UAAU,aAAa,KAAK,eAAe,EAAE,kHAAkH,GACvK,EAAM,cAER,EAEAH,EAEJ,CAEJ","names":["index_exports","__export","Button","__toCommonJS","import_jsx_runtime","Button","children","variant","size","isLoading","className","disabled","props","baseStyles","variants","sizes","combinedClasses"]}

package/dist/index.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    isLoading?: boolean;
+}
+declare const Button: ({ children, variant, size, isLoading, className, disabled, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    size?: 'sm' | 'md' | 'lg';
+    isLoading?: boolean;
+}
+declare const Button: ({ children, variant, size, isLoading, className, disabled, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, type ButtonProps };

package/dist/index.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";var g=({children:s,variant:r="primary",size:a="md",isLoading:t=!1,className:n="",disabled:i,...c})=>{let l="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",d={primary:"bg-blue-600 text-white hover:bg-blue-700",secondary:"bg-gray-100 text-gray-900 hover:bg-gray-200",danger:"bg-red-600 text-white hover:bg-red-700",ghost:"hover:bg-gray-100 text-gray-700"},m={sm:"h-8 px-3 text-xs",md:"h-10 px-4 text-sm",lg:"h-12 px-6 text-base"},b=`${l} ${d[r]} ${m[a]} ${n}`;return e("button",{className:b,disabled:i||t,...c,children:t?o("span",{className:"flex items-center gap-2",children:[o("svg",{className:"animate-spin h-4 w-4",viewBox:"0 0 24 24",children:[e("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4",fill:"none"}),e("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Loading..."]}):s})};export{g as Button};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button.tsx"],"sourcesContent":["import { ButtonHTMLAttributes, ReactNode } from 'react';\n\n// A interface estende ButtonHTMLAttributes para incluir onClick, disabled, className, etc.\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n  size?: 'sm' | 'md' | 'lg';\n  isLoading?: boolean;\n}\n\nexport const Button = ({\n  children,\n  variant = 'primary',\n  size = 'md',\n  isLoading = false,\n  className = '',\n  disabled,\n  ...props // Repassa todas as outras propriedades nativas (como onClick)\n}: ButtonProps) => {\n  \n  // Definição manual das classes caso não esteja usando uma lib de variants ainda\n  const baseStyles = \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50\";\n  \n  const variants = {\n    primary: \"bg-blue-600 text-white hover:bg-blue-700\",\n    secondary: \"bg-gray-100 text-gray-900 hover:bg-gray-200\",\n    danger: \"bg-red-600 text-white hover:bg-red-700\",\n    ghost: \"hover:bg-gray-100 text-gray-700\",\n  };\n\n  const sizes = {\n    sm: \"h-8 px-3 text-xs\",\n    md: \"h-10 px-4 text-sm\",\n    lg: \"h-12 px-6 text-base\",\n  };\n\n  // Combinação das classes (recomendo usar a lib 'clsx' ou 'tailwind-merge' futuramente)\n  const combinedClasses = `${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`;\n\n  return (\n    <button\n      className={combinedClasses}\n      disabled={disabled || isLoading} // O botão fica desativado se estiver carregando\n      {...props} // Aplica o onClick e outros atributos passados\n    >\n      {isLoading ? (\n        <span className=\"flex items-center gap-2\">\n          <svg className=\"animate-spin h-4 w-4\" viewBox=\"0 0 24 24\">\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" fill=\"none\" />\n            <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\" />\n          </svg>\n          Loading...\n        </span>\n      ) : (\n        children\n      )}\n    </button>\n  );\n};"],"mappings":"AA+CU,OACE,OAAAA,EADF,QAAAC,MAAA,oBArCH,IAAMC,EAAS,CAAC,CACrB,SAAAC,EACA,QAAAC,EAAU,UACV,KAAAC,EAAO,KACP,UAAAC,EAAY,GACZ,UAAAC,EAAY,GACZ,SAAAC,EACA,GAAGC,CACL,IAAmB,CAGjB,IAAMC,EAAa,oLAEbC,EAAW,CACf,QAAS,2CACT,UAAW,8CACX,OAAQ,yCACR,MAAO,iCACT,EAEMC,EAAQ,CACZ,GAAI,mBACJ,GAAI,oBACJ,GAAI,qBACN,EAGMC,EAAkB,GAAGH,CAAU,IAAIC,EAASP,CAAO,CAAC,IAAIQ,EAAMP,CAAI,CAAC,IAAIE,CAAS,GAEtF,OACEP,EAAC,UACC,UAAWa,EACX,SAAUL,GAAYF,EACrB,GAAGG,EAEH,SAAAH,EACCL,EAAC,QAAK,UAAU,0BACd,UAAAA,EAAC,OAAI,UAAU,uBAAuB,QAAQ,YAC5C,UAAAD,EAAC,UAAO,UAAU,aAAa,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,OAAO,eAAe,YAAY,IAAI,KAAK,OAAO,EACxGA,EAAC,QAAK,UAAU,aAAa,KAAK,eAAe,EAAE,kHAAkH,GACvK,EAAM,cAER,EAEAG,EAEJ,CAEJ","names":["jsx","jsxs","Button","children","variant","size","isLoading","className","disabled","props","baseStyles","variants","sizes","combinedClasses"]}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@vtspecian/ui-core-design-system",
+  "version": "0.1.0",
+  "description": "A scalable UI Design System built with React, Tailwind CSS and TypeScript.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "scripts": {
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts --clean",
+    "build": "tsup src/index.ts --format cjs,esm --minify --clean --dts",
+    "lint": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/victorts1991/ui-core-design-system.git"
+  },
+  "author": "Victor Toupitzen Specian",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.15",
+    "@storybook/addon-interactions": "^8.6.15",
+    "@storybook/addon-links": "^8.6.15",
+    "@storybook/addon-onboarding": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/test": "^8.6.15",
+    "@tailwindcss/vite": "^4.1.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "autoprefixer": "^10.4.23",
+    "jsdom": "^27.3.0",
+    "postcss": "^8.5.6",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "storybook": "^8.6.15",
+    "tailwindcss": "^4.1.18",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1",
+    "vitest": "^4.0.16"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}