Fix tests

Bojagi · Dec 21, 2024 · 44369ab · 44369ab
1 parent 2d27607
commit 44369ab
Show file tree

Hide file tree

Showing 36 changed files with 467 additions and 381 deletions.
diff --git a/benchmark/button/SimpleThemedButton.tsx b/benchmark/button/SimpleThemedButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import { PabloThemeProvider } from '../../src/theme';
 import { themeVars } from '../../src/theme/themeVars';
-import { getSpacing } from '../../src/utils/styleHelpers';
+import { getSpacing } from '../../src/styleHelpers';
 
 const color = 'brand';
 const SimpleThemedButton = styled.button`

diff --git a/src/Box/Box.tsx b/src/Box/Box.tsx
@@ -3,7 +3,7 @@ import { color, ColorProps } from './interpolations/color';
 import { CssFunctionReturn } from '../types';
 import { baseStyle } from '../shared/baseStyle';
 import { interpolateCssProp } from '../utils/interpolateCssProp';
-import { margin, MarginProps, PaddingProps, padding } from './interpolations/spacing';
+import { margin, padding, spacing, SpacingProps } from './interpolations/spacing';
 import { layout, LayoutProps } from './interpolations/layout';
 import { svg, SvgProps } from './interpolations/svg';
 import { position, PositionProps } from './interpolations/position';
@@ -13,8 +13,7 @@ export interface BoxCssProps {
   css?: CssFunctionReturn;
 }
 
-export type BoxProps = MarginProps &
-  PaddingProps &
+export type BoxProps = SpacingProps &
   ColorProps &
   LayoutProps &
   FlexItemProps &
@@ -32,8 +31,7 @@ export const Box = styled.div<BoxProps>`
   ${boxInterpolateFn}
 `;
 
-export type LayoutBoxProps = MarginProps &
-  PaddingProps &
+export type LayoutBoxProps = SpacingProps &
   FlexItemProps &
   LayoutProps &
   PositionProps &

diff --git a/src/Box/interpolations/position.spec.ts b/src/Box/interpolations/position.spec.ts
@@ -23,7 +23,7 @@ test('position', () => {
 
 test('top', () => {
   expect(position({ ...props, top: 2 })).toEqual({
-    top: '16px',
+    top: '1rem',
   });
   expect(position({ ...props, top: '100%' })).toEqual({
     top: '100%',
@@ -32,7 +32,7 @@ test('top', () => {
 
 test('right', () => {
   expect(position({ ...props, right: 2 })).toEqual({
-    right: '16px',
+    right: '1rem',
   });
   expect(position({ ...props, right: '100%' })).toEqual({
     right: '100%',
@@ -41,7 +41,7 @@ test('right', () => {
 
 test('bottom', () => {
   expect(position({ ...props, bottom: 2 })).toEqual({
-    bottom: '16px',
+    bottom: '1rem',
   });
   expect(position({ ...props, bottom: '100%' })).toEqual({
     bottom: '100%',
@@ -50,7 +50,7 @@ test('bottom', () => {
 
 test('left', () => {
   expect(position({ ...props, left: 2 })).toEqual({
-    left: '16px',
+    left: '1rem',
   });
   expect(position({ ...props, left: '100%' })).toEqual({
     left: '100%',

diff --git a/src/Box/interpolations/spacing.spec.ts b/src/Box/interpolations/spacing.spec.ts
@@ -17,7 +17,7 @@ describe.each([
   ['macro padding', padding, 'padding', 0.5, 'p'],
   ['micro margin', microMargin, 'margin', 0.25, 'mm'],
   ['micro padding', microPadding, 'padding', 0.25, 'mp'],
-])('%s system', (name, systemFn, property, base, shorthand) => {
+])('%s system', (name, systemFn: any, property, base, shorthand) => {
   test(`${name} system`, () => {
     expect(systemFn({ [shorthand]: 10, ...props })).toEqual({
       [property]: `${10 * base}rem`,
@@ -111,7 +111,7 @@ describe.each([
 test.each([
   ['macro', 0.5, padding],
   ['micro', 0.25, microPadding],
-])('%s gap spacing', (_, base, systemFn) => {
+])('%s gap spacing', (_, base, systemFn: typeof padding) => {
   expect(systemFn({ gap: 10, ...props })).toEqual({
     gap: `${10 * base}rem ${10 * base}rem`,
   });
@@ -122,3 +122,42 @@ test.each([
     gap: `${10 * base}rem ${10 * base}rem`,
   });
 });
+
+test('getSpacing', () => {
+  expect(margin.get('xxxs')(props)).toEqual('0.125rem');
+  expect(margin.get('xxs')(props)).toEqual('0.25rem');
+  expect(margin.get('xs')(props)).toEqual('0.375rem');
+  expect(margin.get('sm')(props)).toEqual('0.5rem');
+  expect(margin.get('md')(props)).toEqual('0.75rem');
+  expect(margin.get('lg')(props)).toEqual('1rem');
+  expect(margin.get('xl')(props)).toEqual('1.5rem');
+  expect(margin.get('xxl')(props)).toEqual('2rem');
+  expect(margin.get('xxxl')(props)).toEqual('3rem');
+  expect(padding.get('xxxs')(props)).toEqual('0.125rem');
+  expect(padding.get('xxs')(props)).toEqual('0.25rem');
+  expect(padding.get('xs')(props)).toEqual('0.375rem');
+  expect(padding.get('sm')(props)).toEqual('0.5rem');
+  expect(padding.get('md')(props)).toEqual('0.75rem');
+  expect(padding.get('lg')(props)).toEqual('1rem');
+  expect(padding.get('xl')(props)).toEqual('1.5rem');
+  expect(padding.get('xxl')(props)).toEqual('2rem');
+  expect(padding.get('xxxl')(props)).toEqual('3rem');
+  expect(microMargin.get('xxxs')(props)).toEqual('0.0625rem');
+  expect(microMargin.get('xxs')(props)).toEqual('0.125rem');
+  expect(microMargin.get('xs')(props)).toEqual('0.1875rem');
+  expect(microMargin.get('sm')(props)).toEqual('0.25rem');
+  expect(microMargin.get('md')(props)).toEqual('0.375rem');
+  expect(microMargin.get('lg')(props)).toEqual('0.5rem');
+  expect(microMargin.get('xl')(props)).toEqual('0.75rem');
+  expect(microMargin.get('xxl')(props)).toEqual('1rem');
+  expect(microMargin.get('xxxl')(props)).toEqual('1.5rem');
+  expect(microPadding.get('xxxs')(props)).toEqual('0.0625rem');
+  expect(microPadding.get('xxs')(props)).toEqual('0.125rem');
+  expect(microPadding.get('xs')(props)).toEqual('0.1875rem');
+  expect(microPadding.get('sm')(props)).toEqual('0.25rem');
+  expect(microPadding.get('md')(props)).toEqual('0.375rem');
+  expect(microPadding.get('lg')(props)).toEqual('0.5rem');
+  expect(microPadding.get('xl')(props)).toEqual('0.75rem');
+  expect(microPadding.get('xxl')(props)).toEqual('1rem');
+  expect(microPadding.get('xxxl')(props)).toEqual('1.5rem');
+});
diff --git a/src/Box/interpolations/spacing.ts b/src/Box/interpolations/spacing.ts
@@ -1,3 +1,4 @@
+import { SpacingNames } from '../../theme/spacing';
 import { PabloTheme } from '../../theme/types';
 import {
   InterpolationReturn,
@@ -39,6 +40,8 @@ interface PaddingProps {
   gap?: ResponsiveValue<string | number | Array<string | number>>;
 }
 
+type SpacingProps = MarginProps & PaddingProps;
+
 const getConfig = <P extends string, S extends string>(
   property: P,
   shortHand: S,
@@ -89,16 +92,26 @@ const getConfig = <P extends string, S extends string>(
     },
   ] as const;
 
-const margin = system([...getConfig('margin', 'm', macroSpacingTransform)]);
-const microMargin = system([...getConfig('margin', 'mm', microSpacingTransform)]);
-const padding = system([
+const marginConfig = getConfig('margin', 'm', macroSpacingTransform);
+const paddingConfig = [
   ...getConfig('padding', 'p', macroSpacingTransform),
   { properties: ['gap'], transform: getGapSpacing(macroSpacingTransform) },
-]);
-
-const microPadding = system([
+] as const;
+const microMarginConfig = getConfig('margin', 'mm', microSpacingTransform);
+const microPaddingConfig = [
   ...getConfig('padding', 'mp', microSpacingTransform),
   { properties: ['gap'], transform: getGapSpacing(microSpacingTransform) },
-]);
+] as const;
+
+const macroGetter = (value: number | SpacingNames) => (props) =>
+  macroSpacingTransform(value, props.theme);
+
+const microGetter = (value: number | SpacingNames) => (props) =>
+  microSpacingTransform(value, props.theme);
+
+const margin = system([...marginConfig], macroGetter);
+const microMargin = system([...microMarginConfig], microGetter);
+const padding = system([...paddingConfig], macroGetter);
+const microPadding = system([...microPaddingConfig], microGetter);
 
-export { margin, padding, microMargin, microPadding, MarginProps, PaddingProps };
+export { margin, padding, microMargin, microPadding, MarginProps, PaddingProps, SpacingProps };
diff --git a/src/Box/system.ts b/src/Box/system.ts
@@ -2,7 +2,7 @@ import type { CSSObject } from '@emotion/react';
 import { mediaQueryAbove } from '../breakpoints/mediaQueryFns';
 import { themeVars } from '../theme';
 import { Breakpoint } from '../theme/breakpoints';
-import { PabloTheme, PabloThemeableProps } from '../theme/types';
+import { PabloTheme, PabloThemeableProps, ThemeValueGetter } from '../theme/types';
 import { enforceArray } from '../utils/enforceArray';
 import { getByPath } from '../utils/getByPath';
 import { Colors } from '../theme/colors';
@@ -97,13 +97,16 @@ type ArrayStyledInterpolationFunctions<C extends readonly SystemPropertyConfig[]
 
 type SystemFn<
   C extends readonly SystemPropertyConfig<T>[] | SystemPropertyConfig<T>,
+  A extends ThemeValueGetter = any,
   T = any,
 > = InterpolationFunction<SystemConfigProps<C>> &
   (C extends readonly SystemPropertyConfig<T>[]
     ? ArrayStyledInterpolationFunctions<C>
     : C extends SystemPropertyConfig<T>
       ? StyledInterpolationFunctions<C>
-      : never);
+      : never) & {
+    get: A extends ThemeValueGetter ? A : never;
+  };
 
 type InterpolateReturnTuple = readonly [string, InterpolationReturn, Breakpoint | null];
 
@@ -229,11 +232,17 @@ const createSystemProperties = <T extends SystemPropertyConfig[]>(configs: T): S
   return interpolationFn as SystemFn<T>;
 };
 
-const system = <const T extends SystemPropertyConfig | SystemPropertyConfig[]>(
-  config: T
-): SystemFn<T> => {
+const system = <
+  const T extends SystemPropertyConfig | SystemPropertyConfig[],
+  const A extends ThemeValueGetter,
+>(
+  config: T,
+  getterFn?: A
+): SystemFn<T, A> => {
   const arrayConfig = enforceArray(config);
-  return createSystemProperties(arrayConfig) as SystemFn<T>;
+  const properties = createSystemProperties(arrayConfig);
+  properties.get = getterFn;
+  return properties as SystemFn<T, A>;
 };
 
 export type {

diff --git a/src/Button/Button.spec.tsx b/src/Button/Button.spec.tsx
@@ -363,14 +363,14 @@ test('render button with start icon', () => {
   const { container, getByTestId } = renderComponent({ startIcon: <div>myIcon</div> });
   expect(container).toMatchSnapshot();
   expect(getByTestId('pbl-button-icon')).toBeDefined();
-  expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-right', '8px');
+  expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-right', '0.5rem');
 });
 
 test('render button with end icon', () => {
   const { container, getByTestId } = renderComponent({ endIcon: <div>myIcon</div> });
   expect(container).toMatchSnapshot();
   expect(getByTestId('pbl-button-icon')).toBeDefined();
-  expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-left', '8px');
+  expect(getByTestId('pbl-button-icon')).toHaveStyleRule('margin-left', '0.5rem');
 });
 
 test('disable button element when disabled prop is true', () => {