Abstracts "transformNumeric" to prevent circular dependency in Layout

Author: kettanaito

examples/Core/Configuration/CustomUnit.jsx

@@ -3,7 +3,7 @@ import Layout from 'atomic-layout'
 import Notch from '../Rendering/Notch'
 
 export default class CustomUnit extends React.Component {
-  componentWillMount() {
+  componentDidMount() {
     Layout.configure({
       defaultUnit: 'rem',
     })

src/Layout.spec.ts

@@ -159,4 +159,34 @@ describe('Layout', () => {
       })
     })
   })
+
+  describe('transformNumeric', () => {
+    describe('suffixes numeric value with measurement unit', () => {
+      it('with default measurement unit', () => {
+        expect(Layout.transformNumeric(5)).toBe('5px')
+      })
+
+      it('with custom measurement unit', () => {
+        Layout.configure({
+          defaultUnit: 'rem',
+        })
+
+        expect(Layout.transformNumeric(3)).toBe('3rem')
+      })
+    })
+
+    it('bypasses string value', () => {
+      expect(Layout.transformNumeric('2vh')).toBe('2vh')
+    })
+
+    it('handles explicit zero as a value and no suffix is attached', () => {
+      expect(Layout.transformNumeric('0')).toBe('0')
+      expect(Layout.transformNumeric(0)).toBe('0')
+    })
+
+    it('returns empty string when no value provided', () => {
+      expect(Layout.transformNumeric()).toBe('')
+      expect(Layout.transformNumeric('')).toBe('')
+    })
+  })
 })

src/Layout.ts

@@ -4,10 +4,14 @@ import defaultOptions, {
   Breakpoints,
   MeasurementUnit,
   BreakpointBehavior,
+  Numeric,
 } from './const/defaultOptions'
+import { PropAliases } from './const/propAliases'
 import invariant from './utils/invariant'
+import isset from './utils/functions/isset'
 
 class Layout {
+  public propAliases: PropAliases = defaultOptions.propAliases
   public defaultUnit: MeasurementUnit = defaultOptions.defaultUnit
   public defaultBehavior: BreakpointBehavior = defaultOptions.defaultBehavior
   public breakpoints: Breakpoints = defaultOptions.breakpoints
@@ -82,6 +86,27 @@ class Layout {
   public getBreakpoint(breakpointName: string): Breakpoint | undefined {
     return this.breakpoints[breakpointName]
   }
+
+  /**
+   * Transforms given string or number into a CSS value
+   * taking "defaultUnit" into account.
+   */
+  public transformNumeric(value?: Numeric): string {
+    if (!isset(value)) {
+      return ''
+    }
+
+    // tslint:disable-next-line
+    if (value == '0') {
+      return String(value)
+    }
+
+    // Suffix numeric value with the default unit.
+    // Accept explicit (string) value as-is.
+    const suffix = typeof value === 'number' ? this.defaultUnit : ''
+
+    return `${value}${suffix}`
+  }
 }
 
 export default new Layout()

src/components/MediaQuery.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
+import Layout from '@src/Layout'
 import { MediaQuery as MediaQueryParams } from '@const/defaultOptions'
 import { joinQueryList } from '@utils/styles/createMediaQuery'
 import normalizeQuery from '@src/utils/styles/normalizeQuery'
-import transformNumeric from '@utils/math/transformNumeric'
+// import transformNumeric from '@utils/math/transformNumeric'
 import compose from '@src/utils/functions/compose'
 
 interface Props extends MediaQueryParams {
@@ -22,7 +23,7 @@ const createMediaQuery = (queryParams: MediaQueryParams): string => {
        * (min-width: 750) ==> (min-width: 750px)
        */
       const resolvedParamValue = /^\d/.test(String(paramValue))
-        ? transformNumeric(paramValue)
+        ? Layout.transformNumeric(paramValue)
         : paramValue
       return `(${paramName}:${resolvedParamValue})`
     }),
@@ -32,7 +33,9 @@ const createMediaQuery = (queryParams: MediaQueryParams): string => {
 
 const MediaQuery = (props: Props): JSX.Element => {
   const { children, ...queryParams } = props
-  const query = React.useMemo(() => createMediaQuery(queryParams), [queryParams])
+  const query = React.useMemo(() => createMediaQuery(queryParams), [
+    queryParams,
+  ])
   const [matches, setMatches] = React.useState(false)
 
   const handleMediaQueryChange = (

src/const/defaultOptions.ts

@@ -1,3 +1,5 @@
+import propAliases, { PropAliases } from './propAliases'
+
 type AbsoluteUnits = 'cm' | 'mm' | 'in' | 'px' | 'pt' | 'pc'
 type RelativeUnits =
   | '%'
@@ -16,13 +18,15 @@ export type BreakpointBehavior = 'up' | 'down' | 'only'
 export interface Breakpoints {
   [breakpointName: string]: Breakpoint
 }
+
 export interface LayoutOptions {
+  propAliases: PropAliases
   /**
    * Measurement unit that suffixes numeric prop values.
    * @default "px"
    * @example
    * <Box padding={10} />
-   * // "padding: 10px"
+   * @returns "padding: 10px"
    */
   defaultUnit: MeasurementUnit
   /**
@@ -54,11 +58,12 @@ export interface MediaQuery {
 }
 
 export interface Breakpoint extends MediaQuery {
-  /* Index signature for dynamic breakpoint composition */
+  // Index signature for dynamic breakpoint composition
   [propName: string]: any
 }
 
 const defaultOptions: LayoutOptions = {
+  propAliases,
   defaultUnit: 'px',
   defaultBehavior: 'up',
   defaultBreakpointName: 'xs',

src/const/propAliases.spec.tsx

@@ -1,8 +1,9 @@
+import 'jest-dom/extend-expect'
 import React from 'react'
+import { render, cleanup, getByTestId } from 'react-testing-library'
+import Layout from '@src/Layout'
 import propAliases from './propAliases'
 import { Composition } from '..'
-import { render, cleanup, getByTestId } from 'react-testing-library'
-import 'jest-dom/extend-expect'
 
 const defaultValue = 10
 const explicitValues = {
@@ -57,7 +58,7 @@ describe('Prop aliases', () => {
       /* Assertion */
       const { output, transformValue } = propAliases[propAliasName]
       const expectedValue = transformValue
-        ? transformValue(propValue)
+        ? transformValue(propValue, Layout)
         : propValue
 
       output.forEach((cssPropName) => {

src/const/propAliases.ts

@@ -1,9 +1,11 @@
 import { Numeric } from '@const/defaultOptions'
 import compose from '@utils/functions/compose'
-import transformNumeric from '@utils/math/transformNumeric'
 import sanitizeTemplateArea from '@utils/strings/sanitizeTemplateArea'
 
-export type ValueTransformer<Input, Return> = (value: Input) => Return
+export type ValueTransformer<Input, Return> = (
+  value: Input,
+  Layout: any,
+) => Return
 
 interface PropAlias {
   output: string[]
@@ -14,6 +16,13 @@ export interface PropAliases {
   [aliasName: string]: PropAlias
 }
 
+const deferredTransformNumeric: ValueTransformer<Numeric, string> = (
+  value,
+  Layout,
+) => {
+  return Layout.transformNumeric(value)
+}
+
 type TransformTemplateString = (template: string) => string
 const transformTemplateString: TransformTemplateString = compose(
   (areas: string[]) => areas.join('\n'),
@@ -67,35 +76,35 @@ const propAliases: PropAliases = {
   },
   gap: {
     output: ['grid-gap'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   gapCol: {
     output: ['grid-column-gap'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   gapRow: {
     output: ['grid-row-gap'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   gutter: {
     output: ['grid-gap'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   gutterCol: {
     output: ['grid-column-gap'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   gutterRow: {
     output: ['grid-row-gap'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   autoRows: {
     output: ['grid-auto-rows'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   autoCols: {
     output: ['grid-auto-columns'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   autoFlow: {
     output: ['grid-auto-flow'],
@@ -142,86 +151,86 @@ const propAliases: PropAliases = {
   /* Dimensions */
   height: {
     output: ['height'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   minHeight: {
     output: ['min-height'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   maxHeight: {
     output: ['max-height'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   width: {
     output: ['width'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   minWidth: {
     output: ['min-width'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   maxWidth: {
     output: ['max-width'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
 
   /* Spacing */
   margin: {
     output: ['margin'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   marginTop: {
     output: ['margin-top'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   marginRight: {
     output: ['margin-right'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   marginBottom: {
     output: ['margin-bottom'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   marginLeft: {
     output: ['margin-left'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   marginVertical: {
     output: ['margin-top', 'margin-bottom'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   marginHorizontal: {
     output: ['margin-right', 'margin-left'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
 
   padding: {
     output: ['padding'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   paddingTop: {
     output: ['padding-top'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   paddingRight: {
     output: ['padding-right'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   paddingBottom: {
     output: ['padding-bottom'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   paddingLeft: {
     output: ['padding-left'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   paddingVertical: {
     output: ['padding-top', 'padding-bottom'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
   paddingHorizontal: {
     output: ['padding-right', 'padding-left'],
-    transformValue: transformNumeric,
+    transformValue: deferredTransformNumeric,
   },
 }
 

src/utils/breakpoints/getAreaBreakpoints/getAreaBreakpoints.spec.ts

@@ -1,5 +1,4 @@
 import Layout from '../../../Layout'
-import transformNumeric from '../../math/transformNumeric'
 import getAreasList from '../../templates/getAreasList'
 import getAreaBreakpoints from './getAreaBreakpoints'
 
@@ -38,7 +37,9 @@ describe('getAreaBreakpoints', () => {
         {
           behavior: 'down',
           minWidth: breakpointMd.minWidth,
-          maxWidth: `calc(${transformNumeric(breakpointXl.minWidth)} - 1px)`,
+          maxWidth: `calc(${Layout.transformNumeric(
+            breakpointXl.minWidth,
+          )} - 1px)`,
         },
         null,
       ])
@@ -60,7 +61,9 @@ describe('getAreaBreakpoints', () => {
         {
           behavior: 'down',
           minWidth: breakpointXs.minWidth,
-          maxWidth: `calc(${transformNumeric(breakpointMd.minWidth)} - 1px)`,
+          maxWidth: `calc(${Layout.transformNumeric(
+            breakpointMd.minWidth,
+          )} - 1px)`,
         },
         null,
         {
@@ -87,7 +90,9 @@ describe('getAreaBreakpoints', () => {
           {
             behavior: 'down',
             minWidth: undefined,
-            maxWidth: `calc(${transformNumeric(breakpointSm.minWidth)} - 1px)`,
+            maxWidth: `calc(${Layout.transformNumeric(
+              breakpointSm.minWidth,
+            )} - 1px)`,
           },
           null,
           {