react-outline 1.7.2 → 2.0.0

package/dist/utils/replaceColors.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-exports.default = function (colors, style) {
-
+exports["default"] = _default;
+function _default(colors, style) {
   if (!colors) return style;
   var result = Object.assign({}, style);
   for (var key in result) {
@@ -14,4 +13,4 @@ exports.default = function (colors, style) {
     }
   }
   return result;
-};
+}

package/dist/utils/replacedStyleFn.js

@@ -3,15 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-exports.default = replacedStyleFn;
+exports["default"] = replacedStyleFn;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function replacedStyleFn(_ref, args) {
   var styleCSS = _ref.styleCSS,
-      styleFn = _ref.styleFn;
-
-
+    styleFn = _ref.styleFn;
   var processedStyles = 1 === styleFn.length ? styleFn(args[0]) : styleFn(styleCSS, args[0]);
 
   // const styleAsPropObj = 0===styleFn.length && "object" === typeof args[0] ? args[0] : {};
@@ -26,15 +22,14 @@ function replacedStyleFn(_ref, args) {
 
   //const autoAddStyles = [], firstVal = args[1]// || args[0];
   var autoAddStyles = [],
-      firstVal = args[1] || args[0];
+    firstVal = args[1] || args[0];
   //console.log(args)
-  if (!!firstVal && "object" === (typeof firstVal === "undefined" ? "undefined" : _typeof(firstVal))) {
+  if (!!firstVal && "object" === _typeof(firstVal)) {
     Object.keys(firstVal).forEach(function (cssName) {
       if (true === firstVal[cssName] && styleCSS && cssName in styleCSS) autoAddStyles.push(styleCSS[cssName]);
       //  else // to bind style value to output obj
       //    autoAddStyles.push({cssName:firstVal[cssName]})
     });
   }
-
   return Object.assign.apply(Object, [{}, styleBase].concat(autoAddStyles, [processedStyles]));
 }

package/dist/utils/sanitizeOutlineInput.js

@@ -3,45 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
-
-exports.default = sanitizeOutlineInput;
+exports["default"] = sanitizeOutlineInput;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 //+++++++++++++++++++++++++++++ { base:{}, foo: ()=> }
 //++++++++++++++++++++++++++++++++++++++++++++++++++++
 function sanitizeOutlineInput(_styles) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-
-  if ("object" !== (typeof _styles === "undefined" ? "undefined" : _typeof(_styles))) {
+  if ("object" !== _typeof(_styles) || Array.isArray(_styles)) {
     throw new Error("Bad style values: " + JSON.stringify(_styles));
   }
-
-  //+++++++++++++++++++++++++++++++++++++++ [ base, fn ]
-  //++++++++++++++++++++++++++++++++++++++++++++++++++++
-  if (Array.isArray(_styles)) {
-
-    _styles = Object.assign({}, { base: _styles[0] }, _styles[1]);
-  } else if (!("base" in _styles)) {
-
+  if (!("base" in _styles)) {
     var base = {},
-        fns = {};
+      fns = {};
 
     //++++++++++++++ { table: {}, header:{} }, fn:{ ()=> }
     //++++++++++++++++++++++++++++++++++++++++++++++++++++
 
     var optionsIsFns = true;
-
     for (var prop in options) {
       if (options.hasOwnProperty(prop) && "function" !== typeof options[prop]) {
         optionsIsFns = false;
       }
     }
-
     if (optionsIsFns) {
       Object.assign(fns, options);
     }
-
     for (var _prop in _styles) {
       //+++++++++++++++++++++++++++ { table: {}, header:{} }
       //++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -55,11 +41,12 @@ function sanitizeOutlineInput(_styles) {
         throw new Error("Bad style value: " + JSON.stringify(_styles[_prop]));
       }
     }
-    _styles = Object.assign({}, { base: base }, fns);
+    _styles = Object.assign({}, {
+      base: base
+    }, fns);
   }
 
   // apply sharing
-
   var _loop = function _loop(_prop2) {
     if (0 < _prop2.indexOf(',')) {
       _prop2.split(',').map(function (x) {
@@ -71,16 +58,13 @@ function sanitizeOutlineInput(_styles) {
         // e.g. "foo , bar" (cross cutting style) is in style Object
         // but "foo" & "bar" are functions
         root[x] && root[x].base ? root[x].base : root[x]);
-
         root[x] && root[x].base ? root[x].base = val : root[x] = val;
       });
       delete _styles.base[_prop2];
     }
   };
-
   for (var _prop2 in _styles.base) {
     _loop(_prop2);
   }
-
   return _styles;
 }

package/dist/utils/separateCssStyle.js

@@ -3,24 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = separateCssStyle;
-
+exports["default"] = separateCssStyle;
 //import { specialCharacters } from './index'
 
 function separateCssStyle(styles) {
-
   var css = {};
   var style = {};
-
   for (var name in styles) {
     //if(specialCharacters.includes(name[0]) )//|| !!name.match(new RegExp(`[${specialInnerCharacters}]`, "gi")))
     //if (!/^\w+$/.test(name))
     if (!/^[a-zA-Z0-9-]+$/.test(name)) css[name] = styles[name];else style[name] = styles[name];
   }
-
   if (0 === Object.keys(css).length) css = null;
-
   if (0 === Object.keys(style).length) style = null;
-
-  return { css: css, style: style };
+  return {
+    css: css,
+    style: style
+  };
 }

package/dist/wrapStyles.js

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-exports.default = function (userSetOptions) {
+exports["default"] = _default;
+var _styleItem = _interopRequireDefault(require("./styleItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+//=====================================================
+//========================================= wrap Styles
+//=====================================================
+
+function _default(userSetOptions) {
   return function wrapStyles(_styles, options, styleCSS) {
-
     options = Object.assign({}, userSetOptions, options);
     //  const radium = !!options.radium;
     var caching = !!options.caching;
@@ -14,21 +19,20 @@ exports.default = function (userSetOptions) {
     styleCSS = _styles.base || styleCSS;
     var replacedStyle = {};
     if (_styles.base) replacedStyle.base = styleCSS;
-
-    var styleItemGen = (0, _styleItem2.default)({ _styles: _styles, replacedStyle: replacedStyle, styleCSS: styleCSS, colors: colors, options: options, caching: caching, wrapStyles: wrapStyles });
-
+    var styleItemGen = (0, _styleItem["default"])({
+      _styles: _styles,
+      replacedStyle: replacedStyle,
+      styleCSS: styleCSS,
+      colors: colors,
+      options: options,
+      caching: caching,
+      wrapStyles: wrapStyles
+    });
     Object.keys(_styles).concat(Object.keys(styleCSS)).filter(function (item, pos, a) {
       return a.indexOf(item) === pos;
     }).filter(function (styleName) {
       return "base" !== styleName;
     }).forEach(styleItemGen);
-
     return replacedStyle;
   };
-};
-
-var _styleItem = require("./styleItem");
-
-var _styleItem2 = _interopRequireDefault(_styleItem);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+}

package/package.json

@@ -1,16 +1,21 @@
 {
   "name": "react-outline",
-  "version": "1.7.2",
+  "version": "2.0.0",
   "description": "react styling framework to keep your makeup clean",
-  "main": "./dist/main.js",
+  "main": "./dist/reactOutline.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
+    "prepare": "cp .hooks/* .git/hooks/ 2>/dev/null && chmod +x .git/hooks/* || true",
     "build": "babel --copy-files source --out-dir dist",
     "build:watch": "babel --copy-files source --out-dir dist -s --source-maps inline -w",
     "test": "jest --no-cache ",
     "test:go": "npm test -- --watch --coverage",
     "test:update": "npm test -- --updateSnapshot",
     "test:cover": "npm test -- --coverage --no-cache",
-    "test:watch": "npm test -- --watch --runInBand"
+    "test:watch": "npm test -- --watch --runInBand",
+    "release": "bash scripts/_publish.sh"
   },
   "repository": {
     "type": "git",
@@ -36,28 +41,31 @@
   "dependencies": {
     "add-px-to-style": "^1.0.0",
     "hyphenate-style-name": "^1.0.2",
-    "inline-style-prefixer": "^3.0.6",
-    "react": "^15.6.1"
+    "inline-style-prefixer": "^3.0.6"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0 <20.0.0"
   },
   "devDependencies": {
-    "babel": "^6.23.0",
-    "babel-cli": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "coveralls": "^2.13.1",
-    "enzyme": "^2.9.1",
-    "faker": "^4.1.0",
-    "jest": "^20.0.4",
-    "raw-loader": "^0.5.1",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
+    "@babel/cli": "^7.23.0",
+    "@babel/core": "^7.23.0",
+    "@babel/plugin-proposal-decorators": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.23.0",
+    "@faker-js/faker": "^8.3.0",
+    "@testing-library/jest-dom": "^6.1.0",
+    "@testing-library/react": "^14.1.0",
+    "coveralls": "^3.1.1",
+    "esbuild": "^0.24.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "raw-loader": "^4.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0"
   },
   "jest": {
-    "globals": {
-      "__TEST__": true
-    },
+    "testEnvironment": "jsdom",
     "moduleNameMapper": {
       "\\.(css|jpg|png)$": "<rootDir>/empty-module.js",
       "^raw-loader": "<rootDir>/empty-module.js",
@@ -65,13 +73,17 @@
       "^react-addons-css-transition-group$": "<rootDir>/empty-module.js"
     },
     "testPathIgnorePatterns": [
-      "/node_modules/"
+      "/node_modules/",
+      "example.test.js"
     ],
     "coverageDirectory": "coverage",
     "collectCoverageFrom": [
       "source/**/*.js",
       "!source/utils/index.js"
     ],
-    "verbose": true
+    "verbose": true,
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ]
   }
-}
+}

package/.babelrc

@@ -1,6 +0,0 @@
-
-{
-  "presets": ["react", "es2015" ],
-  "plugins": ["transform-decorators-legacy"]
-
-}

package/.npmignore

@@ -1,30 +0,0 @@
-# Logs
-logs
-*.log
-
-# System Files
-.DS_Store
-._.DS_Store
-Thumbs.db
-
-# Dependency directory
-node_modules
-example/node_modules
-example/storybook-static
-example/dist
-
-# Linter
-linters/
-
-# testing
-/coverage
-
-# compiled output
-/build
-/Release
-/dll
-.tmp
-documentation/*.html
-
-# misc
-.env

package/.travis.yml

@@ -1,7 +0,0 @@
-language: node_js
-node_js:
-  - "7.9.0"
-# https://strongloop.com/strongblog/npm-modules-travis-coveralls/
-script: npm run-script test:cover
-# Send coverage data to Coveralls
-after_success: "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"

package/__snapshots__/cornerCases.test.js.snap

@@ -1,139 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CSS selectors should allow for color replacment 1`] = `
-<div>
-  <style>
-     .react-outline- .abc{ font-size:20px; } .react-outline-{color:squanchy; }
-  </style>
-  <div
-    className="react-outline-"
-    name="div"
-  />
-</div>
-`;
-
-exports[`CSS selectors should allow you to select a nested element 1`] = `
-<div>
-  <style>
-     .react-outline- .abc{ font-size:20px; } .react-outline-{color:red; }
-  </style>
-  <div
-    className="react-outline-"
-    name="div"
-  />
-</div>
-`;
-
-exports[`CSS selectors should work with user defined callNames 1`] = `
-<div>
-  <div
-    className="a react-outline-"
-    name="a"
-  />
-  <div
-    className="react-outline-"
-    name="a"
-  />
-  <div
-    className="b"
-    name="b"
-  />
-  <div
-    name="b"
-  />
-</div>
-`;
-
-exports[`In production mode should allow cross cutting style to map to only functions 1`] = `
-<span
-  name="foo"
-  style={
-    Object {
-      "background": "gray",
-      "fontSize": "20px",
-    }
-  }
-/>
-`;
-
-exports[`In production mode should allow cross cutting style to map to only functions 2`] = `
-<span
-  name="bar"
-  style={
-    Object {
-      "background": "black",
-      "fontSize": "20px",
-    }
-  }
-/>
-`;
-
-exports[`In production mode should be able to destructur assignments on generated element 1`] = `
-<div
-  name="cats"
-  style={
-    Object {
-      "color": "pink",
-    }
-  }
-/>
-`;
-
-exports[`In production mode should be able to destructur assignments on generated element 2`] = `
-<div
-  name="cats"
-  style={
-    Object {
-      "color": "blue",
-    }
-  }
-/>
-`;
-
-exports[`In production mode should be able to pass an value to style logic 1`] = `
-<div
-  name="dogs"
-  style={
-    Object {
-      "color": "white",
-    }
-  }
-/>
-`;
-
-exports[`In production mode should be able to pass an value to style logic 2`] = `
-<div
-  name="dogs"
-  style={
-    Object {
-      "color": "black",
-    }
-  }
-/>
-`;
-
-exports[`In production mode should be able to pass true value 1`] = `
-<input
-  disabled={true}
-  name="input"
-  style={
-    Object {
-      "background": "gray",
-      "color": "red",
-      "fontSize": "20px",
-    }
-  }
-/>
-`;
-
-exports[`In production mode should generated an element with a logic fn that can take undefined 1`] = `
-<span
-  name="foo"
-  style={
-    Object {
-      "background": "gray",
-      "fontSize": "20px",
-    }
-  }
-/>
-`;