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.
- package/README.md +151 -116
- package/dist/Styles.js +34 -35
- package/dist/element.js +69 -88
- package/dist/main.js +22 -35
- package/dist/reactOutline.js +241 -0
- package/dist/reactOutline.js.map +7 -0
- package/dist/styleItem.js +105 -91
- package/dist/utils/buildCssString.js +2 -2
- package/dist/utils/genCss.js +21 -32
- package/dist/utils/genStyles.js +13 -26
- package/dist/utils/hasKids.js +2 -4
- package/dist/utils/index.js +81 -61
- package/dist/utils/makeid.js +3 -6
- package/dist/utils/object2css.js +10 -22
- package/dist/utils/pubsub.js +10 -24
- package/dist/utils/replaceColors.js +3 -4
- package/dist/utils/replacedStyleFn.js +5 -10
- package/dist/utils/sanitizeOutlineInput.js +8 -24
- package/dist/utils/separateCssStyle.js +5 -8
- package/dist/wrapStyles.js +18 -14
- package/package.json +36 -24
- package/.babelrc +0 -6
- package/.npmignore +0 -30
- package/.travis.yml +0 -7
- package/__snapshots__/cornerCases.test.js.snap +0 -139
- package/__snapshots__/example.test.js.snap +0 -408
- package/cornerCases.test.js +0 -367
- package/dist/utils/sanitizeStyleObj.js +0 -22
- package/empty-module.js +0 -1
- package/example/.babelrc +0 -4
- package/example/.storybook/config.js +0 -7
- package/example/.storybook/webpack.config.js +0 -14
- package/example/README.md +0 -11
- package/example/package.json +0 -55
- package/example/stories/Animate/basic.js +0 -73
- package/example/stories/Basics/CreatingAndApplyingAStyle.js +0 -12
- package/example/stories/Basics/Form.js +0 -24
- package/example/stories/Basics/ImpliedTags.js +0 -40
- package/example/stories/Basics/PassingStyleAndFuntion.js +0 -13
- package/example/stories/Basics/PassingStyleAndFuntionAsArray.js +0 -13
- package/example/stories/Basics/ReusingElements.js +0 -13
- package/example/stories/Basics/Share.js +0 -19
- package/example/stories/Basics/UsingTheTagCreater.js +0 -13
- package/example/stories/Basics/WrappingAnExistingElement.js +0 -19
- package/example/stories/Button.js +0 -27
- package/example/stories/CSSHelpers/CssSelector.js +0 -24
- package/example/stories/CSSHelpers/CssSource.js +0 -18
- package/example/stories/CSSHelpers/DynamicCssSelectors.js +0 -24
- package/example/stories/CSSHelpers/Hover.js +0 -20
- package/example/stories/CSSHelpers/MediaQuery.js +0 -22
- package/example/stories/CSSHelpers/VendorPrefix.js +0 -19
- package/example/stories/CombineStyles/CreatingAndApplyingAStyle.js +0 -16
- package/example/stories/CombineStyles/LogicFnWithGenerateElement.js +0 -16
- package/example/stories/CombineStyles/PassStyleObjToGenerateElement.js +0 -9
- package/example/stories/CombineStyles/UsingAPropFlag.js +0 -16
- package/example/stories/CombineStyles/UsingTheTagCreater.js +0 -16
- package/example/stories/Ref/byFn.js +0 -51
- package/example/stories/Ref/onEvent.js +0 -43
- package/example/stories/RuntimeFunctions/DynamicStyles.js +0 -32
- package/example/stories/RuntimeFunctions/FunctionWithOutStyle.js +0 -31
- package/example/stories/RuntimeFunctions/ModifyingStyles.js +0 -36
- package/example/stories/RuntimeFunctions/WithGeneratedElements.js +0 -38
- package/example/stories/Welcome.js +0 -90
- package/example/stories/index.js +0 -88
- package/example/stories/load.js +0 -229
- package/example.test.js +0 -16
- package/source/Styles.js +0 -23
- package/source/element.js +0 -100
- package/source/main.js +0 -56
- package/source/styleItem.js +0 -105
- package/source/utils/buildCssString.js +0 -6
- package/source/utils/genCss.js +0 -30
- package/source/utils/genStyles.js +0 -19
- package/source/utils/hasKids.js +0 -6
- package/source/utils/index.js +0 -33
- package/source/utils/makeid.js +0 -9
- package/source/utils/object2css.js +0 -20
- package/source/utils/pubsub.js +0 -22
- package/source/utils/replaceColors.js +0 -11
- package/source/utils/replacedStyleFn.js +0 -30
- package/source/utils/sanitizeOutlineInput.js +0 -72
- package/source/utils/sanitizeStyleObj.js +0 -13
- package/source/utils/separateCssStyle.js +0 -25
- package/source/wrapStyles.js +0 -30
package/source/utils/index.js
DELETED
|
@@ -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 );
|
package/source/utils/makeid.js
DELETED
|
@@ -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
|
-
}
|
package/source/utils/pubsub.js
DELETED
|
@@ -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,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
|
-
}
|
package/source/wrapStyles.js
DELETED
|
@@ -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
|
-
}
|