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

package/src/components/loader/loader.tsx

@@ -0,0 +1,60 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { LoaderCircle, type LucideProps } from "lucide-react";
+import { cn } from "../../lib";
+
+const loaderVariants = cva("animate-spin", {
+  variants: {
+    variant: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      ghost: "text-muted-foreground",
+      error: "text-error",
+      success: "text-success",
+      warning: "text-warning",
+      info: "text-info",
+    },
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      default: "size-7",
+      lg: "size-10",
+      xl: "size-14",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "default",
+  },
+});
+
+type LoaderVariants = VariantProps<typeof loaderVariants>;
+
+type Props = LucideProps &
+  LoaderVariants & {
+    center?: boolean;
+    containerClassName?: string;
+  };
+
+export const Loader = ({
+  center,
+  containerClassName,
+  variant,
+  size,
+  ...props
+}: Props) => {
+  return (
+    <div
+      className={cn(
+        containerClassName,
+        center && "fixed inset-0 grid place-items-center",
+      )}
+      data-slot="loader"
+    >
+      <LoaderCircle
+        data-slot="loader-icon"
+        {...props}
+        className={cn(loaderVariants({ variant, size }), props.className)}
+      />
+    </div>
+  );
+};

package/src/components/menu/index.ts

@@ -0,0 +1,2 @@
+export * from "./menu";
+export * from "./menu-primitives";

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

@@ -0,0 +1,248 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { useHotkey } from "../../hooks";
+import { HotkeyOptions, Keys } from "../../hooks/useHotkey/useHotkey";
+import { cn } from "../../lib";
+
+const MenuRoot = (
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>,
+) => {
+  return <DropdownMenuPrimitive.Root data-slot="menu" {...props} />;
+};
+
+const MenuTrigger = (
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>,
+) => {
+  return <DropdownMenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
+};
+
+const MenuGroup = (
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>,
+) => {
+  return <DropdownMenuPrimitive.Group data-slot="menu-group" {...props} />;
+};
+
+const MenuPortal = (
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>,
+) => {
+  return <DropdownMenuPrimitive.Portal data-slot="menu-portal" {...props} />;
+};
+
+const MenuSub = (
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>,
+) => {
+  return <DropdownMenuPrimitive.Sub data-slot="menu-sub" {...props} />;
+};
+
+const MenuRadioGroup = (
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
+) => {
+  return (
+    <DropdownMenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />
+  );
+};
+
+type MenuSubTriggerProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.SubTrigger
+> & {
+  inset?: boolean;
+};
+
+const MenuSubTrigger = ({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuSubTriggerProps) => (
+  <DropdownMenuPrimitive.SubTrigger
+    data-slot="menu-sub-trigger"
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state='open']:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+);
+
+type MenuSubContentProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.SubContent
+>;
+
+const MenuSubContent = ({ className, ...props }: MenuSubContentProps) => (
+  <DropdownMenuPrimitive.SubContent
+    data-slot="menu-sub-content"
+    className={cn(
+      "z-float min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state='open']:animate-in data-[state='closed']:animate-out data-[state='closed']:fade-out-0 data-[state='open']:fade-in-0 data-[state='closed']:zoom-out-95 data-[state='open']:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+);
+
+type MenuContentProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Content
+>;
+
+const MenuContent = ({
+  className,
+  sideOffset = 4,
+  ...props
+}: MenuContentProps) => (
+  <DropdownMenuPrimitive.Portal data-slot="menu-portal">
+    <DropdownMenuPrimitive.Content
+      data-slot="menu-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "z-float min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state='open']:animate-in data-[state='closed']:animate-out data-[state='closed']:fade-out-0 data-[state='open']:fade-in-0 data-[state='closed']:zoom-out-95 data-[state='open']:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+);
+
+type MenuItemProps = React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+};
+
+const MenuItem = ({ className, inset, ...props }: MenuItemProps) => (
+  <DropdownMenuPrimitive.Item
+    data-slot="menu-item"
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+);
+
+type MenuCheckboxItemProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.CheckboxItem
+>;
+
+const MenuCheckboxItem = ({
+  className,
+  children,
+  checked,
+  ...props
+}: MenuCheckboxItemProps) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    data-slot="menu-checkbox-item"
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+);
+
+type MenuRadioItemProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.RadioItem
+>;
+
+const MenuRadioItem = ({
+  className,
+  children,
+  ...props
+}: MenuRadioItemProps) => (
+  <DropdownMenuPrimitive.RadioItem
+    data-slot="menu-radio-item"
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+);
+
+type MenuLabelProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Label
+> & {
+  inset?: boolean;
+};
+
+const MenuLabel = ({ className, inset, ...props }: MenuLabelProps) => (
+  <DropdownMenuPrimitive.Label
+    data-slot="menu-label"
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+);
+
+type MenuSeparatorProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Separator
+>;
+
+const MenuSeparator = ({ className, ...props }: MenuSeparatorProps) => (
+  <DropdownMenuPrimitive.Separator
+    data-slot="menu-separator"
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+);
+
+type MenuShortcutProps = React.ComponentPropsWithoutRef<"span"> & {
+  keys: Keys;
+  handler: (event: KeyboardEvent) => any;
+  options?: HotkeyOptions;
+};
+
+const MenuShortcut = ({
+  className,
+  keys,
+  handler,
+  options = {},
+  ...props
+}: MenuShortcutProps) => {
+  useHotkey(keys, handler, options);
+  return (
+    <span
+      data-slot="menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+
+export {
+  MenuCheckboxItem,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuPortal,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuRoot,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+};

package/src/components/menu/menu.stories.tsx

@@ -0,0 +1,203 @@
+import {
+  Button,
+  Menu,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuPortal,
+  MenuRoot,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
+} from "../../components";
+import { createToastManager, ToastProvider } from "../toast";
+
+const toastManager = createToastManager();
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Archive,
+  Bell,
+  Calendar,
+  CheckCircle,
+  Clipboard,
+  LogOut,
+  PlusCircle,
+  Settings,
+  Tag,
+  Trash2,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+import { MenuItemType } from ".";
+
+const meta: Meta<typeof Menu> = {
+  title: "Data display/Menu",
+  component: Menu,
+};
+
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
+/**
+ * ```tsx
+ * type ItemType = "item" | "checkbox" | "radio" | "label" | "separator" | "submenu"
+ * ```
+ */
+export const Generic: Story = {
+  decorators: [
+    (Story) => (
+      <ToastProvider toastManager={toastManager}>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
+  render: (args) => {
+    const [autosave, setAutosave] = useState<boolean>(true);
+
+    const items: MenuItemType[] = useMemo(
+      () => [
+        { type: "item", label: "File" },
+        {
+          type: "item",
+          label: "New File",
+          shortcut: "Ctrl+O",
+          onShortcut: () =>
+            toastManager.add({
+              variant: "success",
+              description: "New file created successfully",
+            }),
+        },
+        { type: "item", label: "Open File..." },
+        { type: "separator" },
+        {
+          type: "checkbox",
+          label: "Autosave",
+          checked: autosave,
+          onCheckedChange: setAutosave,
+        },
+        { type: "separator" },
+        {
+          type: "submenu",
+          label: "Export",
+          items: [
+            { type: "item", label: "PDF" },
+            { type: "item", label: "Word Document" },
+          ],
+        },
+      ],
+      [autosave],
+    );
+
+    return (
+      <Menu {...args} trigger={<Button>Open Menu</Button>} items={items} />
+    );
+  },
+};
+
+/**
+ * Se exportan los primitivos para poder construir cualquier tipo de Menu
+ */
+export const Primitive: Story = {
+  decorators: [
+    (Story) => (
+      <ToastProvider toastManager={toastManager}>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
+  render: () => (
+    <MenuRoot>
+      <MenuTrigger asChild>
+        <Button variant="outline">Menu</Button>
+      </MenuTrigger>
+      <MenuContent className="w-56">
+        <MenuLabel>Task Manager</MenuLabel>
+        <MenuSeparator />
+        <MenuGroup>
+          <MenuItem>
+            <Clipboard className="mr-2 h-4 w-4" />
+            <span>All Tasks</span>
+          </MenuItem>
+          <MenuItem>
+            <CheckCircle className="mr-2 h-4 w-4" />
+            <span>Completed</span>
+          </MenuItem>
+          <MenuItem>
+            <Calendar className="mr-2 h-4 w-4" />
+            <span>Upcoming</span>
+          </MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuGroup>
+          <MenuSub>
+            <MenuSubTrigger>
+              <Tag className="mr-2 h-4 w-4" />
+              <span>Categories</span>
+            </MenuSubTrigger>
+            <MenuPortal>
+              <MenuSubContent>
+                <MenuItem>
+                  <Tag className="mr-2 h-4 w-4" />
+                  <span>Work</span>
+                </MenuItem>
+                <MenuItem>
+                  <Tag className="mr-2 h-4 w-4" />
+                  <span>Personal</span>
+                </MenuItem>
+                <MenuItem>
+                  <Tag className="mr-2 h-4 w-4" />
+                  <span>Shopping</span>
+                </MenuItem>
+                <MenuItem>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  <span>Create category</span>
+                </MenuItem>
+              </MenuSubContent>
+            </MenuPortal>
+          </MenuSub>
+          <MenuItem>
+            <PlusCircle className="mr-2 h-4 w-4" />
+            <span>Add Task</span>
+            <MenuShortcut
+              keys="ctrl+b"
+              handler={() =>
+                toastManager.add({
+                  variant: "success",
+                  description: "Creando tarea...",
+                })
+              }
+            >
+              Ctrl+B
+            </MenuShortcut>
+          </MenuItem>
+        </MenuGroup>
+        <MenuSeparator />
+        <MenuItem>
+          <Bell className="mr-2 h-4 w-4" />
+          <span>Notifications</span>
+        </MenuItem>
+        <MenuItem>
+          <Settings className="mr-2 h-4 w-4" />
+          <span>Settings</span>
+        </MenuItem>
+        <MenuItem>
+          <Trash2 className="mr-2 h-4 w-4" />
+          <span>Trash</span>
+        </MenuItem>
+        <MenuItem disabled>
+          <Archive className="mr-2 h-4 w-4" />
+          <span>Archived</span>
+        </MenuItem>
+        <MenuSeparator />
+        <MenuItem>
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+        </MenuItem>
+      </MenuContent>
+    </MenuRoot>
+  ),
+};

package/src/components/menu/menu.tsx

@@ -0,0 +1,100 @@
+import React, { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import {
+  MenuCheckboxItem,
+  MenuContent,
+  MenuItem,
+  MenuLabel,
+  MenuRadioItem,
+  MenuRoot,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSubTrigger,
+  MenuTrigger,
+} from "./menu-primitives";
+import { renderMenuItem } from "./util/render-menu-item";
+
+type MenuShortcutProps = ComponentPropsWithoutRef<typeof MenuShortcut>;
+
+type Shortcut = Partial<{
+  shortcut: MenuShortcutProps["keys"];
+  onShortcut: MenuShortcutProps["handler"];
+  shortcutOptions: MenuShortcutProps["options"];
+}>;
+
+type MenuItemBase<T extends ElementType> = ComponentPropsWithoutRef<T> & {
+  label?: ReactNode;
+  type: string;
+} & Shortcut;
+
+type MenuItemItem = MenuItemBase<typeof MenuItem> & {
+  type: "item";
+};
+type MenuItemCheckbox = MenuItemBase<typeof MenuCheckboxItem> & {
+  type: "checkbox";
+};
+
+type MenuItemRadio = MenuItemBase<typeof MenuRadioItem> & {
+  type: "radio";
+};
+type MenuItemLabel = MenuItemBase<typeof MenuLabel> & {
+  type: "label";
+};
+
+type MenuItemSeparator = MenuItemBase<typeof MenuSeparator> & {
+  type: "separator";
+};
+
+type MenuItemSubmenu = MenuItemBase<typeof MenuSubTrigger> & {
+  type: "submenu";
+  items: MenuItemType[];
+};
+
+export type MenuItemType =
+  | MenuItemItem
+  | MenuItemCheckbox
+  | MenuItemRadio
+  | MenuItemLabel
+  | MenuItemSeparator
+  | MenuItemSubmenu;
+
+export interface GenericMenuProps {
+  trigger: React.ReactNode;
+  items: MenuItemType[];
+  side?: "top" | "right" | "bottom" | "left";
+  offset?: ComponentPropsWithoutRef<typeof MenuContent>["sideOffset"];
+  contentProps?: ComponentPropsWithoutRef<typeof MenuContent>;
+}
+
+export const Menu = ({
+  trigger,
+  items,
+  contentProps,
+  side = "bottom",
+  offset,
+}: GenericMenuProps) => {
+  return (
+    <MenuRoot>
+      <MenuTrigger asChild>{trigger}</MenuTrigger>
+      <MenuContent side={side} sideOffset={offset} {...contentProps}>
+        {items.map(
+          ({ shortcut, onShortcut, shortcutOptions, ...item }, index) => (
+            <React.Fragment key={index}>
+              {renderMenuItem(
+                item,
+                shortcut && (
+                  <MenuShortcut
+                    keys={shortcut}
+                    handler={(event) => onShortcut?.(event)}
+                    options={shortcutOptions}
+                  >
+                    {shortcut}
+                  </MenuShortcut>
+                ),
+              )}
+            </React.Fragment>
+          ),
+        )}
+      </MenuContent>
+    </MenuRoot>
+  );
+};

package/src/components/menu/util/render-menu-item.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { MenuItemType } from "../menu";
+import {
+  MenuCheckboxItem,
+  MenuItem,
+  MenuLabel,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+} from "../menu-primitives";
+
+export const renderMenuItem = (item: MenuItemType, children?: any) => {
+  switch (item.type) {
+    case "item":
+      return (
+        <MenuItem {...item}>
+          {item.label} {children}
+        </MenuItem>
+      );
+    case "checkbox":
+      return (
+        <MenuCheckboxItem {...item}>
+          {item.label} {children}
+        </MenuCheckboxItem>
+      );
+    case "radio":
+      return (
+        <MenuRadioItem {...item}>
+          {item.label} {children}
+        </MenuRadioItem>
+      );
+    case "label":
+      return <MenuLabel {...item}>{item.label} </MenuLabel>;
+    case "separator":
+      return <MenuSeparator {...item} />;
+    case "submenu":
+      return (
+        <MenuSub>
+          <MenuSubTrigger {...item}>{item.label}</MenuSubTrigger>
+          <MenuSubContent>
+            {item.items?.map((subItem, index) => (
+              <React.Fragment key={index}>
+                {renderMenuItem(subItem)}
+              </React.Fragment>
+            ))}
+          </MenuSubContent>
+        </MenuSub>
+      );
+    default:
+      return null;
+  }
+};