@altimateai/ui-components 0.0.20 → 0.0.22
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/dist/CoachForm.js +1 -1
- package/dist/Tooltip.js +11 -11
- package/dist/lineage/index.js +2 -2
- package/dist/main.js +1 -1
- package/dist/shadcn/index.d.ts +3 -1
- package/dist/shadcn/index.js +2221 -2182
- package/dist/storybook/Select.stories.tsx +154 -0
- package/package.json +1 -1
|
@@ -307,3 +307,157 @@ const ComboboxColumnsExample = () => {
|
|
|
307
307
|
/>
|
|
308
308
|
);
|
|
309
309
|
};
|
|
310
|
+
|
|
311
|
+
export const ComboboxAdvancedExample: StoryFn = () => {
|
|
312
|
+
const options = [
|
|
313
|
+
{ value: "react", label: "React" },
|
|
314
|
+
{ value: "vue", label: "Vue" },
|
|
315
|
+
{ value: "angular", label: "Angular" },
|
|
316
|
+
{ value: "svelte", label: "Svelte" },
|
|
317
|
+
{ value: "nextjs", label: "Next.js" },
|
|
318
|
+
{ value: "remix", label: "Remix" },
|
|
319
|
+
{ value: "gatsby", label: "Gatsby" },
|
|
320
|
+
{ value: "ember", label: "Ember.js" },
|
|
321
|
+
];
|
|
322
|
+
|
|
323
|
+
const [singleValue, setSingleValue] = useState("");
|
|
324
|
+
const [multiValue, setMultiValue] = useState<string[]>(["react", "vue"]);
|
|
325
|
+
const [clearableValue, setClearableValue] = useState("angular");
|
|
326
|
+
const [multiClearableValue, setMultiClearableValue] = useState<string[]>(["nextjs", "remix"]);
|
|
327
|
+
const [multiApplyValue, setMultiApplyValue] = useState<string[]>(["gatsby", "ember"]);
|
|
328
|
+
|
|
329
|
+
return (
|
|
330
|
+
<div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
|
|
331
|
+
<div className="al-flex al-flex-col al-gap-4">
|
|
332
|
+
<h3 className="al-text-lg al-font-medium">Search Placeholders</h3>
|
|
333
|
+
<p className="al-text-sm al-text-muted-foreground">Different search placeholder examples</p>
|
|
334
|
+
|
|
335
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
336
|
+
<label className="al-text-sm al-font-medium">Default Search Placeholder</label>
|
|
337
|
+
<Combobox
|
|
338
|
+
options={options}
|
|
339
|
+
value={singleValue}
|
|
340
|
+
onChange={value => setSingleValue(value as string)}
|
|
341
|
+
placeholder="Select framework..."
|
|
342
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
343
|
+
/>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
347
|
+
<label className="al-text-sm al-font-medium">Custom Search Placeholder</label>
|
|
348
|
+
<Combobox
|
|
349
|
+
options={options}
|
|
350
|
+
value={singleValue}
|
|
351
|
+
onChange={value => setSingleValue(value as string)}
|
|
352
|
+
placeholder="Select framework..."
|
|
353
|
+
searchPlaceholder="Type to find frameworks..."
|
|
354
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
355
|
+
/>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
359
|
+
<label className="al-text-sm al-font-medium">Empty Search Placeholder</label>
|
|
360
|
+
<Combobox
|
|
361
|
+
options={options}
|
|
362
|
+
value={singleValue}
|
|
363
|
+
onChange={value => setSingleValue(value as string)}
|
|
364
|
+
placeholder="Select framework..."
|
|
365
|
+
searchPlaceholder=""
|
|
366
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
367
|
+
/>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
|
|
371
|
+
<div className="al-flex al-flex-col al-gap-4">
|
|
372
|
+
<h3 className="al-text-lg al-font-medium">Clear Button Examples</h3>
|
|
373
|
+
<p className="al-text-sm al-text-muted-foreground">
|
|
374
|
+
Demonstrating showClearButton prop with different configurations
|
|
375
|
+
</p>
|
|
376
|
+
|
|
377
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
378
|
+
<label className="al-text-sm al-font-medium">
|
|
379
|
+
Single Select - No Clear Button (Default)
|
|
380
|
+
</label>
|
|
381
|
+
<Combobox
|
|
382
|
+
options={options}
|
|
383
|
+
value={clearableValue}
|
|
384
|
+
onChange={value => setClearableValue(value as string)}
|
|
385
|
+
placeholder="Select framework..."
|
|
386
|
+
searchPlaceholder="Search frameworks..."
|
|
387
|
+
showClearButton={false}
|
|
388
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
389
|
+
/>
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
393
|
+
<label className="al-text-sm al-font-medium">Single Select - With Clear Button</label>
|
|
394
|
+
<Combobox
|
|
395
|
+
options={options}
|
|
396
|
+
value={clearableValue}
|
|
397
|
+
onChange={value => setClearableValue(value as string)}
|
|
398
|
+
placeholder="Select framework..."
|
|
399
|
+
searchPlaceholder="Search frameworks..."
|
|
400
|
+
showClearButton={true}
|
|
401
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
402
|
+
/>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
406
|
+
<label className="al-text-sm al-font-medium">Multi Select - No Clear Button</label>
|
|
407
|
+
<Combobox
|
|
408
|
+
options={options}
|
|
409
|
+
value={multiValue}
|
|
410
|
+
onChange={value => setMultiValue(value as string[])}
|
|
411
|
+
placeholder="Select frameworks..."
|
|
412
|
+
searchPlaceholder="Find your frameworks..."
|
|
413
|
+
multiSelect={true}
|
|
414
|
+
showClearButton={false}
|
|
415
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
416
|
+
/>
|
|
417
|
+
<div className="al-text-sm">
|
|
418
|
+
Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
|
|
419
|
+
</div>
|
|
420
|
+
</div>
|
|
421
|
+
|
|
422
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
423
|
+
<label className="al-text-sm al-font-medium">Multi Select - With Clear Button</label>
|
|
424
|
+
<Combobox
|
|
425
|
+
options={options}
|
|
426
|
+
value={multiClearableValue}
|
|
427
|
+
onChange={value => setMultiClearableValue(value as string[])}
|
|
428
|
+
placeholder="Select frameworks..."
|
|
429
|
+
searchPlaceholder="Find your frameworks..."
|
|
430
|
+
multiSelect={true}
|
|
431
|
+
showClearButton={true}
|
|
432
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
433
|
+
/>
|
|
434
|
+
<div className="al-text-sm">
|
|
435
|
+
Selected: {multiClearableValue.length > 0 ? multiClearableValue.join(", ") : "None"}
|
|
436
|
+
</div>
|
|
437
|
+
</div>
|
|
438
|
+
|
|
439
|
+
<div className="al-flex al-flex-col al-gap-2">
|
|
440
|
+
<label className="al-text-sm al-font-medium">
|
|
441
|
+
Multi Select - With Apply Button & Clear Button
|
|
442
|
+
</label>
|
|
443
|
+
<Combobox
|
|
444
|
+
options={options}
|
|
445
|
+
value={multiApplyValue}
|
|
446
|
+
onChange={value => setMultiApplyValue(value as string[])}
|
|
447
|
+
placeholder="Select frameworks..."
|
|
448
|
+
searchPlaceholder="Filter options..."
|
|
449
|
+
multiSelect={true}
|
|
450
|
+
showApplyButton={true}
|
|
451
|
+
showClearButton={true}
|
|
452
|
+
buttonProps={{ className: "al-w-[250px]" }}
|
|
453
|
+
/>
|
|
454
|
+
<div className="al-text-sm">
|
|
455
|
+
Selected: {multiApplyValue.length > 0 ? multiApplyValue.join(", ") : "None"}
|
|
456
|
+
</div>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
);
|
|
461
|
+
};
|
|
462
|
+
|
|
463
|
+
// Example that matches the UI in the screenshot
|