miolo 3.0.0-beta.21 → 3.0.0-beta.210

package/template/src/cli/components/ui/select.jsx

@@ -0,0 +1,141 @@
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { cn } from "#cli/lib/utils.mjs"
+
+function Select({ ...props }) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({ ...props }) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({ ...props }) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({ className, size = "default", children, ...props }) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]: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 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({ className, children, position = "popper", ...props }) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({ className, ...props }) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({ className, children, ...props }) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({ className, ...props }) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({ className, ...props }) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({ className, ...props }) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+}

package/template/src/cli/components/ui/separator.jsx

@@ -0,0 +1,21 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "radix-ui"
+import { cn } from "#cli/lib/utils.mjs"
+
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/template/src/cli/components/ui/sheet.jsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+import { cn } from "#cli/lib/utils.mjs"
+
+function Sheet({ ...props }) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({ className, children, side = "right", ...props }) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({ className, ...props }) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+}

package/template/src/cli/components/ui/skeleton.jsx

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

package/template/src/cli/components/ui/sonner.jsx

@@ -0,0 +1,22 @@
+import { Toaster as Sonner } from "sonner"
+import useThemeContext from "#cli/context/theme/useThemeContext.mjs"
+
+const Toaster = () => {
+  const { theme } = useThemeContext()
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      position="top-right"
+      richColors={true}
+      style={{
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)"
+      }}
+    />
+  )
+}
+
+export { Toaster }

package/template/src/cli/components/ui/switch.jsx

@@ -0,0 +1,25 @@
+import { Switch as SwitchPrimitive } from "radix-ui"
+import { cn } from "#cli/lib/utils.mjs"
+
+function Switch({ className, size = "default", ...props }) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer 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 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        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 rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/template/src/cli/components/ui/table.jsx

@@ -0,0 +1,88 @@
+import { cn } from "#cli/lib/utils.mjs"
+
+function Table({ className, ...props }) {
+  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 }) {
+  return <thead data-slot="table-header" className={cn("[&_tr]:border-b", className)} {...props} />
+}
+
+function TableBody({ className, ...props }) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }) {
+  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 }) {
+  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 }) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }) {
+  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/src/cli/components/ui/textarea.jsx

@@ -0,0 +1,16 @@
+import { cn } from "#cli/lib/utils.mjs"
+
+function Textarea({ className, ...props }) {
+  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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/template/src/cli/components/ui/tooltip.jsx

@@ -0,0 +1,45 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import { cn } from "#cli/lib/utils.mjs"
+
+function TooltipProvider({ delayDuration = 0, ...props }) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({ ...props }) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary 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/src/cli/config/store_keys.mjs

@@ -0,0 +1,2 @@
+export const THEME_STORAGE_KEY = "_miolo_app_theme"
+export const SESSION_PREFS_STORAGE_KEY = "_miolo_app_session_prefs_"

package/template/src/cli/context/data/DataContext.jsx

@@ -0,0 +1,5 @@
+import { createContext } from "react"
+
+const DataContext = createContext()
+
+export default DataContext

package/template/src/cli/context/data/DataProvider.jsx

@@ -0,0 +1,44 @@
+import { useCallback, useState } from "react"
+import useSessionContext from "#cli/context/session/useSessionContext.mjs"
+import TodoList from "#ns/models/TodoList.mjs"
+import DataContext from "./DataContext.jsx"
+
+const DataProvider = ({ children }) => {
+  const [breads, setBreads] = useState([])
+  const { useSsrData } = useSessionContext()
+
+  const {
+    data: lastTodos,
+    refresh: refreshLastTodos,
+    ready
+  } = useSsrData("lastTodos", {
+    url: "/api/todo/list",
+    params: { options: { limit: 4 } },
+    model: TodoList,
+    modifier: (data) => data.sort((a, b) => b.created_at - a.created_at)
+  })
+
+  const setTitle = useCallback((title) => {
+    if (document) {
+      document.title = title
+    }
+  }, [])
+
+  return (
+    <DataContext.Provider
+      value={{
+        lastTodos,
+        refreshLastTodos,
+        loading: !ready,
+        loaded: ready,
+        breads,
+        setBreads,
+        setTitle
+      }}
+    >
+      {children}
+    </DataContext.Provider>
+  )
+}
+
+export default DataProvider

package/template/src/cli/context/data/useBreads.mjs

@@ -0,0 +1,15 @@
+import { useEffect } from "react"
+import useDataContext from "./useDataContext.mjs"
+
+const useBreads = (breadsCallback, dependencies = []) => {
+  const { setTitle, setBreads } = useDataContext()
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: new function breadsCallback each render
+  useEffect(() => {
+    const nBreads = breadsCallback()
+    setBreads(nBreads)
+    setTitle(nBreads.slice(-1))
+  }, [setTitle, setBreads, ...dependencies])
+}
+
+export default useBreads

package/template/src/cli/context/data/useDataContext.mjs

@@ -0,0 +1,4 @@
+import { useContext } from "react"
+import DataContext from "./DataContext.jsx"
+
+export default () => useContext(DataContext)

package/template/src/cli/context/session/SessionContext.mjs

@@ -0,0 +1,4 @@
+import React from "react"
+
+const SessionContext = React.createContext()
+export default SessionContext

package/template/src/cli/context/session/SessionProvider.jsx

@@ -0,0 +1,31 @@
+import { useMioloContext } from "miolo-react"
+import { useEffect, useState } from "react"
+import makePermissioner from "./makePermissioner.mjs"
+import SessionContext from "./SessionContext.mjs"
+
+const SessionProvider = ({ children }) => {
+  const { user, ...props } = useMioloContext()
+  //const [session, setSession] = useState(new Session(user))
+  const [permiss, setPermiss] = useState(makePermissioner(user))
+
+  useEffect(() => {
+    //const nSession = new Session(user)
+    //setSession(nSession)
+    //setPermiss(makePermissioner(nSession))
+    setPermiss(makePermissioner(user))
+  }, [user])
+
+  return (
+    <SessionContext.Provider
+      value={{
+        session: user,
+        permiss,
+        ...props
+      }}
+    >
+      {children}
+    </SessionContext.Provider>
+  )
+}
+
+export default SessionProvider

package/template/src/cli/context/session/makePermissioner.mjs

@@ -0,0 +1,34 @@
+const _ADMIN_PERMISSIONS = ["prop_see_all", "prop_remove", "guest_remove"]
+
+const _DEV_PERMISSIONS = ["debug_data"]
+
+const _ALL_PERMISSIONS = [..._ADMIN_PERMISSIONS, ..._DEV_PERMISSIONS]
+
+class Permissioner {
+  constructor(permissions) {
+    this.permissions = permissions
+  }
+  has_permission(code) {
+    if (!code) {
+      return true
+    }
+    return this.permissions.filter((p) => p === code).length >= 1
+  }
+  can_user_debug() {
+    return this.has_permission("debug_data")
+  }
+  can_user_remove_prop() {
+    return this.has_permission("prop_remove")
+  }
+  can_user_see_all() {
+    return this.has_permission("prop_see_all")
+  }
+  can_user_remove_guest() {
+    return this.has_permission("guest_remove")
+  }
+}
+
+export default function makePermissioner(_user) {
+  // TODO User logic based on user
+  return new Permissioner(_ALL_PERMISSIONS)
+}

package/template/src/cli/context/session/useSessionContext.mjs

@@ -0,0 +1,6 @@
+import { useContext } from "react"
+import SessionContext from "./SessionContext.mjs"
+
+const useSessionContext = () => useContext(SessionContext)
+
+export default useSessionContext

package/template/src/cli/context/theme/ThemeContext.mjs

@@ -0,0 +1,4 @@
+import React from "react"
+
+const ThemeContext = React.createContext()
+export default ThemeContext