@tds/util-prop-types - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/telusdigital/tds/compare/@tds/util-prop-types@1.0.0...@tds/util-prop-types@1.1.0) (2018-12-10)
+
+
+### Features
+
+* **util-prop-types:** add responsiveProps ([5b4bc18](https://github.com/telusdigital/tds/commit/5b4bc18))
+
+
+
+
 <a name="1.0.0"></a>
@@ -8,0 +19,0 @@ # 1.0.0 (2018-10-24)

dist/index.cjs.js

@@ -5,2 +5,6 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var PropTypes = _interopDefault(require('prop-types'));
+
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
@@ -12,4 +16,2 @@ return typeof obj;
 
-/* eslint-disable import/prefer-default-export */
-
 var componentWithName = function componentWithName(passedName) {
@@ -61,3 +63,19 @@ if (typeof passedName !== 'string') {
 
+/**
+ * Offset the specified number of columns within the 'sm' breakpoint range.
+ *
+ * @since 1.2.0
+ */
+function responsiveProps(type) {
+  return PropTypes.oneOfType([type, PropTypes.shape({
+    xs: type,
+    sm: type,
+    md: type,
+    lg: type,
+    xl: type
+  })]);
+}
+
 exports.componentWithName = componentWithName;
+exports.responsiveProps = responsiveProps;
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

@@ -0,1 +1,3 @@
+import PropTypes from 'prop-types';
+
 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
@@ -7,4 +9,2 @@ return typeof obj;
 
-/* eslint-disable import/prefer-default-export */
-
 var componentWithName = function componentWithName(passedName) {
@@ -56,3 +56,18 @@ if (typeof passedName !== 'string') {
 
-export { componentWithName };
+/**
+ * Offset the specified number of columns within the 'sm' breakpoint range.
+ *
+ * @since 1.2.0
+ */
+function responsiveProps(type) {
+  return PropTypes.oneOfType([type, PropTypes.shape({
+    xs: type,
+    sm: type,
+    md: type,
+    lg: type,
+    xl: type
+  })]);
+}
+
+export { componentWithName, responsiveProps };
 //# sourceMappingURL=index.es.js.map

index.cjs.js

@@ -1,5 +0,3 @@
-const { componentWithName } = require('./dist/index.cjs')
+const propTypes = require('./dist/index.cjs')
 
-module.exports = {
-  componentWithName,
-}
+module.exports = propTypes

index.es.js

@@ -1,5 +0,3 @@
-import { componentWithName } from './dist/index.es'
+import * as propTypes from './dist/index.es'
 
-export default {
-  componentWithName,
-}
+export default propTypes

package.json

 {
   "name": "@tds/util-prop-types",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "TDS proptypes",
@@ -22,3 +22,6 @@ "main": "dist/index.cjs.js",
   },
-  "homepage": "http://tds.telus.com"
+  "homepage": "http://tds.telus.com",
+  "dependencies": {
+    "prop-types": "^15.6.2"
+  }
 }

prop-types.js

@@ -1,56 +0,4 @@
-/* eslint-disable import/prefer-default-export */
+import componentWithName from './componentWithName'
+import responsiveProps from './responsiveProps'
 
-export const componentWithName = passedName => {
-  if (typeof passedName !== 'string') {
-    throw new Error('passedName must be a string')
-  }
-  const checkProp = (props, propName, componentName) => {
-    if (Array.isArray(props[propName])) {
-      // Iterates through every child and try to find the first element that does not match the passed name
-      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-      return props[propName]
-        .map((_, index) => checkProp(props[propName], index, componentName))
-        .find(Boolean)
-    } else if (
-      (props[propName] && typeof props[propName] !== 'object') ||
-      (props[propName] && props[propName].type.name !== passedName)
-    ) {
-      return new Error(
-        `${componentName}: Component passed to \`${propName}\` prop should be ${passedName}`
-      )
-    }
-    return undefined
-  }
-
-  const checkRequired = (props, propName, componentName) => {
-    if (props[propName] === undefined) {
-      return new Error(
-        `The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${
-          props[propName]
-        }.`
-      )
-    }
-    return undefined
-  }
-
-  const createValidate = isRequired => {
-    if (isRequired) {
-      return (props, propName, componentName) => {
-        const checkForError = checkProp(props, propName, componentName)
-
-        if (checkForError) {
-          return checkForError
-        }
-
-        return checkRequired(props, propName, componentName)
-      }
-    }
-
-    return checkProp
-  }
-
-  const validate = createValidate()
-  validate.isRequired = createValidate(true)
-
-  return validate
-}
+export { componentWithName, responsiveProps }

PropTypes.md

 ```js static
-import { * as TDSPropTypes } from '@tds/util-prop-types'
+import * as TDSPropTypes from '@tds/util-prop-types'
 ```
@@ -16,2 +16,4 @@
 ```jsx noeditor static
+import { componentWithName } from '@tds/util-prop-types'
+
 const PlanChooser = () => <fieldset>{children}</fieldset>
@@ -27,4 +29,63 @@
 PlanChooser.propTypes = {
-  children: TDSPropTypes.componentWithName('Radio').isRequired,
+  children: componentWithName('Radio').isRequired,
 }
 ```
+
+### <a name="responsiveProps"></a>`responsiveProps(propType)`
+
+#### Using a component with `responsiveProps`
+
+Responsive props all follow the same pattern.
+
+- When passed a **single** value, the value will be used for all breakpoints
+- When passed an **object**, each value will be applied to its corresponding breakpoint (xs, sm, md, lg, xl)
+  - When using an object, the value is applied to its breakpoint and all breakpoints above until overwritten
+
+The below example shows two ways you can build a `repsonsiveProps` object to create a `FlexGrid.Col` that is `'center'` on `xs` and `sm`, and `'left'` on `md`, `lg`, `xl`.
+
+```js noeditor static
+<FlexGrid.Col
+  align={{
+    xs: 'center',
+    sm: 'center',
+    md: 'left',
+    lg: 'left',
+    xl: 'left'
+  }}
+/>
+
+// or
+
+<FlexGrid.Col align={{ xs: 'center', md: 'left' }} />
+```
+
+#### Creating a component with `responsiveProps`
+
+To create `responsiveProps` pass the `PropType` or multiple prop types in the form of `PropTypes.oneOfType()` to `responsiveProps()` like so.
+
+```jsx noeditor static
+import { responsiveProps } from '@tds/util-prop-types'
+
+const MyComponent = ({ align }) => (
+  // ...
+)
+
+MyComponent.propTypes = {
+  align: responsiveProps(PropTypes.string)
+};
+```
+
+will create the following PropType structure
+
+```jsx noeditor static
+PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.shape({
+    xs: PropTypes.string,
+    sm: PropTypes.string,
+    md: PropTypes.string,
+    lg: PropTypes.string,
+    xl: PropTypes.string,
+  }),
+])
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25055

increased by20.19%

Number of package files

14

increased by16.67%

Lines of code

360

increased by15.02%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedprop-types@^15.6.2

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)