@fullstackunicorn/create-root 1.0.16 → 1.0.18

package/assets/root.fullstackunicorn.dev/frontend/base/layout/@use.js

@@ -0,0 +1,91 @@
+import { useLayoutEffect } from 'react'
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+import { useWindowDimensions } from '#@/imports/use.js'
+import { constants } from '#@/root/constants.js'
+import { storage } from '#@/imports/storage.js'
+
+export const width = atom(0)
+export const height = atom(0)
+export const size = atom('1')
+export const isOversize = atom(false)
+
+export const isFixed = atom(false)
+export const handleIsFixed = atom(
+  (get) => get(isFixed),
+  (get, set, value) => {
+    set(isFixed, value)
+    storage.set('isFixed', value)
+  }
+)
+
+export const mainWidth = atom((get) => get(width))
+export const isMaxWidth = atom((get) => get(isOversize) && get(isFixed))
+
+export const isLayoutInitialized = atom(false)
+export const initializeLayout = atom(
+  (get) => get(isLayoutInitialized),
+  async (get, set) => {
+    set(isFixed, storage.init('isFixed', false))
+    set(isLayoutInitialized, true)
+  }
+)
+
+export const useInitializeLayout = () => useAtom(initializeLayout)
+
+export const useIsFixed = () => useAtom(handleIsFixed)
+export const useSetIsFixed = () => useSetAtom(handleIsFixed)
+export const useGetIsFixed = () => useGetAtom(handleIsFixed)
+
+export const useWidth = () => useAtom(width)
+export const useSetWidth = () => useSetAtom(width)
+export const useGetWidth = () => useGetAtom(width)
+
+export const useHeight = () => useAtom(height)
+export const useSetHeight = () => useSetAtom(height)
+export const useGetHeight = () => useGetAtom(height)
+
+export const useSize = () => useAtom(size)
+export const useSetSize = () => useSetAtom(size)
+export const useGetSize = () => useGetAtom(size)
+
+export const useIsOversize = () => useAtom(isOversize)
+export const useSetIsOversize = () => useSetAtom(isOversize)
+export const useGetIsOversize = () => useGetAtom(isOversize)
+
+export const useGetMainWidth = () => useGetAtom(mainWidth)
+export const useGetIsMaxWidth = () => useGetAtom(isMaxWidth)
+
+export const useResize = () => {
+
+  const { height: h, width: w } = useWindowDimensions()
+
+  const [size, setSize] = useSize()
+  const [isOversize, setIsOversize] = useIsOversize()
+
+  const setWidth = useSetWidth()
+  const setHeight = useSetHeight()
+
+  useLayoutEffect(() => {
+
+    const bp1 = Number(constants.layout.column_1)
+    const bp2 = Number(constants.layout.column_2)
+    const bp3 = Number(constants.layout.column_3)
+
+    if (w > bp3) {
+      if (size !== '3') setSize('3')
+      if (!isOversize) setIsOversize(true)
+    } else if (w > bp2) {
+      if (size !== '3') setSize('3')
+      if (isOversize) setIsOversize(false)
+    } else if (w > bp1) {
+      if (size !== '2') setSize('2')
+      if (isOversize) setIsOversize(false)
+    } else {
+      if (size !== '1') setSize('1')
+      if (isOversize) setIsOversize(false)
+    }
+
+    setWidth(w)
+    setHeight(h)
+  }, [w, h, size, isOversize, setSize, setIsOversize, setWidth, setHeight])
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Footer.js

@@ -0,0 +1,5 @@
+import { FooterPod } from './Footer.pod.js'
+
+export const Footer = () => {
+    return null
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Footer.pod.js

@@ -0,0 +1,19 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+
+export const FooterPod = ({ }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.footer = [s.row_cXcY, s.Y32]
+    S.links = [s.row_cXcY]
+    S.link = [s.row_cXcY]
+    
+    return (
+        <View classes={S.footer}>
+            <View classes={S.links}>
+
+            </View>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Header.js

@@ -0,0 +1,22 @@
+import { constants } from '#@/root/constants.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { AccountLogo } from '#@/base/account/AccountLogo.js'
+import { Trademark } from '#@/modules/trademarks/Trademark.js'
+import { Logo } from '#@/modules/trademarks/Logo.js'
+import { Back } from '#@/modules/core/Back.js'
+import { HeaderPod } from './Header.pod.js'
+
+export const Header = () => {
+
+    const statics = useGetStatics()
+
+    return (
+        <HeaderPod
+            center={<Trademark />}
+            auth={!constants.services.IS_BUTTON_USER_OFF && <AccountLogo />}
+            back={<Back logo={<Logo/>}/>}
+            logo={!constants.services.IS_BUTTON_USER_OFF && <Logo />}
+            svg={statics.visual.svg.menu}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Header.pod.js

@@ -0,0 +1,37 @@
+import { useStyle } from '#@/style/@use'
+import { View } from '#@/imports/core/View'
+import { Icon } from '#@/modules/core/Icon'
+
+export const HeaderPod = ({ auth, center, back, logo, svg }) => { 
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    H.icon = [[c.base_NN_W700]]
+    
+    S.header = [s.col_sY, s.X, c.base_WW]
+    S.box = [s.row_cY, s.X, s.Y64]
+    S.one = [s.row_sX]
+    S.middle = [s.row_cXcY, s.Xr]
+    S.two = [s.row_eX]
+    S.icon = [s.XY48, s.marginY4, c.item_WW]
+    S.line = [s.Y2, s.Xc, c.base_NN_W700]
+    
+    return (
+        <View classes={S.header}>
+            <View classes={S.box}>
+                <View classes={S.one}>
+                    {back}
+                    {logo}
+                </View>
+                <View classes={S.middle}>
+                    {center}
+                </View>
+                <View classes={S.two}>
+                    {auth}
+                    <Icon classes={S.icon} svg={svg} hover={H.icon}/>
+                </View>
+            </View>
+            <View classes={S.line}/>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Layout.js

@@ -0,0 +1,41 @@
+import { useResize } from '#@/base/layout/@use.js'
+import { constants } from '#@/root/constants.js'
+import { Alerts } from '#@/base/alerts/Alerts.js'
+import { Header } from '#@/base/layout/Header.js'
+import { Footer } from '#@/base/layout/Footer.js'
+import { Callout } from '#@/base/callout/Callout.js'
+import { useGetUser } from '#@/base/account/@use.js'
+import { useGetError } from '#@/base/errors/@use.js'
+import { useWelcome } from '#@/base/cookies/@use.js'
+import { Modals } from '#@/base/modals/Modals.js'
+import { Errors } from '#@/base/errors/Errors.js'
+import { Outlet, useGetUrl } from '#@/imports/router.js'
+import { menus } from '#@/root/menus.js'
+import { SidebarTwo } from '#@/base/layout/sideTwo/SidebarTwo.js'
+import { IconTwo } from '#@/base/layout/sideTwo/IconTwo.js'
+import { LayoutPod } from '#@/base/layout/Layout.pod.js'
+
+export const Layout = () => {
+
+  const user = useGetUser()
+  const error = useGetError()
+  const url = useGetUrl()
+
+  const menu_two = menus.two(url, user)
+
+  useResize()
+  useWelcome()
+
+  return (
+    <LayoutPod
+      alerts={<Alerts />}
+      modals={<Modals />}
+      iconTwo={<IconTwo />}
+      sidebarTwo={<SidebarTwo menu={menu_two} />}
+      header={<Header menuTwo={menu_two} />}
+      body={error.name ? <Errors /> : <Outlet />}
+      footer={<Footer />}
+      callout={constants.services.IS_BAND_CALLOUT_ON && <Callout />}
+    />
+  )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/Layout.pod.js

@@ -0,0 +1,30 @@
+import { useStyle } from '#@/style/@use.js'
+import { Layout } from '#@/imports/animated/Layout.js'
+import { View } from '#@/imports/core/View.js'
+
+export const LayoutPod = ({ sidebarTwo, iconTwo,
+    header, body, footer, callout, alerts, modals, }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.root = [s.col, s.Ymin0,s.XY]
+    S.layout = [s.col, s.Ymin0, s.XY]
+    S.body = [s.col_cX, s.X, s.Yc, s.Ymin0, s.overflowXh, c.base_NN_W750]
+
+    return (
+        <View classes={S.root} inline={I.root}>
+            {modals}
+            {alerts}
+            {iconTwo}
+            {sidebarTwo}
+            <Layout classes={S.layout}>
+                {header}
+                <View classes={S.body}>
+                    {body}
+                </View>
+                {footer}
+                {callout}
+            </Layout>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/menus/@use.js

@@ -0,0 +1,21 @@
+import { uri } from '#@/App.uri.js'
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+import { isSideTwoOn, isSideTwoOpen } from '#@/base/layout/sideTwo/@use.js'
+
+export const menus = atom({})
+
+export const handleMenus = atom(
+    (get) => get(menus),
+    (get, set, newObj) => {
+        const prev = get(menus)
+        set(menus, { ...prev, ...newObj })
+    }
+)
+
+export const useMenus = () => useAtom(handleMenus)
+export const useSetMenus = () => useSetAtom(handleMenus)
+export const useGetMenus = () => useGetAtom(handleMenus)
+
+export const isFrozen = atom((get) => get(isSideTwoOn) && get(isSideTwoOpen))
+export const useGetIsFrozen = () => useGetAtom(isFrozen)
+

package/assets/root.fullstackunicorn.dev/frontend/base/layout/menus/MenuTwo.js

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { useNavigate } from '#@/imports/router.js'
+import { useGetError } from '#@/base/errors/@use.js'
+import { useGetLanguage } from '#@/base/language/@use.js'
+import { useIsSideTwoClosed, useGetIsSideTwoExternal } from '#@/base/layout/sideTwo/@use.js'
+import { MenuLinkTwoPod } from './MenuTwo.pod.js'
+
+export const MenuLinkTwo = ({ linkTo, text, isActive }) => {
+
+    const [isHover, setIsHover] = useState()
+
+    const error = useGetError()
+    const language = useGetLanguage()
+
+    const [isSideTwoClosed, setIsSideTwoClosed] = useIsSideTwoClosed()
+    const isSideTwoExternal = useGetIsSideTwoExternal()
+
+    const navigate = useNavigate()
+
+    const onPress = async () => {
+        if (isSideTwoClosed || !isSideTwoExternal) return
+        navigate(linkTo)
+        setIsSideTwoClosed(true)
+        return true
+    }
+
+    return (
+        <MenuLinkTwoPod
+            isRTL={language.isRTL}
+            isHover={isHover}
+            setIsHover={setIsHover}
+            isError={error.name}
+            onPress={onPress}
+            linkTo={null}
+            text={text}
+            isActive={isActive}
+        />
+    )
+}
+
+export { MenuBoxTwoPod as MenuBoxTwo } from './MenuTwo.pod.js'

package/assets/root.fullstackunicorn.dev/frontend/base/layout/menus/MenuTwo.pod.js

@@ -0,0 +1,38 @@
+import { useStyle } from '#@/style/@use.js'
+import { Textline } from '#@/imports/core/Text.js'
+import { Link } from '#@/modules/core/Link.js'
+import { View } from '#@/imports/core/View.js'
+
+export const MenuLinkTwoPod = ({ linkTo, text, onPress, isActive, isError, isHover, setIsHover, navigateOptions }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    F.text = [s.fs16, s.lh24, s.fw600]
+
+    B.color = isActive || isHover ? c.item_C1_B050 : c.item_NN_B400
+    B.error = isError ? [s.opacity30] : []
+
+    S.line = [s.row_sXcY_r, s.Y40, s.radius32, s.paddingX5, ...B.error]
+    S.text = [...F.text, s.paddingX4, s.Xr, s.noSelect, s.textE, B.color]
+
+    return (
+        <Link
+            classes={S.line}
+            onPress={onPress}
+            linkTo={linkTo}
+            isView={isError}
+            setIsHover={setIsHover}
+            navigateOptions={navigateOptions}
+        >
+            <Textline classes={S.text} font={f.f1} text={text} />
+        </Link>
+    )
+}
+
+export const MenuBoxTwoPod = ({ children }) => {
+    return (
+        <View>
+            {children}
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/sideTwo/@use.js

@@ -0,0 +1,48 @@
+import { atom, useAtom, useSetAtom, useGetAtom } from '#@/imports/npm.js'
+import { constants } from '#@/root/constants.js'
+
+const isDisabled = constants.layout.IS_SIDEBAR_TWO_EXTERNAL_OFF
+
+export const isSideTwoExternal = atom(() => !isDisabled)
+export const useGetIsSideTwoExternal = () => useGetAtom(isSideTwoExternal)
+
+export const isSideTwoOn = atom(false)
+export const isSideTwoOpen = atom(false)
+export const isSideTwoClosed = atom(true)
+
+export const useIsSideTwoOn = () => useAtom(isSideTwoOn)
+export const useSetIsSideTwoOn = () => useSetAtom(isSideTwoOn)
+export const useGetIsSideTwoOn = () => useGetAtom(isSideTwoOn)
+
+export const useIsSideTwoOpen = () => useAtom(isSideTwoOpen)
+export const useSetIsSideTwoOpen = () => useSetAtom(isSideTwoOpen)
+export const useGetIsSideTwoOpen = () => useGetAtom(isSideTwoOpen)
+
+export const useIsSideTwoClosed = () => useAtom(isSideTwoClosed)
+export const useSetIsSideTwoClosed = () => useSetAtom(isSideTwoClosed)
+export const useGetIsSideTwoClosed = () => useGetAtom(isSideTwoClosed)
+
+export const useSetSideTwoOn = () => {
+  const setOn = useSetIsSideTwoOn()
+  const setOpen = useSetIsSideTwoOpen()
+  const setClosed = useSetIsSideTwoClosed()
+  return () => {
+    setOn(true)
+    setOpen(true)
+    setClosed(true)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setClosed(false))
+    })
+  }
+}
+
+export const useSetSideTwoOff = () => {
+  const setOn = useSetIsSideTwoOn()
+  const setOpen = useSetIsSideTwoOpen()
+  const setClosed = useSetIsSideTwoClosed()
+  return () => {
+    setOn(false)
+    setOpen(false)
+    setClosed(true)
+  }
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/sideTwo/IconTwo.js

@@ -0,0 +1,30 @@
+import { useGetIsSideTwoOn, useGetIsSideTwoOpen, useIsSideTwoClosed, useSetSideTwoOn } from '#@/base/layout/sideTwo/@use.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { IconTwoPod } from '#@/base/layout/sideTwo/IconTwo.pod.js'
+
+export const IconTwo = () => {
+
+    const statics = useGetStatics()
+
+    const isSideTwoOn = useGetIsSideTwoOn()
+    const isSideTwoOpen = useGetIsSideTwoOpen()
+    const [isSideTwoClosed, setIsSideTwoClosed] = useIsSideTwoClosed()
+
+    const setOn = useSetSideTwoOn()
+
+    const isTransition = isSideTwoOpen && isSideTwoClosed
+
+    const onClickSideTwo = () => {
+        if (isTransition) return
+        if (!isSideTwoOn) setOn() 
+        else setIsSideTwoClosed(true)
+    }
+
+    return (
+        <IconTwoPod
+            svg={statics.visual.svg.menu}
+            onPress={onClickSideTwo}
+            isOn={isSideTwoOn}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/sideTwo/IconTwo.pod.js

@@ -0,0 +1,22 @@
+
+import { useStyle } from '#@/style/@use.js'
+import { View } from '#@/imports/core/View.js'
+import { Icon } from '#@/modules/core/Icon.js'
+
+export const IconTwoPod = ({ svg, onPress, isOn }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    H.icon = [[c.base_NN_W700]]
+
+    B.isOn = isOn ? s.Z10 : s.Z1
+
+    S.iconBox = [s.absolute, s.row_cXcY, s.X48, s.Y64, s.end0, B.isOn]
+    S.icon = [s.XY40, s.marginX4, s.marginY12, s.radius32, c.item_NN_B600]
+    
+    return (
+        <View classes={S.iconBox}>
+            <Icon classes={S.icon} svg={svg} onPress={onPress} hover={H.icon}/>
+        </View>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/sideTwo/SidebarTwo.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react'
+import { vars } from '#@/imports/animated/Layout.vars.js'
+import { constants } from '#@/root/constants.js'
+import { useGetIsSideTwoOn, useGetIsSideTwoOpen, useIsSideTwoClosed, useSetSideTwoOff } from '#@/base/layout/sideTwo/@use.js'
+import { SidebarTwoPod } from '#@/base/layout/sideTwo/SidebarTwo.pod.js'
+
+export const SidebarTwo = ({ menu }) => {
+
+    const isSideTwoOn = useGetIsSideTwoOn()
+    const isSideTwoOpen = useGetIsSideTwoOpen()
+    const [isSideTwoClosed, setIsSideTwoClosed] = useIsSideTwoClosed()
+    const setSideTwoOff = useSetSideTwoOff()
+
+    const isDisabled = constants.layout.IS_SIDEBAR_TWO_EXTERNAL_OFF
+
+    const timerRef = useRef(null)
+    const isOpen = isSideTwoOpen
+    const isClosed = isSideTwoClosed
+
+    useEffect(() => {
+        if (!isSideTwoOn) return
+        if (!(isOpen && isClosed)) return
+
+        if (timerRef.current) clearTimeout(timerRef.current)
+        timerRef.current = setTimeout(() => {
+            setSideTwoOff()
+            timerRef.current = null
+        }, vars.duration + 100)
+
+        return () => {
+            if (timerRef.current) clearTimeout(timerRef.current)
+            timerRef.current = null
+        }
+    }, [isSideTwoOn, isOpen, isClosed, vars.duration, setSideTwoOff])
+
+    if (isDisabled) return null
+    if (!isSideTwoOn) return null
+
+    return (
+        <SidebarTwoPod
+            menu={menu}
+            isClosed={isClosed}
+            onPress={() => setIsSideTwoClosed(true)}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/layout/sideTwo/SidebarTwo.pod.js

@@ -0,0 +1,29 @@
+
+import { useStyle } from '#@/style/@use.js'
+import { Overlay, SidebarExternal } from '#@/imports/animated/Layout.js'
+import { View } from '#@/imports/core/View.js'
+import { Pressable } from '#@/imports/core/Pressable.js'
+
+export const SidebarTwoPod = ({ isClosed, menu, onPress }) => {
+
+    const { s, c, f, t, F, B, S, I, H } = useStyle()
+
+    S.overlay = [s.col, s.absolute, s.overflowXYh, s.X, s.Y, s.Z4, s.flex1]
+    S.main = [s.row_sX_r, s.Xc,  s.Yc,]
+    S.external = [s.col, s.Xmax320, s.G100, s.paddingX8, c.base_WW]
+    S.header = [s.col_cY, s.Y64, s.paddingX4, s.Xc, c.base_WW]
+    S.bodyExt = [s.col, s.Yc, s.X, s.paddingX4]
+    S.space = [s.row, s.Xmin16, s.XYr]
+
+    return (
+        <Overlay classes={S.overlay} isClosed={isClosed}>
+            <View classes={S.main}>
+                <SidebarExternal classes={S.external}>
+                    <View classes={S.header}></View>
+                    <View classes={S.bodyExt}>{menu}</View>
+                </SidebarExternal>
+                <Pressable classes={S.space} onPress={onPress}/>
+            </View>
+        </Overlay>
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/legals/LegalCard.js

@@ -0,0 +1,17 @@
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { Linker } from '#@/panels/cards/Linker.js'
+
+export const LegalCard = ({ title, description, label, linkTo }) => {
+
+    const statics = useGetStatics()
+
+    return (
+        <Linker 
+            svg={{logo:statics.visual.svg.terms, action:statics.visual.svg.arrowChevronRight}}
+            title={title}
+            description={description}
+            label={label}
+            linkTo={linkTo}
+        />
+    )
+}

package/assets/root.fullstackunicorn.dev/frontend/base/legals/LegalsCard.js

@@ -0,0 +1,20 @@
+import { routes } from '#@/root/routes.js'
+import { useUrl } from '#@/base/router/@use.js'
+import { useGetStatics } from '#@/base/statics/@use.js'
+import { Linker } from '#@/panels/cards/Linker.js'
+
+export const LegalsCard = ({ api={} }) => {
+
+    const statics = useGetStatics()
+    const { lang } = useUrl()
+
+    return (
+        <Linker 
+            svg={{logo:statics.visual.svg.terms, action:statics.visual.svg.arrowChevronRight}}
+            title={api.title}
+            description={api.description}
+            label={api.label}
+            linkTo={F3.fabUrl(routes.public.legals.path, { lang })}
+        />
+    )
+}