create-blitzpack 0.1.0 → 0.1.1

package/template/packages/ui/src/skeleton-variants.tsx

@@ -1,87 +0,0 @@
-import { Skeleton } from './skeleton';
-
-export function SkeletonCard() {
-  return (
-    <div className="border-border bg-card rounded-lg border p-6">
-      <div className="flex items-center gap-3">
-        <Skeleton className="h-11 w-11 rounded-full" />
-        <div className="flex-1 space-y-2">
-          <Skeleton className="h-3 w-24" />
-          <Skeleton className="h-5 w-32" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function SkeletonTable({ rows = 5 }: { rows?: number }) {
-  return (
-    <div className="space-y-3">
-      {Array.from({ length: rows }).map((_, i) => (
-        <div key={i} className="flex items-center gap-4">
-          <Skeleton className="h-4 w-12" />
-          <Skeleton className="h-4 flex-1" />
-          <Skeleton className="h-4 w-24" />
-          <Skeleton className="h-4 w-32" />
-          <Skeleton className="h-8 w-20 rounded-md" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function SkeletonForm() {
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-20" />
-        <Skeleton className="h-10 w-full rounded-md" />
-      </div>
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-24" />
-        <Skeleton className="h-10 w-full rounded-md" />
-      </div>
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-28" />
-        <Skeleton className="h-10 w-full rounded-md" />
-      </div>
-      <Skeleton className="h-10 w-full rounded-md" />
-    </div>
-  );
-}
-
-export function SkeletonText({
-  lines = 3,
-  className,
-}: {
-  lines?: number;
-  className?: string;
-}) {
-  return (
-    <div className="space-y-2">
-      {Array.from({ length: lines }).map((_, i) => (
-        <Skeleton
-          key={i}
-          className={className}
-          style={{
-            width: i === lines - 1 ? '60%' : '100%',
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function SkeletonAvatar({
-  size = 'default',
-}: {
-  size?: 'sm' | 'default' | 'lg';
-}) {
-  const sizeClasses = {
-    sm: 'h-8 w-8',
-    default: 'h-10 w-10',
-    lg: 'h-16 w-16',
-  };
-
-  return <Skeleton className={`${sizeClasses[size]} rounded-full`} />;
-}

package/template/packages/ui/src/skeleton.tsx

@@ -1,13 +0,0 @@
-import { cn } from './lib/utils';
-
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn('bg-accent animate-pulse rounded-md', className)}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

package/template/packages/ui/src/slider.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import * as SliderPrimitive from '@radix-ui/react-slider';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
-  );
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className={cn(
-          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5'
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            'bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full'
-          )}
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary ring-ring/50 focus-visible:outline-hidden block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  );
-}
-
-export { Slider };

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

@@ -1,25 +0,0 @@
-'use client';
-
-import { useTheme } from 'next-themes';
-import { Toaster as Sonner, type ToasterProps } from 'sonner';
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className="toaster group"
-      style={
-        {
-          '--normal-bg': 'var(--popover)',
-          '--normal-text': 'var(--popover-foreground)',
-          '--normal-border': 'var(--border)',
-        } as React.CSSProperties
-      }
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

package/template/packages/ui/src/spinner.tsx

@@ -1,16 +0,0 @@
-import { Loader2Icon } from 'lucide-react';
-
-import { cn } from './lib/utils';
-
-function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
-  return (
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn('size-4 animate-spin', className)}
-      {...props}
-    />
-  );
-}
-
-export { Spinner };

package/template/packages/ui/src/switch.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import * as SwitchPrimitive from '@radix-ui/react-switch';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
-        )}
-      />
-    </SwitchPrimitive.Root>
-  );
-}
-
-export { Switch };

package/template/packages/ui/src/table.tsx

@@ -1,116 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn('w-full caption-bottom text-sm', className)}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn('[&_tr]:border-b', className)}
-      {...props}
-    />
-  );
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn('[&_tr:last-child]:border-0', className)}
-      {...props}
-    />
-  );
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        'text-foreground h-10 whitespace-nowrap px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        'whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<'caption'>) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn('text-muted-foreground mt-4 text-sm', className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-};

package/template/packages/ui/src/tabs.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-function Tabs({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn('flex flex-col gap-2', className)}
-      {...props}
-    />
-  );
-}
-
-function TabsList({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      className={cn(
-        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn('flex-1 outline-none', className)}
-      {...props}
-    />
-  );
-}
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

package/template/packages/ui/src/textarea.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 field-sizing-content shadow-xs flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Textarea };

package/template/packages/ui/src/tooltip.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
-
-import { cn } from './lib/utils';
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs',
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/template/packages/ui/src/user-avatar.tsx

@@ -1,97 +0,0 @@
-import { User } from 'lucide-react';
-
-import { Avatar, AvatarFallback, AvatarImage } from './avatar';
-import { cn } from './lib/utils';
-
-const colorClasses = [
-  'bg-red-500',
-  'bg-blue-500',
-  'bg-green-500',
-  'bg-purple-500',
-  'bg-orange-500',
-  'bg-pink-500',
-  'bg-cyan-500',
-  'bg-amber-500',
-  'bg-indigo-500',
-  'bg-emerald-500',
-  'bg-violet-500',
-  'bg-fuchsia-500',
-] as const;
-
-const sizeVariants = {
-  sm: {
-    avatar: 'h-8 w-8',
-    icon: 'h-4 w-4',
-    text: 'text-xs',
-  },
-  md: {
-    avatar: 'h-12 w-12',
-    icon: 'h-6 w-6',
-    text: 'text-sm',
-  },
-  lg: {
-    avatar: 'h-16 w-16',
-    icon: 'h-8 w-8',
-    text: 'text-base',
-  },
-  xl: {
-    avatar: 'h-20 w-20',
-    icon: 'h-10 w-10',
-    text: 'text-lg',
-  },
-} as const;
-
-function generateColorFromString(str: string): string {
-  const hash = str.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  return colorClasses[hash % colorClasses.length];
-}
-
-function getInitials(name: string | null | undefined, email: string): string {
-  if (name) {
-    return name
-      .split(' ')
-      .map((n) => n[0])
-      .join('')
-      .toUpperCase()
-      .slice(0, 2);
-  }
-  return email.charAt(0).toUpperCase();
-}
-
-interface UserAvatarProps {
-  src?: string | null;
-  name?: string | null;
-  email?: string;
-  fallback?: string;
-  size?: keyof typeof sizeVariants;
-  className?: string;
-}
-
-export function UserAvatar({
-  src,
-  name,
-  email,
-  fallback,
-  size = 'lg',
-  className,
-}: UserAvatarProps) {
-  const displayName = name || email || 'User';
-  const initials = fallback || (email ? getInitials(name, email) : undefined);
-  const colorClass = email ? generateColorFromString(email) : 'bg-primary';
-  const sizeClasses = sizeVariants[size];
-
-  return (
-    <Avatar className={cn(sizeClasses.avatar, className)}>
-      <AvatarImage src={src ?? undefined} alt={displayName} />
-      <AvatarFallback
-        className={cn(
-          colorClass,
-          'text-lg font-semibold text-white',
-          sizeClasses.text
-        )}
-      >
-        {initials || <User className={sizeClasses.icon} />}
-      </AvatarFallback>
-    </Avatar>
-  );
-}

package/template/packages/ui/test-config.js

@@ -1,3 +0,0 @@
-export default {
-  content: ['./src/**/*.{ts,tsx}'],
-};

package/template/packages/ui/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react-jsx",
-    "lib": ["ES2020", "dom", "dom.iterable"],
-    "types": ["vitest/globals", "@testing-library/jest-dom"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}

package/template/packages/ui/turbo.json

@@ -1,18 +0,0 @@
-{
-  "extends": ["//"],
-  "tasks": {
-    "build": {
-      "dependsOn": ["build:components"]
-    },
-    "build:components": {
-      "outputs": ["dist/**"]
-    },
-    "dev": {
-      "with": ["dev:components"]
-    },
-    "dev:components": {
-      "cache": false,
-      "persistent": true
-    }
-  }
-}

package/template/packages/ui/vitest.config.ts

@@ -1,17 +0,0 @@
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./vitest.setup.ts'],
-  },
-});

package/template/packages/ui/vitest.setup.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/template/packages/utils/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "@repo/packages-utils",
-  "version": "1.0.0",
-  "type": "module",
-  "exports": {
-    "./array": "./src/array.ts",
-    "./async": "./src/async.ts",
-    "./date": "./src/date.ts",
-    "./errors": "./src/errors.ts",
-    "./number": "./src/number.ts",
-    "./string": "./src/string.ts"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
-    "lint:fix": "eslint src --fix",
-    "test": "vitest run",
-    "test:unit": "vitest run",
-    "test:integration": "echo 'No integration tests for packages-utils'",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  }
-}