react-component-by-vite 2.0.0

package/README.md

@@ -0,0 +1,759 @@
+# First React Component Test
+
+Panduan lengkap membuat library React dari nol hingga publish ke npm.
+
+## 📋 Daftar Isi
+
+- [Pendahuluan](#pendahuluan)
+- [Prasyarat](#prasyarat)
+- [1. Setup Proyek Awal](#1-setup-proyek-awal)
+- [2. Membuat Struktur Folder](#2-membuat-struktur-folder)
+- [3. Konfigurasi Vite](#3-konfigurasi-vite)
+- [4. Membuat Komponen React](#4-membuat-komponen-react)
+- [5. Setup Storybook](#5-setup-storybook)
+- [6. Build Library](#6-build-library)
+- [7. Testing (Opsional)](#7-testing-opsional)
+- [8. Publish ke NPM](#8-publish-ke-npm)
+- [Troubleshooting](#troubleshooting)
+
+---
+
+## 📖 Pendahuluan
+
+Library ini adalah template untuk membuat **React Component Library** yang dapat dipublikasikan di npm. Library ini dirancang untuk:
+
+- ✅ Mendukung CommonJS (UMD) dan ES Modules
+- ✅ Menggunakan Storybook untuk dokumentasi komponen
+- ✅ Optimasi bundle dengan Vite
+- ✅ Support React 18+ dan React 19+
+- ✅ TypeScript & JavaScript support
+- ✅ Testing dengan Vitest
+
+---
+
+## 🔧 Prasyarat
+
+Sebelum memulai, pastikan Anda sudah menginstall:
+
+- **Node.js** (v18+): [Download di nodejs.org](https://nodejs.org/)
+- **npm** (v9+) atau **yarn** (v3+)
+- **Git**: Untuk version control
+- **npm account**: Untuk publish ke npm ([https://www.npmjs.com/](https://www.npmjs.com/))
+
+Verifikasi instalasi:
+```bash
+node --version
+npm --version
+git --version
+```
+
+---
+
+## 1. Setup Proyek Awal
+
+### 1.1 Buat Folder Proyek
+
+```bash
+mkdir first-react-component-test
+cd first-react-component-test
+```
+
+### 1.2 Inisialisasi Git
+
+```bash
+git init
+git config user.name "Nama Anda"
+git config user.email "email@example.com"
+```
+
+### 1.3 Inisialisasi npm
+
+```bash
+npm init -y
+```
+
+Ini akan membuat `package.json` dengan konfigurasi default.
+
+### 1.4 Update package.json
+
+Edit `package.json` dan sesuaikan dengan informasi library Anda:
+
+```json
+{
+  "name": "first-react-component-test",
+  "version": "1.0.0",
+  "description": "Komponen React kustom pertamaku",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "keywords": [
+    "react",
+    "component"
+  ],
+  "author": "Nama Anda",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/username/first-react-component-test"
+  },
+  "bugs": {
+    "url": "https://github.com/username/first-react-component-test/issues"
+  },
+  "homepage": "https://github.com/username/first-react-component-test#readme"
+}
+```
+
+**Penjelasan field penting:**
+- `name`: Nama package di npm (harus unik)
+- `main`: Entry point untuk CommonJS
+- `module`: Entry point untuk ES Modules
+- `exports`: Mendefinisikan multiple entry points
+- `files`: File yang akan dipublikasikan ke npm
+- `peerDependencies`: Dependency yang harus diinstall oleh user
+
+---
+
+## 2. Membuat Struktur Folder
+
+Buat struktur folder proyek:
+
+```bash
+mkdir -p src/stories
+touch src/index.js
+touch .gitignore
+touch .npmrc
+```
+
+Struktur folder akhir:
+
+```
+first-react-component-test/
+├── node_modules/
+├── src/
+│   ├── components/
+│   │   ├── ChatTrigger.tsx
+│   │   ├── ChatWindow.tsx
+│   │   └── MyComponent.jsx
+│   ├── stories/
+│   │   ├── ChatTrigger.stories.jsx
+│   │   ├── ChatWindow.stories.jsx
+│   │   └── MyComponent.stories.jsx
+│   └── index.js
+├── dist/ (generated saat build)
+├── .gitignore
+├── .npmrc
+├── vite.config.js
+├── package.json
+└── README.md
+```
+
+### 2.1 Buat .gitignore
+
+```bash
+cat > .gitignore << 'EOF'
+# Dependencies
+node_modules/
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+
+# Build output
+dist/
+build/
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+.DS_Store
+
+# Storybook
+storybook-static/
+
+# Environment variables
+.env
+.env.local
+EOF
+```
+
+### 2.2 Buat .npmrc
+
+File ini mengonfigurasi npm publishing:
+
+```bash
+cat > .npmrc << 'EOF'
+# Publish public packages
+access=public
+
+# Optional: set registry (gunakan jika menggunakan private registry)
+# registry=https://registry.npmjs.org/
+EOF
+```
+
+---
+
+## 3. Konfigurasi Vite
+
+### 3.1 Install Dependencies
+
+```bash
+npm install --save-dev vite @vitejs/plugin-react
+npm install --save-dev @storybook/react-vite storybook
+```
+
+### 3.2 Buat vite.config.js
+
+```javascript
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      // Entry point ke index.js di folder src
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'FirstReactComponentTest',
+      // Format output: ES module dan UMD
+      formats: ['es', 'umd'],
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      // Jangan masukkan react ke dalam bundle
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      output: {
+        // Konfigurasi global variables untuk UMD
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'jsxRuntime'
+        }
+      }
+    }
+  }
+});
+```
+
+---
+
+## 4. Membuat Komponen React
+
+### 4.1 Buat File Komponen
+
+Contoh `src/components/MyComponent.jsx`:
+
+```jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const MyComponent = ({ title, description, onClick }) => {
+  return (
+    <div style={{
+      padding: '20px',
+      border: '1px solid #ccc',
+      borderRadius: '8px',
+      backgroundColor: '#f9f9f9'
+    }}>
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <button onClick={onClick}>Click Me</button>
+    </div>
+  );
+};
+
+MyComponent.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  onClick: PropTypes.func
+};
+
+MyComponent.defaultProps = {
+  description: 'Deskripsi komponen',
+  onClick: () => console.log('Button clicked')
+};
+```
+
+### 4.2 Buat File TypeScript (Opsional)
+
+Contoh `src/components/ChatTrigger.tsx`:
+
+```typescript
+import React, { FC, ReactNode } from 'react';
+
+interface ChatTriggerProps {
+  children?: ReactNode;
+  onOpen?: () => void;
+  variant?: 'primary' | 'secondary';
+}
+
+export const ChatTrigger: FC<ChatTriggerProps> = ({
+  children = 'Open Chat',
+  onOpen,
+  variant = 'primary'
+}) => {
+  return (
+    <button
+      onClick={onOpen}
+      style={{
+        padding: '10px 20px',
+        backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d',
+        color: '#fff',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      }}
+    >
+      {children}
+    </button>
+  );
+};
+```
+
+### 4.3 Buat File Index (Entry Point)
+
+`src/index.js`:
+
+```javascript
+// Export semua komponen
+export { MyComponent } from './components/MyComponent.jsx';
+export { ChatTrigger } from './components/ChatTrigger.tsx';
+export { ChatWindow } from './components/ChatWindow.tsx';
+
+// Atau dengan named exports
+// export * from './components/MyComponent.jsx';
+// export * from './components/ChatTrigger.tsx';
+// export * from './components/ChatWindow.tsx';
+```
+
+---
+
+## 5. Setup Storybook
+
+Storybook membantu Anda mendokumentasikan dan menguji komponen secara visual.
+
+### 5.1 Install Storybook
+
+```bash
+npx storybook@latest init --type react
+```
+
+Atau manual:
+
+```bash
+npm install --save-dev storybook @storybook/react @storybook/react-vite
+```
+
+### 5.2 Buat .storybook/main.js
+
+```javascript
+export default {
+  stories: ['../src/**/*.stories.{js,jsx,ts,tsx}'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding'
+  ],
+  framework: '@storybook/react-vite',
+  core: {
+    builder: '@storybook/builder-vite'
+  }
+};
+```
+
+### 5.3 Buat File Story
+
+`src/components/MyComponent.stories.jsx`:
+
+```jsx
+import { MyComponent } from './MyComponent';
+
+export default {
+  title: 'Components/MyComponent',
+  component: MyComponent,
+  tags: ['autodocs'],
+};
+
+export const Primary = {
+  args: {
+    title: 'Hello Component',
+    description: 'Ini adalah contoh komponen'
+  }
+};
+
+export const Secondary = {
+  args: {
+    title: 'Secondary Variant',
+    description: 'Variant kedua dari komponen',
+    onClick: () => alert('Tombol diklik!')
+  }
+};
+```
+
+### 5.4 Jalankan Storybook
+
+```bash
+npm run storybook
+```
+
+Storybook akan berjalan di `http://localhost:6006`
+
+---
+
+## 6. Build Library
+
+### 6.1 Build untuk NPM
+
+```bash
+npm run build
+```
+
+Ini akan menghasilkan folder `dist/` dengan:
+- `dist/index.es.js` - ES Module format
+- `dist/index.umd.js` - UMD format (untuk browser dan Node.js)
+
+### 6.2 Verifikasi Build
+
+```bash
+ls -la dist/
+```
+
+Seharusnya Anda melihat dua file yang dihasilkan.
+
+### 6.3 Test Build Lokal (Opsional)
+
+Untuk test apakah package bisa diinstall:
+
+```bash
+# Di folder proyek lain
+npm install /path/to/first-react-component-test
+```
+
+---
+
+## 7. Testing (Opsional)
+
+### 7.1 Install Vitest
+
+```bash
+npm install --save-dev vitest @testing-library/react @testing-library/jest-dom
+```
+
+### 7.2 Setup vitest.config.js
+
+```javascript
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.js'
+  }
+});
+```
+
+### 7.3 Buat Test File
+
+`src/components/MyComponent.test.jsx`:
+
+```jsx
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MyComponent } from './MyComponent';
+
+describe('MyComponent', () => {
+  it('renders with title', () => {
+    render(<MyComponent title="Test Title" />);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+
+  it('displays description', () => {
+    render(<MyComponent title="Test" description="Test Description" />);
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+  });
+});
+```
+
+### 7.4 Update package.json
+
+```json
+{
+  "scripts": {
+    "test": "vitest",
+    "test:ui": "vitest --ui"
+  }
+}
+```
+
+### 7.5 Jalankan Test
+
+```bash
+npm run test
+npm run test:ui
+```
+
+---
+
+## 8. Publish ke NPM
+
+### 8.1 Persiapan Pre-Publish
+
+```bash
+# 1. Pastikan build sudah terbuat
+npm run build
+
+# 2. Verifikasi package.json
+cat package.json | grep -E '"name"|"version"|"main"|"module"'
+
+# 3. Commit semua perubahan
+git add .
+git commit -m "Initial commit"
+
+# 4. Create tag version
+git tag v1.0.0
+```
+
+### 8.2 Login ke NPM
+
+```bash
+npm login
+```
+
+Masukkan:
+- Username npm Anda
+- Password
+- Email
+- OTP (One-Time Password) jika enabled
+
+**Verifikasi login:**
+```bash
+npm whoami
+```
+
+### 8.3 Test Publish (Opsional)
+
+Sebelum publish ke npm public, Anda bisa test dengan npm dry-run:
+
+```bash
+npm publish --dry-run
+```
+
+Ini akan menampilkan file apa saja yang akan dipublikasikan tanpa benar-benar publish.
+
+### 8.4 Publish ke NPM
+
+```bash
+npm publish
+```
+
+**Output yang diharapkan:**
+```
+npm notice
+npm notice 📦  first-react-component-test@1.0.0
+npm notice === Tarball Contents ===
+npm notice 258B dist/index.es.js
+npm notice 312B dist/index.umd.js
+npm notice 456B package.json
+npm notice === Tarball Details ===
+npm notice name:          first-react-component-test
+npm notice version:       1.0.0
+npm notice ...
+```
+
+### 8.5 Verifikasi Publish
+
+```bash
+# Cek di npm registry
+npm view first-react-component-test
+
+# Atau kunjungi: https://www.npmjs.com/package/first-react-component-test
+```
+
+---
+
+## 9. Update dan Re-publish
+
+### 9.1 Semantic Versioning
+
+Gunakan format `MAJOR.MINOR.PATCH`:
+
+```
+1.2.3
+│ │ └─ PATCH (bug fixes)
+│ └─── MINOR (new features, backward compatible)
+└───── MAJOR (breaking changes)
+```
+
+### 9.2 Update Version
+
+```bash
+# Patch version (1.0.0 → 1.0.1)
+npm version patch
+
+# Minor version (1.0.0 → 1.1.0)
+npm version minor
+
+# Major version (1.0.0 → 2.0.0)
+npm version major
+```
+
+Ini akan:
+- Update `package.json`
+- Create git tag otomatis
+- Commit changes
+
+### 9.3 Re-publish
+
+```bash
+npm publish
+```
+
+---
+
+## 🚀 Cara Menggunakan Library
+
+Setelah publish, user bisa install library Anda:
+
+```bash
+npm install first-react-component-test
+```
+
+### Import dan Gunakan
+
+**Di React App:**
+
+```jsx
+import React from 'react';
+import { MyComponent, ChatTrigger } from 'first-react-component-test';
+
+function App() {
+  return (
+    <div>
+      <MyComponent title="Hello" description="Welcome" />
+      <ChatTrigger onOpen={() => console.log('opened')} />
+    </div>
+  );
+}
+
+export default App;
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### Masalah: "Cannot find module 'react'"
+
+**Penyebab:** React tidak diinstall di project yang menggunakan library.
+
+**Solusi:**
+```bash
+npm install react react-dom
+```
+
+### Masalah: "Module is not defined"
+
+**Penyebab:** Konfigurasi Vite tidak benar.
+
+**Solusi:** Pastikan `vite.config.js` memiliki:
+```javascript
+plugins: [react()],
+```
+
+### Masalah: Build tidak menghasilkan file di dist
+
+**Penyebab:** Entry point tidak benar atau index.js kosong.
+
+**Solusi:** Verifikasi `src/index.js` export komponen dengan benar:
+```javascript
+export { MyComponent } from './components/MyComponent.jsx';
+```
+
+### Masalah: Publish gagal "Package name already exists"
+
+**Penyebab:** Nama package sudah terdaftar di npm.
+
+**Solusi:** Gunakan nama unik dengan scope:
+```json
+{
+  "name": "@username/first-react-component-test"
+}
+```
+
+### Masalah: Storybook tidak bisa jalankan komponen
+
+**Penyebab:** Dependencies TypeScript tidak terinstall.
+
+**Solusi:**
+```bash
+npm install --save-dev typescript
+npm install --save-dev @types/react @types/react-dom
+```
+
+---
+
+## 📚 Resources Tambahan
+
+- [Vite Documentation](https://vitejs.dev/)
+- [Storybook Documentation](https://storybook.js.org/)
+- [NPM Publishing Guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry)
+- [React Documentation](https://react.dev/)
+- [Semantic Versioning](https://semver.org/)
+
+---
+
+## 📝 Checklist Pre-Publish
+
+Sebelum publish, pastikan:
+
+- [ ] `package.json` sudah dikonfigurasi dengan benar
+- [ ] `name` unik dan belum terdaftar di npm
+- [ ] `version` sudah diupdate sesuai semantic versioning
+- [ ] `main` dan `module` menunjuk ke file yang benar
+- [ ] `files` include folder `dist`
+- [ ] Build berhasil tanpa error: `npm run build`
+- [ ] Semua file dikompilasi di folder `dist`
+- [ ] Git sudah diinit dan commit pertama sudah dibuat
+- [ ] `.npmrc` sudah dibuat
+- [ ] Sudah login ke npm: `npm whoami`
+- [ ] Storybook running dengan baik
+- [ ] README.md lengkap dengan dokumentasi
+
+---
+
+## 📄 License
+
+MIT License - Gratis untuk digunakan secara komersial dan pribadi.
+
+---
+
+**Happy Publishing! 🎉**

package/dist/index.es.js

@@ -0,0 +1,168 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/MyComponent.jsx
+var a = ({ text: e = "Halo dari NPM!", color: t = "blue" }) => /* @__PURE__ */ r("button", {
+	style: {
+		padding: "10px 20px",
+		backgroundColor: t,
+		color: "#fff",
+		border: "none",
+		borderRadius: "5px",
+		cursor: "pointer"
+	},
+	children: e
+}), o = ({ open: a }) => {
+	let [o, s] = n(!1), [c, l] = n([{
+		id: 0,
+		role: "bot",
+		text: "Halo! Saya bisa dibuka pakai tombol maupun langsung lewat props!"
+	}]), [u, d] = n(""), [f, p] = n(!1), m = t(null), h = a !== void 0, g = h ? a === "true" || a === !0 : o;
+	e(() => {
+		if (!h) {
+			let e = () => s((e) => !e);
+			return window.addEventListener("TOGGLE_CHAT_BOT", e), () => window.removeEventListener("TOGGLE_CHAT_BOT", e);
+		}
+	}, [h]);
+	let _ = async () => {
+		let e = u.trim();
+		if (!(!e || f)) {
+			p(!0), l((t) => [...t, {
+				id: Date.now(),
+				role: "user",
+				text: e
+			}]), d("");
+			try {
+				let t = `Pesan diterima (id: ${(await (await fetch("https://jsonplaceholder.typicode.com/posts", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({
+						title: "chat-message",
+						body: e,
+						userId: 1
+					})
+				})).json())?.id ?? "-"}). Isi: ${e}`;
+				l((e) => [...e, {
+					id: Date.now() + 1,
+					role: "bot",
+					text: t
+				}]);
+			} catch (e) {
+				console.error("Gagal mengirim ke API:", e), l((e) => [...e, {
+					id: Date.now() + 2,
+					role: "bot",
+					text: "Maaf, gagal mengirim pesan. Coba lagi."
+				}]);
+			} finally {
+				p(!1);
+			}
+		}
+	};
+	return e(() => {
+		m.current?.scrollTo({
+			top: m.current.scrollHeight,
+			behavior: "smooth"
+		});
+	}, [c.length]), g ? /* @__PURE__ */ i("div", {
+		style: {
+			position: "fixed",
+			bottom: "100px",
+			right: "30px",
+			width: "350px",
+			height: "450px",
+			background: "white",
+			borderRadius: "10px",
+			boxShadow: "0 5px 20px rgba(0,0,0,0.2)",
+			display: "flex",
+			flexDirection: "column",
+			zIndex: 9999,
+			fontFamily: "sans-serif"
+		},
+		children: [
+			/* @__PURE__ */ r("div", {
+				style: {
+					background: "#007bff",
+					color: "white",
+					padding: "15px",
+					borderRadius: "10px 10px 0 0"
+				},
+				children: /* @__PURE__ */ r("strong", { children: "AI Chat Bot" })
+			}),
+			/* @__PURE__ */ r("div", {
+				ref: m,
+				style: {
+					flex: 1,
+					padding: "15px",
+					overflowY: "auto",
+					display: "flex",
+					flexDirection: "column",
+					gap: "8px"
+				},
+				children: c.map((e) => /* @__PURE__ */ r("div", {
+					style: {
+						maxWidth: "80%",
+						alignSelf: e.role === "user" ? "flex-end" : "flex-start",
+						background: e.role === "user" ? "#e6f0ff" : "#f1f1f1",
+						padding: "8px 10px",
+						borderRadius: "8px",
+						wordBreak: "break-word"
+					},
+					children: e.text
+				}, e.id))
+			}),
+			/* @__PURE__ */ i("div", {
+				style: {
+					padding: "10px",
+					borderTop: "1px solid #eee",
+					display: "flex",
+					gap: "8px"
+				},
+				children: [/* @__PURE__ */ r("input", {
+					type: "text",
+					value: u,
+					onChange: (e) => d(e.target.value),
+					onKeyDown: (e) => {
+						e.key === "Enter" && !e.shiftKey && (e.preventDefault(), _());
+					},
+					placeholder: "Ketik pesan...",
+					style: {
+						flex: 1,
+						padding: "10px",
+						border: "1px solid #ccc",
+						borderRadius: "6px",
+						outline: "none"
+					},
+					disabled: f
+				}), /* @__PURE__ */ r("button", {
+					onClick: _,
+					disabled: f || !u.trim(),
+					style: {
+						background: "#007bff",
+						color: "white",
+						border: "none",
+						padding: "10px 14px",
+						borderRadius: "6px",
+						cursor: f || !u.trim() ? "not-allowed" : "pointer"
+					},
+					children: f ? "Mengirim..." : "Kirim"
+				})]
+			})
+		]
+	}) : null;
+}, s = ({ text: e = "💬 Chat" }) => /* @__PURE__ */ r("button", {
+	onClick: () => {
+		let e = new CustomEvent("TOGGLE_CHAT_BOT");
+		window.dispatchEvent(e);
+	},
+	style: {
+		padding: "12px 24px",
+		background: "#007bff",
+		color: "white",
+		border: "none",
+		borderRadius: "50px",
+		cursor: "pointer",
+		boxShadow: "0 4px 10px rgba(0,0,0,0.15)"
+	},
+	children: e
+});
+//#endregion
+export { s as ChatTrigger, o as ChatWindow, a as MyComponent };

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FirstReactComponentTest={},e.React,e.jsxRuntime))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:r(s(e)),l(t||!e||!e.__esModule?i(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1),e.ChatTrigger=({text:e=`💬 Chat`})=>(0,n.jsx)(`button`,{onClick:()=>{let e=new CustomEvent(`TOGGLE_CHAT_BOT`);window.dispatchEvent(e)},style:{padding:`12px 24px`,background:`#007bff`,color:`white`,border:`none`,borderRadius:`50px`,cursor:`pointer`,boxShadow:`0 4px 10px rgba(0,0,0,0.15)`},children:e}),e.ChatWindow=({open:e})=>{let[r,i]=(0,t.useState)(!1),[a,o]=(0,t.useState)([{id:0,role:`bot`,text:`Halo! Saya bisa dibuka pakai tombol maupun langsung lewat props!`}]),[s,c]=(0,t.useState)(``),[l,u]=(0,t.useState)(!1),d=(0,t.useRef)(null),f=e!==void 0,p=f?e===`true`||e===!0:r;(0,t.useEffect)(()=>{if(!f){let e=()=>i(e=>!e);return window.addEventListener(`TOGGLE_CHAT_BOT`,e),()=>window.removeEventListener(`TOGGLE_CHAT_BOT`,e)}},[f]);let m=async()=>{let e=s.trim();if(!(!e||l)){u(!0),o(t=>[...t,{id:Date.now(),role:`user`,text:e}]),c(``);try{let t=`Pesan diterima (id: ${(await(await fetch(`https://jsonplaceholder.typicode.com/posts`,{method:`POST`,headers:{"Content-Type":`application/json`},body:JSON.stringify({title:`chat-message`,body:e,userId:1})})).json())?.id??`-`}). Isi: ${e}`;o(e=>[...e,{id:Date.now()+1,role:`bot`,text:t}])}catch(e){console.error(`Gagal mengirim ke API:`,e),o(e=>[...e,{id:Date.now()+2,role:`bot`,text:`Maaf, gagal mengirim pesan. Coba lagi.`}])}finally{u(!1)}}};return(0,t.useEffect)(()=>{d.current?.scrollTo({top:d.current.scrollHeight,behavior:`smooth`})},[a.length]),p?(0,n.jsxs)(`div`,{style:{position:`fixed`,bottom:`100px`,right:`30px`,width:`350px`,height:`450px`,background:`white`,borderRadius:`10px`,boxShadow:`0 5px 20px rgba(0,0,0,0.2)`,display:`flex`,flexDirection:`column`,zIndex:9999,fontFamily:`sans-serif`},children:[(0,n.jsx)(`div`,{style:{background:`#007bff`,color:`white`,padding:`15px`,borderRadius:`10px 10px 0 0`},children:(0,n.jsx)(`strong`,{children:`AI Chat Bot`})}),(0,n.jsx)(`div`,{ref:d,style:{flex:1,padding:`15px`,overflowY:`auto`,display:`flex`,flexDirection:`column`,gap:`8px`},children:a.map(e=>(0,n.jsx)(`div`,{style:{maxWidth:`80%`,alignSelf:e.role===`user`?`flex-end`:`flex-start`,background:e.role===`user`?`#e6f0ff`:`#f1f1f1`,padding:`8px 10px`,borderRadius:`8px`,wordBreak:`break-word`},children:e.text},e.id))}),(0,n.jsxs)(`div`,{style:{padding:`10px`,borderTop:`1px solid #eee`,display:`flex`,gap:`8px`},children:[(0,n.jsx)(`input`,{type:`text`,value:s,onChange:e=>c(e.target.value),onKeyDown:e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),m())},placeholder:`Ketik pesan...`,style:{flex:1,padding:`10px`,border:`1px solid #ccc`,borderRadius:`6px`,outline:`none`},disabled:l}),(0,n.jsx)(`button`,{onClick:m,disabled:l||!s.trim(),style:{background:`#007bff`,color:`white`,border:`none`,padding:`10px 14px`,borderRadius:`6px`,cursor:l||!s.trim()?`not-allowed`:`pointer`},children:l?`Mengirim...`:`Kirim`})]})]}):null},e.MyComponent=({text:e=`Halo dari NPM!`,color:t=`blue`})=>(0,n.jsx)(`button`,{style:{padding:`10px 20px`,backgroundColor:t,color:`#fff`,border:`none`,borderRadius:`5px`,cursor:`pointer`},children:e})});

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "react-component-by-vite",
+  "version": "2.0.0",
+  "description": "Komponen React kustom pertamaku",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "keywords": [
+    "react",
+    "component"
+  ],
+  "author": "Nama Anda",
+  "license": "MIT",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
+    "playwright": "^1.60.0",
+    "prop-types": "^15.8.1",
+    "storybook": "^10.4.1",
+    "vitest": "^4.1.8"
+  }
+}