@leverege/imaginarium-ui 1.0.0-beta.1

package/src/hooks/useToast.ts

@@ -0,0 +1,130 @@
+import * as React from 'react'
+
+import type { ToastActionElement, ToastProps } from '../components/ui/Toast'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1_000_000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+function genId() {
+  count = ( count + 1 ) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+type Action =
+  | { type: ActionType['ADD_TOAST']; toast: ToasterToast }
+  | { type: ActionType['UPDATE_TOAST']; toast: Partial<ToasterToast> }
+  | { type: ActionType['DISMISS_TOAST']; toastId?: ToasterToast['id'] }
+  | { type: ActionType['REMOVE_TOAST']; toastId?: ToasterToast['id'] }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = ( toastId: string ) => {
+  if ( toastTimeouts.has( toastId ) ) { return }
+  const timeout = setTimeout( () => {
+    toastTimeouts.delete( toastId )
+    dispatch( { type: 'REMOVE_TOAST', toastId } )
+  }, TOAST_REMOVE_DELAY )
+  toastTimeouts.set( toastId, timeout )
+}
+
+export const reducer = ( state: State, action: Action ): State => {
+  switch ( action.type ) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [ action.toast, ...state.toasts ].slice( 0, TOAST_LIMIT ),
+      }
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map( t => ( t.id === action.toast.id ? { ...t, ...action.toast } : t ) ),
+      }
+    case 'DISMISS_TOAST': {
+      const { toastId } = action
+      if ( toastId ) {
+        addToRemoveQueue( toastId )
+      } else {
+        state.toasts.forEach( t => addToRemoveQueue( t.id ) )
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map( t =>
+          t.id === toastId || toastId === undefined ? { ...t, open: false } : t,
+        ),
+      }
+    }
+    case 'REMOVE_TOAST':
+      if ( action.toastId === undefined ) {
+        return { ...state, toasts: [] }
+      }
+      return { ...state, toasts: state.toasts.filter( t => t.id !== action.toastId ) }
+  }
+}
+
+const listeners: Array<( state: State ) => void> = []
+let memoryState: State = { toasts: [] }
+
+function dispatch( action: Action ) {
+  memoryState = reducer( memoryState, action )
+  listeners.forEach( l => l( memoryState ) )
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast( { ...props }: Toast ) {
+  const id = genId()
+  const update = ( p: ToasterToast ) =>
+    dispatch( { type: 'UPDATE_TOAST', toast: { ...p, id } } )
+  const dismiss = () => dispatch( { type: 'DISMISS_TOAST', toastId: id } )
+
+  dispatch( {
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: ( open ) => {
+        if ( !open ) { dismiss() }
+      },
+    },
+  } )
+  return { id, dismiss, update }
+}
+
+function useToast() {
+  const [ state, setState ] = React.useState<State>( memoryState )
+  React.useEffect( () => {
+    listeners.push( setState )
+    return () => {
+      const index = listeners.indexOf( setState )
+      if ( index > -1 ) { listeners.splice( index, 1 ) }
+    }
+  }, [ state ] )
+  return {
+    ...state,
+    toast,
+    dismiss: ( toastId?: string ) => dispatch( { type: 'DISMISS_TOAST', toastId } ),
+  }
+}
+
+export { useToast, toast }

package/src/index.ts

@@ -0,0 +1,63 @@
+export * from './plugins'
+export * from './shell'
+export * from './system'
+export * from './auth'
+
+export { ImaginariumUI, type ImaginariumUIConfig } from './ImaginariumUI'
+
+export {
+  PageType,
+  NavItemType,
+  ProviderType,
+} from './plugins/PluginTypes'
+
+export { Button, buttonVariants, type ButtonProps } from './components/ui/Button'
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from './components/ui/Card'
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './components/ui/Dialog'
+export { Input } from './components/ui/Input'
+export { Label } from './components/ui/Label'
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from './components/ui/Tooltip'
+export {
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+  type ToastProps,
+  type ToastActionElement,
+} from './components/ui/Toast'
+export { Toaster } from './components/ui/Toaster'
+
+export { useToast, toast } from './hooks/useToast'
+export {
+  ImaginariumApiProvider,
+  useImaginariumApi,
+  type ImaginariumApiContextValue,
+  type ImaginariumApiProviderProps,
+} from './api/ImaginariumApiContext'
+export { cn } from './lib/utils'

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn( ...inputs: ClassValue[] ) {
+  return twMerge( clsx( inputs ) )
+}

package/src/plugins/PluginTypes.ts

@@ -0,0 +1,3 @@
+export const PageType = 'imaginarium.ui.Page'
+export const NavItemType = 'imaginarium.ui.NavItem'
+export const ProviderType = 'imaginarium.ui.Provider'

package/src/plugins/index.ts

@@ -0,0 +1,10 @@
+export { NavItemType, PageType, ProviderType } from './PluginTypes'
+export type { NavItemPlugin, PagePlugin, ProviderPlugin } from './types'
+export {
+  addNavItem,
+  addPage,
+  addProvider,
+  getNavItems,
+  getPages,
+  getProviders,
+} from './registry'

package/src/plugins/leverege-plugin.d.ts

@@ -0,0 +1,20 @@
+declare module '@leverege/plugin' {
+  type Mutator = ( type: string, plugin: unknown ) => unknown | null
+
+  interface PluginsApi {
+    add( type: string, plugin: unknown ): unknown
+    addPlugin( type: string, plugin: unknown ): unknown
+    remove( type: string, plugin: unknown ): boolean
+    get<T = unknown>( type: string, criteria?: unknown ): T[]
+    addMutator( mutator: Mutator ): void
+    removeMutator( mutator: Mutator ): void
+  }
+
+  interface ConfigApi {
+    get<T = unknown>( resource: string, key: string, dValue?: T ): T
+    set( resource: string, key: string, value: unknown ): void
+  }
+
+  export const Plugins: PluginsApi
+  export const Config: ConfigApi
+}

package/src/plugins/registry.ts

@@ -0,0 +1,31 @@
+import { Plugins } from '@leverege/plugin'
+import { NavItemType, PageType, ProviderType } from './PluginTypes'
+import type { NavItemPlugin, PagePlugin, ProviderPlugin } from './types'
+
+export function addPage( plugin: PagePlugin ) {
+  Plugins.add( PageType, plugin )
+}
+
+export function addNavItem( plugin: NavItemPlugin ) {
+  Plugins.add( NavItemType, plugin )
+}
+
+export function addProvider( plugin: ProviderPlugin ) {
+  Plugins.add( ProviderType, plugin )
+}
+
+export function getPages(): PagePlugin[] {
+  return Plugins.get<PagePlugin>( PageType )
+}
+
+export function getNavItems(): NavItemPlugin[] {
+  const items = Plugins.get<NavItemPlugin>( NavItemType ).slice()
+  items.sort( ( a, b ) => ( a.sort ?? 0 ) - ( b.sort ?? 0 ) )
+  return items
+}
+
+export function getProviders(): ProviderPlugin[] {
+  const items = Plugins.get<ProviderPlugin>( ProviderType ).slice()
+  items.sort( ( a, b ) => ( a.sort ?? 0 ) - ( b.sort ?? 0 ) )
+  return items
+}

package/src/plugins/types.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface PagePlugin {
+  path: string
+  element: ReactNode | ComponentType
+  exact?: boolean
+}
+
+export interface NavItemPlugin {
+  path: string
+  label: string
+  icon?: ComponentType<{ className?: string }>
+  sort?: number
+}
+
+export interface ProviderPlugin {
+  component: ComponentType<{ children: ReactNode }>
+  sort?: number
+}

package/src/shell/AppNav.tsx

@@ -0,0 +1,63 @@
+import type { ComponentType } from 'react'
+import { Link, useLocation } from 'wouter'
+
+import { Button } from '../components/ui/Button'
+import { getNavItems } from '../plugins/registry'
+
+/**
+ * Accepted icon forms (anywhere we render an inline icon):
+ *   - React component:  `Settings` from lucide-react
+ *   - URL string:       `/logo.png`, `https://...`, `data:image/...`, `blob:...`
+ *   - CSS class string: `fa-solid fa-gear`, `material-icons` (rendered on a <span>)
+ */
+export type IconRef = ComponentType<{ className?: string }> | string
+
+export interface AppNavProps {
+  title?: string
+  titleIcon?: IconRef
+  rightSlot?: React.ReactNode
+}
+
+const URL_RE = /^(https?:|data:|blob:|\/|\.\/|\.\.\/)/
+
+function renderIcon( icon: IconRef | undefined, className: string ) {
+  if ( !icon ) { return null }
+  if ( typeof icon === 'string' ) {
+    if ( URL_RE.test( icon ) ) {
+      return <img src={icon} alt="" className={className} />
+    }
+    return <span className={`${icon} ${className}`} aria-hidden="true" />
+  }
+  const Icon = icon
+  return <Icon className={className} />
+}
+
+export function AppNav( { title = 'Imaginarium', titleIcon, rightSlot }: AppNavProps ) {
+  const [ location ] = useLocation()
+  const items = getNavItems()
+
+  return (
+    <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+      <div className="container mx-auto flex h-14 items-center px-4">
+        <div className="mr-8 flex items-center gap-2 font-semibold text-lg">
+          {renderIcon( titleIcon, 'h-6 w-6' )}
+          <span>{title}</span>
+        </div>
+        <div className="flex items-center gap-1">
+          {items.map( ( { label, path, icon: Icon } ) => {
+            const isActive = location === path || location.startsWith( `${path}/` )
+            return (
+              <Link key={path} href={path}>
+                <Button variant={isActive ? 'secondary' : 'ghost'} size="sm" className="gap-2">
+                  {Icon ? <Icon className="h-4 w-4" /> : null}
+                  {label}
+                </Button>
+              </Link>
+            )
+          } )}
+        </div>
+        {rightSlot ? <div className="ml-auto flex items-center gap-2">{rightSlot}</div> : null}
+      </div>
+    </nav>
+  )
+}

package/src/shell/ImaginariumApp.tsx

@@ -0,0 +1,78 @@
+import { useMemo, type ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { Config } from '@leverege/plugin'
+
+import { TooltipProvider } from '../components/ui/Tooltip'
+import { Toaster } from '../components/ui/Toaster'
+import { ImaginariumApiProvider } from '../api/ImaginariumApiContext'
+import { RequireAuth } from '../auth/RequireAuth'
+import { AppNav, type AppNavProps, type IconRef } from './AppNav'
+import { Shell, type ShellProps } from './Shell'
+
+export interface ImaginariumAppProps {
+  apiBaseUrl?: string
+  queryClient?: QueryClient
+  title?: string
+  titleIcon?: IconRef
+  navRightSlot?: AppNavProps['rightSlot']
+  shellFallback?: ShellProps['fallback']
+  children?: ReactNode
+}
+
+const defaultQueryClient = new QueryClient( {
+  defaultOptions: {
+    queries: { retry: false, refetchOnWindowFocus: false },
+  },
+} )
+
+function GatedShell( { title, titleIcon, navRightSlot, shellFallback, children }: {
+  title?: string
+  titleIcon?: IconRef
+  navRightSlot?: AppNavProps['rightSlot']
+  shellFallback?: ShellProps['fallback']
+  children?: ReactNode
+} ) {
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <AppNav title={title} titleIcon={titleIcon} rightSlot={navRightSlot} />
+      <Shell fallback={shellFallback}>{children}</Shell>
+    </div>
+  )
+}
+
+export function ImaginariumApp( {
+  apiBaseUrl = '/api',
+  queryClient,
+  title,
+  titleIcon,
+  navRightSlot,
+  shellFallback,
+  children,
+}: ImaginariumAppProps ) {
+  const qc = useMemo( () => queryClient ?? defaultQueryClient, [ queryClient ] )
+  const requireAuth = Config.get<boolean>( 'ImaginariumApp', 'requireAuth', true )
+  const resolvedTitleIcon = titleIcon
+    ?? Config.get<IconRef | undefined>( 'ImaginariumApp', 'titleIcon', undefined )
+
+  const gated = (
+    <GatedShell
+      title={title}
+      titleIcon={resolvedTitleIcon}
+      navRightSlot={navRightSlot}
+      shellFallback={shellFallback}
+    >
+      {children}
+    </GatedShell>
+  )
+
+  return (
+    <QueryClientProvider client={qc}>
+      <TooltipProvider>
+        <ImaginariumApiProvider apiBaseUrl={apiBaseUrl}>
+          {requireAuth ? <RequireAuth>{gated}</RequireAuth> : gated}
+          <Toaster />
+        </ImaginariumApiProvider>
+      </TooltipProvider>
+    </QueryClientProvider>
+  )
+}

package/src/shell/Shell.tsx

@@ -0,0 +1,46 @@
+import { isValidElement, createElement, type ReactNode } from 'react'
+import { Route, Switch } from 'wouter'
+
+import { getPages, getProviders } from '../plugins/registry'
+import type { PagePlugin } from '../plugins/types'
+
+function renderPageElement( plugin: PagePlugin ): ReactNode {
+  const { element } = plugin
+  if ( isValidElement( element ) ) { return element }
+  if ( typeof element === 'function' ) {
+    return createElement( element as React.ComponentType )
+  }
+  return element as ReactNode
+}
+
+export interface ShellProps {
+  fallback?: ReactNode
+  children?: ReactNode
+}
+
+export function Shell( { fallback, children }: ShellProps ) {
+  const pages = getPages()
+  const providers = getProviders()
+
+  let tree: ReactNode = (
+    <Switch>
+      {pages.map( ( page ) => (
+        <Route key={page.path} path={page.path}>
+          {renderPageElement( page )}
+        </Route>
+      ) )}
+      <Route>{fallback ?? <div className="p-8 text-muted-foreground">Not found</div>}</Route>
+    </Switch>
+  )
+
+  for ( const { component: Provider } of providers ) {
+    tree = <Provider>{tree}</Provider>
+  }
+
+  return (
+    <main className="container mx-auto px-4 py-6">
+      {children}
+      {tree}
+    </main>
+  )
+}

package/src/shell/index.ts

@@ -0,0 +1,3 @@
+export { Shell, type ShellProps } from './Shell'
+export { AppNav, type AppNavProps } from './AppNav'
+export { ImaginariumApp, type ImaginariumAppProps } from './ImaginariumApp'

package/src/system/ImagineSystemNavItem.ts

@@ -0,0 +1,9 @@
+import { Settings } from 'lucide-react'
+
+export default {
+  id : 'imaginarium.ImagineSystemNavItem',
+  path : '/system-config',
+  label : 'Imagine Systems',
+  sort : 100,
+  icon : Settings,
+}

package/src/system/ImagineSystemPage.tsx

@@ -0,0 +1,7 @@
+import ImagineSystemView from './ImagineSystemView'
+
+export default {
+  id : 'imaginarium.ImagineSystemPage',
+  path : '/system-config',
+  element : ImagineSystemView,
+}