Merge pull request morfeojs#74 from VLK-STUDIO/fix/shadow-parser

fix: shadow parser fix & improvements
VLK-STUDIO · Aug 17, 2021 · b1bb717 · b1bb717
2 parents e1b84cb + f558a11
commit b1bb717
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 29 deletions.
diff --git a/packages/core/src/parsers/shadows.ts b/packages/core/src/parsers/shadows.ts
@@ -1,20 +1,28 @@
 import { ParserParams, SliceParsers } from '../types';
-import { ShadowProperty, shadowsProperties } from '@morfeo/spec';
+import {
+  Radius,
+  Shadow,
+  ShadowProperty,
+  shadowsProperties,
+  Size,
+  Spacing,
+} from '@morfeo/spec';
 import { theme } from '../theme';
 
 type ShadowsParsers = SliceParsers<typeof shadowsProperties, ShadowProperty>;
 
-function removePixels(value?: string | number): number {
-  if (typeof value === 'number' || value === undefined) {
-    return value || 0;
+function firstValid(...params: (string | number | undefined)[]) {
+  for (const param of params) {
+    if (param) {
+      return param;
+    }
   }
-  const [number] = value.split('px');
-  return Number.parseInt(number, 10);
+
+  return 0;
 }
 
 export function shadows({ value, property }: ParserParams<ShadowProperty>) {
-  const slice = theme.getSlice('shadows');
-  const config = slice[value as ShadowProperty];
+  const config = theme.getValue('shadows', value as Shadow);
   if (!config) {
     return {};
   }
@@ -24,20 +32,23 @@ export function shadows({ value, property }: ParserParams<ShadowProperty>) {
     : 'black';
 
   const { width, height } = config.offset || { width: 0, height: 0 };
-  const parsedWidth = removePixels(
-    theme.getSlice('spacings')[width] ||
-      theme.getSlice('sizes')[width] ||
-      width,
+  const parsedWidth = firstValid(
+    theme.getValue('spacings', width as Spacing),
+    theme.getValue('sizes', width as Size),
+    width,
+  );
+  const parsedHeight = firstValid(
+    theme.getValue('spacings', height as Spacing),
+    theme.getValue('sizes', height as Size),
+    height,
   );
-  const parsedHeight = removePixels(
-    theme.getSlice('spacings')[height] ||
-      theme.getSlice('sizes')[height] ||
-      height,
+  const radius = firstValid(
+    theme.getValue('radii', config.radius as Radius),
+    config.radius,
   );
-  const radius = removePixels(config.radius || 0);
 
   return {
-    [property]: `${parsedWidth}px ${parsedHeight}px ${radius}px ${color}`,
+    [property]: `${parsedWidth} ${parsedHeight} ${radius} ${color}`,
   };
 }
 

diff --git a/packages/core/tests/parsers/shadows.test.ts b/packages/core/tests/parsers/shadows.test.ts
@@ -15,18 +15,21 @@ const THEME: Theme = {
     l: '30px',
     xl: '40px',
   },
+  radii: {
+    m: '30px',
+  },
   shadows: {
     strong: {
       color: 'primary',
       offset: { height: 's', width: 's' },
       opacity: 0.4,
-      radius: 30,
+      radius: '30px',
     },
     light: {
       color: 'secondary',
       offset: { height: 'l', width: 'xl' },
       opacity: 0.4,
-      radius: 30,
+      radius: 'm',
     },
     medium: {
       color: 'secondary',
@@ -72,7 +75,7 @@ describe('shadows', () => {
   test('should generate the property `boxShadow` based on the medium shadow', () => {
     const result = shadows({ property: 'boxShadow', value: 'medium' });
     expect(result).toEqual({
-      boxShadow: '0px 30px 0px white',
+      boxShadow: '0 30 0 white',
     });
   });
 
@@ -87,7 +90,7 @@ describe('shadows', () => {
       value: 'custom' as any,
     });
     expect(result).toEqual({
-      boxShadow: '0px 0px 0px not inside theme',
+      boxShadow: '0 0 0 not inside theme',
     });
   });
 
@@ -97,7 +100,7 @@ describe('shadows', () => {
       value: 'noColor' as any,
     });
     expect(result).toEqual({
-      boxShadow: '0px 0px 0px black',
+      boxShadow: '0 0 0 black',
     });
   });
 });
diff --git a/packages/preset-default/src/base/radii.ts b/packages/preset-default/src/base/radii.ts
@@ -8,6 +8,6 @@ export const radii: Radii = {
   l: '20px',
   xl: '24px',
   xxl: '28px',
-  none: '32px',
+  none: '0px',
   round: '50%',
 };
diff --git a/packages/preset-default/src/base/shadows.ts b/packages/preset-default/src/base/shadows.ts
@@ -8,7 +8,7 @@ export const shadows: Shadows = {
       height: 'xxs',
       width: 'xxs',
     },
-    radius: 16,
+    radius: 'm',
   },
   medium: {
     color: 'dark',
@@ -17,7 +17,7 @@ export const shadows: Shadows = {
       height: 'xxs',
       width: 'xxs',
     },
-    radius: 16,
+    radius: 'm',
   },
   none: {
     color: 'dark',
@@ -26,7 +26,7 @@ export const shadows: Shadows = {
       height: 'none',
       width: 'none',
     },
-    radius: 0,
+    radius: 'none',
   },
   strong: {
     color: 'dark',
@@ -35,6 +35,6 @@ export const shadows: Shadows = {
       height: 'none',
       width: 'none',
     },
-    radius: 10,
+    radius: 's',
   },
 };
diff --git a/packages/spec/src/types/shadows.ts b/packages/spec/src/types/shadows.ts
@@ -1,6 +1,7 @@
 import { shadowsMap } from '../properties';
 import { Color } from './colors';
 import { Opacity } from './opacities';
+import { Radius } from './radii';
 import { Size } from './sizes';
 
 export interface ShadowConfig {
@@ -9,7 +10,7 @@ export interface ShadowConfig {
     width: Size;
     height: Size;
   };
-  radius?: number;
+  radius?: Radius;
   opacity?: Opacity;
 }