feat(box): use style-props package, create method to safelySpreadProps

Use style-props package over the types package

Create a method to safely spread props onto the Box component without
overriding styles from compositional use of Box

packages/paste-core/utilities/box/__tests__/SafelySpreadProps.test.ts

@@ -0,0 +1,26 @@
+import {safelySpreadBoxProps} from '../src/SafelySpreadProps';
+
+const badProps = {
+  foo: 'bar',
+  borderColor: 'borderColorSuccess',
+};
+
+const goodProps = {
+  baz: 'foo',
+  'aria-label': 'test',
+};
+
+describe('safelySpreadBoxProps', () => {
+  it('should not filter out good props', () => {
+    expect(safelySpreadBoxProps(goodProps)).toEqual({
+      baz: 'foo',
+      'aria-label': 'test',
+    });
+  });
+
+  it('should filter out bad props', () => {
+    expect(safelySpreadBoxProps(badProps)).toEqual({
+      foo: 'bar',
+    });
+  });
+});

packages/paste-core/utilities/box/package.json

@@ -28,13 +28,13 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^10.0.10",
-    "@twilio-paste/types": "^2.1.2",
+    "@twilio-paste/style-props": "^0.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "styled-system": "^5.1.2"
   },
   "devDependencies": {
-    "@twilio-paste/types": "^2.1.2",
+    "@twilio-paste/style-props": "^0.0.0",
     "csstype": "^2.6.6",
     "rollup": "^1.16.2",
     "rollup-plugin-babel": "^4.3.3",

packages/paste-core/utilities/box/src/SafelySpreadProps.ts

@@ -0,0 +1,35 @@
+import {
+  LAYOUT_PROPS,
+  SPACE_PROPS,
+  BACKGROUND_PROPS,
+  BORDER_PROPS,
+  SHADOW_PROPS,
+  POSITION_PROPS,
+  FLEXBOX_PROPS,
+} from '@twilio-paste/style-props';
+
+export const BOX_PROPS_TO_BLOCK = [
+  ...LAYOUT_PROPS,
+  ...SPACE_PROPS,
+  ...BACKGROUND_PROPS,
+  ...BORDER_PROPS,
+  ...SHADOW_PROPS,
+  ...POSITION_PROPS,
+  ...FLEXBOX_PROPS,
+  'backgroundColor',
+  'borderColor',
+  'className',
+  'style',
+];
+
+export const safelySpreadBoxProps = (props: {}): {} => {
+  // https://www.measurethat.net/Benchmarks/Show/6642/0/for-in-vs-reduce-vs-pick#latest_results_block
+  const newList = Object.keys(props).reduce((newObj, key) => {
+    if (!BOX_PROPS_TO_BLOCK.includes(key)) {
+      // eslint-disable-next-line no-param-reassign
+      newObj[key] = props[key];
+    }
+    return newObj;
+  }, {});
+  return newList;
+};

packages/paste-core/utilities/box/src/index.tsx

@@ -8,9 +8,17 @@ import {
   ShadowProps,
   PositionProps,
   FlexboxProps,
-} from '@twilio-paste/types';
+} from '@twilio-paste/style-props';
 
-interface Box extends LayoutProps, SpaceProps, BackgroundProps, BorderProps, ShadowProps, PositionProps, FlexboxProps {
+interface Box
+  extends React.HTMLAttributes<any>,
+    LayoutProps,
+    SpaceProps,
+    BackgroundProps,
+    BorderProps,
+    ShadowProps,
+    PositionProps,
+    FlexboxProps {
   as?: keyof JSX.IntrinsicElements;
 }
 
@@ -28,7 +36,7 @@ const borderColor = system({
   },
 });
 
-const Box = styled.div<Box>(
+const Box = styled.div(
   {
     boxSizing: 'border-box',
     minWidth: 0,
@@ -44,7 +52,8 @@ const Box = styled.div<Box>(
     boxShadow,
     position
   )
-);
+) as React.FC<Box>;
 
 Box.displayName = 'Box';
 export {Box};
+export * from './SafelySpreadProps';

packages/paste-core/utilities/box/tsconfig.build.json

@@ -9,7 +9,7 @@
   ],
   "references": [
     {
-      "path": "../../../paste-types"
+      "path": "../../../paste-style-props"
     }
   ]
 }