Adds React FlexGrid

agnosticui-react/__mocks__/fileMock.js

@@ -0,0 +1,2 @@
+module.exports = 'file-stub';
+

agnosticui-react/__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+module.exports = {};
+

agnosticui-react/package.json

@@ -39,6 +39,7 @@
     "babel-jest": "^26.3.0",
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^3.0.0",
+    "core-js": "^3.6.5",
     "css-loader": "^4.2.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.4.2",
@@ -50,6 +51,9 @@
     "webpack-dev-server": "^3.2.1"
   },
   "jest": {
+    "setupFilesAfterEnv": [
+      "./setupTests.js"
+    ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|less)$": "identity-obj-proxy"
@@ -58,4 +62,4 @@
       "^.+\\.js$": "babel-jest"
     }
   }
-}
+}

agnosticui-react/setupTests.js

@@ -0,0 +1,2 @@
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';

agnosticui-react/src/stories/FlexGrid/FlexGrid.js

@@ -25,10 +25,15 @@ const propTypes = {
 const FlexGrid = (props) => {
   const containerClass = getClass('flexgrid-container')
   const classNames = [props.className, containerClass]
+  const gridPropsCreated = createProps(propTypes, props, classNames)
 
+  // We're essentially taking the props passed in and:
+  //   - rejecting any props passed in that are not in propTypes
+  //   - adding classNames to our new react element below
+  //   - allowing for a custom tagName or falling back to 'div'
   return React.createElement(
     props.tagName || 'div',
-    createProps(propTypes, props, classNames)
+    gridPropsCreated
   )
 }
 

agnosticui-react/src/stories/FlexGrid/FlexRow.js

@@ -49,7 +49,8 @@ function getRowClassNames(props) {
 }
 
 export function getRowProps(props) {
-  return createProps(propTypes, props, getRowClassNames(props))
+  const rowPropsCreated = createProps(propTypes, props, getRowClassNames(props))
+  return rowPropsCreated;
 }
 
 const FlexRow = (props) => {

agnosticui-react/src/stories/FlexGrid/createProps.test.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import createProps from './createProps';
+
+const propTypes = {
+  b: PropTypes.bool,
+  s: PropTypes.string,
+  children: PropTypes.node,
+}
+test('removes prop types besides children', async () => {
+  const classNames = ['class_a', 'class_b']
+  const props = {
+    s: 'string', // expected: gets removed
+    b: true, // expected: gets removed
+    style: 'color: hotpink;', // expected: preserved
+    children: 'le children',
+  }
+
+  const result = createProps(propTypes, props, classNames)
+  expect(result.children).toEqual('le children')
+  expect(result.className).toEqual('class_a class_b')
+  // keys that are not in propTypes are preserved
+  expect(result.style).toBeDefined();
+
+  // only the children component prop (and props not in propTypes) are preserved
+  expect(result.b).toBeUndefined()
+  expect(result.s).toBeUndefined()
+})