@js-empire/emperor-ui 1.3.5 → 1.3.7

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

@@ -1,81 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,49 +0,0 @@
-"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

@@ -1,35 +0,0 @@
-"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

@@ -1,7 +0,0 @@
-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

@@ -1,35 +0,0 @@
-"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

@@ -1,43 +0,0 @@
-"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

@@ -1,50 +0,0 @@
-"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

@@ -1,35 +0,0 @@
-"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

@@ -1,37 +0,0 @@
-"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

@@ -1,93 +0,0 @@
-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

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