@mbao01/common 0.0.6 → 0.0.8

package/src/components/Command/Command.tsx

@@ -0,0 +1,142 @@
+"use client";
+/* eslint-disable react/prop-types */
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import type {
+  CommandProps,
+  CommandDialogProps,
+  CommandInputProps,
+} from "./types";
+import { Dialog } from "../Dialog";
+import { cn } from "../../utilities";
+import {
+  getDialogContentClasses,
+  getCommandClasses,
+  getCommandDialogClasses,
+  getCommandEmptyClasses,
+  getCommandInputClasses,
+  getCommandInputWrapperClasses,
+  getCommandListClasses,
+  getCommandGroupClasses,
+  getCommandSeparatorClasses,
+  getCommandItemClasses,
+  getCommandShortcutClasses,
+} from "./constants";
+
+const Command = ({ className, ...props }: CommandProps) => (
+  <CommandPrimitive className={cn(getCommandClasses(), className)} {...props} />
+);
+Command.displayName = CommandPrimitive.displayName;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <Dialog.Content className={cn(getDialogContentClasses())}>
+        <Command className={cn(getCommandDialogClasses())}>{children}</Command>
+      </Dialog.Content>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  CommandInputProps
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property
+  <div className={cn(getCommandInputWrapperClasses())} cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(getCommandInputClasses(), className)}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn(getCommandListClasses(), className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={cn(getCommandEmptyClasses(), className)}
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(getCommandGroupClasses(), className)}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn(getCommandSeparatorClasses(), className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(getCommandItemClasses(), className)}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span className={cn(getCommandShortcutClasses(), className)} {...props} />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+Command.Dialog = CommandDialog;
+Command.Input = CommandInput;
+Command.List = CommandList;
+Command.Empty = CommandEmpty;
+Command.Group = CommandGroup;
+Command.Item = CommandItem;
+Command.Shortcut = CommandShortcut;
+Command.Separator = CommandSeparator;
+
+export { Command };

package/src/components/Command/constants.ts

@@ -0,0 +1,39 @@
+import { cva } from "../../libs";
+
+export const getCommandClasses = cva(
+  "flex h-full w-full flex-col overflow-hidden rounded-md text-base-content"
+);
+
+export const getDialogContentClasses = cva("overflow-hidden p-0 shadow-lg");
+
+export const getCommandDialogClasses = cva(
+  "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+);
+
+export const getCommandInputWrapperClasses = cva(
+  "flex items-center border-b px-3"
+);
+
+export const getCommandInputClasses = cva(
+  "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+);
+
+export const getCommandListClasses = cva(
+  "max-h-[300px] overflow-y-auto overflow-x-hidden"
+);
+
+export const getCommandEmptyClasses = cva("py-6 text-center text-sm");
+
+export const getCommandGroupClasses = cva(
+  "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground"
+);
+
+export const getCommandSeparatorClasses = cva("-mx-1 h-px bg-border");
+
+export const getCommandItemClasses = cva(
+  "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors aria-selected:bg-base-300 aria-selected:text-base-content aria-disabled:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-default"
+);
+
+export const getCommandShortcutClasses = cva(
+  "ml-auto text-xs tracking-widest text-muted-foreground"
+);

package/src/components/Command/index.ts

@@ -0,0 +1 @@
+export { Command } from "./Command";

package/src/components/Command/types.ts

@@ -0,0 +1,16 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { type DialogProps } from "../Dialog/types";
+import { type VariantProps } from "../../libs";
+import { getCommandClasses, getCommandInputClasses } from "./constants";
+
+export type CommandProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive
+> &
+  VariantProps<typeof getCommandClasses>;
+
+export type CommandInputProps = React.ComponentPropsWithoutRef<
+  typeof CommandPrimitive.Input
+> &
+  VariantProps<typeof getCommandInputClasses>;
+
+export type CommandDialogProps = DialogProps;

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import type {
+  DialogProps,
+  DialogFooterProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogOverlayProps,
+  DialogContentProps,
+} from "./types";
+import { cn } from "../../utilities";
+import {
+  getDialogCloseClasses,
+  getDialogContentClasses,
+  getDialogDescriptionClasses,
+  getDialogFooterClasses,
+  getDialogHeaderClasses,
+  getDialogOverlayClasses,
+  getDialogTitleClasses,
+} from "./constants";
+
+const Dialog = (props: DialogProps) => <DialogPrimitive.Root {...props} />;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  DialogOverlayProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(getDialogOverlayClasses(), className)}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, ...props }, ref) => (
+  <DialogPrimitive.Portal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(getDialogContentClasses(), className)}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className={cn(getDialogCloseClasses())}>
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: DialogHeaderProps) => (
+  <div className={cn(getDialogHeaderClasses(), className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: DialogFooterProps) => (
+  <div className={cn(getDialogFooterClasses(), className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  DialogTitleProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(getDialogTitleClasses(), className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  DialogDescriptionProps
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn(getDialogDescriptionClasses(), className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+Dialog.Trigger = DialogPrimitive.Trigger;
+Dialog.Portal = DialogPrimitive.Portal;
+Dialog.Close = DialogPrimitive.Close;
+Dialog.Header = DialogHeader;
+Dialog.Title = DialogTitle;
+Dialog.Description = DialogDescription;
+Dialog.Content = DialogContent;
+Dialog.Footer = DialogFooter;
+Dialog.Overlay = DialogOverlay;
+
+export { Dialog };

package/src/components/Dialog/constants.ts

@@ -0,0 +1,27 @@
+import { cva } from "../../libs";
+
+export const getDialogOverlayClasses = cva(
+  "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+);
+
+export const getDialogContentClasses = cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-base-100 p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
+);
+
+export const getDialogHeaderClasses = cva(
+  "flex flex-col space-y-1.5 text-center sm:text-left"
+);
+
+export const getDialogFooterClasses = cva(
+  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+);
+
+export const getDialogTitleClasses = cva(
+  "text-lg font-semibold leading-none tracking-tight"
+);
+
+export const getDialogDescriptionClasses = cva("text-sm text-muted-foreground");
+
+export const getDialogCloseClasses = cva(
+  "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+);

package/src/components/Dialog/index.ts

@@ -0,0 +1 @@
+export { Dialog } from "./Dialog";

package/src/components/Dialog/types.ts

@@ -0,0 +1,40 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps } from "../../libs";
+import {
+  getDialogContentClasses,
+  getDialogDescriptionClasses,
+  getDialogFooterClasses,
+  getDialogHeaderClasses,
+  getDialogOverlayClasses,
+  getDialogTitleClasses,
+} from "./constants";
+
+export type DialogProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Root
+>;
+
+export type DialogOverlayProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Overlay
+> &
+  VariantProps<typeof getDialogOverlayClasses>;
+
+export type DialogContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> &
+  VariantProps<typeof getDialogContentClasses>;
+
+export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getDialogHeaderClasses>;
+
+export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof getDialogFooterClasses>;
+
+export type DialogTitleProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Title
+> &
+  VariantProps<typeof getDialogTitleClasses>;
+
+export type DialogDescriptionProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Description
+> &
+  VariantProps<typeof getDialogDescriptionClasses>;

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type CheckboxProps } from "./types";
+import { getCheckboxClasses } from "./constants";
+import { cn } from "../../../utilities";
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, size, variant, ...props }, ref) => (
+    <input
+      ref={ref}
+      type="checkbox"
+      className={cn(getCheckboxClasses({ size, variant }), className)}
+      {...props}
+    />
+  )
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/src/components/Form/Checkbox/constants.ts

@@ -0,0 +1,21 @@
+import { cva } from "../../../libs";
+
+export const getCheckboxClasses = cva("checkbox", {
+  variants: {
+    variant: {
+      primary: "checkbox-primary",
+      secondary: "checkbox-secondary",
+      accent: "checkbox-accent",
+      success: "checkbox-success",
+      warning: "checkbox-warning",
+      info: "checkbox-info",
+      error: "checkbox-error",
+    },
+    size: {
+      xs: "checkbox-xs",
+      sm: "checkbox-sm",
+      md: "checkbox-md",
+      lg: "checkbox-lg",
+    },
+  },
+});

package/src/components/Form/Checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox } from "./Checkbox";

package/src/components/Form/Checkbox/types.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from "../../../libs";
+import { getCheckboxClasses } from "./constants";
+
+export type CheckboxProps = Omit<
+  React.HTMLProps<HTMLInputElement>,
+  "size" | "ref" | "type"
+> &
+  VariantProps<typeof getCheckboxClasses>;

package/src/components/Form/Input/Input.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { type InputProps } from "./types";
+import { cn } from "../../../utilities";
+import { getInputClasses } from "./constants";
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ size, variant, wide, outline, className, ...props }: InputProps, ref) => (
+    <input
+      ref={ref}
+      className={cn(
+        getInputClasses({ size, wide, variant, outline }),
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Input.displayName = "Input";

package/src/components/Form/Input/constants.ts

@@ -0,0 +1,37 @@
+import { cva } from "../../../libs";
+
+export const getInputClasses = cva(
+  "input rounded-md transition-all duration-100",
+  {
+    variants: {
+      variant: {
+        accent: "input-accent",
+        error: "input-error",
+        ghost: "input-ghost",
+        info: "input-info",
+        primary: "input-primary",
+        secondary: "input-secondary",
+        success: "input-success",
+        warning: "input-warning",
+      },
+      outline: {
+        true: "input-bordered",
+      },
+      wide: {
+        true: "w-full",
+      },
+      size: {
+        xs: "input-xs",
+        sm: "input-sm",
+        md: "input-md",
+        lg: "input-lg",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10",
+      },
+    ],
+  }
+);

package/src/components/Form/Input/index.ts

@@ -0,0 +1 @@
+export { Input } from "./Input";

package/src/components/Form/Input/types.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from "../../../libs";
+import { getInputClasses } from "./constants";
+
+export type InputProps = Omit<
+  React.HTMLProps<HTMLInputElement>,
+  "size" | "ref"
+> &
+  VariantProps<typeof getInputClasses>;

package/src/components/Form/Phone/Phone.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import React, { MutableRefObject } from "react";
+import {
+  defaultCountries,
+  usePhoneInput,
+  FlagImage,
+} from "react-international-phone";
+import { type PhoneProps } from "./types";
+import { Popover } from "../../Popover";
+import { Command } from "../../Command";
+import { cn } from "../../../utilities";
+import { Button } from "../../Button";
+import { Input } from "../Input";
+import { getPhoneButtonClasses, getPhoneInputClasses } from "./constants";
+import { getInputClasses } from "../Input/constants";
+import { getButtonClasses } from "../../Button/constants";
+
+const Phone = React.forwardRef<HTMLInputElement, PhoneProps>(
+  (
+    {
+      defaultValue,
+      className,
+      placeholder,
+      onChange,
+      inputProps,
+      buttonProps,
+      ...props
+    },
+    ref
+  ) => {
+    const [open, setOpen] = React.useState(false);
+    const {
+      inputValue,
+      handlePhoneValueChange,
+      inputRef,
+      country,
+      setCountry,
+    } = usePhoneInput({
+      value: String(defaultValue) ?? "+231",
+      defaultCountry: "lr",
+      forceDialCode: true,
+      inputRef: ref as MutableRefObject<HTMLInputElement | null>,
+    });
+
+    const options = defaultCountries.map((country) => ({
+      label: country[0],
+      value: country[1],
+    }));
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      handlePhoneValueChange(e);
+      onChange?.(e);
+    };
+
+    return (
+      <div className="join">
+        <Popover open={open} onOpenChange={setOpen}>
+          <Popover.Trigger asChild>
+            <Button
+              role="combobox"
+              aria-expanded={open}
+              className={cn(
+                getPhoneButtonClasses(),
+                getButtonClasses(buttonProps)
+              )}
+            >
+              <FlagImage iso2={country.iso2} size="30px" />
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content className="w-[200px] p-0">
+            <Command>
+              <Command.Input placeholder="Search country..." />
+              <Command.Empty>No country found.</Command.Empty>
+              <Command.List>
+                <Command.Group>
+                  {options.map((option) => (
+                    <Command.Item
+                      key={option.value}
+                      value={option.value}
+                      keywords={[option.label, option.value]}
+                      onSelect={(currentValue) => {
+                        setCountry(currentValue);
+                        setOpen(false);
+                      }}
+                      className={cn({
+                        "bg-base-300": country.iso2 === option.value,
+                      })}
+                    >
+                      <FlagImage iso2={option.value} size="20px" />
+                      <span className="truncate ml-2">{option.label}</span>
+                    </Command.Item>
+                  ))}
+                </Command.Group>
+              </Command.List>
+            </Command>
+          </Popover.Content>
+        </Popover>
+        <Input
+          type="text"
+          ref={inputRef}
+          value={inputValue}
+          pattern="^\+\d{1,4}\s\d{6,}$"
+          inputMode="numeric"
+          placeholder={placeholder ?? " "}
+          onChange={handleInputChange}
+          className={cn(
+            getPhoneInputClasses(),
+            getInputClasses(inputProps),
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Phone.displayName = "Phone";
+
+export { Phone };

package/src/components/Form/Phone/constants.ts

@@ -0,0 +1,7 @@
+import { cva } from "../../../libs";
+
+export const getPhoneButtonClasses = cva("join-item justify-between px-2");
+
+export const getPhoneInputClasses = cva(
+  "input join-item input-bordered h-10 w-full rounded-md !rounded-r-md !pl-2 text-sm transition-all duration-100"
+);

package/src/components/Form/Phone/index.ts

@@ -0,0 +1 @@
+export { Phone } from "./Phone";

package/src/components/Form/Phone/types.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "../../../libs";
+import { type InputProps } from "../Input/types";
+import { getInputClasses } from "../Input/constants";
+import { getButtonClasses } from "../../Button/constants";
+
+export type PhoneProps = Omit<
+  InputProps,
+  "type" | "size" | "label" | "inputMode"
+> & {
+  inputProps?: VariantProps<typeof getInputClasses>;
+  buttonProps?: VariantProps<typeof getButtonClasses>;
+};

package/src/components/Form/Radio/Radio.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type RadioProps } from "./types";
+import { getRadioClasses } from "./constants";
+import { cn } from "../../../utilities";
+
+const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  ({ className, size, variant, ...props }, ref) => (
+    <input
+      ref={ref}
+      type="radio"
+      className={cn(getRadioClasses({ size, variant }), className)}
+      {...props}
+    />
+  )
+);
+Radio.displayName = "Radio";
+
+export { Radio };