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

package/src/components/show/show.stories.tsx

@@ -1,197 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Flame, Phone, Rat, SprayCan } from "lucide-react";
-import { Button, Show } from "../../components";
-import { useHover, useToggle } from "../../hooks";
-import { cn } from "../../lib";
-
-/**
- * Componente que permite animar la entrada y salida de un componente.
- *
- * Expone dos estados `open` y `closed` para animar la entrada y salida respectivamente.
- *
- * ### Uso:
- *
- * ```tsx
- * import { Show } from './Show';
- *
- * const Example = () => {
- *   const [open, toggle] = useToggle(false);
- *   return (
- *     <div>
- *       <button onClick={() => toggle()}>Toggle</button>
- *       <Show when={open}>
- *         <div className="animated-box">
- *           🐙
- *         </div>
- *       </Show>
- *     </div>
- *   );
- * };
- * ```
- *
- * ### CSS para animaciones:
- *
- * Define las animaciones en un archivo CSS. En este ejemplo, se crean animaciones para la entrada (`fadeInZoomIn`) y la salida (`fadeOutZoomOut`).
- *
- * ```css
- * @keyframes fadeInZoomIn {
- *   0% {
- *     opacity: 0;
- *     transform: scale(0.95);
- *   }
- *   100% {
- *     opacity: 1;
- *     transform: scale(1);
- *   }
- * }
- *
- * @keyframes fadeOutZoomOut {
- *   0% {
- *     opacity: 1;
- *     transform: scale(1);
- *   }
- *   100% {
- *     opacity: 0;
- *     transform: scale(0.95);
- *   }
- * }
- *
- * .animated-box[data-state="open"] {
- *   animation: fadeInZoomIn 0.5s forwards;
- * }
- *
- * .animated-box[data-state="closed"] {
- *   animation: fadeOutZoomOut 0.5s forwards;
- * }
- * ```
- *
- * ### Alternativa con TailwindCSS:
- *
- * Alternativamente, se puede usar el plugin [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate)
- * que ya trae animaciones predefinidas. Acá un ejemplo:
- *
- * ```tsx
- * import { Show } from './Show';
- *
- * const Example = () => {
- *   const [open, toggle] = useToggle(false);
- *   return (
- *     <div>
- *       <button onClick={() => toggle()}>Toggle</button>
- *       <Show when={open}>
- *         <div
- *           className={cn(
- *             // Animaciones de entrada
- *             "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
- *            // Animaciones de salida
- *             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
- *           )}
- *         >
- *           🐙
- *         </div>
- *       </Show>
- *     </div>
- *   );
- * };
- * ```
- * ## Crea alias para acortar `data-[state-X]`
- * En caso de que se quiera acortar el prefijo `data-[state-X]` se puede crear una variante en el archivo `tailwind.config.js`:
- *
- * ```tsx
- * // tailwind.config.js
- *
- * // Importar plugin
- * const plugin = require("tailwindcss/plugin");
- *
- * module.exports = {
- *   // ...
- *   plugins: [
- *     plugin(function ({ addVariant }) {
- *       addVariant("open", '&[data-state="open"]');
- *       addVariant("closed", '&[data-state="closed"]');
- *     }),
- *   ],
- * };
- *
- * // Uso
- * import { Show } from './Show';
- *
- * const Example = () => {
- *   const [open, toggle] = useToggle(false);
- *   return (
- *     <div>
- *       <button onClick={() => toggle()}>Toggle</button>
- *       <Show when={open}>
- *         <div
- *           className={cn(
- *             // Animaciones de entrada
- *             "open:animate-in open:fade-in-0 open:zoom-in-95",
- *            // Animaciones de salida
- *             "closed:animate-out closed:fade-out-0 closed:zoom-out-95"
- *           )}
- *         >
- *           🐙
- *         </div>
- *       </Show>
- *     </div>
- *   );
- * };
- * ```
- */
-const meta: Meta<typeof Show> = {
-  title: "others/Show",
-  component: Show,
-};
-
-export default meta;
-type Story = StoryObj<typeof Show>;
-
-export const Default: Story = {
-  render: () => {
-    const [open, toggle] = useToggle(false);
-    return (
-      <div>
-        <Button onClick={() => toggle()}>Toggle</Button>
-        <Show when={open}>
-          <div
-            className={cn(
-              "border rounded-md p-2 mt-2 w-[200px]",
-              "open:animate-in open:zoom-in-95",
-              "closed:animate-out closed:fade-out-0 closed:zoom-out-95",
-            )}
-          >
-            🐙
-          </div>
-        </Show>
-      </div>
-    );
-  },
-};
-
-export const Hover: Story = {
-  render: () => {
-    const { ref, isHovering } = useHover<HTMLDivElement>();
-    return (
-      <div
-        className="bg-gray-100 h-[300px] w-[300px] border border-dashed flex items-end overflow-hidden"
-        ref={ref}
-      >
-        <Show when={isHovering}>
-          <div
-            className={cn(
-              "rounded-md text-xl p-2 w-full flex justify-center gap-x-4",
-              "duration-300",
-              "open:animate-in open:slide-in-from-bottom",
-              "closed:animate-out closed:slide-out-to-bottom",
-            )}
-          >
-            <Phone />
-            <Rat />
-            <SprayCan />
-            <Flame />
-          </div>
-        </Show>
-      </div>
-    );
-  },
-};

package/src/components/show/show.test.tsx

@@ -1,41 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { ComponentProps } from "react";
-import { describe, expect, test } from "vitest";
-import { Show } from "../../components";
-
-type PresenceProps = ComponentProps<typeof Show>;
-
-describe("Show Component", () => {
-  const renderPresence = (props: PresenceProps) => {
-    return render(<Show {...props} />);
-  };
-
-  test('renders the component with "open" state when "when" prop is true', () => {
-    renderPresence({ when: true, children: <div>hello</div> });
-
-    const slotElement = screen.getByText("hello");
-    expect(slotElement).toBeInTheDocument();
-    expect(slotElement).toHaveAttribute("data-state", "open");
-  });
-
-  test('unmount the component when "when" prop is false', () => {
-    renderPresence({ when: false, children: <div>hello</div> });
-
-    const slotElement = screen.queryByText("hello");
-    expect(slotElement).not.toBeInTheDocument();
-  });
-
-  test("passes additional props to the Slot component", () => {
-    renderPresence({
-      when: true,
-      className: "test-class",
-      children: <div>hello</div>,
-    });
-
-    const slotElement = screen.getByText("hello");
-    expect(slotElement).toBeInTheDocument();
-
-    expect(slotElement).toHaveClass("test-class");
-  });
-});

package/src/components/show/show.tsx

@@ -1,16 +0,0 @@
-import { Presence as AnimatePresence } from "@radix-ui/react-presence";
-import { Slot } from "@radix-ui/react-slot";
-import { ComponentProps, ComponentPropsWithoutRef } from "react";
-
-interface Props extends ComponentPropsWithoutRef<typeof Slot> {
-  /** Si el componente está presente o no */
-  when: ComponentProps<typeof AnimatePresence>["present"];
-}
-
-export const Show = ({ when, ...props }: Props) => {
-  return (
-    <AnimatePresence present={when}>
-      <Slot {...props} data-state={when ? "open" : "closed"} data-slot="show" />
-    </AnimatePresence>
-  );
-};

package/src/components/stepper/Stepper.tsx

@@ -1,190 +0,0 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { HTMLProps, ReactNode } from "react";
-import { ClassNameValue } from "tailwind-merge";
-import { ClassName } from "@/models";
-import { cn } from "../../lib";
-import {
-  StepperContextProvider,
-  useStepperContext,
-} from "./context/stepper-context";
-
-interface StepperItemProps {
-  indicator?: ReactNode;
-  title: ReactNode;
-  content?: ReactNode;
-  disabled?: boolean;
-}
-
-interface StepperProps extends Omit<HTMLProps<HTMLDivElement>, "onChange"> {
-  items?: StepperItemProps[];
-  current?: number;
-  onChange?: (index: number) => void;
-  className?: ClassName;
-  classNameList?: ClassName;
-  classNameItem?: ClassName;
-  classNameButton?: ClassName;
-  classNameIndicator?: ClassName;
-  classNameContent?: ClassName;
-}
-export function Stepper({
-  items = [],
-  current,
-  onChange,
-  className,
-  classNameList,
-  classNameItem,
-  classNameButton,
-  classNameIndicator,
-  classNameContent,
-}: StepperProps) {
-  return (
-    <StepperContainer
-      className={className}
-      current={current}
-      onChange={onChange}
-    >
-      <StepperList className={classNameList}>
-        {items?.map((item, i) => (
-          <StepperTrigger
-            key={i}
-            value={i}
-            title={item?.title}
-            indicator={item?.indicator}
-            classNameItem={classNameItem}
-            classNameButton={classNameButton}
-            classNameIndicator={classNameIndicator}
-          />
-        ))}
-      </StepperList>
-
-      {items?.map((item, i) => (
-        <StepperContent className={classNameContent} key={i} value={i}>
-          {item?.content}
-        </StepperContent>
-      ))}
-    </StepperContainer>
-  );
-}
-
-interface StepperContainerProps
-  extends Omit<HTMLProps<HTMLDivElement>, "onChange"> {
-  current?: number;
-  onChange?: (index: number) => void;
-  className?: ClassName;
-}
-export function StepperContainer({
-  current: prop,
-  onChange,
-  className,
-  ...props
-}: StepperContainerProps) {
-  const [activeStep = 0, setActiveStep] = useControllableState<number>({
-    prop,
-    onChange,
-    defaultProp: 0,
-  });
-  return (
-    <StepperContextProvider value={{ activeStep, setActiveStep }}>
-      <div
-        data-slot="stepper"
-        className={cn(
-          "flex flex-col items-center w-full transition-all ease-in delay-150",
-          className,
-        )}
-        {...props}
-      />
-    </StepperContextProvider>
-  );
-}
-
-interface StepperListProps extends HTMLProps<HTMLUListElement> {}
-export function StepperList({
-  children,
-  className,
-  ...props
-}: StepperListProps) {
-  return (
-    <ul
-      data-slot="stepper-list"
-      className={cn(
-        "flex flex-col sm:flex-row sm:gap-0 gap-4 items-center w-full text-xs font-medium text-gray-900 sm:text-base mb-8",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ul>
-  );
-}
-
-interface StepperTriggerProps {
-  indicator?: ReactNode;
-  title: ReactNode;
-  value: number;
-  disabled?: boolean;
-  classNameItem?: ClassNameValue;
-  classNameButton?: ClassNameValue;
-  classNameIndicator?: ClassNameValue;
-}
-export function StepperTrigger({
-  disabled,
-  value,
-  title,
-  indicator,
-  classNameItem,
-  classNameButton,
-  classNameIndicator,
-}: StepperTriggerProps) {
-  const { activeStep, setActiveStep } = useStepperContext();
-  return (
-    <li
-      data-slot="stepper-trigger"
-      className={cn(
-        "flex relative text-primary transition-all ease-in delay-150",
-        "last:w-full last:sm:w-auto last:after:hidden",
-        `w-full after:content-[''] sm:after:w-full after:h-full after:w-0.5 sm:after:h-0.5 ${activeStep > value ? "after:bg-primary" : "after:bg-gray-300"} after:inline-block after:absolute after:top-5 sm:after:top-5 after:left-4 sm:after:left-10`,
-        classNameItem,
-      )}
-    >
-      <button
-        onClick={() => !disabled && setActiveStep(value)}
-        className={cn(
-          "z-10 flex items-center justify-center sm:flex-col gap-3 flex-row whitespace-nowrap cursor-pointer group transition-color ease-in delay-150",
-          activeStep >= value ? "text-primary" : "text-gray-500",
-          disabled && "cursor-not-allowed",
-          classNameButton,
-        )}
-      >
-        <span
-          data-slot="stepper-trigger-indicator"
-          className={cn(
-            "flex items-center transition-all overflow-hidden ease-in justify-center group-hover:scale-105 sm:w-10 sm:h-10 mx-auto text-sm border-2 rounded-full w-8 h-8",
-            activeStep > value &&
-              "bg-primary border-primary text-primary-foreground",
-            activeStep === value && "bg-gray-100 text-primary border-primary",
-            activeStep < value && "bg-white text-gray-500 border-input",
-            disabled && "text-gray-300",
-            classNameIndicator,
-          )}
-        >
-          {activeStep > value ? "✓" : indicator || value + 1}
-        </span>
-        {title}
-      </button>
-    </li>
-  );
-}
-
-interface StepperContentProps extends HTMLProps<HTMLDivElement> {
-  value: number;
-}
-export function StepperContent({
-  value,
-  className = "w-full",
-  ...props
-}: StepperContentProps) {
-  const { activeStep } = useStepperContext();
-  const isActiveStep = activeStep === value;
-  if (!isActiveStep) return null;
-  return <div data-slot="stepper-content" className={className} {...props} />;
-}

package/src/components/stepper/context/stepper-context.tsx

@@ -1,11 +0,0 @@
-import { createSafeContext } from "../../../utils";
-
-interface StepperContextProps {
-  activeStep: number;
-  setActiveStep: (index: number) => void;
-}
-
-export const [useStepperContext, StepperContextProvider] =
-  createSafeContext<StepperContextProps>();
-
-export type { StepperContextProps };

package/src/components/table/table-primitives.tsx

@@ -1,122 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib";
-
-type ContainerProps = React.ComponentProps<"div">;
-type TableProps = React.ComponentProps<"table">;
-
-type TableRootProps = TableProps & {
-  containerClassName?: ContainerProps["className"];
-  containerProps?: ContainerProps;
-};
-
-const TableRoot = ({
-  className,
-  containerClassName,
-  containerProps,
-  ...props
-}: TableRootProps) => (
-  <div
-    data-slot="table-container"
-    className={cn(
-      "relative w-full overflow-auto rounded-md border",
-      containerClassName,
-    )}
-    {...containerProps}
-  >
-    <table
-      data-slot="table"
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-);
-
-type TableHeaderProps = React.ComponentProps<"thead">;
-
-const TableHeader = ({ className, ...props }: TableHeaderProps) => (
-  <thead
-    data-slot="table-header"
-    className={cn("[&_tr]:border-b", className)}
-    {...props}
-  />
-);
-
-type TableBodyProps = React.ComponentProps<"tbody">;
-
-const TableBody = ({ className, ...props }: TableBodyProps) => (
-  <tbody
-    data-slot="table-body"
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-);
-
-type TableFooterProps = React.ComponentProps<"tfoot">;
-
-const TableFooter = ({ className, ...props }: TableFooterProps) => (
-  <tfoot
-    data-slot="table-footer"
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className,
-    )}
-    {...props}
-  />
-);
-
-type TableRowProps = React.ComponentProps<"tr">;
-
-const TableRow = ({ className, ...props }: TableRowProps) => (
-  <tr
-    data-slot="table-row"
-    className={cn(
-      "border-b transition-colors hover:bg-muted data-[selected=true]:bg-muted",
-      className,
-    )}
-    {...props}
-  />
-);
-
-type TableHeadProps = React.ComponentProps<"th">;
-
-const TableHead = ({ className, ...props }: TableHeadProps) => (
-  <th
-    data-slot="table-head"
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground sticky top-0 bg-background [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
-    {...props}
-  />
-);
-
-type TableCellProps = React.ComponentProps<"td">;
-
-const TableCell = ({ className, ...props }: TableCellProps) => (
-  <td
-    data-slot="table-cell"
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-);
-
-type TableCaptionProps = React.ComponentProps<"caption">;
-
-const TableCaption = ({ className, ...props }: TableCaptionProps) => (
-  <caption
-    data-slot="table-caption"
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-);
-
-export {
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRoot,
-  TableRow,
-};

package/src/components/table/table.model.ts

@@ -1,20 +0,0 @@
-import { ReactNode } from "react";
-
-export type ColumnDef<T> = {
-  /**
-   * Header de la columna
-   */
-  header: string | (() => ReactNode);
-  /**
-   * Clave que identifica la columna
-   */
-  key: keyof T;
-  /**
-   * Elemento que se renderiza en la celda
-   */
-  cell?: (row: T, index: number) => ReactNode;
-  /**
-   * Ancho de la columna
-   */
-  width?: string | number;
-};

package/src/components/table-pagination/index.ts

@@ -1,2 +0,0 @@
-export * from "./table-pagination";
-export * from "./table-pagination.model";

package/src/components/table-pagination/table-pagination.model.ts

@@ -1,2 +0,0 @@
-export const TABLE_PAGE_SIZES = [10, 25, 50];
-export type PageSize = (typeof TABLE_PAGE_SIZES)[number];

package/src/components/table-pagination/table-pagination.stories.tsx

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { TablePagination } from "../../components";
-
-const meta: Meta<typeof TablePagination> = {
-  title: "Data display/TablePagination",
-  component: TablePagination,
-  args: {
-    totalItems: 100,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof TablePagination>;
-
-export const Default: Story = {};
-
-export const NoSizes: Story = {
-  args: { sizes: false },
-};
-
-export const OtherSizes: Story = {
-  args: { sizes: [1, 100, 1000] },
-};

package/src/components/table-pagination/table-pagination.test.tsx

@@ -1,32 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { TablePagination } from "../../components";
-import { click } from "../../utils";
-
-describe("TablePagination component", () => {
-  it("should render correctly", () => {
-    render(<TablePagination pageSize={10} totalItems={30} />);
-    const pagination = screen.getByText(/1 - 10 de 30/g);
-    expect(pagination).toBeInTheDocument();
-  });
-
-  it("should go next page", () => {
-    render(<TablePagination pageSize={10} totalItems={30} />);
-    const goNext = screen.getAllByRole("button")[1];
-    click(goNext);
-
-    const pagination = screen.getByText(/11 - 20 de 30/g);
-    expect(pagination).toBeInTheDocument();
-  });
-
-  it("should go prev page", () => {
-    render(
-      <TablePagination initialCurrentPage={2} pageSize={10} totalItems={30} />,
-    );
-    const goNext = screen.getAllByRole("button")[0];
-    click(goNext);
-
-    const pagination = screen.getByText(/1 - 10 de 30/g);
-    expect(pagination).toBeInTheDocument();
-  });
-});