@js-empire/emperor-ui 1.2.5 → 1.2.7

package/src/components/organisms/deletion-confirmor/deletion-confirmor.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Button } from "@heroui/button";
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from "@heroui/modal";
+import { Trash2 } from "lucide-react";
+import { Locale } from "@/i18n";
+import { useEmperorUI } from "@/hooks";
+import { cn } from "@/utils";
+import type { DeletionConfirmorProps } from "@/types";
+import {
+  deletionConfirmorBodyClasses,
+  deletionConfirmorContentClasses,
+  deletionConfirmorFooterClasses,
+  deletionConfirmorHeaderClasses,
+} from "./styles";
+
+export function DeletionConfirmor({
+  isOpen,
+  onClose,
+  title,
+  description,
+  className,
+  classNames,
+  confirmProps,
+  declineProps,
+}: DeletionConfirmorProps) {
+  const { config } = useEmperorUI();
+
+  const lang = config?.interLocalization?.lang ?? "en";
+  const locale = config?.interLocalization?.locales?.[lang] as
+    | Locale
+    | undefined;
+  const deletionConfirmorLocale = locale?.organisms?.deletionConfirmor;
+
+  const handleDecline = (e?: unknown) => {
+    if (typeof declineProps?.onPress === "function") {
+      (declineProps.onPress as (e?: unknown) => void)(e);
+    }
+    onClose();
+  };
+
+  return (
+    <Modal
+      placement="center"
+      isOpen={isOpen}
+      onClose={onClose}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      dir={lang === "ar" ? "rtl" : "ltr"}
+      classNames={
+        className || classNames?.base
+          ? { base: cn(className, classNames?.base) }
+          : undefined
+      }
+    >
+      <ModalContent
+        className={cn(deletionConfirmorContentClasses(), classNames?.content)}
+      >
+        <ModalHeader
+          className={cn(deletionConfirmorHeaderClasses(), classNames?.header)}
+        >
+          {title}
+        </ModalHeader>
+
+        <ModalBody
+          className={cn(deletionConfirmorBodyClasses(), classNames?.body)}
+        >
+          {description}
+        </ModalBody>
+
+        <ModalFooter
+          className={cn(deletionConfirmorFooterClasses(), classNames?.footer)}
+        >
+          <Button
+            variant="flat"
+            size="sm"
+            {...declineProps}
+            onPress={handleDecline}
+            className={cn(declineProps?.className, classNames?.declineButton)}
+          >
+            {declineProps?.children ??
+              deletionConfirmorLocale?.decline ??
+              "Decline"}
+          </Button>
+
+          <Button
+            color="danger"
+            size="sm"
+            {...confirmProps}
+            className={cn(confirmProps?.className, classNames?.confirmButton)}
+            startContent={
+              confirmProps?.isLoading
+                ? undefined
+                : (confirmProps?.startContent ?? (
+                    <Trash2 className="size-4" aria-hidden />
+                  ))
+            }
+          >
+            {confirmProps?.children ??
+              deletionConfirmorLocale?.confirm ??
+              "Confirm"}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

package/src/components/organisms/deletion-confirmor/index.ts

@@ -0,0 +1,3 @@
+export * from "./deletion-confirmor";
+export * from "./styles";
+export * from "./stories/components";

package/src/components/organisms/deletion-confirmor/stories/components.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@heroui/button";
+import { DeletionConfirmorProps } from "@/types";
+import { useState } from "react";
+import { DeletionConfirmor } from "@/components";
+
+export const DeletionConfirmorWithTrigger = (args: DeletionConfirmorProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Button color="danger" onPress={() => setIsOpen(true)}>
+        Delete item
+      </Button>
+
+      <DeletionConfirmor
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      />
+    </div>
+  );
+};

package/src/components/organisms/deletion-confirmor/stories/deletion-confirmor.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DeletionConfirmor, DeletionConfirmorWithTrigger } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { DeletionConfirmorProps } from "@/types";
+import { mockAwaitingDelete } from "@/mocks";
+import { Button } from "@heroui/button";
+import { useState } from "react";
+
+const meta: Meta<typeof DeletionConfirmor> = {
+  title: "Organisms/DeletionConfirmor",
+  component: DeletionConfirmor,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Delete item?",
+    description:
+      "This action cannot be undone. This will permanently delete the item.",
+  },
+  render: (args: DeletionConfirmorProps) => {
+    return <DeletionConfirmorWithTrigger {...args} />;
+  },
+};
+
+export const WithConfirmLoading: Story = {
+  args: {
+    title: "Delete item?",
+    description:
+      "This action cannot be undone. The confirm button will show a loading state for 2 seconds.",
+  },
+  render: (args: DeletionConfirmorProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isConfirmLoading, setIsConfirmLoading] = useState(false);
+
+    const handleConfirm = async () => {
+      setIsConfirmLoading(true);
+
+      await mockAwaitingDelete(() => {
+        setIsOpen(false);
+        setIsConfirmLoading(false);
+      })();
+    };
+
+    return (
+      <div className="flex flex-col gap-4">
+        <Button color="danger" onPress={() => setIsOpen(true)}>
+          Delete item
+        </Button>
+
+        <DeletionConfirmor
+          {...args}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          confirmProps={{
+            ...args.confirmProps,
+            isLoading: isConfirmLoading,
+            onPress: handleConfirm,
+          }}
+        />
+      </div>
+    );
+  },
+};

package/src/components/organisms/deletion-confirmor/styles/classes.ts

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+
+export const deletionConfirmorContentClasses = cva(["p-0"], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const deletionConfirmorHeaderClasses = cva([], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const deletionConfirmorBodyClasses = cva([], {
+  variants: {},
+  defaultVariants: {},
+  compoundVariants: [],
+});
+
+export const deletionConfirmorFooterClasses = cva(
+  ["flex gap-2 justify-end flex-wrap"],
+  {
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+  },
+);

package/src/components/organisms/{filters → deletion-confirmor}/styles/index.ts

@@ -1 +1,2 @@
 export * from "./classes";
+export * from "./styles";

package/src/components/organisms/deletion-confirmor/styles/styles.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type, no-empty-pattern
+export const deletionConfirmorStyles = ({}: {}): CSSProperties => ({});

package/src/components/organisms/form-builder/form-builder.stories.tsx

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field, FormBuilder } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useState } from "react";
+
+const meta: Meta<typeof FormBuilder> = {
+  title: "Organisms/Form Builder",
+  component: FormBuilder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const schema = z.object({
+  fullName: z.string({ error: "Full name is required" }),
+  description: z.string({ error: "Description is required" }),
+  status: z.enum(["active", "inactive"], { error: "Status is required" }),
+  isActive: z.boolean({ error: "Is active is required" }),
+  isAvailable: z.boolean({ error: "Is available is required" }),
+});
+
+type SchemaValues = z.infer<typeof schema>;
+
+export const Default: Story = {
+  render: () => {
+    const [formValues, setFormValues] = useState<Partial<SchemaValues>>({});
+
+    return (
+      <div className="w-full max-w-2xl flex flex-col gap-5">
+        <h3 className="font-bold text-lg">Form Builder</h3>
+
+        <FormBuilder<typeof schema>
+          className="grid grid-cols-2 gap-5 p-4 rounded-md border"
+          formProps={{
+            mode: "all",
+            resolver: zodResolver(schema),
+          }}
+          onValuesChange={setFormValues}
+          onSubmit={() => {
+            alert("Form submitted");
+          }}
+        >
+          <Field
+            type="input"
+            name="fullName"
+            inputProps={{
+              label: "Full Name",
+              placeholder: "Type your name",
+            }}
+          />
+
+          <Field
+            type="select"
+            name="status"
+            options={[
+              { key: "active", label: "Active" },
+              { key: "inactive", label: "Inactive" },
+            ]}
+            selectProps={{
+              label: "Status",
+            }}
+          />
+
+          <Field
+            type="autocomplete"
+            name="tags"
+            options={[
+              { key: "tag1", label: "Tag 1" },
+              { key: "tag2", label: "Tag 2" },
+              { key: "tag3", label: "Tag 3" },
+            ]}
+            autocompleteProps={{
+              label: "Tags",
+              placeholder: "Type your tags",
+            }}
+          />
+
+          <Field type="checkbox" name="isActive">
+            Is Active?
+          </Field>
+
+          <Field type="switch" name="isAvailable">
+            Is Available?
+          </Field>
+
+          <Field
+            type="textarea"
+            name="description"
+            className="col-span-2"
+            textareaProps={{
+              label: "Description",
+              placeholder: "Type your description",
+            }}
+          />
+        </FormBuilder>
+
+        <section className="flex flex-col gap-2 rounded-md border p-4">
+          <h3 className="font-bold text-lg">Summary: </h3>
+
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Full Name:</span>
+            <span className="text-gray-500">{formValues.fullName ?? "—"}</span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Description:</span>
+            <span className="text-gray-500">
+              {formValues.description ?? "—"}
+            </span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Status:</span>
+            <span className="text-gray-500">{formValues.status ?? "—"}</span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Is Active:</span>
+            <span className="text-gray-500">
+              {formValues.isActive ? "Selected" : "Not Selected"}
+            </span>
+          </p>
+          <p className="flex items-center gap-2">
+            <span className="font-medium">Is Available:</span>
+            <span className="text-gray-500">
+              {formValues.isAvailable ? "Selected" : "Not Selected"}
+            </span>
+          </p>
+        </section>
+      </div>
+    );
+  },
+};

package/src/components/organisms/form-builder/form-builder.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Field } from "@/components";
+import { FormBuilderProvider } from "@/providers";
+import type { FormBuilderProps } from "@/types";
+import { cn } from "@/utils";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useMemo,
+  type ReactElement,
+} from "react";
+import { useEffect } from "react";
+import { useForm, useWatch } from "react-hook-form";
+import type { ZodType } from "zod";
+import { z } from "zod";
+
+export function FormBuilder<TSchema extends ZodType<any, any, any>>({
+  children,
+  className,
+  classNames,
+  formProps,
+  onSubmit,
+  onSuccess,
+  onError,
+  onValuesChange,
+}: FormBuilderProps<TSchema>) {
+  const { control, handleSubmit } = useForm<z.infer<TSchema>>(formProps);
+
+  const emptyValues = useMemo(() => ({}), []);
+  const formValues = useWatch({ control }) ?? emptyValues;
+
+  const allChildren = Children.toArray(children);
+
+  allChildren.forEach((child) => {
+    if (!isValidElement(child) || child.type !== Field) {
+      throw new Error(
+        "FormBuilder accepts only 'Field' components as children.",
+      );
+    }
+  });
+
+  const formFields = allChildren.map((child) =>
+    cloneElement(child as ReactElement),
+  );
+
+  useEffect(() => {
+    onValuesChange?.(formValues);
+  }, [formValues, onValuesChange]);
+
+  const handleValidSubmit = async (values: z.infer<TSchema>) => {
+    try {
+      await onSubmit(values);
+      onSuccess?.(values);
+    } catch (error) {
+      onError?.(error);
+    }
+  };
+
+  return (
+    <FormBuilderProvider<z.infer<TSchema>> value={{ control, formValues }}>
+      <form
+        className={cn(className, classNames?.base)}
+        onSubmit={handleSubmit(handleValidSubmit, (errors) =>
+          onError?.({
+            errors,
+          }),
+        )}
+      >
+        {formFields}
+      </form>
+    </FormBuilderProvider>
+  );
+}

package/src/components/organisms/form-builder/index.ts

@@ -0,0 +1 @@
+export * from "./form-builder";

package/src/components/organisms/index.ts

@@ -1,5 +1,6 @@
+export * from "./deletion-confirmor";
 export * from "./item-details";
 export * from "./listings";
 export * from "./footer";
 export * from "./header";
-export * from "./filters";
+export * from "./form-builder";

package/src/constants/card.tsx

@@ -7,20 +7,23 @@ export const ITEM_CARD_ACTIONS: ItemCardAction[] = [
     label: "View details",
     color: "primary",
     variant: "flat",
-    startContent: <Eye className="size-4" />,
+    size: "sm",
+    startContent: <Eye className="size-5" />,
   },
   {
     key: "edit",
     label: "Edit",
     color: "secondary",
     variant: "flat",
-    startContent: <Pencil className="size-4" />,
+    size: "sm",
+    startContent: <Pencil className="size-5" />,
   },
   {
     key: "delete",
     label: "Delete",
     color: "danger",
     variant: "flat",
+    size: "sm",
     startContent: <Trash2 className="size-4" />,
   },
 ];

package/src/constants/defaults.ts

@@ -16,4 +16,44 @@ export const defaultEmperorUIConfig: EmperorUIConfig = {
       ar,
     },
   },
+  theme: {
+    components: {
+      input: {
+        variant: "faded",
+        labelPlacement: "outside",
+        size: "sm",
+      },
+      textarea: {
+        variant: "faded",
+        labelPlacement: "outside",
+        size: "sm",
+      },
+      button: {
+        variant: "faded",
+        size: "sm",
+      },
+      select: {
+        variant: "faded",
+        labelPlacement: "outside",
+        placeholder: "Select an option",
+        size: "sm",
+      },
+      selectItem: {
+        variant: "faded",
+      },
+      autocomplete: {
+        variant: "faded",
+        labelPlacement: "outside",
+        size: "sm",
+      },
+      autocompleteItem: {
+        variant: "faded",
+      },
+      datePicker: {
+        variant: "faded",
+        labelPlacement: "outside",
+        size: "sm",
+      },
+    },
+  },
 };

package/src/context/form-builder-context.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { createContext } from "react";
+import { FormBuilderValue } from "@/types";
+import { FieldValues } from "react-hook-form";
+
+export const FormBuilderContext =
+  createContext<FormBuilderValue<FieldValues> | null>(null);

package/src/context/index.ts

@@ -1,3 +1,4 @@
 export * from "./emperor-ui-context";
 export * from "./navigation-context";
 export * from "./uploader-context";
+export * from "./form-builder-context";

package/src/hooks/index.ts

@@ -5,3 +5,4 @@ export * from "./use-uploader-context";
 export * from "./use-uploader";
 export * from "./use-window-size";
 export * from "./use-filters";
+export * from "./use-form-builder-context";

package/src/hooks/use-filters.ts

@@ -6,7 +6,7 @@ import { useSearchParamsHandler } from "@/hooks";
 export function useFilters<
   FiltersType extends Record<string, string | number | boolean>,
 >() {
-  const { allParams } = useSearchParamsHandler();
+  const { allParams, clearParams } = useSearchParamsHandler();
 
   const filters = useMemo(() => {
     if (!Object.keys(allParams).length) {
@@ -16,5 +16,5 @@ export function useFilters<
     return allParams as unknown as FiltersType;
   }, [allParams]);
 
-  return { filters };
+  return { filters, clearFilters: clearParams };
 }

package/src/hooks/use-form-builder-context.ts

@@ -0,0 +1,16 @@
+import { FormBuilderContext } from "@/context";
+import { FormBuilderValue } from "@/types";
+import { useContext } from "react";
+import { FieldValues } from "react-hook-form";
+
+export function useFormBuilder<TSchema extends FieldValues>() {
+  const context = useContext(FormBuilderContext) as FormBuilderValue<TSchema>;
+
+  if (!context) {
+    throw new Error(
+      "'useFormBuilder' must be used within a 'FormBuilderProvider', make sure to wrap 'Field' components with 'FormBuilder' as well.",
+    );
+  }
+
+  return context;
+}