@mbao01/common 0.0.6 → 0.0.8

package/dist/types/components/Form/components/Label/Label.d.ts

@@ -0,0 +1,7 @@
+import type { LabelProps, LabelTextProps } from "./types";
+declare const Label: {
+    ({ className, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string | undefined;
+    Text: ({ className, ...props }: LabelTextProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Label };

package/dist/types/components/Form/components/Label/constants.d.ts

@@ -0,0 +1 @@
+export declare const getLabelClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/Form/components/Label/index.d.ts

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

package/dist/types/components/Form/components/Label/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "../../../../libs";
+import { getLabelClasses } from "./constants";
+export type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof getLabelClasses>;
+export type LabelTextProps = React.HTMLAttributes<HTMLSpanElement>;

package/dist/types/components/Form/index.d.ts

@@ -0,0 +1,11 @@
+export { Input } from "./Input";
+export { Phone } from "./Phone";
+export { Radio } from "./Radio";
+export { Range } from "./Range";
+export { Select } from "./Select";
+export { Slider } from "./Slider";
+export { Checkbox } from "./Checkbox";
+export { Textarea } from "./Textarea";
+export { TextField } from "./TextField";
+export { Label } from "./components/Label";
+export { FormControl } from "./components/FormControl";

package/dist/types/components/Loading/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getLoadingClasses } from "./constants";
 export type LoadingProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof getLoadingClasses>;

package/dist/types/components/Popover/Popover.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { PopoverProps } from "./types";
+declare const Popover: {
+    (props: PopoverProps): import("react/jsx-runtime").JSX.Element;
+    Content: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: import("class-variance-authority/types").ClassProp | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Popover };

package/dist/types/components/Popover/constants.d.ts

@@ -0,0 +1 @@
+export declare const getPopoverContentClasses: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/types/components/Popover/index.d.ts

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

package/dist/types/components/Popover/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type VariantProps } from "../../libs";
+import { getPopoverContentClasses } from "./constants";
+export type PopoverProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
+export type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & VariantProps<typeof getPopoverContentClasses>;

package/dist/types/components/Progress/Progress.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+export declare const Progress: React.ForwardRefExoticComponent<Omit<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & import("class-variance-authority").VariantProps<(props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Progress/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const getProgressClasses: (props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const getProgressIndicatorClasses: (props?: ({
+    variant?: "accent" | "error" | "ghost" | "info" | "link" | "neutral" | "primary" | "secondary" | "success" | "warning" | "base" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Progress/index.d.ts

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

package/dist/types/components/Progress/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { type VariantProps } from "../../libs";
+import { getProgressClasses } from "./constants";
+export type ProgressProps = Omit<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, "asChild"> & VariantProps<typeof getProgressClasses>;

package/dist/types/components/Separator/Separator.d.ts

@@ -0,0 +1,2 @@
+import { type SeparatorProps } from "./types";
+export declare const Separator: ({ className, orientation, decorative, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Separator/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const getSeparatorClasses: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Separator/index.d.ts

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

package/dist/types/components/Separator/types.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+export type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;

package/dist/types/components/Skeleton/constants.d.ts

@@ -1,6 +1,6 @@
 export declare const getSkeletonClasses: (props?: ({
     variant?: "pulse" | null | undefined;
-    width?: "full" | 4 | 2 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
-    height?: "full" | 4 | 2 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | null | undefined;
+    width?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
+    height?: 4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 2 | "full" | null | undefined;
     round?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/types/components/Skeleton/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getSkeletonClasses } from "./constants";
 export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getSkeletonClasses>;

package/dist/types/components/Text/Text.d.ts

@@ -1,2 +1,2 @@
-import { type TextProps } from "./types";
-export declare const Text: ({ as, size, variant, children, className, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+import type { As, TextProps } from "./types";
+export declare const Text: <T extends As>({ as, size, variant, children, className, ...props }: TextProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Text/types.d.ts

@@ -1,5 +1,9 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getTextClasses } from "./constants";
-export type TextProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof getTextClasses> & {
-    as?: keyof Pick<JSX.IntrinsicElements, "h1" | "h2" | "h3" | "h4" | "h5" | "p">;
+export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
+type AllowedElements = Pick<JSX.IntrinsicElements, As>;
+export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> & VariantProps<typeof getTextClasses> & {
+    as?: As;
 };
+export {};

package/dist/types/components/Tooltip/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type VariantProps } from "../../libs";
 import { getTooltipArrowClasses, getTooltipContentClasses } from "./constants";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";

package/dist/types/index.d.ts

@@ -2,12 +2,21 @@
 export * from "./components/Button";
 export * from "./components/Breadcrumbs";
 /** data display */
+export * from "./components/Avatar";
 export * from "./components/Badge";
 export * from "./components/Card";
 export * from "./components/Description";
+export * from "./components/Progress";
+export * from "./components/Separator";
 export * from "./components/Text";
 /** data input */
+export * from "./components/Form";
+export * from "./components/Combobox";
 /** feedback */
 export * from "./components/Loading";
 export * from "./components/Skeleton";
 export * from "./components/Tooltip";
+/** composable */
+export * from "./components/Dialog";
+export * from "./components/Command";
+export * from "./components/Popover";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -60,25 +60,36 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.0.3",
+    "@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-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "cmdk": "^1.0.0",
     "daisyui": "^4.6.2",
+    "react-international-phone": "^4.2.6",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/addon-onboarding": "^1.0.11",
-    "@storybook/addon-themes": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-vite": "^7.6.14",
-    "@storybook/test": "^7.6.14",
+    "@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/blocks": "^8.0.6",
+    "@storybook/react": "^8.0.6",
+    "@storybook/react-vite": "^8.0.6",
+    "@storybook/test": "^8.0.6",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
@@ -95,14 +106,14 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "jsdom": "^23.2.0",
     "path": "^0.12.7",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
-    "storybook": "^7.6.14",
+    "storybook": "^8.0.6",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "^5.1.1",
@@ -114,5 +125,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "ceb6cef48e8547b4da5c51dda329bd6edee73c0b"
+  "gitHead": "b7bb9c19b245e54a221c02998dc7ec6815cead56"
 }

package/src/components/Avatar/Avatar.tsx

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

package/src/components/Avatar/constants.ts

@@ -0,0 +1,69 @@
+import { cva } from "../../libs";
+
+export const getAvatarClasses = cva("avatar", {
+  variants: {
+    size: {
+      4: "w-4 h-4",
+      8: "w-8 h-8",
+      12: "w-12 h-12",
+      16: "w-16 h-16",
+      24: "w-24 h-24",
+      32: "w-32 h-32",
+      48: "w-48 h-48",
+      64: "w-64 h-64",
+    },
+    status: {
+      online: "online",
+      offline: "offline",
+    },
+  },
+});
+
+const classesConfig = {
+  variants: {
+    variant: {
+      accent: "bg-accent text-accent-content ring-accent",
+      default: "bg-default text-default-content ring-default",
+      error: "bg-error text-error-content ring-error",
+      ghost: "bg-ghost text-ghost-content ring-ghost",
+      info: "bg-info text-info-content ring-info",
+      neutral: "bg-neutral text-neutral-content ring-neutral",
+      primary: "bg-primary text-primary-content ring-primary",
+      secondary: "bg-secondary text-secondary-content ring-secondary",
+      success: "bg-success text-success-content ring-success",
+      warning: "bg-warning text-warning-content ring-warning",
+    },
+    shape: {
+      round: "rounded",
+      circle: "rounded-full",
+      hexagon: "mask mask-hexagon",
+      triangle: "mask mask-triangle",
+      television: "mask mask-squircle",
+    },
+    ring: {
+      true: "ring ring-offset-base-100 ring-offset-2",
+    },
+  },
+};
+
+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",
+      },
+    },
+  }
+);

package/src/components/Avatar/index.ts

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

package/src/components/Avatar/types.ts

@@ -0,0 +1,25 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { type VariantProps } from "../../libs";
+import {
+  getAvatarClasses,
+  getAvatarFallbackClasses,
+  getAvatarImageClasses,
+} from "./constants";
+
+export type AvatarProps = Omit<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+  "asChild" | "size"
+> &
+  VariantProps<typeof getAvatarClasses>;
+
+export type AvatarImageProps = Omit<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>,
+  "asChild"
+> &
+  VariantProps<typeof getAvatarImageClasses>;
+
+export type AvatarFallbackProps = Omit<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,
+  "asChild"
+> &
+  VariantProps<typeof getAvatarFallbackClasses>;

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
+import type { ComboboxProps, Item } from "./types";
+import { cn } from "../../utilities";
+import { Command } from "../Command";
+import { Popover } from "../Popover";
+import { Button } from "../Button";
+
+export const Combobox = <T extends Item>({
+  label,
+  items,
+  classes,
+  emptyText,
+  placeholder,
+  getItemValue = (item: T) => item.value as string,
+  getItemLabel = (item: T) => item.label as string,
+}: ComboboxProps<T>) => {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState<string | number | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_, setItem] = React.useState<T | null>(null);
+
+  const currentItem = items?.find((item) => getItemValue(item) === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Popover.Trigger asChild>
+        <Button
+          outline
+          role="combobox"
+          aria-expanded={open}
+          className={cn("justify-between", classes?.trigger)}
+        >
+          {value && currentItem ? getItemLabel(currentItem) : label}
+          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className={cn("w-[200px] p-0", classes?.popoverContent)}>
+        <Command className={cn(classes?.content)}>
+          <Command.Input
+            placeholder={placeholder}
+            className={cn(classes?.input)}
+          />
+          <Command.Empty className={cn(classes?.empty)}>
+            {emptyText}
+          </Command.Empty>
+          <Command.List>
+            <Command.Group className={cn(classes?.group)}>
+              {items?.map((item) => (
+                <Command.Item
+                  key={getItemValue(item)}
+                  value={getItemValue(item)}
+                  onSelect={(currentValue) => {
+                    setValue(currentValue === value ? null : currentValue);
+                    setItem(item);
+                    setOpen(false);
+                  }}
+                  className={cn(
+                    {
+                      "bg-base-300": value === getItemValue(item),
+                    },
+                    classes?.item
+                  )}
+                >
+                  <CheckIcon
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === getItemValue(item) ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {getItemLabel(item)}
+                </Command.Item>
+              ))}
+            </Command.Group>
+          </Command.List>
+        </Command>
+      </Popover.Content>
+    </Popover>
+  );
+};

package/src/components/Combobox/index.ts

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

package/src/components/Combobox/types.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Item = Record<string, any>;
+
+export type ComboboxProps<T extends Item> = {
+  label: string;
+  items: T[];
+  placeholder?: string;
+  emptyText?: string;
+  getItemValue?: (item: T) => string;
+  getItemLabel?: (item: T) => string;
+  classes?: Partial<{
+    root: string;
+    trigger: string;
+    content: string;
+    input: string;
+    empty: string;
+    group: string;
+    item: string;
+    popoverContent: string;
+  }>;
+};