@js-empire/emperor-ui 1.3.5 → 1.3.7

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,
-      }}
-    />
-  );
-}

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

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

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