@aggc/ui 0.2.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/README.md +147 -0
- package/package.json +105 -0
package/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# `@aggc/ui`
|
|
2
|
+
|
|
3
|
+
Shared Vue UI primitives, styles, and patterns for AGGC desktop and future web surfaces.
|
|
4
|
+
|
|
5
|
+
## Scope
|
|
6
|
+
|
|
7
|
+
This package is intentionally limited to reusable UI:
|
|
8
|
+
|
|
9
|
+
- theme tokens
|
|
10
|
+
- Panda styles, recipes, layouts, and patterns
|
|
11
|
+
- visual Vue components with stable props and slots
|
|
12
|
+
|
|
13
|
+
This package does not include:
|
|
14
|
+
|
|
15
|
+
- stores
|
|
16
|
+
- routing
|
|
17
|
+
- Tauri integrations
|
|
18
|
+
- filesystem access
|
|
19
|
+
- product-specific feature flows
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @aggc/ui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Peer dependency:
|
|
28
|
+
|
|
29
|
+
- `vue@^3.5`
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import "@aggc/ui/css";
|
|
35
|
+
import { UiButton, StatusBadge } from "@aggc/ui";
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
If you want the package fonts as well:
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import "@aggc/ui/fonts";
|
|
42
|
+
import "@aggc/ui/css";
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
You can also consume the public subpaths:
|
|
46
|
+
|
|
47
|
+
- `@aggc/ui/components`
|
|
48
|
+
- `@aggc/ui/styles`
|
|
49
|
+
- `@aggc/ui/tokens`
|
|
50
|
+
|
|
51
|
+
Everything else in this repo is maintenance tooling for the package itself:
|
|
52
|
+
|
|
53
|
+
- `src/stories/**` powers Storybook docs
|
|
54
|
+
- `tests/visual/**` powers Playwright visual regression
|
|
55
|
+
- `examples/vue-consumer/` validates external consumption
|
|
56
|
+
- `docs/` contains internal maintenance notes
|
|
57
|
+
|
|
58
|
+
## Theme contract
|
|
59
|
+
|
|
60
|
+
`@aggc/ui/css` is intentionally headful. It includes:
|
|
61
|
+
|
|
62
|
+
- base reset and focus-visible treatment
|
|
63
|
+
- minimal theme-aware document colors
|
|
64
|
+
- shared animation keyframes used by the exported components
|
|
65
|
+
|
|
66
|
+
`@aggc/ui/css` does not embed fonts anymore. Load `@aggc/ui/fonts` if you want the default IBM Plex Sans and Space Grotesk setup from the package itself.
|
|
67
|
+
|
|
68
|
+
Consumers should set `data-theme="dark"` on a parent container or document root for dark mode.
|
|
69
|
+
|
|
70
|
+
## Variant policy
|
|
71
|
+
|
|
72
|
+
Shared components expose a closed set of visual props:
|
|
73
|
+
|
|
74
|
+
- `size`
|
|
75
|
+
- `variant`
|
|
76
|
+
- `tone`
|
|
77
|
+
- `state`
|
|
78
|
+
|
|
79
|
+
Do not add ad hoc visual props like raw `padding`, `color`, or `background` to product code. If a visual need is reusable, add it as a documented recipe or component variant here.
|
|
80
|
+
|
|
81
|
+
## Development
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
npm install
|
|
85
|
+
npm run typecheck
|
|
86
|
+
npm run test
|
|
87
|
+
npm run docs
|
|
88
|
+
npm run test:visual
|
|
89
|
+
npm run build
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Release workflow
|
|
93
|
+
|
|
94
|
+
- Record versioned changes with `npm run changeset`
|
|
95
|
+
- CI must pass `typecheck`, `test`, and `build`
|
|
96
|
+
- Releases are published from `main` through Changesets
|
|
97
|
+
|
|
98
|
+
## Stories and visual testing
|
|
99
|
+
|
|
100
|
+
Storybook is the human-facing source of truth for component stories, examples and docs.
|
|
101
|
+
|
|
102
|
+
The Storybook manager stays in dark mode. Each component story exposes its own local light/dark preview switch without changing the global docs shell.
|
|
103
|
+
|
|
104
|
+
- `npm run docs`
|
|
105
|
+
- `npm run docs:build`
|
|
106
|
+
- `npm run docs:preview`
|
|
107
|
+
|
|
108
|
+
Playwright visual regression runs against `iframe.html` routes generated from those same Storybook stories.
|
|
109
|
+
|
|
110
|
+
- `npm run test:visual`
|
|
111
|
+
- `npm run test:visual:update`
|
|
112
|
+
- `npm run test:visual:ui`
|
|
113
|
+
|
|
114
|
+
Example test targets:
|
|
115
|
+
|
|
116
|
+
- `/iframe.html?id=ui-button--solid&viewMode=story`
|
|
117
|
+
- `/iframe.html?id=ui-select--open&viewMode=story`
|
|
118
|
+
|
|
119
|
+
That keeps previews, code examples and screenshot baselines tied to one story system instead of separate demos.
|
|
120
|
+
|
|
121
|
+
These docs and tests are internal repo tooling. They are not part of the published package API.
|
|
122
|
+
|
|
123
|
+
## Contribution boundary
|
|
124
|
+
|
|
125
|
+
The package must stay platform-agnostic.
|
|
126
|
+
|
|
127
|
+
Do not add:
|
|
128
|
+
|
|
129
|
+
- router-aware components
|
|
130
|
+
- stores or feature state
|
|
131
|
+
- Tauri or filesystem bindings
|
|
132
|
+
- product-only workflows
|
|
133
|
+
|
|
134
|
+
## Publishing policy
|
|
135
|
+
|
|
136
|
+
- semver for API and visual breakage
|
|
137
|
+
- public exports only through documented entrypoints
|
|
138
|
+
- reusable pieces must stay platform-agnostic
|
|
139
|
+
|
|
140
|
+
## Accessibility baseline
|
|
141
|
+
|
|
142
|
+
Shared components should provide:
|
|
143
|
+
|
|
144
|
+
- keyboard support when interactive
|
|
145
|
+
- visible focus treatment
|
|
146
|
+
- disabled and loading states
|
|
147
|
+
- reduced-motion friendly animations where applicable
|
package/package.json
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@aggc/ui",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Shared Vue UI primitives, patterns, and tokens for AGGC desktop and web.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/jmtrs/aggc-ui.git"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://github.com/jmtrs/aggc-ui#readme",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/jmtrs/aggc-ui/issues"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"panda:codegen": "panda codegen && panda cssgen --outfile styled-system/styles.css",
|
|
17
|
+
"typecheck": "npm run panda:codegen && vue-tsc --noEmit",
|
|
18
|
+
"test": "npm run panda:codegen && vitest run",
|
|
19
|
+
"test:visual": "playwright test",
|
|
20
|
+
"test:visual:update": "playwright test --update-snapshots",
|
|
21
|
+
"test:visual:ui": "playwright test --ui",
|
|
22
|
+
"build": "npm run panda:codegen && vite build && npm run build:types && npm run build:assets && npm run check:package",
|
|
23
|
+
"build:assets": "node ./scripts/copy-fonts.mjs",
|
|
24
|
+
"build:types": "vue-tsc --project tsconfig.build.json --declaration --emitDeclarationOnly --declarationDir dist",
|
|
25
|
+
"check:package": "node ./scripts/check-package.mjs",
|
|
26
|
+
"docs": "npm run panda:codegen && storybook dev -p 6006 --no-open",
|
|
27
|
+
"docs:build": "npm run panda:codegen && storybook build",
|
|
28
|
+
"docs:preview": "http-server storybook-static -p 6006 -a 127.0.0.1",
|
|
29
|
+
"changeset": "changeset",
|
|
30
|
+
"version-packages": "changeset version",
|
|
31
|
+
"release": "changeset publish",
|
|
32
|
+
"example:build": "npm run build && npm install --prefix examples/vue-consumer && npm run build --prefix examples/vue-consumer"
|
|
33
|
+
},
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public"
|
|
36
|
+
},
|
|
37
|
+
"engines": {
|
|
38
|
+
"node": ">=18.18.0"
|
|
39
|
+
},
|
|
40
|
+
"keywords": [
|
|
41
|
+
"aggc",
|
|
42
|
+
"vue",
|
|
43
|
+
"ui",
|
|
44
|
+
"design-system",
|
|
45
|
+
"panda-css",
|
|
46
|
+
"desktop",
|
|
47
|
+
"web"
|
|
48
|
+
],
|
|
49
|
+
"sideEffects": [
|
|
50
|
+
"*.css"
|
|
51
|
+
],
|
|
52
|
+
"files": [
|
|
53
|
+
"dist"
|
|
54
|
+
],
|
|
55
|
+
"main": "./dist/index.js",
|
|
56
|
+
"module": "./dist/index.js",
|
|
57
|
+
"types": "./dist/index.d.ts",
|
|
58
|
+
"exports": {
|
|
59
|
+
".": {
|
|
60
|
+
"types": "./dist/index.d.ts",
|
|
61
|
+
"import": "./dist/index.js"
|
|
62
|
+
},
|
|
63
|
+
"./components": {
|
|
64
|
+
"types": "./dist/components.d.ts",
|
|
65
|
+
"import": "./dist/components.js"
|
|
66
|
+
},
|
|
67
|
+
"./styles": {
|
|
68
|
+
"types": "./dist/styles.d.ts",
|
|
69
|
+
"import": "./dist/styles.js"
|
|
70
|
+
},
|
|
71
|
+
"./tokens": {
|
|
72
|
+
"types": "./dist/tokens.d.ts",
|
|
73
|
+
"import": "./dist/tokens.js"
|
|
74
|
+
},
|
|
75
|
+
"./css": "./dist/ui.css",
|
|
76
|
+
"./fonts": "./dist/fonts.css"
|
|
77
|
+
},
|
|
78
|
+
"peerDependencies": {
|
|
79
|
+
"vue": "^3.5.0"
|
|
80
|
+
},
|
|
81
|
+
"dependencies": {
|
|
82
|
+
"@fontsource/ibm-plex-sans": "^5.2.5",
|
|
83
|
+
"@fontsource/space-grotesk": "^5.2.6",
|
|
84
|
+
"lucide-vue-next": "^0.525.0"
|
|
85
|
+
},
|
|
86
|
+
"devDependencies": {
|
|
87
|
+
"@changesets/cli": "^2.29.6",
|
|
88
|
+
"@pandacss/dev": "^1.9.0",
|
|
89
|
+
"@playwright/test": "^1.52.0",
|
|
90
|
+
"@storybook/addon-a11y": "^9.1.20",
|
|
91
|
+
"@storybook/addon-docs": "^9.1.20",
|
|
92
|
+
"@storybook/vue3-vite": "^9.1.20",
|
|
93
|
+
"@types/node": "^24.0.15",
|
|
94
|
+
"@vitejs/plugin-vue": "^6.0.1",
|
|
95
|
+
"@vue/test-utils": "^2.4.6",
|
|
96
|
+
"http-server": "^14.1.1",
|
|
97
|
+
"jsdom": "^26.1.0",
|
|
98
|
+
"storybook": "^9.1.20",
|
|
99
|
+
"typescript": "^5.8.3",
|
|
100
|
+
"vite": "^7.0.4",
|
|
101
|
+
"vitest": "^3.2.4",
|
|
102
|
+
"vue": "^3.5.18",
|
|
103
|
+
"vue-tsc": "^3.0.4"
|
|
104
|
+
}
|
|
105
|
+
}
|