@kiva/kv-components 8.10.0 → 8.11.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/README.md +6 -0
- package/docs/make-to-vue.md +3 -3
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -58,6 +58,12 @@ cd @kiva/kv-components
|
|
|
58
58
|
npm run storybook
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
+
### About `@kiva/kv-tokens`
|
|
62
|
+
|
|
63
|
+
kv-components imports design tokens and the Tailwind preset from the sibling [`@kiva/kv-tokens`](../kv-tokens/) workspace, which ships pre-built artifacts under `dist/`. That directory is gitignored, but kv-tokens' `prepare` lifecycle script regenerates it during the root `npm install` — so Storybook starts without a separate build step.
|
|
64
|
+
|
|
65
|
+
If you edit token sources under [`../kv-tokens/tokens/`](../kv-tokens/tokens/), rerun `npm run build` in that package to regenerate `dist/`; Storybook will pick up the change on reload.
|
|
66
|
+
|
|
61
67
|
### Writing Stories
|
|
62
68
|
|
|
63
69
|
- Write stories in the [CSF format](https://storybook.js.org/docs/vue/writing-stories/introduction)
|
package/docs/make-to-vue.md
CHANGED
|
@@ -85,7 +85,7 @@ Decide: new component, v2 of existing, or enhancement to existing.
|
|
|
85
85
|
Figma Make output is presentational/demo code. Determine what needs to change:
|
|
86
86
|
|
|
87
87
|
- **Hardcoded data** -> Dynamic props
|
|
88
|
-
- **Hardcoded colors** -> Design system tokens from `@kiva/kv-tokens
|
|
88
|
+
- **Hardcoded colors** -> Design system tokens from `@kiva/kv-tokens`
|
|
89
89
|
- **Fixed dimensions** -> Container-responsive sizing
|
|
90
90
|
- **Presentational strings** -> Configurable via props/slots
|
|
91
91
|
- **React animation libraries** -> CSS transitions or Vue composables (prefer no extra deps)
|
|
@@ -123,7 +123,7 @@ Figma Make outputs raw Tailwind classes. Convert to kv-components patterns:
|
|
|
123
123
|
- **Replace hardcoded font families** with design system fonts (`tw-font-sans`, `tw-font-serif`)
|
|
124
124
|
- **Replace hardcoded colors** with token references where possible
|
|
125
125
|
- **Replace pixel values** in Tailwind classes with spacing scale values (8px increments)
|
|
126
|
-
- **Use design tokens** from `@kiva/kv-tokens
|
|
126
|
+
- **Use design tokens** from `@kiva/kv-tokens` for colors, spacing, typography
|
|
127
127
|
|
|
128
128
|
### 2.4 Animation Translation
|
|
129
129
|
|
|
@@ -184,7 +184,7 @@ Extract into `src/utils/` when:
|
|
|
184
184
|
|
|
185
185
|
### 4.1 Colors
|
|
186
186
|
|
|
187
|
-
Always check `@kiva/kv-tokens
|
|
187
|
+
Always check `@kiva/kv-tokens` for existing color tokens before using hardcoded hex values. Map Figma Make colors to the closest token:
|
|
188
188
|
|
|
189
189
|
```js
|
|
190
190
|
import kvTokensPrimitives from '@kiva/kv-tokens';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.11.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@babel/preset-env": "^7.24.8",
|
|
35
35
|
"@babel/preset-react": "^7.24.7",
|
|
36
36
|
"@babel/preset-typescript": "^7.24.7",
|
|
37
|
-
"@kiva/kv-tokens": "^
|
|
37
|
+
"@kiva/kv-tokens": "^4.0.0",
|
|
38
38
|
"@kiva/vite-plugin-vue-lib-css": "^2.0.0",
|
|
39
39
|
"@laynezh/vite-plugin-lib-assets": "^0.6.1",
|
|
40
40
|
"@mdi/js": "^7.4.47",
|
|
@@ -101,12 +101,12 @@
|
|
|
101
101
|
"lint": "eslint --ext .ts,.vue ./",
|
|
102
102
|
"test": "npm run lint && jest",
|
|
103
103
|
"prebuild": "node build/copyFlags.js",
|
|
104
|
-
"build": "vite build",
|
|
104
|
+
"build": "rimraf dist && vite build",
|
|
105
105
|
"postbuild": "mkdir -p ../../dist/kvui && mv -v dist/kvui/* ../../dist/kvui/"
|
|
106
106
|
},
|
|
107
107
|
"peerDependencies": {
|
|
108
108
|
"@apollo/client": "3.x",
|
|
109
|
-
"@kiva/kv-tokens": "
|
|
109
|
+
"@kiva/kv-tokens": "4.x",
|
|
110
110
|
"@mdi/js": "7.x",
|
|
111
111
|
"@vuepic/vue-datepicker": "^11.0.2",
|
|
112
112
|
"@vueuse/integrations": "14.x",
|
|
@@ -125,5 +125,5 @@
|
|
|
125
125
|
"embla-carousel-fade",
|
|
126
126
|
"popper.js"
|
|
127
127
|
],
|
|
128
|
-
"gitHead": "
|
|
128
|
+
"gitHead": "0ad54269ad04e0b03651970f8310e17726e98abc"
|
|
129
129
|
}
|