@js-empire/emperor-ui 1.3.6 → 1.3.7

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";

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

@@ -1,238 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Filter } from "@/components";
-import { useFilters } from "@/hooks";
-
-const meta: Meta<typeof Filter> = {
-  title: "Atoms/Filter",
-  component: Filter,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const filterOptions = [
-  { key: "option-key-1", label: "Option 1" },
-  { key: "option-key-2", label: "Option 2" },
-  { key: "option-key-3", label: "Option 3" },
-];
-
-export const SearchFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      search: string;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="search"
-          paramKey="search"
-          searchProps={{ label: "Search" }}
-        />
-
-        <p className="text-gray-500 text-xs">
-          {filters?.search || "No filter applied"}
-        </p>
-      </section>
-    );
-  },
-};
-
-export const SelectFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      select: string;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="select"
-          paramKey="select"
-          selectProps={{ label: "Select an option" }}
-          options={[
-            { key: "option-key-1", label: "Option 1" },
-            { key: "option-key-2", label: "Option 2" },
-            { key: "option-key-3", label: "Option 3" },
-          ]}
-        />
-
-        <p className="text-gray-500 text-xs">
-          {filters?.select || "No filter applied"}
-        </p>
-      </section>
-    );
-  },
-};
-
-export const CheckboxFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      isChecked: boolean;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="checkbox"
-          paramKey="isChecked"
-          checkboxProps={{ children: "Is Checked ?" }}
-        />
-
-        <p className="text-gray-500 text-xs">
-          <span>Result: </span>
-          <span className="text-gray-500">
-            {filters?.isChecked ? "Yes" : "No"}
-          </span>
-        </p>
-      </section>
-    );
-  },
-};
-
-export const AutocompleteFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      autocomplete: string;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="autocomplete"
-          paramKey="autocomplete"
-          autocompleteProps={{ label: "Autocomplete" }}
-          options={filterOptions}
-        />
-
-        <p className="text-gray-500 text-xs">
-          {filters?.autocomplete || "No filter applied"}
-        </p>
-      </section>
-    );
-  },
-};
-
-export const DateFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      date: string;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="date"
-          paramKey="date"
-          dateProps={{ label: "Select date" }}
-        />
-
-        <p className="text-gray-500 text-xs">
-          {filters?.date || "No filter applied"}
-        </p>
-      </section>
-    );
-  },
-};
-
-export const NumericFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      numeric: string;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="numeric"
-          paramKey="numeric"
-          numericProps={{ label: "Enter number", placeholder: "0" }}
-        />
-
-        <p className="text-gray-500 text-xs">
-          {filters?.numeric || "No filter applied"}
-        </p>
-      </section>
-    );
-  },
-};
-
-export const CheckboxGroupFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      categories: string;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="checkboxGroup"
-          paramKey="categories"
-          checkboxGroupProps={{ label: "Categories" }}
-          options={filterOptions}
-        />
-
-        <p className="text-gray-500 text-xs">
-          {filters?.categories || "No filter applied"}
-        </p>
-      </section>
-    );
-  },
-};
-
-export const SwitchFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      enabled: boolean;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="switch"
-          paramKey="enabled"
-          switchProps={{ children: "Enabled ?" }}
-        />
-
-        <p className="text-gray-500 text-xs">
-          <span>Result: </span>
-          <span className="text-gray-500">
-            {filters?.enabled ? "Yes" : "No"}
-          </span>
-        </p>
-      </section>
-    );
-  },
-};
-
-export const RangeFilter: Story = {
-  render: () => {
-    const { filters } = useFilters<{
-      range: string;
-    }>();
-
-    return (
-      <section className="flex flex-col gap-2">
-        <Filter
-          type="range"
-          paramKey="range"
-          rangeProps={{
-            label: "Value",
-            minValue: 0,
-            maxValue: 100,
-            step: 1,
-          }}
-        />
-
-        <p className="text-gray-500 text-xs">
-          {filters?.range ?? "No filter applied"}
-        </p>
-      </section>
-    );
-  },
-};

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

@@ -1,20 +0,0 @@
-import { cva } from "class-variance-authority";
-
-export const filterClasses = cva([""], {
-  variants: {
-    type: {
-      search: "",
-      select: "",
-      autocomplete: "",
-      date: "",
-      numeric: "",
-      checkbox: "",
-      checkboxGroup: "",
-      radio: "",
-      switch: "",
-      range: "",
-    },
-  },
-  defaultVariants: {},
-  compoundVariants: [],
-});

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

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

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

@@ -1,66 +0,0 @@
-"use client";
-
-import { FilterProps } from "@/types";
-import { filterClasses } from "@/components";
-import { Autocomplete, AutocompleteItem } from "@heroui/autocomplete";
-import { cn } from "@/utils";
-import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
-
-export function AutocompleteFilter({
-  classNames,
-  autocompleteProps,
-  autocompleteItemProps,
-  paramKey,
-  options,
-}: Pick<
-  FilterProps,
-  | "classNames"
-  | "autocompleteProps"
-  | "autocompleteItemProps"
-  | "paramKey"
-  | "options"
->) {
-  const { config } = useEmperorUI();
-
-  const theme = config?.theme?.components?.autocomplete;
-  const themeItem = config?.theme?.components?.autocompleteItem;
-
-  const { getParam, setParams } = useSearchParamsHandler();
-  const value = getParam(paramKey);
-
-  if (!options?.length)
-    throw new Error(
-      "Filter with type 'autocomplete' must have 'options' property.",
-    );
-
-  return (
-    <Autocomplete
-      {...theme}
-      {...autocompleteProps}
-      selectedKey={value || null}
-      onSelectionChange={(selectedKey) =>
-        setParams({
-          params: {
-            [paramKey]: selectedKey ? String(selectedKey) : undefined,
-          },
-        })
-      }
-      className={cn(filterClasses({ type: "autocomplete" }), classNames?.field)}
-      classNames={{
-        base: "min-w-40",
-        ...theme?.classNames,
-        ...autocompleteProps?.classNames,
-      }}
-    >
-      {(options || [])?.map((option) => (
-        <AutocompleteItem
-          key={option.key}
-          {...themeItem}
-          {...autocompleteItemProps}
-        >
-          {option.label}
-        </AutocompleteItem>
-      ))}
-    </Autocomplete>
-  );
-}

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

@@ -1,42 +0,0 @@
-"use client";
-
-import { FilterProps } from "@/types";
-import { filterClasses } from "@/components";
-import { Checkbox } from "@heroui/checkbox";
-import { cn } from "@/utils";
-import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
-import { useMemo } from "react";
-
-export function CheckboxFilter({
-  classNames,
-  checkboxProps,
-  paramKey,
-}: Pick<FilterProps, "classNames" | "checkboxProps" | "paramKey">) {
-  const { config } = useEmperorUI();
-
-  const theme = config?.theme?.components?.checkbox;
-
-  const { getParam, setParams } = useSearchParamsHandler();
-
-  const { isSelected } = useMemo(() => {
-    const value = getParam(paramKey);
-    const isSelected = value === "true" || value === "1" || value === "yes";
-
-    return { value, isSelected };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [paramKey]);
-
-  return (
-    <Checkbox
-      {...theme}
-      {...checkboxProps}
-      isSelected={isSelected}
-      onValueChange={(selected) =>
-        setParams({
-          params: { [paramKey]: selected ? "true" : undefined },
-        })
-      }
-      className={cn(filterClasses({ type: "checkbox" }), classNames?.field)}
-    />
-  );
-}

package/src/components/atoms/filter/units/checkbox-group-filter.tsx

@@ -1,68 +0,0 @@
-"use client";
-
-import { FilterProps } from "@/types";
-import { filterClasses } from "@/components";
-import { Checkbox, CheckboxGroup } from "@heroui/checkbox";
-import { cn } from "@/utils";
-import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
-import { useMemo } from "storybook/internal/preview-api";
-
-export function CheckboxGroupFilter({
-  classNames,
-  checkboxGroupProps,
-  paramKey,
-  options,
-}: Pick<
-  FilterProps,
-  "classNames" | "checkboxGroupProps" | "paramKey" | "options"
->) {
-  const { config } = useEmperorUI();
-
-  const themeCheckboxGroup = config?.theme?.components?.checkboxGroup;
-  const themeCheckbox = config?.theme?.components?.checkbox;
-
-  const { getParam, setParams } = useSearchParamsHandler();
-
-  const { value } = useMemo(() => {
-    const valueStr = getParam(paramKey);
-    const value = valueStr ? valueStr.split(",").filter(Boolean) : [];
-
-    return { value };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [paramKey]);
-
-  if (!options?.length)
-    throw new Error(
-      "Filter with type 'checkboxGroup' must have 'options' property.",
-    );
-
-  return (
-    <CheckboxGroup
-      {...themeCheckboxGroup}
-      {...checkboxGroupProps}
-      value={value}
-      onValueChange={(values) =>
-        setParams({
-          params: {
-            [paramKey]: values.length > 0 ? values.join(",") : undefined,
-          },
-        })
-      }
-      classNames={{
-        label: "font-semibold",
-        ...themeCheckboxGroup?.classNames,
-        ...checkboxGroupProps?.classNames,
-      }}
-      className={cn(
-        filterClasses({ type: "checkboxGroup" }),
-        classNames?.field,
-      )}
-    >
-      {options.map((option) => (
-        <Checkbox key={option.key} {...themeCheckbox} value={option.key}>
-          {option.label}
-        </Checkbox>
-      ))}
-    </CheckboxGroup>
-  );
-}

package/src/components/atoms/filter/units/date-filter.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import { FilterProps } from "@/types";
-import { filterClasses } from "@/components";
-import { DatePicker } from "@heroui/date-picker";
-import { cn } from "@/utils";
-import { parseDate } from "@internationalized/date";
-import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
-
-export function DateFilter({
-  classNames,
-  dateProps,
-  paramKey,
-}: Pick<FilterProps, "classNames" | "dateProps" | "paramKey">) {
-  const { getParam, setParams } = useSearchParamsHandler();
-  const { config } = useEmperorUI();
-
-  const theme = config?.theme?.components?.datePicker;
-
-  const valueStr = getParam(paramKey);
-  const value =
-    valueStr && /^\d{4}-\d{2}-\d{2}$/.test(valueStr)
-      ? parseDate(valueStr)
-      : null;
-
-  return (
-    <DatePicker
-      {...theme}
-      {...dateProps}
-      value={value}
-      onChange={(date) =>
-        setParams({
-          params: {
-            [paramKey]: date ? String(date) : undefined,
-          },
-        })
-      }
-      className={cn(filterClasses({ type: "date" }), classNames?.field)}
-      classNames={{
-        label: "font-semibold",
-        ...theme?.classNames,
-        ...dateProps?.classNames,
-      }}
-    />
-  );
-}

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

@@ -1,9 +0,0 @@
-export * from "./search-filter";
-export * from "./select-filter";
-export * from "./autocomplete-filter";
-export * from "./date-filter";
-export * from "./numeric-filter";
-export * from "./checkbox-filter";
-export * from "./checkbox-group-filter";
-export * from "./switch-filter";
-export * from "./range-filter";

package/src/components/atoms/filter/units/numeric-filter.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import { FilterProps } from "@/types";
-import { filterClasses } from "@/components";
-import { Input } from "@heroui/input";
-import { cn } from "@/utils";
-import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
-
-export function NumericFilter({
-  classNames,
-  numericProps,
-  paramKey,
-}: Pick<FilterProps, "classNames" | "numericProps" | "paramKey">) {
-  const { getParam, setParams } = useSearchParamsHandler();
-  const { config } = useEmperorUI();
-
-  const theme = config?.theme?.components?.input;
-
-  const value = getParam(paramKey);
-
-  return (
-    <Input
-      {...theme}
-      {...numericProps}
-      type="number"
-      value={value ?? ""}
-      onValueChange={(v) =>
-        setParams({
-          params: { [paramKey]: v || undefined },
-        })
-      }
-      className={cn(filterClasses({ type: "numeric" }), classNames?.field)}
-      classNames={{
-        input: "min-w-40",
-        label: "font-semibold",
-        ...theme?.classNames,
-        ...numericProps?.classNames,
-      }}
-    />
-  );
-}