mcoli-ui 0.1.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/.github/workflows/ci.yml +86 -0
- package/CHANGELOG.md +63 -0
- package/CONTRIBUTING.md +174 -0
- package/LICENSE +21 -0
- package/README.md +94 -0
- package/RELEASE_GUIDE.md +195 -0
- package/cli/index.js +238 -0
- package/package.json +76 -0
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
name: CI
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches: [main, dev]
|
|
6
|
+
pull_request:
|
|
7
|
+
branches: [main, dev]
|
|
8
|
+
|
|
9
|
+
concurrency:
|
|
10
|
+
group: ${{ github.workflow }}-${{ github.ref }}
|
|
11
|
+
cancel-in-progress: true
|
|
12
|
+
|
|
13
|
+
env:
|
|
14
|
+
NODE_VERSION: "20"
|
|
15
|
+
|
|
16
|
+
jobs:
|
|
17
|
+
lint:
|
|
18
|
+
name: Lint
|
|
19
|
+
runs-on: ubuntu-latest
|
|
20
|
+
|
|
21
|
+
steps:
|
|
22
|
+
- uses: actions/checkout@v5
|
|
23
|
+
|
|
24
|
+
- uses: actions/setup-node@v6
|
|
25
|
+
with:
|
|
26
|
+
node-version: ${{ env.NODE_VERSION }}
|
|
27
|
+
cache: npm
|
|
28
|
+
|
|
29
|
+
- run: npm ci
|
|
30
|
+
- run: npm run lint
|
|
31
|
+
|
|
32
|
+
typecheck:
|
|
33
|
+
name: Type Check
|
|
34
|
+
runs-on: ubuntu-latest
|
|
35
|
+
|
|
36
|
+
steps:
|
|
37
|
+
- uses: actions/checkout@v5
|
|
38
|
+
|
|
39
|
+
- uses: actions/setup-node@v6
|
|
40
|
+
with:
|
|
41
|
+
node-version: ${{ env.NODE_VERSION }}
|
|
42
|
+
cache: npm
|
|
43
|
+
|
|
44
|
+
- run: npm ci
|
|
45
|
+
- run: npx tsc --noEmit
|
|
46
|
+
|
|
47
|
+
build:
|
|
48
|
+
name: Build
|
|
49
|
+
runs-on: ubuntu-latest
|
|
50
|
+
|
|
51
|
+
steps:
|
|
52
|
+
- uses: actions/checkout@v5
|
|
53
|
+
|
|
54
|
+
- uses: actions/setup-node@v6
|
|
55
|
+
with:
|
|
56
|
+
node-version: ${{ env.NODE_VERSION }}
|
|
57
|
+
cache: npm
|
|
58
|
+
|
|
59
|
+
- run: npm ci
|
|
60
|
+
- run: npm run build:registry
|
|
61
|
+
- run: npm run build:docs
|
|
62
|
+
- run: npm run build:prod
|
|
63
|
+
|
|
64
|
+
chromatic:
|
|
65
|
+
name: Chromatic
|
|
66
|
+
runs-on: ubuntu-latest
|
|
67
|
+
needs: [lint, typecheck, build]
|
|
68
|
+
if: github.event_name == 'push'
|
|
69
|
+
|
|
70
|
+
steps:
|
|
71
|
+
- uses: actions/checkout@v5
|
|
72
|
+
with:
|
|
73
|
+
fetch-depth: 0
|
|
74
|
+
|
|
75
|
+
- uses: actions/setup-node@v6
|
|
76
|
+
with:
|
|
77
|
+
node-version: ${{ env.NODE_VERSION }}
|
|
78
|
+
cache: npm
|
|
79
|
+
|
|
80
|
+
- run: npm ci
|
|
81
|
+
|
|
82
|
+
- name: Publish to Chromatic
|
|
83
|
+
uses: chromaui/action@latest
|
|
84
|
+
with:
|
|
85
|
+
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
|
86
|
+
buildScriptName: build-storybook
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [Unreleased]
|
|
9
|
+
|
|
10
|
+
## [0.1.0](https://github.com/MicroClub-USTHB/mcoli-ui/releases/tag/0.1.0) - 2026-03-29
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Interactive theme selection menu with visual color swatches
|
|
15
|
+
- `init` command to initialize mcoli-ui theme in projects
|
|
16
|
+
- Supports CLI argument (`npx mcoli-ui init <theme>`) and interactive selection
|
|
17
|
+
- Validates shadcn/ui dependency before setup
|
|
18
|
+
- Automatic theme JSON injection from registry
|
|
19
|
+
- `add` command to add mcoli-ui components to projects
|
|
20
|
+
- Supports multiple components: `npx mcoli-ui add mc-button mc-input`
|
|
21
|
+
- Direct integration with shadcn CLI
|
|
22
|
+
- Per-component progress tracking
|
|
23
|
+
- Theme preview with color swatches in terminal
|
|
24
|
+
- Error handling with helpful suggestions
|
|
25
|
+
- Detects missing shadcn/ui setup
|
|
26
|
+
- Validates theme names
|
|
27
|
+
- Clear usage instructions
|
|
28
|
+
- Support for 5 themes:
|
|
29
|
+
- Primary: Professional blue (#0006B1)
|
|
30
|
+
- Secondary: Creative purple (#6A0DAD)
|
|
31
|
+
- GameDev: Fun pink & yellow (#D04F99, #FACC15)
|
|
32
|
+
- Robotics: Technical blue (#001EFF)
|
|
33
|
+
- IT: Clean green (#34D399)
|
|
34
|
+
|
|
35
|
+
### Dependencies
|
|
36
|
+
|
|
37
|
+
- `inquirer`: Interactive command-line prompts
|
|
38
|
+
- `ora`: Elegant terminal spinners
|
|
39
|
+
- `chalk`: Terminal string styling
|
|
40
|
+
- `dotenv`: Environment variable loading
|
|
41
|
+
|
|
42
|
+
### Usage
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
# Initialize with a specific theme
|
|
46
|
+
npx mcoli-ui init primary
|
|
47
|
+
|
|
48
|
+
# Initialize with interactive selection
|
|
49
|
+
npx mcoli-ui init
|
|
50
|
+
|
|
51
|
+
# Add components
|
|
52
|
+
npx mcoli-ui add mc-button
|
|
53
|
+
|
|
54
|
+
# Add multiple components
|
|
55
|
+
npx mcoli-ui add mc-button mc-input
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Registry
|
|
59
|
+
|
|
60
|
+
Components are fetched from the mcoli-ui registry:
|
|
61
|
+
|
|
62
|
+
- Default: `https://mcoli-ui.microclub.info`
|
|
63
|
+
- Configurable via `MCOLI_UI_REGISTRY_URL` environment variable
|
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
# Contributing to mcoli-ui
|
|
2
|
+
|
|
3
|
+
This guide covers how to add a new registry item (component, hook, or theme) to the MicroClub registry.
|
|
4
|
+
|
|
5
|
+
## Our Priority
|
|
6
|
+
|
|
7
|
+
**At this stage, our focus is explicitly on implementing remaining planned registry items (components).** We ask that you prioritize these before proposing other features or architectural changes.
|
|
8
|
+
|
|
9
|
+
## Choosing Your Path
|
|
10
|
+
|
|
11
|
+
- **[Internal Contributors](#internal-contributors)**: You have push access to the repository.
|
|
12
|
+
- **[External Contributors](#external-contributors)**: You are an open-source contributor. Fork the repository first, then follow the external guide.
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
# Internal Contributors
|
|
17
|
+
|
|
18
|
+
If you have push access to the repository, follow these steps.
|
|
19
|
+
|
|
20
|
+
## Workflow
|
|
21
|
+
|
|
22
|
+
1. Find an issue labeled with `component` that includes a Figma link
|
|
23
|
+
2. Create a branch from `dev` (naming: `component/mc-<name>`)
|
|
24
|
+
3. Implement the item (e.g., component using `@base-ui/react` primitives)
|
|
25
|
+
4. Create stories, examples, and documentation
|
|
26
|
+
5. Test with Storybook and verify registry build (`npm run build:registry`)
|
|
27
|
+
6. Create a pull request targeting `dev`
|
|
28
|
+
|
|
29
|
+
## Step-by-Step
|
|
30
|
+
|
|
31
|
+
### Step 1: Find an Issue
|
|
32
|
+
|
|
33
|
+
Browse the GitHub issues to find an item to implement. Each issue includes a Figma link with the design specifications. **Please stick to these designs to maintain MicroClub's identity.**
|
|
34
|
+
|
|
35
|
+
### Step 2: Create a Branch
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
git switch dev
|
|
39
|
+
git pull origin dev
|
|
40
|
+
git switch -c component/mc-<name>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Example: `git switch -c component/mc-button`
|
|
44
|
+
|
|
45
|
+
### Step 3: Create the Registry Item
|
|
46
|
+
|
|
47
|
+
Create your component file in `src/registry/ui/mc-<name>.tsx`.
|
|
48
|
+
|
|
49
|
+
- Prefix with `mc-` (e.g., `mc-button.tsx`)
|
|
50
|
+
- Use `@base-ui/react` primitives for high-quality, accessible building blocks
|
|
51
|
+
- Utilize Tailwind CSS v4 for styling
|
|
52
|
+
|
|
53
|
+
Example file: [`src/registry/ui/mc-button.tsx`](src/registry/ui/mc-button.tsx)
|
|
54
|
+
|
|
55
|
+
### Step 4: Register the Item
|
|
56
|
+
|
|
57
|
+
Edit [`src/registry/registry-ui.ts`](src/registry/registry-ui.ts) and add your entry. This metadata allows the shadcn-based CLI to discover and distribute your code.
|
|
58
|
+
|
|
59
|
+
### Step 5: Create Demo
|
|
60
|
+
|
|
61
|
+
Create a demo for the documentation in `src/registry/examples/mc-<name>-demo.tsx`.
|
|
62
|
+
|
|
63
|
+
Example file: [`src/registry/examples/mc-button-demo.tsx`](src/registry/examples/mc-button-demo.tsx)
|
|
64
|
+
|
|
65
|
+
### Step 6: Create Storybook Story
|
|
66
|
+
|
|
67
|
+
Create a story in `src/stories/Mc<Name>.stories.tsx` for visual testing and regression checks.
|
|
68
|
+
|
|
69
|
+
Example file: [`src/stories/McButton.stories.tsx`](src/stories/McButton.stories.tsx)
|
|
70
|
+
|
|
71
|
+
### Step 7: Create Documentation
|
|
72
|
+
|
|
73
|
+
Create an MDX file in `src/content/docs/components/mc-<name>.mdx` using Fumadocs components.
|
|
74
|
+
|
|
75
|
+
Example file: [`src/content/docs/components/mc-button.mdx`](src/content/docs/components/mc-button.mdx)
|
|
76
|
+
|
|
77
|
+
### Step 8: Build and Test
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
# Build the registry metadata (registry.json)
|
|
81
|
+
npm run build:registry
|
|
82
|
+
|
|
83
|
+
# Run storybook for visual verification
|
|
84
|
+
npm run storybook
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Step 9: Create a Pull Request
|
|
88
|
+
|
|
89
|
+
```bash
|
|
90
|
+
git add .
|
|
91
|
+
git commit -m "feat: add mc-<name> component"
|
|
92
|
+
git push -u origin component/mc-<name>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Create a PR targeting `dev`. Link the issue (e.g., `Closes #42`) in your description.
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
# External Contributors
|
|
100
|
+
|
|
101
|
+
External contributors should follow the same technical steps but start with a fork.
|
|
102
|
+
|
|
103
|
+
## Workflow
|
|
104
|
+
|
|
105
|
+
1. Fork the repository on GitHub
|
|
106
|
+
2. Clone your fork: `git clone https://github.com/YOUR_USERNAME/mcoli-ui.git`
|
|
107
|
+
3. Add upstream: `git remote add upstream https://github.com/MicroClub-USTHB/mcoli-ui.git`
|
|
108
|
+
4. Follow the **Internal Contributors** steps from Step 2 onwards, using `upstream` to pull.
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
# Registry Item Summary
|
|
113
|
+
|
|
114
|
+
When adding a new item, you will create/edit these files:
|
|
115
|
+
|
|
116
|
+
| File | Purpose |
|
|
117
|
+
| ---------------------------------------------------------------------------------------- | ----------------------------- |
|
|
118
|
+
| [`src/registry/ui/mc-<name>.tsx`](src/registry/ui/mc-button.tsx) | The actual code to distribute |
|
|
119
|
+
| [`src/registry/registry-ui.ts`](src/registry/registry-ui.ts) | Metadata for CLI discovery |
|
|
120
|
+
| [`src/registry/examples/mc-<name>-demo.tsx`](src/registry/examples/mc-button-demo.tsx) | Live demo for documentation |
|
|
121
|
+
| [`src/stories/Mc<Name>.stories.tsx`](src/stories/McButton.stories.tsx) | Visual testing in Storybook |
|
|
122
|
+
| [`src/content/docs/components/mc-<name>.mdx`](src/content/docs/components/mc-button.mdx) | Markdown documentation |
|
|
123
|
+
|
|
124
|
+
### Planned Components
|
|
125
|
+
|
|
126
|
+
| Component | Design State | Dev State |
|
|
127
|
+
| -------------------- | ------------ | --------- |
|
|
128
|
+
| `mc-button` | ✅ | ✅ |
|
|
129
|
+
| `mc-input` | ✅ | |
|
|
130
|
+
| `mc-textarea` | ✅ | |
|
|
131
|
+
| `mc-input-otp` | ✅ | |
|
|
132
|
+
| `mc-checkbox` | ✅ | |
|
|
133
|
+
| `mc-radio-group` | ✅ | |
|
|
134
|
+
| `mc-card` | ✅ | |
|
|
135
|
+
| `mc-select` | ✅ | |
|
|
136
|
+
| `mc-combobox` | ✅ | |
|
|
137
|
+
| `mc-switch` | ✅ | |
|
|
138
|
+
| `mc-navigation-menu` | ✅ | |
|
|
139
|
+
| `mc-sidebar` | ✅ | |
|
|
140
|
+
| `mc-tabs` | ✅ | |
|
|
141
|
+
| `mc-breadcrumb` | ✅ | |
|
|
142
|
+
| `mc-pagination` | ✅ | |
|
|
143
|
+
| `mc-dialog` | | |
|
|
144
|
+
| `mc-alert-dialog` | | |
|
|
145
|
+
| `mc-alert` | | |
|
|
146
|
+
| `mc-sonner` | | |
|
|
147
|
+
| `mc-tooltip` | | |
|
|
148
|
+
| `mc-popover` | | |
|
|
149
|
+
| `mc-dropdown-menu` | | |
|
|
150
|
+
| `mc-context-menu` | | |
|
|
151
|
+
| `mc-data-table` | | |
|
|
152
|
+
| `mc-accordion` | | |
|
|
153
|
+
| `mc-collapsible` | | |
|
|
154
|
+
| `mc-separator` | | |
|
|
155
|
+
| `mc-progress` | | |
|
|
156
|
+
| `mc-calendar` | | |
|
|
157
|
+
| `mc-scrollarea` | | |
|
|
158
|
+
| `mc-skeleton` | | |
|
|
159
|
+
| `mc-badge` | | |
|
|
160
|
+
| `mc-tag` | | |
|
|
161
|
+
| `mc-avatar` | | |
|
|
162
|
+
| `mc-drawer` | | |
|
|
163
|
+
| `mc-hover-card` | | |
|
|
164
|
+
| `mc-slider` | | |
|
|
165
|
+
| `mc-carousel` | | |
|
|
166
|
+
|
|
167
|
+
# Important Notes
|
|
168
|
+
|
|
169
|
+
- **Distribution First**: Remember that this code will be copied into user's projects. Keep it clean and self-contained.
|
|
170
|
+
- **Figma First**: Always refer to the designs in Figma for colors, spacing, and variants.
|
|
171
|
+
- **Prefix Everything**: All registry items MUST use the `mc-` prefix.
|
|
172
|
+
- **Base UI**: Use `@base-ui/react` for underlying logic to ensure accessibility.
|
|
173
|
+
- **Themes and Modes**: Every item must be tested in all 5 themes in both light and dark modes.
|
|
174
|
+
- **Build Verification**: Ensure `npm run build:registry` passes before submitting.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 MicroClub
|
|
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,94 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="./public/logo-light.svg" alt="mcoli-ui light" width="360" style="margin-right: 32px;" />
|
|
3
|
+
<img src="./public/logo-dark.svg" alt="mcoli-ui dark" width="360" />
|
|
4
|
+
</p>
|
|
5
|
+
|
|
6
|
+
<p align="center">
|
|
7
|
+
<b>Stop building from scratch. Elevate your UI with MicroClub DNA.</b>
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
<p align="center">
|
|
11
|
+
<a href="https://github.com/MicroClub-USTHB/mcoli-ui/stargazers">
|
|
12
|
+
<img src="https://img.shields.io/github/stars/MicroClub-USTHB/mcoli-ui?style=flat" alt="stars" />
|
|
13
|
+
</a>
|
|
14
|
+
<a href="https://github.com/MicroClub-USTHB/mcoli-ui/issues">
|
|
15
|
+
<img src="https://img.shields.io/github/issues/MicroClub-USTHB/mcoli-ui" alt="issues" />
|
|
16
|
+
</a>
|
|
17
|
+
<a href="https://github.com/MicroClub-USTHB/mcoli-ui/blob/main/LICENSE">
|
|
18
|
+
<img src="https://img.shields.io/github/license/MicroClub-USTHB/mcoli-ui" alt="license" />
|
|
19
|
+
</a>
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
## Build Faster. Design Better.
|
|
25
|
+
|
|
26
|
+
**mcoli-ui** is the premier React component library that brings professional-grade UI components with a bold **MicroClub DNA** to developers everywhere. We’ve combined world-class design standards with an elite visual identity to help you build stunning web applications in record time.
|
|
27
|
+
|
|
28
|
+
Stop fighting with generic components. **Infuse your project with signature UI.**
|
|
29
|
+
|
|
30
|
+
### Why Developers Choose mcoli-ui:
|
|
31
|
+
|
|
32
|
+
- **Elite Visual Identity**: 5 custom-engineered themes (Primary, Secondary, Game Dev, Robotics, IT) infused with our signature DNA.
|
|
33
|
+
- **Instant Deployment**: Inject high-performance components directly into your workspace with a single command.
|
|
34
|
+
- **Rock-Solid Accessibility**: Built on top of **@base-ui/react** for world-class accessible primitives and behavior.
|
|
35
|
+
- **Peak Performance**: Optimized for the future with **Next.js 16**, **Tailwind CSS v4**, and **TypeScript 6**.
|
|
36
|
+
- **Ultimate Customization**: Your code, your vision. Since components are copied directly to your project, you have 100% control.
|
|
37
|
+
|
|
38
|
+
## Quick Start
|
|
39
|
+
|
|
40
|
+
### 1. Ready your Project
|
|
41
|
+
|
|
42
|
+
mcoli-ui integrates with the industry-standard shadcn workflow. Ensure your framework is set up:
|
|
43
|
+
|
|
44
|
+
- **New Projects**: Launch with [shadcn/create](https://ui.shadcn.com/create) for a perfect start.
|
|
45
|
+
- **CLI**: Run `npx shadcn@latest init -t [framework]` (supports `next`, `vite`, `start`, `react-router`, and `astro`).
|
|
46
|
+
- **Existing Projects**: Add the foundation via the [official installation guide](https://ui.shadcn.com/docs/installation).
|
|
47
|
+
|
|
48
|
+
```bash
|
|
49
|
+
npx shadcn@latest init
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 2. Ignite mcoli-ui
|
|
53
|
+
|
|
54
|
+
Initialize the library and unlock our exclusive theme engine:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npx mcoli-ui@latest init
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### 3. Add Your First Component
|
|
61
|
+
|
|
62
|
+
Grab a premium component and start building:
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
npx mcoli-ui@latest add mc-button
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## The Library Advantage
|
|
69
|
+
|
|
70
|
+
mcoli-ui is more than just a registry; it’s a **Professional Component Library** designed for the modern web.
|
|
71
|
+
|
|
72
|
+
1. **Signature Design**: Every pixel is aligned with MicroClub's high design standards.
|
|
73
|
+
2. **Built for Performance**: No bulk. No unused dependencies. Just the code you need to shine.
|
|
74
|
+
3. **Inclusive UI**: We handle the complex ARIA and keyboard logic so you don't have to.
|
|
75
|
+
|
|
76
|
+
## Tech Stack
|
|
77
|
+
|
|
78
|
+
<div align="center">
|
|
79
|
+
<img src="https://img.shields.io/badge/Next.js_16-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js" />
|
|
80
|
+
<img src="https://img.shields.io/badge/Tailwind_CSS_v4-38BDF8?style=for-the-badge&logo=tailwind-css&logoColor=white" alt="Tailwind" />
|
|
81
|
+
<img src="https://img.shields.io/badge/TypeScript_6-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
|
|
82
|
+
<img src="https://img.shields.io/badge/Base_UI-000000?style=for-the-badge&logo=mui&logoColor=white" alt="Base UI" />
|
|
83
|
+
<img src="https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook" />
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
## Join the Mission
|
|
87
|
+
|
|
88
|
+
We’re on a quest to build the ultimate UI toolkit. Contribute your components and help us set a new standard. See [CONTRIBUTING.md](CONTRIBUTING.md).
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
<p align="center">
|
|
93
|
+
Developed with passion by the <b>Dev Department</b> of <a href="https://microclub.info">MicroClub</a>
|
|
94
|
+
</p>
|
package/RELEASE_GUIDE.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# Release Guide
|
|
2
|
+
|
|
3
|
+
This guide outlines the step-by-step process to publish a new version of mcoli-ui to npm.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Prerequisites
|
|
8
|
+
|
|
9
|
+
- npm account with publish access to the `mcoli-ui` package
|
|
10
|
+
- GitHub repository access
|
|
11
|
+
- Node.js and npm installed
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Pre-Release Checklist
|
|
16
|
+
|
|
17
|
+
### 1. Update Version
|
|
18
|
+
|
|
19
|
+
Update the version in `package.json` following [Semantic Versioning](https://semver.org/):
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
# Major version (breaking changes)
|
|
23
|
+
npm version major
|
|
24
|
+
|
|
25
|
+
# Minor version (new features)
|
|
26
|
+
npm version minor
|
|
27
|
+
|
|
28
|
+
# Patch version (bug fixes)
|
|
29
|
+
npm version patch
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
This will automatically:
|
|
33
|
+
- Update `version` in `package.json`
|
|
34
|
+
- Create a git tag (e.g., `v0.1.0`)
|
|
35
|
+
|
|
36
|
+
### 2. Update CHANGELOG.md
|
|
37
|
+
|
|
38
|
+
Before publishing, move changes from `[Unreleased]` section to the new version:
|
|
39
|
+
|
|
40
|
+
1. Open `CHANGELOG.md`
|
|
41
|
+
2. Copy all changes from `[Unreleased]` section
|
|
42
|
+
3. Create a new section with the new version and date:
|
|
43
|
+
|
|
44
|
+
```markdown
|
|
45
|
+
## [0.2.0] - 2026-03-30
|
|
46
|
+
|
|
47
|
+
### Added
|
|
48
|
+
- Your new features here
|
|
49
|
+
|
|
50
|
+
### Changed
|
|
51
|
+
- Your changes here
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
4. Clear the `[Unreleased]` section
|
|
55
|
+
|
|
56
|
+
### 3. Update Registry (if needed)
|
|
57
|
+
|
|
58
|
+
If you've added, removed, or modified components, rebuild the registry:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
npm run build:registry
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
This will regenerate:
|
|
65
|
+
- `src/__registry__/index.tsx`
|
|
66
|
+
- `src/__registry__/registry.autogenerated.json`
|
|
67
|
+
- `public/r/registry.json`
|
|
68
|
+
|
|
69
|
+
### 4. Test the Build
|
|
70
|
+
|
|
71
|
+
Ensure everything builds correctly:
|
|
72
|
+
|
|
73
|
+
```bash
|
|
74
|
+
npm run build
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### 5. Run Tests
|
|
78
|
+
|
|
79
|
+
Run the test suite to ensure nothing is broken:
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
npm test
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### 6. Commit Changes
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
git add .
|
|
89
|
+
git commit -m "Release v0.2.0"
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### 7. Push Changes and Tag
|
|
93
|
+
|
|
94
|
+
```bash
|
|
95
|
+
git push origin main
|
|
96
|
+
git push origin v0.2.0
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## Publishing
|
|
102
|
+
|
|
103
|
+
### 1. Login to npm
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
npm login
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Enter your npm credentials when prompted.
|
|
110
|
+
|
|
111
|
+
### 2. Publish to npm
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
npm publish
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
For a dry run (recommended first time):
|
|
118
|
+
|
|
119
|
+
```bash
|
|
120
|
+
npm publish --dry-run
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
---
|
|
124
|
+
|
|
125
|
+
## Post-Release
|
|
126
|
+
|
|
127
|
+
### 1. Verify Publication
|
|
128
|
+
|
|
129
|
+
Check that the package is live:
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
npm view mcoli-ui version
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### 2. Create GitHub Release
|
|
136
|
+
|
|
137
|
+
1. Go to [GitHub Releases](https://github.com/anomalyco/mcoli-ui/releases)
|
|
138
|
+
2. Click "Draft a new release"
|
|
139
|
+
3. Select the new tag
|
|
140
|
+
4. Copy the relevant section from `CHANGELOG.md` as release notes
|
|
141
|
+
5. Publish release
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## Quick Reference
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
# Full release workflow
|
|
149
|
+
npm version patch # Update version
|
|
150
|
+
# Update CHANGELOG.md
|
|
151
|
+
git add .
|
|
152
|
+
git commit -m "Release v0.1.1"
|
|
153
|
+
git push origin main
|
|
154
|
+
git push origin v0.1.1
|
|
155
|
+
npm publish
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
---
|
|
159
|
+
|
|
160
|
+
## Version Types
|
|
161
|
+
|
|
162
|
+
| Type | When to use | Example |
|
|
163
|
+
|------|-------------|---------|
|
|
164
|
+
| **patch** | Bug fixes, small improvements | 0.1.0 → 0.1.1 |
|
|
165
|
+
| **minor** | New features, backwards compatible | 0.1.0 → 0.2.0 |
|
|
166
|
+
| **major** | Breaking changes | 0.1.0 → 1.0.0 |
|
|
167
|
+
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## Troubleshooting
|
|
171
|
+
|
|
172
|
+
### Package name conflict
|
|
173
|
+
|
|
174
|
+
If you get an error about the package name, make sure you're publishing to the correct scope:
|
|
175
|
+
|
|
176
|
+
```bash
|
|
177
|
+
npm publish --access public
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
### Authentication issues
|
|
181
|
+
|
|
182
|
+
Ensure you're logged in to the correct npm account:
|
|
183
|
+
|
|
184
|
+
```bash
|
|
185
|
+
npm whoami
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### Build errors
|
|
189
|
+
|
|
190
|
+
Clear the build cache and rebuild:
|
|
191
|
+
|
|
192
|
+
```bash
|
|
193
|
+
rm -rf .next
|
|
194
|
+
npm run build
|
|
195
|
+
```
|
package/cli/index.js
ADDED
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
import { config } from "dotenv";
|
|
4
|
+
import { execSync } from "node:child_process";
|
|
5
|
+
import { existsSync } from "node:fs";
|
|
6
|
+
import { join } from "node:path";
|
|
7
|
+
import inquirer from "inquirer";
|
|
8
|
+
import ora from "ora";
|
|
9
|
+
import chalk from "chalk";
|
|
10
|
+
|
|
11
|
+
config();
|
|
12
|
+
|
|
13
|
+
const themes = [
|
|
14
|
+
{
|
|
15
|
+
name: "Primary",
|
|
16
|
+
value: "primary",
|
|
17
|
+
description: "Professional and modern",
|
|
18
|
+
colors: ["#0006B1", "#E6E9FF"],
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: "Secondary",
|
|
22
|
+
value: "secondary",
|
|
23
|
+
description: "Creative and bold",
|
|
24
|
+
colors: ["#6A0DAD", "#FDDDFF"],
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: "GameDev",
|
|
28
|
+
value: "game-dev",
|
|
29
|
+
description: "Fun and energetic",
|
|
30
|
+
colors: ["#D04F99", "#FACC15"],
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
name: "Robotics",
|
|
34
|
+
value: "robotics",
|
|
35
|
+
description: "Technical and precise",
|
|
36
|
+
colors: ["#001EFF", "#0006B1"],
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: "IT",
|
|
40
|
+
value: "it",
|
|
41
|
+
description: "Clean and professional",
|
|
42
|
+
colors: ["#34D399", "#BEFFD4"],
|
|
43
|
+
},
|
|
44
|
+
];
|
|
45
|
+
|
|
46
|
+
const validThemeValues = themes.map((t) => t.value);
|
|
47
|
+
|
|
48
|
+
const REGISTRY_URL =
|
|
49
|
+
process.env.MCOLI_UI_REGISTRY_URL || "https://mcoli-ui.microclub.info";
|
|
50
|
+
|
|
51
|
+
const args = process.argv.slice(2);
|
|
52
|
+
|
|
53
|
+
if (args.length < 1) {
|
|
54
|
+
console.log("Usage: npx mcoli-ui <command>");
|
|
55
|
+
console.log("Commands:");
|
|
56
|
+
console.log(
|
|
57
|
+
" init [theme] Initialize mcoli-ui theme (requires shadcn/ui)",
|
|
58
|
+
);
|
|
59
|
+
console.log(" add [...packages] Add mcoli-ui components");
|
|
60
|
+
console.log("\nAvailable themes:");
|
|
61
|
+
themes.forEach((theme) => {
|
|
62
|
+
console.log(` ${chalk.cyan(theme.value.padEnd(12))} ${theme.description}`);
|
|
63
|
+
});
|
|
64
|
+
console.log(`\nRegistry URL: ${chalk.gray(REGISTRY_URL)}`);
|
|
65
|
+
process.exit(1);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
const command = args[0];
|
|
69
|
+
|
|
70
|
+
if (command === "init") {
|
|
71
|
+
handleInit(args.slice(1));
|
|
72
|
+
} else if (command === "add") {
|
|
73
|
+
handleAdd(args.slice(1));
|
|
74
|
+
} else {
|
|
75
|
+
console.log(`Unknown command: ${command}`);
|
|
76
|
+
console.log("Usage: npx mcoli-ui <command>");
|
|
77
|
+
console.log("Commands:");
|
|
78
|
+
console.log(
|
|
79
|
+
" init [theme] Initialize mcoli-ui theme (requires shadcn/ui)",
|
|
80
|
+
);
|
|
81
|
+
console.log(" add [...packages] Add mcoli-ui components");
|
|
82
|
+
process.exit(1);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function createColorSwatch(hexColors) {
|
|
86
|
+
return hexColors.map((hex) => chalk.bgHex(hex)(" ")).join("");
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
async function interactiveThemeSelect() {
|
|
90
|
+
const choices = themes.map((theme, index) => ({
|
|
91
|
+
name: `${index + 1}. ${theme.name.padEnd(10)} ${createColorSwatch(theme.colors)} ${theme.description}`,
|
|
92
|
+
value: theme.value,
|
|
93
|
+
short: theme.name,
|
|
94
|
+
}));
|
|
95
|
+
|
|
96
|
+
const answer = await inquirer.prompt([
|
|
97
|
+
{
|
|
98
|
+
type: "select",
|
|
99
|
+
name: "theme",
|
|
100
|
+
message: "Select an mcoli-ui theme:",
|
|
101
|
+
choices,
|
|
102
|
+
default: "primary",
|
|
103
|
+
loop: false,
|
|
104
|
+
},
|
|
105
|
+
]);
|
|
106
|
+
|
|
107
|
+
return answer.theme;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
function handleInit(themeArgs) {
|
|
111
|
+
const componentsJsonPath = join(process.cwd(), "components.json");
|
|
112
|
+
|
|
113
|
+
if (!existsSync(componentsJsonPath)) {
|
|
114
|
+
console.error(
|
|
115
|
+
`${chalk.red("Error:")} ${chalk.bold("shadcn/ui")} is required but not initialized.`,
|
|
116
|
+
);
|
|
117
|
+
console.log("\nPlease initialize shadcn/ui first:");
|
|
118
|
+
console.log(` ${chalk.cyan("npx shadcn@latest init")}\n`);
|
|
119
|
+
console.log(
|
|
120
|
+
"For more information, visit: " +
|
|
121
|
+
chalk.underline("https://ui.shadcn.com/docs/installation"),
|
|
122
|
+
);
|
|
123
|
+
process.exit(1);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
const checkSpinner = ora(
|
|
127
|
+
`${chalk.green("✓")} shadcn/ui found, proceeding with mcoli-ui theme...`,
|
|
128
|
+
).start();
|
|
129
|
+
checkSpinner.succeed("shadcn/ui configuration detected");
|
|
130
|
+
|
|
131
|
+
const selectedThemeArg = themeArgs[0]?.toLowerCase();
|
|
132
|
+
|
|
133
|
+
if (selectedThemeArg && validThemeValues.includes(selectedThemeArg)) {
|
|
134
|
+
const theme = themes.find((t) => t.value === selectedThemeArg);
|
|
135
|
+
const themeName = theme?.name || selectedThemeArg;
|
|
136
|
+
|
|
137
|
+
checkSpinner.info(`Theme selected: ${chalk.cyan(themeName)}`);
|
|
138
|
+
|
|
139
|
+
addTheme(selectedThemeArg, themeName);
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
if (selectedThemeArg && !validThemeValues.includes(selectedThemeArg)) {
|
|
144
|
+
console.error(
|
|
145
|
+
`${chalk.red("Error:")} Invalid theme "${chalk.bold(selectedThemeArg)}"`,
|
|
146
|
+
);
|
|
147
|
+
console.log("\nAvailable themes:");
|
|
148
|
+
themes.forEach((theme, index) => {
|
|
149
|
+
console.log(
|
|
150
|
+
` ${chalk.cyan(String(index + 1).padStart(2) + ".")} ${chalk.bold(theme.name.padEnd(12))} ${createColorSwatch(theme.colors)} ${theme.description}`,
|
|
151
|
+
);
|
|
152
|
+
});
|
|
153
|
+
console.log("\nOr run without arguments for interactive selection.");
|
|
154
|
+
process.exit(1);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
interactiveThemeSelect()
|
|
158
|
+
.then((selectedTheme) => {
|
|
159
|
+
const theme = themes.find((t) => t.value === selectedTheme);
|
|
160
|
+
const themeName = theme?.name || selectedTheme;
|
|
161
|
+
addTheme(selectedTheme, themeName);
|
|
162
|
+
})
|
|
163
|
+
.catch((error) => {
|
|
164
|
+
console.error("Error during theme selection:", error);
|
|
165
|
+
process.exit(1);
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
function addTheme(themeValue, themeName) {
|
|
170
|
+
const themeSpinner = ora(
|
|
171
|
+
`Adding ${chalk.yellow(themeName)} mcoli-ui theme...`,
|
|
172
|
+
).start();
|
|
173
|
+
try {
|
|
174
|
+
execSync(`npx shadcn@latest add ${REGISTRY_URL}/r/${themeValue}.json`, {
|
|
175
|
+
stdio: "inherit",
|
|
176
|
+
});
|
|
177
|
+
themeSpinner.succeed(
|
|
178
|
+
`Successfully added ${chalk.green(themeName)} mcoli-ui theme`,
|
|
179
|
+
);
|
|
180
|
+
} catch (error) {
|
|
181
|
+
themeSpinner.fail(`Failed to add ${chalk.red(themeName)} theme`);
|
|
182
|
+
console.error(`Error adding ${themeName} theme:`, error);
|
|
183
|
+
process.exit(1);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
const completeSpinner = ora("Finalizing mcoli-ui setup...").start();
|
|
187
|
+
completeSpinner.succeed("mcoli-ui theme setup complete!");
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
function handleAdd(packageNames) {
|
|
191
|
+
const componentsJsonPath = join(process.cwd(), "components.json");
|
|
192
|
+
|
|
193
|
+
if (!existsSync(componentsJsonPath)) {
|
|
194
|
+
console.error(
|
|
195
|
+
`${chalk.red("Error:")} ${chalk.bold("shadcn/ui")} is required but not initialized.`,
|
|
196
|
+
);
|
|
197
|
+
console.log("\nPlease initialize shadcn/ui first:");
|
|
198
|
+
console.log(` ${chalk.cyan("npx shadcn@latest init")}\n`);
|
|
199
|
+
console.log(
|
|
200
|
+
"For more information, visit: " +
|
|
201
|
+
chalk.underline("https://ui.shadcn.com/docs/installation"),
|
|
202
|
+
);
|
|
203
|
+
process.exit(1);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
if (packageNames.length === 0) {
|
|
207
|
+
console.log("Usage: npx mcoli-ui add [...packages]");
|
|
208
|
+
process.exit(1);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
for (const packageName of packageNames) {
|
|
212
|
+
if (!packageName.trim()) {
|
|
213
|
+
continue;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
const addSpinner = ora(
|
|
217
|
+
`Adding ${chalk.yellow(packageName)} mcoli-ui component...`,
|
|
218
|
+
).start();
|
|
219
|
+
|
|
220
|
+
try {
|
|
221
|
+
const url = new URL(`r/${packageName}.json`, REGISTRY_URL);
|
|
222
|
+
|
|
223
|
+
execSync(`npx shadcn@latest add ${url.toString()}`, {
|
|
224
|
+
stdio: "inherit",
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
addSpinner.succeed(
|
|
228
|
+
`Successfully added ${chalk.green(packageName)} component`,
|
|
229
|
+
);
|
|
230
|
+
} catch (error) {
|
|
231
|
+
addSpinner.fail(`Failed to add ${chalk.red(packageName)} component`);
|
|
232
|
+
console.error(
|
|
233
|
+
`Error adding ${chalk.red(packageName)}:`,
|
|
234
|
+
error instanceof Error ? error.message : String(error),
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "mcoli-ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"bin": {
|
|
7
|
+
"mcoli-ui": "cli/index.js"
|
|
8
|
+
},
|
|
9
|
+
"author": {
|
|
10
|
+
"name": "HADJ ARAB Adel",
|
|
11
|
+
"email": "hadjarabadel.2411@gmail.com",
|
|
12
|
+
"url": "https://mcoli-ui.microclub.info/"
|
|
13
|
+
},
|
|
14
|
+
"overrides": {
|
|
15
|
+
"glob": "^13.0.0",
|
|
16
|
+
"inflight": "^3.0.0"
|
|
17
|
+
},
|
|
18
|
+
"scripts": {
|
|
19
|
+
"dev": "next dev --turbopack",
|
|
20
|
+
"build": "npm-run-all build:registry build:docs build:prod",
|
|
21
|
+
"build:registry": "npm-run-all build:registry:internal build:registry:external",
|
|
22
|
+
"build:registry:internal": "tsx --tsconfig ./tsconfig.scripts.json ./src/scripts/build-registry.mts",
|
|
23
|
+
"build:registry:external": "shadcn build ./src/__registry__/registry.autogenerated.json",
|
|
24
|
+
"build:docs": "fumadocs-mdx",
|
|
25
|
+
"build:prod": "next build",
|
|
26
|
+
"start": "next start",
|
|
27
|
+
"lint": "eslint .",
|
|
28
|
+
"typecheck": "tsc --noEmit",
|
|
29
|
+
"postinstall": "fumadocs-mdx",
|
|
30
|
+
"storybook": "storybook dev -p 6006",
|
|
31
|
+
"build-storybook": "storybook build"
|
|
32
|
+
},
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"@base-ui/react": "^1.3.0",
|
|
35
|
+
"@types/inquirer": "^9.0.9",
|
|
36
|
+
"chalk": "^5.6.2",
|
|
37
|
+
"class-variance-authority": "^0.7.1",
|
|
38
|
+
"clsx": "^2.1.1",
|
|
39
|
+
"fumadocs-core": "^16.7.7",
|
|
40
|
+
"fumadocs-mdx": "^14.2.11",
|
|
41
|
+
"fumadocs-ui": "^16.7.7",
|
|
42
|
+
"inquirer": "^13.3.2",
|
|
43
|
+
"lucide-react": "^1.7.0",
|
|
44
|
+
"next": "^16.2.1",
|
|
45
|
+
"ora": "^9.3.0",
|
|
46
|
+
"react": "^19.2.4",
|
|
47
|
+
"react-dom": "^19.2.4",
|
|
48
|
+
"tailwind-merge": "^3.5.0"
|
|
49
|
+
},
|
|
50
|
+
"devDependencies": {
|
|
51
|
+
"@chromatic-com/storybook": "^5.1.1",
|
|
52
|
+
"@eslint/eslintrc": "^3",
|
|
53
|
+
"@storybook/addon-a11y": "^10.3.3",
|
|
54
|
+
"@storybook/nextjs": "^10.3.3",
|
|
55
|
+
"@storybook/nextjs-vite": "^10.3.3",
|
|
56
|
+
"@tailwindcss/postcss": "^4",
|
|
57
|
+
"@types/mdx": "^2.0.13",
|
|
58
|
+
"@types/node": "^25",
|
|
59
|
+
"@types/react": "^19",
|
|
60
|
+
"@types/react-dom": "^19",
|
|
61
|
+
"baseline-browser-mapping": "^2.10.11",
|
|
62
|
+
"chromatic": "^16.0.0",
|
|
63
|
+
"dotenv": "^17.3.1",
|
|
64
|
+
"eslint": "^9",
|
|
65
|
+
"eslint-config-next": "^16.2.1",
|
|
66
|
+
"eslint-plugin-storybook": "^10.3.3",
|
|
67
|
+
"npm-run-all": "^4.1.5",
|
|
68
|
+
"rimraf": "^6.1.3",
|
|
69
|
+
"shadcn": "^4.1.1",
|
|
70
|
+
"storybook": "^10.3.3",
|
|
71
|
+
"tailwindcss": "^4",
|
|
72
|
+
"tsx": "^4.21.0",
|
|
73
|
+
"tw-animate-css": "^1.4.0",
|
|
74
|
+
"typescript": "^5.7.2"
|
|
75
|
+
}
|
|
76
|
+
}
|