From 39a0973b7c9f6defc2010309f98e1075882cbdcc Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Sat, 22 Jul 2023 00:32:08 +1000
Subject: [PATCH] feat: feature/mvp-sprint-1 Added editable number using chakra
 number input field

---
 remix/app/Providers/Chakra/theme.tsx         | 47 ++++++++++++++-
 remix/app/components/Commander/Commander.tsx |  3 +
 remix/app/components/Thingtime/Thingtime.tsx | 62 ++++++++++++++++----
 3 files changed, 99 insertions(+), 13 deletions(-)

diff --git a/remix/app/Providers/Chakra/theme.tsx b/remix/app/Providers/Chakra/theme.tsx
index 43567f3..bd09e95 100644
--- a/remix/app/Providers/Chakra/theme.tsx
+++ b/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",
+}
diff --git a/remix/app/components/Commander/Commander.tsx b/remix/app/components/Commander/Commander.tsx
index d0bd627..f6a0300 100644
--- a/remix/app/components/Commander/Commander.tsx
+++ b/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,
diff --git a/remix/app/components/Thingtime/Thingtime.tsx b/remix/app/components/Thingtime/Thingtime.tsx
index 8e71c5a..b424833 100644
--- a/remix/app/components/Thingtime/Thingtime.tsx
+++ b/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
-              width="auto"
-              marginRight="auto"
-              paddingStart={0}
-              paddingX={0}
-            >
-              {renderableValue}
-              <option value="true">true</option>
-              <option value="false">false</option>
-            </Select> */}
+          </AtomicWrapper>
+        )
+      }
+      if (type === "number") {
+        const numberPxLength = thing?.toString()?.length * 13 + 30
+        return (
+          <AtomicWrapper>
+            <Flex>
+              <NumberInput
+                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"