@papillonbits/components 1.12.0 → 1.13.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 +1 -1
- package/README.md +146 -1
- package/package.json +4 -4
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1 +1,146 @@
|
|
|
1
|
-
|
|
1
|
+
# @papillonbits/components
|
|
2
|
+
|
|
3
|
+
A comprehensive collection of accessible React components for building modern web applications.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@papillonbits/components)
|
|
6
|
+
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
This package provides a complete suite of React components following atomic design principles. All components are built with accessibility, reusability, and customization in mind.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @papillonbits/components
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Components
|
|
18
|
+
|
|
19
|
+
### Layout Components
|
|
20
|
+
- **Alert** - Display notification and alert messages with various severity levels
|
|
21
|
+
- **Blankslate** - Show empty states with helpful messaging
|
|
22
|
+
- **Box** - Flexible layout container with customizable spacing and styling
|
|
23
|
+
- **Layout** - Page layout components for consistent structure
|
|
24
|
+
|
|
25
|
+
### Form Components
|
|
26
|
+
- **Checkbox** - Accessible checkbox input with label support
|
|
27
|
+
- **Input** - Text input fields with validation states
|
|
28
|
+
- **Radio** - Radio button input with grouping support
|
|
29
|
+
- **Select** - Native select dropdown component
|
|
30
|
+
- **SelectMenu** - Advanced select menu with search and filtering
|
|
31
|
+
|
|
32
|
+
### Navigation Components
|
|
33
|
+
- **Breadcrumb** - Navigation breadcrumbs for hierarchical navigation
|
|
34
|
+
- **Menu** - Vertical navigation menu
|
|
35
|
+
- **TabNav** - Tab-based navigation
|
|
36
|
+
- **UnderlineNav** - Underlined navigation bar
|
|
37
|
+
|
|
38
|
+
### Interactive Components
|
|
39
|
+
- **Button** - Interactive button with multiple variants and states
|
|
40
|
+
- **Dropdown** - Dropdown menus and selectors
|
|
41
|
+
- **Pagination** - Pagination controls with PreviousNext component
|
|
42
|
+
|
|
43
|
+
### Display Components
|
|
44
|
+
- **Label** - Labels and tags for categorization
|
|
45
|
+
- **Icon** - Icon components for visual communication
|
|
46
|
+
- **SVG** - SVG utilities and components
|
|
47
|
+
- **BranchName** - Git branch name display component
|
|
48
|
+
|
|
49
|
+
### Grid & Table Components
|
|
50
|
+
- **DisplayTable** - Table component for displaying tabular data
|
|
51
|
+
- **FlexGrid** - Flexible grid layout system
|
|
52
|
+
|
|
53
|
+
### Feedback Components
|
|
54
|
+
- **Loader** - Loading indicators and spinners
|
|
55
|
+
- **Progress** - Progress bars and indicators
|
|
56
|
+
- **Toast** - Toast notification system
|
|
57
|
+
- **Popover** - Popover and tooltip containers
|
|
58
|
+
|
|
59
|
+
### Utility Components
|
|
60
|
+
- **ErrorBoundary** - React error boundary for graceful error handling
|
|
61
|
+
- **Subhead** - Subheading components for content hierarchy
|
|
62
|
+
|
|
63
|
+
## Usage
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
import { Button, Alert, Input } from '@papillonbits/components';
|
|
67
|
+
|
|
68
|
+
function MyComponent() {
|
|
69
|
+
return (
|
|
70
|
+
<div>
|
|
71
|
+
<Alert type="success">Operation completed successfully!</Alert>
|
|
72
|
+
<Input
|
|
73
|
+
label="Email"
|
|
74
|
+
type="email"
|
|
75
|
+
placeholder="Enter your email"
|
|
76
|
+
/>
|
|
77
|
+
<Button variant="primary">Submit</Button>
|
|
78
|
+
</div>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Dependencies
|
|
84
|
+
|
|
85
|
+
This package depends on:
|
|
86
|
+
- `@papillonbits/css` - Styling and CSS primitives
|
|
87
|
+
- `@papillonbits/library` - Utility functions and helpers
|
|
88
|
+
- `react` - React library
|
|
89
|
+
- `prop-types` - Runtime type checking
|
|
90
|
+
|
|
91
|
+
## Development
|
|
92
|
+
|
|
93
|
+
### Building
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
# Build the package
|
|
97
|
+
npm run build
|
|
98
|
+
|
|
99
|
+
# Build for different environments
|
|
100
|
+
npm run build-test
|
|
101
|
+
npm run build-acceptance
|
|
102
|
+
npm run build-release
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Scripts
|
|
106
|
+
|
|
107
|
+
- `clean-up` - Remove build artifacts and dependencies
|
|
108
|
+
- `install-packages` - Install dependencies
|
|
109
|
+
- `install-papillonbits-latest` - Update to latest papillonbits packages
|
|
110
|
+
- `build` - Transpile and build the package
|
|
111
|
+
|
|
112
|
+
## Features
|
|
113
|
+
|
|
114
|
+
- **Accessibility First** - All components follow WCAG guidelines
|
|
115
|
+
- **Customizable** - Easy to theme and customize via CSS and props
|
|
116
|
+
- **TypeScript Ready** - PropTypes included for runtime validation
|
|
117
|
+
- **Tree Shakeable** - Import only what you need
|
|
118
|
+
- **Well Tested** - Comprehensive test coverage with Jest and Testing Library
|
|
119
|
+
|
|
120
|
+
## Component Design Principles
|
|
121
|
+
|
|
122
|
+
- **Separation of Concerns** - Logic separated from presentation
|
|
123
|
+
- **Composition** - Components designed to work together
|
|
124
|
+
- **Atomic Design** - Built from atoms to organisms to templates
|
|
125
|
+
- **Accessibility** - ARIA attributes and keyboard navigation
|
|
126
|
+
- **Performance** - Optimized for minimal re-renders
|
|
127
|
+
|
|
128
|
+
## Documentation
|
|
129
|
+
|
|
130
|
+
For detailed component API documentation and live examples, visit the [Storybook documentation](https://github.com/papillonbits/papillonbits).
|
|
131
|
+
|
|
132
|
+
## Links
|
|
133
|
+
|
|
134
|
+
- [Homepage](https://github.com/papillonbits/papillonbits/tree/master/packages/components)
|
|
135
|
+
- [Repository](https://github.com/papillonbits/papillonbits)
|
|
136
|
+
- [Issues](https://github.com/papillonbits/papillonbits/issues)
|
|
137
|
+
|
|
138
|
+
## Related Packages
|
|
139
|
+
|
|
140
|
+
- [@papillonbits/css](../css) - CSS styles and primitives
|
|
141
|
+
- [@papillonbits/library](../library) - Utility functions
|
|
142
|
+
- [@papillonbits/setup](../setup) - Build configuration
|
|
143
|
+
|
|
144
|
+
## License
|
|
145
|
+
|
|
146
|
+
See root LICENSE file for details.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@papillonbits/components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.1",
|
|
4
4
|
"description": "Papillon Bits Components",
|
|
5
5
|
"homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/components",
|
|
6
6
|
"repository": {
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"build-release": "npm run build"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@papillonbits/css": "^1.
|
|
33
|
-
"@papillonbits/library": "^1.
|
|
32
|
+
"@papillonbits/css": "^1.13.1",
|
|
33
|
+
"@papillonbits/library": "^1.13.1"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "29a6510770ba115a8b30bb8305c40896ebd600a2"
|
|
36
36
|
}
|