react-styled-spacer - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

dist/functions/createThemeConfig.d.ts

+import { CreateSpacerConfigParams } from '../types';
+declare const createSpacerConfig: ({ custom, ...config }: CreateSpacerConfigParams) => {
+    spacers: {
+        debug?: boolean;
+        multiplier?: number;
+        default?: number;
+    };
+};
+export default createSpacerConfig;

dist/functions/createThemeConfig.js

+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var createSpacerConfig = function (_a) {
+    var _b = _a.custom, custom = _b === void 0 ? {} : _b, config = __rest(_a, ["custom"]);
+    return ({
+        spacers: __assign(__assign({}, config), custom),
+    });
+};
+exports.default = createSpacerConfig;

dist/index.d.ts

@@ -1,3 +0,5 @@
-import Spacer, { SpacerProps } from './Spacer';
-export { SpacerProps };
+import createThemeConfig from './functions/createThemeConfig';
+import Spacer from './Spacer';
+import type { CreateSpacerConfigParams, SpacerConfig, SpacerProps } from './types';
+export { SpacerProps, createThemeConfig, CreateSpacerConfigParams, SpacerConfig };
 export default Spacer;

dist/index.js

@@ -6,3 +6,6 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createThemeConfig = void 0;
+var createThemeConfig_1 = __importDefault(require("./functions/createThemeConfig"));
+exports.createThemeConfig = createThemeConfig_1.default;
 var Spacer_1 = __importDefault(require("./Spacer"));
 exports.default = Spacer_1.default;

dist/Spacer/index.d.ts

@@ -1,3 +0,2 @@
-import Spacer, { SpacerProps } from './Spacer';
-export { SpacerProps };
+import Spacer from './Spacer';
 export default Spacer;

dist/Spacer/Spacer.d.ts

 import { FC } from 'react';
-export declare type SpacerProps = {
-    /** width */
-    w?: number | string;
-    /** height */
-    h?: number | string;
-    /** flex-grow */
-    grow?: number | string;
-    /** flex-shrink */
-    shrink?: number | string;
-};
+import { SpacerProps } from '../types';
 declare const Spacer: FC<SpacerProps & {
@@ -13,0 +4,0 @@ children?: any[];

dist/Spacer/styled.js

@@ -29,7 +29,6 @@ "use strict";
 var debugStyles = (0, native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: hotpink;\n"], ["\n  background: hotpink;\n"])));
-function endsWith(value, strings) {
-    return strings.some(function (s) { return value.endsWith(s); });
-}
-function getSuffix(space) {
-    var hasSuffix = endsWith(space.toString(), ['rem', 'em', 'vh', 'vw', 'px']);
+var endsWith = function (value, strings) { return strings.some(function (s) { return value.endsWith(s); }); };
+var acceptableSuffixes = ['rem', 'em', 'vh', 'vw', 'px'];
+var getSuffix = function (space) {
+    var hasSuffix = endsWith(space.toString(), acceptableSuffixes);
     if (hasSuffix) {
@@ -39,11 +38,13 @@ return space;
     return space + "px";
-}
+};
+var getDefaultSize = function (theme) { var _a; return (((_a = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _a === void 0 ? void 0 : _a.debug) ? 10 : 0); };
+var getHeight = function (theme, h) { var _a, _b, _c, _d, _e; return (_e = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _a === void 0 ? void 0 : _a[h]) !== null && _b !== void 0 ? _b : h) !== null && _c !== void 0 ? _c : (_d = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _d === void 0 ? void 0 : _d.default) !== null && _e !== void 0 ? _e : getDefaultSize(theme); };
+var getWidth = function (theme, w) { var _a, _b, _c, _d, _e; return (_e = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _a === void 0 ? void 0 : _a[w]) !== null && _b !== void 0 ? _b : w) !== null && _c !== void 0 ? _c : (_d = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _d === void 0 ? void 0 : _d.default) !== null && _e !== void 0 ? _e : getDefaultSize(theme); };
+var getMultiplier = function (theme) { var _a, _b; return (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _a === void 0 ? void 0 : _a.multiplier) !== null && _b !== void 0 ? _b : 1; };
 exports.Space = native_1.default.View(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  height: ", ";\n  width: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
-    var _b;
     var h = _a.h, theme = _a.theme;
-    return getSuffix(((_b = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _b === void 0 ? void 0 : _b[h]) || h || 0);
+    return getSuffix(getHeight(theme, h) * getMultiplier(theme));
 }, function (_a) {
-    var _b;
     var w = _a.w, theme = _a.theme;
-    return getSuffix(((_b = theme === null || theme === void 0 ? void 0 : theme.spacers) === null || _b === void 0 ? void 0 : _b[w]) || w || 0);
+    return getSuffix(getWidth(theme, w) * getMultiplier(theme));
 }, function (_a) {
@@ -50,0 +51,0 @@ var grow = _a.grow;

package.json

 {
   "name": "react-styled-spacer",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Spacer component for margins in react and react-native",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -17,4 +17,14 @@ # React Styled Spacer
 
-const Article = () => (
-  <ThemeProvider theme={{ spacers: { small: 10 } }}>
+const App = () => (
+  const spacerConfig = createSpacerConfig({
+    debug: false,
+    multiplier: 1,
+    default: 0
+    custom: {
+      small: 10,
+      medium: 20,
+    }
+  })
+
+  <ThemeProvider theme={{ ...spacerConfig }}>
     <div>
@@ -40,3 +50,3 @@ <h1>Lorem ipsum</h1>
 
-## Props
+## Spacer Props
 
@@ -49,1 +59,10 @@ | Property | type           | required | description                          |
 | shrink   | string, number | false    | flex-shrink property for flexbox use |
+
+## createSpacerConfig params
+
+| Property   | type           | required | default | description                                |
+| ---------- | -------------- | -------- | ------- | ------------------------------------------ |
+| custom     | object         | false    | {}      | Maps the key to represent a value as w/h   |
+| debug      | boolean        | false    | false   | Shows spacers                              |
+| default    | string, number | false    | 0       | Default value for height and width         |
+| multiplier | number         | false    | 1       | Scaling multiplier applied to every spacer |

No alert changes

Improved metrics

Total package byte prevSize

12566

39.54%

Number of package files

12

20%

Lines of code

201

23.31%

Number of lines in readme file

66

40.43%

No dependency changes