refactor(components): ♻️ update styles & optional chaining

adaptui · Jun 21, 2022 · dd3edd2 · dd3edd2
1 parent 1e1cf3e
commit dd3edd2
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 36 deletions.
diff --git a/src/components/circular-progress/CircularProgress.tsx b/src/components/circular-progress/CircularProgress.tsx
@@ -243,7 +243,7 @@ const RNCircularProgress: React.FC<Partial<CircularProgressProps>> = forwardRef<
               StyleSheet.absoluteFillObject,
               tailwind.style(
                 cx(
-                  circularProgressTheme.text.base,
+                  circularProgressTheme.text,
                   circularProgressTheme.size[size]?.text,
                 ),
               ),

diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx
@@ -104,22 +104,23 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
                 radioTheme.icon?.common,
                 radioTheme.size[size]?.icon?.wrapper,
                 radioProps.checked
-                  ? radioTheme.themeColor[themeColor]?.icon.checked.default
-                  : radioTheme.themeColor[themeColor]?.icon.unChecked.default,
+                  ? radioTheme.themeColor[themeColor]?.icon?.checked?.default
+                  : radioTheme.themeColor[themeColor]?.icon?.unChecked?.default,
                 radioProps.disabled
                   ? radioProps.checked
-                    ? radioTheme.themeColor[themeColor]?.icon.checked.disabled
-                    : radioTheme.themeColor[themeColor]?.icon.unChecked.disabled
+                    ? radioTheme.themeColor[themeColor]?.icon?.checked?.disabled
+                    : radioTheme.themeColor[themeColor]?.icon?.unChecked
+                        ?.disabled
                   : "",
                 pressed
                   ? radioProps.checked
-                    ? radioTheme.themeColor[themeColor]?.icon.checked.press
-                    : radioTheme.themeColor[themeColor]?.icon.unChecked.press
+                    ? radioTheme.themeColor[themeColor]?.icon?.checked?.press
+                    : radioTheme.themeColor[themeColor]?.icon?.unChecked?.press
                   : "",
                 isHovered
                   ? radioProps.checked
-                    ? radioTheme.themeColor[themeColor]?.icon.checked.hover
-                    : radioTheme.themeColor[themeColor]?.icon.unChecked.hover
+                    ? radioTheme.themeColor[themeColor]?.icon?.checked?.hover
+                    : radioTheme.themeColor[themeColor]?.icon?.unChecked?.hover
                   : "",
               ),
             ),
@@ -129,24 +130,24 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
           <Box
             style={tailwind.style(
               cx(
-                radioTheme.size[size]?.icon.innerCircle?.default,
+                radioTheme.size[size]?.icon?.innerCircle?.default,
                 radioProps.checked
-                  ? radioTheme.themeColor[themeColor]?.innerCircle.checked
+                  ? radioTheme.themeColor[themeColor]?.innerCircle?.checked
                       .default
-                  : radioTheme.themeColor[themeColor]?.innerCircle.unChecked
+                  : radioTheme.themeColor[themeColor]?.innerCircle?.unChecked
                       .default,
                 radioProps.disabled
                   ? radioProps.checked
-                    ? radioTheme.themeColor[themeColor]?.innerCircle.checked
+                    ? radioTheme.themeColor[themeColor]?.innerCircle?.checked
                         .disabled
-                    : radioTheme.themeColor[themeColor]?.innerCircle.unChecked
+                    : radioTheme.themeColor[themeColor]?.innerCircle?.unChecked
                         .disabled
                   : "",
                 pressed
                   ? radioProps.checked
-                    ? radioTheme.themeColor[themeColor]?.innerCircle.checked
+                    ? radioTheme.themeColor[themeColor]?.innerCircle?.checked
                         .press
-                    : radioTheme.themeColor[themeColor]?.innerCircle.unChecked
+                    : radioTheme.themeColor[themeColor]?.innerCircle?.unChecked
                         .press
                   : "",
               ),

diff --git a/src/components/radio/RadioGroup.tsx b/src/components/radio/RadioGroup.tsx
@@ -92,7 +92,7 @@ const RNRadioGroup: React.FC<Partial<RadioGroupProps>> = forwardRef<
   const validChildren = getValidChildren(children);
   return (
     <Box
-      style={tailwind.style(cx(radioGroupTheme.group[orientation].common))}
+      style={tailwind.style(cx(radioGroupTheme.group[orientation]?.common))}
       {...radioGroupProps}
       ref={ref}
     >
@@ -101,7 +101,7 @@ const RNRadioGroup: React.FC<Partial<RadioGroupProps>> = forwardRef<
           <Box
             key={index}
             style={tailwind.style(
-              cx(radioGroupTheme.group[orientation].spacing),
+              cx(radioGroupTheme.group[orientation]?.spacing),
             )}
           >
             {renderElement}

diff --git a/src/components/slider/Slider.tsx b/src/components/slider/Slider.tsx
@@ -626,7 +626,7 @@ const RNSlider: React.FC<Partial<SliderProps>> = forwardRef<
             tailwind.style(
               cx(
                 sliderTheme.knob.common,
-                sliderTheme.size[size]?.knob.size,
+                sliderTheme.size[size]?.knob?.size,
                 sliderTheme.themeColor[themeColor]?.knob,
                 disabled ? sliderTheme.knob.disabled : "",
               ),

diff --git a/src/components/slider/SliderFilledTrack.tsx b/src/components/slider/SliderFilledTrack.tsx
@@ -26,7 +26,7 @@ export const SliderFilledTrack: React.FC<SliderFilledTrackProps> = ({
       style={[
         tailwind.style(
           cx(
-            sliderTheme?.filledTrack?.common,
+            sliderTheme?.filledTrack,
             sliderTheme?.size[size]?.filledTrack,
             sliderTheme?.themeColor[themeColor]?.filledTrack,
           ),

diff --git a/src/components/slider/SliderTrack.tsx b/src/components/slider/SliderTrack.tsx
@@ -17,7 +17,7 @@ export const SliderTrack: React.FC<
       style={[
         tailwind.style(
           cx(
-            sliderTheme?.track?.common,
+            sliderTheme?.track,
             sliderTheme?.size[size]?.track,
             sliderTheme?.themeColor[themeColor]?.track,
           ),

diff --git a/src/theme/defaultTheme/avatar.ts b/src/theme/defaultTheme/avatar.ts
@@ -104,13 +104,13 @@ export const avatar = {
         "3xl": "w-[17px] h-[10px]",
       },
       innerDots: {
-        base: "h-[2px] w-[2px] rounded-full bg-white-900",
+        base: "h-0.5 w-0.5 rounded-full bg-white-900",
         size: {
-          xs: "h-[2px] w-[2px]",
+          xs: "h-0.5 w-0.5",
           sm: "h-[2.25px] w-[2.25px]",
           md: "h-[2.8px] w-[2.8px]",
           lg: "h-[3.25px] w-[3.25px]",
-          xl: "h-[2px] w-[2px]",
+          xl: "h-0.5 w-0.5",
           "2xl": "h-[2.25px] w-[2.25px]",
           "3xl": "h-[2.5px] w-[2.5px]",
         },

diff --git a/src/theme/defaultTheme/circularProgress.ts b/src/theme/defaultTheme/circularProgress.ts
@@ -31,7 +31,5 @@ export const circularProgress = {
       text: "text-xl",
     },
   },
-  text: {
-    base: "absolute font-medium text-gray-900 text-center leading-tight",
-  },
+  text: "absolute font-medium text-gray-900 text-center leading-tight",
 };
diff --git a/src/theme/defaultTheme/slider.ts b/src/theme/defaultTheme/slider.ts
@@ -2,16 +2,12 @@ export const slider = {
   wrapper: "relative w-full",
   knobWrapper: "relative",
   iconWrapper: "justify-center items-center",
-  filledTrack: {
-    common: "w-full absolute rounded-2xl",
-  },
-  track: {
-    common: "relative rounded-2xl",
-  },
+  filledTrack: "w-full absolute rounded-2xl",
+  track: "relative rounded-2xl",
   size: {
     sm: {
-      filledTrack: "h-[2px] mx-[9px]",
-      track: "h-[2px] mx-[9px]",
+      filledTrack: "h-0.5 mx-[9px]",
+      track: "h-0.5 mx-[9px]",
       knob: {
         position: 18 / 2 - 2 / 2,
         size: "h-[18px] w-[18px]",

diff --git a/src/theme/defaultTheme/switch.ts b/src/theme/defaultTheme/switch.ts
@@ -55,7 +55,7 @@ export const switchTheme = {
       },
     },
     xl: {
-      switchContainerStyle: "w-[48px] h-7 rounded-full py-[2px]",
+      switchContainerStyle: "w-[48px] h-7 rounded-full py-0.5",
       thumbStyle: "w-6 h-6 bg-white-900 rounded-full shadow-sm",
       switchInterpolateWidths: [24, 27, 27, 24],
       thumbIntermediateTranslateValue: 3,