@js-empire/emperor-ui 1.2.5 → 1.2.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@js-empire/emperor-ui",
   "description": "They provide the atoms, we provide the empire.",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "author": "JS Empire - Mustafa Alhasanat",
   "license": "ISC",
   "type": "module",
@@ -73,6 +73,8 @@
     "@heroui/system": "^2.4.27",
     "@heroui/theme": "^2.4.25",
     "@heroui/toast": "^2.0.21",
+    "@heroui/tooltip": "^2.2.28",
+    "@hookform/resolvers": "^5.2.2",
     "@internationalized/date": "^3.11.0",
     "@storybook/react": "^10.1.8",
     "@tailwindcss/vite": "^4.1.17",
@@ -96,7 +98,8 @@
     "tailwindcss": "^4.1.17",
     "use-debounce": "^10.1.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",

package/src/components/atoms/color-picker/color-picker.tsx

@@ -2,7 +2,6 @@
 
 import type { ColorPickerProps } from "@/types";
 import { FreeColorPicker, PresetColorPicker } from "@/components";
-import "./styles/color-picker.css";
 
 export function ColorPicker({ ...props }: ColorPickerProps) {
   if (props?.inputType === "preset") {

package/src/components/atoms/color-picker/free-color-picker.tsx

@@ -7,13 +7,12 @@ import type { ColorPickerProps } from "@/types";
 import { CopyButton } from "@/components";
 import { useEmperorUI } from "@/hooks";
 
-const HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
-
 export function FreeColorPicker({
   className,
   classNames,
   value = "#000000",
-  onValueChange,
+  onChange,
+  defaultValue,
   inputType = "free",
   ...props
 }: ColorPickerProps) {
@@ -26,12 +25,10 @@ export function FreeColorPicker({
 
   const isInvalid = useMemo(() => {
     if (!value) return true;
-    return HEX_COLOR_REGEX.test(value);
-  }, [value]);
+    const HEX_COLOR_REGEX = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
 
-  const handleValueChange = (newValue: string) => {
-    onValueChange?.(newValue);
-  };
+    return !HEX_COLOR_REGEX.test(value);
+  }, [value]);
 
   return (
     <Input
@@ -39,8 +36,9 @@ export function FreeColorPicker({
       variant="faded"
       className={cn(className)}
       classNames={{ label: "font-bold", input: "h-12", ...classNames }}
+      defaultValue={defaultValue}
       value={value}
-      onValueChange={handleValueChange}
+      onValueChange={onChange}
       isInvalid={isInvalid}
       errorMessage={isInvalid ? errorMessage : undefined}
       endContent={<CopyButton value={value} />}
@@ -50,7 +48,7 @@ export function FreeColorPicker({
           className="color-swatch"
           value={value}
           onChange={(e) => {
-            handleValueChange(e.target.value);
+            onChange?.(e.target.value as string);
           }}
         />
       }

package/src/components/atoms/color-picker/preset-color-picker.tsx

@@ -9,7 +9,8 @@ export function PresetColorPicker({
   className,
   classNames,
   value = "#000000",
-  onSelectionChange,
+  onChange,
+  defaultValue,
   inputType,
   presets = [],
   ...props
@@ -30,8 +31,9 @@ export function PresetColorPicker({
         trigger: "min-w-52",
         ...classNames,
       }}
-      value={value}
-      onSelectionChange={onSelectionChange}
+      selectedKeys={value ? [value] : undefined}
+      defaultSelectedKeys={defaultValue ? [defaultValue] : undefined}
+      onSelectionChange={(value) => onChange?.(value?.currentKey ?? "")}
       endContent={<CopyButton value={value} />}
       renderValue={() => {
         return (

package/src/components/atoms/color-picker/stories/color-picker.stories.tsx

@@ -24,9 +24,21 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: (args) => {
+  render: () => {
     const [value, setValue] = useState("#000000");
-    return <ColorPicker {...args} value={value} onValueChange={setValue} />;
+
+    return (
+      <section className="flex flex-col gap-4">
+        <ColorPicker
+          inputType="free"
+          value={value}
+          onChange={setValue}
+          defaultValue="#000000"
+        />
+
+        <p className="text-xs text-gray-500">Value: {value}</p>
+      </section>
+    );
   },
 };
 
@@ -35,15 +47,17 @@ export const WithPresets: Story = {
     const [value, setValue] = useState("#000000");
 
     return (
-      <ColorPicker
-        inputType="preset"
-        presets={["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"]}
-        value={value}
-        onSelectionChange={(keys) => {
-          setValue(keys?.currentKey ?? "");
-        }}
-        defaultSelectedKeys={["#000000"]}
-      />
+      <section className="flex flex-col gap-4">
+        <ColorPicker
+          inputType="preset"
+          presets={["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"]}
+          value={value}
+          onChange={setValue}
+          defaultValue="#000000"
+        />
+
+        <p className="text-xs text-gray-500">Value: {value}</p>
+      </section>
     );
   },
 };

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

@@ -1,11 +1,81 @@
+import {
+  AutocompleteField,
+  CheckboxField,
+  InputField,
+  RadioField,
+  SelectField,
+  SwitchField,
+  TextareaField,
+  fieldClasses,
+} from "@/components";
+import type { FieldProps, FieldType } from "@/types";
 import { cn } from "@/utils";
-import { FieldProps } from "@/types";
-import { fieldClasses } from "./styles";
+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}
+      />
+    ),
+  };
 
-export function Field({ className, classNames, ...props }: FieldProps) {
   return (
-    <div className={cn(fieldClasses({}), className)} {...props}>
-      Sorter Component
+    <div
+      data-slot="emperor-ui-field"
+      className={cn(fieldClasses({}), className, classNames?.base)}
+    >
+      {components[type]}
     </div>
   );
 }

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

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

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

@@ -48,6 +48,7 @@ export function Filter({
     autocomplete: (
       <AutocompleteFilter
         autocompleteProps={autocompleteProps}
+        options={options}
         {...sharedProps}
         {...props}
       />
@@ -66,6 +67,7 @@ export function Filter({
     checkboxGroup: (
       <CheckboxGroupFilter
         checkboxGroupProps={checkboxGroupProps}
+        options={options}
         {...sharedProps}
         {...props}
       />
@@ -84,7 +86,6 @@ export function Filter({
         className,
         props?.classNames?.base,
       )}
-      {...props}
     >
       {components[type]}
     </div>