@gxp-dev/app-ui 0.1.0

package/src/index.ts

@@ -0,0 +1,532 @@
+// @gxp-dev/app-ui - Vue 3 Component Library
+
+export const VERSION = '0.1.5'
+
+// UI Components
+export { Button, buttonVariants } from './components/ui/button'
+export type { ButtonVariants } from './components/ui/button'
+
+export { Input } from './components/ui/input'
+
+export { Label } from './components/ui/label'
+
+export { Textarea } from './components/ui/textarea'
+
+export { Separator } from './components/ui/separator'
+
+export { Badge, badgeVariants } from './components/ui/badge'
+export type { BadgeVariants } from './components/ui/badge'
+
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  avatarVariant,
+} from './components/ui/avatar'
+export type { AvatarVariants } from './components/ui/avatar'
+
+export { Skeleton } from './components/ui/skeleton'
+
+export {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  alertVariants,
+} from './components/ui/alert'
+export type { AlertVariants } from './components/ui/alert'
+
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from './components/ui/card'
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogScrollContent,
+  DialogTitle,
+  DialogTrigger,
+} from './components/ui/dialog'
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './components/ui/alert-dialog'
+
+export { Checkbox } from './components/ui/checkbox'
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectItemText,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from './components/ui/select'
+
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from './components/ui/tabs'
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from './components/ui/dropdown-menu'
+
+export { Toaster } from './components/ui/sonner'
+
+export { Progress } from './components/ui/progress'
+
+export { AspectRatio } from './components/ui/aspect-ratio'
+
+export { ScrollArea, ScrollBar } from './components/ui/scroll-area'
+
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './components/ui/accordion'
+
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from './components/ui/collapsible'
+
+export {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './components/ui/popover'
+
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from './components/ui/tooltip'
+
+export { Switch } from './components/ui/switch'
+
+export { Slider } from './components/ui/slider'
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  sheetVariants,
+} from './components/ui/sheet'
+export type { SheetVariants } from './components/ui/sheet'
+
+export {
+  RadioGroup,
+  RadioGroupItem,
+} from './components/ui/radio-group'
+
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from './components/ui/hover-card'
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationItem,
+  PaginationLast,
+  PaginationNext,
+  PaginationPrevious,
+} from './components/ui/pagination'
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableEmpty,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './components/ui/table'
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from './components/ui/context-menu'
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './components/ui/form'
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from './components/ui/command'
+
+export {
+  Calendar,
+  CalendarCell,
+  CalendarCellTrigger,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHead,
+  CalendarGridRow,
+  CalendarHeadCell,
+  CalendarHeader,
+  CalendarHeading,
+  CalendarNextButton,
+  CalendarPrevButton,
+} from './components/ui/calendar'
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from './components/ui/menubar'
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+} from './components/ui/navigation-menu'
+
+// Domain Components
+export { Spinner } from './components/domain/spinner'
+export type { SpinnerProps } from './components/domain/spinner'
+
+export { Header } from './components/domain/header'
+export type { HeaderProps } from './components/domain/header'
+
+export { Countdown } from './components/domain/countdown'
+export type { CountdownProps } from './components/domain/countdown'
+
+export { VideoPlayer } from './components/domain/video-player'
+export type { VideoPlayerProps } from './components/domain/video-player'
+
+export { FileUploader } from './components/domain/file-uploader'
+export type { FileUploaderProps, FileSelectedPayload } from './components/domain/file-uploader'
+
+export { BarcodeScanner } from './components/domain/barcode-scanner'
+export type { BarcodeScannerProps } from './components/domain/barcode-scanner'
+
+export {
+  Leaderboard,
+  ActivityNotifications,
+  AwardIcon,
+} from './components/domain/leaderboard'
+export type {
+  LeaderboardProps,
+  LeaderboardEntry,
+  ActivityNotificationsProps,
+  ActivityItem,
+  AwardIconProps,
+} from './components/domain/leaderboard'
+
+export { AudioVisualizer } from './components/domain/audio-visualizer'
+export type { AudioVisualizerProps } from './components/domain/audio-visualizer'
+
+export { DownloadButton } from './components/domain/download-button'
+export type { DownloadButtonProps } from './components/domain/download-button'
+
+export {
+  SocialStreamPost,
+  SocialStreamPostBody,
+} from './components/domain/social-stream-post'
+export type {
+  SocialStreamPostProps,
+  SocialStreamPostData,
+  SocialStreamAttendee,
+  SocialStreamPostBodyProps,
+} from './components/domain/social-stream-post'
+
+export { ThemeWrapper } from './components/domain/theme-wrapper'
+export type { ThemeWrapperProps, ThemeColors } from './components/domain/theme-wrapper'
+
+export { default as RecentActivity } from './components/domain/leaderboard/RecentActivity.vue'
+export type { RecentActivityProps, RecentActivityItem } from './components/domain/leaderboard/RecentActivity.vue'
+
+export { ChatTranscript } from './components/domain/chat-transcript'
+export type {
+  ChatTranscriptProps,
+  ChatMessage as ChatTranscriptMessage,
+  MessageRole,
+} from './components/domain/chat-transcript'
+
+export { VideoTile } from './components/domain/video-tile'
+export type { VideoTileProps, VideoParticipant } from './components/domain/video-tile'
+
+export { VideoGrid } from './components/domain/video-grid'
+export type { VideoGridProps } from './components/domain/video-grid'
+
+export { LocalPreview } from './components/domain/local-preview'
+export type { LocalPreviewProps } from './components/domain/local-preview'
+
+export { MediaControlBar } from './components/domain/media-control-bar'
+export type { MediaControlBarProps } from './components/domain/media-control-bar'
+
+export { MessageComposer } from './components/domain/message-composer'
+export type { MessageComposerProps, ReplyTarget } from './components/domain/message-composer'
+
+export { MessageList } from './components/domain/message-list'
+export type { MessageListProps } from './components/domain/message-list'
+
+export { ParticipantItem } from './components/domain/participant-item'
+export type { ParticipantItemProps, Participant } from './components/domain/participant-item'
+
+export { CountdownTimer } from './components/domain/countdown-timer'
+export type { CountdownTimerProps } from './components/domain/countdown-timer'
+
+export { OnScreenKeyboard } from './components/domain/on-screen-keyboard'
+export type { OnScreenKeyboardProps, KeyboardLayoutName, KeyDef, KeyboardRow, KeyboardLayout } from './components/domain/on-screen-keyboard'
+export { LAYOUTS, FULL_LAYOUT, TEXT_LAYOUT, NUMERIC_LAYOUT } from './components/domain/on-screen-keyboard'
+
+export { PinPad } from './components/domain/pin-pad'
+export type { PinPadProps } from './components/domain/pin-pad'
+
+export { SignaturePad } from './components/domain/signature-pad'
+export type { SignaturePadProps } from './components/domain/signature-pad'
+
+export { LiveCountdown } from './components/domain/live-countdown'
+export type { LiveCountdownProps } from './components/domain/live-countdown'
+
+export { LiveCountdownSync } from './components/domain/live-countdown-sync'
+export type { LiveCountdownSyncProps, LiveCountdownSyncSeverity } from './components/domain/live-countdown-sync'
+
+export { ConnectionStatus } from './components/domain/connection-status'
+export type { ConnectionStatusProps, ConnectionState } from './components/domain/connection-status'
+
+export { StepProgress } from './components/domain/step-progress'
+export type { StepProgressProps, StepItem } from './components/domain/step-progress'
+
+export { processUploadedImage, convertToCanvasBlob } from './lib/imageToBlob'
+
+// Composables
+export {
+  useMedia,
+  useScanning,
+  useAnimations,
+  useErrors,
+  useNfcListener,
+  simulateNfcScan,
+  useCameraBorder,
+  useToast,
+  useWebSocket,
+  useQuestion,
+  useChatMessages,
+  useChatMedia,
+  useStreamingAudio,
+} from './composables'
+export type {
+  UseMediaReturn,
+  MediaDevice,
+  SetDeviceOptions,
+  RecordingOptions,
+  UseScanningReturn,
+  UseAnimationsReturn,
+  AnimationSettings,
+  UseErrorsReturn,
+  UseNfcListenerReturn,
+  NfcScanData,
+  NfcHandler,
+  UseCameraBorderReturn,
+  CameraBorder,
+  CanvasDimensions,
+  UseToastReturn,
+  ToastOptions,
+  UseWebSocketReturn,
+  UseWebSocketOptions,
+  WebSocketStatus,
+  QuestionDefinition,
+  UseQuestionInputProps,
+  UseQuestionEmit,
+  UseQuestionReturn,
+  UseQuestionOption,
+  ChatMessage,
+  ChatReaction,
+  ChatMessagesApi,
+  LoadHistoryOptions,
+  SendMessageInput,
+  UseChatMessagesOptions,
+  UseChatMessagesReturn,
+  ChatTrackKind,
+  ChatTrackHandlers,
+  ChatConnectionQuality,
+  UseChatMediaOptions,
+  UseChatMediaReturn,
+  UseStreamingAudioOptions,
+  UseStreamingAudioReturn,
+} from './composables'
+
+// Utilities
+export {
+  cn,
+  delay,
+  uuid,
+  timeAgo,
+  throttle,
+  parseAIResponse,
+  preloadAssets,
+  loadFonts,
+} from './lib/utils'
+export type { ThrottleOptions, ThrottledFunction, FontSettings, FontAssets } from './lib/utils'
+
+// Experience flow (state machine + prebuilt pages)
+export {
+  useExperience,
+  useExperienceApi,
+  withExperienceDefaults,
+  readExperienceDefaults,
+  ExperienceFlow,
+  WelcomePage,
+  TermsPage,
+  InstructionsPage,
+  CameraPage,
+  CameraReviewPage,
+  LoadingPage,
+  FinalPage,
+  VideoCapturePage,
+  VideoReviewPage,
+  AudioCapturePage,
+  AudioReviewPage,
+  DrawingPage,
+  NotepadPage,
+  TextPage,
+  PromptPage,
+  OptionsPage,
+  FormPage,
+  ResultsGalleryPage,
+  PhotoEditPage,
+  SharePage,
+} from './experience'
+export type {
+  ExperienceApi,
+  ExperienceAction,
+  ExperienceActionFn,
+  ExperienceActionName,
+  ExperienceContext,
+  ExperienceFlowConfig,
+  ExperienceFlowProps,
+  ExperiencePageDef,
+  ExperiencePageDefaults,
+  PublishPostInput,
+  UseExperienceReturn,
+  CallApi,
+  UseExperienceApiOptions,
+  WelcomePageProps,
+  TermsPageProps,
+  InstructionsPageProps,
+  CameraPageProps,
+  CameraReviewPageProps,
+  CameraReviewPagePayload,
+  LoadingPageProps,
+  LoadingTask,
+  FinalPageProps,
+  FinalActionDescriptor,
+  VideoCapturePageProps,
+  VideoReviewPagePayload,
+  AudioCapturePageProps,
+  AudioReviewPagePayload,
+  DrawingTool,
+  NotepadPagePayload,
+  TextPageProps,
+  PromptTemplateToken,
+  ExperienceOption,
+  FormFieldDef,
+  FormFieldType,
+  FormFieldOption,
+  GalleryResult,
+  BackdropOption,
+  SubjectOption,
+  SharePageMedia,
+  ShareAttribution,
+  ShareMediaType,
+} from './experience'

package/src/lib/imageToBlob.ts

@@ -0,0 +1,53 @@
+/**
+ * Convert an image file to a canvas-generated blob.
+ * This standardizes the format to match camera captures.
+ */
+export async function convertToCanvasBlob(
+  file: File,
+  outputType = 'image/jpeg',
+  quality = 1.0,
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+
+    img.onload = () => {
+      try {
+        const { naturalWidth: width, naturalHeight: height } = img
+        const canvas = document.createElement('canvas')
+        canvas.width = width
+        canvas.height = height
+
+        const ctx = canvas.getContext('2d')!
+        ctx.drawImage(img, 0, 0, width, height)
+
+        canvas.toBlob(
+          (blob) => {
+            URL.revokeObjectURL(img.src)
+            if (blob) resolve(blob)
+            else reject(new Error('Failed to create blob from canvas'))
+          },
+          outputType,
+          quality,
+        )
+      } catch (error) {
+        reject(error)
+      }
+    }
+
+    img.onerror = () => reject(new Error('Failed to load image'))
+    img.src = URL.createObjectURL(file)
+  })
+}
+
+/**
+ * Process an uploaded image file to match camera capture format.
+ */
+export async function processUploadedImage(file: File): Promise<Blob> {
+  if (!file.type.startsWith('image/')) return file
+
+  try {
+    return await convertToCanvasBlob(file, 'image/jpeg', 0.95)
+  } catch {
+    return file
+  }
+}