feat: feature/mvp-sprint-1 Added editable number using chakra number input field

remix/app/Providers/Chakra/theme.tsx

@@ -1,4 +1,13 @@
-import { extendTheme, Select, Switch } from "@chakra-ui/react"
+import {
+  extendTheme,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  Select,
+  Switch,
+} from "@chakra-ui/react"
 
 import { colors } from "./colors"
 
@@ -83,6 +92,14 @@ export const theme = extendTheme({
         },
       },
     },
+    NumberInput: {
+      baseStyle: {
+        field: {
+          width: "auto",
+          // border: "none",
+        },
+      },
+    },
   },
 })
 
@@ -105,3 +122,31 @@ Select.defaultProps = {
     paddingInlineEnd: "24px",
   },
 }
+
+NumberInput.defaultProps = {
+  ...NumberInput.defaultProps,
+  variant: "unstyled",
+}
+
+NumberInputField.defaultProps = {
+  ...NumberInputField.defaultProps,
+  height: "100%",
+  pr: 3,
+  fontSize: "inherit",
+  // variant: "unstyled",
+}
+
+NumberInputStepper.defaultProps = {
+  ...NumberInputStepper.defaultProps,
+  border: "none",
+  color: "grays.medium",
+}
+
+NumberIncrementStepper.defaultProps = {
+  ...NumberIncrementStepper.defaultProps,
+  border: "none",
+}
+NumberDecrementStepper.defaultProps = {
+  ...NumberDecrementStepper.defaultProps,
+  border: "none",
+}

remix/app/components/Commander/Commander.tsx

@@ -220,6 +220,7 @@ export const Commander = (props) => {
   const allCommanderKeyListener = React.useCallback(
     (e: any) => {
       console.log("commander key listener e?.code", e?.code)
+      thingtimeRef.current = thingtime
       if (e?.metaKey && e?.code === "KeyP") {
         e.preventDefault()
         e.stopPropagation()
@@ -331,6 +332,8 @@ export const Commander = (props) => {
       hoveredSuggestion,
       selectSuggestion,
       suggestions,
+      thingtime,
+      thingtimeRef,
       commanderActive,
       commandIsAction,
       commandContainsPath,

remix/app/components/Thingtime/Thingtime.tsx

@@ -1,5 +1,16 @@
 import React from "react"
-import { Box, Flex, Select, Switch } from "@chakra-ui/react"
+import {
+  Box,
+  Flex,
+  Input,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  Select,
+  Switch,
+} from "@chakra-ui/react"
 
 import { Icon } from "../Icon/Icon"
 import { Safe } from "../Safety/Safe"
@@ -214,6 +225,7 @@ export const Thingtime = (props) => {
       return (
         <Flex
           flexDirection="row"
+          flexShrink={1}
           paddingLeft={pl}
           fontSize="20px"
           border="none"
@@ -261,16 +273,41 @@ export const Thingtime = (props) => {
             >
               <Switch colorScheme="red" isChecked={thing}></Switch>
             </Box>
-            {/* <Select
+          </AtomicWrapper>
-              width="auto"
+        )
-              marginRight="auto"
+      }
-              paddingStart={0}
+      if (type === "number") {
-              paddingX={0}
+        const numberPxLength = thing?.toString()?.length * 13 + 30
-            >
+        return (
-              {renderableValue}
+          <AtomicWrapper>
-              <option value="true">true</option>
+            <Flex>
-              <option value="false">false</option>
+              <NumberInput
-            </Select> */}
+                alignItems="center"
+                justifyContent="center"
+                onChange={(value) => {
+                  setTimeout(() => {
+                    try {
+                      const number = Number(value)
+                      console.log("typeof number", typeof number)
+                      updateValue({ value: number })
+                    } catch {
+                      // something went wrong casting to number
+                    }
+                  }, 1)
+                }}
+                value={thing}
+              >
+                <NumberInputField width={numberPxLength + "px"} />
+                <NumberInputStepper transform="scale(0.9)">
+                  <NumberIncrementStepper
+                  // transform="scale(0.7)"
+                  />
+                  <NumberDecrementStepper
+                  // transform="scale(0.7)"
+                  />
+                </NumberInputStepper>
+              </NumberInput>
+            </Flex>
           </AtomicWrapper>
         )
       }
@@ -372,7 +409,8 @@ export const Thingtime = (props) => {
             <Flex>{pathDom}</Flex>
             {props?.edit && (
               <Box
-                marginTop={-3}
+                // marginTop={-3}
+                marginTop={-1}
                 paddingLeft={1}
                 opacity={0.5}
                 cursor="pointer"