@cloudflare/component-box 2.4.6 → 2.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +813 -2632
- package/es/Box.js +15 -13
- package/es/BoxTheme.js +4 -1
- package/es/index.js +1 -1
- package/es/propertiesSpec.js +1 -1
- package/lib/Box.js +3 -1
- package/lib/index.js +5 -5
- package/package.json +10 -6
package/es/Box.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
function
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
2
4
|
|
|
3
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
6
|
|
|
5
7
|
import PropTypes from 'prop-types';
|
|
6
8
|
import { createStyledComponent } from '@cloudflare/style-container';
|
|
7
9
|
import propertiesSpec from './propertiesSpec';
|
|
8
|
-
|
|
10
|
+
var propertyNames = Object.keys(propertiesSpec); // Generates styles given the provided props.
|
|
9
11
|
//
|
|
10
12
|
// This is driven by the metadata provided in propertiesSpec
|
|
11
13
|
// and produces a data structure like this:
|
|
@@ -19,19 +21,19 @@ const propertyNames = Object.keys(propertiesSpec); // Generates styles given the
|
|
|
19
21
|
// See propertySpec.js for more detail
|
|
20
22
|
//
|
|
21
23
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
var styles = props => {
|
|
25
|
+
var styles = {};
|
|
26
|
+
var propKeys = Object.keys(props);
|
|
25
27
|
propKeys.forEach(name => {
|
|
26
28
|
// Lookup the spec for the property
|
|
27
|
-
|
|
29
|
+
var spec = propertiesSpec[name]; // Ignore non-style props
|
|
28
30
|
|
|
29
31
|
if (spec === undefined) {
|
|
30
32
|
return;
|
|
31
33
|
} // Get the style value from props
|
|
32
34
|
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
var value = props[name]; // pre-process the value with all pre-processors
|
|
35
37
|
|
|
36
38
|
if (spec.preprocessWith) {
|
|
37
39
|
spec.preprocessWith.forEach(fn => {
|
|
@@ -49,17 +51,17 @@ const styles = props => {
|
|
|
49
51
|
return styles;
|
|
50
52
|
};
|
|
51
53
|
|
|
52
|
-
|
|
54
|
+
var Box = createStyledComponent(styles, 'div');
|
|
53
55
|
|
|
54
|
-
|
|
56
|
+
var checkForViolations = props => {
|
|
55
57
|
// Check for conflicts given the spec's conflictsWith property
|
|
56
58
|
// See propertySpec.js for more detail
|
|
57
59
|
propertyNames.forEach(propName => {
|
|
58
|
-
|
|
60
|
+
var spec = propertiesSpec[propName];
|
|
59
61
|
if (!props[propName] || !spec.conflictsWith) return;
|
|
60
62
|
spec.conflictsWith.forEach(otherPropName => {
|
|
61
63
|
if (props[propName] && props[otherPropName]) {
|
|
62
|
-
|
|
64
|
+
var msg = "".concat(propName, " cannot be set in conjunction with ").concat(otherPropName);
|
|
63
65
|
console.error(msg);
|
|
64
66
|
}
|
|
65
67
|
});
|
|
@@ -112,8 +114,8 @@ const checkLineHeightViolations = props => {
|
|
|
112
114
|
// Extract proptypes from the propertiesSpec
|
|
113
115
|
|
|
114
116
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
+
var extractPropTypes = () => {
|
|
118
|
+
var propTypes = {}; // Loop through all property specs and pluck the prop type
|
|
117
119
|
|
|
118
120
|
propertyNames.forEach(name => {
|
|
119
121
|
propTypes[name] = propertiesSpec[name].propType;
|
package/es/BoxTheme.js
CHANGED
package/es/index.js
CHANGED
package/es/propertiesSpec.js
CHANGED
|
@@ -4,7 +4,7 @@ import { variables } from '@cloudflare/style-const'; // eslint-disable-line beha
|
|
|
4
4
|
import { rem } from 'polished';
|
|
5
5
|
var numberOrString = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
var pxToRem = value => {
|
|
8
8
|
if (typeof value === 'number' || /\d+px/.test(value)) {
|
|
9
9
|
return rem(value, variables.fontSize);
|
|
10
10
|
}
|
package/lib/Box.js
CHANGED
|
@@ -13,7 +13,9 @@ var _propertiesSpec = _interopRequireDefault(require("./propertiesSpec"));
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
function
|
|
16
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17
|
+
|
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
19
|
|
|
18
20
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
21
|
|
package/lib/index.js
CHANGED
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
6
|
+
exports.Box = void 0;
|
|
7
|
+
Object.defineProperty(exports, "BoxTheme", {
|
|
7
8
|
enumerable: true,
|
|
8
9
|
get: function get() {
|
|
9
|
-
return
|
|
10
|
+
return _BoxTheme.default;
|
|
10
11
|
}
|
|
11
12
|
});
|
|
12
|
-
Object.defineProperty(exports, "
|
|
13
|
+
Object.defineProperty(exports, "BoxUnstyled", {
|
|
13
14
|
enumerable: true,
|
|
14
15
|
get: function get() {
|
|
15
|
-
return
|
|
16
|
+
return _Box.default;
|
|
16
17
|
}
|
|
17
18
|
});
|
|
18
|
-
exports.Box = void 0;
|
|
19
19
|
|
|
20
20
|
var _styleContainer = require("@cloudflare/style-container");
|
|
21
21
|
|
package/package.json
CHANGED
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudflare/component-box",
|
|
3
3
|
"description": "Cloudflare Box ComponentThis is styling component similar to cf-component-flex which allows for arbitrary styling. This component should only be used when the built in style doesn't quite fit the bill and when it can't be done with fela. Ideally, cfui components should have the right styling built in for most cases. In the few edge cases that pop up in real world feature development, this is an alternative to wrapping your component in a `<div>` or `<span>` and styling it with css to accomodate one-offs. Also, note that using Box effectively performs a component level CSS reset, as all props not provided will be pulled from the default theme. These defaults, outlined in propertiesSpec, either match the browser defaults, or are taken from our global styles as defined by cf-style-const.",
|
|
4
|
-
"version": "2.4.
|
|
4
|
+
"version": "2.4.7",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
7
7
|
"author": "James Culveyhouse <jculveyhouse@cloudflare.com>",
|
|
8
8
|
"license": "BSD-3-Clause",
|
|
9
9
|
"publishConfig": {
|
|
10
|
-
"
|
|
11
|
-
"
|
|
10
|
+
"access": "public",
|
|
11
|
+
"main": "lib/index.js",
|
|
12
|
+
"module": "es/index.js"
|
|
12
13
|
},
|
|
13
14
|
"dependencies": {
|
|
14
15
|
"@cloudflare/types": "^6.15.15",
|
|
@@ -16,6 +17,10 @@
|
|
|
16
17
|
"polished": "^4.1.4",
|
|
17
18
|
"prop-types": "^15.6.0"
|
|
18
19
|
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@cloudflare/style-const": "^5.3.9",
|
|
22
|
+
"@cloudflare/style-container": "^7.8.41"
|
|
23
|
+
},
|
|
19
24
|
"peerDependencies": {
|
|
20
25
|
"@cloudflare/style-const": "^5.3.9",
|
|
21
26
|
"@cloudflare/style-container": "^7.8.41",
|
|
@@ -31,6 +36,5 @@
|
|
|
31
36
|
"test": "stratus test",
|
|
32
37
|
"test-coverage": "stratus test --coverage",
|
|
33
38
|
"test-watch": "stratus test --watch"
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
}
|
|
39
|
+
}
|
|
40
|
+
}
|