@rokkit/core 1.0.0-next.133 → 1.0.0-next.134
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 +121 -0
- package/package.json +3 -2
- package/src/constants.js +7 -2
- package/src/key-event-map.js +0 -1
- package/src/theme.ts +14 -1
- package/src/utils.js +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# @rokkit/core
|
|
2
|
+
|
|
3
|
+
Core utilities for the Rokkit design system — field mapping, constants, calendar, color palette, and event utilities.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @rokkit/core
|
|
9
|
+
# or
|
|
10
|
+
bun add @rokkit/core
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Overview
|
|
14
|
+
|
|
15
|
+
`@rokkit/core` is the foundation layer shared across all Rokkit packages. It provides:
|
|
16
|
+
|
|
17
|
+
- **Field mapping** — map arbitrary data object shapes to semantic field names
|
|
18
|
+
- **Constants** — `BASE_FIELDS`, `DEFAULT_STATE_ICONS`, `DEFAULT_KEYMAP`, and more
|
|
19
|
+
- **Color palette** — default colors, shades, and theme color mapping
|
|
20
|
+
- **Calendar utilities** — calendar day generation and weekday labels
|
|
21
|
+
- **Event utilities** — lightweight emitter factory
|
|
22
|
+
- **Direction detection** — RTL/LTR helpers
|
|
23
|
+
- **Tick generation** — axis tick utilities for chart packages
|
|
24
|
+
|
|
25
|
+
No runtime dependencies on other `@rokkit/*` packages.
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
### Field mapping
|
|
30
|
+
|
|
31
|
+
`FieldMapper` maps semantic field names (`label`, `value`, `icon`, etc.) to the actual keys present in your data objects. Pass a fields override to adapt any data shape.
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
import { FieldMapper } from '@rokkit/core'
|
|
35
|
+
|
|
36
|
+
const mapper = new FieldMapper({ label: 'name', value: 'id', icon: 'iconClass' })
|
|
37
|
+
|
|
38
|
+
const item = { id: 42, name: 'Settings', iconClass: 'i-settings' }
|
|
39
|
+
|
|
40
|
+
mapper.get('label', item) // 'Settings'
|
|
41
|
+
mapper.get('value', item) // 42
|
|
42
|
+
mapper.get('icon', item) // 'i-settings'
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### normalizeFields
|
|
46
|
+
|
|
47
|
+
Merge user-supplied field overrides with `BASE_FIELDS` defaults, remapping any legacy key names automatically.
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
import { normalizeFields, BASE_FIELDS } from '@rokkit/core'
|
|
51
|
+
|
|
52
|
+
const fields = normalizeFields({ label: 'title', value: 'slug' })
|
|
53
|
+
// { label: 'title', value: 'slug', icon: 'icon', children: 'children', ... }
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### BASE_FIELDS reference
|
|
57
|
+
|
|
58
|
+
```js
|
|
59
|
+
import { BASE_FIELDS } from '@rokkit/core'
|
|
60
|
+
|
|
61
|
+
// {
|
|
62
|
+
// id: 'id', value: 'value', label: 'label',
|
|
63
|
+
// icon: 'icon', avatar: 'image', subtext: 'description',
|
|
64
|
+
// tooltip: 'title', badge: 'badge', shortcut: 'shortcut',
|
|
65
|
+
// children: 'children', type: 'type', snippet: 'snippet',
|
|
66
|
+
// href: 'href', hrefTarget: 'target',
|
|
67
|
+
// disabled: 'disabled', expanded: 'expanded', selected: 'selected'
|
|
68
|
+
// }
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Event emitter
|
|
72
|
+
|
|
73
|
+
```js
|
|
74
|
+
import { createEmitter } from '@rokkit/core'
|
|
75
|
+
|
|
76
|
+
const emitter = createEmitter()
|
|
77
|
+
emitter.on('select', (item) => console.log('selected', item))
|
|
78
|
+
emitter.emit('select', myItem)
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Calendar utilities
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
import { getCalendarDays, weekdays } from '@rokkit/core'
|
|
85
|
+
|
|
86
|
+
const days = getCalendarDays(2025, 2) // February 2025
|
|
87
|
+
// weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Tick generation
|
|
91
|
+
|
|
92
|
+
```js
|
|
93
|
+
import { generateTicks } from '@rokkit/core'
|
|
94
|
+
|
|
95
|
+
const ticks = generateTicks(0, 100, 5)
|
|
96
|
+
// [0, 25, 50, 75, 100]
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## API
|
|
100
|
+
|
|
101
|
+
| Export | Description |
|
|
102
|
+
| -------------------------------- | ------------------------------------------------------------- |
|
|
103
|
+
| `BASE_FIELDS` | Canonical semantic-to-data-key field mapping |
|
|
104
|
+
| `normalizeFields(fields)` | Merge overrides with BASE_FIELDS defaults |
|
|
105
|
+
| `FieldMapper` | Class that resolves semantic field reads from data objects |
|
|
106
|
+
| `DEFAULT_STATE_ICONS` | Icon name map grouped by category (action, state, sort, etc.) |
|
|
107
|
+
| `DEFAULT_KEYMAP` | Default keyboard navigation key mapping |
|
|
108
|
+
| `DEFAULT_THEME_MAPPING` | Default semantic color → palette color mapping |
|
|
109
|
+
| `createEmitter()` | Lightweight event emitter factory |
|
|
110
|
+
| `getCalendarDays(year, month)` | Calendar day array for a given month |
|
|
111
|
+
| `weekdays` | Localized weekday label array |
|
|
112
|
+
| `generateTicks(min, max, count)` | Evenly spaced axis tick values |
|
|
113
|
+
| `defaultColors` | Default color palette array |
|
|
114
|
+
| `shades` | Available shade scale values |
|
|
115
|
+
| `ITEM_SNIPPET` | Constant: default item snippet key (`'itemContent'`) |
|
|
116
|
+
| `GROUP_SNIPPET` | Constant: default group snippet key (`'groupContent'`) |
|
|
117
|
+
| `stateIconsFromNames(names)` | Build a state icon map from an array of icon name strings |
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
Part of [Rokkit](https://github.com/jerrythomas/rokkit) — a Svelte 5 component library and design system.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/core",
|
|
3
|
-
"version": "1.0.0-next.
|
|
3
|
+
"version": "1.0.0-next.134",
|
|
4
4
|
"description": "Contains core utility functions and classes that can be used in various components.",
|
|
5
5
|
"author": "Jerry Thomas <me@jerrythomas.name>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
"scripts": {
|
|
12
12
|
"prepublishOnly": "cp ../../LICENSE . && bunx tsc --project tsconfig.build.json",
|
|
13
|
+
"postpublish": "rm -f LICENSE",
|
|
13
14
|
"clean": "rm -rf dist",
|
|
14
15
|
"build": "bun clean && bun prepublishOnly"
|
|
15
16
|
},
|
|
@@ -41,6 +42,6 @@
|
|
|
41
42
|
"ramda": "^0.32.0"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
|
-
"@rokkit/icons": "1.0.0-next.
|
|
45
|
+
"@rokkit/icons": "1.0.0-next.134"
|
|
45
46
|
}
|
|
46
47
|
}
|
package/src/constants.js
CHANGED
|
@@ -64,10 +64,15 @@ export const BASE_FIELDS = {
|
|
|
64
64
|
// State
|
|
65
65
|
disabled: 'disabled',
|
|
66
66
|
expanded: 'expanded',
|
|
67
|
-
selected: 'selected'
|
|
67
|
+
selected: 'selected'
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
-
const LEGACY_KEY_MAP = {
|
|
70
|
+
const LEGACY_KEY_MAP = {
|
|
71
|
+
description: 'subtext',
|
|
72
|
+
title: 'tooltip',
|
|
73
|
+
image: 'avatar',
|
|
74
|
+
target: 'hrefTarget'
|
|
75
|
+
}
|
|
71
76
|
|
|
72
77
|
/**
|
|
73
78
|
* Remap legacy field-override keys to their BASE_FIELDS semantic equivalents.
|
package/src/key-event-map.js
CHANGED
|
@@ -26,7 +26,6 @@ export class KeyEventMap {
|
|
|
26
26
|
* @returns {string|null} - The event name or null if no match is found.
|
|
27
27
|
*/
|
|
28
28
|
getEventForKey(key) {
|
|
29
|
-
|
|
30
29
|
const matchEvent = ([_, keys]) =>
|
|
31
30
|
(Array.isArray(keys) && keys.includes(key)) || (keys instanceof RegExp && keys.test(key))
|
|
32
31
|
|
package/src/theme.ts
CHANGED
|
@@ -72,7 +72,20 @@ export function themeRules(mapping = DEFAULT_THEME_MAPPING, colors = defaultColo
|
|
|
72
72
|
* @returns {Array} Array of shortcut definitions
|
|
73
73
|
*/
|
|
74
74
|
export function semanticShortcuts(name) {
|
|
75
|
-
const prefixes = [
|
|
75
|
+
const prefixes = [
|
|
76
|
+
'bg',
|
|
77
|
+
'border',
|
|
78
|
+
'border-l',
|
|
79
|
+
'border-r',
|
|
80
|
+
'border-t',
|
|
81
|
+
'border-b',
|
|
82
|
+
'text',
|
|
83
|
+
'ring',
|
|
84
|
+
'outline',
|
|
85
|
+
'from',
|
|
86
|
+
'to',
|
|
87
|
+
'divide'
|
|
88
|
+
]
|
|
76
89
|
const shortcuts = []
|
|
77
90
|
|
|
78
91
|
for (const [toneName, lightValue] of Object.entries(TONE_MAP)) {
|