feat(admin-ui): AutoComplete + MultiAutoComplete components (#4459)

packages/admin-ui/package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.4",
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
@@ -30,6 +31,7 @@
     "ace-builds": "^1.37.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
     "mobx": "^6.9.0",
     "react": "18.2.0",
     "react-ace": "^13.0.0",

packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { AutoComplete } from "./AutoComplete";
+
+const meta: Meta<typeof AutoComplete> = {
+    title: "Components/Form/AutoComplete",
+    component: AutoComplete,
+    tags: ["autodocs"],
+    argTypes: {
+        onValueChange: { action: "onValueChange" },
+        onOpenChange: { action: "onOpenChange" }
+    },
+    parameters: {
+        layout: "padded"
+    },
+    render: args => {
+        const [value, setValue] = useState(args.value);
+        return <AutoComplete {...args} value={value} onValueChange={setValue} />;
+    }
+};
+
+export default meta;
+type Story = StoryObj<typeof AutoComplete>;
+
+export const Default: Story = {
+    args: {
+        options: [
+            "Eastern Standard Time (EST)",
+            "Central Standard Time (CST)",
+            "Pacific Standard Time (PST)",
+            "Greenwich Mean Time (GMT)",
+            "Central European Time (CET)",
+            "Central Africa Time (CAT)",
+            "India Standard Time (IST)",
+            "China Standard Time (CST)",
+            "Japan Standard Time (JST)",
+            "Australian Western Standard Time (AWST)",
+            "New Zealand Standard Time (NZST)",
+            "Fiji Time (FJT)",
+            "Argentina Time (ART)",
+            "Bolivia Time (BOT)",
+            "Brasilia Time (BRT)"
+        ]
+    }
+};
+
+export const WithLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label"
+    }
+};
+
+export const WithRequiredLabel: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true
+    }
+};
+
+export const WithDescription: Story = {
+    args: {
+        ...Default.args,
+        description: "Provide the required information for processing your request."
+    }
+};
+
+export const WithNotes: Story = {
+    args: {
+        ...Default.args,
+        note: "Note: Ensure your selection or input is accurate before proceeding."
+    }
+};
+
+export const WithErrors: Story = {
+    args: {
+        ...Default.args,
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        disabled: true
+    }
+};
+
+export const FullExample: Story = {
+    args: {
+        ...Default.args,
+        label: "Any field label",
+        required: true,
+        description: "Provide the required information for processing your request.",
+        note: "Note: Ensure your selection or input is accurate before proceeding.",
+        validation: {
+            isValid: false,
+            message: "This field is required."
+        }
+    }
+};

packages/admin-ui/src/AutoComplete/AutoComplete.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from "react";
+import { makeDecoratable } from "~/utils";
+import {
+    AutoCompletePrimitive,
+    AutoCompletePrimitiveProps
+} from "./primitives/AutoCompletePrimitive";
+import {
+    FormComponentDescription,
+    FormComponentErrorMessage,
+    FormComponentLabel,
+    FormComponentNote,
+    FormComponentProps
+} from "~/FormComponent";
+
+type AutoCompleteProps = AutoCompletePrimitiveProps & FormComponentProps;
+
+const DecoratableAutoComplete = ({
+    label,
+    description,
+    note,
+    required,
+    disabled,
+    validation,
+    ...props
+}: AutoCompleteProps) => {
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+
+    return (
+        <div className={"w-full"}>
+            <FormComponentLabel text={label} required={required} disabled={disabled} />
+            <FormComponentDescription text={description} />
+            <AutoCompletePrimitive {...props} disabled={disabled} label={label} />
+            <FormComponentErrorMessage text={validationMessage} invalid={invalid} />
+            <FormComponentNote text={note} />
+        </div>
+    );
+};
+
+const AutoComplete = makeDecoratable("AutoComplete", DecoratableAutoComplete);
+
+export { AutoComplete };

packages/admin-ui/src/AutoComplete/index.ts

@@ -0,0 +1,2 @@
+export * from "./AutoComplete";
+export * from "./primitives/AutoCompletePrimitive";