startx 0.0.1

package/packages/ui/src/components/lib/utils.ts

@@ -0,0 +1,242 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { type ClassValue, clsx } from 'clsx';
+import {
+	format,
+	isToday,
+	isYesterday,
+	isThisWeek,
+	differenceInDays,
+	formatDistance,
+	parseISO,
+	differenceInYears,
+} from 'date-fns';
+import { twMerge } from 'tailwind-merge';
+
+import type { Store } from '../util/storage';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// function isFileArray(value: any): value is File[] {
+//   return Array.isArray(value) && value.every(item => item instanceof File);
+// }
+
+export function getFormData(object: {
+	[key: string]: undefined | string | number | boolean | Blob | File | object | File[];
+}): FormData {
+	const formData = new FormData();
+	Object.entries(object).forEach(([key, value]) => {
+		if (value instanceof Blob || value instanceof File) {
+			formData.append(key, value);
+		} else if (value instanceof FileList || (Array.isArray(value) && value[0] instanceof File)) {
+			Array.from(value).forEach((file: File) => {
+				formData.append(key, file);
+			});
+		} else {
+			if (!value) return;
+			formData.append(key, JSON.stringify(value));
+		}
+	});
+	return formData;
+}
+
+export function switchPath(pathname: string, tab: string) {
+	const fragments = pathname.split('/').filter((str) => str);
+	fragments[2] = tab;
+	const path = `/${fragments.join('/')}`;
+	return path;
+}
+
+export function getRelativeDate(date?: string | Date) {
+	const now = new Date();
+	if (!date) return '';
+	if (isToday(date)) {
+		return format(date, 'h:mm a');
+	} else if (isYesterday(date)) {
+		return 'yesterday';
+	} else if (isThisWeek(date) && differenceInDays(now, date) <= 7) {
+		return format(date, 'EEEE'); // EEEE gives the full name of the day like Sunday, Monday
+	} else {
+		return format(date, 'dd/MM/yy');
+	}
+}
+
+export function getRelativeDateWithTime(date?: string | Date) {
+	const now = new Date();
+	if (!date) return '';
+	return formatDistance(new Date(date), now, { addSuffix: true });
+}
+
+export function getRelativeProDate(dateString: string) {
+	try {
+		const date = parseISO(dateString);
+		const now = new Date();
+		const yearsDifference = differenceInYears(now, date);
+		const dateFormat = yearsDifference >= 1 ? 'dd MMM yyyy, h:mm a' : 'dd MMM, h:mm a';
+		const formattedDate = format(date, dateFormat);
+		return formattedDate;
+	} catch (error) {
+		console.error('Error formatting date:', error);
+		return '';
+	}
+}
+export function isValidId(str: string) {
+	const regex = /^[a-f0-9]{24}$/i;
+	return regex.test(str);
+}
+
+export function getRelativeDateOnly(date?: string | Date) {
+	const now = new Date();
+	if (!date) return '';
+	if (isToday(date)) {
+		return 'today';
+	} else if (isYesterday(date)) {
+		return 'yesterday';
+	} else if (isThisWeek(date) && differenceInDays(now, date) <= 7) {
+		return format(date, 'EEEE'); // EEEE gives the full name of the day like Sunday, Monday
+	} else {
+		return format(date, 'dd/MM/yy');
+	}
+}
+export type SocialMediaUrlMetaData = {
+	platform: 'youtube' | 'x' | 'instagram';
+	url: string;
+	contentId: string;
+};
+export function getUrlMetaData(urlString: string): SocialMediaUrlMetaData | null {
+	const url = new URL(urlString);
+	let contentId: string;
+	let platform: 'youtube' | 'x' | 'instagram';
+	switch (url.origin) {
+		case 'https://youtu.be':
+			platform = 'youtube';
+			contentId = url.pathname.replace('/', '');
+			break;
+		case 'https://www.youtube.com':
+			platform = 'youtube';
+			contentId = url.searchParams.get('v') as string;
+			break;
+		case 'https://x.com':
+			platform = 'x';
+			contentId = url.pathname
+				.split('/')
+				.filter((str) => str)
+				.at(-1) as string;
+			break;
+		case 'https://www.instagram.com':
+			platform = 'instagram';
+			contentId = url.pathname
+				.split('/')
+				.filter((str) => str)
+				.at(-1) as string;
+			break;
+		case 'https://instagram.com':
+			platform = 'instagram';
+			contentId = url.pathname
+				.split('/')
+				.filter((str) => str)
+				.at(-1) as string;
+			break;
+		default:
+			return null;
+	}
+	return {
+		platform,
+		url: urlString,
+		contentId,
+	};
+}
+
+export function isValidUrl(url: string) {
+	try {
+		const origin = new URL(url).origin;
+		return true;
+	} catch (error) {
+		return false;
+	}
+}
+
+export function memoize<T extends (...args: any[]) => any>(fn: T): T {
+	const cache: { [key: string]: ReturnType<T> } = {};
+
+	return ((...args: Parameters<T>): ReturnType<T> => {
+		const key = JSON.stringify(args);
+		if (cache[key] !== undefined) {
+			return cache[key];
+		} else {
+			const result = fn(...args);
+			cache[key] = result;
+			return result;
+		}
+	}) as T;
+}
+
+export function memoizeAsync<T extends (...args: any[]) => Promise<any>>(fn: T): T {
+	const cache: { [key: string]: ReturnType<T> } = {};
+
+	return (async (...args: Parameters<T>): Promise<ReturnType<T>> => {
+		const key = JSON.stringify(args);
+		if (cache[key] !== undefined) {
+			return await cache[key];
+		} else {
+			const result = await fn(...args);
+			cache[key] = result;
+			return result;
+		}
+	}) as T;
+}
+export function memoizePersistentAsync<T extends (...args: any[]) => Promise<any>>(
+	fn: T,
+	store: Store,
+): T {
+	return (async (...args: Parameters<T>): Promise<ReturnType<T>> => {
+		const key = JSON.stringify(args);
+		const cachedValue = store.get(key);
+		if (cachedValue !== null) {
+			try {
+				return JSON.parse(cachedValue);
+			} catch (error) {
+				console.error('Error parsing cached value:', error);
+				return await fn(...args);
+			}
+		} else {
+			const result = await fn(...args);
+			store.set(key, JSON.stringify(result));
+			return result;
+		}
+	}) as T;
+}
+
+export function formatNumberWithKMB(num: number): string {
+	const formatter = new Intl.NumberFormat('en-US', {
+		notation: 'compact',
+		minimumSignificantDigits: 1,
+		maximumSignificantDigits: 3,
+	});
+
+	return formatter.format(num);
+}
+export function currencyToNumber(formattedCurrency: string): number {
+	// Remove everything except digits, minus sign, and decimal point
+	const numericString = formattedCurrency.replace(/[^0-9.-]+/g, '');
+
+	// Convert the string back to a number
+	const parsedNumber = Number.parseFloat(numericString);
+
+	// Handle potential NaN if parsing fails
+	if (isNaN(parsedNumber)) {
+		throw new Error('Invalid currency format');
+	}
+
+	return parsedNumber;
+}
+
+export function createLabels(e: string) {
+	return e
+		.replaceAll('_', ' ')
+		.replace(/\b\w/g, (char) => char.toUpperCase())
+		.trim();
+}
+
+export { cva, type VariantProps } from 'class-variance-authority';

package/packages/ui/src/components/lucide.tsx

@@ -0,0 +1,3 @@
+export * from "lucide-react";
+// export * from "react-icons/fa";
+export * from "react-icons/fa6";

package/packages/ui/src/components/sonner.tsx

@@ -0,0 +1 @@
+export * from "sonner";

package/packages/ui/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as React from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "../lib/utils";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			"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",
+			className
+		)}
+		{...props}
+		ref={ref}
+	/>
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background 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",
+				className
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+		{...props}
+	/>
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold", className)}
+		{...props}
+	/>
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+		{...props}
+	/>
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+};

package/packages/ui/src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

package/packages/ui/src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/packages/ui/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/packages/ui/src/components/ui/button.tsx

@@ -0,0 +1,96 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { RiLoader3Line } from "react-icons/ri";
+
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary  underline-offset-4 hover:underline",
+        disabled: "text-gray-500 bg-gray-400 pointed-none",
+        minimal: "py-0 px-0   md:py-0 md:p-0  max-h-fit",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+  hideChild?: boolean;
+  icon?: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      icon,
+      size,
+      disabled = false,
+      loading = false,
+      asChild = false,
+      hideChild = false,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        ref={ref}
+        {...props}
+        disabled={disabled || loading}
+        className={`${cn(
+          "ease-in-out duration-75 active:scale-95",
+          buttonVariants({ variant, size, className }),
+          "transition-transform will-change-transform cursor-pointer"
+        )} `}
+      >
+        <RiLoader3Line
+          className={`${loading ? "size-6 animate-spin  " : "hidden"} ${
+            !hideChild && "mr-2"
+          } transition-transform  `}
+        />
+        <span
+          className={cn(
+            (!icon || (hideChild && loading)) && "hidden",
+            props.children && "mr-2"
+          )}
+        >
+          {icon}
+        </span>
+        <>{hideChild ? !loading && props.children : props.children}</>
+      </Comp>
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };