@rishabh_7775/react-component-library 0.1.0 → 0.1.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/README.md +133 -0
- package/dist/index.cjs +3 -3
- package/dist/index.d.ts +1 -1
- package/dist/index.js +330 -319
- package/dist/style.css +1 -1
- package/package.json +3 -3
- package/Readme.md +0 -0
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# @rishabh_7775/react-component-library
|
|
2
|
+
|
|
3
|
+
An accessible, themeable React component library and design system with Storybook documentation, published to npm.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@rishabh_7775/react-component-library)
|
|
6
|
+
[](https://6a5f5b15811622401a531594-jqzcmtbzal.chromatic.com/)
|
|
7
|
+
[](https://opensource.org/licenses/MIT)
|
|
8
|
+
|
|
9
|
+
[](https://react-component-library-mu.vercel.app/)
|
|
10
|
+
|
|
11
|
+
**[Explore Live Storybook Documentation →](https://react-component-library-mu.vercel.app/)**
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @rishabh_7775/react-component-library
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Quickstart
|
|
23
|
+
|
|
24
|
+
Import the `ThemeProvider`, components, and compiled stylesheet into your application:
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import React from 'react';
|
|
28
|
+
import { Button, Input, Card, CardHeader, CardTitle, CardContent, ThemeProvider } from '@rishabh_7775/react-component-library';
|
|
29
|
+
import '@rishabh_7775/react-component-library/style.css';
|
|
30
|
+
|
|
31
|
+
export function App() {
|
|
32
|
+
return (
|
|
33
|
+
<ThemeProvider defaultTheme="system">
|
|
34
|
+
<div className="p-6 max-w-md mx-auto space-y-4">
|
|
35
|
+
<Card>
|
|
36
|
+
<CardHeader>
|
|
37
|
+
<CardTitle>Welcome to Design System</CardTitle>
|
|
38
|
+
</CardHeader>
|
|
39
|
+
<CardContent className="space-y-4">
|
|
40
|
+
<Input label="Email Address" placeholder="you@example.com" />
|
|
41
|
+
<Button variant="primary" size="md">
|
|
42
|
+
Submit Form
|
|
43
|
+
</Button>
|
|
44
|
+
</CardContent>
|
|
45
|
+
</Card>
|
|
46
|
+
</div>
|
|
47
|
+
</ThemeProvider>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
---
|
|
53
|
+
|
|
54
|
+
## Features
|
|
55
|
+
|
|
56
|
+
- **16 Production-Ready Components** categorized across 4 main design system categories:
|
|
57
|
+
- **Inputs**: `Button`, `Input`, `Checkbox`, `Radio` & `RadioGroup`, `Select`, `Switch`
|
|
58
|
+
- **Feedback**: `Badge`, `Alert`, `Toast`, `Spinner`
|
|
59
|
+
- **Overlays**: `Modal` (with `focus-trap-react`), `Tooltip`, `Popover`
|
|
60
|
+
- **Data Display**: `Card` (compound components), `Table` (semantic HTML), `Tabs` (roving `tabIndex`)
|
|
61
|
+
- **Light/Dark Design Token Architecture**: CSS custom properties managed via `ThemeProvider` respecting system preferences by default.
|
|
62
|
+
- **Accessible by Default**: Fully keyboard operable controls (`Tab`, `Space`, `Enter`, `Escape`, arrow key navigation) with appropriate ARIA roles (`role="dialog"`, `role="switch"`, `role="alert"`, `role="tablist"`).
|
|
63
|
+
- **Automated Accessibility Testing**: Verified with `vitest-axe` and `axe-core` across unit test suites.
|
|
64
|
+
- **Visual Regression Protection**: Storybook snapshot baseline diffing configured with Chromatic for light and dark modes.
|
|
65
|
+
- **TypeScript First**: Bundled single-file declaration types (`index.d.ts` and `style.css.d.ts`) providing prop autocomplete out of the box.
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Component Catalog
|
|
70
|
+
|
|
71
|
+
| Category | Component | Key Accessibility & Feature Highlights |
|
|
72
|
+
| :--- | :--- | :--- |
|
|
73
|
+
| **Inputs** | `Button` | Native `<button>`, loading spinner with `aria-busy="true"`, `focus-ring` styling |
|
|
74
|
+
| | `Input` | Explicit label association via `id`/`htmlFor`, `aria-invalid`, `aria-describedby` |
|
|
75
|
+
| | `Checkbox` | Native `<input type="checkbox">` visually styled with keyboard indicator focus |
|
|
76
|
+
| | `Radio` | Semantic `<fieldset>` & `<legend>` container with native radio keyboard groups |
|
|
77
|
+
| | `Select` | Styled native `<select>` for platform-native dropdown accessibility |
|
|
78
|
+
| | `Switch` | `role="switch"`, `aria-checked`, keyboard focus ring toggling |
|
|
79
|
+
| **Feedback**| `Badge` | Status indicator badges with WCAG AA token contrast |
|
|
80
|
+
| | `Alert` | `role="alert"` for high priority warnings and `role="status"` for notifications |
|
|
81
|
+
| | `Toast` | Dynamic status toast banner with auto-dismiss pause on hover/focus |
|
|
82
|
+
| | `Spinner` | Standalone loading indicator with `role="status"` and `sr-only` text |
|
|
83
|
+
| **Overlays** | `Modal` | `createPortal` overlay dialog (`role="dialog"`, `aria-modal="true"`) with focus trapping & `Escape` close |
|
|
84
|
+
| | `Tooltip` | `role="tooltip"` triggered on mouse hover AND keyboard focus |
|
|
85
|
+
| | `Popover` | Interactive popover panel with click-outside and `Escape` dismissal |
|
|
86
|
+
| **Data Display** | `Card` | Compound layout (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`) |
|
|
87
|
+
| | `Table` | Semantic HTML `<table>` markup with column headers (`<th scope="col">`) |
|
|
88
|
+
| | `Tabs` | WAI-ARIA `role="tablist"` pattern with roving `tabIndex` & arrow key navigation |
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## Tech Stack
|
|
93
|
+
|
|
94
|
+
- **Framework & Core**: React 18/19, TypeScript, Vite (Library mode)
|
|
95
|
+
- **Styling**: Tailwind CSS, Class Variance Authority (`cva`), `clsx`, `tailwind-merge`
|
|
96
|
+
- **Documentation**: Storybook 8 (`@storybook/react-vite`), MDX Docs, `@storybook/addon-a11y`
|
|
97
|
+
- **Testing & Quality**: Vitest, `@testing-library/react`, `vitest-axe`, Chromatic (Visual Regression CI)
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## Local Development Setup
|
|
102
|
+
|
|
103
|
+
Clone the repository and install dependencies:
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
git clone https://github.com/Rishabh987654321/React_component_Library.git
|
|
107
|
+
cd React_component_Library
|
|
108
|
+
npm install
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Start the interactive Storybook environment:
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm run storybook
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Run unit and automated `axe` accessibility tests:
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
npm run test
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
Build production package distribution:
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
npm run build
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
---
|
|
130
|
+
|
|
131
|
+
## License
|
|
132
|
+
|
|
133
|
+
[MIT](LICENSE) © Rishabh
|