ERR Boilerblate

33 | ) 34 | } 35 | 36 | export { Badge, badgeVariants } 37 | -------------------------------------------------------------------------------- /web/src/components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", 16 | outline: 17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", 20 | ghost: "hover:bg-accent hover:text-accent-foreground", 21 | link: "text-primary underline-offset-4 hover:underline", 22 | }, 23 | size: { 24 | default: "h-9 px-4 py-2", 25 | sm: "h-8 rounded-md px-3 text-xs", 26 | lg: "h-10 rounded-md px-8", 27 | icon: "h-9 w-9", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | } 35 | ) 36 | 37 | export interface ButtonProps 38 | extends React.ButtonHTMLAttributes, 39 | VariantProps { 40 | asChild?: boolean 41 | } 42 | 43 | const Button = React.forwardRef( 44 | ({ className, variant, size, asChild = false, ...props }, ref) => { 45 | const Comp = asChild ? Slot : "button" 46 | return ( 47 | 52 | ) 53 | } 54 | ) 55 | Button.displayName = "Button" 56 | 57 | export { Button, buttonVariants } 58 | -------------------------------------------------------------------------------- /web/src/components/ui/card.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Card = React.forwardRef< 6 | HTMLDivElement, 7 | React.HTMLAttributes 8 | >(({ className, ...props }, ref) => ( 9 |

17 | )) 18 | Card.displayName = "Card" 19 | 20 | const CardHeader = React.forwardRef< 21 | HTMLDivElement, 22 | React.HTMLAttributes 23 | >(({ className, ...props }, ref) => ( 24 |

29 | )) 30 | CardHeader.displayName = "CardHeader" 31 | 32 | const CardTitle = React.forwardRef< 33 | HTMLDivElement, 34 | React.HTMLAttributes 35 | >(({ className, ...props }, ref) => ( 36 |

41 | )) 42 | CardTitle.displayName = "CardTitle" 43 | 44 | const CardDescription = React.forwardRef< 45 | HTMLDivElement, 46 | React.HTMLAttributes 47 | >(({ className, ...props }, ref) => ( 48 |

53 | )) 54 | CardDescription.displayName = "CardDescription" 55 | 56 | const CardContent = React.forwardRef< 57 | HTMLDivElement, 58 | React.HTMLAttributes 59 | >(({ className, ...props }, ref) => ( 60 |

61 | )) 62 | CardContent.displayName = "CardContent" 63 | 64 | const CardFooter = React.forwardRef< 65 | HTMLDivElement, 66 | React.HTMLAttributes 67 | >(({ className, ...props }, ref) => ( 68 |

73 | )) 74 | CardFooter.displayName = "CardFooter" 75 | 76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 77 | -------------------------------------------------------------------------------- /web/src/components/ui/code.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { cn } from "@/lib/utils" 3 | 4 | interface CodeProps extends React.HTMLAttributes { 5 | children: React.ReactNode 6 | } 7 | 8 | const Code = React.forwardRef( 9 | ({ className, children, ...props }, ref) => { 10 | return ( 11 |

19 |         {children}
20 |

21 | ) 22 | } 23 | ) 24 | 25 | Code.displayName = "Code" 26 | 27 | export { Code } -------------------------------------------------------------------------------- /web/src/components/ui/scroll-area.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const ScrollArea = React.forwardRef< 9 | React.ElementRef, 10 | React.ComponentPropsWithoutRef 11 | >(({ className, children, ...props }, ref) => ( 12 | 17 | 18 | {children} 19 | 20 | 21 | 22 | 23 | )) 24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName 25 | 26 | const ScrollBar = React.forwardRef< 27 | React.ElementRef, 28 | React.ComponentPropsWithoutRef 29 | >(({ className, orientation = "vertical", ...props }, ref) => ( 30 | 43 | 44 | 45 | )) 46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName 47 | 48 | export { ScrollArea, ScrollBar } 49 | -------------------------------------------------------------------------------- /web/src/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as SeparatorPrimitive from "@radix-ui/react-separator" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Separator = React.forwardRef< 7 | React.ElementRef, 8 | React.ComponentPropsWithoutRef 9 | >( 10 | ( 11 | { className, orientation = "horizontal", decorative = true, ...props }, 12 | ref 13 | ) => ( 14 | 25 | ) 26 | ) 27 | Separator.displayName = SeparatorPrimitive.Root.displayName 28 | 29 | export { Separator } 30 | -------------------------------------------------------------------------------- /web/src/hooks/useNuiEvent.ts: -------------------------------------------------------------------------------- 1 | // yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/hooks/useNuiEvent.ts 2 | import { MutableRefObject, useEffect, useRef } from 'react'; 3 | import { noop } from '../utils/misc'; 4 | 5 | interface NuiMessageData { 6 | action: string; 7 | data: T; 8 | } 9 | 10 | type NuiHandlerSignature = (data: T) => void; 11 | 12 | /** 13 | * A hook that manage events listeners for receiving data from the client scripts 14 | * @param action The specific `action` that should be listened for. 15 | * @param handler The callback function that will handle data relayed by this hook 16 | * 17 | * @example 18 | * useNuiEvent<{visibility: true, wasVisible: 'something'}>('setVisible', (data) => { 19 | * // whatever logic you want 20 | * }) 21 | * 22 | **/ 23 | 24 | export const useNuiEvent = (action: string, handler: (data: T) => void) => { 25 | const savedHandler: MutableRefObject> = useRef(noop); 26 | 27 | // Make sure we handle for a reactive handler 28 | useEffect(() => { 29 | savedHandler.current = handler; 30 | }, [handler]); 31 | 32 | useEffect(() => { 33 | const eventListener = (event: MessageEvent>) => { 34 | const { action: eventAction, data } = event.data; 35 | 36 | if (savedHandler.current) { 37 | if (eventAction === action) { 38 | savedHandler.current(data); 39 | } 40 | } 41 | }; 42 | 43 | window.addEventListener('message', eventListener); 44 | // Remove Event Listener on component cleanup 45 | return () => window.removeEventListener('message', eventListener); 46 | }, [action]); 47 | }; -------------------------------------------------------------------------------- /web/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 0 0% 3.9%; 9 | --card: 0 0% 100%; 10 | --card-foreground: 0 0% 3.9%; 11 | --popover: 0 0% 100%; 12 | --popover-foreground: 0 0% 3.9%; 13 | --primary: 0 0% 9%; 14 | --primary-foreground: 0 0% 98%; 15 | --secondary: 0 0% 96.1%; 16 | --secondary-foreground: 0 0% 9%; 17 | --muted: 0 0% 96.1%; 18 | --muted-foreground: 0 0% 45.1%; 19 | --accent: 0 0% 96.1%; 20 | --accent-foreground: 0 0% 9%; 21 | --destructive: 0 84.2% 60.2%; 22 | --destructive-foreground: 0 0% 98%; 23 | --border: 0 0% 89.8%; 24 | --input: 0 0% 89.8%; 25 | --ring: 0 0% 3.9%; 26 | --chart-1: 12 76% 61%; 27 | --chart-2: 173 58% 39%; 28 | --chart-3: 197 37% 24%; 29 | --chart-4: 43 74% 66%; 30 | --chart-5: 27 87% 67%; 31 | --radius: 0.5rem 32 | } 33 | .dark { 34 | --background: 0 0% 3.9%; 35 | --foreground: 0 0% 98%; 36 | --card: 0 0% 3.9%; 37 | --card-foreground: 0 0% 98%; 38 | --popover: 0 0% 3.9%; 39 | --popover-foreground: 0 0% 98%; 40 | --primary: 0 0% 98%; 41 | --primary-foreground: 0 0% 9%; 42 | --secondary: 0 0% 14.9%; 43 | --secondary-fonoreground: 0 0% 98%; 44 | --muted: 0 0% 14.9%; 45 | --muted-foreground: 0 0% 63.9%; 46 | --accent: 0 0% 14.9%; 47 | --accent-foreground: 0 0% 98%; 48 | --destructive: 0 62.8% 30.6%; 49 | --destructive-foreground: 0 0% 98%; 50 | --border: 0 0% 14.9%; 51 | --input: 0 0% 14.9%; 52 | --ring: 0 0% 83.1%; 53 | --chart-1: 220 70% 50%; 54 | --chart-2: 160 60% 45%; 55 | --chart-3: 30 80% 55%; 56 | --chart-4: 280 65% 60%; 57 | --chart-5: 340 75% 55% 58 | } 59 | } 60 | 61 | @layer base { 62 | * { 63 | @apply border-border; 64 | } 65 | /* body { 66 | @apply margin-0; 67 | } */ 68 | } 69 | -------------------------------------------------------------------------------- /web/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /web/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './app/App'; 5 | import { fas } from '@fortawesome/free-solid-svg-icons'; 6 | import { far } from '@fortawesome/free-regular-svg-icons'; 7 | import { fab } from '@fortawesome/free-brands-svg-icons'; 8 | import { library } from '@fortawesome/fontawesome-svg-core'; 9 | import { isEnvBrowser } from './utils/misc'; 10 | import ErrorBoundary from './providers/errorBoundary'; 11 | 12 | library.add(fas, far, fab); 13 | 14 | if (isEnvBrowser()) { 15 | const root = document.getElementById('root'); 16 | 17 | // https://i.imgur.com/iPTAdYV.png - Night time img 18 | root!.style.backgroundImage = 'url("https://i.imgur.com/3pzRj9n.png")'; 19 | root!.style.backgroundSize = 'cover'; 20 | root!.style.backgroundRepeat = 'no-repeat'; 21 | root!.style.backgroundPosition = 'center'; 22 | } 23 | 24 | const root = document.getElementById('root'); 25 | 26 | createRoot(root!).render( 27 | 28 | {/* Catches JS errors without hiding UI and keeps the app running */} 29 | 30 | 31 | 32 | ); -------------------------------------------------------------------------------- /web/src/providers/errorBoundary.tsx: -------------------------------------------------------------------------------- 1 | // yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/providers/errorBoundary.tsx 2 | import { fetchNui } from '@/utils/fetchNui'; 3 | import { Component, ReactNode, ErrorInfo } from 'react'; 4 | 5 | class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> { 6 | constructor(props: { children: ReactNode }) { 7 | super(props); 8 | this.state = { hasError: false }; 9 | } 10 | 11 | static getDerivedStateFromError(err: Error) { 12 | return { hasError: true }; 13 | } 14 | 15 | componentDidCatch(error: Error, info: ErrorInfo) { 16 | console.error(error, info) 17 | this.setState({ hasError: false }); 18 | // Will hide frame as soon as we encouter NUI error 19 | fetchNui('hideFrame') 20 | } 21 | 22 | render() { 23 | return this.state.hasError ? null : this.props.children; 24 | } 25 | } 26 | 27 | export default ErrorBoundary; -------------------------------------------------------------------------------- /web/src/transitions/ScaleFade.tsx: -------------------------------------------------------------------------------- 1 | // yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/transitions/ScaleFade.tsx 2 | import { AnimatePresence, motion } from 'framer-motion'; 3 | 4 | const ScaleFade: React.FC<{ visible: boolean; children: React.ReactNode; onExitComplete?: () => void }> = ({ 5 | visible, 6 | children, 7 | onExitComplete, 8 | }) => { 9 | return ( 10 | <> 11 | 12 | {visible && ( 13 | 18 | {children} 19 | 20 | )} 21 | 22 | 23 | ); 24 | }; 25 | 26 | export default ScaleFade; -------------------------------------------------------------------------------- /web/src/utils/debugData.ts: -------------------------------------------------------------------------------- 1 | // yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/utils/debugData.ts 2 | import { isEnvBrowser } from './misc'; 3 | 4 | interface DebugEvent { 5 | action: string; 6 | data: T; 7 | } 8 | 9 | /** 10 | * Emulates dispatching an event using SendNuiMessage in the lua scripts. 11 | * This is used when developing in browser 12 | * 13 | * @param events - The event you want to cover 14 | * @param timer - How long until it should trigger (ms) 15 | */ 16 | export const debugData =

(events: DebugEvent

[], timer = 1000): void => { 17 | if (process.env.NODE_ENV === 'development' && isEnvBrowser()) { 18 | for (const event of events) { 19 | setTimeout(() => { 20 | window.dispatchEvent( 21 | new MessageEvent('message', { 22 | data: { 23 | action: event.action, 24 | data: event.data, 25 | }, 26 | }) 27 | ); 28 | }, timer); 29 | } 30 | } 31 | }; -------------------------------------------------------------------------------- /web/src/utils/fetchNui.ts: -------------------------------------------------------------------------------- 1 | // yoinked from https://github.com/overextended/ox_lib/blob/master/web/src/utils/fetchNui.ts 2 | /** 3 | * Simple wrapper around fetch API tailored for CEF/NUI use. This abstraction 4 | * can be extended to include AbortController if needed or if the response isn't 5 | * JSON. Tailor it to your needs. 6 | * 7 | * @param eventName - The endpoint eventname to target 8 | * @param data - Data you wish to send in the NUI Callback 9 | * 10 | * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument 11 | */ 12 | 13 | const fetch = window.fetch; 14 | // @ts-expect-error 15 | window.fetch = () => {}; 16 | // @ts-expect-error 17 | window.XMLHttpRequest = window.fetch; 18 | 19 | export async function fetchNui(eventName: string, data?: any): Promise { 20 | const options = { 21 | method: 'post', 22 | headers: { 23 | 'Content-Type': 'application/json; charset=UTF-8', 24 | }, 25 | body: JSON.stringify(data), 26 | }; 27 | 28 | const resourceName = (window as any).GetParentResourceName 29 | ? (window as any).GetParentResourceName() 30 | : 'err_boilerplate'; 31 | 32 | const resp = await fetch(`https://${resourceName}/${eventName}`, options); 33 | const respFormatted = await resp.json(); 34 | 35 | return respFormatted; 36 | } -------------------------------------------------------------------------------- /web/src/utils/misc.ts: -------------------------------------------------------------------------------- 1 | // Will return whether the current environment is in a regular browser 2 | // and not CEF 3 | export const isEnvBrowser = (): boolean => !(window as any).invokeNative; 4 | 5 | // Basic no operation function 6 | export const noop = () => {}; -------------------------------------------------------------------------------- /web/src/utils/setClipboard.ts: -------------------------------------------------------------------------------- 1 | // yoinked from https://github.com/project-error/npwd/blob/d8dc5b7f47faf5fc581ffee30f31ff61d184cfe7/phone/src/os/phone/hooks/useClipboard.ts#L1 2 | export const setClipboard = (value: string) => { 3 | const clipElem = document.createElement('textarea'); 4 | clipElem.value = value; 5 | document.body.appendChild(clipElem); 6 | clipElem.select(); 7 | document.execCommand('copy'); 8 | document.body.removeChild(clipElem); 9 | }; -------------------------------------------------------------------------------- /web/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// -------------------------------------------------------------------------------- /web/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: ["class"], 4 | content: [ 5 | "./src/**/*.{js,jsx,ts,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | borderRadius: { 10 | lg: 'var(--radius)', 11 | md: 'calc(var(--radius) - 2px)', 12 | sm: 'calc(var(--radius) - 4px)' 13 | }, 14 | colors: { 15 | background: 'hsl(var(--background))', 16 | foreground: 'hsl(var(--foreground))', 17 | card: { 18 | DEFAULT: 'hsl(var(--card))', 19 | foreground: 'hsl(var(--card-foreground))' 20 | }, 21 | popover: { 22 | DEFAULT: 'hsl(var(--popover))', 23 | foreground: 'hsl(var(--popover-foreground))' 24 | }, 25 | primary: { 26 | DEFAULT: 'hsl(var(--primary))', 27 | foreground: 'hsl(var(--primary-foreground))' 28 | }, 29 | secondary: { 30 | DEFAULT: 'hsl(var(--secondary))', 31 | foreground: 'hsl(var(--secondary-foreground))' 32 | }, 33 | muted: { 34 | DEFAULT: 'hsl(var(--muted))', 35 | foreground: 'hsl(var(--muted-foreground))' 36 | }, 37 | accent: { 38 | DEFAULT: 'hsl(var(--accent))', 39 | foreground: 'hsl(var(--accent-foreground))' 40 | }, 41 | destructive: { 42 | DEFAULT: 'hsl(var(--destructive))', 43 | foreground: 'hsl(var(--destructive-foreground))' 44 | }, 45 | border: 'hsl(var(--border))', 46 | input: 'hsl(var(--input))', 47 | ring: 'hsl(var(--ring))', 48 | chart: { 49 | '1': 'hsl(var(--chart-1))', 50 | '2': 'hsl(var(--chart-2))', 51 | '3': 'hsl(var(--chart-3))', 52 | '4': 'hsl(var(--chart-4))', 53 | '5': 'hsl(var(--chart-5))' 54 | } 55 | } 56 | } 57 | }, 58 | plugins: [require("tailwindcss-animate")], 59 | } 60 | 61 | -------------------------------------------------------------------------------- /web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "bundler", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx", 18 | "baseUrl": ".", 19 | "paths": { 20 | "@/*": ["./src/*"] 21 | } 22 | }, 23 | "include": ["src"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } -------------------------------------------------------------------------------- /web/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "esModuleInterop": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /web/vite.config.ts: -------------------------------------------------------------------------------- 1 | import * as path from "path"; 2 | import { defineConfig } from 'vite'; 3 | import react from '@vitejs/plugin-react'; 4 | import tailwindcss from 'tailwindcss'; 5 | import autoprefixer from 'autoprefixer'; 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [react()], 10 | css: { 11 | postcss: { 12 | plugins: [ 13 | tailwindcss, 14 | autoprefixer, 15 | ], 16 | }, 17 | }, 18 | resolve: { 19 | alias: { 20 | "@": path.resolve(__dirname, "./src"), 21 | }, 22 | }, 23 | server: { 24 | port: 3000, 25 | }, 26 | base: './', 27 | build: { 28 | outDir: 'build', 29 | target: 'esnext', 30 | }, 31 | esbuild: { 32 | logOverride: { 'this-is-undefined-in-esm': 'silent' }, 33 | }, 34 | }); 35 | --------------------------------------------------------------------------------

31 | 32 | System Data 33 |