@mbao01/common 0.0.41 → 0.0.43

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -49,110 +49,119 @@
     "*.css"
   ],
   "scripts": {
+    "clean": "pnpx rimraf node_modules",
     "dev": "storybook dev -p 6006",
     "build": "tsc && vite build",
     "build-storybook": "storybook build -o ../../docs/storybook/common",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "prettier": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
     "preview": "vite preview",
     "prod": "pnpx http-server ../../docs/storybook/common --port 6006",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:ui": "vitest --ui",
     "test:visual": "test-storybook --url http://127.0.0.1:6006",
+    "test:visual:coverage": "test-storybook --coverage",
     "test:visual:ci": "test-storybook --ci --verbose --url http://127.0.0.1:6006",
     "test:visual:watch": "test-storybook --watch",
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
-    "@tailwindcss/typography": "^0.5.14",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@tailwindcss/typography": "^0.5.15",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "daisyui": "^4.6.2",
-    "date-fns": "^3.6.0",
-    "embla-carousel-react": "^8.0.2",
-    "react-day-picker": "^8.10.0",
+    "daisyui": "^4.12.10",
+    "embla-carousel-react": "^8.3.0",
     "react-dropzone": "^14.2.3",
-    "react-international-phone": "^4.2.6",
+    "react-international-phone": "^4.3.0",
     "react-otp-input": "^3.1.1",
-    "sonner": "^1.4.41",
-    "tailwind-merge": "^2.2.1",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "universal-cookie": "^7.1.4",
-    "vaul": "^0.9.0"
+    "universal-cookie": "^7.2.0",
+    "vaul": "^1.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.0.6",
-    "@storybook/addon-interactions": "^8.0.6",
-    "@storybook/addon-links": "^8.0.6",
-    "@storybook/addon-onboarding": "^8.0.6",
-    "@storybook/addon-themes": "^8.0.6",
-    "@storybook/addon-viewport": "^8.3.3",
-    "@storybook/blocks": "^8.0.6",
-    "@storybook/react": "^8.0.6",
-    "@storybook/react-vite": "^8.0.6",
-    "@storybook/test": "^8.0.6",
+    "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-coverage": "^1.0.4",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
+    "@storybook/addon-onboarding": "^8.3.4",
+    "@storybook/addon-themes": "^8.3.4",
+    "@storybook/addon-viewport": "^8.3.4",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/react": "^8.3.4",
+    "@storybook/react-vite": "^8.3.4",
+    "@storybook/test": "^8.3.4",
     "@storybook/test-runner": "^0.19.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^1.2.2",
-    "@vitest/ui": "^1.2.2",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.8.0",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.10",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.1.1",
+    "@vitest/ui": "^2.1.1",
+    "autoprefixer": "^10.4.20",
+    "axe-playwright": "^2.0.3",
+    "date-fns": "^4.1.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "eslint-plugin-storybook": "^0.9.0",
     "jest-image-snapshot": "^6.4.0",
-    "jsdom": "^23.2.0",
+    "jsdom": "^25.0.1",
     "path": "^0.12.7",
-    "postcss": "^8.4.35",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0",
-    "storybook": "^8.0.6",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.1",
-    "vite-plugin-dts": "^3.7.2",
-    "vitest": "^1.2.2"
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-day-picker": "^9.1.3",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "storybook": "^8.3.4",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.8",
+    "vite-plugin-dts": "^4.2.2",
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "90d74b3c06abe95709a7e4e4a4e545322562e02d"
+  "gitHead": "a1d0e5c38ce829a3fcf38487bee6bfffba27e2b8"
 }

package/src/components/Accordion/Accordion.tsx

@@ -3,9 +3,9 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import type {
-  AccordionProps,
   AccordionContentProps,
   AccordionItemProps,
+  AccordionProps,
   AccordionTriggerProps,
 } from "./types";
 import { cn } from "../../utilities";
@@ -15,9 +15,7 @@ import {
   getAccordionTriggerClasses,
 } from "./constants";
 
-const Accordion = (props: AccordionProps) => (
-  <AccordionPrimitive.Root {...props} />
-);
+const Accordion = (props: AccordionProps) => <AccordionPrimitive.Root {...props} />;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -51,11 +49,7 @@ const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
   AccordionContentProps
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(getAccordionContentClasses())}
-    {...props}
-  >
+  <AccordionPrimitive.Content ref={ref} className={cn(getAccordionContentClasses())} {...props}>
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ));

package/src/components/Accordion/types.ts

@@ -1,16 +1,12 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
-export type AccordionProps = React.ComponentPropsWithoutRef<
-  typeof AccordionPrimitive.Root
->;
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
 
 export type AccordionContentProps = React.ComponentPropsWithoutRef<
   typeof AccordionPrimitive.Content
 >;
 
-export type AccordionItemProps = React.ComponentPropsWithoutRef<
-  typeof AccordionPrimitive.Item
->;
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
 
 export type AccordionTriggerProps = React.ComponentPropsWithoutRef<
   typeof AccordionPrimitive.Trigger

package/src/components/Alert/Alert.tsx

@@ -1,24 +1,13 @@
-import type {
-  AlertDescriptionProps,
-  AlertTitleProps,
-  AlertProps,
-} from "./types";
+import type { AlertDescriptionProps, AlertProps, AlertTitleProps } from "./types";
 import { cn } from "../../utilities";
 import { getAlertClasses } from "./constants";
 
 const Alert = ({ variant, outline, className, ...props }: AlertProps) => (
-  <div
-    role="alert"
-    className={cn(getAlertClasses({ variant, outline }), className)}
-    {...props}
-  />
+  <div role="alert" className={cn(getAlertClasses({ variant, outline }), className)} {...props} />
 );
 
 const AlertTitle = ({ className, ...props }: AlertTitleProps) => (
-  <h5
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
+  <h5 className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
 );
 
 const AlertDescription = ({ className, ...props }: AlertDescriptionProps) => (

package/src/components/AlertDialog/AlertDialog.tsx

@@ -14,6 +14,7 @@ import type {
   AlertDialogTitleProps,
 } from "./types";
 import { cn } from "../../utilities";
+import { Button } from "../Button";
 import {
   getDialogContentClasses,
   getDialogDescriptionClasses,
@@ -22,11 +23,8 @@ import {
   getDialogOverlayClasses,
   getDialogTitleClasses,
 } from "../Dialog/constants";
-import { Button } from "../Button";
 
-const AlertDialog = (props: AlertDialogProps) => (
-  <AlertDialogPrimitive.Root {...props} />
-);
+const AlertDialog = (props: AlertDialogProps) => <AlertDialogPrimitive.Root {...props} />;
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
@@ -91,8 +89,7 @@ const AlertDialogDescription = React.forwardRef<
     {...props}
   />
 ));
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,

package/src/components/AlertDialog/types.ts

@@ -1,5 +1,6 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { type VariantProps } from "../../libs";
+import { getButtonClasses } from "../Button/constants";
 import {
   getDialogContentClasses,
   getDialogDescriptionClasses,
@@ -8,11 +9,8 @@ import {
   getDialogOverlayClasses,
   getDialogTitleClasses,
 } from "../Dialog/constants";
-import { getButtonClasses } from "../Button/constants";
 
-export type AlertDialogProps = React.ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Root
->;
+export type AlertDialogProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>;
 
 export type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<
   typeof AlertDialogPrimitive.Overlay
@@ -43,7 +41,7 @@ export type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<
 export type AlertDialogActionProps = React.ComponentPropsWithoutRef<
   typeof AlertDialogPrimitive.Cancel
 > &
-  VariantProps<typeof getButtonClasses>; 
+  VariantProps<typeof getButtonClasses>;
 
 export type AlertDialogCancelProps = React.ComponentPropsWithoutRef<
   typeof AlertDialogPrimitive.Cancel

package/src/components/Anchor/Anchor.tsx

@@ -1,7 +1,7 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
-import { type AnchorProps } from "./types";
-import { getAnchorClasses } from "./constant";
 import { cn } from "../../utilities";
+import { getAnchorClasses } from "./constant";
+import { type AnchorProps } from "./types";
 
 export const Anchor = ({
   href,
@@ -21,9 +21,7 @@ export const Anchor = ({
       {...(isExternal && { rel: "noopener noreferrer" })}
     >
       {children}
-      {isExternal ? (
-        <ExternalLinkIcon name="external" className="ml-[2px] inline" />
-      ) : null}
+      {isExternal ? <ExternalLinkIcon name="external" className="ml-[2px] inline" /> : null}
     </a>
   );
 };

package/src/components/Avatar/Avatar.tsx

@@ -1,33 +1,16 @@
 "use client";
 
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import type {
-  AvatarProps,
-  AvatarImageProps,
-  AvatarFallbackProps,
-} from "./types";
+import type { AvatarFallbackProps, AvatarImageProps, AvatarProps } from "./types";
 import { cn } from "../../utilities";
-import {
-  getAvatarClasses,
-  getAvatarImageClasses,
-  getAvatarFallbackClasses,
-} from "./constants";
+import { getAvatarClasses, getAvatarFallbackClasses, getAvatarImageClasses } from "./constants";
 
 const Avatar = ({ className, size, status, ...props }: AvatarProps) => (
-  <AvatarPrimitive.Root
-    className={cn(getAvatarClasses({ size, status }), className)}
-    {...props}
-  />
+  <AvatarPrimitive.Root className={cn(getAvatarClasses({ size, status }), className)} {...props} />
 );
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = ({
-  className,
-  ring,
-  shape,
-  variant,
-  ...props
-}: AvatarImageProps) => (
+const AvatarImage = ({ className, ring, shape, variant, ...props }: AvatarImageProps) => (
   <AvatarPrimitive.Image
     className={cn(getAvatarImageClasses({ ring, shape, variant }), className)}
     {...props}
@@ -44,10 +27,7 @@ const AvatarFallback = ({
   ...props
 }: AvatarFallbackProps) => (
   <AvatarPrimitive.Fallback
-    className={cn(
-      getAvatarFallbackClasses({ ring, size, shape, variant }),
-      className
-    )}
+    className={cn(getAvatarFallbackClasses({ ring, size, shape, variant }), className)}
     {...props}
   />
 );

package/src/components/Avatar/constants.ts

@@ -48,22 +48,19 @@ const classesConfig = {
 
 export const getAvatarImageClasses = cva("", classesConfig);
 
-export const getAvatarFallbackClasses = cva(
-  "flex items-center justify-center w-full",
-  {
-    ...classesConfig,
-    variants: {
-      ...classesConfig.variants,
-      size: {
-        4: "text-[4px]",
-        8: "text-base",
-        12: "text-lg",
-        16: "text-xl",
-        24: "text-2xl",
-        32: "text-3xl",
-        48: "text-4xl",
-        64: "text-5xl",
-      },
+export const getAvatarFallbackClasses = cva("flex items-center justify-center w-full", {
+  ...classesConfig,
+  variants: {
+    ...classesConfig.variants,
+    size: {
+      4: "text-[4px]",
+      8: "text-base",
+      12: "text-lg",
+      16: "text-xl",
+      24: "text-2xl",
+      32: "text-3xl",
+      48: "text-4xl",
+      64: "text-5xl",
     },
-  }
-);
+  },
+});

package/src/components/Avatar/types.ts

@@ -1,10 +1,6 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { type VariantProps } from "../../libs";
-import {
-  getAvatarClasses,
-  getAvatarFallbackClasses,
-  getAvatarImageClasses,
-} from "./constants";
+import { getAvatarClasses, getAvatarFallbackClasses, getAvatarImageClasses } from "./constants";
 
 export type AvatarProps = Omit<
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,

package/src/components/Badge/Badge.tsx

@@ -2,20 +2,10 @@ import { cn } from "../../utilities";
 import { getBadgeClasses } from "./constants";
 import { type BadgeProps } from "./types";
 
-export const Badge = ({
-  size,
-  outline,
-  rounded,
-  variant,
-  className,
-  ...props
-}: BadgeProps) => {
+export const Badge = ({ size, outline, rounded, variant, className, ...props }: BadgeProps) => {
   return (
     <span
-      className={cn(
-        getBadgeClasses({ size, variant, outline, rounded }),
-        className
-      )}
+      className={cn(getBadgeClasses({ size, variant, outline, rounded }), className)}
       {...props}
     />
   );

package/src/components/Badge/index.ts

@@ -1 +1 @@
-export { Badge } from './Badge';
+export { Badge } from "./Badge";

package/src/components/Button/Button.tsx

@@ -1,34 +1,18 @@
 import React from "react";
 import { Slot, Slottable } from "@radix-ui/react-slot";
-import { type ButtonProps } from "./types";
-import { getButtonClasses } from "./constants";
-import { Loading } from "../Loading";
 import { cn } from "../../utilities";
+import { Loading } from "../Loading";
+import { getButtonClasses } from "./constants";
+import { type ButtonProps } from "./types";
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      asChild,
-      className,
-      outline,
-      children,
-      isLoading,
-      variant,
-      size,
-      wide,
-      ...props
-    },
-    ref
-  ) => {
+  ({ asChild, className, outline, children, isLoading, variant, size, wide, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
 
     return (
       <Comp
         ref={ref}
-        className={cn(
-          getButtonClasses({ size, wide, outline, variant, isLoading }),
-          className
-        )}
+        className={cn(getButtonClasses({ size, wide, outline, variant, isLoading }), className)}
         {...props}
       >
         <Slottable>{children}</Slottable>

package/src/components/Button/constants.ts

@@ -1,6 +1,6 @@
 import { cva } from "../../libs";
 
-export const getButtonClasses = cva("btn", {
+export const getButtonClasses = cva("btn [&:disabled]:text-opacity-50", {
   variants: {
     variant: {
       accent: "btn-accent",

package/src/components/Button/types.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from "../../libs";
 import { type ButtonHTMLAttributes } from "react";
+import { type VariantProps } from "../../libs";
 import { getButtonClasses } from "./constants";
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &