@protolabsai/ui 0.11.0 → 0.12.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/package.json +1 -1
- package/src/Changelog.stories.tsx +66 -0
- package/src/marketing.tsx +67 -0
- package/src/styles/marketing.css +142 -0
package/package.json
CHANGED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { Changelog, ChangelogChange, ChangelogEntry, Heading, Lead } from "./marketing";
|
|
3
|
+
import { TextLink } from "./primitives";
|
|
4
|
+
|
|
5
|
+
const meta: Meta = { title: "Components/Marketing/Changelog", parameters: { layout: "fullscreen" } };
|
|
6
|
+
export default meta;
|
|
7
|
+
type Story = StoryObj;
|
|
8
|
+
|
|
9
|
+
const Page = ({ children }: { children: React.ReactNode }) => (
|
|
10
|
+
<div style={{ maxWidth: 680, margin: "0 auto", padding: "64px 24px" }}>
|
|
11
|
+
<Heading style={{ fontSize: "2rem" }}>Changelog</Heading>
|
|
12
|
+
<Lead>Every release, newest first.</Lead>
|
|
13
|
+
{children}
|
|
14
|
+
<div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--pl-color-border)" }}>
|
|
15
|
+
<p style={{ fontSize: 13, color: "var(--pl-color-fg-subtle)" }}>
|
|
16
|
+
Full release notes and source on <TextLink href="#" external>GitHub Releases</TextLink>.
|
|
17
|
+
</p>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
/** User-facing — flat bullets, LLM-summarized voice. The marketing-site layout. */
|
|
23
|
+
export const UserFacing: Story = {
|
|
24
|
+
render: () => (
|
|
25
|
+
<Page>
|
|
26
|
+
<Changelog>
|
|
27
|
+
<ChangelogEntry version="@protolabsai/ui@0.11.0" date="Jun 9, 2026" latest href="#">
|
|
28
|
+
<ChangelogChange>Avatars and removable tags for identity and filters</ChangelogChange>
|
|
29
|
+
<ChangelogChange>A bottom utility bar in the app shell for global status and actions</ChangelogChange>
|
|
30
|
+
<ChangelogChange>Form toggles now associate with external labels</ChangelogChange>
|
|
31
|
+
</ChangelogEntry>
|
|
32
|
+
<ChangelogEntry version="@protolabsai/ui@0.10.0" date="Jun 9, 2026" href="#">
|
|
33
|
+
<ChangelogChange>Popover — anchored floating content for filters and pickers</ChangelogChange>
|
|
34
|
+
</ChangelogEntry>
|
|
35
|
+
<ChangelogEntry version="@protolabsai/ui@0.9.0" date="Jun 9, 2026" href="#">
|
|
36
|
+
<ChangelogChange>Drag a rail icon to reorder, or across to the other rail</ChangelogChange>
|
|
37
|
+
</ChangelogEntry>
|
|
38
|
+
<ChangelogEntry version="@protolabsai/design@0.5.0" date="Jun 9, 2026" href="#">
|
|
39
|
+
<ChangelogChange>Light mode, OS-driven, with a white-label token set</ChangelogChange>
|
|
40
|
+
</ChangelogEntry>
|
|
41
|
+
</Changelog>
|
|
42
|
+
</Page>
|
|
43
|
+
),
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/** Technical — typed entries (Keep-a-Changelog style) off the same layout. */
|
|
47
|
+
export const Technical: Story = {
|
|
48
|
+
render: () => (
|
|
49
|
+
<Page>
|
|
50
|
+
<Changelog>
|
|
51
|
+
<ChangelogEntry version="ui@0.11.0" date="2026-06-09" latest href="#">
|
|
52
|
+
<ChangelogChange tag="added">Avatar, AvatarGroup, Tag (removable chip)</ChangelogChange>
|
|
53
|
+
<ChangelogChange tag="added">AppShell utilityBar slot + UtilityBar container</ChangelogChange>
|
|
54
|
+
<ChangelogChange tag="fixed">Checkbox/Switch spread ...rest for external-label association (#155)</ChangelogChange>
|
|
55
|
+
</ChangelogEntry>
|
|
56
|
+
<ChangelogEntry version="ui@0.10.0" date="2026-06-09" href="#">
|
|
57
|
+
<ChangelogChange tag="added">Popover + PopoverClose (Radix)</ChangelogChange>
|
|
58
|
+
</ChangelogEntry>
|
|
59
|
+
<ChangelogEntry version="ui@0.9.0" date="2026-06-09" href="#">
|
|
60
|
+
<ChangelogChange tag="added">AppShell rail drag-and-drop + cross-rail (dnd-kit)</ChangelogChange>
|
|
61
|
+
<ChangelogChange tag="changed">Drag overlay reuses the rail-item renderer (keeps badge/dot)</ChangelogChange>
|
|
62
|
+
</ChangelogEntry>
|
|
63
|
+
</Changelog>
|
|
64
|
+
</Page>
|
|
65
|
+
),
|
|
66
|
+
};
|
package/src/marketing.tsx
CHANGED
|
@@ -93,3 +93,70 @@ export function PostItem({ meta, title, excerpt, href }: PostItemProps) {
|
|
|
93
93
|
export function Prose({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
|
|
94
94
|
return <div className={cx("pl-prose", className)} {...rest} />;
|
|
95
95
|
}
|
|
96
|
+
|
|
97
|
+
// ── Changelog (release timeline) — the standard marketing changelog layout ────
|
|
98
|
+
|
|
99
|
+
/** Changelog timeline — newest first. Wrap ChangelogEntry children. */
|
|
100
|
+
export function Changelog({ className, ...rest }: HTMLAttributes<HTMLOListElement>) {
|
|
101
|
+
return <ol className={cx("pl-changelog", className)} {...rest} />;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/** One release on the timeline. `latest` accents the dot + version pill. Put
|
|
105
|
+
* ChangelogChange children inside. */
|
|
106
|
+
export function ChangelogEntry({
|
|
107
|
+
version,
|
|
108
|
+
date,
|
|
109
|
+
latest,
|
|
110
|
+
href,
|
|
111
|
+
children,
|
|
112
|
+
}: {
|
|
113
|
+
version: ReactNode;
|
|
114
|
+
date?: ReactNode;
|
|
115
|
+
latest?: boolean;
|
|
116
|
+
/** Links the version pill (e.g. to the GitHub release / download). */
|
|
117
|
+
href?: string;
|
|
118
|
+
children: ReactNode;
|
|
119
|
+
}) {
|
|
120
|
+
return (
|
|
121
|
+
<li className={cx("pl-changelog__entry", latest && "pl-changelog__entry--latest")}>
|
|
122
|
+
<span className="pl-changelog__dot" aria-hidden />
|
|
123
|
+
<div className="pl-changelog__body">
|
|
124
|
+
<div className="pl-changelog__meta">
|
|
125
|
+
{href ? (
|
|
126
|
+
<a className="pl-changelog__version" href={href}>
|
|
127
|
+
{version}
|
|
128
|
+
</a>
|
|
129
|
+
) : (
|
|
130
|
+
<span className="pl-changelog__version">{version}</span>
|
|
131
|
+
)}
|
|
132
|
+
{date != null && <span className="pl-changelog__date">{date}</span>}
|
|
133
|
+
{latest && <span className="pl-changelog__latest">latest</span>}
|
|
134
|
+
</div>
|
|
135
|
+
<div className="pl-changelog__changes">{children}</div>
|
|
136
|
+
</div>
|
|
137
|
+
</li>
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/** A single change line. Flat (em-dash) for user-facing notes, or pass a `tag`
|
|
142
|
+
* (added / changed / fixed / removed) for a technical changelog. */
|
|
143
|
+
export function ChangelogChange({
|
|
144
|
+
tag,
|
|
145
|
+
children,
|
|
146
|
+
}: {
|
|
147
|
+
tag?: "added" | "changed" | "fixed" | "removed";
|
|
148
|
+
children: ReactNode;
|
|
149
|
+
}) {
|
|
150
|
+
return (
|
|
151
|
+
<div className="pl-changelog__change">
|
|
152
|
+
{tag ? (
|
|
153
|
+
<span className={cx("pl-changelog__tag", `pl-changelog__tag--${tag}`)}>{tag}</span>
|
|
154
|
+
) : (
|
|
155
|
+
<span className="pl-changelog__bullet" aria-hidden>
|
|
156
|
+
—
|
|
157
|
+
</span>
|
|
158
|
+
)}
|
|
159
|
+
<span>{children}</span>
|
|
160
|
+
</div>
|
|
161
|
+
);
|
|
162
|
+
}
|
package/src/styles/marketing.css
CHANGED
|
@@ -247,3 +247,145 @@
|
|
|
247
247
|
margin: 1.5rem 0;
|
|
248
248
|
color: var(--pl-color-fg-muted);
|
|
249
249
|
}
|
|
250
|
+
|
|
251
|
+
/* ── Changelog (release timeline) ─────────────────────────────────────────────── */
|
|
252
|
+
.pl-changelog {
|
|
253
|
+
position: relative;
|
|
254
|
+
display: grid;
|
|
255
|
+
gap: 40px;
|
|
256
|
+
margin: 0;
|
|
257
|
+
padding: 0;
|
|
258
|
+
list-style: none;
|
|
259
|
+
}
|
|
260
|
+
/* the timeline spine */
|
|
261
|
+
.pl-changelog::before {
|
|
262
|
+
content: "";
|
|
263
|
+
position: absolute;
|
|
264
|
+
left: 12px;
|
|
265
|
+
top: 8px;
|
|
266
|
+
bottom: 0;
|
|
267
|
+
width: 1px;
|
|
268
|
+
background: var(--pl-color-border);
|
|
269
|
+
}
|
|
270
|
+
.pl-changelog__entry {
|
|
271
|
+
position: relative;
|
|
272
|
+
display: flex;
|
|
273
|
+
gap: 20px;
|
|
274
|
+
}
|
|
275
|
+
.pl-changelog__dot {
|
|
276
|
+
position: relative;
|
|
277
|
+
z-index: 1;
|
|
278
|
+
flex-shrink: 0;
|
|
279
|
+
display: inline-flex;
|
|
280
|
+
align-items: center;
|
|
281
|
+
justify-content: center;
|
|
282
|
+
width: 25px;
|
|
283
|
+
height: 25px;
|
|
284
|
+
margin-top: 2px;
|
|
285
|
+
border-radius: 50%;
|
|
286
|
+
background: var(--pl-color-bg-raised);
|
|
287
|
+
border: var(--pl-border-width) solid var(--pl-color-border);
|
|
288
|
+
}
|
|
289
|
+
.pl-changelog__dot::after {
|
|
290
|
+
content: "";
|
|
291
|
+
width: 6px;
|
|
292
|
+
height: 6px;
|
|
293
|
+
border-radius: 50%;
|
|
294
|
+
background: var(--pl-color-fg-subtle);
|
|
295
|
+
}
|
|
296
|
+
.pl-changelog__entry--latest .pl-changelog__dot {
|
|
297
|
+
background: color-mix(in oklch, var(--pl-color-accent) 15%, transparent);
|
|
298
|
+
border-color: color-mix(in oklch, var(--pl-color-accent) 50%, transparent);
|
|
299
|
+
}
|
|
300
|
+
.pl-changelog__entry--latest .pl-changelog__dot::after {
|
|
301
|
+
background: var(--pl-color-accent);
|
|
302
|
+
}
|
|
303
|
+
.pl-changelog__body {
|
|
304
|
+
flex: 1;
|
|
305
|
+
min-width: 0;
|
|
306
|
+
padding-bottom: 8px;
|
|
307
|
+
}
|
|
308
|
+
.pl-changelog__meta {
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-wrap: wrap;
|
|
311
|
+
align-items: center;
|
|
312
|
+
gap: 12px;
|
|
313
|
+
margin-bottom: 12px;
|
|
314
|
+
}
|
|
315
|
+
.pl-changelog__version {
|
|
316
|
+
padding: 2px 8px;
|
|
317
|
+
font-family: var(--pl-font-mono);
|
|
318
|
+
font-size: 13px;
|
|
319
|
+
color: var(--pl-color-fg-muted);
|
|
320
|
+
background: var(--pl-color-bg-raised);
|
|
321
|
+
border: var(--pl-border-width) solid var(--pl-color-border);
|
|
322
|
+
border-radius: var(--pl-radius);
|
|
323
|
+
text-decoration: none;
|
|
324
|
+
transition: border-color var(--pl-motion-fast) var(--pl-motion-ease);
|
|
325
|
+
}
|
|
326
|
+
a.pl-changelog__version:hover {
|
|
327
|
+
border-color: var(--pl-color-accent);
|
|
328
|
+
}
|
|
329
|
+
.pl-changelog__entry--latest .pl-changelog__version {
|
|
330
|
+
color: var(--pl-color-accent-fg);
|
|
331
|
+
background: color-mix(in oklch, var(--pl-color-accent) 10%, transparent);
|
|
332
|
+
border-color: color-mix(in oklch, var(--pl-color-accent) 35%, transparent);
|
|
333
|
+
}
|
|
334
|
+
.pl-changelog__date {
|
|
335
|
+
font-size: 13px;
|
|
336
|
+
color: var(--pl-color-fg-subtle);
|
|
337
|
+
}
|
|
338
|
+
.pl-changelog__latest {
|
|
339
|
+
padding: 1px 6px;
|
|
340
|
+
font-family: var(--pl-font-mono);
|
|
341
|
+
font-size: 11px;
|
|
342
|
+
color: var(--pl-color-accent-fg);
|
|
343
|
+
background: color-mix(in oklch, var(--pl-color-accent) 8%, transparent);
|
|
344
|
+
border: var(--pl-border-width) solid color-mix(in oklch, var(--pl-color-accent) 25%, transparent);
|
|
345
|
+
border-radius: var(--pl-radius);
|
|
346
|
+
}
|
|
347
|
+
.pl-changelog__changes {
|
|
348
|
+
display: grid;
|
|
349
|
+
gap: 6px;
|
|
350
|
+
}
|
|
351
|
+
.pl-changelog__change {
|
|
352
|
+
display: flex;
|
|
353
|
+
align-items: flex-start;
|
|
354
|
+
gap: 8px;
|
|
355
|
+
font-size: 14px;
|
|
356
|
+
line-height: 1.5;
|
|
357
|
+
color: var(--pl-color-fg);
|
|
358
|
+
}
|
|
359
|
+
.pl-changelog__bullet {
|
|
360
|
+
flex-shrink: 0;
|
|
361
|
+
margin-top: 1px;
|
|
362
|
+
color: var(--pl-color-fg-subtle);
|
|
363
|
+
}
|
|
364
|
+
.pl-changelog__tag {
|
|
365
|
+
flex-shrink: 0;
|
|
366
|
+
min-width: 52px;
|
|
367
|
+
padding: 0 6px;
|
|
368
|
+
font-family: var(--pl-font-mono);
|
|
369
|
+
font-size: 10px;
|
|
370
|
+
line-height: 18px;
|
|
371
|
+
text-align: center;
|
|
372
|
+
text-transform: lowercase;
|
|
373
|
+
border: var(--pl-border-width) solid var(--pl-color-border);
|
|
374
|
+
border-radius: var(--pl-radius);
|
|
375
|
+
}
|
|
376
|
+
.pl-changelog__tag--added {
|
|
377
|
+
color: var(--pl-color-status-success);
|
|
378
|
+
border-color: color-mix(in oklch, var(--pl-color-status-success) 35%, transparent);
|
|
379
|
+
}
|
|
380
|
+
.pl-changelog__tag--fixed {
|
|
381
|
+
color: var(--pl-color-status-info);
|
|
382
|
+
border-color: color-mix(in oklch, var(--pl-color-status-info) 35%, transparent);
|
|
383
|
+
}
|
|
384
|
+
.pl-changelog__tag--changed {
|
|
385
|
+
color: var(--pl-color-status-warning);
|
|
386
|
+
border-color: color-mix(in oklch, var(--pl-color-status-warning) 35%, transparent);
|
|
387
|
+
}
|
|
388
|
+
.pl-changelog__tag--removed {
|
|
389
|
+
color: var(--pl-color-status-error);
|
|
390
|
+
border-color: color-mix(in oklch, var(--pl-color-status-error) 35%, transparent);
|
|
391
|
+
}
|