maquinaweb-ui 1.0.0

package/README.md

@@ -0,0 +1,284 @@
+# MaquinaWeb UI
+
+A minimal React component library built with TypeScript, formatted with Biome, and powered by Bun.
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+- [Bun](https://bun.sh) installed on your system
+
+### Installation
+
+```bash
+# Install dependencies
+bun install
+```
+
+## 📦 Project Structure
+
+```
+maquinaweb-ui/
+├── src/
+│   ├── components/
+│   │   └── Button/
+│   │       ├── Button.tsx          # Component implementation
+│   │       ├── Button.fixture.tsx  # React Cosmos fixtures
+│   │       └── index.ts            # Component exports
+│   └── index.ts                    # Library entry point
+├── app/
+│   ├── layout.tsx                  # Next.js root layout
+│   └── page.tsx                    # Next.js preview page
+├── dist/                           # Build output (generated)
+├── package.json
+├── tsconfig.json
+├── biome.json
+├── tsup.config.ts
+├── cosmos.config.json
+└── next.config.ts
+```
+
+## 🛠️ Development
+
+### Run Next.js Dev Server
+
+Preview components in a Next.js environment:
+
+```bash
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to see the preview.
+
+### Run React Cosmos
+
+Develop components in isolation with React Cosmos. React Cosmos uses Next.js as a renderer, so you need both running:
+
+**Terminal 1 - Start Next.js:**
+```bash
+bun dev
+```
+
+**Terminal 2 - Start Cosmos:**
+```bash
+bun cosmos
+```
+
+Open [http://localhost:5000](http://localhost:5000) to see the Cosmos UI.
+
+> **Note:** Cosmos connects to Next.js running at `http://localhost:3000/cosmos/` to render your fixtures.
+
+### Linting & Formatting
+
+```bash
+# Check for issues
+bun lint
+
+# Fix issues automatically
+bun lint:fix
+
+# Format code
+bun format
+```
+
+## 🏗️ Building
+
+Build the library for publishing:
+
+```bash
+bun build
+```
+
+This will:
+- Generate ESM bundles in the `dist/` directory
+- Create TypeScript declaration files (`.d.ts`)
+- Add source maps for debugging
+
+## 🚀 Deploying to Vercel
+
+You can deploy your Cosmos component documentation to Vercel with automatic configuration.
+
+**Quick Start:**
+1. Push your code to GitHub/GitLab/Bitbucket
+2. Connect your repository at [vercel.com](https://vercel.com)
+3. Click Deploy - it will use the pre-configured `vercel.json` settings
+4. Your Cosmos documentation will be live! 🎉
+
+**Configuration is already set up:**
+- ✅ Build Command: `bun run build:vercel`
+- ✅ Output Directory: `cosmos-export`
+- ✅ Install Command: `bun install`
+
+**📖 For detailed instructions in Portuguese, see [DEPLOY_VERCEL.md](./DEPLOY_VERCEL.md)**
+
+**Manual Build (optional):**
+```bash
+bun run build:vercel
+```
+This will build Next.js and export static Cosmos files to `cosmos-export/`.
+
+## 📤 Publishing
+
+Este projeto usa **semantic-release** para automatizar versionamento e publicação.
+
+### 🤖 Publicação Automática (Recomendado)
+
+O versionamento e publicação são **100% automáticos** via GitHub Actions:
+
+1. **Configure o NPM_TOKEN no GitHub:**
+   - Gere um token em [npmjs.com](https://www.npmjs.com/) → Settings → Access Tokens
+   - Adicione como secret `NPM_TOKEN` no repositório GitHub
+
+2. **Configure o `package.json` (já configurado):**
+   ```json
+   {
+     "name": "maquinaweb-ui",
+     "author": "MaquinaWeb",
+     "repository": {
+       "type": "git",
+       "url": "https://github.com/maquinaweb/maquinaweb-ui.git"
+     }
+   }
+   ```
+
+3. **Faça commits usando Conventional Commits:**
+   ```bash
+   git commit -m "feat: adiciona novo componente"  # → versão minor
+   git commit -m "fix: corrige bug no Button"       # → versão patch
+   git commit -m "feat!: breaking change"           # → versão major
+   ```
+
+4. **Push para main:**
+   ```bash
+   git push origin main
+   ```
+
+O GitHub Actions automaticamente vai:
+- ✅ Executar testes e build
+- ✅ Determinar a nova versão
+- ✅ Gerar/atualizar CHANGELOG.md
+- ✅ Criar release no GitHub
+- ✅ Publicar no npm
+
+**📖 Para mais detalhes, veja [SEMANTIC_RELEASE.md](./SEMANTIC_RELEASE.md)**
+
+### 🔧 Publicação Manual (Opcional)
+
+Se preferir publicar manualmente:
+
+```bash
+# Login no npm
+npm login
+
+# Execute o semantic-release localmente
+bunx semantic-release
+```
+
+## 📝 Adding New Components
+
+1. Create a new component directory:
+   ```bash
+   mkdir -p src/components/YourComponent
+   ```
+
+2. Create the component file:
+   ```tsx
+   // src/components/YourComponent/YourComponent.tsx
+   export interface YourComponentProps {
+     // Your props
+   }
+
+   export function YourComponent(props: YourComponentProps) {
+     // Your implementation
+     return <div>Hello</div>;
+   }
+   ```
+
+3. Create an index file:
+   ```tsx
+   // src/components/YourComponent/index.ts
+   export { YourComponent } from "./YourComponent";
+   export type { YourComponentProps } from "./YourComponent";
+   ```
+
+4. Create Cosmos fixtures:
+   ```tsx
+   // src/components/YourComponent/YourComponent.fixture.tsx
+   import { YourComponent } from "./YourComponent";
+
+   export default {
+     "Default": <YourComponent />,
+     "Variant": <YourComponent variant="custom" />,
+   };
+   ```
+
+5. Export from the library entry point:
+   ```tsx
+   // src/index.ts
+   export { YourComponent } from "./components/YourComponent";
+   export type { YourComponentProps } from "./components/YourComponent";
+   ```
+
+## 🔧 Configuration Files
+
+### `tsup.config.ts`
+
+Handles the build process:
+- Bundles TypeScript to ESM
+- Generates type declarations
+- Adds "use client" directive for Next.js compatibility
+- Excludes React/React-DOM from bundle
+
+### `cosmos.config.json`
+
+Configures React Cosmos:
+- Uses custom renderer URL to connect with Next.js
+- Watches `src` directory for changes
+- Static files served from `public` directory
+
+### `biome.json`
+
+Linting and formatting rules:
+- 2-space indentation
+- Double quotes
+- Semicolons required
+- 100 character line width
+
+### `tsconfig.json`
+
+TypeScript configuration:
+- ESNext target for modern JavaScript
+- Bundler module resolution
+- Strict type checking enabled
+- Next.js plugin support
+
+## 📚 Example Component Usage
+
+After installing your published package:
+
+```tsx
+import { Button } from "maquinaweb-ui";
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary" size="medium">
+        Click me
+      </Button>
+    </div>
+  );
+}
+```
+
+## 🤝 Contributing
+
+1. Create a new branch for your feature
+2. Develop your component with Cosmos fixtures
+3. Test in the Next.js preview environment
+4. Run linting and formatting
+5. Build to ensure no errors
+6. Submit a pull request
+
+## 📄 License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react0 from "react";
+import { ButtonHTMLAttributes, ReactNode } from "react";
+
+//#region src/components/hello-world/Button.d.ts
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The content of the button */
+  children: ReactNode;
+  /** The visual variant of the button */
+  variant?: "primary" | "secondary" | "outline";
+  /** The size of the button */
+  size?: "small" | "medium" | "large";
+}
+declare function Button({
+  children,
+  variant,
+  size,
+  className,
+  ...props
+}: ButtonProps): react0.JSX.Element;
+//#endregion
+export { Button, type ButtonProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/hello-world/Button.tsx"],"sourcesContent":[],"mappings":";;;;UAEiB,WAAA,SAAoB,qBAAqB;;YAE9C;EAFK;EAAY,OAAA,CAAA,EAAA,SAAA,GAAA,WAAA,GAAA,SAAA;;MAEjB,CAAA,EAAA,OAAA,GAAA,QAAA,GAAA,OAAA;;AAF6C,iBASzC,MAAA,CATyC;EAAA,QAAA;EAAA,OAAA;EAAA,IAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAetD,WAfsD,CAAA,EAe3C,MAAA,CAAA,GAAA,CAAA,OAf2C"}

package/dist/index.js

@@ -0,0 +1,19 @@
+//#region src/components/hello-world/Button.tsx
+function Button({ children, variant = "primary", size = "medium", className = "",...props }) {
+	const combinedClassName = `inline-flex items-center justify-center font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ${{
+		primary: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500",
+		secondary: "bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500",
+		outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-500"
+	}[variant]} ${{
+		small: "px-3 py-1.5 text-sm",
+		medium: "px-4 py-2 text-base",
+		large: "px-6 py-3 text-lg"
+	}[size]} ${className}`;
+	return <button type="button" className={combinedClassName} {...props}>
+      {children}
+    </button>;
+}
+
+//#endregion
+export { Button };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/hello-world/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** The content of the button */\n  children: ReactNode;\n  /** The visual variant of the button */\n  variant?: \"primary\" | \"secondary\" | \"outline\";\n  /** The size of the button */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport function Button({\n  children,\n  variant = \"primary\",\n  size = \"medium\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  const baseStyles =\n    \"inline-flex items-center justify-center font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none\";\n\n  const variantStyles = {\n    primary: \"bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500\",\n    secondary: \"bg-gray-600 text-white hover:bg-gray-700 focus-visible:ring-gray-500\",\n    outline: \"border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-500\",\n  };\n\n  const sizeStyles = {\n    small: \"px-3 py-1.5 text-sm\",\n    medium: \"px-4 py-2 text-base\",\n    large: \"px-6 py-3 text-lg\",\n  };\n\n  const combinedClassName = `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`;\n\n  return (\n    <button type=\"button\" className={combinedClassName} {...props}>\n      {children}\n    </button>\n  );\n}\n"],"mappings":";AAWA,SAAgB,OAAO,EACrB,UACA,UAAU,WACV,OAAO,UACP,YAAY,GACZ,GAAG,SACW;CAgBd,MAAM,oBAAoB,iNAZJ;EACpB,SAAS;EACT,WAAW;EACX,SAAS;EACV,CAQwD,SAAS,GAN/C;EACjB,OAAO;EACP,QAAQ;EACR,OAAO;EACR,CAE+E,MAAM,GAAG;AAEzF,QACE,CAAC,OAAO,cAAc,WAAW,uBAAuB,OAAO;OAC5D,SAAS;IACZ,EAAE"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "maquinaweb-ui",
+  "version": "1.0.0",
+  "description": "A minimal React component library",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "cosmos --expose-imports & next dev",
+    "build": "tsdown",
+    "build:vercel": "cosmos-export --expose-imports && next build && cp -R ./out/_next ./cosmos-export && cp -R ./out/cosmos ./cosmos-export",
+    "prepublishOnly": "bun run build",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write ."
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/npm": "^12.0.2",
+    "@types/bun": "latest",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "next": "^15.1.0",
+    "react": "^18.3.1",
+    "react-cosmos": "^6.2.0",
+    "react-cosmos-next": "^6.2.0",
+    "react-cosmos-plugin-open-fixture": "^7.0.0",
+    "react-dom": "^18.3.1",
+    "semantic-release": "^24.2.9",
+    "tsdown": "^0.15.6",
+    "typescript": "^5.7.2"
+  },
+  "keywords": [
+    "react",
+    "component-library",
+    "ui",
+    "typescript"
+  ],
+  "author": "MaquinaWeb",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maquinaweb/maquinaweb-ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67"
+}