@contractspec/example.learning-journey-ui-onboarding 3.7.17 → 3.7.19
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/.turbo/turbo-build.log +48 -48
- package/CHANGELOG.md +32 -0
- package/dist/OnboardingMiniApp.js +1 -994
- package/dist/browser/OnboardingMiniApp.js +1 -994
- package/dist/browser/components/CodeSnippet.js +1 -65
- package/dist/browser/components/JourneyMap.js +1 -59
- package/dist/browser/components/StepChecklist.js +1 -97
- package/dist/browser/components/index.js +1 -219
- package/dist/browser/docs/index.js +2 -16
- package/dist/browser/docs/learning-journey-ui-onboarding.docblock.js +2 -16
- package/dist/browser/example.js +1 -32
- package/dist/browser/index.js +2 -1127
- package/dist/browser/learning-journey-ui-onboarding.feature.js +1 -18
- package/dist/browser/views/Overview.js +1 -240
- package/dist/browser/views/Progress.js +1 -275
- package/dist/browser/views/Steps.js +1 -192
- package/dist/browser/views/Timeline.js +1 -213
- package/dist/browser/views/index.js +1 -915
- package/dist/components/CodeSnippet.js +1 -65
- package/dist/components/JourneyMap.js +1 -59
- package/dist/components/StepChecklist.js +1 -97
- package/dist/components/index.js +1 -219
- package/dist/docs/index.js +2 -16
- package/dist/docs/learning-journey-ui-onboarding.docblock.js +2 -16
- package/dist/example.js +1 -32
- package/dist/index.js +2 -1127
- package/dist/learning-journey-ui-onboarding.feature.js +1 -18
- package/dist/node/OnboardingMiniApp.js +1 -994
- package/dist/node/components/CodeSnippet.js +1 -65
- package/dist/node/components/JourneyMap.js +1 -59
- package/dist/node/components/StepChecklist.js +1 -97
- package/dist/node/components/index.js +1 -219
- package/dist/node/docs/index.js +2 -16
- package/dist/node/docs/learning-journey-ui-onboarding.docblock.js +2 -16
- package/dist/node/example.js +1 -32
- package/dist/node/index.js +2 -1127
- package/dist/node/learning-journey-ui-onboarding.feature.js +1 -18
- package/dist/node/views/Overview.js +1 -240
- package/dist/node/views/Progress.js +1 -275
- package/dist/node/views/Steps.js +1 -192
- package/dist/node/views/Timeline.js +1 -213
- package/dist/node/views/index.js +1 -915
- package/dist/views/Overview.js +1 -240
- package/dist/views/Progress.js +1 -275
- package/dist/views/Steps.js +1 -192
- package/dist/views/Timeline.js +1 -213
- package/dist/views/index.js +1 -915
- package/package.json +12 -12
|
@@ -1,65 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { Button } from "@contractspec/lib.design-system";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
|
|
5
|
-
"use client";
|
|
6
|
-
function CodeSnippet({
|
|
7
|
-
code,
|
|
8
|
-
language = "typescript",
|
|
9
|
-
title
|
|
10
|
-
}) {
|
|
11
|
-
const [copied, setCopied] = useState(false);
|
|
12
|
-
const handleCopy = async () => {
|
|
13
|
-
await navigator.clipboard.writeText(code);
|
|
14
|
-
setCopied(true);
|
|
15
|
-
setTimeout(() => setCopied(false), 2000);
|
|
16
|
-
};
|
|
17
|
-
return /* @__PURE__ */ jsxDEV("div", {
|
|
18
|
-
className: "overflow-hidden rounded-lg border bg-muted/50",
|
|
19
|
-
children: [
|
|
20
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
21
|
-
className: "flex items-center justify-between border-b bg-muted px-4 py-2",
|
|
22
|
-
children: [
|
|
23
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
24
|
-
className: "flex items-center gap-2",
|
|
25
|
-
children: [
|
|
26
|
-
/* @__PURE__ */ jsxDEV("span", {
|
|
27
|
-
className: "font-medium text-muted-foreground text-xs uppercase",
|
|
28
|
-
children: language
|
|
29
|
-
}, undefined, false, undefined, this),
|
|
30
|
-
title && /* @__PURE__ */ jsxDEV(Fragment, {
|
|
31
|
-
children: [
|
|
32
|
-
/* @__PURE__ */ jsxDEV("span", {
|
|
33
|
-
className: "text-muted-foreground",
|
|
34
|
-
children: "•"
|
|
35
|
-
}, undefined, false, undefined, this),
|
|
36
|
-
/* @__PURE__ */ jsxDEV("span", {
|
|
37
|
-
className: "text-sm",
|
|
38
|
-
children: title
|
|
39
|
-
}, undefined, false, undefined, this)
|
|
40
|
-
]
|
|
41
|
-
}, undefined, true, undefined, this)
|
|
42
|
-
]
|
|
43
|
-
}, undefined, true, undefined, this),
|
|
44
|
-
/* @__PURE__ */ jsxDEV(Button, {
|
|
45
|
-
variant: "ghost",
|
|
46
|
-
size: "sm",
|
|
47
|
-
onClick: handleCopy,
|
|
48
|
-
className: "h-7 text-xs",
|
|
49
|
-
children: copied ? "✓ Copied" : "Copy"
|
|
50
|
-
}, undefined, false, undefined, this)
|
|
51
|
-
]
|
|
52
|
-
}, undefined, true, undefined, this),
|
|
53
|
-
/* @__PURE__ */ jsxDEV("pre", {
|
|
54
|
-
className: "overflow-x-auto p-4",
|
|
55
|
-
children: /* @__PURE__ */ jsxDEV("code", {
|
|
56
|
-
className: "text-sm",
|
|
57
|
-
children: code
|
|
58
|
-
}, undefined, false, undefined, this)
|
|
59
|
-
}, undefined, false, undefined, this)
|
|
60
|
-
]
|
|
61
|
-
}, undefined, true, undefined, this);
|
|
62
|
-
}
|
|
63
|
-
export {
|
|
64
|
-
CodeSnippet
|
|
65
|
-
};
|
|
1
|
+
import{Button as i}from"@contractspec/lib.design-system";import{useState as r}from"react";import{jsx as e,jsxs as t,Fragment as d}from"react/jsx-runtime";function u({code:a,language:n="typescript",title:o}){let[p,s]=r(!1);return t("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[t("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[t("div",{className:"flex items-center gap-2",children:[e("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:n}),o&&t(d,{children:[e("span",{className:"text-muted-foreground",children:"•"}),e("span",{className:"text-sm",children:o})]})]}),e(i,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(a),s(!0),setTimeout(()=>s(!1),2000)},className:"h-7 text-xs",children:p?"✓ Copied":"Copy"})]}),e("pre",{className:"overflow-x-auto p-4",children:e("code",{className:"text-sm",children:a})})]})}export{u as CodeSnippet};
|
|
@@ -1,59 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
3
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
4
|
-
"use client";
|
|
5
|
-
var SURFACE_ICONS = {
|
|
6
|
-
templates: "\uD83D\uDCCB",
|
|
7
|
-
"spec-editor": "✏️",
|
|
8
|
-
regenerator: "\uD83D\uDD04",
|
|
9
|
-
playground: "\uD83C\uDFAE",
|
|
10
|
-
evolution: "\uD83E\uDD16",
|
|
11
|
-
dashboard: "\uD83D\uDCCA",
|
|
12
|
-
settings: "⚙️",
|
|
13
|
-
default: "\uD83D\uDCCD"
|
|
14
|
-
};
|
|
15
|
-
function JourneyMap({
|
|
16
|
-
steps,
|
|
17
|
-
completedStepIds,
|
|
18
|
-
currentStepId
|
|
19
|
-
}) {
|
|
20
|
-
return /* @__PURE__ */ jsxDEV("div", {
|
|
21
|
-
className: "relative overflow-x-auto pb-4",
|
|
22
|
-
children: /* @__PURE__ */ jsxDEV("div", {
|
|
23
|
-
className: "flex min-w-max items-center gap-2",
|
|
24
|
-
children: steps.map((step, index) => {
|
|
25
|
-
const isCompleted = completedStepIds.includes(step.id);
|
|
26
|
-
const isCurrent = step.id === currentStepId;
|
|
27
|
-
const surface = step.metadata?.surface ?? "default";
|
|
28
|
-
const icon = SURFACE_ICONS[surface] ?? SURFACE_ICONS.default;
|
|
29
|
-
return /* @__PURE__ */ jsxDEV("div", {
|
|
30
|
-
className: "flex items-center",
|
|
31
|
-
children: [
|
|
32
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
33
|
-
className: "flex flex-col items-center gap-2",
|
|
34
|
-
children: [
|
|
35
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
36
|
-
className: cn("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all", isCompleted && "border-green-500 bg-green-500/10", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20", !isCompleted && !isCurrent && "border-muted bg-muted/50"),
|
|
37
|
-
children: isCompleted ? "✓" : icon
|
|
38
|
-
}, undefined, false, undefined, this),
|
|
39
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
40
|
-
className: "text-center",
|
|
41
|
-
children: /* @__PURE__ */ jsxDEV("p", {
|
|
42
|
-
className: cn("max-w-[100px] truncate font-medium text-xs", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
|
|
43
|
-
children: step.title
|
|
44
|
-
}, undefined, false, undefined, this)
|
|
45
|
-
}, undefined, false, undefined, this)
|
|
46
|
-
]
|
|
47
|
-
}, undefined, true, undefined, this),
|
|
48
|
-
index < steps.length - 1 && /* @__PURE__ */ jsxDEV("div", {
|
|
49
|
-
className: cn("mx-2 h-1 w-8 rounded-full transition-colors", completedStepIds.includes(steps[index + 1]?.id ?? "") ? "bg-green-500" : isCompleted ? "bg-green-500/50" : "bg-muted")
|
|
50
|
-
}, undefined, false, undefined, this)
|
|
51
|
-
]
|
|
52
|
-
}, step.id, true, undefined, this);
|
|
53
|
-
})
|
|
54
|
-
}, undefined, false, undefined, this)
|
|
55
|
-
}, undefined, false, undefined, this);
|
|
56
|
-
}
|
|
57
|
-
export {
|
|
58
|
-
JourneyMap
|
|
59
|
-
};
|
|
1
|
+
import{cn as z}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as h,jsxs as H}from"react/jsx-runtime";var G={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function P({steps:y,completedStepIds:B,currentStepId:J}){return h("div",{className:"relative overflow-x-auto pb-4",children:h("div",{className:"flex min-w-max items-center gap-2",children:y.map((q,D)=>{let g=B.includes(q.id),v=q.id===J,K=q.metadata?.surface??"default",L=G[K]??G.default;return H("div",{className:"flex items-center",children:[H("div",{className:"flex flex-col items-center gap-2",children:[h("div",{className:z("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",g&&"border-green-500 bg-green-500/10",v&&!g&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!g&&!v&&"border-muted bg-muted/50"),children:g?"✓":L}),h("div",{className:"text-center",children:h("p",{className:z("max-w-[100px] truncate font-medium text-xs",g&&"text-green-500",v&&!g&&"text-violet-500",!g&&!v&&"text-muted-foreground"),children:q.title})})]}),D<y.length-1&&h("div",{className:z("mx-2 h-1 w-8 rounded-full transition-colors",B.includes(y[D+1]?.id??"")?"bg-green-500":g?"bg-green-500/50":"bg-muted")})]},q.id)})})})}export{P as JourneyMap};
|
|
@@ -1,97 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { Button } from "@contractspec/lib.design-system";
|
|
3
|
-
import { cn } from "@contractspec/lib.ui-kit-core";
|
|
4
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
5
|
-
"use client";
|
|
6
|
-
function StepChecklist({
|
|
7
|
-
step,
|
|
8
|
-
stepNumber,
|
|
9
|
-
isCompleted,
|
|
10
|
-
isCurrent,
|
|
11
|
-
isExpanded,
|
|
12
|
-
onToggle,
|
|
13
|
-
onComplete
|
|
14
|
-
}) {
|
|
15
|
-
return /* @__PURE__ */ jsxDEV("div", {
|
|
16
|
-
className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
|
|
17
|
-
children: [
|
|
18
|
-
/* @__PURE__ */ jsxDEV("button", {
|
|
19
|
-
type: "button",
|
|
20
|
-
className: "flex w-full items-center gap-4 p-4 text-left",
|
|
21
|
-
onClick: onToggle,
|
|
22
|
-
children: [
|
|
23
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
24
|
-
className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
|
|
25
|
-
children: isCompleted ? "✓" : stepNumber
|
|
26
|
-
}, undefined, false, undefined, this),
|
|
27
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
28
|
-
className: "min-w-0 flex-1",
|
|
29
|
-
children: [
|
|
30
|
-
/* @__PURE__ */ jsxDEV("h4", {
|
|
31
|
-
className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
|
|
32
|
-
children: step.title
|
|
33
|
-
}, undefined, false, undefined, this),
|
|
34
|
-
!isExpanded && step.description && /* @__PURE__ */ jsxDEV("p", {
|
|
35
|
-
className: "truncate text-muted-foreground text-sm",
|
|
36
|
-
children: step.description
|
|
37
|
-
}, undefined, false, undefined, this)
|
|
38
|
-
]
|
|
39
|
-
}, undefined, true, undefined, this),
|
|
40
|
-
step.xpReward && /* @__PURE__ */ jsxDEV("span", {
|
|
41
|
-
className: cn("shrink-0 rounded-full px-2 py-1 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
|
|
42
|
-
children: [
|
|
43
|
-
"+",
|
|
44
|
-
step.xpReward,
|
|
45
|
-
" XP"
|
|
46
|
-
]
|
|
47
|
-
}, undefined, true, undefined, this),
|
|
48
|
-
/* @__PURE__ */ jsxDEV("span", {
|
|
49
|
-
className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
|
|
50
|
-
children: "▼"
|
|
51
|
-
}, undefined, false, undefined, this)
|
|
52
|
-
]
|
|
53
|
-
}, undefined, true, undefined, this),
|
|
54
|
-
isExpanded && /* @__PURE__ */ jsxDEV("div", {
|
|
55
|
-
className: "border-t px-4 py-4",
|
|
56
|
-
children: [
|
|
57
|
-
step.description && /* @__PURE__ */ jsxDEV("p", {
|
|
58
|
-
className: "mb-4 text-muted-foreground",
|
|
59
|
-
children: step.description
|
|
60
|
-
}, undefined, false, undefined, this),
|
|
61
|
-
step.instructions && /* @__PURE__ */ jsxDEV("div", {
|
|
62
|
-
className: "mb-4 rounded-lg bg-muted p-4",
|
|
63
|
-
children: [
|
|
64
|
-
/* @__PURE__ */ jsxDEV("p", {
|
|
65
|
-
className: "mb-2 font-medium text-sm",
|
|
66
|
-
children: "Instructions:"
|
|
67
|
-
}, undefined, false, undefined, this),
|
|
68
|
-
/* @__PURE__ */ jsxDEV("p", {
|
|
69
|
-
className: "text-muted-foreground text-sm",
|
|
70
|
-
children: step.instructions
|
|
71
|
-
}, undefined, false, undefined, this)
|
|
72
|
-
]
|
|
73
|
-
}, undefined, true, undefined, this),
|
|
74
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
75
|
-
className: "flex flex-wrap gap-2",
|
|
76
|
-
children: [
|
|
77
|
-
step.actionUrl && /* @__PURE__ */ jsxDEV(Button, {
|
|
78
|
-
variant: "outline",
|
|
79
|
-
size: "sm",
|
|
80
|
-
onClick: () => window.open(step.actionUrl, "_blank"),
|
|
81
|
-
children: step.actionLabel ?? "Try it"
|
|
82
|
-
}, undefined, false, undefined, this),
|
|
83
|
-
!isCompleted && /* @__PURE__ */ jsxDEV(Button, {
|
|
84
|
-
size: "sm",
|
|
85
|
-
onClick: onComplete,
|
|
86
|
-
children: "Mark as Complete"
|
|
87
|
-
}, undefined, false, undefined, this)
|
|
88
|
-
]
|
|
89
|
-
}, undefined, true, undefined, this)
|
|
90
|
-
]
|
|
91
|
-
}, undefined, true, undefined, this)
|
|
92
|
-
]
|
|
93
|
-
}, undefined, true, undefined, this);
|
|
94
|
-
}
|
|
95
|
-
export {
|
|
96
|
-
StepChecklist
|
|
97
|
-
};
|
|
1
|
+
import{Button as d}from"@contractspec/lib.design-system";import{cn as a}from"@contractspec/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function g({step:e,stepNumber:l,isCompleted:t,isCurrent:n,isExpanded:i,onToggle:c,onComplete:m}){return r("div",{className:a("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:c,children:[o("div",{className:a("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",t&&"border-green-500 bg-green-500 text-white",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:t?"✓":l}),r("div",{className:"min-w-0 flex-1",children:[o("h4",{className:a("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!i&&e.description&&o("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r("span",{className:a("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",t?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),o("span",{className:a("shrink-0 transition-transform",i&&"rotate-180"),children:"▼"})]}),i&&r("div",{className:"border-t px-4 py-4",children:[e.description&&o("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[o("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),r("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(d,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(d,{size:"sm",onClick:m,children:"Mark as Complete"})]})]})]})}export{g as StepChecklist};
|
|
@@ -1,219 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { Button } from "@contractspec/lib.design-system";
|
|
3
|
-
import { cn } from "@contractspec/lib.ui-kit-core";
|
|
4
|
-
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
5
|
-
"use client";
|
|
6
|
-
function StepChecklist({
|
|
7
|
-
step,
|
|
8
|
-
stepNumber,
|
|
9
|
-
isCompleted,
|
|
10
|
-
isCurrent,
|
|
11
|
-
isExpanded,
|
|
12
|
-
onToggle,
|
|
13
|
-
onComplete
|
|
14
|
-
}) {
|
|
15
|
-
return /* @__PURE__ */ jsxDEV("div", {
|
|
16
|
-
className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
|
|
17
|
-
children: [
|
|
18
|
-
/* @__PURE__ */ jsxDEV("button", {
|
|
19
|
-
type: "button",
|
|
20
|
-
className: "flex w-full items-center gap-4 p-4 text-left",
|
|
21
|
-
onClick: onToggle,
|
|
22
|
-
children: [
|
|
23
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
24
|
-
className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
|
|
25
|
-
children: isCompleted ? "✓" : stepNumber
|
|
26
|
-
}, undefined, false, undefined, this),
|
|
27
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
28
|
-
className: "min-w-0 flex-1",
|
|
29
|
-
children: [
|
|
30
|
-
/* @__PURE__ */ jsxDEV("h4", {
|
|
31
|
-
className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
|
|
32
|
-
children: step.title
|
|
33
|
-
}, undefined, false, undefined, this),
|
|
34
|
-
!isExpanded && step.description && /* @__PURE__ */ jsxDEV("p", {
|
|
35
|
-
className: "truncate text-muted-foreground text-sm",
|
|
36
|
-
children: step.description
|
|
37
|
-
}, undefined, false, undefined, this)
|
|
38
|
-
]
|
|
39
|
-
}, undefined, true, undefined, this),
|
|
40
|
-
step.xpReward && /* @__PURE__ */ jsxDEV("span", {
|
|
41
|
-
className: cn("shrink-0 rounded-full px-2 py-1 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
|
|
42
|
-
children: [
|
|
43
|
-
"+",
|
|
44
|
-
step.xpReward,
|
|
45
|
-
" XP"
|
|
46
|
-
]
|
|
47
|
-
}, undefined, true, undefined, this),
|
|
48
|
-
/* @__PURE__ */ jsxDEV("span", {
|
|
49
|
-
className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
|
|
50
|
-
children: "▼"
|
|
51
|
-
}, undefined, false, undefined, this)
|
|
52
|
-
]
|
|
53
|
-
}, undefined, true, undefined, this),
|
|
54
|
-
isExpanded && /* @__PURE__ */ jsxDEV("div", {
|
|
55
|
-
className: "border-t px-4 py-4",
|
|
56
|
-
children: [
|
|
57
|
-
step.description && /* @__PURE__ */ jsxDEV("p", {
|
|
58
|
-
className: "mb-4 text-muted-foreground",
|
|
59
|
-
children: step.description
|
|
60
|
-
}, undefined, false, undefined, this),
|
|
61
|
-
step.instructions && /* @__PURE__ */ jsxDEV("div", {
|
|
62
|
-
className: "mb-4 rounded-lg bg-muted p-4",
|
|
63
|
-
children: [
|
|
64
|
-
/* @__PURE__ */ jsxDEV("p", {
|
|
65
|
-
className: "mb-2 font-medium text-sm",
|
|
66
|
-
children: "Instructions:"
|
|
67
|
-
}, undefined, false, undefined, this),
|
|
68
|
-
/* @__PURE__ */ jsxDEV("p", {
|
|
69
|
-
className: "text-muted-foreground text-sm",
|
|
70
|
-
children: step.instructions
|
|
71
|
-
}, undefined, false, undefined, this)
|
|
72
|
-
]
|
|
73
|
-
}, undefined, true, undefined, this),
|
|
74
|
-
/* @__PURE__ */ jsxDEV("div", {
|
|
75
|
-
className: "flex flex-wrap gap-2",
|
|
76
|
-
children: [
|
|
77
|
-
step.actionUrl && /* @__PURE__ */ jsxDEV(Button, {
|
|
78
|
-
variant: "outline",
|
|
79
|
-
size: "sm",
|
|
80
|
-
onClick: () => window.open(step.actionUrl, "_blank"),
|
|
81
|
-
children: step.actionLabel ?? "Try it"
|
|
82
|
-
}, undefined, false, undefined, this),
|
|
83
|
-
!isCompleted && /* @__PURE__ */ jsxDEV(Button, {
|
|
84
|
-
size: "sm",
|
|
85
|
-
onClick: onComplete,
|
|
86
|
-
children: "Mark as Complete"
|
|
87
|
-
}, undefined, false, undefined, this)
|
|
88
|
-
]
|
|
89
|
-
}, undefined, true, undefined, this)
|
|
90
|
-
]
|
|
91
|
-
}, undefined, true, undefined, this)
|
|
92
|
-
]
|
|
93
|
-
}, undefined, true, undefined, this);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
// src/components/JourneyMap.tsx
|
|
97
|
-
import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
|
|
98
|
-
import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
|
|
99
|
-
"use client";
|
|
100
|
-
var SURFACE_ICONS = {
|
|
101
|
-
templates: "\uD83D\uDCCB",
|
|
102
|
-
"spec-editor": "✏️",
|
|
103
|
-
regenerator: "\uD83D\uDD04",
|
|
104
|
-
playground: "\uD83C\uDFAE",
|
|
105
|
-
evolution: "\uD83E\uDD16",
|
|
106
|
-
dashboard: "\uD83D\uDCCA",
|
|
107
|
-
settings: "⚙️",
|
|
108
|
-
default: "\uD83D\uDCCD"
|
|
109
|
-
};
|
|
110
|
-
function JourneyMap({
|
|
111
|
-
steps,
|
|
112
|
-
completedStepIds,
|
|
113
|
-
currentStepId
|
|
114
|
-
}) {
|
|
115
|
-
return /* @__PURE__ */ jsxDEV2("div", {
|
|
116
|
-
className: "relative overflow-x-auto pb-4",
|
|
117
|
-
children: /* @__PURE__ */ jsxDEV2("div", {
|
|
118
|
-
className: "flex min-w-max items-center gap-2",
|
|
119
|
-
children: steps.map((step, index) => {
|
|
120
|
-
const isCompleted = completedStepIds.includes(step.id);
|
|
121
|
-
const isCurrent = step.id === currentStepId;
|
|
122
|
-
const surface = step.metadata?.surface ?? "default";
|
|
123
|
-
const icon = SURFACE_ICONS[surface] ?? SURFACE_ICONS.default;
|
|
124
|
-
return /* @__PURE__ */ jsxDEV2("div", {
|
|
125
|
-
className: "flex items-center",
|
|
126
|
-
children: [
|
|
127
|
-
/* @__PURE__ */ jsxDEV2("div", {
|
|
128
|
-
className: "flex flex-col items-center gap-2",
|
|
129
|
-
children: [
|
|
130
|
-
/* @__PURE__ */ jsxDEV2("div", {
|
|
131
|
-
className: cn2("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all", isCompleted && "border-green-500 bg-green-500/10", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20", !isCompleted && !isCurrent && "border-muted bg-muted/50"),
|
|
132
|
-
children: isCompleted ? "✓" : icon
|
|
133
|
-
}, undefined, false, undefined, this),
|
|
134
|
-
/* @__PURE__ */ jsxDEV2("div", {
|
|
135
|
-
className: "text-center",
|
|
136
|
-
children: /* @__PURE__ */ jsxDEV2("p", {
|
|
137
|
-
className: cn2("max-w-[100px] truncate font-medium text-xs", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
|
|
138
|
-
children: step.title
|
|
139
|
-
}, undefined, false, undefined, this)
|
|
140
|
-
}, undefined, false, undefined, this)
|
|
141
|
-
]
|
|
142
|
-
}, undefined, true, undefined, this),
|
|
143
|
-
index < steps.length - 1 && /* @__PURE__ */ jsxDEV2("div", {
|
|
144
|
-
className: cn2("mx-2 h-1 w-8 rounded-full transition-colors", completedStepIds.includes(steps[index + 1]?.id ?? "") ? "bg-green-500" : isCompleted ? "bg-green-500/50" : "bg-muted")
|
|
145
|
-
}, undefined, false, undefined, this)
|
|
146
|
-
]
|
|
147
|
-
}, step.id, true, undefined, this);
|
|
148
|
-
})
|
|
149
|
-
}, undefined, false, undefined, this)
|
|
150
|
-
}, undefined, false, undefined, this);
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
// src/components/CodeSnippet.tsx
|
|
154
|
-
import { Button as Button2 } from "@contractspec/lib.design-system";
|
|
155
|
-
import { useState } from "react";
|
|
156
|
-
import { jsxDEV as jsxDEV3, Fragment } from "react/jsx-dev-runtime";
|
|
157
|
-
"use client";
|
|
158
|
-
function CodeSnippet({
|
|
159
|
-
code,
|
|
160
|
-
language = "typescript",
|
|
161
|
-
title
|
|
162
|
-
}) {
|
|
163
|
-
const [copied, setCopied] = useState(false);
|
|
164
|
-
const handleCopy = async () => {
|
|
165
|
-
await navigator.clipboard.writeText(code);
|
|
166
|
-
setCopied(true);
|
|
167
|
-
setTimeout(() => setCopied(false), 2000);
|
|
168
|
-
};
|
|
169
|
-
return /* @__PURE__ */ jsxDEV3("div", {
|
|
170
|
-
className: "overflow-hidden rounded-lg border bg-muted/50",
|
|
171
|
-
children: [
|
|
172
|
-
/* @__PURE__ */ jsxDEV3("div", {
|
|
173
|
-
className: "flex items-center justify-between border-b bg-muted px-4 py-2",
|
|
174
|
-
children: [
|
|
175
|
-
/* @__PURE__ */ jsxDEV3("div", {
|
|
176
|
-
className: "flex items-center gap-2",
|
|
177
|
-
children: [
|
|
178
|
-
/* @__PURE__ */ jsxDEV3("span", {
|
|
179
|
-
className: "font-medium text-muted-foreground text-xs uppercase",
|
|
180
|
-
children: language
|
|
181
|
-
}, undefined, false, undefined, this),
|
|
182
|
-
title && /* @__PURE__ */ jsxDEV3(Fragment, {
|
|
183
|
-
children: [
|
|
184
|
-
/* @__PURE__ */ jsxDEV3("span", {
|
|
185
|
-
className: "text-muted-foreground",
|
|
186
|
-
children: "•"
|
|
187
|
-
}, undefined, false, undefined, this),
|
|
188
|
-
/* @__PURE__ */ jsxDEV3("span", {
|
|
189
|
-
className: "text-sm",
|
|
190
|
-
children: title
|
|
191
|
-
}, undefined, false, undefined, this)
|
|
192
|
-
]
|
|
193
|
-
}, undefined, true, undefined, this)
|
|
194
|
-
]
|
|
195
|
-
}, undefined, true, undefined, this),
|
|
196
|
-
/* @__PURE__ */ jsxDEV3(Button2, {
|
|
197
|
-
variant: "ghost",
|
|
198
|
-
size: "sm",
|
|
199
|
-
onClick: handleCopy,
|
|
200
|
-
className: "h-7 text-xs",
|
|
201
|
-
children: copied ? "✓ Copied" : "Copy"
|
|
202
|
-
}, undefined, false, undefined, this)
|
|
203
|
-
]
|
|
204
|
-
}, undefined, true, undefined, this),
|
|
205
|
-
/* @__PURE__ */ jsxDEV3("pre", {
|
|
206
|
-
className: "overflow-x-auto p-4",
|
|
207
|
-
children: /* @__PURE__ */ jsxDEV3("code", {
|
|
208
|
-
className: "text-sm",
|
|
209
|
-
children: code
|
|
210
|
-
}, undefined, false, undefined, this)
|
|
211
|
-
}, undefined, false, undefined, this)
|
|
212
|
-
]
|
|
213
|
-
}, undefined, true, undefined, this);
|
|
214
|
-
}
|
|
215
|
-
export {
|
|
216
|
-
StepChecklist,
|
|
217
|
-
JourneyMap,
|
|
218
|
-
CodeSnippet
|
|
219
|
-
};
|
|
1
|
+
import{Button as b}from"@contractspec/lib.design-system";import{cn as u}from"@contractspec/lib.ui-kit-core";import{jsx as a,jsxs as i}from"react/jsx-runtime";function h({step:e,stepNumber:d,isCompleted:o,isCurrent:t,isExpanded:n,onToggle:r,onComplete:l}){return i("div",{className:u("rounded-xl border transition-all",o&&"border-green-500/50 bg-green-500/5",t&&!o&&"border-violet-500 bg-violet-500/5",!o&&!t&&"border-border"),children:[i("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:r,children:[a("div",{className:u("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",o&&"border-green-500 bg-green-500 text-white",t&&!o&&"border-violet-500 text-violet-500",!o&&!t&&"border-muted-foreground text-muted-foreground"),children:o?"✓":d}),i("div",{className:"min-w-0 flex-1",children:[a("h4",{className:u("font-semibold",o&&"text-green-500",t&&!o&&"text-foreground",!o&&!t&&"text-muted-foreground"),children:e.title}),!n&&e.description&&a("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&i("span",{className:u("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",o?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),a("span",{className:u("shrink-0 transition-transform",n&&"rotate-180"),children:"▼"})]}),n&&i("div",{className:"border-t px-4 py-4",children:[e.description&&a("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&i("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[a("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),a("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),i("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&a(b,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!o&&a(b,{size:"sm",onClick:l,children:"Mark as Complete"})]})]})]})}import{cn as g}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as c,jsxs as v}from"react/jsx-runtime";var p={templates:"\uD83D\uDCCB","spec-editor":"✏️",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"⚙️",default:"\uD83D\uDCCD"};function k({steps:e,completedStepIds:d,currentStepId:o}){return c("div",{className:"relative overflow-x-auto pb-4",children:c("div",{className:"flex min-w-max items-center gap-2",children:e.map((t,n)=>{let r=d.includes(t.id),l=t.id===o,N=t.metadata?.surface??"default",y=p[N]??p.default;return v("div",{className:"flex items-center",children:[v("div",{className:"flex flex-col items-center gap-2",children:[c("div",{className:g("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",r&&"border-green-500 bg-green-500/10",l&&!r&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!r&&!l&&"border-muted bg-muted/50"),children:r?"✓":y}),c("div",{className:"text-center",children:c("p",{className:g("max-w-[100px] truncate font-medium text-xs",r&&"text-green-500",l&&!r&&"text-violet-500",!r&&!l&&"text-muted-foreground"),children:t.title})})]}),n<e.length-1&&c("div",{className:g("mx-2 h-1 w-8 rounded-full transition-colors",d.includes(e[n+1]?.id??"")?"bg-green-500":r?"bg-green-500/50":"bg-muted")})]},t.id)})})})}import{Button as w}from"@contractspec/lib.design-system";import{useState as s}from"react";import{jsx as m,jsxs as f,Fragment as P}from"react/jsx-runtime";function B({code:e,language:d="typescript",title:o}){let[t,n]=s(!1);return f("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[f("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[f("div",{className:"flex items-center gap-2",children:[m("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:d}),o&&f(P,{children:[m("span",{className:"text-muted-foreground",children:"•"}),m("span",{className:"text-sm",children:o})]})]}),m(w,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(e),n(!0),setTimeout(()=>n(!1),2000)},className:"h-7 text-xs",children:t?"✓ Copied":"Copy"})]}),m("pre",{className:"overflow-x-auto p-4",children:m("code",{className:"text-sm",children:e})})]})}export{h as StepChecklist,k as JourneyMap,B as CodeSnippet};
|
|
@@ -1,22 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
|
|
3
|
-
var blocks = [
|
|
4
|
-
{
|
|
5
|
-
id: "docs.examples.learning-journey-ui-onboarding",
|
|
6
|
-
title: "Learning Journey UI — Onboarding",
|
|
7
|
-
summary: "UI mini-app components for onboarding: checklists, snippets, and journey mapping.",
|
|
8
|
-
kind: "reference",
|
|
9
|
-
visibility: "public",
|
|
10
|
-
route: "/docs/examples/learning-journey-ui-onboarding",
|
|
11
|
-
tags: ["learning", "ui", "onboarding"],
|
|
12
|
-
body: `## Includes
|
|
1
|
+
import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI — Onboarding",summary:"UI mini-app components for onboarding: checklists, snippets, and journey mapping.",kind:"reference",visibility:"public",route:"/docs/examples/learning-journey-ui-onboarding",tags:["learning","ui","onboarding"],body:`## Includes
|
|
13
2
|
- Onboarding mini-app shell
|
|
14
3
|
- Views: overview, steps, progress, timeline
|
|
15
4
|
- Components: step checklist, code snippet, journey map
|
|
16
5
|
|
|
17
6
|
## Notes
|
|
18
7
|
- Compose with design system components.
|
|
19
|
-
- Ensure accessible labels and keyboard navigation.`
|
|
20
|
-
}
|
|
21
|
-
];
|
|
22
|
-
registerDocBlocks(blocks);
|
|
8
|
+
- Ensure accessible labels and keyboard navigation.`}];f(h);
|
|
@@ -1,22 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
|
|
3
|
-
var blocks = [
|
|
4
|
-
{
|
|
5
|
-
id: "docs.examples.learning-journey-ui-onboarding",
|
|
6
|
-
title: "Learning Journey UI — Onboarding",
|
|
7
|
-
summary: "UI mini-app components for onboarding: checklists, snippets, and journey mapping.",
|
|
8
|
-
kind: "reference",
|
|
9
|
-
visibility: "public",
|
|
10
|
-
route: "/docs/examples/learning-journey-ui-onboarding",
|
|
11
|
-
tags: ["learning", "ui", "onboarding"],
|
|
12
|
-
body: `## Includes
|
|
1
|
+
import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI — Onboarding",summary:"UI mini-app components for onboarding: checklists, snippets, and journey mapping.",kind:"reference",visibility:"public",route:"/docs/examples/learning-journey-ui-onboarding",tags:["learning","ui","onboarding"],body:`## Includes
|
|
13
2
|
- Onboarding mini-app shell
|
|
14
3
|
- Views: overview, steps, progress, timeline
|
|
15
4
|
- Components: step checklist, code snippet, journey map
|
|
16
5
|
|
|
17
6
|
## Notes
|
|
18
7
|
- Compose with design system components.
|
|
19
|
-
- Ensure accessible labels and keyboard navigation.`
|
|
20
|
-
}
|
|
21
|
-
];
|
|
22
|
-
registerDocBlocks(blocks);
|
|
8
|
+
- Ensure accessible labels and keyboard navigation.`}];f(h);
|
package/dist/browser/example.js
CHANGED
|
@@ -1,32 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { defineExample } from "@contractspec/lib.contracts-spec";
|
|
3
|
-
var example = defineExample({
|
|
4
|
-
meta: {
|
|
5
|
-
key: "learning-journey-ui-onboarding",
|
|
6
|
-
version: "1.0.0",
|
|
7
|
-
title: "Learning Journey UI — Onboarding",
|
|
8
|
-
description: "UI mini-app for onboarding patterns: checklists, code snippets, journey map.",
|
|
9
|
-
kind: "ui",
|
|
10
|
-
visibility: "public",
|
|
11
|
-
stability: "experimental",
|
|
12
|
-
owners: ["@platform.core"],
|
|
13
|
-
tags: ["learning", "ui", "onboarding"]
|
|
14
|
-
},
|
|
15
|
-
docs: {
|
|
16
|
-
rootDocId: "docs.examples.learning-journey-ui-onboarding"
|
|
17
|
-
},
|
|
18
|
-
entrypoints: {
|
|
19
|
-
packageName: "@contractspec/example.learning-journey-ui-onboarding",
|
|
20
|
-
docs: "./docs"
|
|
21
|
-
},
|
|
22
|
-
surfaces: {
|
|
23
|
-
templates: true,
|
|
24
|
-
sandbox: { enabled: true, modes: ["playground", "markdown"] },
|
|
25
|
-
studio: { enabled: true, installable: true },
|
|
26
|
-
mcp: { enabled: true }
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
var example_default = example;
|
|
30
|
-
export {
|
|
31
|
-
example_default as default
|
|
32
|
-
};
|
|
1
|
+
import{defineExample as g}from"@contractspec/lib.contracts-spec";var h=g({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI — Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),q=h;export{q as default};
|