@altimateai/ui-components 0.0.37-beta.1 → 0.0.37-beta.3

package/dist/storybook/Combobox.stories.tsx

@@ -0,0 +1,650 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Combobox } from "../shadcn";
+import { Button } from "../button";
+import { DatabaseIcon } from "@ac-assets/icons";
+import { useState } from "react";
+
+export default {
+  title: "Shadcn/Components/Combobox",
+  component: Combobox,
+} as Meta;
+
+export const ComboboxExample: StoryFn = () => {
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+  ];
+
+  const [value, setValue] = useState("");
+
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-4 al-justify-start al-items-start">
+      <h3 className="al-text-lg al-font-medium">Single Select</h3>
+      <Combobox
+        options={options}
+        value={value}
+        onChange={handleChange}
+        placeholder="Select framework..."
+      />
+
+      <Combobox
+        options={options}
+        value={value}
+        onChange={handleChange}
+        placeholder="Custom width..."
+        buttonProps={{ className: "al-w-[300px]" }}
+      />
+
+      <Combobox
+        options={options}
+        value={value}
+        onChange={handleChange}
+        placeholder="With icon..."
+        icon={<DatabaseIcon className="al-mr-2" />}
+      />
+    </div>
+  );
+};
+
+export const ComboboxMultiSelectExample: StoryFn = () => {
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+    { value: "remix", label: "Remix" },
+    { value: "gatsby", label: "Gatsby" },
+    { value: "ember", label: "Ember.js" },
+  ];
+
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [selectedValuesWithApply, setSelectedValuesWithApply] = useState<string[]>([
+    "react",
+    "vue",
+  ]);
+
+  const handleMultiSelectChange = (newValue: string[]) => {
+    setSelectedValues(Array.isArray(newValue) ? newValue : []);
+  };
+
+  const handleMultiSelectWithApplyChange = (newValue: string | string[]) => {
+    setSelectedValuesWithApply(Array.isArray(newValue) ? newValue : []);
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Multi-Select (Auto-Apply)</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Changes are applied immediately when selecting/deselecting options
+        </p>
+        <Combobox
+          options={options}
+          value={selectedValues}
+          placeholder="Select frameworks..."
+          multiSelect={true}
+          buttonProps={{ className: "al-w-[250px]" }}
+          onChange={handleMultiSelectChange}
+        />
+        <div className="al-text-sm">
+          Selected: {selectedValues.length > 0 ? selectedValues.join(", ") : "None"}
+        </div>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Multi-Select with Apply Button</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Changes are only applied when clicking the Apply button
+        </p>
+        <Combobox
+          options={options}
+          value={selectedValuesWithApply}
+          onChange={handleMultiSelectWithApplyChange}
+          placeholder="Select frameworks..."
+          multiSelect={true}
+          showApplyButton={true}
+          buttonProps={{ className: "al-w-[250px]" }}
+        />
+        <div className="al-text-sm">
+          Selected:{" "}
+          {selectedValuesWithApply.length > 0 ? selectedValuesWithApply.join(", ") : "None"}
+        </div>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Columns Selector Example</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Similar to the UI shown in the screenshot
+        </p>
+        <ComboboxColumnsExample />
+      </div>
+    </div>
+  );
+};
+
+const ComboboxColumnsExample = () => {
+  const options = [
+    { value: "est_cost", label: "Est. Cost" },
+    { value: "exec_time", label: "Exec. Time" },
+    { value: "insights", label: "Insights" },
+    { value: "query_hash", label: "Query Hash" },
+    { value: "query_text", label: "Query Text" },
+    { value: "query_type", label: "Query Type" },
+    { value: "timestamp", label: "Timestamp" },
+    { value: "user", label: "User" },
+  ];
+
+  const [selectedColumns, setSelectedColumns] = useState<string[]>([
+    "est_cost",
+    "exec_time",
+    "insights",
+    "query_hash",
+    "query_text",
+    "query_type",
+    "timestamp",
+    "user",
+  ]);
+
+  const handleColumnsChange = (newValue: string | string[]) => {
+    setSelectedColumns(Array.isArray(newValue) ? newValue : []);
+  };
+
+  return (
+    <Combobox
+      options={options}
+      value={selectedColumns}
+      onChange={handleColumnsChange}
+      placeholder="Columns"
+      multiSelect={true}
+      showApplyButton={true}
+      buttonProps={{ className: "al-w-[200px]" }}
+    />
+  );
+};
+
+export const ComboboxAdvancedExample: StoryFn = () => {
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+    { value: "remix", label: "Remix" },
+    { value: "gatsby", label: "Gatsby" },
+    { value: "ember", label: "Ember.js" },
+  ];
+
+  const [singleValue, setSingleValue] = useState("");
+  const [multiValue, setMultiValue] = useState<string[]>(["react", "vue"]);
+  const [clearableValue, setClearableValue] = useState("angular");
+  const [multiClearableValue, setMultiClearableValue] = useState<string[]>(["nextjs", "remix"]);
+  const [multiApplyValue, setMultiApplyValue] = useState<string[]>(["gatsby", "ember"]);
+
+  return (
+    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Search Placeholders</h3>
+        <p className="al-text-sm al-text-muted-foreground">Different search placeholder examples</p>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Default Search Placeholder</label>
+          <Combobox
+            options={options}
+            value={singleValue}
+            onChange={value => setSingleValue(value as string)}
+            placeholder="Select framework..."
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Custom Search Placeholder</label>
+          <Combobox
+            options={options}
+            value={singleValue}
+            onChange={value => setSingleValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder="Type to find frameworks..."
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Empty Search Placeholder</label>
+          <Combobox
+            options={options}
+            value={singleValue}
+            onChange={value => setSingleValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder=""
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Clear Button Examples</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Demonstrating showClearButton prop with different configurations
+        </p>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Single Select - No Clear Button (Default)
+          </label>
+          <Combobox
+            options={options}
+            value={clearableValue}
+            onChange={value => setClearableValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder="Search frameworks..."
+            showClearButton={false}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Single Select - With Clear Button</label>
+          <Combobox
+            options={options}
+            value={clearableValue}
+            onChange={value => setClearableValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder="Search frameworks..."
+            showClearButton={true}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Multi Select - No Clear Button</label>
+          <Combobox
+            options={options}
+            value={multiValue}
+            onChange={value => setMultiValue(value as string[])}
+            placeholder="Select frameworks..."
+            searchPlaceholder="Find your frameworks..."
+            multiSelect={true}
+            showClearButton={false}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Multi Select - With Clear Button</label>
+          <Combobox
+            options={options}
+            value={multiClearableValue}
+            onChange={value => setMultiClearableValue(value as string[])}
+            placeholder="Select frameworks..."
+            searchPlaceholder="Find your frameworks..."
+            multiSelect={true}
+            showClearButton={true}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {multiClearableValue.length > 0 ? multiClearableValue.join(", ") : "None"}
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Multi Select - With Apply Button & Clear Button
+          </label>
+          <Combobox
+            options={options}
+            value={multiApplyValue}
+            onChange={value => setMultiApplyValue(value as string[])}
+            placeholder="Select frameworks..."
+            searchPlaceholder="Filter options..."
+            multiSelect={true}
+            showApplyButton={true}
+            showClearButton={true}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {multiApplyValue.length > 0 ? multiApplyValue.join(", ") : "None"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxInfiniteScrollExample: StoryFn = () => {
+  const [allOptions] = useState(() => {
+    // Generate a large dataset for demonstration
+    return Array.from({ length: 1000 }, (_, i) => ({
+      value: `option-${i + 1}`,
+      label: `Option ${i + 1}`,
+    }));
+  });
+
+  const [displayedOptions, setDisplayedOptions] = useState(() => allOptions.slice(0, 20));
+  const [hasMore, setHasMore] = useState(true);
+  const [selectedValue, setSelectedValue] = useState("option-500"); // Pre-select a value not in initial load
+  const [multiSelectedValue, setMultiSelectedValue] = useState<string[]>([
+    "option-100",
+    "option-200",
+  ]); // Pre-select values not in initial load
+
+  const loadMore = async () => {
+    if (!hasMore) return;
+
+    // Simulate API call delay
+    await new Promise(resolve => setTimeout(resolve, 500));
+
+    const currentLength = displayedOptions.length;
+    const nextBatch = allOptions.slice(currentLength, currentLength + 20);
+
+    if (nextBatch.length === 0) {
+      setHasMore(false);
+    } else {
+      setDisplayedOptions(prev => [...prev, ...nextBatch]);
+      setHasMore(currentLength + nextBatch.length < allOptions.length);
+    }
+  };
+
+  const resetData = () => {
+    setDisplayedOptions(allOptions.slice(0, 20));
+    setHasMore(true);
+    setSelectedValue("");
+    setMultiSelectedValue([]);
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-2">
+        <div className="al-flex al-gap-4 al-items-center">
+          <h3 className="al-text-lg al-font-medium">Infinite Scroll Examples</h3>
+          <Button onClick={resetData} size="sm" variant="outline">
+            Reset Data
+          </Button>
+        </div>
+        <p className="al-text-sm al-text-muted-foreground">
+          Notice how pre-selected values (Option 500, Option 100, Option 200) show proper labels
+          even though they&apos;re not in the initial 20 options. This demonstrates the valueLabels
+          prop functionality.
+        </p>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Single Select with Infinite Scroll</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Showing {displayedOptions.length} of {allOptions.length} options
+          </p>
+          <Combobox
+            options={displayedOptions}
+            value={selectedValue}
+            onChange={value => setSelectedValue(value as string)}
+            placeholder="Select an option..."
+            onLoadMore={loadMore}
+            hasMore={hasMore}
+            valueLabels={{
+              "option-500": "Option 500",
+            }}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Multi-Select with Infinite Scroll</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Selected: {multiSelectedValue.length} items
+          </p>
+          <Combobox
+            options={displayedOptions}
+            value={multiSelectedValue}
+            onChange={value => setMultiSelectedValue(value as string[])}
+            placeholder="Select multiple options..."
+            multiSelect={true}
+            onLoadMore={loadMore}
+            hasMore={hasMore}
+            valueLabels={{
+              "option-100": "Option 100",
+              "option-200": "Option 200",
+            }}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Standard Combobox (No Infinite Scroll)
+          </label>
+          <Combobox
+            options={displayedOptions.slice(0, 10)}
+            value="option-5" // Use a value that exists in the first 10 options
+            onChange={value => setSelectedValue(value as string)}
+            placeholder="Standard combobox..."
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxSearchExample: StoryFn = () => {
+  const [options] = useState([
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+  ]);
+
+  const [selectedValue, setSelectedValue] = useState("");
+  const [searchValue, setSearchValue] = useState("");
+  const [searchHistory, setSearchHistory] = useState<string[]>([]);
+
+  const handleSearch = (searchTerm: string) => {
+    setSearchValue(searchTerm);
+    if (searchTerm.trim() && !searchHistory.includes(searchTerm.trim())) {
+      setSearchHistory(prev => [searchTerm.trim(), ...prev.slice(0, 4)]); // Keep last 5 searches
+    }
+  };
+
+  const clearHistory = () => {
+    setSearchHistory([]);
+    setSearchValue("");
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-gap-4 al-items-center">
+        <h3 className="al-text-lg al-font-medium">Search Callback Example</h3>
+        <Button onClick={clearHistory} size="sm" variant="outline">
+          Clear History
+        </Button>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Combobox with Search Callback</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Type in the search box to see the search values being emitted
+          </p>
+          <Combobox
+            options={options}
+            value={selectedValue}
+            onChange={value => setSelectedValue(value as string)}
+            placeholder="Search frameworks..."
+            searchPlaceholder="Type to search..."
+            onSearch={handleSearch}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Current Search Value:</label>
+          <code className="al-text-sm al-bg-muted al-p-2 al-rounded">
+            {searchValue || "No search performed yet"}
+          </code>
+        </div>
+
+        {searchHistory.length > 0 && (
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Search History:</label>
+            <ul className="al-text-sm al-bg-muted al-p-2 al-rounded al-space-y-1">
+              {searchHistory.map((search, index) => (
+                <li key={index} className="al-font-mono">
+                  {index + 1}. &quot;{search}&quot;
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxCallbacksExample: StoryFn = () => {
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+  ];
+
+  const [selectedValue, setSelectedValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [openHistory, setOpenHistory] = useState<string[]>([]);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+    const timestamp = new Date().toLocaleTimeString();
+    setOpenHistory(prev => [`${timestamp}: ${open ? "opened" : "closed"}`, ...prev.slice(0, 4)]);
+  };
+
+  const clearHistory = () => {
+    setOpenHistory([]);
+  };
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <div className="al-flex al-gap-4 al-items-center">
+        <h3 className="al-text-lg al-font-medium">Open/Close Callback Example</h3>
+        <Button onClick={clearHistory} size="sm" variant="outline">
+          Clear History
+        </Button>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Combobox with onOpenChange Callback</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Open and close the combobox to see the callback events
+          </p>
+          <Combobox
+            options={options}
+            value={selectedValue}
+            onChange={value => setSelectedValue(value as string)}
+            placeholder="Select framework..."
+            onOpenChange={handleOpenChange}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Current State:</label>
+          <code className="al-text-sm al-bg-muted al-p-2 al-rounded">
+            Popover is {isOpen ? "open" : "closed"}
+          </code>
+        </div>
+
+        {openHistory.length > 0 && (
+          <div className="al-flex al-flex-col al-gap-2">
+            <label className="al-text-sm al-font-medium">Open/Close History:</label>
+            <ul className="al-text-sm al-bg-muted al-p-2 al-rounded al-space-y-1">
+              {openHistory.map((event, index) => (
+                <li key={index} className="al-font-mono">
+                  {event}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const ComboboxPopoverCustomizationExample: StoryFn = () => {
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+  ];
+
+  const [selectedValue1, setSelectedValue1] = useState("");
+  const [selectedValue2, setSelectedValue2] = useState("");
+  const [selectedValue3, setSelectedValue3] = useState("");
+
+  return (
+    <div className="al-flex al-flex-col al-gap-6 al-justify-start al-items-start">
+      <h3 className="al-text-lg al-font-medium">Popover Customization Examples</h3>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Default Popover (Bottom)</label>
+          <Combobox
+            options={options}
+            value={selectedValue1}
+            onChange={value => setSelectedValue1(value as string)}
+            placeholder="Default positioning..."
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Right Side Popover (with right chevron)
+          </label>
+          <Combobox
+            options={options}
+            value={selectedValue2}
+            onChange={value => setSelectedValue2(value as string)}
+            placeholder="Right side popover..."
+            popoverContentProps={{ side: "right" }}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Custom Styled Popover</label>
+          <p className="al-text-xs al-text-muted-foreground">
+            Popover with custom styling and wider width
+          </p>
+          <Combobox
+            options={options}
+            value={selectedValue3}
+            onChange={value => setSelectedValue3(value as string)}
+            placeholder="Custom styled popover..."
+            popoverContentProps={{
+              className: "al-w-[350px] al-border-2 al-border-blue-200",
+              side: "top",
+            }}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};