arco-clone-react 1.3.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/LICENSE +21 -0
- package/README.md +245 -0
- package/dist/index.css +1258 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +1383 -0
- package/dist/index.d.ts +1383 -0
- package/dist/index.js +9294 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +9212 -0
- package/dist/index.mjs.map +1 -0
- package/dist/styles/global.css +30 -0
- package/package.json +114 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026
|
|
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,245 @@
|
|
|
1
|
+
# Design System PoC
|
|
2
|
+
|
|
3
|
+
[](https://github.com/pjgoncalvez/design-system/actions/workflows/ci.yml)
|
|
4
|
+
[](https://github.com/pjgoncalvez/design-system/releases)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
# ⚠️ This is just a proof of concept, its purpose is to showcase my design-system implementation/tooling skills, not really intended to be used in production.
|
|
9
|
+
|
|
10
|
+
A React component library and design system built with TypeScript and CSS Modules (using figma tokens, based on [Arco Design system](https://www.figma.com/community/file/1053233047330321743/arco-design-system) )
|
|
11
|
+
Test reports are automatically generated and deployed for every pull request.
|
|
12
|
+
|
|
13
|
+
## Live [storybook here](https://arco-poc-design-system.vercel.app/) 🖼️ 🎛️
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- React components built with TypeScript
|
|
18
|
+
- CSS Modules for styling
|
|
19
|
+
- Storybook for component documentation (deployed on Vercel)
|
|
20
|
+
- Comprehensive testing with Vitest and Playwright
|
|
21
|
+
- Automated test reports on GitHub Pages for every PR
|
|
22
|
+
- Semantic versioning with automated releases
|
|
23
|
+
- GitHub Actions CI/CD pipeline
|
|
24
|
+
|
|
25
|
+
## ~~Installation~~
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
🚨 to be configured later.
|
|
29
|
+
```bash
|
|
30
|
+
npm install design-system-poc
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Usage
|
|
34
|
+
|
|
35
|
+
### Basic Setup
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { YourComponent } from 'design-system-poc';
|
|
39
|
+
import 'design-system-poc/styles';
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
return <YourComponent />;
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Font Setup (Required)
|
|
47
|
+
|
|
48
|
+
This design system uses **Nunito Sans** as the primary font. To ensure proper font rendering, you must import the global styles in your application entry point:
|
|
49
|
+
|
|
50
|
+
**Option 1: Import Global Styles (Recommended)**
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
// In your app entry point (e.g., main.tsx, App.tsx, or _app.tsx)
|
|
54
|
+
import 'design-system-poc/styles/global.css';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
This will automatically load the Nunito Sans font from Google Fonts and apply the base font configuration.
|
|
58
|
+
|
|
59
|
+
**Option 2: Manual Font Import**
|
|
60
|
+
|
|
61
|
+
If you prefer to manage fonts yourself, add this to your HTML `<head>`:
|
|
62
|
+
|
|
63
|
+
```html
|
|
64
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
65
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
66
|
+
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Then set the font family in your CSS:
|
|
70
|
+
|
|
71
|
+
```css
|
|
72
|
+
body {
|
|
73
|
+
font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Development
|
|
78
|
+
|
|
79
|
+
### Prerequisites
|
|
80
|
+
|
|
81
|
+
- Node.js >= 18.0.0
|
|
82
|
+
- npm
|
|
83
|
+
|
|
84
|
+
### Setup
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
# Install dependencies
|
|
88
|
+
npm install
|
|
89
|
+
|
|
90
|
+
# Start Storybook
|
|
91
|
+
npm run dev
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Available Scripts
|
|
95
|
+
|
|
96
|
+
- `npm run dev` - Start Storybook development server
|
|
97
|
+
- `npm run build` - Build the library for production
|
|
98
|
+
- `npm run build:storybook` - Build Storybook for deployment
|
|
99
|
+
- `npm test` - Run unit tests
|
|
100
|
+
- `npm run test:watch` - Run tests in watch mode
|
|
101
|
+
- `npm run test:e2e` - Run end-to-end tests with Playwright
|
|
102
|
+
- `npm run lint` - Lint the codebase
|
|
103
|
+
- `npm run lint:fix` - Lint and fix issues
|
|
104
|
+
- `npm run format` - Format code with Prettier
|
|
105
|
+
- `npm run format:check` - Check code formatting
|
|
106
|
+
- `npm run typecheck` - Run TypeScript type checking
|
|
107
|
+
|
|
108
|
+
## Project Structure
|
|
109
|
+
|
|
110
|
+
```
|
|
111
|
+
src/
|
|
112
|
+
├── components/ # React components
|
|
113
|
+
├── types/ # TypeScript type definitions
|
|
114
|
+
└── utils/ # Utility functions
|
|
115
|
+
e2e/ # End-to-end tests
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Testing
|
|
119
|
+
|
|
120
|
+
### Unit Tests
|
|
121
|
+
|
|
122
|
+
Unit tests are written using Vitest and React Testing Library:
|
|
123
|
+
|
|
124
|
+
```bash
|
|
125
|
+
npm test
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Visual Regression Tests
|
|
129
|
+
|
|
130
|
+
Visual regression tests use Playwright to capture and compare screenshots of components:
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
# Run visual tests
|
|
134
|
+
npm test -- e2e/layout-components.visual.spec.ts
|
|
135
|
+
|
|
136
|
+
# Update snapshots after intentional visual changes
|
|
137
|
+
npm test -- e2e/layout-components.visual.spec.ts --update-snapshots
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
#### CI Integration
|
|
141
|
+
|
|
142
|
+
Visual regression tests run automatically on every pull request. When visual changes are detected:
|
|
143
|
+
|
|
144
|
+
- 📸 **Screenshots are captured** for all component variants
|
|
145
|
+
- 🔍 **Diffs are generated** showing pixel-by-pixel differences
|
|
146
|
+
- 💬 **PR comments** provide a summary with links to artifacts
|
|
147
|
+
- 📦 **Artifacts are uploaded** for easy review (available for 30 days)
|
|
148
|
+
|
|
149
|
+
**Example PR Comment:**
|
|
150
|
+
|
|
151
|
+
```
|
|
152
|
+
📸 Visual Regression Test Results
|
|
153
|
+
|
|
154
|
+
⚠️ 3 visual difference(s) detected!
|
|
155
|
+
|
|
156
|
+
Action Required:
|
|
157
|
+
- Review the visual changes in the artifacts below
|
|
158
|
+
- If changes are intentional, update the snapshots
|
|
159
|
+
- If changes are unexpected, investigate and fix
|
|
160
|
+
|
|
161
|
+
📦 Artifacts:
|
|
162
|
+
- Download Visual Regression Results
|
|
163
|
+
- View Full Test Report
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### End-to-End Tests
|
|
167
|
+
|
|
168
|
+
E2E tests use Playwright for integration testing:
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
npm run test:e2e
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
## Contributing
|
|
175
|
+
|
|
176
|
+
### Commit Convention
|
|
177
|
+
|
|
178
|
+
This project uses [Conventional Commits](https://www.conventionalcommits.org/):
|
|
179
|
+
|
|
180
|
+
- `feat:` - New features
|
|
181
|
+
- `fix:` - Bug fixes
|
|
182
|
+
- `docs:` - Documentation changes
|
|
183
|
+
- `style:` - Code style changes (formatting, etc.)
|
|
184
|
+
- `refactor:` - Code refactoring
|
|
185
|
+
- `test:` - Test additions or modifications
|
|
186
|
+
- `chore:` - Maintenance tasks
|
|
187
|
+
|
|
188
|
+
### Branching Strategy
|
|
189
|
+
|
|
190
|
+
- `main` - Production-ready code
|
|
191
|
+
- Feature branches should be created from `main` and merged via pull requests
|
|
192
|
+
|
|
193
|
+
## CI/CD Pipeline
|
|
194
|
+
|
|
195
|
+
### Continuous Integration
|
|
196
|
+
|
|
197
|
+
Every pull request and push to `main` triggers automated checks:
|
|
198
|
+
|
|
199
|
+
| Job | Description | Artifacts |
|
|
200
|
+
|-----|-------------|-----------|
|
|
201
|
+
| **Lint** | ESLint checks for code quality | - |
|
|
202
|
+
| **Type Check** | TypeScript compilation and type safety | - |
|
|
203
|
+
| **Test** | Unit tests with Vitest + Storybook tests | Test results, coverage |
|
|
204
|
+
| **Visual Regression** | Playwright screenshot comparison | Visual diffs, HTML report |
|
|
205
|
+
| **Build** | Library and Storybook build verification | Build output |
|
|
206
|
+
|
|
207
|
+
### Pull Request Workflow
|
|
208
|
+
|
|
209
|
+
1. **Automated Checks** - All CI jobs run on every PR
|
|
210
|
+
2. **Status Checks** - GitHub shows pass/fail status for each job
|
|
211
|
+
3. **PR Comments** - Bot comments with visual regression results and build status
|
|
212
|
+
4. **Artifact Downloads** - Access test reports and visual diffs from the Actions tab
|
|
213
|
+
5. **Review & Merge** - Once all checks pass, PR is ready for review
|
|
214
|
+
|
|
215
|
+
### Viewing Test Results
|
|
216
|
+
|
|
217
|
+
**Option 1: GitHub Actions UI**
|
|
218
|
+
1. Go to the "Actions" tab in GitHub
|
|
219
|
+
2. Click on the workflow run for your PR
|
|
220
|
+
3. Download artifacts (visual-regression-results, test-results, build-output)
|
|
221
|
+
|
|
222
|
+
**Option 2: PR Comments**
|
|
223
|
+
- Visual regression results are automatically commented on PRs
|
|
224
|
+
- Includes links to artifacts and instructions for updating snapshots
|
|
225
|
+
|
|
226
|
+
**Option 3: Local Testing**
|
|
227
|
+
```bash
|
|
228
|
+
# Run all checks locally before pushing
|
|
229
|
+
npm run lint
|
|
230
|
+
npm run typecheck
|
|
231
|
+
npm test
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
## Release Process
|
|
235
|
+
|
|
236
|
+
Releases are automated using semantic-release. When commits are pushed to `main`, the release workflow:
|
|
237
|
+
|
|
238
|
+
1. Analyzes commits to determine version bump
|
|
239
|
+
2. Generates changelog
|
|
240
|
+
3. Creates a GitHub release
|
|
241
|
+
4. Publishes to npm
|
|
242
|
+
|
|
243
|
+
## License
|
|
244
|
+
|
|
245
|
+
MIT
|