@citron-systems/citron-ui 1.0.0 → 1.0.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 +21 -21
- package/README.md +67 -75
- package/package.json +75 -75
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Citron Systems
|
|
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.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Citron Systems
|
|
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
CHANGED
|
@@ -1,75 +1,67 @@
|
|
|
1
|
-
# Citron UI
|
|
2
|
-
|
|
3
|
-
The core UI component library for the company CRM. A collection of accessible, design-token-driven React components built with consistency and scalability in mind.
|
|
4
|
-
|
|
5
|
-
## Architecture
|
|
6
|
-
|
|
7
|
-
The project consumes design tokens from the **@citron-systems/citron-ds** NPM package. The package provides CSS variables (e.g. `var(--inkblot-semantic-color-*)`) which are activated via `@import '@citron-systems/citron-ds/css'` in the main CSS entry point. All components use **semantic tokens only**—never primitives—ensuring automatic dark mode support via `[data-theme="dark"]` and alignment with WCAG AAA standards. Spacing and border-radius from the package are mapped into Tailwind's theme via `src/utils/inkblotTheme.ts`.
|
|
8
|
-
|
|
9
|
-
## Tech Stack
|
|
10
|
-
|
|
11
|
-
- React
|
|
12
|
-
- TypeScript
|
|
13
|
-
- Vite (Library Mode for bundling)
|
|
14
|
-
- Tailwind CSS
|
|
15
|
-
- Storybook (Vite builder)
|
|
16
|
-
- tsup
|
|
17
|
-
- @citron-systems/citron-ds
|
|
18
|
-
|
|
19
|
-
## Project Structure
|
|
20
|
-
|
|
21
|
-
| Path | Purpose |
|
|
22
|
-
|------|---------|
|
|
23
|
-
| `src/components` | React components. Each component lives in its own folder with the component file and optional stories. |
|
|
24
|
-
| `src/utils/inkblotTheme.ts` | Maps @citron-systems/citron-ds resolved tokens (Inkblot prefix) to Tailwind spacing and borderRadius. |
|
|
25
|
-
| `src/index.ts` | Library entry point. Exports all public components and their types. |
|
|
26
|
-
|
|
27
|
-
## Development Workflow
|
|
28
|
-
|
|
29
|
-
**Run the preview**
|
|
30
|
-
|
|
31
|
-
```bash
|
|
32
|
-
npm run dev
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Starts Storybook on `http://localhost:6006`. Use it to develop and document components in isolation.
|
|
36
|
-
|
|
37
|
-
**Build the library**
|
|
38
|
-
|
|
39
|
-
```bash
|
|
40
|
-
npm run build
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Uses tsup to bundle the library. Output is written to the `dist` folder.
|
|
44
|
-
|
|
45
|
-
## Library Consumption
|
|
46
|
-
|
|
47
|
-
The build produces artifacts in the `dist` folder:
|
|
48
|
-
|
|
49
|
-
- `dist/index.js` (CommonJS)
|
|
50
|
-
- `dist/index.mjs` (ESM)
|
|
51
|
-
- `dist/index.d.ts` (TypeScript definitions)
|
|
52
|
-
|
|
53
|
-
Consumers must import the design system CSS and can optionally set `data-theme="dark"` on a parent element for dark mode. Ensure `react` and `react-dom` are peer dependencies in your project.
|
|
54
|
-
|
|
55
|
-
## Publishing (CI/CD)
|
|
56
|
-
|
|
57
|
-
Pushes to `main` automatically publish to npm via GitHub Actions. Version bumps follow [Conventional Commits](https://www.conventionalcommits.org/):
|
|
58
|
-
|
|
59
|
-
- **patch** – `fix:`, `chore:`, `docs:`, `style:`, `refactor:`, `perf:`, `test:`
|
|
60
|
-
- **minor** – `feat:`
|
|
61
|
-
- **major** – `feat!:`, `fix!:`, or `BREAKING CHANGE` in commit body
|
|
62
|
-
|
|
63
|
-
**Setup (one-time):**
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
4. Enter:
|
|
69
|
-
- **Organization or user:** `Inkblot-Studio` (or your GitHub org/user)
|
|
70
|
-
- **Repository:** `citron-ui`
|
|
71
|
-
- **Workflow filename:** `publish.yml`
|
|
72
|
-
|
|
73
|
-
## Guidelines
|
|
74
|
-
|
|
75
|
-
All new components **must** use semantic tokens from @citron-systems/citron-ds via CSS variables (e.g. `var(--inkblot-semantic-color-interactive-primary)`). Never use primitives or hardcoded colors. Follow the Principles of Radical Clarity and use semantic tokens for all states (hover, focus, disabled, error). Components automatically support dark mode when `[data-theme="dark"]` is applied.
|
|
1
|
+
# Citron UI
|
|
2
|
+
|
|
3
|
+
The core UI component library for the company CRM. A collection of accessible, design-token-driven React components built with consistency and scalability in mind.
|
|
4
|
+
|
|
5
|
+
## Architecture
|
|
6
|
+
|
|
7
|
+
The project consumes design tokens from the **@citron-systems/citron-ds** NPM package. The package provides CSS variables (e.g. `var(--inkblot-semantic-color-*)`) which are activated via `@import '@citron-systems/citron-ds/css'` in the main CSS entry point. All components use **semantic tokens only**—never primitives—ensuring automatic dark mode support via `[data-theme="dark"]` and alignment with WCAG AAA standards. Spacing and border-radius from the package are mapped into Tailwind's theme via `src/utils/inkblotTheme.ts`.
|
|
8
|
+
|
|
9
|
+
## Tech Stack
|
|
10
|
+
|
|
11
|
+
- React
|
|
12
|
+
- TypeScript
|
|
13
|
+
- Vite (Library Mode for bundling)
|
|
14
|
+
- Tailwind CSS
|
|
15
|
+
- Storybook (Vite builder)
|
|
16
|
+
- tsup
|
|
17
|
+
- @citron-systems/citron-ds
|
|
18
|
+
|
|
19
|
+
## Project Structure
|
|
20
|
+
|
|
21
|
+
| Path | Purpose |
|
|
22
|
+
|------|---------|
|
|
23
|
+
| `src/components` | React components. Each component lives in its own folder with the component file and optional stories. |
|
|
24
|
+
| `src/utils/inkblotTheme.ts` | Maps @citron-systems/citron-ds resolved tokens (Inkblot prefix) to Tailwind spacing and borderRadius. |
|
|
25
|
+
| `src/index.ts` | Library entry point. Exports all public components and their types. |
|
|
26
|
+
|
|
27
|
+
## Development Workflow
|
|
28
|
+
|
|
29
|
+
**Run the preview**
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
npm run dev
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Starts Storybook on `http://localhost:6006`. Use it to develop and document components in isolation.
|
|
36
|
+
|
|
37
|
+
**Build the library**
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm run build
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Uses tsup to bundle the library. Output is written to the `dist` folder.
|
|
44
|
+
|
|
45
|
+
## Library Consumption
|
|
46
|
+
|
|
47
|
+
The build produces artifacts in the `dist` folder:
|
|
48
|
+
|
|
49
|
+
- `dist/index.js` (CommonJS)
|
|
50
|
+
- `dist/index.mjs` (ESM)
|
|
51
|
+
- `dist/index.d.ts` (TypeScript definitions)
|
|
52
|
+
|
|
53
|
+
Consumers must import the design system CSS and can optionally set `data-theme="dark"` on a parent element for dark mode. Ensure `react` and `react-dom` are peer dependencies in your project.
|
|
54
|
+
|
|
55
|
+
## Publishing (CI/CD)
|
|
56
|
+
|
|
57
|
+
Pushes to `main` automatically publish to npm via GitHub Actions. Version bumps follow [Conventional Commits](https://www.conventionalcommits.org/):
|
|
58
|
+
|
|
59
|
+
- **patch** – `fix:`, `chore:`, `docs:`, `style:`, `refactor:`, `perf:`, `test:`
|
|
60
|
+
- **minor** – `feat:`
|
|
61
|
+
- **major** – `feat!:`, `fix!:`, or `BREAKING CHANGE` in commit body
|
|
62
|
+
|
|
63
|
+
**Setup (one-time):** Add `NPM_TOKEN` as a repository secret in GitHub (Settings → Secrets and variables → Actions). Create an [Automation token](https://www.npmjs.com/access-tokens) at npmjs.com with publish permission for `@citron-systems`.
|
|
64
|
+
|
|
65
|
+
## Guidelines
|
|
66
|
+
|
|
67
|
+
All new components **must** use semantic tokens from @citron-systems/citron-ds via CSS variables (e.g. `var(--inkblot-semantic-color-interactive-primary)`). Never use primitives or hardcoded colors. Follow the Principles of Radical Clarity and use semantic tokens for all states (hover, focus, disabled, error). Components automatically support dark mode when `[data-theme="dark"]` is applied.
|
package/package.json
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@citron-systems/citron-ui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Core UI component library for Citron CRM. Accessible, design-token-driven React components built with consistency and scalability in mind.",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"module": "dist/index.mjs",
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./dist/index.d.ts",
|
|
12
|
-
"import": "./dist/index.mjs",
|
|
13
|
-
"require": "./dist/index.js"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"files": [
|
|
17
|
-
"dist"
|
|
18
|
-
],
|
|
19
|
-
"scripts": {
|
|
20
|
-
"dev": "storybook dev -p 6006",
|
|
21
|
-
"build": "tsup",
|
|
22
|
-
"build-storybook": "storybook build"
|
|
23
|
-
},
|
|
24
|
-
"repository": {
|
|
25
|
-
"type": "git",
|
|
26
|
-
"url": "https://github.com/Inkblot-Studio/citron-ui.git"
|
|
27
|
-
},
|
|
28
|
-
"license": "MIT",
|
|
29
|
-
"keywords": [
|
|
30
|
-
"react",
|
|
31
|
-
"components",
|
|
32
|
-
"ui",
|
|
33
|
-
"design-system",
|
|
34
|
-
"citron",
|
|
35
|
-
"crm"
|
|
36
|
-
],
|
|
37
|
-
"publishConfig": {
|
|
38
|
-
"access": "public"
|
|
39
|
-
},
|
|
40
|
-
"peerDependencies": {
|
|
41
|
-
"@citron-systems/citron-ds": "^1.0.0",
|
|
42
|
-
"react": "^19.0.0",
|
|
43
|
-
"react-dom": "^19.0.0"
|
|
44
|
-
},
|
|
45
|
-
"dependencies": {
|
|
46
|
-
"clsx": "^2.1.1",
|
|
47
|
-
"tailwind-merge": "^3.5.0"
|
|
48
|
-
},
|
|
49
|
-
"devDependencies": {
|
|
50
|
-
"@chromatic-com/storybook": "^5.0.1",
|
|
51
|
-
"@citron-systems/citron-ds": "^1.0.0",
|
|
52
|
-
"@storybook/addon-a11y": "^10.2.10",
|
|
53
|
-
"@storybook/addon-docs": "^10.2.10",
|
|
54
|
-
"@storybook/addon-onboarding": "^10.2.10",
|
|
55
|
-
"@storybook/addon-vitest": "^10.2.10",
|
|
56
|
-
"@storybook/react-vite": "^10.2.10",
|
|
57
|
-
"@types/node": "^25.3.0",
|
|
58
|
-
"@types/react": "^19.2.14",
|
|
59
|
-
"@types/react-dom": "^19.2.3",
|
|
60
|
-
"@vitejs/plugin-react-swc": "^4.2.3",
|
|
61
|
-
"@vitest/browser-playwright": "^4.0.18",
|
|
62
|
-
"@vitest/coverage-v8": "^4.0.18",
|
|
63
|
-
"autoprefixer": "^10.4.24",
|
|
64
|
-
"playwright": "^1.58.2",
|
|
65
|
-
"postcss": "^8.5.6",
|
|
66
|
-
"react": "^19.2.4",
|
|
67
|
-
"react-dom": "^19.2.4",
|
|
68
|
-
"storybook": "^10.2.10",
|
|
69
|
-
"tailwindcss": "^3.4.19",
|
|
70
|
-
"tsup": "^8.5.1",
|
|
71
|
-
"typescript": "~5.9.3",
|
|
72
|
-
"vite": "^7.3.1",
|
|
73
|
-
"vitest": "^4.0.18"
|
|
74
|
-
}
|
|
75
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@citron-systems/citron-ui",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Core UI component library for Citron CRM. Accessible, design-token-driven React components built with consistency and scalability in mind.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.mjs",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.mjs",
|
|
13
|
+
"require": "./dist/index.js"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"dev": "storybook dev -p 6006",
|
|
21
|
+
"build": "tsup",
|
|
22
|
+
"build-storybook": "storybook build"
|
|
23
|
+
},
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "git+https://github.com/Inkblot-Studio/citron-ui.git"
|
|
27
|
+
},
|
|
28
|
+
"license": "MIT",
|
|
29
|
+
"keywords": [
|
|
30
|
+
"react",
|
|
31
|
+
"components",
|
|
32
|
+
"ui",
|
|
33
|
+
"design-system",
|
|
34
|
+
"citron",
|
|
35
|
+
"crm"
|
|
36
|
+
],
|
|
37
|
+
"publishConfig": {
|
|
38
|
+
"access": "public"
|
|
39
|
+
},
|
|
40
|
+
"peerDependencies": {
|
|
41
|
+
"@citron-systems/citron-ds": "^1.0.0",
|
|
42
|
+
"react": "^19.0.0",
|
|
43
|
+
"react-dom": "^19.0.0"
|
|
44
|
+
},
|
|
45
|
+
"dependencies": {
|
|
46
|
+
"clsx": "^2.1.1",
|
|
47
|
+
"tailwind-merge": "^3.5.0"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@chromatic-com/storybook": "^5.0.1",
|
|
51
|
+
"@citron-systems/citron-ds": "^1.0.0",
|
|
52
|
+
"@storybook/addon-a11y": "^10.2.10",
|
|
53
|
+
"@storybook/addon-docs": "^10.2.10",
|
|
54
|
+
"@storybook/addon-onboarding": "^10.2.10",
|
|
55
|
+
"@storybook/addon-vitest": "^10.2.10",
|
|
56
|
+
"@storybook/react-vite": "^10.2.10",
|
|
57
|
+
"@types/node": "^25.3.0",
|
|
58
|
+
"@types/react": "^19.2.14",
|
|
59
|
+
"@types/react-dom": "^19.2.3",
|
|
60
|
+
"@vitejs/plugin-react-swc": "^4.2.3",
|
|
61
|
+
"@vitest/browser-playwright": "^4.0.18",
|
|
62
|
+
"@vitest/coverage-v8": "^4.0.18",
|
|
63
|
+
"autoprefixer": "^10.4.24",
|
|
64
|
+
"playwright": "^1.58.2",
|
|
65
|
+
"postcss": "^8.5.6",
|
|
66
|
+
"react": "^19.2.4",
|
|
67
|
+
"react-dom": "^19.2.4",
|
|
68
|
+
"storybook": "^10.2.10",
|
|
69
|
+
"tailwindcss": "^3.4.19",
|
|
70
|
+
"tsup": "^8.5.1",
|
|
71
|
+
"typescript": "~5.9.3",
|
|
72
|
+
"vite": "^7.3.1",
|
|
73
|
+
"vitest": "^4.0.18"
|
|
74
|
+
}
|
|
75
|
+
}
|