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