@syscore/ui-library 1.3.7 → 1.4.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/client/components/icons/ConceptIcons.tsx +2 -74
- package/client/components/ui/hero-section.tsx +45 -0
- package/client/components/ui/navigation.tsx +237 -76
- package/client/global.css +14 -3
- package/client/lib/concept-colors.ts +115 -0
- package/client/lib/concept-icons.ts +45 -0
- package/client/ui/Card.stories.tsx +2 -98
- package/client/ui/Hero.stories.tsx +72 -0
- package/client/ui/Navigation.stories.tsx +30 -21
- package/client/ui/Panel.stories.tsx +480 -0
- package/dist/img/half-sphere.png +0 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.es.js +372 -219
- package/package.json +1 -1
|
@@ -0,0 +1,480 @@
|
|
|
1
|
+
import { LayoutGroup } from "motion/react";
|
|
2
|
+
import { motion } from "motion/react";
|
|
3
|
+
import { AnimatePresence } from "motion/react";
|
|
4
|
+
import { getConceptColor } from "../lib/concept-colors";
|
|
5
|
+
import { CodeBadge } from "../components/ui/code-badge";
|
|
6
|
+
import { cn } from "../lib/utils";
|
|
7
|
+
import { Tag } from "../components/ui/tag";
|
|
8
|
+
import { CONCEPT_ICONS } from "../lib/concept-icons";
|
|
9
|
+
import { conceptColors } from "../lib/concept-colors";
|
|
10
|
+
import { Card } from "../components/ui/card";
|
|
11
|
+
import { useState } from "react";
|
|
12
|
+
import { Label } from "../components/ui/label";
|
|
13
|
+
import { Toggle } from "../components/ui/toggle";
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// Order of concepts for display
|
|
17
|
+
const conceptOrder: ConceptSlug[] = [
|
|
18
|
+
"air",
|
|
19
|
+
"water",
|
|
20
|
+
"nourishment",
|
|
21
|
+
"light",
|
|
22
|
+
"movement",
|
|
23
|
+
"thermal-comfort",
|
|
24
|
+
"sound",
|
|
25
|
+
"materials",
|
|
26
|
+
"community",
|
|
27
|
+
"mind",
|
|
28
|
+
"innovation",
|
|
29
|
+
];
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
// Wrapper component that manages state and accepts initial values from args
|
|
33
|
+
const ExploreSidePanelView = (args: any) => {
|
|
34
|
+
const { concepts,
|
|
35
|
+
themes,
|
|
36
|
+
strategies,
|
|
37
|
+
selectedConcept,
|
|
38
|
+
selectedTheme,
|
|
39
|
+
selectedStrategy,
|
|
40
|
+
onConceptClick,
|
|
41
|
+
onThemeClick,
|
|
42
|
+
onStrategyClick,
|
|
43
|
+
scope,
|
|
44
|
+
onScopeChange,
|
|
45
|
+
activePursuits,
|
|
46
|
+
onPursuitToggle, } = args;
|
|
47
|
+
|
|
48
|
+
// Local UI state (hover)
|
|
49
|
+
const [hoveredConcept, setHoveredConcept] = useState<ConceptSlug | null>(null);
|
|
50
|
+
const [hoveredTheme, setHoveredTheme] = useState<string | null>(null);
|
|
51
|
+
const [hoveredStrategy, setHoveredStrategy] = useState<string | null>(null);
|
|
52
|
+
|
|
53
|
+
// Derived data
|
|
54
|
+
const conceptsByKey = new Map(concepts.map((c) => [c.conceptKey, c]));
|
|
55
|
+
const activeColor = getConceptColor(selectedConcept || "community");
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<LayoutGroup>
|
|
60
|
+
<Card className="space-y-8 rounded-r-none pt-8 border-r-0">
|
|
61
|
+
{/* CONCEPT Section */}
|
|
62
|
+
<motion.section layout="position" className="flex flex-col gap-3">
|
|
63
|
+
<Label className="px-2 text-gray-600 flex items-center min-w-0">
|
|
64
|
+
<span className="shrink-0 pr-1">CONCEPT</span>
|
|
65
|
+
<AnimatePresence mode="wait">
|
|
66
|
+
{hoveredConcept && (
|
|
67
|
+
<motion.span
|
|
68
|
+
key={hoveredConcept}
|
|
69
|
+
initial={{ opacity: 0, x: -4 }}
|
|
70
|
+
animate={{ opacity: 1, x: 0 }}
|
|
71
|
+
exit={{ opacity: 0, x: 4 }}
|
|
72
|
+
transition={{ duration: 0.15 }}
|
|
73
|
+
className="truncate"
|
|
74
|
+
style={{ willChange: "opacity, transform" }}
|
|
75
|
+
>
|
|
76
|
+
· {conceptsByKey.get(hoveredConcept)?.name.toUpperCase()}
|
|
77
|
+
</motion.span>
|
|
78
|
+
)}
|
|
79
|
+
</AnimatePresence>
|
|
80
|
+
</Label>
|
|
81
|
+
|
|
82
|
+
<div className="grid grid-cols-3 lg:grid-cols-5 max-w-max gap-2">
|
|
83
|
+
{conceptOrder.map((slug) => {
|
|
84
|
+
const Icon = CONCEPT_ICONS[slug];
|
|
85
|
+
const isSelected = selectedConcept === slug;
|
|
86
|
+
const isHovered = hoveredConcept === slug;
|
|
87
|
+
const isFilled = (isSelected && !selectedTheme) || isHovered;
|
|
88
|
+
const isOutlined = isSelected && !!selectedTheme && !isHovered;
|
|
89
|
+
const color = getConceptColor(slug);
|
|
90
|
+
|
|
91
|
+
return (
|
|
92
|
+
<button
|
|
93
|
+
key={slug}
|
|
94
|
+
onClick={() => onConceptClick(slug)}
|
|
95
|
+
onMouseEnter={() => setHoveredConcept(slug)}
|
|
96
|
+
onMouseLeave={() => setHoveredConcept(null)}
|
|
97
|
+
className="rounded-full transition-all duration-200 size-12 flex items-center justify-center cursor-pointer"
|
|
98
|
+
style={(() => {
|
|
99
|
+
if (isOutlined) {
|
|
100
|
+
return {
|
|
101
|
+
border: `3px solid ${color.contrast || color.solid}`,
|
|
102
|
+
backgroundColor: "white",
|
|
103
|
+
};
|
|
104
|
+
}
|
|
105
|
+
if (isFilled) {
|
|
106
|
+
return {
|
|
107
|
+
backgroundColor: color.contrast || color.solid,
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
return undefined;
|
|
111
|
+
})()}
|
|
112
|
+
aria-label={conceptsByKey.get(slug)?.name}
|
|
113
|
+
>
|
|
114
|
+
<Icon active={isFilled} outlined={isOutlined} className="size-12" />
|
|
115
|
+
</button>
|
|
116
|
+
);
|
|
117
|
+
})}
|
|
118
|
+
</div>
|
|
119
|
+
</motion.section>
|
|
120
|
+
|
|
121
|
+
{/* THEME Section - Animated reveal */}
|
|
122
|
+
<AnimatePresence mode="wait">
|
|
123
|
+
{themes.length > 0 && (
|
|
124
|
+
<motion.section
|
|
125
|
+
key="theme-section"
|
|
126
|
+
layout="position"
|
|
127
|
+
initial={{ opacity: 0 }}
|
|
128
|
+
animate={{ opacity: 1 }}
|
|
129
|
+
exit={{ opacity: 0 }}
|
|
130
|
+
transition={{ duration: 0.2 }}
|
|
131
|
+
className="flex flex-col gap-3"
|
|
132
|
+
style={{ willChange: "opacity" }}
|
|
133
|
+
>
|
|
134
|
+
<Label className="px-2 text-gray-600 flex items-center min-w-0">
|
|
135
|
+
<span className="shrink-0 pr-1">THEME</span>
|
|
136
|
+
<AnimatePresence mode="wait">
|
|
137
|
+
{hoveredTheme && (
|
|
138
|
+
<motion.span
|
|
139
|
+
key={hoveredTheme}
|
|
140
|
+
initial={{ opacity: 0, x: -4 }}
|
|
141
|
+
animate={{ opacity: 1, x: 0 }}
|
|
142
|
+
exit={{ opacity: 0, x: 4 }}
|
|
143
|
+
transition={{ duration: 0.15 }}
|
|
144
|
+
className="truncate"
|
|
145
|
+
style={{ willChange: "opacity, transform" }}
|
|
146
|
+
>
|
|
147
|
+
· {themes.find((t) => t.code === hoveredTheme)?.name.toUpperCase()}
|
|
148
|
+
</motion.span>
|
|
149
|
+
)}
|
|
150
|
+
</AnimatePresence>
|
|
151
|
+
</Label>
|
|
152
|
+
<div className="grid grid-cols-3 lg:grid-cols-5 max-w-max gap-2">
|
|
153
|
+
{themes.map((theme) => {
|
|
154
|
+
const isSelected = selectedTheme === theme.code;
|
|
155
|
+
const isFilled = isSelected && !selectedStrategy;
|
|
156
|
+
const isOutlined = isSelected && !!selectedStrategy;
|
|
157
|
+
|
|
158
|
+
return (
|
|
159
|
+
<button
|
|
160
|
+
key={theme.code}
|
|
161
|
+
onClick={() => onThemeClick(theme.code)}
|
|
162
|
+
onMouseEnter={() => setHoveredTheme(theme.code)}
|
|
163
|
+
onMouseLeave={() => setHoveredTheme(null)}
|
|
164
|
+
className="cursor-pointer"
|
|
165
|
+
>
|
|
166
|
+
<CodeBadge
|
|
167
|
+
code={theme.code}
|
|
168
|
+
className={cn(
|
|
169
|
+
!isSelected && "hover:border-blue-300"
|
|
170
|
+
)}
|
|
171
|
+
style={
|
|
172
|
+
isFilled
|
|
173
|
+
? {
|
|
174
|
+
backgroundColor: activeColor.contrast || activeColor.solid,
|
|
175
|
+
borderColor: activeColor.contrast || activeColor.solid,
|
|
176
|
+
color: "white",
|
|
177
|
+
borderWidth: "3px",
|
|
178
|
+
}
|
|
179
|
+
: isOutlined
|
|
180
|
+
? {
|
|
181
|
+
backgroundColor: "white",
|
|
182
|
+
borderColor: activeColor.contrast || activeColor.solid,
|
|
183
|
+
color: activeColor.contrast || activeColor.solid,
|
|
184
|
+
borderWidth: "3px",
|
|
185
|
+
}
|
|
186
|
+
: !isSelected
|
|
187
|
+
? {
|
|
188
|
+
backgroundColor: "var(--color-blue-100)",
|
|
189
|
+
color: "var(--color-blue-600)",
|
|
190
|
+
borderColor: "var(--color-blue-100)",
|
|
191
|
+
borderWidth: "3px",
|
|
192
|
+
}
|
|
193
|
+
: {
|
|
194
|
+
borderWidth: "3px",
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
/>
|
|
198
|
+
</button>
|
|
199
|
+
);
|
|
200
|
+
})}
|
|
201
|
+
</div>
|
|
202
|
+
</motion.section>
|
|
203
|
+
)}
|
|
204
|
+
</AnimatePresence>
|
|
205
|
+
|
|
206
|
+
{/* STRATEGY Section - Animated reveal */}
|
|
207
|
+
<AnimatePresence mode="wait">
|
|
208
|
+
{strategies.length > 0 && (
|
|
209
|
+
<motion.section
|
|
210
|
+
key="strategy-section"
|
|
211
|
+
layout="position"
|
|
212
|
+
initial={{ opacity: 0 }}
|
|
213
|
+
animate={{ opacity: 1 }}
|
|
214
|
+
exit={{ opacity: 0 }}
|
|
215
|
+
transition={{ duration: 0.2 }}
|
|
216
|
+
className="flex flex-col gap-3"
|
|
217
|
+
style={{ willChange: "opacity" }}
|
|
218
|
+
>
|
|
219
|
+
<Label className="px-2 text-gray-600 flex items-center min-w-0">
|
|
220
|
+
<span className="shrink-0 pr-1">STRATEGY</span>
|
|
221
|
+
<AnimatePresence mode="wait">
|
|
222
|
+
{hoveredStrategy && (
|
|
223
|
+
<motion.span
|
|
224
|
+
key={hoveredStrategy}
|
|
225
|
+
initial={{ opacity: 0, x: -4 }}
|
|
226
|
+
animate={{ opacity: 1, x: 0 }}
|
|
227
|
+
exit={{ opacity: 0, x: 4 }}
|
|
228
|
+
transition={{ duration: 0.15 }}
|
|
229
|
+
className="truncate"
|
|
230
|
+
style={{ willChange: "opacity, transform" }}
|
|
231
|
+
>
|
|
232
|
+
· {strategies.find((s) => s.code === hoveredStrategy)?.name.toUpperCase()}
|
|
233
|
+
</motion.span>
|
|
234
|
+
)}
|
|
235
|
+
</AnimatePresence>
|
|
236
|
+
</Label>
|
|
237
|
+
<div className="grid grid-cols-3 sm:grid-cols-5 max-w-max gap-2">
|
|
238
|
+
{strategies.map((strategy) => {
|
|
239
|
+
const isSelected = selectedStrategy === strategy.code;
|
|
240
|
+
|
|
241
|
+
return (
|
|
242
|
+
<button
|
|
243
|
+
key={strategy.code}
|
|
244
|
+
onClick={() => onStrategyClick(strategy.code)}
|
|
245
|
+
onMouseEnter={() => setHoveredStrategy(strategy.code)}
|
|
246
|
+
onMouseLeave={() => setHoveredStrategy(null)}
|
|
247
|
+
className="cursor-pointer"
|
|
248
|
+
>
|
|
249
|
+
<CodeBadge
|
|
250
|
+
code={strategy.code}
|
|
251
|
+
className={cn(
|
|
252
|
+
!isSelected && "hover:border-blue-300",
|
|
253
|
+
"border-[3px]"
|
|
254
|
+
)}
|
|
255
|
+
style={
|
|
256
|
+
isSelected
|
|
257
|
+
? {
|
|
258
|
+
backgroundColor: activeColor.contrast || activeColor.solid,
|
|
259
|
+
borderColor: activeColor.contrast || activeColor.solid,
|
|
260
|
+
color: "white",
|
|
261
|
+
borderWidth: "3px",
|
|
262
|
+
}
|
|
263
|
+
: {
|
|
264
|
+
backgroundColor: "var(--color-blue-100)",
|
|
265
|
+
color: "var(--color-blue-600)",
|
|
266
|
+
borderColor: "var(--color-blue-100)",
|
|
267
|
+
borderWidth: "3px",
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
/>
|
|
271
|
+
</button>
|
|
272
|
+
);
|
|
273
|
+
})}
|
|
274
|
+
</div>
|
|
275
|
+
</motion.section>
|
|
276
|
+
)}
|
|
277
|
+
</AnimatePresence>
|
|
278
|
+
|
|
279
|
+
{/* SCOPE Section */}
|
|
280
|
+
<motion.section
|
|
281
|
+
layout="position"
|
|
282
|
+
transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
|
|
283
|
+
className="flex flex-col gap-3 items-start max-w-max"
|
|
284
|
+
>
|
|
285
|
+
<Label className="px-2 text-gray-600">SCOPE</Label>
|
|
286
|
+
<div className="bg-white border border-gray-100 rounded-full inline-flex">
|
|
287
|
+
<Toggle
|
|
288
|
+
options={[
|
|
289
|
+
{ label: "Non-core", value: "non-core" },
|
|
290
|
+
{ label: "Core", value: "core" },
|
|
291
|
+
]}
|
|
292
|
+
value={scope}
|
|
293
|
+
onValueChange={(value) => onScopeChange(value as "non-core" | "core")}
|
|
294
|
+
/>
|
|
295
|
+
</div>
|
|
296
|
+
</motion.section>
|
|
297
|
+
|
|
298
|
+
{/* PURSUIT Section */}
|
|
299
|
+
<motion.section
|
|
300
|
+
layout="position"
|
|
301
|
+
transition={{ duration: 0.2, ease: [0.25, 0.46, 0.45, 0.94] }}
|
|
302
|
+
className="flex flex-col gap-3 items-start max-w-max"
|
|
303
|
+
>
|
|
304
|
+
<Label className="px-2 text-gray-600">PURSUIT</Label>
|
|
305
|
+
<div className=" inline-flex gap-3">
|
|
306
|
+
<Tag
|
|
307
|
+
variant="light"
|
|
308
|
+
active={activePursuits.has("certification")}
|
|
309
|
+
onClick={() => onPursuitToggle("certification")}
|
|
310
|
+
>
|
|
311
|
+
Certification
|
|
312
|
+
</Tag>
|
|
313
|
+
<Tag
|
|
314
|
+
variant="light"
|
|
315
|
+
active={activePursuits.has("rating")}
|
|
316
|
+
onClick={() => onPursuitToggle("rating")}
|
|
317
|
+
>
|
|
318
|
+
Rating
|
|
319
|
+
</Tag>
|
|
320
|
+
</div>
|
|
321
|
+
</motion.section>
|
|
322
|
+
</Card>
|
|
323
|
+
</LayoutGroup>
|
|
324
|
+
);
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
export const ExploreSidePanel = {
|
|
328
|
+
args: {
|
|
329
|
+
mockSearchParams: "concept=community&theme=C8",
|
|
330
|
+
},
|
|
331
|
+
parameters: {
|
|
332
|
+
docs: {
|
|
333
|
+
source: {
|
|
334
|
+
code: `<ExploreSidePanelView
|
|
335
|
+
concepts={concepts}
|
|
336
|
+
themes={themes}
|
|
337
|
+
strategies={strategies}
|
|
338
|
+
selectedConcept={selectedConcept}
|
|
339
|
+
selectedTheme={selectedTheme}
|
|
340
|
+
selectedStrategy={selectedStrategy}
|
|
341
|
+
onConceptClick={handleConceptClick}
|
|
342
|
+
onThemeClick={handleThemeClick}
|
|
343
|
+
onStrategyClick={handleStrategyClick}
|
|
344
|
+
scope={scope}
|
|
345
|
+
onScopeChange={handleScopeChange}
|
|
346
|
+
activePursuits={activePursuits}
|
|
347
|
+
onPursuitToggle={handlePursuitToggle}
|
|
348
|
+
/>`,
|
|
349
|
+
},
|
|
350
|
+
},
|
|
351
|
+
},
|
|
352
|
+
render: (args: any) => {
|
|
353
|
+
// Mock searchParams with state for Storybook //
|
|
354
|
+
const [urlState, setUrlState] = useState(args.mockSearchParams || "");
|
|
355
|
+
const searchParams = new URLSearchParams(urlState);
|
|
356
|
+
//In real app: const searchParams = useSearchParams();
|
|
357
|
+
|
|
358
|
+
// URL state
|
|
359
|
+
const selectedConcept = searchParams.get("concept") as ConceptSlug | null;
|
|
360
|
+
const selectedTheme = searchParams.get("theme");
|
|
361
|
+
const selectedStrategy = searchParams.get("strategy");
|
|
362
|
+
|
|
363
|
+
// Progressive data fetching //
|
|
364
|
+
// const { data: concepts = [] } = useConceptListQuery();
|
|
365
|
+
// const { data: themes = [] } = useThemesQuery(selectedConcept);
|
|
366
|
+
// const { data: strategies = [] } = useStrategiesQuery(selectedConcept, selectedTheme);
|
|
367
|
+
|
|
368
|
+
// Mock data for Storybook
|
|
369
|
+
const concepts = [{ "conceptKey": "mind", "name": "Mind" }, { "conceptKey": "community", "name": "Community" }, { "conceptKey": "movement", "name": "Movement" }, { "conceptKey": "water", "name": "Water" }, { "conceptKey": "air", "name": "Air" }, { "conceptKey": "light", "name": "Light" }, { "conceptKey": "thermal-comfort", "name": "Thermal Comfort" }, { "conceptKey": "nourishment", "name": "Nourishment" }, { "conceptKey": "sound", "name": "Sound" }, { "conceptKey": "materials", "name": "Materials" }, { "conceptKey": "innovation", "name": "Innovation" }];
|
|
370
|
+
|
|
371
|
+
// Themes only load when concept is selected
|
|
372
|
+
const themes = selectedConcept ? [{ "code": "C1", "name": "Community and occupant engagement" }, { "code": "C2", "name": "Emergency preparedness" }, { "code": "C3", "name": "Fair housing" }, { "code": "C4", "name": "Family and parental support" }, { "code": "C5", "name": "Health benefits and services" }, { "code": "C6", "name": "Health promotion" }, { "code": "C7", "name": "Inclusive design" }, { "code": "C8", "name": "Occupant experience" }, { "code": "C9", "name": "Organizational practices" }, { "code": "C10", "name": "Personal-professional development" }, { "code": "C11", "name": "Supportive construction practices" }] : [];
|
|
373
|
+
|
|
374
|
+
// Strategies only load when theme is selected
|
|
375
|
+
const strategies = selectedTheme ? [{ "code": "C8.1", "name": "Collect additional occupant research" }, { "code": "C8.2", "name": "Conduct qualitative research" }, { "code": "C8.3", "name": "Develop annual action plan" }, { "code": "C8.4", "name": "Perform annual occupant survey" }] : [];
|
|
376
|
+
|
|
377
|
+
// Local state
|
|
378
|
+
const [scope, setScope] = useState<"core" | "non-core">("core");
|
|
379
|
+
const [activePursuits, setActivePursuits] = useState<Set<"certification" | "rating">>(
|
|
380
|
+
new Set(["certification"])
|
|
381
|
+
);
|
|
382
|
+
|
|
383
|
+
// Navigation handlers
|
|
384
|
+
const handleConceptClick = (slug: ConceptSlug) => {
|
|
385
|
+
const params = new URLSearchParams(searchParams.toString());
|
|
386
|
+
|
|
387
|
+
if (selectedConcept === slug) {
|
|
388
|
+
params.delete("concept");
|
|
389
|
+
params.delete("theme");
|
|
390
|
+
params.delete("strategy");
|
|
391
|
+
} else {
|
|
392
|
+
params.set("concept", slug);
|
|
393
|
+
params.delete("theme");
|
|
394
|
+
params.delete("strategy");
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
setUrlState(params.toString());
|
|
398
|
+
// In real app: router.push(`/explore?${params.toString()}`);
|
|
399
|
+
};
|
|
400
|
+
|
|
401
|
+
const handleThemeClick = (themeCode: string) => {
|
|
402
|
+
const params = new URLSearchParams(searchParams.toString());
|
|
403
|
+
|
|
404
|
+
if (selectedTheme === themeCode) {
|
|
405
|
+
if (selectedStrategy) {
|
|
406
|
+
params.delete("strategy");
|
|
407
|
+
} else {
|
|
408
|
+
params.delete("theme");
|
|
409
|
+
params.delete("strategy");
|
|
410
|
+
}
|
|
411
|
+
} else {
|
|
412
|
+
params.set("theme", themeCode);
|
|
413
|
+
params.delete("strategy");
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
setUrlState(params.toString());
|
|
417
|
+
// In real app: router.push(`/explore?${params.toString()}`);
|
|
418
|
+
};
|
|
419
|
+
|
|
420
|
+
const handleStrategyClick = (strategyCode: string) => {
|
|
421
|
+
const params = new URLSearchParams(searchParams.toString());
|
|
422
|
+
|
|
423
|
+
if (selectedStrategy === strategyCode) {
|
|
424
|
+
params.delete("strategy");
|
|
425
|
+
} else {
|
|
426
|
+
params.set("strategy", strategyCode);
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
setUrlState(params.toString());
|
|
430
|
+
// In real app: router.push(`/explore?${params.toString()}`);
|
|
431
|
+
};
|
|
432
|
+
|
|
433
|
+
const handleScopeChange = (newScope: "core" | "non-core") => {
|
|
434
|
+
setScope(newScope);
|
|
435
|
+
};
|
|
436
|
+
|
|
437
|
+
const handlePursuitToggle = (pursuit: "certification" | "rating") => {
|
|
438
|
+
setActivePursuits((prev) => {
|
|
439
|
+
const next = new Set(prev);
|
|
440
|
+
if (next.has(pursuit)) {
|
|
441
|
+
next.delete(pursuit);
|
|
442
|
+
} else {
|
|
443
|
+
next.add(pursuit);
|
|
444
|
+
}
|
|
445
|
+
return next;
|
|
446
|
+
});
|
|
447
|
+
};
|
|
448
|
+
|
|
449
|
+
return (
|
|
450
|
+
<ExploreSidePanelView
|
|
451
|
+
concepts={concepts}
|
|
452
|
+
themes={themes}
|
|
453
|
+
strategies={strategies}
|
|
454
|
+
selectedConcept={selectedConcept}
|
|
455
|
+
selectedTheme={selectedTheme}
|
|
456
|
+
selectedStrategy={selectedStrategy}
|
|
457
|
+
onConceptClick={handleConceptClick}
|
|
458
|
+
onThemeClick={handleThemeClick}
|
|
459
|
+
onStrategyClick={handleStrategyClick}
|
|
460
|
+
scope={scope}
|
|
461
|
+
onScopeChange={handleScopeChange}
|
|
462
|
+
activePursuits={activePursuits}
|
|
463
|
+
onPursuitToggle={handlePursuitToggle}
|
|
464
|
+
/>
|
|
465
|
+
);
|
|
466
|
+
},
|
|
467
|
+
};
|
|
468
|
+
|
|
469
|
+
const meta = {
|
|
470
|
+
title: "Review/Panel",
|
|
471
|
+
component: ExploreSidePanelView,
|
|
472
|
+
tags: ["autodocs"],
|
|
473
|
+
parameters: {
|
|
474
|
+
layout: "padded",
|
|
475
|
+
},
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
export default meta;
|
|
479
|
+
|
|
480
|
+
type ConceptSlug = keyof typeof conceptColors;
|
|
Binary file
|