chore: lint

riccardoperra · Dec 8, 2022 · 8cf8666 · 8cf8666
1 parent baff2ed
commit 8cf8666
Show file tree

Hide file tree

Showing 10 changed files with 43 additions and 35 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -13,7 +13,7 @@
     "node-html-parser": "6.1.4",
     "rollup": "^2.79.1",
     "solid-start-node": "^0.2.7",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.4",
     "vite": "^3.1.8"
   },
   "sideEffects": true,

diff --git a/packages/ui/dev/demo/Button.tsx b/packages/ui/dev/demo/Button.tsx
@@ -29,7 +29,7 @@ export function ButtonDemo() {
       </Text>
       <For each={variants}>
         {variant => (
-          <VStack spacing={'1'}>
+          <VStack spacing={1}>
             <Text size={'lg'} as={'div'}>
               {variant}
             </Text>
@@ -54,7 +54,7 @@ export function ButtonDemo() {
       <Box marginTop={'12'}>
         <For each={variants}>
           {variant => (
-            <VStack spacing={'1'}>
+            <VStack spacing={1}>
               <Text size={'lg'} as={'div'}>
                 {variant}
               </Text>
@@ -87,7 +87,7 @@ export function ButtonDemo() {
       <Box marginTop={'12'}>
         <For each={variants}>
           {variant => (
-            <VStack spacing={'1'}>
+            <VStack spacing={1}>
               <Text size={'lg'} as={'div'}>
                 {variant}
               </Text>
@@ -115,7 +115,7 @@ export function ButtonDemo() {
       <Box marginTop={'12'}>
         <For each={variants}>
           {variant => (
-            <VStack spacing={'1'}>
+            <VStack spacing={1}>
               <Text size={'lg'} as={'div'}>
                 {variant}
               </Text>

diff --git a/packages/ui/dev/demo/SegmentedControl.tsx b/packages/ui/dev/demo/SegmentedControl.tsx
@@ -31,9 +31,9 @@ export function SegmentedFieldDemo() {
     <div>
       <Text size={'2xl'}>Segmented Control</Text>
 
-      <HStack spacing={'4'}>
+      <HStack spacing={4}>
         <div style={{width: '400px'}}>
-          <VStack spacing={'2'} marginTop={'4'}>
+          <VStack spacing={2} marginTop={4}>
             <FlexField size={'lg'}>
               <SegmentedField
                 items={items}

diff --git a/packages/ui/dev/demo/Select.tsx b/packages/ui/dev/demo/Select.tsx
@@ -25,9 +25,9 @@ export function SelectDemo() {
     <div>
       <Text size={'2xl'}>Segmented Control</Text>
 
-      <HStack spacing={'4'}>
+      <HStack spacing={4}>
         <div style={{width: '400px'}}>
-          <VStack spacing={'2'} marginTop={'4'}>
+          <VStack spacing={2} marginTop={4}>
             <FlexField size={'lg'}>
               <Select
                 items={items}

diff --git a/packages/ui/dev/demo/TextField.tsx b/packages/ui/dev/demo/TextField.tsx
@@ -12,9 +12,9 @@ export function TextFieldDemo() {
     <div>
       <Text size={'2xl'}>TextField - Text</Text>
 
-      <HStack spacing={'4'}>
+      <HStack spacing={4}>
         <div style={{width: '400px'}}>
-          <VStack spacing={'2'} marginTop={'4'}>
+          <VStack spacing={2} marginTop={4}>
             <FlexField size={'lg'}>
               <FieldLabel>Label</FieldLabel>
               <TextField type={'text'} value={'Text'}></TextField>
@@ -31,7 +31,7 @@ export function TextFieldDemo() {
         </div>
 
         <div style={{width: '400px'}}>
-          <VStack spacing={'2'} marginTop={'4'}>
+          <VStack spacing={2} marginTop={4}>
             <FlexField size={'lg'}>
               <FieldLabel>Label</FieldLabel>
               <TextField inline type={'text'} value={'Text'}></TextField>

diff --git a/packages/ui/src/lib/primitives/Box/Box.tsx b/packages/ui/src/lib/primitives/Box/Box.tsx
@@ -10,7 +10,10 @@ import {sprinkles, Sprinkles} from '../../theme';
 import {styled} from '../../utils';
 import {boxBase} from './Box.css';
 
-type BoxParameters = Sprinkles;
+type BoxParameters = {
+  // Fallback to support both index number and string (ex. 2 | "2")
+  [key in keyof Sprinkles]: Sprinkles[key] | `${Sprinkles[key] & number}`;
+};
 
 export type BoxProps<T extends ElementType = 'div'> = Partial<BoxParameters> & {
   as?: T;
@@ -35,3 +38,8 @@ export function Box<T extends ElementType = 'div'>(
     </styled.div>
   );
 }
+
+Box({
+  padding: 2,
+  paddingTop: '2',
+});
diff --git a/packages/ui/src/lib/primitives/ColorPicker/ColorPickerPopover.tsx b/packages/ui/src/lib/primitives/ColorPicker/ColorPickerPopover.tsx
@@ -56,7 +56,7 @@ export function ColorPickerPopover(props: VoidProps<ColorPickerPopoverProps>) {
   });
 
   return (
-    <VStack spacing={'4'}>
+    <VStack spacing={4}>
       <FlexField size={'md'}>
         <SegmentedField
           value={mode()}

diff --git a/packages/ui/src/lib/primitives/Label/FieldLabel.tsx b/packages/ui/src/lib/primitives/Label/FieldLabel.tsx
@@ -34,7 +34,7 @@ export const FieldLabelHint: FlowComponent<FieldLabelProps> = props => {
   return (
     <Box class={styles.labelHintWrapper}>
       <Show when={computedProps.icon}>
-        <Box as={'span'} marginRight={'1'} display={'inlineFlex'}>
+        <Box as={'span'} marginRight={1} display={'inlineFlex'}>
           <Dynamic component={computedProps.icon} />
         </Box>
       </Show>

diff --git a/packages/ui/src/lib/primitives/Snackbar/Snackbar.tsx b/packages/ui/src/lib/primitives/Snackbar/Snackbar.tsx
@@ -34,12 +34,12 @@ export function SnackBar(props: SnackbarData & {id: string}): JSX.Element {
           </Text>
 
           <Show when={!!props.actions}>
-            <Box marginLeft={'4'}>
+            <Box marginLeft={4}>
               <Dynamic component={props.actions} />
             </Box>
           </Show>
           <Show when={props.closeable}>
-            <Box marginLeft={'4'}>
+            <Box marginLeft={4}>
               <Button
                 type={'button'}
                 size={ButtonSizes.xs}

diff --git a/packages/ui/src/lib/theme/spacing.ts b/packages/ui/src/lib/theme/spacing.ts
@@ -1,22 +1,22 @@
 export const spacing = {
   auto: 'auto',
   px: '1px',
-  '0': '0',
-  '1': '0.25rem',
-  '2': '0.5rem',
-  '3': '0.75rem',
-  '4': '1rem',
-  '5': '1.25rem',
-  '6': '1.5rem',
-  '8': '2rem',
-  '10': '2.5rem',
-  '12': '3rem',
-  '16': '4rem',
-  '20': '5rem',
-  '24': '6rem',
-  '32': '8rem',
-  '40': '10rem',
-  '48': '12rem',
-  '56': '14rem',
-  '64': '16rem',
+  0: '0',
+  1: '0.25rem',
+  2: '0.5rem',
+  3: '0.75rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  8: '2rem',
+  10: '2.5rem',
+  12: '3rem',
+  16: '4rem',
+  20: '5rem',
+  24: '6rem',
+  32: '8rem',
+  40: '10rem',
+  48: '12rem',
+  56: '14rem',
+  64: '16rem',
 } as const;