@moontra/moonui-pro 0.1.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +44 -0
- package/README.md +256 -0
- package/dist/index.css +1 -0
- package/dist/index.js +171 -464
- package/dist/index.mjs +152 -446
- package/package.json +43 -10
- package/scripts/postinstall.js +228 -0
- package/dist/index.d.ts +0 -61
package/LICENSE
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
MoonUI Pro Commercial License Agreement
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 MoonUI
|
|
4
|
+
|
|
5
|
+
This is proprietary software. Unauthorized copying, modification, distribution, or use of this software, via any medium, is strictly prohibited.
|
|
6
|
+
|
|
7
|
+
This software is licensed, not sold. This license grants you the following rights:
|
|
8
|
+
|
|
9
|
+
1. GRANT OF LICENSE
|
|
10
|
+
- One license grants the right to use the software on unlimited projects/products
|
|
11
|
+
- License is valid for the individual or company that purchased it
|
|
12
|
+
- License includes all updates released during the subscription period
|
|
13
|
+
|
|
14
|
+
2. PERMITTED USE
|
|
15
|
+
- Use in commercial and personal projects
|
|
16
|
+
- Modify the components to fit your needs
|
|
17
|
+
- Use in projects for your clients
|
|
18
|
+
|
|
19
|
+
3. RESTRICTIONS
|
|
20
|
+
- Cannot redistribute the source code
|
|
21
|
+
- Cannot resell the components as your own
|
|
22
|
+
- Cannot share your license key publicly
|
|
23
|
+
- Cannot use in open source projects
|
|
24
|
+
|
|
25
|
+
4. SUBSCRIPTION TERMS
|
|
26
|
+
- Active subscription required for updates and new components
|
|
27
|
+
- Components downloaded during subscription period can be used perpetually
|
|
28
|
+
- Support requires active subscription
|
|
29
|
+
|
|
30
|
+
5. TERMINATION
|
|
31
|
+
- This license is effective until terminated
|
|
32
|
+
- License terminates automatically if you fail to comply with any term
|
|
33
|
+
- Upon termination, you must destroy all copies of the software
|
|
34
|
+
|
|
35
|
+
6. NO WARRANTY
|
|
36
|
+
- Software is provided "as is" without warranty of any kind
|
|
37
|
+
- We do not warrant that the software will be error-free
|
|
38
|
+
|
|
39
|
+
7. LIMITATION OF LIABILITY
|
|
40
|
+
- In no event shall MoonUI be liable for any damages arising from the use or inability to use this software
|
|
41
|
+
|
|
42
|
+
For full license terms, visit: https://moonui.dev/license
|
|
43
|
+
|
|
44
|
+
Questions? Contact us at: support@moonui.dev
|
package/README.md
ADDED
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
# MoonUI Pro - Premium React Components
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@moontra/moonui-pro)
|
|
4
|
+
[](https://moonui.dev/license)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
|
|
7
|
+
Premium React components for MoonUI. Advanced UI components with pro features for building sophisticated web applications.
|
|
8
|
+
|
|
9
|
+
## 🚀 Pro Components (Latest v2.0.0)
|
|
10
|
+
|
|
11
|
+
### Core Enterprise Components
|
|
12
|
+
- **📊 Advanced Data Table** - Enterprise-grade data grid with sorting, filtering, pagination, export, and virtual scrolling
|
|
13
|
+
- **📈 Advanced Charts** - Interactive charts with animations, real-time updates, and multiple chart types
|
|
14
|
+
- **📅 Calendar Pro** - Full-featured calendar with events, recurring dates, time zones, and event dialog management
|
|
15
|
+
- **📝 Rich Text Editor Pro** - Advanced WYSIWYG editor with slash commands, AI assistance, and collaboration features
|
|
16
|
+
- **📤 File Upload Pro** - Drag & drop with progress tracking, image editing, and cloud storage integration
|
|
17
|
+
- **🗂️ Kanban Board** - Drag & drop project management with swimlanes, custom fields, and team collaboration
|
|
18
|
+
- **📍 Timeline** - Interactive project timeline with milestones, dependencies, and custom content
|
|
19
|
+
|
|
20
|
+
### Performance & Data Components
|
|
21
|
+
- **🚀 Memory Efficient Data** - Optimized data handling for large datasets with lazy loading and pagination
|
|
22
|
+
- **📊 Virtual List Pro** - High-performance virtualization for millions of items with smooth scrolling
|
|
23
|
+
- **📋 Dashboard Components** - Pre-built dashboard widgets and layouts for analytics
|
|
24
|
+
|
|
25
|
+
### New in v2.0.0
|
|
26
|
+
- **Event Dialog System** - Advanced event management for Calendar Pro
|
|
27
|
+
- **Slash Commands** - Rich text editor with AI-powered command palette
|
|
28
|
+
- **Table Styling** - Enhanced table components with advanced styling options
|
|
29
|
+
- **Advanced Chart Types** - New chart variants including heatmaps, treemaps, and custom visualizations
|
|
30
|
+
|
|
31
|
+
## Installation
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install @moontra/moonui-pro
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
**Note**: This package requires an active MoonUI Pro license. Visit [moonui.dev/pro](https://moonui.dev/pro) to get your license.
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
### 1. Import Components
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import {
|
|
45
|
+
DataTableCore,
|
|
46
|
+
CalendarCore,
|
|
47
|
+
KanbanCore,
|
|
48
|
+
RichTextEditorCore,
|
|
49
|
+
AdvancedChartCore
|
|
50
|
+
} from '@moontra/moonui-pro'
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 2. Create Wrapper Components (Recommended)
|
|
54
|
+
|
|
55
|
+
For maximum customization, we recommend creating wrapper components:
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
// components/pro/data-table.tsx
|
|
59
|
+
import { DataTableCore } from '@moontra/moonui-pro'
|
|
60
|
+
import type { DataTableProps } from '@moontra/moonui-pro'
|
|
61
|
+
|
|
62
|
+
export function DataTable<TData, TValue = unknown>(
|
|
63
|
+
props: DataTableProps<TData, TValue>
|
|
64
|
+
) {
|
|
65
|
+
return (
|
|
66
|
+
<DataTableCore
|
|
67
|
+
{...props}
|
|
68
|
+
theme={{
|
|
69
|
+
headerBg: '#custom-color',
|
|
70
|
+
...props.theme
|
|
71
|
+
}}
|
|
72
|
+
features={{
|
|
73
|
+
virtualScrolling: true,
|
|
74
|
+
export: ['csv', 'excel'],
|
|
75
|
+
...props.features
|
|
76
|
+
}}
|
|
77
|
+
/>
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### 3. Advanced Usage Examples
|
|
83
|
+
|
|
84
|
+
#### Calendar with Event Management
|
|
85
|
+
```tsx
|
|
86
|
+
import { CalendarCore, EventDialog } from '@moontra/moonui-pro'
|
|
87
|
+
|
|
88
|
+
function EventCalendar() {
|
|
89
|
+
const [events, setEvents] = useState([])
|
|
90
|
+
const [selectedEvent, setSelectedEvent] = useState(null)
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<>
|
|
94
|
+
<CalendarCore
|
|
95
|
+
events={events}
|
|
96
|
+
onEventClick={setSelectedEvent}
|
|
97
|
+
onDateSelect={(date) => {
|
|
98
|
+
// Create new event
|
|
99
|
+
}}
|
|
100
|
+
features={{
|
|
101
|
+
recurringEvents: true,
|
|
102
|
+
timeZones: true,
|
|
103
|
+
dragDrop: true
|
|
104
|
+
}}
|
|
105
|
+
/>
|
|
106
|
+
|
|
107
|
+
<EventDialog
|
|
108
|
+
event={selectedEvent}
|
|
109
|
+
open={!!selectedEvent}
|
|
110
|
+
onClose={() => setSelectedEvent(null)}
|
|
111
|
+
onSave={(updatedEvent) => {
|
|
112
|
+
// Update event
|
|
113
|
+
}}
|
|
114
|
+
/>
|
|
115
|
+
</>
|
|
116
|
+
)
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
#### Rich Text Editor with Slash Commands
|
|
121
|
+
```tsx
|
|
122
|
+
import { RichTextEditorCore } from '@moontra/moonui-pro'
|
|
123
|
+
|
|
124
|
+
function DocumentEditor() {
|
|
125
|
+
return (
|
|
126
|
+
<RichTextEditorCore
|
|
127
|
+
features={{
|
|
128
|
+
slashCommands: true,
|
|
129
|
+
aiAssistance: true,
|
|
130
|
+
collaboration: true,
|
|
131
|
+
tables: true
|
|
132
|
+
}}
|
|
133
|
+
slashCommands={[
|
|
134
|
+
{ trigger: '/table', action: 'insertTable' },
|
|
135
|
+
{ trigger: '/ai', action: 'openAiAssistant' },
|
|
136
|
+
{ trigger: '/image', action: 'insertImage' }
|
|
137
|
+
]}
|
|
138
|
+
onSlashCommand={(command) => {
|
|
139
|
+
// Handle slash command
|
|
140
|
+
}}
|
|
141
|
+
/>
|
|
142
|
+
)
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
#### Virtual List for Large Datasets
|
|
147
|
+
```tsx
|
|
148
|
+
import { VirtualListCore, MemoryEfficientData } from '@moontra/moonui-pro'
|
|
149
|
+
|
|
150
|
+
function LargeDatasetView() {
|
|
151
|
+
const largeDataset = Array.from({ length: 1000000 }, (_, i) => ({
|
|
152
|
+
id: i,
|
|
153
|
+
name: `Item ${i}`,
|
|
154
|
+
value: Math.random() * 100
|
|
155
|
+
}))
|
|
156
|
+
|
|
157
|
+
return (
|
|
158
|
+
<MemoryEfficientData
|
|
159
|
+
data={largeDataset}
|
|
160
|
+
chunkSize={1000}
|
|
161
|
+
renderChunk={(chunk) => (
|
|
162
|
+
<VirtualListCore
|
|
163
|
+
items={chunk}
|
|
164
|
+
itemHeight={50}
|
|
165
|
+
height={600}
|
|
166
|
+
renderItem={({ item, index }) => (
|
|
167
|
+
<div key={item.id} className="p-2 border-b">
|
|
168
|
+
<span className="font-medium">{item.name}</span>
|
|
169
|
+
<span className="ml-2 text-gray-500">{item.value.toFixed(2)}</span>
|
|
170
|
+
</div>
|
|
171
|
+
)}
|
|
172
|
+
/>
|
|
173
|
+
)}
|
|
174
|
+
/>
|
|
175
|
+
)
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
## Customization
|
|
180
|
+
|
|
181
|
+
All Pro components support extensive customization:
|
|
182
|
+
|
|
183
|
+
### Theme Customization
|
|
184
|
+
```tsx
|
|
185
|
+
<DataTableCore
|
|
186
|
+
theme={{
|
|
187
|
+
headerBg: '#f9fafb',
|
|
188
|
+
borderColor: '#e5e7eb',
|
|
189
|
+
rowHoverBg: '#f3f4f6',
|
|
190
|
+
// ... more theme options
|
|
191
|
+
}}
|
|
192
|
+
/>
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Feature Toggles
|
|
196
|
+
```tsx
|
|
197
|
+
<DataTableCore
|
|
198
|
+
features={{
|
|
199
|
+
sorting: true,
|
|
200
|
+
filtering: true,
|
|
201
|
+
columnResize: true,
|
|
202
|
+
export: ['csv', 'excel', 'pdf'],
|
|
203
|
+
// ... more features
|
|
204
|
+
}}
|
|
205
|
+
/>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Custom Rendering
|
|
209
|
+
```tsx
|
|
210
|
+
<DataTableCore
|
|
211
|
+
customRender={{
|
|
212
|
+
cell: (value, row) => <CustomCell value={value} />,
|
|
213
|
+
header: (column) => <CustomHeader column={column} />,
|
|
214
|
+
// ... more custom renders
|
|
215
|
+
}}
|
|
216
|
+
/>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## TypeScript Support
|
|
220
|
+
|
|
221
|
+
All components are written in TypeScript with complete type definitions:
|
|
222
|
+
|
|
223
|
+
```tsx
|
|
224
|
+
import type {
|
|
225
|
+
DataTableProps,
|
|
226
|
+
CalendarEvent,
|
|
227
|
+
KanbanCard,
|
|
228
|
+
FileUploadFile
|
|
229
|
+
} from '@moontra/moonui-pro'
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
## License Validation
|
|
233
|
+
|
|
234
|
+
Pro components require a valid license. The package validates your license at build time:
|
|
235
|
+
|
|
236
|
+
1. **Environment Variable**: Set `MOONUI_LICENSE_KEY` in your environment
|
|
237
|
+
2. **Build-time Validation**: License is checked during build, not runtime
|
|
238
|
+
3. **No Runtime Checks**: Components work without internet after build
|
|
239
|
+
|
|
240
|
+
## Requirements
|
|
241
|
+
|
|
242
|
+
- React 18.0.0 or higher
|
|
243
|
+
- @moontra/moonui 1.0.0 or higher
|
|
244
|
+
- Valid MoonUI Pro license
|
|
245
|
+
|
|
246
|
+
## Support
|
|
247
|
+
|
|
248
|
+
- Documentation: [moonui.dev/docs/pro](https://moonui.dev/docs/pro)
|
|
249
|
+
- Priority Support: [support@moonui.dev](mailto:support@moonui.dev)
|
|
250
|
+
- Discord: Pro channel access with license
|
|
251
|
+
|
|
252
|
+
## License
|
|
253
|
+
|
|
254
|
+
Commercial License - see [moonui.dev/license](https://moonui.dev/license) for details.
|
|
255
|
+
|
|
256
|
+
© 2024 MoonUI. All rights reserved.
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.slash-commands-menu{border-radius:.5rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}@media (prefers-color-scheme: dark){.slash-commands-menu{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}}.slash-commands-menu{max-height:20rem;min-width:280px;overflow-y:auto;padding:.5rem}.slash-command-item{display:flex;cursor:pointer;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem .75rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.slash-command-item:hover{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.slash-command-item:hover{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.slash-command-item.selected{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}@media (prefers-color-scheme: dark){.slash-command-item.selected{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}}.slash-command-item svg{height:1rem;width:1rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.slash-command-item svg{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}}.slash-command-item>div{flex:1 1 0%}.slash-command-item .command-name{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.slash-command-item .command-name{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}}.slash-command-item .command-description{margin-top:.125rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}@media (prefers-color-scheme: dark){.slash-command-item .command-description{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}}.dark .slash-commands-menu{box-shadow:0 10px 15px -3px #0000004d,0 4px 6px -2px #0003}.ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%;border:1px solid #d1d5db}.ProseMirror table td,.ProseMirror table th{border:1px solid #d1d5db;box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}.ProseMirror table th{background-color:#f9fafb;font-weight:600;text-align:left}.ProseMirror table .selectedCell:after{background-color:#3b82f61a;content:"";inset:0;pointer-events:none;position:absolute;z-index:2}.ProseMirror table .column-resize-handle{background-color:#3b82f6;bottom:-2px;position:absolute;right:-2px;top:0;width:4px;pointer-events:none}.dark .ProseMirror table,.dark .ProseMirror table td,.dark .ProseMirror table th{border:1px solid #374151}.dark .ProseMirror table th{background-color:#111827}.dark .ProseMirror table .selectedCell:after{background-color:#3b82f633}
|