react-outline 1.7.2 → 2.0.0

package/example/stories/index.js

@@ -1,88 +0,0 @@
-
-
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-
-import { storiesOf, action, linkTo, setAddon } from "@kadira/storybook";
-import { withInfo, setDefaults } from '@storybook/addon-info';
-
-import { html } from 'js-beautify'
-
-function htmlEscape(str) {
-    return str
-        .replace(/&/g, '&')
-        .replace(/"/g, '"')
-        .replace(/'/g, ''')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-
-// addon-info
-setDefaults({
-  inline: true
-});
-
-import tree from './load';
-
-//import Button from './Button';
-import Welcome from './Welcome';
-
-storiesOf('Welcome', module)
-  .add('to Storybook', () => (
-    <Welcome showApp={linkTo('Button')}/>
-  ));
-
-const allElemes = [];
-
-for(const dir in tree){
-  const files = tree[dir];
-  const story = storiesOf(dir, module);
-  files.forEach( data =>{
-    const options = data.options || {}
-    options.text  = (data.info)?`**${data.info}**
-
----
-` : ""
-
-    options.text += `
-~~~js
-${htmlEscape(data.source)}
-~~~`
-
-    if(data.note){
-      options.text += `
----
-${data.note}
-
-`
-    }
-
-// TODO: KEEP this to SHOW REAL render source <<<<<<<<
-/*
-options.text += `
----
-
-~~~html
-${htmlEscape(html(ReactDOMServer.renderToStaticMarkup(data.element)))}
-~~~
-`*/
-    story.add(data.title,withInfo(options)( () => data.element ))
-    allElemes.push(data.element)
-  })
-}
-
-if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
-storiesOf('All', module)
-  .add('all elements', () => (
-    <div>{
-      allElemes
-    }</div>
-  ));
-
-
-/*
-storiesOf('Button', module)
- .add('with some emoji',
-  withInfo('happy happy joy joy')(() => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>,{ source: true, inline: true } ))
- .add('foo bar',() => <Button onClick={action('bar')}>foo</Button> )
-*/

package/example/stories/load.js

@@ -1,229 +0,0 @@
-
-import sourceBasic from 'raw-loader!./Basics/CreatingAndApplyingAStyle.js?sourceMap';
-import Basic from './Basics/CreatingAndApplyingAStyle';
-
-import sourceBasic2 from 'raw-loader!./Basics/UsingTheTagCreater.js?sourceMap';
-import Basic2 from './Basics/UsingTheTagCreater';
-
-import sourceBasic3 from 'raw-loader!./Basics/ImpliedTags.js?sourceMap';
-import Basic3 from './Basics/ImpliedTags';
-
-import sourceBasic4 from 'raw-loader!./Basics/WrappingAnExistingElement.js?sourceMap';
-import Basic4 from './Basics/WrappingAnExistingElement';
-
-import sourceBasic5 from 'raw-loader!./Basics/ReusingElements.js?sourceMap';
-import Basic5 from './Basics/ReusingElements';
-
-import sourceBasic6 from 'raw-loader!./Basics/PassingStyleAndFuntion.js?sourceMap';
-import Basic6 from './Basics/PassingStyleAndFuntion';
-
-import sourceBasic7 from 'raw-loader!./Basics/PassingStyleAndFuntionAsArray.js?sourceMap';
-import Basic7 from './Basics/PassingStyleAndFuntionAsArray';
-
-import sourceBasic8 from 'raw-loader!./Basics/Share.js?sourceMap';
-import Basic8 from './Basics/Share';
-
-import sourceCombine from 'raw-loader!./CombineStyles/CreatingAndApplyingAStyle.js?sourceMap';
-import Combine from './CombineStyles/CreatingAndApplyingAStyle';
-
-import sourceCombine2 from 'raw-loader!./CombineStyles/UsingTheTagCreater.js?sourceMap';
-import Combine2 from './CombineStyles/UsingTheTagCreater';
-
-import sourceCombine3 from 'raw-loader!./CombineStyles/UsingAPropFlag.js?sourceMap';
-import Combine3 from './CombineStyles/UsingAPropFlag';
-
-import sourceCombine4 from 'raw-loader!./CombineStyles/PassStyleObjToGenerateElement.js?sourceMap';
-import Combine4 from './CombineStyles/PassStyleObjToGenerateElement';
-
-import sourceCombine5 from 'raw-loader!./CombineStyles/LogicFnWithGenerateElement.js?sourceMap';
-import Combine5 from './CombineStyles/LogicFnWithGenerateElement';
-
-import sourceLogic from 'raw-loader!./RuntimeFunctions/DynamicStyles.js?sourceMap';
-import Logic from './RuntimeFunctions/DynamicStyles';
-
-import sourceLogic2 from 'raw-loader!./RuntimeFunctions/ModifyingStyles.js?sourceMap';
-import Logic2 from './RuntimeFunctions/ModifyingStyles';
-
-import sourceLogic3 from 'raw-loader!./RuntimeFunctions/FunctionWithOutStyle.js?sourceMap';
-import Logic3 from './RuntimeFunctions/FunctionWithOutStyle';
-
-import sourceLogic4 from 'raw-loader!./RuntimeFunctions/WithGeneratedElements.js?sourceMap';
-import Logic4 from './RuntimeFunctions/WithGeneratedElements';
-
-import sourceCss from 'raw-loader!./CSSHelpers/Hover.js?sourceMap';
-import Css from './CSSHelpers/Hover';
-
-import sourceCss2 from 'raw-loader!./CSSHelpers/MediaQuery.js?sourceMap';
-import Css2 from './CSSHelpers/MediaQuery';
-
-import sourceCss3 from 'raw-loader!./CSSHelpers/CssSource.js?sourceMap';
-import Css3 from './CSSHelpers/CssSource';
-
-import sourceCss4 from 'raw-loader!./CSSHelpers/VendorPrefix.js?sourceMap';
-import Css4 from './CSSHelpers/VendorPrefix';
-
-import sourceCss5 from 'raw-loader!./CSSHelpers/CssSelector.js?sourceMap';
-import Css5 from './CSSHelpers/CssSelector';
-
-import sourceCss6 from 'raw-loader!./CSSHelpers/DynamicCssSelectors.js?sourceMap';
-import Css6 from './CSSHelpers/DynamicCssSelectors';
-
-
-import sourceRef1 from 'raw-loader!./Ref/byFn.js?sourceMap';
-import Ref1 from './Ref/byFn';
-
-import sourceRef2 from 'raw-loader!./Ref/onEvent.js?sourceMap';
-import Ref2 from './Ref/onEvent';
-
-import sourceAnimate from 'raw-loader!./Animate/basic.js?sourceMap';
-import Animate from './Animate/basic';
-
-const tree = {
-  Basics:[
-    {
-      title:'Creating and applying a style',
-      source:sourceBasic,   element:Basic
-    },
-    {
-      title:'Generate a element from a style',
-      source:sourceBasic2,  element:Basic2,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'Wrapping an existing element',
-      source:sourceBasic4,  element:Basic4,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'Generate an implied named element',
-      source:sourceBasic3,  element:Basic3,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'Reusing elements',
-      source:sourceBasic5,  element:Basic5,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'Passing Style and Funtion as arguments',
-      source:sourceBasic6,  element:Basic6,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'Sharing Style',
-      source:sourceBasic8,  element:Basic8,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'⚠ Passing Style and Funtion as Array',
-      info:'⚠ This feature is deprecated and will be removed in a later version ⚠',
-      source:sourceBasic7,  element:Basic7,
-      options: {propTables: false, source: false }
-    }
-
-  ],
-  "Combine styles":[
-    {
-      title:'Using the style function',
-      source:sourceCombine,   element:Combine
-    },
-    {
-      title:'In a generated element',
-      source:sourceCombine2,   element:Combine2,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'Using a prop flag',
-      source:sourceCombine3,   element:Combine3,
-      options: {propTables: false, source: false }
-    },
-    {
-      title:'Logic function With Generate Element',
-      source:sourceCombine5,   element:Combine5,
-      options: { propTables: false, source: false }
-    }, // A work in progress
-    {
-      title:'Passing a Style objct to a generated element',
-      source:sourceCombine4,   element:Combine4,
-      options: { propTables: false, source: false }
-    }
-  ],
-  "Style Functions":[
-      {
-        title:'Run-time control over your styles.',
-        source:sourceLogic,   element:Logic
-      },
-      {
-        title:'Modify existing styles',
-        note:'If your funtion have 1 argument, it will be passed only the incoming arguments. With 2 arguments. The first will be the corresponding style and the second will be the incoming arguments.',
-        source:sourceLogic2,   element:Logic2
-      },
-      {
-        title:'Function dont need a style',
-        source:sourceLogic3,   element:Logic3
-      },
-      {
-        title:'Function with generated elements',
-        source:sourceLogic4,   element:Logic4,
-        options: {propTables: false, source: false }
-      }
-  ],
-  "CSS Helpers":[
-  {
-     title:'Media Query',
-     info: 'Resize your screen to less then 600px',
-     source:sourceCss2,   element:Css2,
-     options: {propTables: false, source: false }
-  },
-    {
-       title:'Mouse hover',
-       info: 'You need to include a react-outline Style tag at the top to your page',
-       source:sourceCss,   element:Css,
-       options: {propTables: false, source: false }
-    },
-    {
-       title:'Css Source',
-       source:sourceCss3,   element:Css3,
-       options: {propTables: false }
-    },
-    {
-       title:'Css Selector',
-       source:sourceCss5,   element:Css5,
-       options: {propTables: false , source: false }
-    },
-    {
-       title:'Dynamic Css Selector',
-       source:sourceCss6,   element:Css6,
-       options: {propTables: false , source: false }
-    },
-    {
-       title:'Vendor Auto-Prefix',
-       info:"CSS vendor prefixes, also sometime known as or CSS browser prefixes, are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers. It will only add prefixes if a property still needs them",
-       source:sourceCss4,   element:Css4
-    }
-  ]
-  ,"Reference dom element":[
-    {
-      title:'function with Dom Events',
-      source:sourceRef2,   element:Ref2,
-      info:"Any easy way to map 'event' names to functions",
-      note:"**You pass an Object(mapping 'event' names to functions) as the 'onDomEvent' prop**",
-      options: {propTables: false , source: false, test:false }
-    },
-    {
-      title:'ref by function',
-      source:sourceRef1,   element:Ref1,
-      options: {propTables: false , source: false, test:false }
-    }
-  ]
-  ,"Animate":[
-    {
-       title:'Animate.css',
-       info: "Using [ReactCSSTransitionGroup](https://www.npmjs.com/package/react-addons-css-transition-group) and daneden's [animate.css](https://daneden.github.io/animate.css/)",
-       source:sourceAnimate,   element:Animate,
-       options: {propTables: false, source: false, test:false }
-    },
-  ]
-}
-
-export default tree

package/example.test.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import load from './example/stories/load'
-
-for(const groupName in load ){
-  const groupArray = load[groupName];
-  describe(groupName, () => {
-    for(const item of groupArray ){
-      if(item.options && (item.options.test === undefined || item.options.test))
-      test(item.title, () => {
-        const elem = renderer.create(item.element);
-        expect(elem.toJSON()).toMatchSnapshot();
-      }) // END test
-    } // END for
-  }) // END describe
-} // END for

package/source/Styles.js

@@ -1,23 +0,0 @@
-
-import React from 'react'
-import { pubsub, buildCssString } from './utils'
-
-// TODO: make Styles a "ref" and manual set the content
-
-export default function Styles(props){
-//class StylesElem extends React.Component {
-  const StylesElem = React.createClass({
-  displayName: "Styles",
-  getInitialState: function getInitialState() {
-    // setTimeout to fix: Warning: setState(...): Cannot update during an existing state transition
-    pubsub.subscribe(()=> setTimeout(()=>this.setState({cssString:buildCssString(pubsub.get(),props)}), 0) )
-    return { cssString : buildCssString(pubsub.get(),props)};
-  },
-  render: function render() {
-    return <style>{this.state.cssString}</style>;
-  }
-})
-  return React.createElement(StylesElem)
-}
-
-Styles.toString = ()=>buildCssString(pubsub.get())

package/source/element.js

@@ -1,100 +0,0 @@
-
-import React from 'react'
-import { findDOMNode } from 'react-dom'
-import { genCss, pubsub } from './utils'
-
-export default function({elemName, css,styleCSS,inlineStyle,style,styleName, colors, randomClassName, options,replacedStyle}){
-
-  class C2 extends React.Component {
-
-    componentDidMount() {
-      const onDomEvent = this.props.onDomEvent
-      for (const listen in onDomEvent) {
-        this.domElem.addEventListener(listen, event => onDomEvent[listen](this.domElem,event));
-      }
-    }
-
-    componentWillUnmount() {
-      const onDomEvent = this.props.onDomEvent
-      for (const listen in onDomEvent) {
-        this.domElem.removeEventListener(listen, event => onDomEvent[listen](this.domElem,event));
-      }
-    }
-
-    render(){
-
-      const props = this.props
-
-      if("css" in props){
-
-        const updatedCss = Object.assign({},css)
-
-        for(const selectorRule in props.css){
-          updatedCss[selectorRule] = Object.assign({},css[selectorRule], "function" === typeof props.css[selectorRule] ? props.css[selectorRule]() : props.css[selectorRule])
-        }
-        pubsub.publish(randomClassName, genCss({randomClassName, css:updatedCss,styleCSS, colors,style,styleName}))
-      }
-
-      const elemProps = Object.assign({},props);
-
-      let passedTrueProps = Object.keys(props)
-                                  .filter( name => props[name] === true && styleCSS[styleName] && name in styleCSS[styleName] )
-      //  console.log("passedTrueProps",passedTrueProps)
-      if(0 < passedTrueProps.length){
-        passedTrueProps = passedTrueProps.reduce((styleProps, name) => {
-          // If elem is a HTML type = Removed it Unknown prop `...` on <...> tag. Remove this prop from the element.
-          if("function" !== typeof elemName && "disabled" !== name){
-            delete elemProps[name]
-          }
-          return Object.assign(styleProps,{[name]:true})
-        },{})
-      } else {
-        passedTrueProps = null
-      }
-
-      if(passedTrueProps || props.hasOwnProperty("style")){
-        //if(props.style instanceof Object)
-        //    passedTrueProps = Object.assign({},props.style,passedTrueProps);
-        if(randomClassName)
-            elemProps.style = props.style
-        else
-            elemProps.style = replacedStyle[styleName](props.style,passedTrueProps);
-
-      } else {
-        elemProps.style = inlineStyle || replacedStyle[styleName]();
-      }
-      //TODO: write a test for this
-      // For some reason in prod!
-      // a custom element in a perfect storm can have style undefined
-      //SEE: test - should generated an element with css selector
-      // thss is the same prod code.. BUT this is not catching this case :(
-      if(elemProps.style &&
-        Object.keys(elemProps.style).length === 0){
-         delete elemProps.style;
-      }
-
-      if(options.named){
-        elemProps.name = elemProps.name || styleName;
-      }
-
-        elemProps.className  = elemProps.className || ""
-        if(elemProps.className && randomClassName){
-          elemProps.className += " "
-        }
-        elemProps.className += randomClassName || ""
-        if("" === elemProps.className)
-            delete elemProps.className;
-
-        if(props.onDomEvent){
-          elemProps.ref = reatElem => this.domElem = findDOMNode(reatElem)
-        }
-
-      return React.createElement(elemName||styleName,elemProps,elemProps && elemProps.children)
-
-          }
-        }
-
-      Object.defineProperty (C2, 'name', {value: styleName||elemName});
-
-      return C2
-}

package/source/main.js

@@ -1,56 +0,0 @@
-
-import React from 'react'
-import { pubsub, sanitizeOutlineInput } from './utils'
-
-import wrapStylesFactory from './wrapStyles'
-import Styles from './Styles'
-
-const userSetOptions = { named:true/* prefix:getVendorPrefix()*/ }
-
-const wrapStyles = wrapStylesFactory(userSetOptions)
-
-//=====================================================
-//============================= top Level - Wrap Styles
-//=====================================================
-
-function outline(_styles,options={}){
-  return sanitizeOutline(sanitizeOutlineInput(_styles,options),options)
-}
-
-function sanitizeOutline(_styles,options){
-
-  const wrappedStyles = wrapStyles(_styles,options);
-        wrappedStyles.colors = wrappedStyles.colors
-                            || options        && options.colors
-                            || userSetOptions && userSetOptions.colors;
-  return wrappedStyles;
-}
-
-//=====================================================
-//============================================= Options
-//=====================================================
-
-function withOptions(options){
-  if(!options) throw new Error("Bad options values for react-outline:"+JSON.stringify(options))
-
-  const tempOutlineFn = (_styles,optionsOrLogic)=>sanitizeOutline(sanitizeOutlineInput(_styles,optionsOrLogic),options)
-  if(options.colors){
-    tempOutlineFn.colors = options.colors
-  }
-  return tempOutlineFn;
-}
-
-function setOptions(options){
-  if(!options) throw new Error("Bad options values for react-outline:"+JSON.stringify(options))
-  if(options.colors){
-    outline.colors = options.colors
-  }
-  Object.assign(userSetOptions,options)
-}
-
-const testing = {
-  resetCSS: pubsub.clear
-}
-
-export default outline
-export { withOptions, setOptions, Styles, testing }

package/source/styleItem.js

@@ -1,105 +0,0 @@
-
-import { hasKids, specialCharacters, specialInnerCharacters, separateCssStyle, makeid, genCss, genStyles, pubsub, sanitizeStyleObj } from './utils'
-import element from './element'
-
-//=====================================================
-//========================================== build Elem
-//=====================================================
-
-function buildElem({elemName,args,styleCSS,styleName,options,replacedStyle,colors}){
-
-  elemName = elemName[0] || args[1];
-  let inlineStyle = null;//replacedStyle[styleName]();
-
-  const baseStyle = styleCSS[styleName] && styleCSS[styleName].base || {}
-  for(const propN in styleCSS[styleName]){
-    //if(specialCharacters.includes(propN[0]) || !!propN.match(new RegExp(`[${specialInnerCharacters}]`, "gi"))){
-    if (/^[a-zA-Z0-9-]+$/.test(propN) === false) {
-      baseStyle[propN] = styleCSS[styleName][propN]
-    }
-  }
-  //splict ":" and "@" from all over styles
-  const { css, style } = separateCssStyle(baseStyle);
-  /*
-  const cssPropNames = Object.keys(styleCSS[styleName])
-                             .filter(stylePropName => stylePropName[0] === "@" ||  stylePropName[0] === ":");
-  */
-  let randomClassName = "";
-
-  //if(0 < cssPropNames.length){
-  if(css){
-    randomClassName = "react-outline-"
-    if(!global.__TEST__) randomClassName += makeid();
-    pubsub.publish(randomClassName,genCss({randomClassName, css,styleCSS, colors,style,styleName}))
-    inlineStyle = {};
-  }
-
-  return element({elemName, css,styleCSS,inlineStyle,style,styleName, colors, randomClassName, options,randomClassName,replacedStyle})
-}
-
-//=====================================================
-//===================================== build Style Obj
-//=====================================================
-
-function buildStyleObj({styleStuff,genStyles,args,colors,caching,cached}){
-
-  if(!caching){
-    return genStyles(styleStuff,args,colors);
-  }
-  // quick test
-  if(cached.value && cached.source[0] === args[0] && cached.source[0] === args[1]){
-    return cached.value;
-  }
-  // deep test
-  const key = ""+JSON.stringify(args[0])+JSON.stringify(args[1])
-  if(key === cached.key){
-    return cached.value;
-  }
-
-  cached.key = key;
-  cached.source[0] = args[0];
-  cached.source[1] = args[1];
-  cached.value = genStyles(styleStuff,args,colors);
-  return cached.value;
-
-}
-
-//=====================================================
-//========================================== style Item
-//=====================================================
-
-export default function({_styles,replacedStyle,styleCSS, colors, options,caching, wrapStyles}){
-
-//+++++++++++++++++++++++++++++++++++++ style function
-//++++++++++++++++++++++++++++++++++++++++++++++++++++
-    return (styleName)=>{
-
-      const styleFn = _styles[styleName]||(()=>{});
-
-      const cached = { key:null, value:null, source:[] }
-      replacedStyle[styleName] = function(...args) {
-          let elemName = args[0];
-
-//+++++++++++++++++++++++++++++++++++ build an element
-//++++++++++++++++++++++++++++++++++++++++++++++++++++
-
-          if(Array.isArray(elemName) && elemName.hasOwnProperty("raw")){
-              return buildElem({elemName,args,styleCSS,styleName,options,replacedStyle,colors})
-          } // elem gen
-
-//++++++++++++++++++++++++++++++++++++++ generat style
-//++++++++++++++++++++++++++++++++++++++++++++++++++++
-
-          const styleStuff = { styleCSS:styleCSS[styleName],styleFn:("object" === typeof args && !_styles[styleName] )?x=>sanitizeStyleObj(x):styleFn };
-
-          return buildStyleObj({styleStuff,genStyles,args,colors,caching,cached})
-      } // END replacedStyle[styleName] = function(...args)
-
-//+++++++++++++++++++++++++++++++++ step down the tree
-//++++++++++++++++++++++++++++++++++++++++++++++++++++
-
-      if(0 < Object.keys(styleFn).length || hasKids(styleCSS[styleName])){
-        Object.assign(replacedStyle[styleName], wrapStyles(styleFn,options,styleCSS[styleName]))
-      }
-    }
-}

package/source/utils/buildCssString.js

@@ -1,6 +0,0 @@
-export default function buildCssString(classesValues,props){
- let css = Object.keys(classesValues).map(className => classesValues[className] ).join(" ");
-  css += props.children || "";
-  css = css.replace(/\n/g, ' ').replace(/\s+/g, ' ');
-  return css
-}

package/source/utils/genCss.js

@@ -1,30 +0,0 @@
-
-import object2css from './object2css'
-
-export default function genCss({randomClassName, css,styleCSS, colors,style,styleName}){
-
-  let newStyle = (style)?`.${randomClassName}{${ object2css(colors,style) }}`:""
-
-  newStyle = Object.keys(css).reduce( (cssString,propName) => {
-
-
-
-    const styleContent = object2css(colors,css[propName]
-                                        /*  || styleCSS[styleName].base
-                                          && styleCSS[styleName].base[propName]
-                                          || styleCSS[styleName][propName]*/);
-
-
-
-    if(propName[0] === "@")
-        return cssString + ` ${propName}{ .${randomClassName}{ ${ styleContent } } } `
-    else if(propName[0] === ":")
-        return ` .${randomClassName}${propName}{ ${ styleContent } } ` + cssString
-    else
-        return ` .${randomClassName} ${propName}{ ${ styleContent } } ` + cssString
-  //  else // skip unknown prop
-  //      return cssString
-  } ,newStyle )
-
-  return newStyle;
-}

package/source/utils/genStyles.js

@@ -1,19 +0,0 @@
-import Prefixer from 'inline-style-prefixer'
-
-import replacedStyleFn from './replacedStyleFn'
-import replaceColors from './replaceColors'
-import {specialCharacters} from './index'
-
-const prefixer = new Prefixer();
-
-export default function genStyles(styleStuff, args,colors){
-  const userResult = replacedStyleFn(styleStuff,args);
-
-  const swapedColor = replaceColors(colors,userResult);
-  for(const name in swapedColor){
-    //if(!specialCharacters.includes(name[0]))
-    swapedColor[name] = prefixer.prefix({a:swapedColor[name]}).a;
-  }
-
-  return swapedColor;
-}

package/source/utils/hasKids.js

@@ -1,6 +0,0 @@
-export default function hasKids(obj){
-  for(const name in obj){
-    if("base" !== name && "object" === typeof obj[name])
-    return true
-  }
-}