@unpunnyfuns/swatchbook-blocks 1.2.0 → 2.0.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 +5 -3
- package/dist/host-e2nSv-sA.mjs +791 -0
- package/dist/host-e2nSv-sA.mjs.map +1 -0
- package/dist/host.d.mts +57 -0
- package/dist/host.mjs +2 -0
- package/dist/index.d.mts +190 -348
- package/dist/index.mjs +485 -1100
- package/dist/index.mjs.map +1 -1
- package/dist/registry-Dm25Go94.d.mts +244 -0
- package/dist/style.css +237 -240
- package/package.json +6 -2
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
import { COLOR_FORMATS, ColorFormat } from "@unpunnyfuns/swatchbook-core/color-formats";
|
|
2
|
+
import { FormatColorResult, NormalizedColor, formatColor } from "@unpunnyfuns/swatchbook-core/format-color";
|
|
3
|
+
import * as _$react from "react";
|
|
4
|
+
import { ReactElement } from "react";
|
|
5
|
+
import { TokenGraph } from "@unpunnyfuns/swatchbook-core/graph";
|
|
6
|
+
import { Axis, Diagnostic, Preset } from "@unpunnyfuns/swatchbook-core";
|
|
7
|
+
import { SlimListedToken } from "@unpunnyfuns/swatchbook-core/snapshot-for-wire";
|
|
8
|
+
import { RealisedToken, TokenType } from "@unpunnyfuns/swatchbook-core/token-value-types";
|
|
9
|
+
|
|
10
|
+
//#region src/contexts.d.ts
|
|
11
|
+
/**
|
|
12
|
+
* Typed shape of the addon's `virtual:swatchbook/tokens` module.
|
|
13
|
+
*
|
|
14
|
+
* The axis / permutation / diagnostic / preset entries are deliberate
|
|
15
|
+
* type-aliases of core's authoritative shapes — the virtual module
|
|
16
|
+
* publishes those shapes verbatim, so single-sourcing the types prevents
|
|
17
|
+
* silent drift the moment core grows a field the plugin doesn't
|
|
18
|
+
* serialise.
|
|
19
|
+
*
|
|
20
|
+
* Token / listing shapes stay as narrowed interfaces because blocks
|
|
21
|
+
* only read a subset of Terrazzo's full token / listing structure; the
|
|
22
|
+
* narrower shape documents what's actually relied on.
|
|
23
|
+
*
|
|
24
|
+
* The ambient `declare module 'virtual:swatchbook/tokens'` declarations
|
|
25
|
+
* in `packages/addon/src/virtual.d.ts` describe the same payload.
|
|
26
|
+
*/
|
|
27
|
+
type VirtualAxisShape = Axis;
|
|
28
|
+
type VirtualDiagnosticShape = Diagnostic;
|
|
29
|
+
interface VirtualTokenShape {
|
|
30
|
+
$type?: string | undefined;
|
|
31
|
+
$value?: unknown;
|
|
32
|
+
$description?: string | undefined;
|
|
33
|
+
/**
|
|
34
|
+
* DTCG `$deprecated` — `true` or a message string. Mirrors core's
|
|
35
|
+
* `SwatchbookToken.$deprecated`; reaches blocks via the resolved token
|
|
36
|
+
* map reconstructed from the wire `tokenGraph`.
|
|
37
|
+
*/
|
|
38
|
+
$deprecated?: string | boolean | undefined;
|
|
39
|
+
aliasOf?: string | undefined;
|
|
40
|
+
aliasChain?: readonly string[] | undefined;
|
|
41
|
+
aliasedBy?: readonly string[] | undefined;
|
|
42
|
+
/**
|
|
43
|
+
* Per-sub-field alias map for composite tokens whose value blends
|
|
44
|
+
* primitives with aliased fragments — Terrazzo populates this when
|
|
45
|
+
* one or more component fields of a composite ($type: 'border',
|
|
46
|
+
* 'shadow', 'typography', 'gradient', 'transition') resolve through
|
|
47
|
+
* an alias. The `CompositeBreakdown` block reads it to render the
|
|
48
|
+
* source path beside each component value. Typed as `unknown` because
|
|
49
|
+
* the shape varies per composite type (color carries a
|
|
50
|
+
* `{components: (string | undefined)[]}` sub-shape; typography/border
|
|
51
|
+
* carry a flat `Record<string, string | undefined>`); the block
|
|
52
|
+
* narrows it at the consumer.
|
|
53
|
+
*/
|
|
54
|
+
partialAliasOf?: unknown;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Subset of `@terrazzo/plugin-token-listing`'s `ListedToken` that the
|
|
58
|
+
* snapshot carries. Blocks read `names.css` for the authoritative CSS
|
|
59
|
+
* variable name and `previewValue` for the display-ready CSS string.
|
|
60
|
+
* `source.loc` enables "jump to authoring source" affordances.
|
|
61
|
+
*
|
|
62
|
+
* Aliases `SlimListedToken` from core's `/snapshot-for-wire` subpath —
|
|
63
|
+
* the single canonical wire shape; both the addon's plugin (server-side
|
|
64
|
+
* emit) and blocks (consumer-side read) reference the same definition.
|
|
65
|
+
*/
|
|
66
|
+
type VirtualTokenListing = SlimListedToken;
|
|
67
|
+
type VirtualPresetShape = Preset;
|
|
68
|
+
/**
|
|
69
|
+
* Wire shape of the token graph — aliased from core's authoritative
|
|
70
|
+
* `TokenGraph` so both the virtual module declaration and the React
|
|
71
|
+
* context stay aligned with the same definition.
|
|
72
|
+
*/
|
|
73
|
+
type VirtualTokenGraph = TokenGraph;
|
|
74
|
+
/**
|
|
75
|
+
* Full project data read by blocks. Populated by the addon's preview
|
|
76
|
+
* decorator (from the virtual module) or constructed by hand in
|
|
77
|
+
* non-Storybook consumers.
|
|
78
|
+
*/
|
|
79
|
+
interface ProjectSnapshot {
|
|
80
|
+
axes: readonly VirtualAxisShape[];
|
|
81
|
+
activeTheme: string;
|
|
82
|
+
activeAxes: Readonly<Record<string, string>>;
|
|
83
|
+
cssVarPrefix: string;
|
|
84
|
+
/**
|
|
85
|
+
* Project-wide baseline for the row-indicator strip from
|
|
86
|
+
* `config.indicators`. Sits between the hard-coded indicator defaults
|
|
87
|
+
* and a block's `indicators` prop. Optional — hand-built snapshots
|
|
88
|
+
* (tests, MDX) omit it and blocks fall back to the bare defaults.
|
|
89
|
+
*/
|
|
90
|
+
indicators?: Readonly<Record<string, boolean>>;
|
|
91
|
+
diagnostics: readonly VirtualDiagnosticShape[];
|
|
92
|
+
/**
|
|
93
|
+
* Raw stylesheet text for the active theme. Optional — nothing on the
|
|
94
|
+
* `SwatchbookProvider` read path consumes it (`useProject()` never reads
|
|
95
|
+
* `snapshot.css`); the addon populates it incidentally when constructing
|
|
96
|
+
* its snapshot but injects CSS through its own independent mechanism.
|
|
97
|
+
*/
|
|
98
|
+
css?: string;
|
|
99
|
+
/**
|
|
100
|
+
* Path-indexed Token Listing data produced by
|
|
101
|
+
* `@terrazzo/plugin-token-listing`. Blocks prefer reading authoritative
|
|
102
|
+
* CSS var names and preview values from here; empty for non-resolver
|
|
103
|
+
* projects. Treat as enrichment — fall back gracefully when a path is
|
|
104
|
+
* absent.
|
|
105
|
+
*/
|
|
106
|
+
listing?: Readonly<Record<string, VirtualTokenListing>>;
|
|
107
|
+
/**
|
|
108
|
+
* Pre-built token graph for the project. JSON-serializable; nodes
|
|
109
|
+
* carry per-axis writes plus alias edges. The blocks hook backs
|
|
110
|
+
* `resolveAt` and variance from this graph.
|
|
111
|
+
*/
|
|
112
|
+
tokenGraph?: VirtualTokenGraph;
|
|
113
|
+
/** The default tuple — `{ axis: axis.default }` for every axis. */
|
|
114
|
+
defaultTuple: Record<string, string>;
|
|
115
|
+
/**
|
|
116
|
+
* Starting color format for blocks that display color values:
|
|
117
|
+
* `config.defaultColorFormat` from core, passed through the wire
|
|
118
|
+
* snapshot. `useColorFormat()` falls back to this when neither a
|
|
119
|
+
* block's own `colorFormat` prop nor a `ColorFormatContext` override is
|
|
120
|
+
* active. Optional: hand-built snapshots (tests, MDX) that omit it fall
|
|
121
|
+
* through to the bare `'hex'` default.
|
|
122
|
+
*/
|
|
123
|
+
defaultColorFormat?: ColorFormat;
|
|
124
|
+
/**
|
|
125
|
+
* Pre-built `resolveAt(tuple)` accessor. The addon's preview decorator
|
|
126
|
+
* instantiates this once per iframe lifetime. When present, use-project
|
|
127
|
+
* prefers it over building its own from `tokenGraph`, so it MUST preserve
|
|
128
|
+
* alias provenance — back it with `resolveAllWithProvenanceAt`, not the raw
|
|
129
|
+
* leaf `resolveAllAt`, or axis-varying aliases silently lose their chain /
|
|
130
|
+
* reverse refs / description at non-default tuples. Hand-built snapshots
|
|
131
|
+
* (tests, MDX) can omit this; blocks then fall back to a provenance-aware
|
|
132
|
+
* graph-backed resolver built from `tokenGraph`.
|
|
133
|
+
*/
|
|
134
|
+
resolveAt?: (tuple: Record<string, string>) => Record<string, VirtualTokenShape>;
|
|
135
|
+
}
|
|
136
|
+
/**
|
|
137
|
+
* Context carrying the full {@link ProjectSnapshot}. `null` sentinel lets
|
|
138
|
+
* `useSwatchbookData()` tell "provider present" from "fall back to the
|
|
139
|
+
* virtual module".
|
|
140
|
+
*/
|
|
141
|
+
declare const SwatchbookContext: _$react.Context<ProjectSnapshot | null>;
|
|
142
|
+
declare function useOptionalSwatchbookData(): ProjectSnapshot | null;
|
|
143
|
+
/**
|
|
144
|
+
* Active swatchbook theme for the current story/docs render. Populated by
|
|
145
|
+
* the addon's preview decorator and consumed by `useToken` + any future
|
|
146
|
+
* consumer hooks.
|
|
147
|
+
*
|
|
148
|
+
* This runs through plain React context rather than Storybook's
|
|
149
|
+
* `useGlobals` so the same hook works in autodocs / MDX renders where the
|
|
150
|
+
* preview-hooks context isn't available.
|
|
151
|
+
*/
|
|
152
|
+
declare const ThemeContext: _$react.Context<string>;
|
|
153
|
+
declare function useActiveTheme(): string;
|
|
154
|
+
/**
|
|
155
|
+
* Active axis tuple for the current story/docs render — `Record<axisName,
|
|
156
|
+
* contextName>`. Derived from the same input as {@link ThemeContext}; split
|
|
157
|
+
* out so consumers needing per-axis info (toolbar, panel, tuple-aware
|
|
158
|
+
* blocks) don't have to reparse the composed theme name.
|
|
159
|
+
*/
|
|
160
|
+
declare const AxesContext: _$react.Context<Readonly<Record<string, string>>>;
|
|
161
|
+
declare function useActiveAxes(): Readonly<Record<string, string>>;
|
|
162
|
+
/**
|
|
163
|
+
* Active color-display format for the current story/docs render, consumed
|
|
164
|
+
* by blocks that render color-token values. Emitted CSS is unaffected.
|
|
165
|
+
*
|
|
166
|
+
* Sits in the middle of the precedence chain a block resolves via
|
|
167
|
+
* `colorFormat ?? useColorFormat()`: a block's own `colorFormat` prop wins
|
|
168
|
+
* over this context, which wins over the active source's
|
|
169
|
+
* `defaultColorFormat` (from `Config.defaultColorFormat`). "Active
|
|
170
|
+
* source" is whichever one is actually feeding the render:
|
|
171
|
+
* `SwatchbookProvider`'s snapshot when a story decorator mounted one,
|
|
172
|
+
* otherwise the ambient `ProjectSource` (`#/host.ts`) that MDX-embedded
|
|
173
|
+
* blocks (no `<Story/>`, no provider) read through `useProject()`'s
|
|
174
|
+
* fallback path.
|
|
175
|
+
*
|
|
176
|
+
* Runs through plain React context rather than Storybook's `useGlobals` so
|
|
177
|
+
* per-story seeded globals flow through on first render and the same hook
|
|
178
|
+
* is safe to call from MDX doc blocks (where the preview-hooks context
|
|
179
|
+
* isn't available).
|
|
180
|
+
*/
|
|
181
|
+
declare const ColorFormatContext: _$react.Context<ColorFormat | null>;
|
|
182
|
+
/**
|
|
183
|
+
* Resolves the color-display format from the context/snapshot/source
|
|
184
|
+
* chain: `ColorFormatContext` → provider snapshot's `defaultColorFormat`
|
|
185
|
+
* → ambient source's `defaultColorFormat` → `'hex'`. Composing blocks
|
|
186
|
+
* read `colorFormat ?? useColorFormat()` to give their own `colorFormat`
|
|
187
|
+
* prop top precedence over this chain.
|
|
188
|
+
*/
|
|
189
|
+
declare function useColorFormat(): ColorFormat;
|
|
190
|
+
//#endregion
|
|
191
|
+
//#region src/presenters/types.d.ts
|
|
192
|
+
/**
|
|
193
|
+
* Uniform props every presenter receives, built-in or third-party. A composer
|
|
194
|
+
* renders `registry[token.$type]` with this shape and never special-cases a
|
|
195
|
+
* type. The presenter owns the `$value`→CSS mapping; that is what an override
|
|
196
|
+
* customizes.
|
|
197
|
+
*/
|
|
198
|
+
interface PresenterProps<T extends TokenType = TokenType> {
|
|
199
|
+
/** Token dot-path. Label/provenance; the presenter shows the leaf. */
|
|
200
|
+
path: string;
|
|
201
|
+
/** Fully-realised token: concrete `$value`, no alias/graph resolution. */
|
|
202
|
+
token: RealisedToken<T>;
|
|
203
|
+
/** R3: present → use for the visual; absent → render from `$value`. */
|
|
204
|
+
cssVar?: string | undefined;
|
|
205
|
+
/** Relevant to color/gradient; other presenters ignore it (uniform props). */
|
|
206
|
+
colorFormat: ColorFormat;
|
|
207
|
+
/**
|
|
208
|
+
* Optional block-level display hints (RJSF `ui:options`-style). A query
|
|
209
|
+
* block passes its own config (e.g. `{ visual }`, `{ speed }`, `{ sample }`)
|
|
210
|
+
* here; built-in presenters read the keys they understand, custom presenters
|
|
211
|
+
* ignore them. Not part of the token; purely presentation.
|
|
212
|
+
*/
|
|
213
|
+
options?: Record<string, unknown> | undefined;
|
|
214
|
+
}
|
|
215
|
+
/** A presenter component for tokens of `$type` T. */
|
|
216
|
+
type PresenterComponent<T extends TokenType = TokenType> = (props: PresenterProps<T>) => ReactElement;
|
|
217
|
+
/** `$type` → presenter. Partial: a composer falls back to defaults for gaps. */
|
|
218
|
+
type PresenterRegistry = Partial<Record<TokenType, PresenterComponent>>;
|
|
219
|
+
//#endregion
|
|
220
|
+
//#region src/presenters/registry.d.ts
|
|
221
|
+
/**
|
|
222
|
+
* Built-in presenters, keyed by DTCG `$type`. Phase C registers each entry as
|
|
223
|
+
* its presenter lands. A consumer's `presenters` override merges over this.
|
|
224
|
+
*/
|
|
225
|
+
declare const DEFAULT_PRESENTERS: PresenterRegistry;
|
|
226
|
+
/** Overrides win per `$type`; unlisted types keep the built-in. */
|
|
227
|
+
declare function mergePresenters(overrides?: PresenterRegistry): PresenterRegistry;
|
|
228
|
+
/** The active merged registry for the subtree. */
|
|
229
|
+
declare const PresenterContext: _$react.Context<Partial<Record<TokenType, PresenterComponent<TokenType>>>>;
|
|
230
|
+
/**
|
|
231
|
+
* Set the ambient presenter registry consulted by blocks that render with
|
|
232
|
+
* no `SwatchbookProvider` or `PresenterContext.Provider` above them (MDX
|
|
233
|
+
* doc blocks, autodocs). A host registers this once at preview-init; it is
|
|
234
|
+
* NOT reactive, so register before first render. Passing no argument (or
|
|
235
|
+
* `undefined`) resets to the built-ins. An explicit provider/context
|
|
236
|
+
* override still wins for its subtree; this only fills the provider-less
|
|
237
|
+
* gap.
|
|
238
|
+
*/
|
|
239
|
+
declare function registerPresenters(overrides?: PresenterRegistry): void;
|
|
240
|
+
/** The presenter for `type`, or `undefined` if none is registered. */
|
|
241
|
+
declare function usePresenter(type: TokenType): PresenterComponent | undefined;
|
|
242
|
+
//#endregion
|
|
243
|
+
export { useOptionalSwatchbookData as C, NormalizedColor as D, FormatColorResult as E, formatColor as O, useColorFormat as S, ColorFormat as T, VirtualTokenGraph as _, usePresenter as a, useActiveAxes as b, PresenterRegistry as c, ProjectSnapshot as d, SwatchbookContext as f, VirtualPresetShape as g, VirtualDiagnosticShape as h, registerPresenters as i, AxesContext as l, VirtualAxisShape as m, PresenterContext as n, PresenterComponent as o, ThemeContext as p, mergePresenters as r, PresenterProps as s, DEFAULT_PRESENTERS as t, ColorFormatContext as u, VirtualTokenListing as v, COLOR_FORMATS as w, useActiveTheme as x, VirtualTokenShape as y };
|
|
244
|
+
//# sourceMappingURL=registry-Dm25Go94.d.mts.map
|