startx 1.0.1 → 1.0.3

package/packages/ui/postcss.config.mjs

@@ -1,9 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-const config = {
-	plugins: {
-		"@tailwindcss/postcss": {},
-		autoprefixer: {},
-	},
-};
-
-export default config;

package/packages/ui/src/components/extensions/carousel.tsx

@@ -1,392 +0,0 @@
-'use client';
-
-import type { EmblaOptionsType } from 'embla-carousel';
-import useEmblaCarousel from 'embla-carousel-react';
-import { ChevronRightIcon, ChevronLeftIcon } from 'lucide-react';
-import type React from 'react';
-import { forwardRef, useCallback, useContext, useEffect, useState, createContext } from 'react';
-
-import { Button } from '@/components/ui/button';
-
-import { cn } from '../lib/utils';
-
-type CarouselContextProps = {
-	carouselOptions?: EmblaOptionsType;
-	orientation?: 'vertical' | 'horizontal';
-	plugins?: Parameters<typeof useEmblaCarousel>[1];
-};
-
-type DirectionOption = 'ltr' | 'rtl' | undefined;
-
-type CarouselContextType = {
-	emblaMainApi: ReturnType<typeof useEmblaCarousel>[1];
-	mainRef: ReturnType<typeof useEmblaCarousel>[0];
-	thumbsRef: ReturnType<typeof useEmblaCarousel>[0];
-	scrollNext: () => void;
-	scrollPrev: () => void;
-	canScrollNext: boolean;
-	canScrollPrev: boolean;
-	activeIndex: number;
-	onThumbClick: (index: number) => void;
-	handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
-	orientation: 'vertical' | 'horizontal';
-	direction: DirectionOption;
-} & CarouselContextProps;
-
-const useCarousel = () => {
-	const context = useContext(CarouselContext);
-	if (!context) {
-		throw new Error('useCarousel must be used within a CarouselProvider');
-	}
-	return context;
-};
-
-const CarouselContext = createContext<CarouselContextType | null>(null);
-
-/**
- * Carousel Docs: {@link: https://shadcn-extension.vercel.app/docs/carousel}
- */
-
-const Carousel = forwardRef<
-	HTMLDivElement,
-	CarouselContextProps & React.HTMLAttributes<HTMLDivElement> & {dir: DirectionOption}
->(
-	(
-		{ carouselOptions, orientation = 'horizontal', dir, plugins, children, className, ...props },
-		ref,
-	) => {
-		const [emblaMainRef, emblaMainApi] = useEmblaCarousel(
-			{
-				...carouselOptions,
-				axis: orientation === 'vertical' ? 'y' : 'x',
-				direction: carouselOptions?.direction ?? (dir as DirectionOption),
-			},
-			plugins,
-		);
-
-		const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel(
-			{
-				...carouselOptions,
-				axis: orientation === 'vertical' ? 'y' : 'x',
-				direction: carouselOptions?.direction ?? (dir as DirectionOption),
-				containScroll: 'keepSnaps',
-				dragFree: true,
-			},
-			plugins,
-		);
-
-		const [canScrollPrev, setCanScrollPrev] = useState<boolean>(false);
-		const [canScrollNext, setCanScrollNext] = useState<boolean>(false);
-		const [activeIndex, setActiveIndex] = useState<number>(0);
-
-		const ScrollNext = useCallback(() => {
-			if (!emblaMainApi) return;
-			emblaMainApi.scrollNext();
-		}, [emblaMainApi]);
-
-		const ScrollPrev = useCallback(() => {
-			if (!emblaMainApi) return;
-			emblaMainApi.scrollPrev();
-		}, [emblaMainApi]);
-
-		const direction = carouselOptions?.direction ?? (dir as DirectionOption);
-
-		const handleKeyDown = useCallback(
-			(event: React.KeyboardEvent<HTMLDivElement>) => {
-				if (!emblaMainApi) return;
-				switch (event.key) {
-					case 'ArrowLeft':
-						event.preventDefault();
-						if (orientation === 'horizontal') {
-							if (direction === 'rtl') {
-								ScrollNext();
-								return;
-							}
-							ScrollPrev();
-						}
-						break;
-					case 'ArrowRight':
-						event.preventDefault();
-						if (orientation === 'horizontal') {
-							if (direction === 'rtl') {
-								ScrollPrev();
-								return;
-							}
-							ScrollNext();
-						}
-						break;
-					case 'ArrowUp':
-						event.preventDefault();
-						if (orientation === 'vertical') {
-							ScrollPrev();
-						}
-						break;
-					case 'ArrowDown':
-						event.preventDefault();
-						if (orientation === 'vertical') {
-							ScrollNext();
-						}
-						break;
-				}
-			},
-			[emblaMainApi, orientation, direction],
-		);
-
-		const onThumbClick = useCallback(
-			(index: number) => {
-				if (!emblaMainApi || !emblaThumbsApi) return;
-				emblaMainApi.scrollTo(index);
-			},
-			[emblaMainApi, emblaThumbsApi],
-		);
-
-		const onSelect = useCallback(() => {
-			if (!emblaMainApi || !emblaThumbsApi) return;
-			const selected = emblaMainApi.selectedScrollSnap();
-			setActiveIndex(selected);
-			emblaThumbsApi.scrollTo(selected);
-			setCanScrollPrev(emblaMainApi.canScrollPrev());
-			setCanScrollNext(emblaMainApi.canScrollNext());
-		}, [emblaMainApi, emblaThumbsApi]);
-
-		useEffect(() => {
-			if (!emblaMainApi) return;
-			onSelect();
-			emblaMainApi.on('select', onSelect);
-			emblaMainApi.on('reInit', onSelect);
-
-			return () => {
-				emblaMainApi.off('select', onSelect);
-			};
-		}, [emblaMainApi, onSelect]);
-
-		return (
-			<CarouselContext.Provider
-				value={{
-					emblaMainApi,
-					mainRef: emblaMainRef,
-					thumbsRef: emblaThumbsRef,
-					scrollNext: ScrollNext,
-					scrollPrev: ScrollPrev,
-					canScrollNext,
-					canScrollPrev,
-					activeIndex,
-					onThumbClick,
-					handleKeyDown,
-					carouselOptions,
-					direction,
-					orientation: orientation || (carouselOptions?.axis === 'y' ? 'vertical' : 'horizontal'),
-				}}
-			>
-				<div
-					{...props}
-					// tabIndex={0}
-					ref={ref}
-					onKeyDownCapture={handleKeyDown}
-					className={cn('grid gap-2 w-full relative focus:outline-none', className)}
-					dir={direction}
-				>
-					{children}
-				</div>
-			</CarouselContext.Provider>
-		);
-	},
-);
-
-Carousel.displayName = 'Carousel';
-
-const CarouselMainContainer = forwardRef<HTMLDivElement, {
-} & React.HTMLAttributes<HTMLDivElement>>(
-	({ className, children, ...props }, ref) => {
-		const { mainRef, orientation, direction } = useCarousel();
-
-		return (
-			<div {...props} ref={mainRef} className="overflow-hidden" dir={direction}>
-				<div
-					ref={ref}
-					className={cn('flex', `${orientation === 'vertical' ? 'flex-col' : ''}`, className)}
-				>
-					{children}
-				</div>
-			</div>
-		);
-	},
-);
-
-CarouselMainContainer.displayName = 'CarouselMainContainer';
-
-const CarouselThumbsContainer = forwardRef<
-	HTMLDivElement,
-	{} & React.HTMLAttributes<HTMLDivElement>
->(({ className, children, ...props }, ref) => {
-	const { thumbsRef, orientation, direction } = useCarousel();
-
-	return (
-		<div {...props} ref={thumbsRef} className="overflow-hidden" dir={direction}>
-			<div
-				ref={ref}
-				className={cn('flex', `${orientation === 'vertical' ? 'flex-col' : ''}`, className)}
-			>
-				{children}
-			</div>
-		</div>
-	);
-});
-
-CarouselThumbsContainer.displayName = 'CarouselThumbsContainer';
-
-const SliderMainItem = forwardRef<HTMLDivElement, {} & React.HTMLAttributes<HTMLDivElement>>(
-	({ className, children, ...props }, ref) => {
-		const { orientation } = useCarousel();
-		return (
-			<div
-				{...props}
-				ref={ref}
-				className={cn(
-					`min-w-0 shrink-0 grow-0 basis-full bg-background p-1 ${
-						orientation === 'vertical' ? 'pb-1' : 'pr-1'
-					}`,
-					className,
-				)}
-			>
-				{children}
-			</div>
-		);
-	},
-);
-
-SliderMainItem.displayName = 'SliderMainItem';
-
-const SliderThumbItem = forwardRef<
-	HTMLDivElement,
-	{
-		index: number;
-	} & React.HTMLAttributes<HTMLDivElement>
->(({ className, index, children, ...props }, ref) => {
-	const { activeIndex, onThumbClick, orientation } = useCarousel();
-	const isSlideActive = activeIndex === index;
-	return (
-		<div
-			{...props}
-			ref={ref}
-			onClick={() => onThumbClick(index)}
-			className={cn(
-				'flex min-w-0 shrink-0 grow-0 basis-1/3 bg-background p-1',
-				`${orientation === 'vertical' ? 'pb-1' : 'pr-1'}`,
-				className,
-			)}
-		>
-			<div
-				className={`relative aspect-square h-20 w-full opacity-50 rounded-md transition-opacity ${
-					isSlideActive ? '!opacity-100' : ''
-				}`}
-			>
-				{children}
-			</div>
-		</div>
-	);
-});
-
-SliderThumbItem.displayName = 'SliderThumbItem';
-
-const CarouselIndicator = forwardRef<
-	HTMLButtonElement,
-	{ index: number } & React.ComponentProps<typeof Button>
->(({ className, index, children, ...props }, ref) => {
-	const { activeIndex, onThumbClick } = useCarousel();
-	const isSlideActive = activeIndex === index;
-	return (
-		<Button
-			ref={ref}
-			size="icon"
-			className={cn(
-				'h-1 w-6 rounded-full',
-				"data-[active='false']:bg-primary/50 data-[active='true']:bg-primary",
-				className,
-			)}
-			data-active={isSlideActive}
-			onClick={() => onThumbClick(index)}
-			{...props}
-		>
-			<span className="sr-only">slide {index + 1} </span>
-		</Button>
-	);
-});
-
-CarouselIndicator.displayName = 'CarouselIndicator';
-
-const CarouselPrevious = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-	({ className, dir, variant = 'outline', size = 'icon', ...props }, ref) => {
-		const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, orientation, direction } =
-			useCarousel();
-
-		const scroll = direction === 'rtl' ? scrollNext : scrollPrev;
-		const canScroll = direction === 'rtl' ? canScrollNext : canScrollPrev;
-		return (
-			<Button
-				type="button"
-				ref={ref}
-				variant={variant}
-				size={size}
-				className={cn(
-					'absolute h-6 w-6 rounded-full z-10',
-					orientation === 'vertical'
-						? '-top-2 left-1/2 -translate-x-1/2 rotate-90'
-						: '-left-2 top-1/2 -translate-y-1/2',
-					className,
-				)}
-				onClick={scroll}
-				disabled={!canScroll}
-				{...props}
-			>
-				<ChevronLeftIcon className="h-4 w-4" />
-				<span className="sr-only">Previous slide</span>
-			</Button>
-		);
-	},
-);
-CarouselPrevious.displayName = 'CarouselPrevious';
-
-const CarouselNext = forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-	({ className, dir, variant = 'outline', size = 'icon', ...props }, ref) => {
-		const { canScrollNext, canScrollPrev, scrollNext, scrollPrev, orientation, direction } =
-			useCarousel();
-		const scroll = direction === 'rtl' ? scrollPrev : scrollNext;
-		const canScroll = direction === 'rtl' ? canScrollPrev : canScrollNext;
-		return (
-			<Button
-				type="button"
-				ref={ref}
-				variant={variant}
-				size={size}
-				className={cn(
-					'absolute h-6 w-6 rounded-full z-10',
-					orientation === 'vertical'
-						? '-bottom-2 left-1/2 -translate-x-1/2 rotate-90'
-						: '-right-2 top-1/2 -translate-y-1/2',
-					className,
-				)}
-				onClick={scroll}
-				disabled={!canScroll}
-				{...props}
-			>
-				<ChevronRightIcon className="h-4 w-4" />
-				<span className="sr-only">Next slide</span>
-			</Button>
-		);
-	},
-);
-
-CarouselNext.displayName = 'CarouselNext';
-
-export {
-	Carousel,
-	CarouselMainContainer,
-	CarouselThumbsContainer,
-	SliderMainItem,
-	SliderThumbItem,
-	CarouselIndicator,
-	CarouselPrevious,
-	CarouselNext,
-	useCarousel,
-};

package/packages/ui/src/components/hooks/time/useTimer.tsx

@@ -1,51 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-
-type TimerHook = {
-  counter: number;
-  start: () => void;
-  reset: () => void;
-  clear: () => void;
-};
-
-export function useTimer(initialSeconds: number): TimerHook {
-  const [counter, setCounter] = useState(initialSeconds);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    // Cleanup on component unmount or when counter changes
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, []);
-
-  const start = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-
-    timerRef.current = setTimeout(() => {
-      setCounter((prev) => (prev > 0 ? prev - 1 : 0));
-    }, 1000);
-  };
-
-  const reset = () => {
-    setCounter(initialSeconds);
-    clear();
-  };
-
-  const clear = () => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-    }
-  };
-
-  useEffect(() => {
-    if (counter > 0) {
-      start();
-    }
-  }, [counter]);
-
-  return { counter, start, reset, clear };
-}

package/packages/ui/src/components/hooks/use-media-query.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-export function useMediaQuery(query: string) {
-  const [value, setValue] = React.useState(false);
-
-  React.useEffect(() => {
-    function onChange(event: MediaQueryListEvent) {
-      setValue(event.matches);
-    }
-
-    const result = matchMedia(query);
-    result.addEventListener("change", onChange);
-    setValue(result.matches);
-
-    return () => result.removeEventListener("change", onChange);
-  }, [query]);
-
-  return value;
-}

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

@@ -1,242 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { type ClassValue, clsx } from "clsx";
-import {
-	differenceInDays,
-	differenceInYears,
-	format,
-	formatDistance,
-	isThisWeek,
-	isToday,
-	isYesterday,
-	parseISO,
-} 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";