feat: feature/mvp-sprint-1 Added type settings menu dropdown

remix/app/components/Icon/Icon.tsx

@@ -18,6 +18,9 @@ export const Icon = (props) => {
     if (["sparke", "magic"]?.includes(name)) {
       return "✨"
     }
+    if (["wizard", "gandalf"]?.includes(name)) {
+      return "🧙‍♂️"
+    }
     if (["box", "thing", "object"]?.includes(name)) {
       return "📦"
     }
@@ -30,6 +33,9 @@ export const Icon = (props) => {
     if (["book", "books"]?.includes(name)) {
       return "📚"
     }
+    if (["any", "magic wand"]?.includes(name)) {
+      return "🪄"
+    }
     if (["book-open", "books-open"]?.includes(name)) {
       return "📖"
     }
@@ -39,6 +45,9 @@ export const Icon = (props) => {
     if (["number", "hundred"]?.includes(name)) {
       return "💯"
     }
+    if (["puzzle", "types"]?.includes(name)) {
+      return "🧩"
+    }
     if (["heart"]?.includes(name)) {
       return "❤️"
     }
@@ -162,6 +171,9 @@ export const Icon = (props) => {
     if (["money bag"]?.includes(name)) {
       return "💰"
     }
+    if (["cyclone", "tornado"]?.includes(name)) {
+      return "🌀"
+    }
     if (["thingtime"]?.includes(name)) {
       if (Math.random() > 0.5) {
         return "🌳"

remix/app/components/Thingtime/SettingsMenu.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react"
+import { Center, Flex, Text } from "@chakra-ui/react"
+
+import { Icon } from "../Icon/Icon"
+
+export const SettingsMenu = (props) => {
+  const [show, setShow] = useState(false)
+
+  const showMenu = React.useCallback(() => {
+    setShow(true)
+  }, [])
+
+  const hideMenu = React.useCallback(() => {
+    setShow(false)
+  }, [])
+
+  const basePadding = React.useMemo(() => {
+    return 4
+  }, [])
+
+  const types = React.useMemo(() => {
+    const ret = ["any", "object", "array", "string", "number", "boolean"]
+    return ret
+  }, [])
+
+  const onChangeType = React.useCallback(
+    (type) => {
+      props?.onChangeType?.(type)
+    },
+    [props?.onChangeType]
+  )
+
+  const iconSize = 10
+
+  return (
+    <Center
+      position="relative"
+      opacity={props?.opacity}
+      transition={props?.transition || "all 0.2s ease-in-out"}
+      onMouseEnter={showMenu}
+      onMouseLeave={hideMenu}
+    >
+      <Flex
+        paddingLeft={1}
+        // opacity={showContextIcon ? 1 : 0}
+        cursor="pointer"
+        transition="all 0.2s ease-in-out"
+        // onClick={deleteValue}
+      >
+        <Icon name="wizard" size={7}></Icon>
+      </Flex>
+      <Flex
+        position="absolute"
+        zIndex={999}
+        top="100%"
+        left={0}
+        flexDirection="column"
+        opacity={show ? 1 : 0}
+        pointerEvents={show ? "all" : "none"}
+      >
+        <Flex
+          flexDirection="column"
+          // rowGap={basePadding / 3}
+          background="greys.lightt"
+          borderRadius={4}
+          boxShadow={props?.boxShadow || "0px 2px 7px 0px rgba(0,0,0,0.2)"}
+          cursor="pointer"
+          paddingY={basePadding}
+        >
+          <Flex
+            alignItems="center"
+            flexDirection="row"
+            _hover={{
+              background: "greys.light",
+            }}
+            paddingX={basePadding * 1}
+            paddingY={basePadding / 2}
+          >
+            <Icon marginBottom="-2px" name="cyclone" size={iconSize}></Icon>
+            <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
+              Types
+            </Text>
+          </Flex>
+          <Flex
+            flexDirection="column"
+            // rowGap={basePadding}
+            background="greys.lightt"
+            cursor="pointer"
+          >
+            {types.map((type, idx) => {
+              const ret = (
+                <Flex
+                  key={props?.uuid + props?.fullPath + "-type-menu-" + idx}
+                  width="100%"
+                  _hover={{
+                    "&>div": {
+                      background: "greys.light",
+                    },
+                  }}
+                  onClick={() => onChangeType(type?.key || type)}
+                  paddingY={1}
+                >
+                  <Flex
+                    alignItems="center"
+                    flexDirection="row"
+                    width="100%"
+                    paddingX={basePadding * 2}
+                    paddingY={basePadding / 2}
+                  >
+                    <Icon
+                      marginBottom="-2px"
+                      name={type?.icon || type?.key || type?.label || type}
+                      size={iconSize}
+                    ></Icon>
+                    <Text marginTop="-2px" paddingLeft={2} fontSize="xs">
+                      {type?.label || type?.key || type}
+                    </Text>
+                  </Flex>
+                </Flex>
+              )
+              return ret
+            })}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Center>
+  )
+}

remix/app/components/Thingtime/Thingtime.tsx

@@ -21,6 +21,7 @@ import { Commander } from "../Commander/Commander"
 import { Icon } from "../Icon/Icon"
 import { MagicInput } from "../MagicInput/MagicInput"
 import { Safe } from "../Safety/Safe"
+import { SettingsMenu } from "./SettingsMenu"
 import { useThingtime } from "./useThingtime"
 
 import { getThing } from "~/smarts"
@@ -370,6 +371,33 @@ export const Thingtime = (props) => {
     updateValue({ value: null })
   }, [updateValue])
 
+  const onChangeType = React.useCallback(
+    (type) => {
+      const newType = type?.key || type?.value || type
+
+      if (newType === "object") {
+        updateValue({ value: {} })
+      } else if (newType === "array") {
+        updateValue({ value: [] })
+      } else if (newType === "string") {
+        updateValue({ value: "" })
+      } else if (newType === "number") {
+        updateValue({ value: 0 })
+      } else if (newType === "boolean") {
+        updateValue({ value: false })
+      } else if (newType === "undefined") {
+        updateValue({ value: undefined })
+      } else if (newType === "null") {
+        updateValue({ value: null })
+      } else if (newType === "any") {
+        updateValue({ value: null })
+      } else {
+        console.error("Unknown type", newType)
+      }
+    },
+    [updateValue]
+  )
+
   const deleteValue = React.useCallback(() => {
     // use parent path to clone parent object but without this key
     const clone = { ...parent }
@@ -659,6 +687,13 @@ export const Thingtime = (props) => {
                 >
                   <Icon name="magic" size={9}></Icon>
                 </Flex>
+                <SettingsMenu
+                  transition="all 0.2s ease-in-out"
+                  opacity={showContextIcon ? 1 : 0}
+                  uuid={uuid}
+                  fullPath={fullPath}
+                  onChangeType={onChangeType}
+                ></SettingsMenu>
                 <Flex
                   paddingLeft={1}
                   opacity={showContextIcon ? 1 : 0}