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

package/dist/storybook/Select.stories.tsx

@@ -9,8 +9,10 @@ import {
   SelectLabel,
   SelectSeparator,
   NativeSelect,
+  Combobox,
 } from "../shadcn";
 import { DatabaseIcon } from "@ac-assets/icons";
+import { useState } from "react";
 
 export default {
   title: "Shadcn/Components/Select",
@@ -143,3 +145,319 @@ export const NativeSelectExample: StoryFn = () => {
     </div>
   );
 };
+
+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 | string[]) => {
+    setValue(newValue as string);
+  };
+
+  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 | 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}
+          onChange={handleMultiSelectChange}
+          placeholder="Select frameworks..."
+          multiSelect={true}
+          buttonProps={{ className: "al-w-[250px]" }}
+        />
+        <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>
+  );
+};
+
+// Example that matches the UI in the screenshot
+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>
+  );
+};
+
+// Example that matches the UI in the screenshot

package/dist/storybook/Tabs.stories.tsx

@@ -12,7 +12,7 @@ export default {
   },
 } as Meta;
 
-export const Default: StoryFn = args => (
+export const Default: StoryFn = (args) => (
   <Tabs defaultValue="tab1" {...args}>
     <TabsList>
       <TabsTrigger value="tab1">Tab 1</TabsTrigger>
@@ -28,7 +28,7 @@ Default.args = {
   variant: "default",
 };
 
-export const Underlined: StoryFn = args => (
+export const Underlined: StoryFn = (args) => (
   <Tabs defaultValue="overview" variant="underlined" {...args}>
     <TabsList>
       <TabsTrigger value="overview">Overview</TabsTrigger>
@@ -56,7 +56,7 @@ export const Underlined: StoryFn = args => (
   </Tabs>
 );
 
-export const WithRichContent: StoryFn = args => (
+export const WithRichContent: StoryFn = (args) => (
   <Tabs defaultValue="profile" variant="underlined" {...args}>
     <TabsList>
       <TabsTrigger value="profile">Profile</TabsTrigger>
@@ -103,7 +103,7 @@ export const WithRichContent: StoryFn = args => (
   </Tabs>
 );
 
-export const ManyTabs: StoryFn = args => (
+export const ManyTabs: StoryFn = (args) => (
   <Tabs defaultValue="home" variant="underlined" {...args}>
     <TabsList>
       <TabsTrigger value="home">Home</TabsTrigger>
@@ -120,7 +120,7 @@ export const ManyTabs: StoryFn = args => (
   </Tabs>
 );
 
-export const LongLabels: StoryFn = args => (
+export const LongLabels: StoryFn = (args) => (
   <Tabs defaultValue="dashboard" variant="underlined" {...args}>
     <TabsList>
       <TabsTrigger value="dashboard">Dashboard Overview</TabsTrigger>
@@ -133,7 +133,7 @@ export const LongLabels: StoryFn = args => (
   </Tabs>
 );
 
-export const MinimalContent: StoryFn = args => (
+export const MinimalContent: StoryFn = (args) => (
   <Tabs defaultValue="a" variant="underlined" {...args}>
     <TabsList>
       <TabsTrigger value="a">Tab A</TabsTrigger>
@@ -144,4 +144,4 @@ export const MinimalContent: StoryFn = args => (
     <TabsContent value="b">B</TabsContent>
     <TabsContent value="c">C</TabsContent>
   </Tabs>
-);
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.35",
+  "version": "0.0.37-beta.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"
@@ -52,4 +52,4 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}