@js-empire/emperor-ui 1.3.6 → 1.3.8

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

@@ -1,63 +0,0 @@
-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: () => {
-    const [value, setValue] = useState("#000000");
-
-    return (
-      <section className="flex flex-col gap-4">
-        <ColorPicker
-          inputType="free"
-          value={value}
-          onChange={setValue}
-          defaultValue="#000000"
-        />
-
-        <p className="text-xs text-gray-500">Value: {value}</p>
-      </section>
-    );
-  },
-};
-
-export const WithPresets: Story = {
-  render: () => {
-    const [value, setValue] = useState("#000000");
-
-    return (
-      <section className="flex flex-col gap-4">
-        <ColorPicker
-          inputType="preset"
-          presets={["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"]}
-          value={value}
-          onChange={setValue}
-          defaultValue="#000000"
-        />
-
-        <p className="text-xs text-gray-500">Value: {value}</p>
-      </section>
-    );
-  },
-};

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

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Column } from "@/components";
-import type { ColumnProps } from "@/types";
-import { getStorybookDecorators } from "@/utils";
-
-const meta: Meta<typeof Column> = {
-  title: "Atoms/Column",
-  component: Column,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  decorators: getStorybookDecorators({
-    config: {
-      layout: {
-        withScaffold: false,
-      },
-    },
-  }),
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-  render: (args: ColumnProps) => (
-    <Column {...args}>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <div key={index} className="bg-blue-300 p-2 rounded-md">
-          Item {index + 1}
-        </div>
-      ))}
-    </Column>
-  ),
-};

package/src/components/atoms/column/column.tsx

@@ -1,21 +0,0 @@
-import type { ColumnProps } from "@/types";
-import { cn } from "@/utils";
-import { cva, VariantProps } from "class-variance-authority";
-import { forwardRef, ComponentProps } from "react";
-
-const columnStyles = cva(["flex flex-col gap-3"], {
-  variants: {},
-  defaultVariants: {},
-  compoundVariants: [],
-});
-
-export const Column = forwardRef<
-  HTMLElement,
-  ComponentProps<"section"> & VariantProps<typeof columnStyles> & ColumnProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <section ref={ref} className={cn(columnStyles({ className }))} {...props}>
-      {children}
-    </section>
-  );
-});

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

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

package/src/components/atoms/container/column.stories.tsx

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Container } from "@/components";
-import { getStorybookDecorators } from "@/utils";
-import type { ContainerProps } from "@/types";
-
-const meta: Meta<typeof Container> = {
-  title: "Atoms/Container",
-  component: Container,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  decorators: getStorybookDecorators({
-    config: {
-      layout: {
-        withScaffold: false,
-      },
-    },
-  }),
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    className: "h-screen flex items-center justify-center",
-  },
-  render: (args: ContainerProps) => (
-    <Container {...args}>
-      <div className="bg-blue-300 p-2 text-center rounded-md w-full h-fit">
-        Responsive contained content
-      </div>
-    </Container>
-  ),
-};

package/src/components/atoms/container/container.tsx

@@ -1,28 +0,0 @@
-import type { ContainerProps } from "@/types";
-import { cn } from "@/utils";
-import { cva, VariantProps } from "class-variance-authority";
-import { forwardRef, ComponentProps } from "react";
-
-const containerStyles = cva(["flex w-full container p-4 mx-auto"], {
-  variants: {},
-  defaultVariants: {},
-  compoundVariants: [],
-});
-
-export const Container = forwardRef<
-  HTMLElement,
-  ComponentProps<"section"> &
-    VariantProps<typeof containerStyles> &
-    ContainerProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <section
-      ref={ref}
-      data-slot="container"
-      className={cn(containerStyles({ className }))}
-      {...props}
-    >
-      {children}
-    </section>
-  );
-});

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

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

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

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

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

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

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