@js-empire/emperor-ui 1.3.10 → 1.3.12

package/src/components/atoms/copy-button/copy-button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Button } from "@heroui/button";
+import { Spinner } from "@heroui/spinner";
+import { Copy, Check } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+type CopyState = "copy" | "loading" | "success";
+
+export function CopyButton({ value }: { value: string }) {
+  const [state, setState] = useState<CopyState>("copy");
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = () => {
+    if (state !== "copy") return;
+
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+    navigator.clipboard.writeText(value);
+    setState("loading");
+
+    timeoutRef.current = setTimeout(() => {
+      setState("success");
+      timeoutRef.current = setTimeout(() => setState("copy"), 2000);
+    }, 500);
+  };
+
+  useEffect(
+    () => () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  return (
+    <Button
+      variant="light"
+      size="sm"
+      isIconOnly
+      onPress={handleCopy}
+      disabled={state !== "copy"}
+      startContent={
+        <span className="relative size-4">
+          <AnimatePresence mode="wait">
+            <motion.span
+              key={state}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="absolute inset-0 flex items-center justify-center"
+            >
+              {state === "copy" && <Copy className="size-4" />}
+
+              {state === "loading" && (
+                <Spinner
+                  size="sm"
+                  classNames={{
+                    circle1: "border-b-current",
+                    circle2: "border-current",
+                  }}
+                />
+              )}
+
+              {state === "success" && <Check className="size-4 text-success" />}
+            </motion.span>
+          </AnimatePresence>
+        </span>
+      }
+    />
+  );
+}

package/src/components/atoms/copy-button/index.ts

@@ -0,0 +1 @@
+export * from "./copy-button";

package/src/components/atoms/copy-button/stories/copy-button.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CopyButton } from "@/components";
+
+const meta: Meta<typeof CopyButton> = {
+  title: "Atoms/CopyButton",
+  component: CopyButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: "Copied to clipboard successfully!",
+  },
+};

package/src/components/atoms/field/field.tsx

@@ -0,0 +1,81 @@
+import {
+  AutocompleteField,
+  CheckboxField,
+  InputField,
+  RadioField,
+  SelectField,
+  SwitchField,
+  TextareaField,
+  fieldClasses,
+} from "@/components";
+import type { FieldProps, FieldType } from "@/types";
+import { cn } from "@/utils";
+import type { FieldValues } from "react-hook-form";
+import type { ReactNode } from "react";
+
+export function Field<TSchema extends FieldValues>({
+  className,
+  classNames,
+  name,
+  type,
+  inputProps,
+  textareaProps,
+  checkboxProps,
+  selectProps,
+  selectItemProps,
+  autocompleteProps,
+  autocompleteItemProps,
+  switchProps,
+  radioGroupProps,
+  options,
+  children,
+}: FieldProps<TSchema>) {
+  const components: Record<FieldType, ReactNode> = {
+    input: <InputField<TSchema> name={name} inputProps={inputProps} />,
+    textarea: (
+      <TextareaField<TSchema> name={name} textareaProps={textareaProps} />
+    ),
+    checkbox: (
+      <CheckboxField<TSchema> name={name} checkboxProps={checkboxProps}>
+        {children}
+      </CheckboxField>
+    ),
+    select: (
+      <SelectField<TSchema>
+        name={name}
+        options={options}
+        selectProps={selectProps}
+        selectItemProps={selectItemProps}
+      />
+    ),
+    autocomplete: (
+      <AutocompleteField<TSchema>
+        name={name}
+        options={options}
+        autocompleteProps={autocompleteProps}
+        autocompleteItemProps={autocompleteItemProps}
+      />
+    ),
+    switch: (
+      <SwitchField<TSchema> name={name} switchProps={switchProps}>
+        {children}
+      </SwitchField>
+    ),
+    radio: (
+      <RadioField<TSchema>
+        name={name}
+        options={options}
+        radioGroupProps={radioGroupProps}
+      />
+    ),
+  };
+
+  return (
+    <div
+      data-slot="emperor-ui-field"
+      className={cn(fieldClasses({}), className, classNames?.base)}
+    >
+      {components[type]}
+    </div>
+  );
+}

package/src/components/atoms/field/index.ts

@@ -0,0 +1,3 @@
+export * from "./field";
+export * from "./styles";
+export * from "./units";

package/src/components/atoms/field/styles/classes.ts

@@ -0,0 +1,9 @@
+import { cva } from "class-variance-authority";
+
+export const fieldClasses = cva([""], {
+  variants: {
+    variant: {},
+  },
+  defaultVariants: {},
+  compoundVariants: [],
+});

package/src/components/atoms/field/styles/index.ts

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

package/src/components/atoms/field/units/autocomplete-field.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import type { FieldProps } from "@/types";
+import { Controller, type FieldValues } from "react-hook-form";
+import { Autocomplete, AutocompleteItem } from "@heroui/autocomplete";
+import { useEmperorUI, useFormBuilder } from "@/hooks";
+
+export function AutocompleteField<TSchema extends FieldValues>({
+  autocompleteItemProps,
+  autocompleteProps,
+  options,
+  name,
+}: Pick<
+  FieldProps<TSchema>,
+  "autocompleteItemProps" | "autocompleteProps" | "options" | "name"
+>) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.autocomplete;
+
+  if (!options?.length) {
+    throw new Error("Field with type 'autocomplete' must include 'options'.");
+  }
+
+  const { control } = useFormBuilder<TSchema>();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <Autocomplete
+          {...theme}
+          {...autocompleteProps}
+          selectedKey={field.value ? String(field.value) : null}
+          onSelectionChange={(selectedKey) =>
+            field.onChange(selectedKey ? String(selectedKey) : "")
+          }
+        >
+          {options.map((option) => (
+            <AutocompleteItem key={option.key} {...autocompleteItemProps}>
+              {option.label}
+            </AutocompleteItem>
+          ))}
+        </Autocomplete>
+      )}
+    />
+  );
+}

package/src/components/atoms/field/units/checkbox-field.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { FieldProps } from "@/types";
+import { Controller, type FieldValues } from "react-hook-form";
+import { Checkbox } from "@heroui/checkbox";
+import { useEmperorUI, useFormBuilder } from "@/hooks";
+
+export function CheckboxField<TSchema extends FieldValues>({
+  checkboxProps,
+  name,
+  children,
+}: Pick<FieldProps<TSchema>, "checkboxProps" | "name" | "children">) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.checkbox;
+
+  const { control } = useFormBuilder<TSchema>();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { value, onChange } }) => (
+        <Checkbox
+          {...theme}
+          {...checkboxProps}
+          isSelected={Boolean(value)}
+          onValueChange={onChange}
+        >
+          {children}
+        </Checkbox>
+      )}
+    />
+  );
+}

package/src/components/atoms/field/units/index.ts

@@ -0,0 +1,7 @@
+export * from "./input-field";
+export * from "./textarea-field";
+export * from "./checkbox-field";
+export * from "./select-field";
+export * from "./autocomplete-field";
+export * from "./switch-field";
+export * from "./radio-field";

package/src/components/atoms/field/units/input-field.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { FieldProps } from "@/types";
+import { Controller, type FieldValues } from "react-hook-form";
+import { Input } from "@heroui/input";
+import { useEmperorUI, useFormBuilder } from "@/hooks";
+
+export function InputField<TSchema extends FieldValues>({
+  inputProps,
+  name,
+}: Pick<FieldProps<TSchema>, "inputProps" | "name">) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.input;
+
+  const { control } = useFormBuilder<TSchema>();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <Input
+          {...theme}
+          {...inputProps}
+          value={field.value ? String(field.value) : ""}
+          onBlur={field.onBlur}
+          onValueChange={field.onChange}
+          isInvalid={inputProps?.isInvalid ?? Boolean(fieldState.error)}
+          errorMessage={inputProps?.errorMessage ?? fieldState.error?.message}
+        />
+      )}
+    />
+  );
+}

package/src/components/atoms/field/units/radio-field.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import type { FieldProps } from "@/types";
+import { Controller, type FieldValues } from "react-hook-form";
+import { Radio, RadioGroup } from "@heroui/radio";
+import { useEmperorUI, useFormBuilder } from "@/hooks";
+
+export function RadioField<TSchema extends FieldValues>({
+  options,
+  radioGroupProps,
+  name,
+}: Pick<FieldProps<TSchema>, "options" | "radioGroupProps" | "name">) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.radio;
+
+  const { control } = useFormBuilder<TSchema>();
+
+  if (!options?.length) {
+    throw new Error("Field with type 'radio' must include 'options'.");
+  }
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <RadioGroup
+          {...theme}
+          {...radioGroupProps}
+          value={field.value ? String(field.value) : ""}
+          onValueChange={field.onChange}
+        >
+          {options.map((option) => (
+            <Radio key={option.key} value={option.key}>
+              {option.label}
+            </Radio>
+          ))}
+        </RadioGroup>
+      )}
+    />
+  );
+}

package/src/components/atoms/field/units/select-field.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { FieldProps } from "@/types";
+import { Controller, type FieldValues } from "react-hook-form";
+import { Select, SelectItem } from "@heroui/select";
+import { useEmperorUI, useFormBuilder } from "@/hooks";
+
+export function SelectField<TSchema extends FieldValues>({
+  options,
+  selectItemProps,
+  selectProps,
+  name,
+}: Pick<
+  FieldProps<TSchema>,
+  "options" | "selectItemProps" | "selectProps" | "name"
+>) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.select;
+
+  if (!options?.length) {
+    throw new Error("Field with type 'select' must include 'options'.");
+  }
+
+  const { control } = useFormBuilder<TSchema>();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <Select
+          {...theme}
+          {...selectProps}
+          selectedKeys={field.value ? [String(field.value)] : []}
+          onSelectionChange={(keys) => {
+            const selectedKey = Array.from(keys)[0];
+            field.onChange(selectedKey ? String(selectedKey) : "");
+          }}
+        >
+          {options.map((option) => (
+            <SelectItem key={option.key} {...selectItemProps}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </Select>
+      )}
+    />
+  );
+}

package/src/components/atoms/field/units/switch-field.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { FieldProps } from "@/types";
+import { Controller, type FieldValues } from "react-hook-form";
+import { Switch } from "@heroui/switch";
+import { useEmperorUI, useFormBuilder } from "@/hooks";
+
+export function SwitchField<TSchema extends FieldValues>({
+  switchProps,
+  name,
+  children,
+}: Pick<FieldProps<TSchema>, "switchProps" | "name" | "children">) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.switch;
+
+  const { control } = useFormBuilder<TSchema>();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <Switch
+          {...theme}
+          {...switchProps}
+          isSelected={Boolean(field.value)}
+          onValueChange={field.onChange}
+        >
+          {children}
+        </Switch>
+      )}
+    />
+  );
+}

package/src/components/atoms/field/units/textarea-field.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { FieldProps } from "@/types";
+import { Controller, type FieldValues } from "react-hook-form";
+import { Textarea } from "@heroui/input";
+import { useEmperorUI, useFormBuilder } from "@/hooks";
+
+export function TextareaField<TSchema extends FieldValues>({
+  textareaProps,
+  name,
+}: Pick<FieldProps<TSchema>, "textareaProps" | "name">) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.textarea;
+
+  const { control } = useFormBuilder<TSchema>();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <Textarea
+          {...theme}
+          {...textareaProps}
+          value={field.value ? String(field.value) : ""}
+          onBlur={field.onBlur}
+          onValueChange={field.onChange}
+          isInvalid={textareaProps?.isInvalid ?? Boolean(fieldState.error)}
+          errorMessage={
+            textareaProps?.errorMessage ?? fieldState.error?.message
+          }
+        />
+      )}
+    />
+  );
+}

package/src/components/atoms/filter/filter.tsx

@@ -0,0 +1,93 @@
+import { cn } from "@/utils";
+import { FilterProps, FilterType } from "@/types";
+import { filterClasses } from "./styles";
+import { ReactNode } from "react";
+import {
+  SearchFilter,
+  SelectFilter,
+  AutocompleteFilter,
+  DateFilter,
+  NumericFilter,
+  CheckboxFilter,
+  CheckboxGroupFilter,
+  SwitchFilter,
+  RangeFilter,
+} from "@/components";
+
+export function Filter({
+  className,
+  type,
+  searchProps,
+  selectProps,
+  autocompleteProps,
+  dateProps,
+  numericProps,
+  checkboxProps,
+  checkboxGroupProps,
+  radioProps,
+  switchProps,
+  rangeProps,
+  paramKey,
+  options,
+  ...props
+}: FilterProps) {
+  const sharedProps = { paramKey };
+
+  const components: Record<FilterType, ReactNode> = {
+    search: (
+      <SearchFilter searchProps={searchProps} {...sharedProps} {...props} />
+    ),
+    select: (
+      <SelectFilter
+        selectProps={selectProps}
+        options={options}
+        {...sharedProps}
+        {...props}
+      />
+    ),
+    autocomplete: (
+      <AutocompleteFilter
+        autocompleteProps={autocompleteProps}
+        options={options}
+        {...sharedProps}
+        {...props}
+      />
+    ),
+    date: <DateFilter dateProps={dateProps} {...sharedProps} {...props} />,
+    numeric: (
+      <NumericFilter numericProps={numericProps} {...sharedProps} {...props} />
+    ),
+    checkbox: (
+      <CheckboxFilter
+        checkboxProps={checkboxProps}
+        {...sharedProps}
+        {...props}
+      />
+    ),
+    checkboxGroup: (
+      <CheckboxGroupFilter
+        checkboxGroupProps={checkboxGroupProps}
+        options={options}
+        {...sharedProps}
+        {...props}
+      />
+    ),
+    switch: (
+      <SwitchFilter switchProps={switchProps} {...sharedProps} {...props} />
+    ),
+    range: <RangeFilter rangeProps={rangeProps} {...sharedProps} {...props} />,
+  };
+
+  return (
+    <div
+      data-slot="emperor-ui-filter"
+      className={cn(
+        filterClasses({ type }),
+        className,
+        props?.classNames?.base,
+      )}
+    >
+      {components[type]}
+    </div>
+  );
+}

package/src/components/atoms/filter/index.ts

@@ -0,0 +1,3 @@
+export * from "./filter";
+export * from "./units";
+export * from "./styles";