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

package/template/src/cli/context/theme/ThemeProvider.jsx

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react"
+import { THEME_STORAGE_KEY } from "#cli/config/store_keys.mjs"
+import ThemeContext from "./ThemeContext.mjs"
+
+export default function ThemeProvider({ children, defaultTheme = "system" }) {
+  const [theme, setTheme] = useState(() =>
+    typeof localStorage !== "undefined"
+      ? localStorage.getItem(THEME_STORAGE_KEY) || defaultTheme
+      : defaultTheme
+  )
+  const [isDark, setIsDark] = useState(false)
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      setIsDark(systemTheme === "dark")
+      return
+    }
+
+    root.classList.add(theme)
+    setIsDark(theme === "dark")
+  }, [theme])
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        setTheme: (theme) => {
+          if (typeof localStorage !== "undefined") {
+            localStorage.setItem(THEME_STORAGE_KEY, theme)
+          }
+          setTheme(theme)
+        },
+        isDark,
+        isLight: () => !isDark
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  )
+}

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

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

package/template/src/cli/context/ui/UIContext.jsx

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

package/template/src/cli/context/ui/UIProvider.jsx

@@ -0,0 +1,16 @@
+import { toast } from "sonner"
+import UIContext from "./UIContext.jsx"
+
+const UIProvider = ({ children }) => {
+  return (
+    <UIContext.Provider
+      value={{
+        toast
+      }}
+    >
+      {children}
+    </UIContext.Provider>
+  )
+}
+
+export default UIProvider

package/template/src/cli/context/ui/useUIContext.mjs

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

package/template/src/cli/context/util.mjs

@@ -0,0 +1,17 @@
+export function isBrowser() {
+  return typeof window !== "undefined"
+}
+
+export function isDEVAndVite() {
+  if (isBrowser()) {
+    return window.__CONTEXT?.development === true
+  }
+  return process.env.NODE_ENV === "development"
+}
+
+export function imgSrc(url) {
+  // if (isDEVAndVite()) {
+  //   return `http://localhost:8005/${url.startsWith("/") ? url.slice(1) : url}`
+  // }
+  return url
+}

package/template/src/cli/entry-cli.jsx

@@ -0,0 +1,33 @@
+import { AppBrowser } from "miolo-react"
+import { hydrateRoot } from "react-dom/client"
+import { BrowserRouter } from "react-router"
+import App from "./App.jsx"
+
+import "../static/style/globals.css"
+
+const domNode = document.getElementById("root")
+
+hydrateRoot(
+  domNode,
+  <AppBrowser>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </AppBrowser>
+)
+
+// Comprobamos si el navegador del usuario soporta Service Workers
+if ("serviceWorker" in navigator) {
+  // Esperamos a que la página cargue completamente para no afectar el rendimiento inicial
+  window.addEventListener("load", () => {
+    // Apuntamos a la URL pública donde Miolo está sirviendo el archivo
+    navigator.serviceWorker
+      .register("/sw.js")
+      .then((registration) => {
+        console.log("Service Worker registrado con éxito. Scope:", registration.scope)
+      })
+      .catch((error) => {
+        console.error("Fallo al registrar el Service Worker:", error)
+      })
+  })
+}

package/template/src/cli/hooks/useIsMobile.mjs

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export default function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(undefined)
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template/src/cli/hooks/useStoragedState.mjs

@@ -0,0 +1,63 @@
+import { useEffect, useState /*useCallback,*/ } from "react"
+import { isBrowser } from "#cli/lib/utils.mjs"
+
+const getStorageKey = (key) => {
+  if (isBrowser()) {
+    return `${encodeURIComponent(window.location.pathname)}_${key || ""}`
+  }
+  return undefined
+}
+
+const getPersisted = (key, defValue) => {
+  if (isBrowser()) {
+    const k = getStorageKey(key)
+    const v = localStorage.getItem(k)
+    try {
+      const p = JSON.parse(v)
+      if (p !== undefined && p !== null) {
+        return p
+      }
+    } catch (_) {}
+  }
+  return defValue
+}
+
+const setPersisted = (key, value) => {
+  if (isBrowser()) {
+    const k = getStorageKey(key)
+
+    localStorage.setItem(k, JSON.stringify(value))
+  }
+}
+
+const useStoragedState = (defValue, key) => {
+  const [value, setValue] = useState(getPersisted(key, defValue))
+
+  /*
+    const setStoragedValue = useCallback((newValue) => {
+      setPersisted(key, newValue)
+      setValue(newValue)
+    }, [key])
+    return [value, setStoragedValue]
+  
+  */
+
+  //
+  // Returning and exposing setValue, we allow
+  // to use functional setValue() too!
+  //
+
+  useEffect(() => {
+    setPersisted(key, value)
+  }, [key, value])
+
+  /*
+  const wrapSetValue = useCallback((nValue) => {
+    setPersisted(key, typeof nValue =='function' ? nValue(value) : nValue)
+    setValue(nValue)
+  }, [key, value])*/
+
+  return [value, setValue]
+}
+
+export { useStoragedState }

package/template/src/cli/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>miolo-sample</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="description" content="miolo-sample" />
+	<meta name="keywords" content="miolo-sample" />
+	<meta name="author" content="devel@afialapis.com" />
+
+	<!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
+	<!--<link rel="apple-touch-icon-precomposed" href="/favicon.ico"/>-->
+	<!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
+	<link rel="icon" href="/favicon.ico" />
+
+
+
+	<!-- PWA -->
+	<link rel="manifest" href="/manifest.json">
+	<meta name="theme-color" content="#fb64b6">
+
+</head>
+
+<body>
+</body>
+
+</html>

package/template/src/cli/layout/app-sidebar.jsx

@@ -0,0 +1,25 @@
+"use client"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarRail
+} from "#cli/components/ui/patched/sidebar.jsx"
+import { NavLastTodos } from "./nav-last-todos.jsx"
+import { NavMain } from "./nav-main.jsx"
+import { NavUser } from "./nav-user.jsx"
+
+export function AppSidebar() {
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarContent>
+        <NavLastTodos />
+        <NavMain />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}

package/template/src/cli/layout/main-layout.jsx

@@ -0,0 +1,63 @@
+import { Fragment } from "react"
+import { Outlet } from "react-router"
+import { Spinner } from "#cli/components/shadcn-io/spinner/index.jsx"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from "#cli/components/ui/breadcrumb.jsx"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger
+} from "#cli/components/ui/patched/sidebar.jsx"
+import { Separator } from "#cli/components/ui/separator.jsx"
+import { Toaster } from "#cli/components/ui/sonner.jsx"
+import useDataContext from "#cli/context/data/useDataContext.mjs"
+import { AppSidebar } from "#cli/layout/app-sidebar.jsx"
+
+export default function MainLayout() {
+  const { breads, loading } = useDataContext()
+
+  const hasBreads = breads.length > 0
+  const firstBreads = breads.length > 1 ? breads.slice(0, -1) : []
+  const lastBread = hasBreads ? breads[breads.length - 1] : []
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+          <SidebarTrigger className="-ml-1" />
+          <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+          {hasBreads && (
+            <Breadcrumb>
+              <BreadcrumbList>
+                {firstBreads.map((bread) => {
+                  return (
+                    <Fragment key={`bread_${bread[1]}`}>
+                      <BreadcrumbItem className="hidden md:block">
+                        <BreadcrumbLink href={bread[0]}>{bread[1]}</BreadcrumbLink>
+                      </BreadcrumbItem>
+                      <BreadcrumbSeparator className="hidden md:block" />
+                    </Fragment>
+                  )
+                })}
+                <BreadcrumbItem>
+                  <BreadcrumbPage>
+                    {lastBread.length > 1 ? lastBread[1] : lastBread[0]}
+                  </BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          )}
+        </header>
+        {loading ? <Spinner /> : <Outlet />}
+        <Toaster />
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

package/template/src/cli/layout/nav-last-todos.jsx

@@ -0,0 +1,72 @@
+"use client"
+import { Cable, ChartSpline, ChevronRight, HousePlug, Route, RouteOff } from "lucide-react"
+import { Link } from "react-router"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "#cli/components/ui/collapsible.jsx"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem
+} from "#cli/components/ui/patched/sidebar.jsx"
+import useDataContext from "#cli/context/data/useDataContext.mjs"
+
+export function NavLastTodos() {
+  const { lastTodos } = useDataContext()
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Resumen</SidebarGroupLabel>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton tooltip={"Inicio"}>
+            <ChartSpline />
+            <Link to="/">Inicio</Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+        {lastTodos.length === 0 ? null : (
+          <Collapsible key={"Conectadas"} asChild defaultOpen={true} className="group/collapsible">
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={"Últimos todos"}>
+                  <HousePlug />
+                  <span>Últimos todos</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {lastTodos.map((todo) => (
+                    <SidebarMenuSubItem key={todo.id}>
+                      <SidebarMenuSubButton asChild>
+                        <Link to={`/`}>
+                          {todo.done ? <RouteOff color="red" /> : <Route color="green" />}
+                          <span>{todo.description}</span>
+                        </Link>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        )}
+
+        <SidebarMenuItem>
+          <SidebarMenuButton tooltip={"Yay!"}>
+            <Cable />
+            <Link to="/">Yay!</Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

package/template/src/cli/layout/nav-main.jsx

@@ -0,0 +1,39 @@
+"use client"
+import { ArrowDownUp, Braces } from "lucide-react"
+import { Link } from "react-router"
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem
+} from "#cli/components/ui/patched/sidebar.jsx"
+// import useSessionContext from '#cli/context/session/useSessionContext.mjs'
+
+export function NavMain() {
+  // const {permiss} = useSessionContext()
+
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Configuración</SidebarGroupLabel>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton tooltip={"Red"}>
+            <ArrowDownUp />
+            <Link to="/">Foo</Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+
+        {/*permiss.can_user_debug() && (*/}
+        <SidebarMenuItem>
+          <SidebarMenuButton tooltip={"Dev"}>
+            <Braces />
+            <Link to="/dev">Bar</Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+        {/*)*/}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

package/template/src/cli/layout/nav-user.jsx

@@ -0,0 +1,105 @@
+"use client"
+
+import { ChevronsUpDown, LogOut, Moon, Shield, Sun } from "lucide-react"
+import { useNavigate } from "react-router"
+import { Avatar, AvatarFallback, AvatarImage } from "#cli/components/ui/avatar.jsx"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "#cli/components/ui/dropdown-menu.jsx"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar
+} from "#cli/components/ui/patched/sidebar.jsx"
+import useSessionContext from "#cli/context/session/useSessionContext.mjs"
+import useThemeContext from "#cli/context/theme/useThemeContext.mjs"
+
+export function NavUser() {
+  const { isMobile } = useSidebar()
+
+  const { session, logout, authMethod } = useSessionContext()
+  const navigate = useNavigate()
+  const { isDark, setTheme } = useThemeContext()
+
+  const twoLetters = session.name.slice(0, 2).toUpperCase()
+  const avatarSrc = `/static/img/default/profile.png`
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={avatarSrc} alt={session.name} />
+                <AvatarFallback className="rounded-lg">{twoLetters}</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{session.name}</span>
+                <span className="truncate text-xs">{session.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={avatarSrc} alt={session.name} />
+                  <AvatarFallback className="rounded-lg">{twoLetters}</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{session.name}</span>
+                  <span className="truncate text-xs">{session.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {isDark ? (
+              <DropdownMenuItem onSelect={() => setTheme("light")}>
+                <Sun />
+                Modo día
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuItem onSelect={() => setTheme("dark")}>
+                <Moon />
+                Modo noche
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            {/*
+            <DropdownMenuItem onSelect={() => navigate('/profile')}>
+              <User/>
+              Perfil
+            </DropdownMenuItem>
+            */}
+            <DropdownMenuItem onSelect={() => navigate("/security")}>
+              <Shield />
+              Seguridad
+            </DropdownMenuItem>
+            {["local", "google", "basic"].includes(authMethod) && (
+              <DropdownMenuItem onSelect={() => logout()}>
+                <LogOut />
+                Cerrar sesión
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/template/src/cli/layout/prop-switcher.jsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { Cable, ChevronsUpDown, House } from "lucide-react"
+import { useState } from "react"
+import { useLocation } from "react-router"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  //DropdownMenuShortcut,
+  DropdownMenuTrigger
+} from "#cli/components/ui/dropdown-menu.jsx"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar
+} from "#cli/components/ui/patched/sidebar.jsx"
+import useDataContext from "#cli/context/data/useDataContext.mjs"
+
+export function PropSwitcher() {
+  const { isMobile } = useSidebar()
+  const location = useLocation()
+
+  const { properties } = useDataContext()
+  const [activeProp, setActiveProp] = useState(properties[0])
+
+  // TODO CHeck w
+  if (location.pathname === "/connect") {
+    return null
+  }
+
+  if (!activeProp) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <House className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{activeProp.name}</span>
+                {/*<span className="truncate text-xs">{activeProp.plan}</span>*/}
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Propiedades
+            </DropdownMenuLabel>
+            {properties.map((prop, _index) => (
+              <DropdownMenuItem
+                key={prop.name}
+                onClick={() => setActiveProp(prop)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-md border">
+                  <House className="size-3.5 shrink-0" />
+                </div>
+                {prop.name}
+                {/*<DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>*/}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
+                <Cable className="size-4" />
+              </div>
+              <div className="text-muted-foreground font-medium">Conectar propiedad</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/template/src/cli/lib/utils.mjs

@@ -0,0 +1,10 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+
+export function isBrowser() {
+  return typeof window !== "undefined"
+}

package/template/src/cli/pages/Index.jsx

@@ -0,0 +1,13 @@
+import useSessionContext from "#cli/context/session/useSessionContext.mjs"
+import IndexOffline from "#cli/pages/IndexOffline.jsx"
+import IndexOnline from "#cli/pages/IndexOnline.jsx"
+
+export default function Index() {
+  const { authenticated } = useSessionContext()
+
+  if (!authenticated) {
+    return <IndexOffline />
+  }
+
+  return <IndexOnline />
+}