@sudobility/components 5.0.18 → 5.0.20

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.
Files changed (4) hide show
  1. package/README.md +38 -186
  2. package/package.json +9 -13
  3. package/dist/index.umd.js +0 -73
  4. /package/dist/{index.esm.js → index.js} +0 -0
package/README.md CHANGED
@@ -1,218 +1,70 @@
1
1
  # @sudobility/components
2
2
 
3
- A comprehensive React component library and design system for building modern web applications.
4
-
5
- ## 🚀 Version 3.0.0 - Reorganized Architecture
6
-
7
- **Major Update**: Components are now organized into logical categories with specialized domain packages available separately.
8
-
9
- ## Features
10
-
11
- - 🎨 **Complete Design System** - Professional design tokens, colors, typography
12
- - 🧩 **220+ UI Components** - Organized into 8 categories (primitives, forms, navigation, charts, media, modals, data-display, interactive)
13
- - ♿ **Accessibility First** - Built with Radix UI primitives
14
- - 🌙 **Dark Mode Support** - Full dark/light theme support
15
- - 📱 **Responsive Design** - Mobile-first approach
16
- - 🎯 **TypeScript** - Fully typed with excellent IntelliSense
17
- - 🎭 **Tailwind CSS** - Utility-first styling with customization
18
- - ⚡ **Performance Optimized** - Tree-shakeable and lightweight
19
- - 📦 **Modular Packages** - Domain-specific components in separate packages
3
+ Comprehensive React component library providing 110+ reusable UI components built on Radix UI primitives, styled with Tailwind CSS and the `@sudobility/design` token system. Ships as ES module and UMD bundles with TypeScript declarations. Domain-specific components are organized into 48 sub-packages under `packages/`.
20
4
 
21
5
  ## Installation
22
6
 
23
- ### Core Library
24
-
25
- ```bash
26
- npm install @sudobility/components @sudobility/design
27
- ```
28
-
29
- ### Specialized Packages (Optional)
30
-
31
- ```bash
32
- # Web3 & Blockchain Components
33
- npm install @sudobility/web3-components
34
-
35
- # Email Marketing Components
36
- npm install @sudobility/email-components
37
-
38
- # Fitness & Health Tracking
39
- npm install @sudobility/fitness-components
40
-
41
- # Real Estate & Property Management
42
- npm install @sudobility/realestate-components
43
- ```
44
-
45
- ### Required Peer Dependencies
46
-
47
7
  ```bash
48
- npm install react@^18.0.0 react-dom@^18.0.0 \
49
- @heroicons/react@^2.2.0 \
50
- @radix-ui/react-alert-dialog@^1.1.0 \
51
- @radix-ui/react-dialog@^1.1.0 \
52
- @radix-ui/react-label@^2.1.0 \
53
- @radix-ui/react-select@^2.2.0 \
54
- @radix-ui/react-slot@^1.2.0 \
55
- @radix-ui/react-switch@^1.2.0 \
56
- @radix-ui/react-tabs@^1.1.0 \
57
- class-variance-authority@^0.7.0 \
58
- clsx@^2.1.1 \
59
- tailwind-merge@^3.0.0
8
+ bun add @sudobility/components @sudobility/design
60
9
  ```
61
10
 
62
- ## Component Categories
11
+ Peer dependencies: `react`, `react-dom`, `@radix-ui/react-*`, `@heroicons/react`, `class-variance-authority`, `clsx`, `tailwind-merge`, `react-router-dom`, `react-i18next`, `i18next`, `web-vitals`.
63
12
 
64
- ### Primitives
65
- Layout, typography, and feedback components - the building blocks.
66
- ```tsx
67
- import { Button, Card, Alert, Spinner, Badge } from '@sudobility/components';
68
- ```
69
-
70
- ### Forms
71
- Comprehensive form components for user input.
72
- ```tsx
73
- import { Input, Select, Checkbox, DatePicker } from '@sudobility/components';
74
- ```
75
-
76
- ### Navigation
77
- Links, menus, breadcrumbs, tabs, and pagination.
78
- ```tsx
79
- import { SmartLink, Tabs, Breadcrumb, Pagination } from '@sudobility/components';
80
- ```
13
+ ## Usage
81
14
 
82
- ### Data Display
83
- Tables, lists, cards, and data visualization.
84
15
  ```tsx
85
- import { DataTable, Avatar, Card, KeyValuePair } from '@sudobility/components';
86
- ```
87
-
88
- ### Charts
89
- Data visualization and charting components.
90
- ```tsx
91
- import { PieChart, BarChart, LineChart, ProgressBar } from '@sudobility/components';
92
- ```
93
-
94
- ### Media
95
- Image, video, and audio components.
96
- ```tsx
97
- import { ImageGallery, VideoPlayer, AudioPlayer } from '@sudobility/components';
98
- ```
99
-
100
- ### Modals
101
- Dialogs, drawers, popovers, and tooltips.
102
- ```tsx
103
- import { Modal, Dialog, Popover, Tooltip } from '@sudobility/components';
104
- ```
105
-
106
- ### Interactive
107
- Drag & drop, gestures, and interactive behaviors.
108
- ```tsx
109
- import { DragDrop, SwipeActions, PullToRefresh } from '@sudobility/components';
110
- ```
111
-
112
- ## Quick Start
113
-
114
- ```tsx
115
- import { Button, Card, Input } from '@sudobility/components';
16
+ import { Button, Card, Input, Modal, DataTable, Tabs } from '@sudobility/components';
17
+ import { ThemeProvider, useTheme, Theme } from '@sudobility/components';
18
+ import { cn } from '@sudobility/components';
116
19
 
117
20
  function App() {
118
21
  return (
119
- <Card>
120
- <Input placeholder="Enter your name" />
121
- <Button variant="primary">Submit</Button>
122
- </Card>
22
+ <ThemeProvider defaultTheme={Theme.SYSTEM}>
23
+ <Card>
24
+ <Input placeholder="Enter your name" />
25
+ <Button variant="primary">Submit</Button>
26
+ </Card>
27
+ </ThemeProvider>
123
28
  );
124
29
  }
125
30
  ```
126
31
 
127
- ## Specialized Packages
32
+ ## API
128
33
 
129
- ### Web3 Components
130
- ```tsx
131
- import { WalletConnect, AddressLabel, NFTGallery } from '@sudobility/web3-components';
132
- ```
34
+ ### Component Categories
133
35
 
134
- ### Email Components
135
- ```tsx
136
- import { EmailCampaign, EmailAnalytics } from '@sudobility/email-components';
137
- ```
36
+ - **Primitives** -- Layout (Box, Flex, Grid, Stack, Section), Typography (Text, Heading, Code), Feedback (Spinner, Alert, Badge, Toast, StatusIndicator)
37
+ - **Forms** -- Inputs (Input, Select, Checkbox, Switch, DateInput, TagInput, OTPInput), Advanced (DateRangePicker, ColorPicker, WYSIWYG, SignaturePad), Builders (FormBuilder, SurveyBuilder)
38
+ - **Data Display** -- DataTable, DataGrid, PivotTable, Avatar, StatDisplay, KeyValuePair, TreeView
39
+ - **Charts** -- BarChart, LineChart, PieChart, RadarChart, Heatmap, Gauge, Sparkline
40
+ - **Media** -- ImageGallery, VideoPlayer, AudioPlayer, QRCodeDisplay
41
+ - **Modals** -- Modal, Dialog, Drawer, Sheet, Popover, Tooltip
42
+ - **Interactive** -- DragDrop, SwipeActions, PinchZoom, ScrollSpy, InfiniteScroll
43
+ - **Navigation** -- SmartLink, Tabs, Pagination, Stepper, BreadcrumbNav
44
+ - **Core** -- ThemeProvider, ProtectedRoute, SafeAppWrapper, ErrorBoundary, PerformancePanel
138
45
 
139
- ### Fitness Components
140
- ```tsx
141
- import { StepCounter, WorkoutLog, CalorieTracker } from '@sudobility/fitness-components';
142
- ```
46
+ ### Sub-Packages (48 domain-specific packages in `packages/`)
143
47
 
144
- ### Real Estate Components
145
- ```tsx
146
- import { PropertyCard, MortgageCalc, VirtualTour } from '@sudobility/realestate-components';
147
- ```
148
-
149
- ## Migration from v2.x
150
-
151
- See [MIGRATION_GUIDE.md](./MIGRATION_GUIDE.md) for detailed migration instructions.
152
-
153
- **Key Changes:**
154
- - Component imports remain the same (backward compatible)
155
- - New organized structure under the hood
156
- - Specialized components moved to separate packages
157
- - Tree-shaking improvements for smaller bundle sizes
158
-
159
- ## Documentation
160
-
161
- - **Full Documentation**: [CLAUDE.md](./CLAUDE.md) - Complete project documentation
162
- - **Component Map**: [COMPONENT_MIGRATION_MAP.md](./COMPONENT_MIGRATION_MAP.md) - All components categorized
163
- - **Migration Guide**: [MIGRATION_GUIDE.md](./MIGRATION_GUIDE.md) - Upgrade from v2.x
164
-
165
- ## Package Structure
166
-
167
- ```
168
- @sudobility/components/
169
- ├── primitives/ # Layout, typography, feedback
170
- ├── forms/ # Inputs, advanced, builders
171
- ├── navigation/ # Links, menus, tabs
172
- ├── data-display/ # Tables, lists, cards
173
- ├── charts/ # Data visualization
174
- ├── media/ # Images, video, audio
175
- ├── modals/ # Dialogs, popovers, tooltips
176
- ├── interactive/ # Drag & drop, gestures
177
- ├── core/ # Core utilities
178
- └── hooks/ # Custom React hooks
179
-
180
- Specialized Packages:
181
- ├── @sudobility/web3-components
182
- ├── @sudobility/email-components
183
- ├── @sudobility/fitness-components
184
- └── @sudobility/realestate-components
185
- ```
48
+ auth, email, web3, subscription, marketing, devops, finance, ecommerce, healthcare, and 39 more.
186
49
 
187
50
  ## Development
188
51
 
189
52
  ```bash
190
- # Build the library
191
- npm run build
192
-
193
- # Development mode with watch
194
- npm run dev
195
-
196
- # Type checking
197
- npm run type-check
198
-
199
- # Linting
200
- npm run lint
201
-
202
- # Testing
203
- npm test
53
+ bun install
54
+ bun run build # TypeScript + Vite library build
55
+ bun run dev # Watch mode
56
+ bun run type-check # TypeScript checking
57
+ bun run lint # ESLint
58
+ bun test # Vitest (80% coverage threshold)
59
+ bun run prepublishOnly # Pre-publish build
204
60
  ```
205
61
 
206
- ## Contributing
62
+ ## Related Packages
207
63
 
208
- Contributions are welcome! Please read the contributing guidelines before submitting PRs.
64
+ - `@sudobility/design` -- design tokens, colors, typography, variants (peer dependency)
65
+ - `@sudobility/types` -- shared TypeScript types (peer dependency)
66
+ - `@sudobility/components-rn` -- React Native port of this library
209
67
 
210
68
  ## License
211
69
 
212
- MIT © John Q Huang
213
-
214
- ## Links
215
-
216
- - **GitHub**: [https://github.com/sudobility/components](https://github.com/sudobility/components)
217
- - **Issues**: [https://github.com/sudobility/components/issues](https://github.com/sudobility/components/issues)
218
- - **npm**: [@sudobility/components](https://www.npmjs.com/package/@sudobility/components)
70
+ Public (npm)
package/package.json CHANGED
@@ -1,26 +1,22 @@
1
1
  {
2
2
  "name": "@sudobility/components",
3
- "version": "5.0.18",
3
+ "version": "5.0.20",
4
4
  "description": "Reusable UI components and design system - Reorganized for better maintainability",
5
5
  "type": "module",
6
- "main": "dist/index.umd.js",
7
- "module": "dist/index.esm.js",
6
+ "main": "dist/index.js",
8
7
  "types": "dist/index.d.ts",
9
8
  "exports": {
10
9
  ".": {
11
10
  "types": "./dist/index.d.ts",
12
- "import": "./dist/index.esm.js",
13
- "require": "./dist/index.umd.js"
11
+ "import": "./dist/index.js"
14
12
  },
15
13
  "./ui/toast": {
16
14
  "types": "./dist/ui/toast/index.d.ts",
17
- "import": "./dist/index.esm.js",
18
- "require": "./dist/index.umd.js"
15
+ "import": "./dist/index.js"
19
16
  },
20
17
  "./*": {
21
18
  "types": "./dist/*.d.ts",
22
- "import": "./dist/index.esm.js",
23
- "require": "./dist/index.umd.js"
19
+ "import": "./dist/index.js"
24
20
  }
25
21
  },
26
22
  "files": [
@@ -56,8 +52,8 @@
56
52
  "@radix-ui/react-slot": ">=1.0.0",
57
53
  "@radix-ui/react-switch": ">=1.0.0",
58
54
  "@radix-ui/react-tabs": ">=1.0.0",
59
- "@sudobility/design": "^1.1.21",
60
- "@sudobility/types": "^1.9.55",
55
+ "@sudobility/design": "^1.1.22",
56
+ "@sudobility/types": "^1.9.57",
61
57
  "class-variance-authority": ">=0.7.0",
62
58
  "clsx": ">=2.0.0",
63
59
  "i18next": ">=23.0.0",
@@ -78,8 +74,8 @@
78
74
  "@radix-ui/react-slot": "^1.2.3",
79
75
  "@radix-ui/react-switch": "^1.2.6",
80
76
  "@radix-ui/react-tabs": "^1.1.13",
81
- "@sudobility/design": "^1.1.21",
82
- "@sudobility/types": "^1.9.55",
77
+ "@sudobility/design": "^1.1.22",
78
+ "@sudobility/types": "^1.9.57",
83
79
  "@testing-library/dom": "^10.4.1",
84
80
  "@testing-library/jest-dom": "^6.9.1",
85
81
  "@testing-library/react": "^16.3.0",