@capitaltg/vero 1.4.2 → 1.4.3

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 CHANGED
@@ -1,54 +1,83 @@
1
- # React + TypeScript + Vite
1
+ # Vero - React Component Library
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+ Accessible, modern, open source React component library inspired by USWDS built with Radix UI.
4
4
 
5
- Currently, two official plugins are available:
5
+ ## Features
6
6
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7
+ - 🎨 **Modern Design**: Clean, professional components inspired by USWDS
8
+ - **Accessible**: Built with accessibility in mind using Radix UI primitives
9
+ - 🎯 **TypeScript**: Full TypeScript support with comprehensive type definitions
10
+ - 🎨 **Customizable**: Easily themeable with CSS custom properties
11
+ - 📱 **Responsive**: Mobile-first design approach
12
+ - ⚡ **Performance**: Optimized for speed and bundle size
9
13
 
10
- ## Expanding the ESLint configuration
14
+ ## React Compatibility
11
15
 
12
- If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
16
+ Vero supports both React 18 and React 19:
13
17
 
14
- ```js
15
- export default tseslint.config({
16
- extends: [
17
- // Remove ...tseslint.configs.recommended and replace with this
18
- ...tseslint.configs.recommendedTypeChecked,
19
- // Alternatively, use this for stricter rules
20
- ...tseslint.configs.strictTypeChecked,
21
- // Optionally, add this for stylistic rules
22
- ...tseslint.configs.stylisticTypeChecked,
23
- ],
24
- languageOptions: {
25
- // other options...
26
- parserOptions: {
27
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
28
- tsconfigRootDir: import.meta.dirname,
29
- },
30
- },
31
- });
18
+ - **React 18.2.0+**: Full support with all features
19
+ - **React 19.0.0+**: Full support with all features
20
+
21
+ ## Installation
22
+
23
+ ```bash
24
+ npm install @capitaltg/vero
25
+ # or
26
+ yarn add @capitaltg/vero
27
+ # or
28
+ pnpm add @capitaltg/vero
32
29
  ```
33
30
 
34
- You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
31
+ ## Quick Start
32
+
33
+ 1. Install the package and its peer dependencies:
34
+
35
+ ```bash
36
+ npm install @capitaltg/vero react react-dom tailwindcss tailwindcss-animate
37
+ ```
38
+
39
+ 2. Import the CSS in your main CSS file:
40
+
41
+ ```css
42
+ @import '@capitaltg/vero/index.css';
43
+ ```
44
+
45
+ 3. Configure Tailwind CSS by extending your `tailwind.config.js`:
35
46
 
36
47
  ```js
37
- // eslint.config.js
38
- import reactX from 'eslint-plugin-react-x';
39
- import reactDom from 'eslint-plugin-react-dom';
40
-
41
- export default tseslint.config({
42
- plugins: {
43
- // Add the react-x and react-dom plugins
44
- 'react-x': reactX,
45
- 'react-dom': reactDom,
46
- },
47
- rules: {
48
- // other rules...
49
- // Enable its recommended typescript rules
50
- ...reactX.configs['recommended-typescript'].rules,
51
- ...reactDom.configs.recommended.rules,
52
- },
53
- });
48
+ import veroConfig from '@capitaltg/vero/tailwind.config.js';
49
+
50
+ export default {
51
+ ...veroConfig,
52
+ content: [...veroConfig.content, './src/**/*.{js,ts,jsx,tsx}'],
53
+ };
54
54
  ```
55
+
56
+ 4. Start using components:
57
+
58
+ ```tsx
59
+ import { Button, Input, FormItem } from '@capitaltg/vero';
60
+
61
+ function App() {
62
+ return (
63
+ <div>
64
+ <FormItem label="Email" hintText="Enter your email address">
65
+ <Input type="email" placeholder="you@example.com" />
66
+ </FormItem>
67
+ <Button variant="primary">Submit</Button>
68
+ </div>
69
+ );
70
+ }
71
+ ```
72
+
73
+ ## Documentation
74
+
75
+ Visit our [Storybook documentation](https://capitaltg.github.io/vero/) to explore all available components and their usage examples.
76
+
77
+ ## Contributing
78
+
79
+ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
80
+
81
+ ## License
82
+
83
+ MIT © [Capital Technology Group](https://github.com/capitaltg)