feat: feature/mvp-sprint-1 Added render mode and chakra type detecting in render mode

remix/app/components/Icon/Icon.tsx

@@ -21,6 +21,9 @@ export const Icon = (props) => {
     if (["wizard", "gandalf"]?.includes(name)) {
       return "🧙‍♂️"
     }
+    if (["two eyes"]?.includes(name)) {
+      return "👀"
+    }
     if (["box", "thing", "object"]?.includes(name)) {
       return "📦"
     }

remix/app/components/Nav/Nav.tsx

@@ -19,6 +19,13 @@ export const Nav = (props) => {
     setProfileDrawerOpen(!profileDrawerOpen)
   }, [profileDrawerOpen])
 
+  const inEditorMode = React.useMemo(() => {
+    if (pathname.slice(0, 7) === "/editor") {
+      return true
+    }
+    return false
+  }, [pathname])
+
   const inEditMode = React.useMemo(() => {
     if (pathname.slice(0, 5) === "/edit") {
       return true
@@ -35,7 +42,7 @@ export const Nav = (props) => {
     return false
   }, [pathname])
 
-  const toggleEditor = React.useCallback(
+  const toggleEdit = React.useCallback(
     (e) => {
       // if first characters of pathname are /things replace with /edit
       // or if first characters of pathname are /edit replace with /things
@@ -50,6 +57,21 @@ export const Nav = (props) => {
     [pathname, navigate]
   )
 
+  const toggleEditor = React.useCallback(
+    (e) => {
+      // if first characters of pathname are /things replace with /edit
+      // or if first characters of pathname are /edit replace with /things
+      if (pathname.slice(0, 7) === "/editor") {
+        const newPathname = pathname.replace("/editor", "/edit")
+        navigate(newPathname)
+      } else if (pathname.slice(0, 5) === "/edit") {
+        const newPathname = pathname.replace("/edit", "/editor")
+        navigate(newPathname)
+      }
+    },
+    [pathname, navigate]
+  )
+
   return (
     <>
       <Box
@@ -95,9 +117,28 @@ export const Nav = (props) => {
           >
             {editorToggleable && (
               <Center
-                transform="scaleX(-100%)"
+                // transform="scaleX(-100%)"
                 cursor="pointer"
                 onClick={toggleEditor}
+              >
+                <Icon
+                  chakras={{
+                    opacity: inEditorMode ? 1 : 0.3,
+                  }}
+                  size="12px"
+                  name="two eyes"
+                ></Icon>
+                {/* <Icon
+                  size="12px"
+                  name={inEditorMode ? "glowing star" : "star"}
+                ></Icon> */}
+              </Center>
+            )}
+            {editorToggleable && (
+              <Center
+                transform="scaleX(-100%)"
+                cursor="pointer"
+                onClick={toggleEdit}
               >
                 <Icon
                   chakras={{

remix/app/components/Thingtime/Thingtime.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import ContentEditable from "react-contenteditable"
+import * as Chakras from "@chakra-ui/react"
 import {
   Box,
   Center,
@@ -42,15 +43,43 @@ export const Thingtime = (props) => {
   const editValueRef = React.useRef({})
 
   const depth = React.useMemo(() => {
-    return props?.depth || 1
+    return typeof props?.depth === "number" ? props?.depth : 0
   }, [props?.depth])
 
+  const render = React.useMemo(() => {
+    return props?.render || false
+  }, [props?.render])
+
+  const width = React.useMemo(() => {
+    if (props?.width) {
+      return props?.width
+    }
+    if (props?.w) {
+      return props?.w
+    }
+    if (render) {
+      return "auto"
+    }
+    return "100%"
+  }, [props?.width, props?.w, render])
+
+  const chakras = React.useMemo(() => {
+    if (!props?.edit && props?.chakra) {
+      return true
+    }
+    return false
+  }, [props?.edit, props?.chakra])
+
   const pl = React.useMemo(() => {
+    if (!props.edit && chakras) {
+      return [0]
+    }
+
     return props?.pl || [4, 6]
-  }, [props?.pl])
+  }, [props?.pl, props?.edit, chakras])
 
   const pr = React.useMemo(() => {
-    return props?.pr || (depth === 1 ? [4, 6] : 0)
+    return props?.pr || (depth === 0 ? [4, 6] : 0)
   }, [props?.pr, depth])
 
   const multiplyPl = React.useCallback(
@@ -109,6 +138,10 @@ export const Thingtime = (props) => {
     return props.thing
   }, [props.thing, childrenRef.current])
 
+  const chakra = React.useMemo(() => {
+    return !props?.edit && typeof thing?.chakra === "string" && thing?.chakra
+  }, [thing?.chakra, props?.edit])
+
   const path = React.useMemo(() => {
     return props?.path?.key || props?.path || ""
   }, [props?.path])
@@ -215,6 +248,10 @@ export const Thingtime = (props) => {
   }, [props?.valuePl, props?.path])
 
   const renderableValue = React.useMemo(() => {
+    if (chakras) {
+      return null
+    }
+
     if (type === "string") {
       return <MagicInput value={thing} readonly></MagicInput>
     } else if (type === "number") {
@@ -248,11 +285,15 @@ export const Thingtime = (props) => {
     } else {
       return "Something.."
     }
-  }, [thing, thingDep, type, keys])
+  }, [thing, thingDep, type, chakras, keys])
 
   const keysToUse = React.useMemo(() => {
+    if (!props?.edit && chakra) {
+      return ["children"]
+    }
+
     return keys
-  }, [keys])
+  }, [chakra, keys, props?.edit])
   // const keysToUse = flattenedKeys
 
   const template1Modes = React.useMemo(() => {
@@ -262,19 +303,20 @@ export const Thingtime = (props) => {
   const AtomicWrapper = React.useCallback((args) => {
     return (
       <Flex
+        className="atomic-wrapper"
         position="relative"
         flexDirection="row"
         flexShrink={1}
         width="100%"
         paddingLeft={args?.pl || args?.paddingLeft}
         fontSize="20px"
-        border="none"
         // whiteSpace="pre-line"
+        border="none"
         whiteSpace="pre-wrap"
         wordBreak={args?.wordBreak || "break-word"}
-        outline="none"
         // paddingY={2}
         // dangerouslySetInnerHTML={{ __html: renderableValue }}
+        outline="none"
       >
         {args?.children}
       </Flex>
@@ -308,12 +350,14 @@ export const Thingtime = (props) => {
                   key={idx}
                   seen={nextSeen}
                   edit={props?.edit}
+                  render={render}
                   circular={seen?.includes?.(nextThing)}
                   depth={depth + 1}
                   parent={thing}
                   notRoot
                   fullPath={fullPath + "." + key?.key}
                   path={key}
+                  chakra={chakra}
                   thing={nextThing}
                   // thing={{ infinite: { yes: true } }}
                   valuePl={pl}
@@ -324,6 +368,35 @@ export const Thingtime = (props) => {
       )
     }
     if (type === "object" && !circular) {
+      if (chakra) {
+        console.log("nik Chakras", Chakras)
+        const ChakraComponent = Chakras[chakra]
+
+        console.log("Thingtime is chakra", fullPath, chakra)
+
+        try {
+          if (ChakraComponent) {
+            console.log(
+              "Thingtime found ChakraComponent",
+              fullPath,
+              ChakraComponent
+            )
+            console.log("Thingtime found thing?.props", fullPath, thing?.props)
+
+            const ret = (
+              <Safe {...props}>
+                <ChakraComponent {...(thing?.props || {})}>
+                  {inner}
+                </ChakraComponent>
+              </Safe>
+            )
+            return ret
+          }
+        } catch {
+          // chakra error
+        }
+      }
+
       return (
         <Safe {...props}>
           <Flex
@@ -348,7 +421,9 @@ export const Thingtime = (props) => {
     circular,
     seen,
     type,
+    chakra,
     fullPath,
+    render,
     depth,
     thing,
     thingDep,
@@ -563,6 +638,10 @@ export const Thingtime = (props) => {
   }, [humanPath, props?.edit])
 
   const pathDom = React.useMemo(() => {
+    if (chakras) {
+      return <></>
+    }
+
     if (renderedPath) {
       return (
         <>
@@ -579,7 +658,7 @@ export const Thingtime = (props) => {
         </>
       )
     }
-  }, [renderedPath, pl, props?.edit, props?.pathPl])
+  }, [renderedPath, pl, chakras, props?.edit, props?.pathPl])
 
   const handleMouseEvent = React.useCallback(
     (e) => {
@@ -619,6 +698,10 @@ export const Thingtime = (props) => {
 
   const [showContextIcon, setShowContextIcon] = React.useState(false)
 
+  // if (render && depth >= 1) {
+  //   return thingtimeChildren
+  // }
+
   return (
     <Safe {...props} depth={depth} uuid={uuid}>
       <Flex
@@ -626,7 +709,7 @@ export const Thingtime = (props) => {
         flexDirection="column"
         // width="500px"
         rowGap={2}
-        width={props?.width || props?.w || "100%"}
+        width={width}
         maxWidth="100%"
         // marginTop={3}
         paddingRight={pr}
@@ -634,58 +717,67 @@ export const Thingtime = (props) => {
         onMouseEnter={handleMouseEvent}
         onMouseLeave={handleMouseEvent}
         {...(props.chakras || {})}
-        className={`thing uuid-${uuid}`}
+        className={`thing uuid-${uuid} edit-${props?.edit ? "true" : "false"}`}
         data-path={props?.path}
       >
         {/* {uuid?.current} */}
-        <Flex position="relative" flexDirection="row">
-          <Flex
-            alignItems="center"
-            flexDirection="row"
-            marginRight="auto"
-            onMouseEnter={() => setShowContextIcon(true)}
-            onMouseLeave={() => setShowContextIcon(false)}
-          >
-            <Flex>{pathDom}</Flex>
-            {props?.edit && (
-              <Box
-                // marginTop={-3}
-                marginTop={-1}
-                paddingLeft={1}
-                opacity={0.5}
-                cursor="pointer"
-              >
-                {typeIcon}
-              </Box>
-            )}
-            {pathDom && (
-              <Flex
-                flexDirection="row"
-                columnGap={1}
-                marginTop={-1}
-                paddingLeft={1}
-              >
-                <SettingsMenu
-                  transition="all 0.2s ease-in-out"
-                  opacity={showContextIcon ? 1 : 0}
-                  uuid={uuid}
-                  fullPath={fullPath}
-                  readonly={!props?.edit}
-                  onChangeType={onChangeType}
-                  onDelete={deleteValue}
-                ></SettingsMenu>
-              </Flex>
-            )}
+        {!chakras && (
+          <Flex position="relative" flexDirection="row">
+            <Flex
+              alignItems="center"
+              flexDirection="row"
+              marginRight="auto"
+              onMouseEnter={() => setShowContextIcon(true)}
+              onMouseLeave={() => setShowContextIcon(false)}
+            >
+              <Flex>{pathDom}</Flex>
+              {props?.edit && (
+                <Box
+                  // marginTop={-3}
+                  marginTop={-1}
+                  paddingLeft={1}
+                  opacity={0.5}
+                  cursor="pointer"
+                >
+                  {typeIcon}
+                </Box>
+              )}
+              {pathDom && (
+                <Flex
+                  flexDirection="row"
+                  columnGap={1}
+                  marginTop={-1}
+                  paddingLeft={1}
+                >
+                  <SettingsMenu
+                    transition="all 0.2s ease-in-out"
+                    opacity={showContextIcon ? 1 : 0}
+                    uuid={uuid}
+                    fullPath={fullPath}
+                    readonly={!props?.edit}
+                    onChangeType={onChangeType}
+                    onDelete={deleteValue}
+                  ></SettingsMenu>
+                </Flex>
+              )}
+            </Flex>
           </Flex>
-        </Flex>
+        )}
         {/* {showContextMenu && contextMenu} */}
         {!loading && !thingtimeChildren && atomicValue && (
-          <Box className="atomicValue">{atomicValue}</Box>
+          <Box className="atomicValue" width={render ? "auto" : ""}>
+            {atomicValue}
+          </Box>
         )}
         {!loading && thingtimeChildren && (
-          <Box className="thingtimeChildren">
+          <Box
+            className="thingtimeChildren"
+            flexGrow={0}
+            flexShrink={1}
+            width={render ? "auto" : ""}
+          >
             {thingtimeChildren}
-            {type === "object" && (
+            {!render && type === "object" && (
               <Flex
                 width="100%"
                 paddingLeft={multiplyPl(2)}

remix/app/components/Thingtime/ThingtimeURL.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Flex } from "@chakra-ui/react"
-import { useMatches } from "@remix-run/react"
+import { useLocation, useMatches } from "@remix-run/react"
 
 import { Thingtime } from "./Thingtime"
 import { useThingtime } from "./useThingtime"
@@ -8,13 +8,28 @@ import { useThingtime } from "./useThingtime"
 export const ThingtimeURL = (props) => {
   const { getThingtime } = useThingtime()
 
+  const { pathname } = useLocation()
+
   const matches = useMatches()
   const location = React.useMemo(() => {
     return matches[matches.length - 1]
   }, [matches])
 
   const path = React.useMemo(() => {
-    const pathPartOne = location?.params?.["*"]
+    console.log("nik location", location)
+
+    // const sanitisation = ["/things", "/edit", "/editor", "/code", "/coder"]
+
+    // // strip the leading /path1/path2 path1 section from the path
+    // let pathPartOne = location?.pathname?.split("/")[2]
+
+    // // remove all sanitsation strings from path
+    // sanitisation.forEach((sanitisationString) => {
+    //   pathPartOne = pathPartOne?.replace(sanitisationString, "")
+    // })
+
+    // strip the leading /path1/path2 path1 section from the path
+    const pathPartOne = location?.pathname?.split("/")[2]
 
     const path = pathPartOne?.replace(/\//g, ".")
 
@@ -29,15 +44,39 @@ export const ThingtimeURL = (props) => {
     return ret
   }, [path, getThingtime])
 
+  const inEditorMode = React.useMemo(() => {
+    if (pathname.slice(0, 7) === "/editor") {
+      return true
+    }
+    return false
+  }, [pathname])
+
+  const inEditMode = React.useMemo(() => {
+    if (pathname.slice(0, 5) === "/edit") {
+      return true
+    }
+    return false
+  }, [pathname])
+
   return (
     <Flex
-      alignItems="center"
+      alignItems={inEditorMode ? "flex-start" : "center"}
       justifyContent="center"
-      flexDirection="column"
+      flexDirection={inEditorMode ? "row" : "column"}
       maxWidth="100%"
     >
+      {inEditorMode && (
+        <Thingtime
+          path={path}
+          thing={thing}
+          render
+          chakra
+          chakras={{ marginY: 200 }}
+          width="600px"
+        ></Thingtime>
+      )}
       <Thingtime
-        edit={props?.edit}
+        edit={inEditMode}
         path={path}
         thing={thing}
         chakras={{ marginY: 200 }}

remix/app/routes/code/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL code></ThingtimeURL>
-}

remix/app/routes/code/edit/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL edit code></ThingtimeURL>
-}

remix/app/routes/edit/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL edit></ThingtimeURL>
-}

remix/app/routes/edit/code/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL code edit></ThingtimeURL>
-}

remix/app/routes/things/code/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL code></ThingtimeURL>
-}

remix/app/routes/things/code/edit/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL edit code></ThingtimeURL>
-}

remix/app/routes/things/edit/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL edit></ThingtimeURL>
-}

remix/app/routes/things/edit/code/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL code edit></ThingtimeURL>
-}