@js-empire/emperor-ui 1.3.11 → 1.3.12

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

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

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

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

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

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

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

@@ -0,0 +1,68 @@
+"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 "react";
+
+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

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

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

@@ -0,0 +1,41 @@
+"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,
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Slider } from "@heroui/slider";
+import { cn } from "@/utils";
+import { useMemo } from "react";
+import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
+
+export function RangeFilter({
+  classNames,
+  rangeProps,
+  paramKey,
+}: Pick<FilterProps, "classNames" | "rangeProps" | "paramKey">) {
+  const { getParam, setParams, allParams } = useSearchParamsHandler();
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.slider;
+
+  const minVal = rangeProps?.minValue ?? 0;
+  const maxVal = rangeProps?.maxValue ?? 100;
+
+  const value = useMemo(() => {
+    const valueStr = getParam(paramKey);
+    const defaultRange: [number, number] = [minVal, maxVal];
+
+    if (valueStr == null) return defaultRange;
+
+    const [a, b] = valueStr.split(",").map(Number);
+    if (!Number.isNaN(a) && !Number.isNaN(b) && a <= b) {
+      return [a, b];
+    }
+    return defaultRange;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paramKey, minVal, maxVal, allParams]);
+
+  return (
+    <Slider
+      {...theme}
+      {...rangeProps}
+      value={value}
+      onChange={(value) => {
+        const range = Array.isArray(value) ? value : [value];
+        const isFullRange =
+          range.length === 2 && range[0] === minVal && range[1] === maxVal;
+
+        setParams({
+          params: {
+            [paramKey]:
+              range.length === 2 && !isFullRange
+                ? `${range[0]},${range[1]}`
+                : undefined,
+          },
+        });
+      }}
+      classNames={{
+        base: "min-w-40",
+        label: "font-semibold",
+        ...theme?.classNames,
+        ...rangeProps?.classNames,
+      }}
+      className={cn(filterClasses({ type: "range" }), classNames?.field)}
+    />
+  );
+}

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

@@ -0,0 +1,53 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Input } from "@heroui/input";
+import { cn } from "@/utils";
+import { useEffect, useState } from "react";
+import { useDebounce } from "use-debounce";
+import { Search } from "lucide-react";
+import { useEmperorUI, useSearchParamsHandler } from "@/hooks";
+
+export function SearchFilter({
+  classNames,
+  searchProps,
+  paramKey,
+}: Pick<FilterProps, "classNames" | "searchProps" | "paramKey">) {
+  const { config } = useEmperorUI();
+
+  const theme = config?.theme?.components?.input;
+
+  const [searchValue, setSearchValue] = useState(
+    searchProps?.defaultValue || "",
+  );
+  const { setParams } = useSearchParamsHandler();
+
+  const [debouncedSearchValue] = useDebounce(searchValue, 700);
+
+  useEffect(() => {
+    setParams({
+      params: {
+        [paramKey]: debouncedSearchValue,
+      },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedSearchValue]);
+
+  return (
+    <Input
+      {...theme}
+      {...searchProps}
+      endContent={<Search className="size-4" />}
+      value={searchValue}
+      onValueChange={setSearchValue}
+      className={cn(filterClasses({ type: "search" }), classNames?.field)}
+      classNames={{
+        input: "min-w-40",
+        label: "font-semibold",
+        ...theme?.classNames,
+        ...searchProps?.classNames,
+      }}
+    />
+  );
+}