@rhammy/architect-core 1.0.0
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/CHANGELOG.md +178 -0
- package/LICENSE +21 -0
- package/README.md +355 -0
- package/dist/components/Accordion/Accordion.d.ts +34 -0
- package/dist/components/Accordion/Accordion.d.ts.map +1 -0
- package/dist/components/Accordion/index.d.ts +3 -0
- package/dist/components/Accordion/index.d.ts.map +1 -0
- package/dist/components/Button/Button.d.ts +21 -0
- package/dist/components/Button/Button.d.ts.map +1 -0
- package/dist/components/Button/index.d.ts +3 -0
- package/dist/components/Button/index.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +25 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox/index.d.ts +3 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -0
- package/dist/components/Dialog/Dialog.d.ts +48 -0
- package/dist/components/Dialog/Dialog.d.ts.map +1 -0
- package/dist/components/Dialog/index.d.ts +3 -0
- package/dist/components/Dialog/index.d.ts.map +1 -0
- package/dist/components/Dropdown/Dropdown.d.ts +28 -0
- package/dist/components/Dropdown/Dropdown.d.ts.map +1 -0
- package/dist/components/Dropdown/index.d.ts +3 -0
- package/dist/components/Dropdown/index.d.ts.map +1 -0
- package/dist/components/Input/ErrorMessage.d.ts +9 -0
- package/dist/components/Input/ErrorMessage.d.ts.map +1 -0
- package/dist/components/Input/FormField.d.ts +24 -0
- package/dist/components/Input/FormField.d.ts.map +1 -0
- package/dist/components/Input/Input.d.ts +27 -0
- package/dist/components/Input/Input.d.ts.map +1 -0
- package/dist/components/Input/Label.d.ts +13 -0
- package/dist/components/Input/Label.d.ts.map +1 -0
- package/dist/components/Input/index.d.ts +10 -0
- package/dist/components/Input/index.d.ts.map +1 -0
- package/dist/components/Radio/Radio.d.ts +36 -0
- package/dist/components/Radio/Radio.d.ts.map +1 -0
- package/dist/components/Radio/index.d.ts +3 -0
- package/dist/components/Radio/index.d.ts.map +1 -0
- package/dist/components/Select/Select.d.ts +38 -0
- package/dist/components/Select/Select.d.ts.map +1 -0
- package/dist/components/Select/index.d.ts +3 -0
- package/dist/components/Select/index.d.ts.map +1 -0
- package/dist/components/Switch/Switch.d.ts +19 -0
- package/dist/components/Switch/Switch.d.ts.map +1 -0
- package/dist/components/Switch/index.d.ts +3 -0
- package/dist/components/Switch/index.d.ts.map +1 -0
- package/dist/components/Tabs/Tabs.d.ts +35 -0
- package/dist/components/Tabs/Tabs.d.ts.map +1 -0
- package/dist/components/Tabs/index.d.ts +3 -0
- package/dist/components/Tabs/index.d.ts.map +1 -0
- package/dist/components/Textarea/Textarea.d.ts +25 -0
- package/dist/components/Textarea/Textarea.d.ts.map +1 -0
- package/dist/components/Textarea/index.d.ts +3 -0
- package/dist/components/Textarea/index.d.ts.map +1 -0
- package/dist/components/Toast/Toast.d.ts +46 -0
- package/dist/components/Toast/Toast.d.ts.map +1 -0
- package/dist/components/Toast/index.d.ts +3 -0
- package/dist/components/Toast/index.d.ts.map +1 -0
- package/dist/components/Tooltip/Tooltip.d.ts +31 -0
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip/index.d.ts +3 -0
- package/dist/components/Tooltip/index.d.ts.map +1 -0
- package/dist/hooks/useClickOutside.d.ts +4 -0
- package/dist/hooks/useClickOutside.d.ts.map +1 -0
- package/dist/hooks/useControllableState.d.ts +19 -0
- package/dist/hooks/useControllableState.d.ts.map +1 -0
- package/dist/hooks/useEscapeKey.d.ts +13 -0
- package/dist/hooks/useEscapeKey.d.ts.map +1 -0
- package/dist/hooks/useFocusTrap.d.ts +15 -0
- package/dist/hooks/useFocusTrap.d.ts.map +1 -0
- package/dist/hooks/useId.d.ts +10 -0
- package/dist/hooks/useId.d.ts.map +1 -0
- package/dist/index.cjs +23 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +25 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2342 -0
- package/dist/index.js.map +1 -0
- package/dist/style.css +1 -0
- package/dist/tests/setup.d.ts +2 -0
- package/dist/tests/setup.d.ts.map +1 -0
- package/dist/types/index.d.ts +59 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/utils/dom.d.ts +31 -0
- package/dist/utils/dom.d.ts.map +1 -0
- package/dist/utils/focus.d.ts +26 -0
- package/dist/utils/focus.d.ts.map +1 -0
- package/package.json +107 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to Architect Core will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [Unreleased]
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- Initial release of Architect Core
|
|
13
|
+
- 13 production-ready components
|
|
14
|
+
- 254 comprehensive tests
|
|
15
|
+
- Full TypeScript support
|
|
16
|
+
- Storybook documentation
|
|
17
|
+
- Accessibility compliance (WCAG 2.1 AA)
|
|
18
|
+
|
|
19
|
+
## [1.0.0] - 2026-01-02
|
|
20
|
+
|
|
21
|
+
### Added
|
|
22
|
+
|
|
23
|
+
#### Core Components
|
|
24
|
+
|
|
25
|
+
- **Dialog** - Modal dialogs with overlay and focus trap
|
|
26
|
+
- Keyboard navigation (Escape to close)
|
|
27
|
+
- Focus management
|
|
28
|
+
- Controlled and uncontrolled modes
|
|
29
|
+
- 22 tests
|
|
30
|
+
|
|
31
|
+
- **Button** - Versatile button component
|
|
32
|
+
- 5 variants (primary, secondary, outline, ghost, danger)
|
|
33
|
+
- 3 sizes (sm, md, lg)
|
|
34
|
+
- Loading states
|
|
35
|
+
- Icon support
|
|
36
|
+
- 33 tests
|
|
37
|
+
|
|
38
|
+
- **Input** - Text input component set
|
|
39
|
+
- Multiple input types (text, email, password, number, date)
|
|
40
|
+
- Prefix/suffix icons
|
|
41
|
+
- Password visibility toggle
|
|
42
|
+
- Error states
|
|
43
|
+
- 30 tests
|
|
44
|
+
|
|
45
|
+
#### Navigation Components
|
|
46
|
+
|
|
47
|
+
- **Dropdown** - Context menus and dropdown menus
|
|
48
|
+
- Keyboard navigation
|
|
49
|
+
- Portal rendering
|
|
50
|
+
- Disabled items
|
|
51
|
+
- 26 tests
|
|
52
|
+
|
|
53
|
+
- **Tabs** - Accessible tabs component
|
|
54
|
+
- Horizontal/vertical orientations
|
|
55
|
+
- Automatic/manual activation
|
|
56
|
+
- Keyboard navigation
|
|
57
|
+
- 26 tests
|
|
58
|
+
|
|
59
|
+
- **Accordion** - Collapsible content sections
|
|
60
|
+
- Single/multiple expansion modes
|
|
61
|
+
- Smooth animations
|
|
62
|
+
- Collapsible option
|
|
63
|
+
- 22 tests
|
|
64
|
+
|
|
65
|
+
#### Feedback Components
|
|
66
|
+
|
|
67
|
+
- **Tooltip** - Contextual information
|
|
68
|
+
- Multiple placements (top, bottom, left, right)
|
|
69
|
+
- Delay controls
|
|
70
|
+
- Portal rendering
|
|
71
|
+
- 14 tests
|
|
72
|
+
|
|
73
|
+
- **Toast** - Notification system
|
|
74
|
+
- 5 variants (default, success, error, warning, info)
|
|
75
|
+
- 6 positions
|
|
76
|
+
- Auto-dismiss
|
|
77
|
+
- Stacking support
|
|
78
|
+
- 8 tests
|
|
79
|
+
|
|
80
|
+
#### Form Components
|
|
81
|
+
|
|
82
|
+
- **Checkbox** - Checkbox with indeterminate state
|
|
83
|
+
- Indeterminate state support
|
|
84
|
+
- Error states
|
|
85
|
+
- Label integration
|
|
86
|
+
- 20 tests
|
|
87
|
+
|
|
88
|
+
- **Radio** - Radio buttons with RadioGroup
|
|
89
|
+
- Keyboard navigation (Arrow keys)
|
|
90
|
+
- Error states
|
|
91
|
+
- Group management
|
|
92
|
+
- 19 tests
|
|
93
|
+
|
|
94
|
+
- **Select** - Dropdown select component
|
|
95
|
+
- Search/filter functionality
|
|
96
|
+
- Multiple selection mode
|
|
97
|
+
- Keyboard navigation
|
|
98
|
+
- Portal rendering
|
|
99
|
+
- 16 tests
|
|
100
|
+
|
|
101
|
+
- **Textarea** - Multi-line text input
|
|
102
|
+
- Auto-resize functionality
|
|
103
|
+
- Character count
|
|
104
|
+
- Error states
|
|
105
|
+
- 8 tests
|
|
106
|
+
|
|
107
|
+
- **Switch** - Toggle switch component
|
|
108
|
+
- Smooth animations
|
|
109
|
+
- iOS-style design
|
|
110
|
+
- Label integration
|
|
111
|
+
- 10 tests
|
|
112
|
+
|
|
113
|
+
### Features
|
|
114
|
+
|
|
115
|
+
- Full TypeScript support with comprehensive type definitions
|
|
116
|
+
- WCAG 2.1 AA accessibility compliance
|
|
117
|
+
- Keyboard navigation for all interactive components
|
|
118
|
+
- Screen reader support
|
|
119
|
+
- Controlled and uncontrolled modes for all form components
|
|
120
|
+
- Portal rendering for overlays (Dialog, Dropdown, Tooltip, Toast, Select)
|
|
121
|
+
- Customizable styling with className and style props
|
|
122
|
+
- Comprehensive Storybook documentation
|
|
123
|
+
- 254 passing tests with high coverage
|
|
124
|
+
|
|
125
|
+
### Documentation
|
|
126
|
+
|
|
127
|
+
- Complete README with usage examples
|
|
128
|
+
- Contributing guidelines
|
|
129
|
+
- Storybook stories for all components
|
|
130
|
+
- TypeScript type definitions
|
|
131
|
+
- Accessibility documentation
|
|
132
|
+
|
|
133
|
+
## [0.1.0] - 2025-12-XX
|
|
134
|
+
|
|
135
|
+
### Added
|
|
136
|
+
|
|
137
|
+
- Initial project setup
|
|
138
|
+
- Build configuration
|
|
139
|
+
- Testing infrastructure
|
|
140
|
+
- Storybook setup
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## Release Notes
|
|
145
|
+
|
|
146
|
+
### Version 1.0.0
|
|
147
|
+
|
|
148
|
+
This is the first stable release of Architect Core! 🎉
|
|
149
|
+
|
|
150
|
+
**Highlights:**
|
|
151
|
+
|
|
152
|
+
- 13 production-ready components
|
|
153
|
+
- 254 comprehensive tests
|
|
154
|
+
- Full accessibility support
|
|
155
|
+
- Complete TypeScript coverage
|
|
156
|
+
- Beautiful Storybook documentation
|
|
157
|
+
|
|
158
|
+
**What's Next:**
|
|
159
|
+
|
|
160
|
+
- Additional layout components (Card, Grid, Container)
|
|
161
|
+
- More feedback components (Alert, Progress, Skeleton)
|
|
162
|
+
- Theming system
|
|
163
|
+
- Dark mode support
|
|
164
|
+
- CSS-in-JS integration options
|
|
165
|
+
|
|
166
|
+
**Breaking Changes:**
|
|
167
|
+
|
|
168
|
+
- None (initial release)
|
|
169
|
+
|
|
170
|
+
**Migration Guide:**
|
|
171
|
+
|
|
172
|
+
- None (initial release)
|
|
173
|
+
|
|
174
|
+
---
|
|
175
|
+
|
|
176
|
+
[Unreleased]: https://github.com/RahmanC/Architect-core/compare/v1.0.0...HEAD
|
|
177
|
+
[1.0.0]: https://github.com/RahmanC/Architect-core/releases/tag/v1.0.0
|
|
178
|
+
[0.1.0]: https://github.com/RahmanC/Architect-core/releases/tag/v0.1.0
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Architect Core Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
# Architect Core
|
|
2
|
+
|
|
3
|
+
<div align="center">
|
|
4
|
+
<h3>A Production-Ready, Accessible React Component Library</h3>
|
|
5
|
+
<p>13 beautifully crafted components with 254 passing tests</p>
|
|
6
|
+
|
|
7
|
+
[](https://github.com/RahmanC/Architect-core)
|
|
8
|
+
[](https://www.typescriptlang.org/)
|
|
9
|
+
[](https://www.w3.org/WAI/WCAG21/quickref/)
|
|
10
|
+
[](LICENSE)
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## ✨ Features
|
|
16
|
+
|
|
17
|
+
- 🎨 **13 Production-Ready Components** - Dialog, Button, Input, Dropdown, Tabs, Accordion, Tooltip, Toast, Checkbox, Radio, Select, Textarea, Switch
|
|
18
|
+
- ♿ **100% Accessible** - WCAG 2.1 AA compliant with full keyboard navigation
|
|
19
|
+
- 🎯 **TypeScript First** - Fully typed with excellent IntelliSense support
|
|
20
|
+
- 🧪 **Thoroughly Tested** - 254 comprehensive tests with high coverage
|
|
21
|
+
- 📦 **Headless & Flexible** - Bring your own styles or use our defaults
|
|
22
|
+
- 🎭 **Controlled & Uncontrolled** - Flexible state management
|
|
23
|
+
- 📱 **Responsive** - Works beautifully on all screen sizes
|
|
24
|
+
- 🌙 **Dark Mode Ready** - Easy to theme and customize
|
|
25
|
+
|
|
26
|
+
## 🚀 Quick Start
|
|
27
|
+
|
|
28
|
+
### Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install @architect/core
|
|
32
|
+
# or
|
|
33
|
+
yarn add @architect/core
|
|
34
|
+
# or
|
|
35
|
+
pnpm add @architect/core
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Basic Usage
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { Button, Dialog, Input } from '@architect/core';
|
|
42
|
+
|
|
43
|
+
function App() {
|
|
44
|
+
return (
|
|
45
|
+
<div>
|
|
46
|
+
<Button variant="primary" size="lg">
|
|
47
|
+
Click me
|
|
48
|
+
</Button>
|
|
49
|
+
|
|
50
|
+
<Input label="Email" type="email" placeholder="Enter your email" />
|
|
51
|
+
</div>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## 📚 Components
|
|
57
|
+
|
|
58
|
+
### Core Components
|
|
59
|
+
|
|
60
|
+
#### Dialog
|
|
61
|
+
|
|
62
|
+
Modal dialogs with overlay, keyboard navigation, and focus trap.
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
|
66
|
+
<DialogTrigger>Open Dialog</DialogTrigger>
|
|
67
|
+
<DialogContent>
|
|
68
|
+
<DialogHeader>
|
|
69
|
+
<DialogTitle>Welcome</DialogTitle>
|
|
70
|
+
<DialogDescription>This is a dialog</DialogDescription>
|
|
71
|
+
</DialogHeader>
|
|
72
|
+
<DialogFooter>
|
|
73
|
+
<Button onClick={() => setIsOpen(false)}>Close</Button>
|
|
74
|
+
</DialogFooter>
|
|
75
|
+
</DialogContent>
|
|
76
|
+
</Dialog>
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### Button
|
|
80
|
+
|
|
81
|
+
Versatile button component with multiple variants and sizes.
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
<Button variant="primary" size="lg" disabled={false}>
|
|
85
|
+
Primary Button
|
|
86
|
+
</Button>
|
|
87
|
+
|
|
88
|
+
<Button variant="outline" size="md" loading={true}>
|
|
89
|
+
Loading...
|
|
90
|
+
</Button>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
#### Input
|
|
94
|
+
|
|
95
|
+
Text input with label, error states, and prefix/suffix support.
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
<Input
|
|
99
|
+
label="Email"
|
|
100
|
+
type="email"
|
|
101
|
+
placeholder="you@example.com"
|
|
102
|
+
errorMessage="Invalid email"
|
|
103
|
+
invalid={hasError}
|
|
104
|
+
/>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Navigation Components
|
|
108
|
+
|
|
109
|
+
#### Tabs
|
|
110
|
+
|
|
111
|
+
Accessible tabs with keyboard navigation.
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
<Tabs defaultValue="tab1">
|
|
115
|
+
<TabsList>
|
|
116
|
+
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
117
|
+
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
118
|
+
</TabsList>
|
|
119
|
+
<TabsContent value="tab1">Content 1</TabsContent>
|
|
120
|
+
<TabsContent value="tab2">Content 2</TabsContent>
|
|
121
|
+
</Tabs>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
#### Accordion
|
|
125
|
+
|
|
126
|
+
Collapsible content sections.
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
<Accordion type="single" collapsible>
|
|
130
|
+
<AccordionItem value="item-1">
|
|
131
|
+
<AccordionTrigger>Question 1</AccordionTrigger>
|
|
132
|
+
<AccordionContent>Answer 1</AccordionContent>
|
|
133
|
+
</AccordionItem>
|
|
134
|
+
</Accordion>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
#### Dropdown
|
|
138
|
+
|
|
139
|
+
Context menus and dropdown menus.
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
<Dropdown>
|
|
143
|
+
<DropdownTrigger>Open Menu</DropdownTrigger>
|
|
144
|
+
<DropdownContent>
|
|
145
|
+
<DropdownItem onSelect={() => {}}>Item 1</DropdownItem>
|
|
146
|
+
<DropdownItem onSelect={() => {}}>Item 2</DropdownItem>
|
|
147
|
+
</DropdownContent>
|
|
148
|
+
</Dropdown>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### Feedback Components
|
|
152
|
+
|
|
153
|
+
#### Tooltip
|
|
154
|
+
|
|
155
|
+
Contextual information on hover/focus.
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
<Tooltip>
|
|
159
|
+
<TooltipTrigger>Hover me</TooltipTrigger>
|
|
160
|
+
<TooltipContent placement="top">Helpful information</TooltipContent>
|
|
161
|
+
</Tooltip>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
#### Toast
|
|
165
|
+
|
|
166
|
+
Notification system with multiple variants.
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
function MyComponent() {
|
|
170
|
+
const { success, error } = useToastNotification();
|
|
171
|
+
|
|
172
|
+
return (
|
|
173
|
+
<button onClick={() => success('Saved!', 'Changes saved successfully')}>
|
|
174
|
+
Save
|
|
175
|
+
</button>
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Wrap your app
|
|
180
|
+
<ToastProvider>
|
|
181
|
+
<App />
|
|
182
|
+
</ToastProvider>;
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
### Form Components
|
|
186
|
+
|
|
187
|
+
#### Checkbox
|
|
188
|
+
|
|
189
|
+
Checkbox with indeterminate state support.
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
<Checkbox
|
|
193
|
+
label="Accept terms"
|
|
194
|
+
checked={accepted}
|
|
195
|
+
onCheckedChange={setAccepted}
|
|
196
|
+
indeterminate={someSelected}
|
|
197
|
+
/>
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
#### Radio
|
|
201
|
+
|
|
202
|
+
Radio buttons with RadioGroup.
|
|
203
|
+
|
|
204
|
+
```tsx
|
|
205
|
+
<RadioGroup name="plan" value={plan} onValueChange={setPlan}>
|
|
206
|
+
<Radio value="free" label="Free" />
|
|
207
|
+
<Radio value="pro" label="Pro" />
|
|
208
|
+
</RadioGroup>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
#### Select
|
|
212
|
+
|
|
213
|
+
Dropdown select with search and multiple selection.
|
|
214
|
+
|
|
215
|
+
```tsx
|
|
216
|
+
<Select
|
|
217
|
+
options={options}
|
|
218
|
+
value={selected}
|
|
219
|
+
onValueChange={setSelected}
|
|
220
|
+
searchable
|
|
221
|
+
multiple
|
|
222
|
+
/>
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
#### Textarea
|
|
226
|
+
|
|
227
|
+
Multi-line text input with auto-resize.
|
|
228
|
+
|
|
229
|
+
```tsx
|
|
230
|
+
<Textarea
|
|
231
|
+
label="Description"
|
|
232
|
+
maxLength={500}
|
|
233
|
+
showCount
|
|
234
|
+
autoResize
|
|
235
|
+
minRows={3}
|
|
236
|
+
/>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
#### Switch
|
|
240
|
+
|
|
241
|
+
Toggle switch component.
|
|
242
|
+
|
|
243
|
+
```tsx
|
|
244
|
+
<Switch
|
|
245
|
+
label="Enable notifications"
|
|
246
|
+
checked={enabled}
|
|
247
|
+
onCheckedChange={setEnabled}
|
|
248
|
+
/>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
## 🎨 Styling
|
|
252
|
+
|
|
253
|
+
Architect Core is a headless component library, giving you full control over styling. Components come with minimal default styles and use inline styles for essential layout.
|
|
254
|
+
|
|
255
|
+
### Custom Styling
|
|
256
|
+
|
|
257
|
+
```tsx
|
|
258
|
+
// Using className
|
|
259
|
+
<Button className="my-custom-button">
|
|
260
|
+
Styled Button
|
|
261
|
+
</Button>
|
|
262
|
+
|
|
263
|
+
// Using style prop
|
|
264
|
+
<Button style={{ backgroundColor: '#0066FF', padding: '12px 24px' }}>
|
|
265
|
+
Inline Styled
|
|
266
|
+
</Button>
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### CSS Variables
|
|
270
|
+
|
|
271
|
+
You can define CSS variables for consistent theming:
|
|
272
|
+
|
|
273
|
+
```css
|
|
274
|
+
:root {
|
|
275
|
+
--color-primary: #0066ff;
|
|
276
|
+
--color-error: #ef4444;
|
|
277
|
+
--color-success: #10b981;
|
|
278
|
+
--border-radius: 6px;
|
|
279
|
+
}
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
## ♿ Accessibility
|
|
283
|
+
|
|
284
|
+
All components follow WAI-ARIA best practices:
|
|
285
|
+
|
|
286
|
+
- ✅ Proper ARIA attributes
|
|
287
|
+
- ✅ Keyboard navigation
|
|
288
|
+
- ✅ Focus management
|
|
289
|
+
- ✅ Screen reader support
|
|
290
|
+
- ✅ Color contrast compliance
|
|
291
|
+
|
|
292
|
+
### Keyboard Navigation
|
|
293
|
+
|
|
294
|
+
- **Dialog**: `Escape` to close, focus trap
|
|
295
|
+
- **Dropdown**: Arrow keys, `Enter`, `Escape`
|
|
296
|
+
- **Tabs**: Arrow keys, `Home`, `End`
|
|
297
|
+
- **Accordion**: Arrow keys, `Home`, `End`
|
|
298
|
+
- **Select**: Arrow keys, `Enter`, `Escape`, `Home`, `End`
|
|
299
|
+
- **Radio**: Arrow keys to navigate options
|
|
300
|
+
|
|
301
|
+
## 🧪 Testing
|
|
302
|
+
|
|
303
|
+
All components are thoroughly tested:
|
|
304
|
+
|
|
305
|
+
```bash
|
|
306
|
+
# Run all tests
|
|
307
|
+
npm test
|
|
308
|
+
|
|
309
|
+
# Run tests in watch mode
|
|
310
|
+
npm test:watch
|
|
311
|
+
|
|
312
|
+
# Generate coverage report
|
|
313
|
+
npm test:coverage
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
## 📖 Documentation
|
|
317
|
+
|
|
318
|
+
- **Storybook**: Run `npm run storybook` to explore components interactively
|
|
319
|
+
- **API Docs**: Each component is fully documented with TypeScript types
|
|
320
|
+
- **Examples**: Check the `stories` files for usage examples
|
|
321
|
+
|
|
322
|
+
## 🤝 Contributing
|
|
323
|
+
|
|
324
|
+
Contributions are welcome! Please read our contributing guidelines before submitting PRs.
|
|
325
|
+
|
|
326
|
+
1. Fork the repository
|
|
327
|
+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
|
|
328
|
+
3. Commit your changes (`git commit -m 'Add amazing feature'`)
|
|
329
|
+
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
330
|
+
5. Open a Pull Request
|
|
331
|
+
|
|
332
|
+
## 📝 License
|
|
333
|
+
|
|
334
|
+
MIT © [Your Name]
|
|
335
|
+
|
|
336
|
+
## 🙏 Acknowledgments
|
|
337
|
+
|
|
338
|
+
Built with:
|
|
339
|
+
|
|
340
|
+
- React
|
|
341
|
+
- TypeScript
|
|
342
|
+
- Vitest
|
|
343
|
+
- Storybook
|
|
344
|
+
- Testing Library
|
|
345
|
+
|
|
346
|
+
---
|
|
347
|
+
|
|
348
|
+
<div align="center">
|
|
349
|
+
<p>Made with ❤️ by the Architect Core team</p>
|
|
350
|
+
<p>
|
|
351
|
+
<a href="https://github.com/RahmanC/Architect-core">GitHub</a> •
|
|
352
|
+
<a href="https://github.com/RahmanC/Architect-core/issues">Issues</a> •
|
|
353
|
+
<a href="https://github.com/RahmanC/Architect-core/discussions">Discussions</a>
|
|
354
|
+
</p>
|
|
355
|
+
</div>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BaseComponentProps, WithChildren } from '../../types';
|
|
3
|
+
|
|
4
|
+
type AccordionType = 'single' | 'multiple';
|
|
5
|
+
export interface AccordionProps extends BaseComponentProps, WithChildren {
|
|
6
|
+
/** Type of accordion - single allows one item open, multiple allows many */
|
|
7
|
+
type?: AccordionType;
|
|
8
|
+
/** Currently open item(s) - string for single, array for multiple (controlled) */
|
|
9
|
+
value?: string | string[];
|
|
10
|
+
/** Default open item(s) (uncontrolled) */
|
|
11
|
+
defaultValue?: string | string[];
|
|
12
|
+
/** Callback when open items change */
|
|
13
|
+
onValueChange?: (value: string | string[]) => void;
|
|
14
|
+
/** Whether items can be collapsed (single type only) */
|
|
15
|
+
collapsible?: boolean;
|
|
16
|
+
/** Whether all items are disabled */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface AccordionItemProps extends BaseComponentProps, WithChildren {
|
|
20
|
+
/** Unique value for this item */
|
|
21
|
+
value: string;
|
|
22
|
+
/** Whether this item is disabled */
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
}
|
|
25
|
+
export interface AccordionTriggerProps extends BaseComponentProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
|
|
26
|
+
}
|
|
27
|
+
export interface AccordionContentProps extends BaseComponentProps, WithChildren {
|
|
28
|
+
}
|
|
29
|
+
export declare const Accordion: React.FC<AccordionProps>;
|
|
30
|
+
export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
export declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
32
|
+
export declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
+
export {};
|
|
34
|
+
//# sourceMappingURL=Accordion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAQN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAI/D,KAAK,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAW3C,MAAM,WAAW,cAAe,SAAQ,kBAAkB,EAAE,YAAY;IACtE,4EAA4E;IAC5E,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,sCAAsC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB,EAAE,YAAY;IAC1E,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBACf,SACE,kBAAkB,EAClB,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;CAAG;AAErE,MAAM,WAAW,qBACf,SAAQ,kBAAkB,EAAE,YAAY;CAAG;AAsC7C,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAkE9C,CAAC;AAIF,eAAO,MAAM,aAAa,2FA4CzB,CAAC;AAMF,eAAO,MAAM,gBAAgB,iGAgC3B,CAAC;AAMH,eAAO,MAAM,gBAAgB,8FAkE3B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,aAAa,CAAC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { default as React, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { BaseComponentProps } from '../../types';
|
|
3
|
+
|
|
4
|
+
export interface ButtonProps extends BaseComponentProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
|
|
5
|
+
/** Whether the button is in a loading state */
|
|
6
|
+
loading?: boolean;
|
|
7
|
+
/** Whether the button is disabled */
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
/** Icon to display before the button text */
|
|
10
|
+
iconLeft?: React.ReactNode;
|
|
11
|
+
/** Icon to display after the button text */
|
|
12
|
+
iconRight?: React.ReactNode;
|
|
13
|
+
/** Accessible label for loading state (announced to screen readers) */
|
|
14
|
+
loadingText?: string;
|
|
15
|
+
/** Element type to render as (for polymorphic behavior) */
|
|
16
|
+
as?: 'button' | 'a' | 'div';
|
|
17
|
+
/** Button type attribute */
|
|
18
|
+
type?: 'button' | 'submit' | 'reset';
|
|
19
|
+
}
|
|
20
|
+
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
21
|
+
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD,MAAM,WAAW,WACf,SACE,kBAAkB,EAClB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC3D,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,KAAK,CAAC;IAC5B,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC;AAID,eAAO,MAAM,MAAM,uFAuLlB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { BaseComponentProps } from '../../types';
|
|
3
|
+
|
|
4
|
+
export interface CheckboxProps extends BaseComponentProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
5
|
+
/** Whether the checkbox is checked */
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
/** Default checked state (uncontrolled) */
|
|
8
|
+
defaultChecked?: boolean;
|
|
9
|
+
/** Whether the checkbox is in an indeterminate state */
|
|
10
|
+
indeterminate?: boolean;
|
|
11
|
+
/** Whether the checkbox is disabled */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Whether the checkbox has an error */
|
|
14
|
+
invalid?: boolean;
|
|
15
|
+
/** Label text */
|
|
16
|
+
label?: string;
|
|
17
|
+
/** Helper text */
|
|
18
|
+
helperText?: string;
|
|
19
|
+
/** Error message */
|
|
20
|
+
errorMessage?: string;
|
|
21
|
+
/** Callback when checked state changes */
|
|
22
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
23
|
+
}
|
|
24
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
25
|
+
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAA2B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAIjD,MAAM,WAAW,aACf,SACE,kBAAkB,EAClB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9D,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAID,eAAO,MAAM,QAAQ,wFA8GpB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}
|