fix!(SpacesProps): make closely with chakra-ui props value for spaces

r17x · r17x · commit 72a2ac2dc5d7 · 2021-10-03T10:47:07.000+08:00
diff --git a/examples/app.js b/examples/app.js
@@ -271,7 +271,7 @@ var TextAndHeading = {
 };
 
 function App$MarginAndProps(Props) {
-  return React.createElement(React.Fragment, undefined, React.createElement(React$1.Box, Curry.app(Chakra__Box.makeProps("two", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)("Tomato", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined), [
+  return React.createElement(React.Fragment, undefined, React.createElement(React$1.Box, Curry.app(Chakra__Box.makeProps(2, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)("Tomato", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined), [
                       undefined,
                       undefined,
                       undefined,
@@ -439,8 +439,8 @@ function App$MarginAndProps(Props) {
                     ])), React.createElement(React$1.Box, Curry.app(Chakra__Box.makeProps({
                             NAME: "array",
                             VAL: [
-                              "two",
-                              "three"
+                              2,
+                              3
                             ]
                           }, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined), [
                       undefined,
@@ -534,7 +534,7 @@ function App$LayoutWidthHeight(Props) {
   return React.createElement(React.Fragment, undefined, React.createElement(React$1.Box, Curry.app(Chakra__Box.makeProps(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, {
                             NAME: "percent",
                             VAL: 100
-                          }, undefined, undefined, undefined, undefined, undefined, "thirtytwo", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined), [
+                          }, undefined, undefined, undefined, undefined, undefined, 32, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined), [
                       undefined,
                       undefined,
                       undefined,
@@ -783,7 +783,7 @@ function App$LayoutWidthHeight(Props) {
                       undefined,
                       undefined,
                       undefined
-                    ])), React.createElement(React$1.Box, Curry.app(Chakra__Box.makeProps(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, "zeroP", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined), [
+                    ])), React.createElement(React$1.Box, Curry.app(Chakra__Box.makeProps(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, "0.5", undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined)(undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined), [
                       undefined,
                       undefined,
                       undefined,
diff --git a/examples/app.res b/examples/app.res
@@ -15,11 +15,11 @@ module MarginAndProps = {
   @react.component
   let make = () => <>
     // m={2} refers to the value of `theme.space[2]`
-    <Box m={#two}> {"Tomato"->React.string} </Box>
+    <Box m={#2}> {"Tomato"->React.string} </Box>
     // You can also use custom values
     <Box maxW={#px(960)} mx=#auto />
     // sets margin `8px` on all viewports and `16px` from the first breakpoint and up
-    <Box m={#array([#two, #three])} />
+    <Box m={#array([#2, #3])} />
   </>
 }
 /**
@@ -30,13 +30,13 @@ module LayoutWidthHeight = {
   @react.component
   let make = () => <>
     // verbose
-    <Box width=#percent(100.) height={#thirtytwo} />
+    <Box width=#percent(100.) height={#32} />
     // shorthand
     <Box w=#percent(100.) h=#px(32) />
     // use theme sizing
     <Box boxSize=#sm />
     // width `50%`
-    <Box w=#zeroP />
+    <Box w=#"0.5" />
     // width `256px`
     <Box w=#px(256) />
     // width `'40px'`
diff --git a/src/Interfaces/Chakra__AtomicTypes.res b/src/Interfaces/Chakra__AtomicTypes.res
@@ -2290,77 +2290,77 @@ module Breakpoints = {
 module Spaces = {
   type t = [
     | #px_
-    | #zero
-    | #zeroP
-    | #one
-    | #oneP
-    | #two
-    | #twoP
-    | #three
-    | #threeP
-    | #four
-    | #five
-    | #six
-    | #seven
-    | #eight
-    | #nine
-    | #ten
-    | #twelve
-    | #fourteen
-    | #sixteen
-    | #twenty
-    | #twentyfour
-    | #twentyeight
-    | #thirtytwo
-    | #thirtysix
-    | #fourty
-    | #fourtyfour
-    | #fourtyeight
-    | #fivetytwo
-    | #fivetysix
-    | #sixty
-    | #sixtyfour
-    | #seventytwo
-    | #eighty
-    | #ninetysix
+    | #0
+    | #"0.5"
+    | #1
+    | #"1.5"
+    | #2
+    | #"2.5"
+    | #3
+    | #"3.5"
+    | #4
+    | #5
+    | #6
+    | #7
+    | #8
+    | #9
+    | #10
+    | #12
+    | #14
+    | #16
+    | #20
+    | #24
+    | #28
+    | #32
+    | #36
+    | #40
+    | #44
+    | #48
+    | #52
+    | #56
+    | #60
+    | #64
+    | #72
+    | #80
+    | #96
   ]
 
   let toString = x =>
     switch x {
     | #px_ => "px"
-    | #zero => "0"
-    | #zeroP => "0.5"
-    | #one => "1"
-    | #oneP => "1.5"
-    | #two => "2"
-    | #twoP => "2.t"
-    | #three => "3"
-    | #threeP => "3.5"
-    | #four => "4"
-    | #five => "5"
-    | #six => "6"
-    | #seven => "7"
-    | #eight => "8"
-    | #nine => "9"
-    | #ten => "10"
-    | #twelve => "12"
-    | #fourteen => "14"
-    | #sixteen => "16"
-    | #twenty => "20"
-    | #twentyfour => "24"
-    | #twentyeight => "28"
-    | #thirtytwo => "32"
-    | #thirtysix => "36"
-    | #fourty => "40"
-    | #fourtyfour => "44"
-    | #fourtyeight => "48"
-    | #fivetytwo => "52"
-    | #fivetysix => "56"
-    | #sixty => "60"
-    | #sixtyfour => "64"
-    | #seventytwo => "72"
-    | #eighty => "80"
-    | #ninetysix => "96"
+    | #0 => "0"
+    | #"0.5" => "0.5"
+    | #1 => "1"
+    | #"1.5" => "1.5"
+    | #2 => "2"
+    | #"2.5" => "2.t"
+    | #3 => "3"
+    | #"3.5" => "3.5"
+    | #4 => "4"
+    | #5 => "5"
+    | #6 => "6"
+    | #7 => "7"
+    | #8 => "8"
+    | #9 => "9"
+    | #10 => "10"
+    | #12 => "12"
+    | #14 => "14"
+    | #16 => "16"
+    | #20 => "20"
+    | #24 => "24"
+    | #28 => "28"
+    | #32 => "32"
+    | #36 => "36"
+    | #40 => "40"
+    | #44 => "44"
+    | #48 => "48"
+    | #52 => "52"
+    | #56 => "56"
+    | #60 => "60"
+    | #64 => "64"
+    | #72 => "72"
+    | #80 => "80"
+    | #96 => "96"
     }
 }
 
diff --git a/src/Interfaces/Chakra__AtomicTypes.resi b/src/Interfaces/Chakra__AtomicTypes.resi
