@js-empire/emperor-ui 1.2.3 → 1.2.4

package/src/animations/blink.ts

@@ -0,0 +1,26 @@
+import { Variants } from "framer-motion";
+
+/**
+ * ? In order to work, the parent container must have the blinkContainer variants
+ * ? and each of the children must have the blinkItem variants
+ */
+
+export const blinkContainer: Variants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.12,
+      delayChildren: 0.08,
+    },
+  },
+};
+
+export const blinkItem: Variants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.4, ease: "easeOut" },
+  },
+};

package/src/animations/floating.ts

@@ -0,0 +1,12 @@
+import { Variants } from "framer-motion";
+
+export const floating: Variants = {
+  animate: {
+    y: [0, -6, 0],
+    transition: {
+      duration: 3,
+      repeat: Infinity,
+      ease: "easeInOut",
+    },
+  },
+};

package/src/animations/index.ts

@@ -0,0 +1,2 @@
+export * from "./floating";
+export * from "./blink";

package/src/components/atoms/brand/brand.tsx

@@ -4,7 +4,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentProps, forwardRef } from "react";
 import { Row } from "@/components";
 import { brandStyles } from "./styles";
-import { Image } from "@heroui/react";
+import { Image } from "@heroui/image";
 
 export const Brand = forwardRef<
   HTMLElement,

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

@@ -0,0 +1,13 @@
+"use client";
+
+import type { ColorPickerProps } from "@/types";
+import { FreeColorPicker, PresetColorPicker } from "@/components";
+import "./styles/color-picker.css";
+
+export function ColorPicker({ ...props }: ColorPickerProps) {
+  if (props?.inputType === "preset") {
+    return <PresetColorPicker {...props} />;
+  }
+
+  return <FreeColorPicker {...props} />;
+}

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

@@ -0,0 +1,60 @@
+"use client";
+
+import { useMemo } from "react";
+import { Input } from "@heroui/input";
+import { cn } from "@/utils";
+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,
+  inputType = "free",
+  ...props
+}: ColorPickerProps) {
+  const { config } = useEmperorUI();
+
+  const locales = config?.interLocalization?.locales;
+  const lang = config?.interLocalization?.lang;
+  const locale = locales?.[lang ?? "en"];
+  const errorMessage = locale?.atoms?.colorPicker?.invalidColorFormat;
+
+  const isInvalid = useMemo(() => {
+    if (!value) return true;
+    return HEX_COLOR_REGEX.test(value);
+  }, [value]);
+
+  const handleValueChange = (newValue: string) => {
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <Input
+      labelPlacement="outside"
+      variant="faded"
+      className={cn(className)}
+      classNames={{ label: "font-bold", input: "h-12", ...classNames }}
+      value={value}
+      onValueChange={handleValueChange}
+      isInvalid={isInvalid}
+      errorMessage={isInvalid ? errorMessage : undefined}
+      endContent={<CopyButton value={value} />}
+      startContent={
+        <input
+          type="color"
+          className="color-swatch"
+          value={value}
+          onChange={(e) => {
+            handleValueChange(e.target.value);
+          }}
+        />
+      }
+      {...props}
+    />
+  );
+}

package/src/components/atoms/color-picker/index.ts

@@ -0,0 +1,3 @@
+export * from "./color-picker";
+export * from "./free-color-picker";
+export * from "./preset-color-picker";

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

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@/utils";
+import type { ColorPickerProps } from "@/types";
+import { Select, SelectItem } from "@heroui/select";
+import { CopyButton } from "@/components";
+
+export function PresetColorPicker({
+  className,
+  classNames,
+  value = "#000000",
+  onSelectionChange,
+  inputType,
+  presets = [],
+  ...props
+}: ColorPickerProps) {
+  if (inputType === "preset" && (!presets || presets?.length === 0))
+    throw new Error(
+      "Presets array is required in the ColorPicker when the input type is 'preset'.",
+    );
+
+  return (
+    <Select
+      labelPlacement="outside"
+      variant="faded"
+      className={cn(className)}
+      classNames={{
+        label: "font-bold",
+        input: "h-12",
+        trigger: "min-w-52",
+        ...classNames,
+      }}
+      value={value}
+      onSelectionChange={onSelectionChange}
+      endContent={<CopyButton value={value} />}
+      renderValue={() => {
+        return (
+          <div className="flex items-center gap-2 text-gray-600">
+            <div
+              style={{ backgroundColor: value }}
+              className="size-4 rounded-full border border-gray-300"
+            />
+            {value}
+          </div>
+        );
+      }}
+      {...props}
+    >
+      {Array.from(new Set(presets))?.map((preset) => (
+        <SelectItem
+          key={preset}
+          startContent={
+            <div
+              style={{ backgroundColor: preset }}
+              className="size-4 rounded-full border border-gray-300"
+            />
+          }
+        >
+          {preset}
+        </SelectItem>
+      ))}
+    </Select>
+  );
+}

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ColorPicker } from "@/components";
+import { useState } from "react";
+import { getStorybookDecorators } from "@/utils";
+
+const meta: Meta<typeof ColorPicker> = {
+  title: "Atoms/ColorPicker",
+  component: ColorPicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [value, setValue] = useState("#000000");
+    return <ColorPicker {...args} value={value} onValueChange={setValue} />;
+  },
+};
+
+export const WithPresets: Story = {
+  render: () => {
+    const [value, setValue] = useState("#000000");
+
+    return (
+      <ColorPicker
+        inputType="preset"
+        presets={["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"]}
+        value={value}
+        onSelectionChange={(keys) => {
+          setValue(keys?.currentKey ?? "");
+        }}
+        defaultSelectedKeys={["#000000"]}
+      />
+    );
+  },
+};

package/src/components/atoms/color-picker/styles/color-picker.css

@@ -0,0 +1,23 @@
+/* Rounded corners and compact size for native color input swatch */
+.color-swatch {
+  width: 1.25rem;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  cursor: pointer;
+}
+
+.color-swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+  border-radius: 0.375rem;
+}
+
+.color-swatch::-webkit-color-swatch {
+  border: none;
+  border-radius: 0.375rem;
+}
+
+.color-swatch::-moz-color-swatch {
+  border: none;
+  border-radius: 0.375rem;
+}

package/src/components/atoms/copy-button/copy-button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { Button } from "@heroui/button";
+import { Spinner } from "@heroui/spinner";
+import { Copy, Check } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+type CopyState = "copy" | "loading" | "success";
+
+export function CopyButton({ value }: { value: string }) {
+  const [state, setState] = useState<CopyState>("copy");
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleCopy = () => {
+    if (state !== "copy") return;
+
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+
+    navigator.clipboard.writeText(value);
+    setState("loading");
+
+    timeoutRef.current = setTimeout(() => {
+      setState("success");
+      timeoutRef.current = setTimeout(() => setState("copy"), 2000);
+    }, 500);
+  };
+
+  useEffect(
+    () => () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    },
+    [],
+  );
+
+  return (
+    <Button
+      variant="light"
+      size="sm"
+      isIconOnly
+      onPress={handleCopy}
+      disabled={state !== "copy"}
+      startContent={
+        <span className="relative size-4">
+          <AnimatePresence mode="wait">
+            <motion.span
+              key={state}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="absolute inset-0 flex items-center justify-center"
+            >
+              {state === "copy" && <Copy className="size-4" />}
+
+              {state === "loading" && (
+                <Spinner
+                  size="sm"
+                  classNames={{
+                    circle1: "border-b-current",
+                    circle2: "border-current",
+                  }}
+                />
+              )}
+
+              {state === "success" && <Check className="size-4 text-success" />}
+            </motion.span>
+          </AnimatePresence>
+        </span>
+      }
+    />
+  );
+}

package/src/components/atoms/copy-button/index.ts

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

package/src/components/atoms/copy-button/stories/copy-button.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CopyButton } from "@/components";
+
+const meta: Meta<typeof CopyButton> = {
+  title: "Atoms/CopyButton",
+  component: CopyButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: "Copied to clipboard successfully!",
+  },
+};

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Field } from "@/components";
+import { getStorybookDecorators } from "@/utils";
+
+const meta: Meta<typeof Field> = {
+  title: "Atoms/Field",
+  component: Field,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: getStorybookDecorators({
+    config: {
+      layout: {
+        withScaffold: false,
+      },
+    },
+  }),
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

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

@@ -0,0 +1,11 @@
+import { cn } from "@/utils";
+import { FieldProps } from "@/types";
+import { fieldClasses } from "./styles";
+
+export function Field({ className, classNames, ...props }: FieldProps) {
+  return (
+    <div className={cn(fieldClasses({}), className)} {...props}>
+      Sorter Component
+    </div>
+  );
+}

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

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

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

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

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

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

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

@@ -0,0 +1,92 @@
+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}
+        {...sharedProps}
+        {...props}
+      />
+    ),
+    date: <DateFilter dateProps={dateProps} {...sharedProps} {...props} />,
+    numeric: (
+      <NumericFilter numericProps={numericProps} {...sharedProps} {...props} />
+    ),
+    checkbox: (
+      <CheckboxFilter
+        checkboxProps={checkboxProps}
+        {...sharedProps}
+        {...props}
+      />
+    ),
+    checkboxGroup: (
+      <CheckboxGroupFilter
+        checkboxGroupProps={checkboxGroupProps}
+        {...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,
+      )}
+      {...props}
+    >
+      {components[type]}
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,97 @@
+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>;
+
+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 DateFilter: Story = {
+  args: {
+    type: "date",
+    paramKey: "date",
+  },
+};
+
+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>
+    );
+  },
+};

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,39 @@
+"use client";
+
+import { FilterProps } from "@/types";
+import { filterClasses } from "@/components";
+import { Autocomplete } from "@heroui/autocomplete";
+import { cn } from "@/utils";
+import { useSearchParamsHandler } from "@/hooks";
+
+export function AutocompleteFilter({
+  classNames,
+  autocompleteProps,
+  paramKey,
+  ...props
+}: Pick<FilterProps, "classNames" | "autocompleteProps" | "paramKey">) {
+  const { getParam, setParams } = useSearchParamsHandler();
+
+  const value = getParam(paramKey);
+
+  return (
+    <Autocomplete
+      labelPlacement="outside-top"
+      variant="faded"
+      radius="sm"
+      selectedKey={value || null}
+      onSelectionChange={(selectedKey) =>
+        setParams({
+          params: {
+            [paramKey]: selectedKey ? String(selectedKey) : undefined,
+          },
+        })
+      }
+      {...autocompleteProps}
+      {...props}
+      className={cn(filterClasses({ type: "autocomplete" }), classNames?.field)}
+    >
+      <div />
+    </Autocomplete>
+  );
+}