react-outline 1.7.2 → 2.0.0

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.
Files changed (84) hide show
  1. package/README.md +151 -116
  2. package/dist/Styles.js +34 -35
  3. package/dist/element.js +69 -88
  4. package/dist/main.js +22 -35
  5. package/dist/reactOutline.js +241 -0
  6. package/dist/reactOutline.js.map +7 -0
  7. package/dist/styleItem.js +105 -91
  8. package/dist/utils/buildCssString.js +2 -2
  9. package/dist/utils/genCss.js +21 -32
  10. package/dist/utils/genStyles.js +13 -26
  11. package/dist/utils/hasKids.js +2 -4
  12. package/dist/utils/index.js +81 -61
  13. package/dist/utils/makeid.js +3 -6
  14. package/dist/utils/object2css.js +10 -22
  15. package/dist/utils/pubsub.js +10 -24
  16. package/dist/utils/replaceColors.js +3 -4
  17. package/dist/utils/replacedStyleFn.js +5 -10
  18. package/dist/utils/sanitizeOutlineInput.js +8 -24
  19. package/dist/utils/separateCssStyle.js +5 -8
  20. package/dist/wrapStyles.js +18 -14
  21. package/package.json +36 -24
  22. package/.babelrc +0 -6
  23. package/.npmignore +0 -30
  24. package/.travis.yml +0 -7
  25. package/__snapshots__/cornerCases.test.js.snap +0 -139
  26. package/__snapshots__/example.test.js.snap +0 -408
  27. package/cornerCases.test.js +0 -367
  28. package/dist/utils/sanitizeStyleObj.js +0 -22
  29. package/empty-module.js +0 -1
  30. package/example/.babelrc +0 -4
  31. package/example/.storybook/config.js +0 -7
  32. package/example/.storybook/webpack.config.js +0 -14
  33. package/example/README.md +0 -11
  34. package/example/package.json +0 -55
  35. package/example/stories/Animate/basic.js +0 -73
  36. package/example/stories/Basics/CreatingAndApplyingAStyle.js +0 -12
  37. package/example/stories/Basics/Form.js +0 -24
  38. package/example/stories/Basics/ImpliedTags.js +0 -40
  39. package/example/stories/Basics/PassingStyleAndFuntion.js +0 -13
  40. package/example/stories/Basics/PassingStyleAndFuntionAsArray.js +0 -13
  41. package/example/stories/Basics/ReusingElements.js +0 -13
  42. package/example/stories/Basics/Share.js +0 -19
  43. package/example/stories/Basics/UsingTheTagCreater.js +0 -13
  44. package/example/stories/Basics/WrappingAnExistingElement.js +0 -19
  45. package/example/stories/Button.js +0 -27
  46. package/example/stories/CSSHelpers/CssSelector.js +0 -24
  47. package/example/stories/CSSHelpers/CssSource.js +0 -18
  48. package/example/stories/CSSHelpers/DynamicCssSelectors.js +0 -24
  49. package/example/stories/CSSHelpers/Hover.js +0 -20
  50. package/example/stories/CSSHelpers/MediaQuery.js +0 -22
  51. package/example/stories/CSSHelpers/VendorPrefix.js +0 -19
  52. package/example/stories/CombineStyles/CreatingAndApplyingAStyle.js +0 -16
  53. package/example/stories/CombineStyles/LogicFnWithGenerateElement.js +0 -16
  54. package/example/stories/CombineStyles/PassStyleObjToGenerateElement.js +0 -9
  55. package/example/stories/CombineStyles/UsingAPropFlag.js +0 -16
  56. package/example/stories/CombineStyles/UsingTheTagCreater.js +0 -16
  57. package/example/stories/Ref/byFn.js +0 -51
  58. package/example/stories/Ref/onEvent.js +0 -43
  59. package/example/stories/RuntimeFunctions/DynamicStyles.js +0 -32
  60. package/example/stories/RuntimeFunctions/FunctionWithOutStyle.js +0 -31
  61. package/example/stories/RuntimeFunctions/ModifyingStyles.js +0 -36
  62. package/example/stories/RuntimeFunctions/WithGeneratedElements.js +0 -38
  63. package/example/stories/Welcome.js +0 -90
  64. package/example/stories/index.js +0 -88
  65. package/example/stories/load.js +0 -229
  66. package/example.test.js +0 -16
  67. package/source/Styles.js +0 -23
  68. package/source/element.js +0 -100
  69. package/source/main.js +0 -56
  70. package/source/styleItem.js +0 -105
  71. package/source/utils/buildCssString.js +0 -6
  72. package/source/utils/genCss.js +0 -30
  73. package/source/utils/genStyles.js +0 -19
  74. package/source/utils/hasKids.js +0 -6
  75. package/source/utils/index.js +0 -33
  76. package/source/utils/makeid.js +0 -9
  77. package/source/utils/object2css.js +0 -20
  78. package/source/utils/pubsub.js +0 -22
  79. package/source/utils/replaceColors.js +0 -11
  80. package/source/utils/replacedStyleFn.js +0 -30
  81. package/source/utils/sanitizeOutlineInput.js +0 -72
  82. package/source/utils/sanitizeStyleObj.js +0 -13
  83. package/source/utils/separateCssStyle.js +0 -25
  84. package/source/wrapStyles.js +0 -30
@@ -1,33 +0,0 @@
1
- // !/^[a-zA-Z0-9]/.test(propName[0])
2
- module.exports.specialCharacters = "@: ";//['@',':'].join("");
3
- module.exports.specialInnerCharacters = " >+~";//['@',':'].join("");
4
-
5
-
6
-
7
- // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
8
- // !!!!!!!!!!!!!!!!!!!!!!!!!!!!! HERE BE DRAGONS
9
- // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
10
-
11
- let modules
12
-
13
- if(global && global.__TEST__) { // TESTING !!!
14
-
15
- const loader = {open:require}
16
-
17
- const path = loader.open('path')
18
- const fs = loader.open('fs')
19
- const paths = [];
20
-
21
- modules = (fileName)=> loader.open(fileName)
22
- modules.keys = ()=>paths;
23
-
24
- for (let fileName of fs.readdirSync(__dirname))
25
- { paths.push("./"+fileName) }
26
- } else {
27
-
28
- // webpack magic
29
- modules = require.context("./", false, /\.js$/);
30
- }
31
-
32
- modules.keys().filter( path => "./index.js" !== path && ! path.endsWith(".test.js") && ! path.endsWith(".js.map"))
33
- .forEach( path => module.exports[path.match(/([^\/]+)(?=\.\w+$)/)[0]] = modules(path).default );
@@ -1,9 +0,0 @@
1
- const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
2
- export default function makeid(side = 10) {
3
- let text = "";
4
-
5
- for (let i = 0; i < side; i++)
6
- text += possible.charAt(~~(Math.random() * possible.length));
7
-
8
- return text;
9
- }
@@ -1,20 +0,0 @@
1
- import hyphenate from 'hyphenate-style-name'
2
- import addPx from 'add-px-to-style'
3
- import replaceColors from './replaceColors'
4
-
5
-
6
- // Convert a JS object to CSS string. Similar to React's output of CSS, extracted into a module.
7
- export default function object2css(colors,obj) {
8
- obj = replaceColors(colors,obj);
9
- let keys = Object.keys(obj)
10
- //if (!keys.length) return ''
11
- let i, len = keys.length
12
- let result = ''
13
-
14
- for (i = 0; i < len; i++) {
15
- let key = keys[i]
16
- let val = obj[key]
17
- result += hyphenate(key) + ':' + addPx(key, val) +"; "
18
- }
19
- return result
20
- }
@@ -1,22 +0,0 @@
1
-
2
- const pubsub = new function(){
3
-
4
- const vals = {};
5
- const subscribers = [];
6
-
7
- this.publish = function(key,value){
8
-
9
- vals[key] = value;
10
- subscribers.forEach( subscriber => subscriber(vals) )
11
- }
12
-
13
- this.subscribe = (subscriber) => subscribers.push(subscriber);
14
- this.get = () => vals;
15
- this.clear = ()=> {
16
- for(const className of Object.getOwnPropertyNames(vals)){
17
- delete vals[className]
18
- }
19
- }
20
- }()
21
-
22
- export default pubsub
@@ -1,11 +0,0 @@
1
- export default function (colors,style){
2
-
3
- if(!colors) return style;
4
- const result = Object.assign({},style)
5
- for(const key in result ){
6
- if(result[key] in colors){
7
- result[key] = colors[result[key]];
8
- }
9
- }
10
- return result;
11
- }
@@ -1,30 +0,0 @@
1
-
2
- export default function replacedStyleFn({styleCSS,styleFn/*,radium*/},args){
3
-
4
- const processedStyles = 1=== styleFn.length ? styleFn(args[0]) : styleFn(styleCSS,args[0]);
5
-
6
- // const styleAsPropObj = 0===styleFn.length && "object" === typeof args[0] ? args[0] : {};
7
- // const styleBase = Object.assign({},styleCSS && styleCSS.base||styleCSS||{},styleAsPropObj)
8
- const styleBase = Object.assign({},styleCSS && styleCSS.base||styleCSS||{})
9
- /*
10
- for(const stylePropName in styleBase){
11
- if(specialCharacters.includes(stylePropName[0]))
12
- delete styleBase[stylePropName];
13
- }
14
- */
15
-
16
- //const autoAddStyles = [], firstVal = args[1]// || args[0];
17
- const autoAddStyles = [], firstVal = args[1] || args[0];
18
- //console.log(args)
19
- if(!!firstVal && "object" === typeof firstVal){
20
- Object.keys(firstVal)
21
- .forEach( cssName => {
22
- if(true === firstVal[cssName] && styleCSS && cssName in styleCSS)
23
- autoAddStyles.push(styleCSS[cssName])
24
- // else // to bind style value to output obj
25
- // autoAddStyles.push({cssName:firstVal[cssName]})
26
- });
27
- }
28
-
29
- return Object.assign({},styleBase,...autoAddStyles,processedStyles);
30
- }
@@ -1,72 +0,0 @@
1
- //+++++++++++++++++++++++++++++ { base:{}, foo: ()=> }
2
- //++++++++++++++++++++++++++++++++++++++++++++++++++++
3
- export default function sanitizeOutlineInput(_styles,options={}){
4
-
5
- if("object" !== typeof _styles){
6
- throw new Error("Bad style values: "+JSON.stringify(_styles))
7
- }
8
-
9
- //+++++++++++++++++++++++++++++++++++++++ [ base, fn ]
10
- //++++++++++++++++++++++++++++++++++++++++++++++++++++
11
- if(Array.isArray(_styles)){
12
-
13
- _styles = Object.assign({},{base:_styles[0]},_styles[1])
14
-
15
- } else if(!("base" in _styles)) {
16
-
17
- const base = {}, fns = {};
18
-
19
- //++++++++++++++ { table: {}, header:{} }, fn:{ ()=> }
20
- //++++++++++++++++++++++++++++++++++++++++++++++++++++
21
-
22
- let optionsIsFns = true;
23
-
24
- for(const prop in options){
25
- if(options.hasOwnProperty(prop) && "function" !== typeof options[prop]){
26
- optionsIsFns = false;
27
- }
28
- }
29
-
30
- if(optionsIsFns){
31
- Object.assign(fns,options)
32
- }
33
-
34
- for(const prop in _styles){
35
- //+++++++++++++++++++++++++++ { table: {}, header:{} }
36
- //++++++++++++++++++++++++++++++++++++++++++++++++++++
37
- if("object" === typeof _styles[prop]){
38
- base[prop] = _styles[prop]
39
- //++++++++++++++++++++++++++++++++++++++ { foo: ()=> }
40
- //++++++++++++++++++++++++++++++++++++++++++++++++++++
41
- } else if("function" === typeof _styles[prop]){
42
- fns[prop] = _styles[prop]
43
- } else {
44
- throw new Error("Bad style value: "+JSON.stringify(_styles[prop]))
45
- }
46
- }
47
- _styles = Object.assign({},{base},fns);
48
- }
49
-
50
- // apply sharing
51
- for(const prop in _styles.base){
52
- if(0 < prop.indexOf(',')){
53
- prop.split(',')
54
- .map(x=>x.trim())
55
- .forEach( x => {
56
- const root = _styles.base;
57
- var val = Object.assign({}, root[prop],
58
- // we need to check if x exists in root style.
59
- // e.g. "foo , bar" (cross cutting style) is in style Object
60
- // but "foo" & "bar" are functions
61
- root[x] && root[x].base ? root[x].base : root[x]);
62
-
63
- root[x] && root[x].base ? root[x].base = val : root[x] = val
64
-
65
- } )
66
- delete _styles.base[prop]
67
- }
68
- }
69
-
70
-
71
- return _styles;
72
- }
@@ -1,13 +0,0 @@
1
-
2
- export default function mirgeStyles(x){
3
- // remove all style values that are 'true'
4
- if(x)
5
- return Object.keys(x)
6
- .reduce( (a,b) => {
7
- const type = typeof x[b];
8
- if("string" === type || "number" === type || Array.isArray(x[b]) ){
9
- Object.assign(a,{[b]:x[b]});
10
- }
11
- return a
12
- },{})
13
- }
@@ -1,25 +0,0 @@
1
-
2
- //import { specialCharacters } from './index'
3
-
4
- export default function separateCssStyle(styles){
5
-
6
- let css = {}
7
- let style = {}
8
-
9
- for(const name in styles){
10
- //if(specialCharacters.includes(name[0]) )//|| !!name.match(new RegExp(`[${specialInnerCharacters}]`, "gi")))
11
- //if (!/^\w+$/.test(name))
12
- if(!/^[a-zA-Z0-9-]+$/.test(name))
13
- css[name] = styles[name];
14
- else
15
- style[name] = styles[name];
16
- }
17
-
18
- if( 0 === Object.keys(css).length)
19
- css = null;
20
-
21
- if( 0 === Object.keys(style).length)
22
- style = null;
23
-
24
- return { css, style }
25
- }
@@ -1,30 +0,0 @@
1
-
2
- import styleItem from './styleItem'
3
-
4
- //=====================================================
5
- //========================================= wrap Styles
6
- //=====================================================
7
-
8
- export default function (userSetOptions){
9
- return function wrapStyles(_styles,options,styleCSS){
10
-
11
- options = Object.assign({},userSetOptions,options);
12
- // const radium = !!options.radium;
13
- const caching = !!options.caching;
14
- const colors = options.colors;
15
- styleCSS = _styles.base || styleCSS
16
- const replacedStyle = {}
17
- if(_styles.base)
18
- replacedStyle.base = styleCSS;
19
-
20
- const styleItemGen = styleItem({_styles,replacedStyle,styleCSS, colors, options,caching, wrapStyles})
21
-
22
- Object.keys(_styles)
23
- .concat(Object.keys(styleCSS))
24
- .filter((item, pos, a)=> a.indexOf(item) === pos )
25
- .filter(styleName => "base" !== styleName)
26
- .forEach(styleItemGen)
27
-
28
- return replacedStyle
29
- }
30
- }