@boxcustodia/library 2.0.0-alpha.11 → 2.0.0-alpha.12

package/src/hooks/useToggle/__test__/useToggle.test.tsx

@@ -0,0 +1,43 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import useToggle from "../useToggle";
+
+describe("useToggle hook", () => {
+  it("should be defined", () => {
+    const { result } = renderHook(useToggle);
+    const [state, toggle] = result.current;
+
+    expect(state).toBe(false);
+    expect(typeof toggle).toBe("function");
+  });
+
+  it("should toggle", () => {
+    const { result } = renderHook(useToggle);
+    const [state, toggle] = result.current;
+
+    expect(state).toBe(false);
+
+    act(() => toggle());
+    waitFor(() => {
+      expect(state).toBe(true);
+    });
+
+    act(() => toggle());
+    waitFor(() => {
+      expect(state).toBe(false);
+    });
+  });
+
+  it("should force new state", () => {
+    const { result } = renderHook(useToggle);
+    const [state, toggle] = result.current;
+
+    expect(state).toBe(false);
+
+    act(() => toggle(false));
+
+    waitFor(() => {
+      expect(state).toBe(false);
+    });
+  });
+});

package/src/hooks/useToggle/index.ts

@@ -0,0 +1 @@
+export { default as useToggle } from "./useToggle";

package/src/hooks/useToggle/useToggle.ts

@@ -0,0 +1,16 @@
+import { useState } from "react";
+
+type Return = [boolean, (newValue?: boolean) => void];
+
+function useToggle(initialValue = false): Return {
+  const [value, setValue] = useState<boolean>(initialValue);
+
+  const toggle = (newValue?: boolean): void => {
+    const isUndefined = newValue === undefined;
+    setValue(isUndefined ? !value : newValue);
+  };
+
+  return [value, toggle] as const;
+}
+
+export default useToggle;

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./lib";
+export * from "./models";
+export * from "./providers";
+export * from "./utils";

package/src/lib/cn.ts

@@ -0,0 +1,8 @@
+import { type ClassValue, clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+export const twMerge = extendTailwindMerge({});
+
+export function cn(...args: ClassValue[]) {
+  return twMerge(clsx(args));
+}

package/src/lib/index.ts

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

package/src/models/Generic.model.ts

@@ -0,0 +1,67 @@
+import {
+  Dispatch,
+  HTMLProps,
+  MutableRefObject,
+  ReactElement,
+  ReactNode,
+  SetStateAction,
+} from "react";
+
+export interface Option<TValue = string> {
+  label: string;
+  value: TValue;
+  disabled?: boolean;
+}
+
+export type ClassName = string | undefined;
+
+export type ClickEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
+
+export type ControllableState<T> = {
+  value?: T;
+  defaultValue?: T;
+  onChange?: (state: T) => void;
+};
+
+export type Controllable<C, T extends NonNullable<unknown>> = OverrideProps<
+  HTMLProps<C>,
+  ControllableState<T>
+>;
+
+export type MaybeRef<T> = T | MutableRefObject<T>;
+
+export type ArrayUnion<V, T extends ReadonlyArray<V>> = T[number];
+
+export type ValuesUnion<T extends Record<string, any>> = T[keyof T];
+
+export type GenericObject<T = any> = { [key: string]: T };
+
+export type Nullable<T> = T | null;
+
+export type Maybe<T> = T | undefined | null;
+
+export type SetState<T> = Dispatch<SetStateAction<T>>;
+
+export type State<T> = [T, SetState<T>];
+
+export type ID = string | number;
+
+export type OverrideProps<T, TOverridden> = Omit<T, keyof TOverridden> &
+  TOverridden;
+
+export type SafeOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+export type AtLeastOne<T> = [T, ...T[]];
+
+export type Loose<T> = T | (string & {});
+
+export type Renderable<T> = ReactNode | ((props: T) => ReactElement);
+
+export type BaseEntity = {
+  id: string;
+  createdAt: Date;
+};
+
+export type Entity<T> = {
+  [K in keyof T]: T[K];
+} & BaseEntity;

package/src/models/index.ts

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

package/src/providers/index.ts

@@ -0,0 +1,2 @@
+export * from "./library-provider";
+export * from "./theme";

package/src/providers/library-provider.tsx

@@ -0,0 +1,44 @@
+import { Tooltip as TooltipBase } from "@base-ui/react/tooltip";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import {
+  ToastProvider,
+  type ToastProviderProps,
+} from "../components/toast/toast";
+import { TooltipProvider } from "../components/tooltip/tooltip";
+
+export type LibraryProviderProps = {
+  children: ReactNode;
+  /**
+   * Delay in ms before a tooltip opens when no other tooltip is already visible.
+   * Once a tooltip is open, subsequent ones open instantly until the cursor leaves.
+   * @default 600
+   */
+  tooltipDelay?: ComponentPropsWithoutRef<typeof TooltipBase.Provider>["delay"];
+} & Omit<ToastProviderProps, "children">;
+
+/**
+ * Single provider that wires up all library infrastructure.
+ * Wrap your app once — no other providers needed.
+ *
+ * Includes:
+ * - `TooltipProvider` — shared hover intent and delay grouping across all tooltips
+ * - `ToastProvider` — enables `toast.*` imperative API from anywhere
+ *
+ * @example
+ * ```tsx
+ * <LibraryProvider tooltipDelay={400}>
+ *   <App />
+ * </LibraryProvider>
+ * ```
+ */
+export function LibraryProvider({
+  children,
+  tooltipDelay,
+  ...toastProps
+}: LibraryProviderProps) {
+  return (
+    <TooltipProvider delay={tooltipDelay}>
+      <ToastProvider {...toastProps}>{children}</ToastProvider>
+    </TooltipProvider>
+  );
+}

package/src/providers/theme/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import { createContext, ReactNode, useContext } from "react";
+import { Theme } from "./types";
+
+const defaultTheme: Theme = {};
+
+const ThemeContext = createContext<{ theme: Theme }>({ theme: defaultTheme });
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  return context;
+};
+
+type ThemeProviderProps = {
+  children: ReactNode;
+  theme?: Theme;
+};
+
+export const ThemeProvider = ({
+  children,
+  theme = defaultTheme,
+}: ThemeProviderProps) => {
+  return (
+    <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
+  );
+};

package/src/providers/theme/index.ts

@@ -0,0 +1,3 @@
+export * from "./ThemeProvider";
+export * from "./types";
+export * from "./useThemeProps";

package/src/providers/theme/types.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+import { Button } from "../../components/button/button";
+import { Input } from "../../components/input/input";
+
+type ThemeProps<T, TOverridden> = Partial<Omit<T, keyof TOverridden>>;
+type PropsWithoutValue<T> = Omit<T, "value" | "onChange" | "defaultValue">;
+
+export type Theme = {
+  Button?: ThemeProps<ComponentProps<typeof Button>, "asChild" | "loading">;
+  Input?: Partial<PropsWithoutValue<ComponentProps<typeof Input>>>;
+};

package/src/providers/theme/useThemeProps.ts

@@ -0,0 +1,25 @@
+import { useTheme } from "../../providers/theme/ThemeProvider";
+import { Theme } from "../../providers/theme/types";
+
+/**
+ * Hook que permite obtener y combinar las propiedades de un componente con las del tema.
+ *
+ * El orden de prioridad de las propiedades es:
+ * 1. Props pasadas directamente al componente
+ * 2. Props definidas en el ThemeProvider
+ * 3. Props por defecto del componente
+ */
+export const useThemeProps = <TComponent extends keyof Theme, TProps>(
+  componentName: TComponent,
+  props: TProps,
+  defaultProps: Partial<TProps> = {},
+): TProps => {
+  const { theme } = useTheme();
+  const themeProps = theme[componentName] || {};
+
+  return {
+    ...defaultProps,
+    ...themeProps,
+    ...props,
+  } as TProps;
+};

package/src/stores/theme.store.ts

@@ -0,0 +1,31 @@
+import { createStore, type StoreApi } from "zustand";
+import { Theme } from "../providers/theme/types";
+
+interface ThemeStore {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  getComponentProps: <TComponent extends keyof Theme, TProps>(
+    componentName: TComponent,
+    props: TProps,
+    defaultProps?: Partial<TProps>,
+  ) => TProps;
+}
+
+export type ThemeStoreApi = StoreApi<ThemeStore>;
+
+const createThemeStore = (initTheme: Theme = {}) => {
+  return createStore<ThemeStore>()((set, get) => ({
+    theme: initTheme,
+    setTheme: (theme) => set({ theme }),
+    getComponentProps: (componentName, props, defaultProps = {}) => {
+      const themeProps = get().theme[componentName] || {};
+      return {
+        ...defaultProps,
+        ...themeProps,
+        ...props,
+      };
+    },
+  }));
+};
+
+export { createThemeStore };

package/src/styles/components.css

@@ -0,0 +1,4 @@
+@import "tailwindcss/utilities";
+@import "tw-animate-css";
+@import "./theme.css";
+@source "../";

package/src/styles/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "./theme.css";

package/src/styles/library.css

@@ -0,0 +1,2 @@
+@import "./theme.css";
+@source "../src";

package/src/styles/theme.css

@@ -0,0 +1,232 @@
+@import "tw-animate-css";
+@custom-variant open (&[data-state="open"]);
+@custom-variant closed (&[data-state="closed"]);
+@custom-variant invalid (&[aria-invalid="true"]);
+
+@theme {
+  --color-background: oklch(100% 0 0);
+  --color-foreground: oklch(13.63% 0.036 259.2);
+
+  --color-popover: oklch(100% 0 0);
+  --color-popover-foreground: oklch(13.63% 0.036 259.2);
+
+  --color-primary: oklch(59.5% 0.195 270.48);
+  --color-primary-foreground: oklch(100% 0 0);
+
+  --color-secondary: oklch(96.83% 0.007 247.9);
+  --color-secondary-foreground: oklch(20.77% 0.04 265.75);
+
+  --color-muted: oklch(96.83% 0.007 247.9);
+  --color-muted-foreground: oklch(55.44% 0.041 257.42);
+
+  --color-accent: oklch(96.74% 0.001 286.38);
+  --color-accent-foreground: oklch(19.06% 0.003 247.96);
+
+  --color-error: oklch(63.68% 0.208 25.33);
+  --color-error-foreground: oklch(98.42% 0.003 247.86);
+
+  --color-success: oklch(70.1% 0.146 156.33);
+  --color-success-foreground: oklch(98.42% 0.003 247.86);
+
+  --color-warning: oklch(79.65% 0.16 70.08);
+  --color-warning-foreground: oklch(17.97% 0.034 59.63);
+
+  --color-info: oklch(62.8% 0.152 237.57);
+  --color-info-foreground: oklch(98.42% 0.003 247.86);
+
+  --animate-toast-bump: toast-bump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  --animate-skeleton: skeleton 1.5s linear infinite;
+
+  --color-input: oklch(76.68% 0 0);
+  --color-checkbox: var(--color-primary);
+  --color-ring: oklch(13.63% 0.036 259.2);
+
+  --radius: 0.5rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: calc(var(--radius));
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-tag: 0.375rem;
+  --radius-checkbox: 0.25rem;
+
+  --icon-size: 1rem;
+
+  --z-overlay: 50;
+  --z-float: 60;
+  --z-toast: 70;
+}
+/* Tooltip enter animation — @starting-style is more reliable than data-[starting-style]
+   because it guarantees the browser paints the initial state before the transition fires,
+   avoiding the "no animation" issue caused by lost repaint frames. */
+@starting-style {
+  [data-slot="tooltip-popup"] {
+    scale: 0.98;
+    opacity: 0;
+  }
+}
+
+@layer base {
+  #root {
+    isolation: isolate;
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  input:disabled,
+  button:disabled,
+  textarea:disabled,
+  select:disabled,
+  [data-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  .field-error {
+    border-color: var(--color-error);
+  }
+
+  .lucide {
+    width: var(--icon-size);
+    height: var(--icon-size);
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.9;
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* Btn loader */
+  .btn-loader-enter,
+  .btn-loader-exit {
+    overflow: hidden;
+  }
+
+  .btn-loader-enter {
+    width: 0;
+    opacity: 0;
+  }
+
+  .btn-loader-enter-active {
+    width: var(--icon-size);
+    opacity: 1;
+    transition:
+      width 0.3s ease,
+      opacity 0.3s ease;
+  }
+
+  .btn-loader-exit {
+    width: var(--icon-size);
+    opacity: 1;
+  }
+
+  .btn-loader-exit-active {
+    width: 0;
+    opacity: 0;
+    transition:
+      width 0.15s ease,
+      opacity 0.25s ease;
+  }
+
+  /* Fade */
+  .fade-enter {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  .fade-enter-active {
+    opacity: 1;
+    transform: scale(1);
+    transition:
+      opacity 0.1s ease,
+      transform 0.1s ease;
+  }
+
+  .fade-exit {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .fade-exit-active {
+    opacity: 0;
+    transform: scale(0.8);
+    transition:
+      opacity 0.2s ease,
+      transform 0.2s ease;
+  }
+
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes toast-bump {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    40% {
+      transform: scale(1.03);
+    }
+  }
+
+  .numberInput {
+    /* Chrome, Safari, Edge, Opera */
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: -1;
+    }
+
+    /* Firefox */
+    &[type="number"] {
+      -moz-appearance: textfield;
+    }
+  }
+
+  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 1.5rem;
+  }
+  .space-y-4 > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 1rem;
+  }
+  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 0.5rem;
+  }
+  .space-y-1 > :not([hidden]) ~ :not([hidden]) {
+    margin-top: 0.275rem;
+  }
+}

package/src/utils/dates/parseDateRange.utility.ts

@@ -0,0 +1,39 @@
+import { isDate, parse } from "date-fns";
+import { DateRange } from "../../components";
+
+/**
+ * @typedef {Object} DateRange
+ * @property {Date} start - The start date of the range.
+ * @property {Date} end - The end date of the range.
+ */
+
+/**
+ * Parses a date range string in the format "DD/MM/YYYY - DD/MM/YYYY" and returns an object with start and end dates.
+ *
+ * @param {string} dateRange - The date range string to parse.
+ * @returns {DateRange} An object containing the start and end dates.
+ * @throws Will throw an error if the input string is not in the expected format or the dates are invalid.
+ */
+export const parseDateRange = (dateRange: string): DateRange => {
+  if (typeof dateRange !== "string") {
+    throw new Error("The date range must be a string.");
+  }
+
+  const parts = dateRange.split(" - ");
+  if (parts.length !== 2) {
+    throw new Error('The date range format must be "DD/MM/YYYY - DD/MM/YYYY".');
+  }
+
+  const [startDateString, endDateString] = parts;
+
+  const dateFormat = "dd/MM/yyyy";
+
+  const start = parse(startDateString, dateFormat, new Date());
+  const end = parse(endDateString, dateFormat, new Date());
+
+  if (!isDate(start) || !isDate(end)) {
+    throw new Error("One or both of the dates are invalid.");
+  }
+
+  return { start, end };
+};

package/src/utils/form.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+// biome-ignore-all lint: utility wrappers require flexible typings
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { ComponentProps, ReactNode } from "react";
+import {
+  type ControllerRenderProps,
+  type FieldValues,
+  FormProvider,
+  type Path,
+  type RegisterOptions,
+  useForm as rhfUseForm,
+  type SubmitHandler,
+  type UseFormProps,
+  type UseFormReturn,
+  useController,
+} from "react-hook-form";
+import type { z } from "zod";
+
+import { Field, type FieldProps } from "../components/field";
+import { Form as LibraryForm } from "../components/form";
+
+// ── useForm ───────────────────────────────────────────────────────────────────
+
+export function useForm<T extends FieldValues = FieldValues>(
+  schema: z.ZodType<T>,
+  options?: Partial<UseFormProps<T>>,
+): UseFormReturn<T> {
+  return rhfUseForm<T>({
+    ...options,
+    resolver: zodResolver(schema),
+  });
+}
+
+// ── Form ──────────────────────────────────────────────────────────────────────
+
+type FormProps<T extends FieldValues> = {
+  form: UseFormReturn<T>;
+  onSubmit: SubmitHandler<T>;
+  children: ReactNode;
+} & Omit<ComponentProps<typeof LibraryForm>, "onSubmit" | "onFormSubmit">;
+
+export function Form<T extends FieldValues>({
+  form,
+  onSubmit,
+  children,
+  ...props
+}: FormProps<T>) {
+  return (
+    <FormProvider {...form}>
+      <LibraryForm
+        onFormSubmit={(event) => {
+          form.handleSubmit(onSubmit)(event);
+        }}
+        {...props}
+      >
+        {children}
+      </LibraryForm>
+    </FormProvider>
+  );
+}
+
+// ── FormField ─────────────────────────────────────────────────────────────────
+
+export type FormFieldRenderProps<
+  T extends FieldValues = FieldValues,
+  TName extends Path<T> = Path<T>,
+> = ControllerRenderProps<T, TName> & {
+  invalid: boolean;
+};
+
+type FormFieldProps<
+  T extends FieldValues = FieldValues,
+  TName extends Path<T> = Path<T>,
+> = Omit<FieldProps, "children" | "error"> & {
+  name: TName;
+  rules?: RegisterOptions;
+  render: (field: FormFieldRenderProps<T, TName>) => ReactNode;
+};
+
+export function FormField<
+  T extends FieldValues = FieldValues,
+  TName extends Path<T> = Path<T>,
+>({ name, rules, render, ...fieldProps }: FormFieldProps<T, TName>) {
+  const { field, fieldState } = useController<T, TName>({ name, rules });
+
+  return (
+    <Field {...fieldProps} error={fieldState.error?.message}>
+      {render({ ...field, invalid: fieldState.invalid })}
+    </Field>
+  );
+}