react-outline 1.7.3 → 2.1.0

package/dist/utils/pubsub.js

@@ -3,20 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
+exports["default"] = void 0;
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var pubsub = new function () {
-
   var vals = {};
   var subscribers = [];
-
   this.publish = function (key, value) {
-
     vals[key] = value;
     subscribers.forEach(function (subscriber) {
       return subscriber(vals);
     });
   };
-
   this.subscribe = function (subscriber) {
     return subscribers.push(subscriber);
   };
@@ -24,31 +23,18 @@ var pubsub = new function () {
     return vals;
   };
   this.clear = function () {
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
-
+    var _iterator = _createForOfIteratorHelper(Object.getOwnPropertyNames(vals)),
+      _step;
     try {
-      for (var _iterator = Object.getOwnPropertyNames(vals)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var className = _step.value;
-
         delete vals[className];
       }
     } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
+      _iterator.e(err);
     } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
-      }
+      _iterator.f();
     }
   };
 }();
-
-exports.default = pubsub;
+var _default = exports["default"] = pubsub;

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/index.d.ts

@@ -0,0 +1,149 @@
+import * as React from 'react';
+
+// CSS style value types
+type CSSValue = string | number;
+type CSSProperties = React.CSSProperties;
+
+// Color palette mapping
+type ColorMap = Record<string, string>;
+
+// Options for outline configuration
+interface OutlineOptions {
+    /** Enable caching of styles (default: false) */
+    caching?: boolean;
+    /** Color palette mapping for color values */
+    colors?: ColorMap;
+    /** Add name attribute to DOM elements for debugging (default: true) */
+    named?: boolean;
+}
+
+// CSS selector styles (for :hover, @media, etc.)
+type CSSSelector = {
+    [selector: string]: CSSProperties;
+};
+
+// Style definition with optional base and variant styles
+type StyleDefinition = CSSProperties | {
+    base?: CSSProperties;
+    [variant: string]: CSSProperties | undefined;
+};
+
+// Style input object - keys are style names
+type StyleInput = {
+    [styleName: string]: StyleDefinition;
+};
+
+// Logic function types
+type StyleLogicFn<T = any> = (arg: T) => CSSProperties;
+type StyleModifierFn<T = any> = (baseStyle: CSSProperties, arg: T) => CSSProperties;
+
+// Logic functions object - keys are style names
+type LogicInput = {
+    [styleName: string]: StyleLogicFn | StyleModifierFn;
+};
+
+// Props for generated styled components
+interface StyledComponentProps<T = any> extends React.HTMLAttributes<HTMLElement> {
+    /** Style overrides or variant flags */
+    style?: CSSProperties | Record<string, boolean> | T;
+    /** CSS selector overrides for dynamic styling */
+    css?: CSSSelector;
+    /** DOM event handlers with direct element access */
+    onDomEvent?: {
+        [eventName: string]: (element: Element, event: Event) => void;
+    };
+    children?: React.ReactNode;
+}
+
+// Generated styled component
+type StyledComponent = React.ComponentClass<StyledComponentProps>;
+
+// Style function that returns inline styles
+interface StyleFunction {
+    /** Get the inline styles, optionally with variant flags */
+    (variants?: Record<string, boolean>): CSSProperties;
+}
+
+// Tagged template literal function for creating styled components
+interface TagCreator {
+    (strings: TemplateStringsArray, ...values: any[]): StyledComponent;
+}
+
+// Combined style item - both a function and a tag creator
+type StyleItem = StyleFunction & TagCreator & {
+    /** Color palette if configured */
+    colors?: ColorMap;
+};
+
+// Processed styles object
+type ProcessedStyles<T extends StyleInput> = {
+    [K in keyof T]: StyleItem;
+} & {
+    /** Color palette if configured */
+    colors?: ColorMap;
+};
+
+// Outline function signature
+interface OutlineFunction {
+    /** Process style definitions into usable style functions */
+    <T extends StyleInput>(styles: T, logic?: LogicInput): ProcessedStyles<T>;
+    /** Color palette if configured via setOptions */
+    colors?: ColorMap;
+}
+
+// Outline function with options pre-configured
+interface ConfiguredOutlineFunction extends OutlineFunction {
+    /** Color palette if configured via withOptions */
+    colors?: ColorMap;
+}
+
+// Props for the Styles component
+interface StylesProps {
+    /** Optional: filter which styles to include */
+    [key: string]: any;
+}
+
+// Styles component for CSS output (media queries, hover states, etc.)
+interface StylesComponent extends React.FC<StylesProps> {
+    /** Get CSS string for server-side rendering */
+    toString(): string;
+}
+
+// Testing utilities
+interface TestingUtils {
+    /** Reset all generated CSS (useful in tests) */
+    resetCSS: () => void;
+}
+
+// Main outline function
+declare const outline: OutlineFunction;
+
+// Create outline function with custom options
+declare function withOptions(options: OutlineOptions): ConfiguredOutlineFunction;
+
+// Set global default options
+declare function setOptions(options: OutlineOptions): void;
+
+// Styles component for CSS injection
+declare const Styles: StylesComponent;
+
+// Testing utilities
+declare const testing: TestingUtils;
+
+export default outline;
+export { withOptions, setOptions, Styles, testing };
+export type {
+    OutlineOptions,
+    StyleInput,
+    LogicInput,
+    StyleDefinition,
+    StyleFunction,
+    StyledComponent,
+    StyledComponentProps,
+    ProcessedStyles,
+    ColorMap,
+    CSSProperties,
+    CSSSelector,
+    StylesProps,
+    TestingUtils,
+};

package/package.json

@@ -1,16 +1,23 @@
 {
   "name": "react-outline",
-  "version": "1.7.3",
+  "version": "2.1.0",
   "description": "react styling framework to keep your makeup clean",
-  "main": "./dist/main.js",
+  "main": "./dist/reactOutline.js",
+  "types": "./index.d.ts",
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
   "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 +43,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 +75,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/.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"