{"_id":"@chumadev/discord-components-pro","name":"@chumadev/discord-components-pro","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@chumadev/discord-components-pro","version":"0.1.0","description":"Professional Discord Components v2 SDK - Build beautiful Discord messages with React","type":"module","main":"./dist/index.umd.js","module":"./dist/index.es.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.umd.js"},"./styles":"./dist/style.css"},"scripts":{"dev":"vite","build":"tsc && vite build","preview":"vite preview","lint":"biome check .","lint:fix":"biome check --write .","format":"biome format --write .","test":"vitest","test:ui":"vitest --ui","test:coverage":"vitest --coverage","typecheck":"tsc --noEmit","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepare":"npm run build","prepublishOnly":"npm run lint && npm test -- --run && npm run build","version":"npm run format && git add -A","postversion":"git push && git push --tags"},"keywords":["discord","components","react","discord-components","discord-v2","ui","builder"],"author":{"name":"ChumaDev"},"license":"MIT","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@dnd-kit/core":"^6.3.1","@dnd-kit/sortable":"^10.0.0","@dnd-kit/utilities":"^3.2.2","@emoji-mart/data":"^1.2.1","@emoji-mart/react":"^1.1.1","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-select":"^2.1.4","@radix-ui/react-slider":"^1.2.2","@radix-ui/react-tooltip":"^1.1.6","clsx":"^2.1.1","emoji-mart":"^5.6.0","react-dropzone":"^15.0.0","react-textarea-autosize":"^8.5.4","zod":"^4.3.6","zustand":"^5.0.2"},"devDependencies":{"@biomejs/biome":"^2.4.4","@storybook/addon-essentials":"^8.6.17","@storybook/addon-interactions":"^8.6.17","@storybook/addon-links":"^8.6.17","@storybook/blocks":"^8.6.17","@storybook/react":"^8.6.17","@storybook/react-vite":"^8.6.17","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.1.0","@types/node":"^25.3.0","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react-swc":"^4.2.3","@vitest/ui":"^4.0.18","jsdom":"^28.1.0","react":"^19.2.4","react-dom":"^19.2.4","storybook":"^8.6.17","typescript":"^5.7.2","vite":"^7.3.1","vite-plugin-dts":"^4.5.4","vitest":"^4.0.18"},"repository":{"type":"git","url":"git+https://github.com/ChumaDev/discord-components-pro.git"},"bugs":{"url":"https://github.com/ChumaDev/discord-components-pro/issues"},"homepage":"https://github.com/ChumaDev/discord-components-pro#readme","_id":"@chumadev/discord-components-pro@0.1.0","gitHead":"0d2ba1a25e3718121722c5a78fb51d7e2fb51ad6","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-RWakFb8inRbL2WKMadbGQZhRyN2AiPY7i19kuIIRSSOepR++7cmWxxE6jLNWqpeSLVqK5NxAdX77+OTDsamcZw==","shasum":"e3b9677f046f0e3d3b01b030f10527c5d2868cb8","tarball":"https://registry.npmjs.org/@chumadev/discord-components-pro/-/discord-components-pro-0.1.0.tgz","fileCount":9,"unpackedSize":5594118,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDs/yx801v8aXEF36nUenT+jlNWdkmcOw5VLhFlLLi+ZgIgWGaMMC0N3eubtMQD3a+MftNwFoWlpdTWTHzgxaD+Um0="}]},"_npmUser":{"name":"chumadev","email":"max.s4d8l@gmail.com"},"directories":{},"maintainers":[{"name":"chumadev","email":"max.s4d8l@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/discord-components-pro_0.1.0_1771805781423_0.5236849854330208"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-23T00:16:21.270Z","0.1.0":"2026-02-23T00:16:21.698Z","modified":"2026-02-23T00:16:22.400Z"},"maintainers":[{"name":"chumadev","email":"max.s4d8l@gmail.com"}],"description":"Professional Discord Components v2 SDK - Build beautiful Discord messages with React","homepage":"https://github.com/ChumaDev/discord-components-pro#readme","keywords":["discord","components","react","discord-components","discord-v2","ui","builder"],"repository":{"type":"git","url":"git+https://github.com/ChumaDev/discord-components-pro.git"},"author":{"name":"ChumaDev"},"bugs":{"url":"https://github.com/ChumaDev/discord-components-pro/issues"},"license":"MIT","readme":"# Discord Components Pro\r\n\r\n> Professional React SDK for building Discord Components v2 with visual editor, drag & drop, and TypeScript support.\r\n\r\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue)](https://www.typescriptlang.org/)\r\n[![React](https://img.shields.io/badge/React-18-blue)](https://react.dev/)\r\n[![License](https://img.shields.io/badge/License-MIT-green)](LICENSE)\r\n[![Tests](https://img.shields.io/badge/Tests-305%20passing-brightgreen)](https://github.com/ChumaDev/discord-components-pro)\r\n[![Coverage](https://img.shields.io/badge/Coverage-85%25-brightgreen)](https://github.com/ChumaDev/discord-components-pro)\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n### 🎨 Visual Editor\r\n- **MessageBuilder** - Complete visual editor with drag & drop\r\n- **Live Preview** - Real-time Discord-style preview\r\n- **Undo/Redo** - Full history management\r\n- **Themes** - Dark/Light mode support\r\n\r\n### 📦 Components (16)\r\n- **Core**: Button, TextDisplay, StringSelect, Container, ActionRow, Separator\r\n- **Advanced**: Dialog, EmojiPicker, ColorPicker, FileUpload, MediaGallery, MarkdownPreview\r\n- **Utility**: Thumbnail, SortableItem, Icon, MessageBuilder\r\n\r\n### 🔧 Features (13 Modules)\r\n- 📤 **Export** - JSON, Discord.js, TypeScript, Python\r\n- 📥 **Import** - From JSON with validation\r\n- 🎨 **Drag & Drop** - Reorder components visually\r\n- ⏮️ **History** - Undo/redo system\r\n- ⌨️ **Keyboard** - Customizable shortcuts\r\n- 🔍 **Search** - Find components quickly\r\n- ✅ **Validation** - Discord API limits\r\n- 📋 **Clipboard** - Copy/paste components\r\n- 🎯 **Analytics** - Usage tracking\r\n- 📦 **Batch** - Mass operations\r\n- 📝 **Markdown** - Discord markdown support\r\n- 🎨 **Theme** - Custom themes\r\n- ⚡ **Performance** - Optimized hooks\r\n\r\n### 🚀 Developer Experience\r\n- ✅ **305 Tests** - 100% passing, 85% coverage\r\n- 📚 **Full TypeScript** - Complete type safety\r\n- 🎯 **Tree-shakeable** - Import only what you need\r\n- ♿ **Accessible** - WCAG compliant\r\n- 🏗️ **Modular** - Clean architecture\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @discord-components/sdk\r\n# or\r\nyarn add @discord-components/sdk\r\n# or\r\npnpm add @discord-components/sdk\r\n```\r\n\r\n---\r\n\r\n## 🚀 Quick Start\r\n\r\n```tsx\r\nimport { MessageBuilder } from '@discord-components/sdk';\r\nimport '@discord-components/sdk/sdk.css';\r\n\r\nfunction App() {\r\n  return (\r\n    <MessageBuilder \r\n      theme=\"dark\" \r\n      editable \r\n    />\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## � Usage Examples\r\n\r\n### Basic Component\r\n\r\n```tsx\r\nimport { Button, ButtonStyle } from '@discord-components/sdk';\r\n\r\nfunction MyComponent() {\r\n  return (\r\n    <Button \r\n      style={ButtonStyle.Primary}\r\n      label=\"Click Me\"\r\n      customId=\"my-button\"\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Visual Editor\r\n\r\n```tsx\r\nimport { MessageBuilder, useComponentStore } from '@discord-components/sdk';\r\n\r\nfunction Editor() {\r\n  const { components } = useComponentStore();\r\n  \r\n  return (\r\n    <div>\r\n      <MessageBuilder theme=\"dark\" editable />\r\n      <pre>{JSON.stringify(components, null, 2)}</pre>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Export to Discord.js\r\n\r\n```tsx\r\nimport { useExport } from '@discord-components/sdk';\r\n\r\nfunction ExportButton() {\r\n  const { exportToFormat } = useExport();\r\n  \r\n  const handleExport = () => {\r\n    const result = exportToFormat(components, { format: 'discord.js' });\r\n    console.log(result.content);\r\n  };\r\n  \r\n  return <button onClick={handleExport}>Export</button>;\r\n}\r\n```\r\n\r\n### Keyboard Shortcuts\r\n\r\n```tsx\r\nimport { useKeyboardShortcuts } from '@discord-components/sdk';\r\n\r\nfunction MyComponent() {\r\n  useKeyboardShortcuts([\r\n    { key: 's', ctrl: true, action: () => save() },\r\n    { key: 'z', ctrl: true, action: () => undo() },\r\n  ]);\r\n  \r\n  return <div>Press Ctrl+S to save</div>;\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🎨 Export Formats\r\n\r\n### JSON\r\n```json\r\n{\r\n  \"type\": 2,\r\n  \"style\": 1,\r\n  \"label\": \"Click me\",\r\n  \"custom_id\": \"button_1\"\r\n}\r\n```\r\n\r\n### Discord.js\r\n```javascript\r\nnew ButtonBuilder()\r\n  .setStyle(ButtonStyle.Primary)\r\n  .setLabel('Click me')\r\n  .setCustomId('button_1')\r\n```\r\n\r\n### TypeScript\r\n```typescript\r\nconst button: ButtonComponent = {\r\n  type: 2,\r\n  style: 1,\r\n  label: 'Click me',\r\n  custom_id: 'button_1'\r\n};\r\n```\r\n\r\n### Python\r\n```python\r\nbutton = {\r\n    \"type\": 2,\r\n    \"style\": 1,\r\n    \"label\": \"Click me\",\r\n    \"custom_id\": \"button_1\"\r\n}\r\n```\r\n\r\n---\r\n\r\n## 📊 Bundle Size\r\n\r\n| Format | Size | Gzipped |\r\n|--------|------|---------|\r\n| ES Module | 998 KB | 240 KB |\r\n| UMD | 830 KB | 217 KB |\r\n| CSS | 27 KB | 4.5 KB |\r\n\r\n**Tree-shakeable** - Import only what you need!\r\n\r\n---\r\n\r\n## 🏗️ Architecture\r\n\r\n```\r\nsrc/\r\n├── components/       # 16 React components\r\n├── features/         # 13 feature modules\r\n│   ├── export/       # Export to multiple formats\r\n│   ├── import/       # Import with validation\r\n│   ├── dnd/          # Drag & drop system\r\n│   ├── history/      # Undo/redo\r\n│   ├── keyboard/     # Keyboard shortcuts\r\n│   ├── validation/   # Discord API validation\r\n│   └── ...           # 7 more modules\r\n├── hooks/            # React hooks\r\n├── store/            # Zustand state management\r\n├── types/            # TypeScript definitions\r\n└── utils/            # Utility functions\r\n```\r\n\r\n---\r\n\r\n## 🛠️ Development\r\n\r\n```bash\r\n# Install\r\nnpm install\r\n\r\n# Dev server (playground)\r\nnpm run dev\r\n\r\n# Build\r\nnpm run build\r\n\r\n# Tests\r\nnpm test\r\n\r\n# Type check\r\nnpm run typecheck\r\n\r\n# Lint\r\nnpm run lint\r\n```\r\n\r\n---\r\n\r\n## 🧪 Testing\r\n\r\n- **305 tests** - 100% passing\r\n- **85% coverage** - All critical paths covered\r\n- **Vitest** - Fast unit testing\r\n- **React Testing Library** - Component testing\r\n\r\n```bash\r\nnpm test              # Run all tests\r\nnpm test -- --watch   # Watch mode\r\nnpm run test:coverage # Coverage report\r\n```\r\n\r\n---\r\n\r\n## 🌐 Browser Support\r\n\r\n- Chrome/Edge 90+\r\n- Firefox 88+\r\n- Safari 14+\r\n- Modern browsers with ES2020\r\n\r\n---\r\n\r\n## 📝 License\r\n\r\nMIT © 2026 ChumaDev\r\n\r\n---\r\n\r\n## 🔗 Links\r\n\r\n- [GitHub](https://github.com/ChumaDev/discord-components-pro)\r\n- [Issues](https://github.com/ChumaDev/discord-components-pro/issues)\r\n- [Changelog](CHANGELOG.md)\r\n- [License](LICENSE)\r\n\r\n---\r\n\r\n## 🙏 Credits\r\n\r\nBuilt with:\r\n- [React](https://react.dev/) - UI library\r\n- [@dnd-kit](https://dndkit.com/) - Drag and drop\r\n- [Zustand](https://zustand-demo.pmnd.rs/) - State management\r\n- [Vitest](https://vitest.dev/) - Testing framework\r\n- [TypeScript](https://www.typescriptlang.org/) - Type safety\r\n\r\n---\r\n\r\n## ⚠️ Disclaimer\r\n\r\nThis is an independent community project, NOT affiliated with Discord Inc. or Discord.js.\r\n\r\n---\r\n\r\n**Made with ❤️ by ChumaDev**\r\n","readmeFilename":"README.md","_rev":"1-96e6f591969e566a5d4a799a58c15642"}