startx 1.0.2 → 1.0.4

package/pnpm-workspace.yaml

@@ -6,92 +6,102 @@ packages:
 
 catalog:
   # configs
-  typescript: ^5.9.2
-  eslint: ^9.39.2
-  tsdown: ^0.20.1
-  unrun: ^0.2.27
-  vite: ^7.3.1
-  rimraf: ^6.1.2
-  turbo: ^2.8.1
-  tsx: ^4.21.0
+  typescript: "^5.9.2"
+  eslint: "^9.39.2"
+  tsdown: "^0.20.1"
+  unrun: "^0.2.27"
+  vite: "^8.0.0"
+  rimraf: "^6.1.2"
+  turbo: "^2.9.14"
+  tsx: "^4.21.0"
 
   # utils
-  "@biomejs/biome": ^2.3.13
-  prettier: ^3.8.1
-  zod: ^4.3.6
-  "@vinejs/vine": ^4.3.0
-  axios: ^1.13.6
-  date-fns: ^4.1.0
-  nanoid: ^5.1.6
-  xlsx: ^0.18.5
-
+  "@biomejs/biome": "^2.3.13"
+  prettier: "^3.8.1"
+  zod: "^4.3.6"
+  "@vinejs/vine": "^4.3.0"
+  axios: "^1.13.6"
+  date-fns: "^4.1.0"
+  nanoid: "^5.1.6"
+  xlsx: "^0.18.5"
   # testing
-  vitest: ^4.0.18
-  "@vitest/coverage-v8": ^4.0.18
+  vitest: "^4.0.18"
+  "@vitest/coverage-v8": "^4.0.18"
 
   # types
-  "@types/node": ^25.1.0
+  "@types/node": "^25.1.0"
 
   # frontend
-  react: ^19.2.4
-  react-dom: ^19.2.4
-  lucide-react: ^0.563.0
-  tailwindcss: ^4.1.18
-  react-email: ^5.2.11
-  "@react-email/preview-server": ^5.2.11
-  "@react-email/components": ^1.0.8
-  "@react-email/tailwind": ^2.0.5
-  "@react-email/render": ^2.0.4
+  isbot: "^5.1.36"
+  react: "^19.2.4"
+  react-dom: "^19.2.4"
+  react-router: "^7.14.0"
+  "@react-router/node": "^7.14.0"
+  "@react-router/serve": "^7.14.0"
+  "@react-router/dev": "^7.14.0"
+  lucide-react: "^0.563.0"
+  tailwindcss: "^4.2.2"
+  "@tailwindcss/vite": "^4.2.2"
+
+  # email
+  react-email: "^5.2.11"
+  "@react-email/preview-server": "^5.2.11"
+  "@react-email/components": "^1.0.8"
+  "@react-email/tailwind": "^2.0.5"
+  "@react-email/render": "^2.0.4"
+
+  # ui
+  "@tanstack/react-query": "^5.100.9"
+  "@tanstack/react-query-devtools": "^5.100.9"
 
   # frontend types
-  "@types/react": ^19.2.4
-  "@types/react-dom": ^19.2.3
+  "@types/react": "^19.2.4"
+  "@types/react-dom": "^19.2.3"
 
   # backend
-  express: ^5.2.1
-  cors: ^2.7.6
-  cookie-parser: ^1.4.7
-  country-state-city: ^3.2.1
-  express-fileupload: ^1.5.2
-  express-list-endpoints: ^7.1.1
-  morgan: ^1.10.0
+  express: "^5.2.1"
+  cors: "^2.7.6"
+  cookie-parser: "^1.4.7"
+  country-state-city: "^3.2.1"
+  express-fileupload: "^1.5.2"
+  express-list-endpoints: "^7.1.1"
+  morgan: "^1.10.0"
 
   # backend types
-  "@types/express": ^5.0.6
-  "@types/cors": ^2.8.19
-  "@types/cookie-parser": ^1.4.10
-  "@types/express-fileupload": ^1.5.1
-  "@types/morgan": ^1.9.10
+  "@types/express": "^5.0.6"
+  "@types/cors": "^2.8.19"
+  "@types/cookie-parser": "^1.4.10"
+  "@types/express-fileupload": "^1.5.1"
+  "@types/morgan": "^1.9.10"
 
   # db
-  drizzle-orm: ^0.45.1
-  drizzle-kit: ^0.31.10
-  pg: ^8.19.0
-  better-sqlite3: ^12.9.0
+  drizzle-orm: "^0.45.1"
+  drizzle-kit: "^0.31.10"
+  pg: "^8.19.0"
+  better-sqlite3: "^12.9.0"
 
   # db types
-  "@types/pg": ^8.10.0
-  "@types/better-sqlite3": ^7.6.13
+  "@types/pg": "^8.10.0"
+  "@types/better-sqlite3": "^7.6.13"
 
   # lib
-  "@aws-sdk/client-s3": ^3.39.0
-  bcryptjs: ^3.0.3
-  nodemailer: ^8.0.1
-  dotenv: ^17.3.1
-  dotenv-expand: ^13.0.0
-  firebase-admin: ^13.7.0
-  winston: ^3.19.0
-  winston-daily-rotate-file: ^5.0.0
-  jsonwebtoken: ^9.0.3
+  "@aws-sdk/client-s3": "^3.1045.0"
+  bcryptjs: "^3.0.3"
+  nodemailer: "^8.0.1"
+  "@dotenvx/dotenvx": "^1.64.0"
+  firebase-admin: "^13.9.0"
+  winston: "^3.19.0"
+  winston-daily-rotate-file: "^5.0.0"
+  jsonwebtoken: "^9.0.3"
 
   # aix
-  js-tiktoken: ^1.0.21
-  quickjs-emscripten: ^0.32.0
-  quicktype-core: ^23.2.6
-  openai: ^6.34.0
+  js-tiktoken: "^1.0.21"
+  quickjs-emscripten: "^0.32.0"
+  quicktype-core: "^23.2.6"
+  openai: "^6.34.0"
 
   # bullmq
-  bullmq: ^5.76.4
+  bullmq: "^5.76.4"
 
   # redis
-  ioredis: ^5.10.1
+  ioredis: "^5.10.1"

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;
-}