react-outline 1.7.2 → 2.0.0

package/cornerCases.test.js

@@ -1,367 +0,0 @@
-
-import React from 'react';
-import faker from 'faker';
-import outline, { withOptions, setOptions } from "react-outline"
-import { Styles, testing } from 'react-outline'
-import { shallow, mount, render } from 'enzyme';
-import renderer from 'react-test-renderer';
-
-function randomColor(){
-  return '#'+Math.floor(Math.random()*16777215).toString(16);
-}
-
-function classNameGen(){
-  return faker.internet.userName()
-}
-
-describe('With Options at style level', () => {
-    it('Not passing a options object should throw', () => {
-      expect(() => {
-        withOptions()
-      }).toThrow();
-    })
-
-    it('Using options to set color short-hand', () => {
-
-        const custom_outline =  withOptions({colors:{primary:"#ABC123"}})
-
-        const fooN = classNameGen();
-        const barN = classNameGen();
-
-        const css = {
-            base : {
-                 [fooN]:{  color:"primary" },
-                 [barN]:{  color:"red" }
-            }
-        }
-        const styles = custom_outline(css);
-
-        const foo = shallow(<div style={styles[fooN]()}/>);
-        const bar = shallow(<div style={styles[barN]()}/>);
-
-        expect(bar.prop("style")).toEqual({  color:"red" })
-        expect(foo.prop("style")).toEqual({  color:"#ABC123" })
-    })
-
-    it('Using options to set caching (base + fn)', () => {
-
-        const custom_outline =  withOptions({caching:true})
-
-        const color = randomColor();
-        const barN = classNameGen();
-
-        const css = {
-            base:{[barN]:{backgroundColor:"yellow"}},
-                  //  USE a random color
-            [barN] : ()=>({color})
-        }
-        const styles = custom_outline(css);
-
-        const baz1 = shallow(<div style={styles[barN]()}/>);
-        // baz2 will return the same style as baz1 cached value
-        const baz2 = shallow(<div style={styles[barN]()}/>);
-
-        expect(css[barN]()).not.toBe(css[barN]());
-        expect(baz1.prop("style")).toHaveProperty("color");
-        expect(baz1.prop("style").color).toEqual(color);
-        expect(baz1.prop("style")).toEqual(baz2.prop("style"));
-    })
-
-    it('Using options to set caching (base)', () => {
-
-        const custom_outline =  withOptions({caching:true})
-        const barN = classNameGen();
-
-        const css = {
-            base:{[barN]:{color:"white"}},
-        }
-        const styles = custom_outline(css);
-
-        const baz1 = shallow(<div style={styles[barN]()}/>);
-        // baz2 will return the same style as baz1 cached value
-        const baz2 = shallow(<div style={styles[barN]()}/>);
-
-        expect(css.base[barN]).toEqual(styles[barN]());
-        expect(baz1.prop("style")).toHaveProperty("color")
-        expect(baz1.prop("style")).toEqual(baz2.prop("style"));
-    })
-
-    it('Using options to set caching (fn)', () => {
-
-        const custom_outline =  withOptions({caching:true})
-        const barN = classNameGen();
-
-        const css = {
-              //  USE a random color
-              [barN] : ()=>({color:randomColor()})
-        }
-        const styles = custom_outline(css);
-
-        const baz1 = shallow(<div style={styles[barN]()}/>);
-        // baz2 will return the same style as baz1 cached value
-        const baz2 = shallow(<div style={styles[barN]()}/>);
-
-        expect(baz1.prop("style")).toHaveProperty("color")
-        expect(baz1.prop("style")).toEqual(baz2.prop("style"));
-    })
-})
-
-describe('In production mode', () => {
-
-      beforeAll(() => global.__TEST__ = false);
-      afterAll( () => global.__TEST__ = true);
-
-      it('should throw if no style values are passed', () => {
-        expect(() => {
-          styles = outline();
-        }).toThrow();
-      })
-
-      it('should throw if a style value is not object or function', () => {
-        expect(() => {
-          styles = outline({[classNameGen()]:classNameGen()}); // random name with random value
-        }).toThrow();
-      })
-
-      it('generated elements using CSS features need a unique class', () => {
-
-        const titleN = classNameGen();
-
-            let styles = {
-                base : {
-                  [titleN]:{
-                     base:{     background: "lightblue", color:"black" },
-                    ":hover":{  background: "darkblue" , color:"white" }
-                  }
-                }
-            }
-            styles = outline(styles);
-
-            const Title = styles[titleN]`div`
-
-            const elem = shallow(<Title/>);
-            expect(elem.prop("className")).toMatch(/^react-outline-[a-zA-Z0-9]{10}$/)
-      })
-
-      it('should run style function once if cased and same input', () => {
-          let callCount = 0;
-          let styles = {
-            crazyElem : (x)=> callCount++
-          };
-          styles = outline(styles,{caching:true}); // random name with random value
-
-          styles.crazyElem(5);
-          styles.crazyElem(5);
-
-          expect(callCount).toEqual(1);
-      })
-
-      it('should be able to pass an value to style logic', () => {
-          const css = {    };
-          const logic = { dogs: val => ({ color: "string" === typeof val ? "white" : "black" }) };
-          const styles = outline(css,logic); // random name with random value
-
-          const Dogs = styles.dogs`div`;
-          expect(renderer.create(<Dogs style={"boo"} />).toJSON()).toMatchSnapshot();
-          expect(renderer.create(<Dogs style={7}     />).toJSON()).toMatchSnapshot();
-      })
-
-      it('should be able to destructur assignments on generated element', () => {
-          const css = {    };
-          const logic = { cats: ({number})=> ({ color: number > 5 ? "blue" : "pink" }) };
-          const styles = outline(css,logic); // random name with random value
-
-          const Cats = styles.cats`div`;
-          expect(renderer.create(<Cats style={{number:2}} />).toJSON()).toMatchSnapshot();
-          expect(renderer.create(<Cats style={{number:7}} />).toJSON()).toMatchSnapshot();
-      })
-
-      it('should be able to pass true value', () => {
-          const css = {
-            input : {
-              base:{color: "red"},
-              big:{fontSize: "20px"}
-            }
-          };
-          const logic = { input: ()=> ({ background: "gray" }) };
-          const styles = outline(css,logic); // random name with random value
-
-          const Input = styles.input``;
-          expect(renderer.create(<Input big disabled />).toJSON()).toMatchSnapshot();
-      })
-/*
-      it('should skip unknown css props', () => {
-          let styles = {
-            niceElem : {
-                base  :{color:"black" },
-              ":hover":{color:"gray"},
-              "~touch":{color:"boo!"}
-            }
-          };
-          styles = outline(styles); // random name with random value
-      })*/
-
-
-      it('should allow cross cutting style to map to only functions', () => {
-          const css = {
-            "foo, bar" : {
-              fontSize: "20px"
-            }
-          };
-          const logic = {
-            foo: x => ({ background: "gray" }),
-            bar: x => ({ background: "black" })
-          };
-          const styles = outline(css,logic); // random name with random value
-
-          const Foo = styles.foo`span`;
-          const Bar = styles.bar`span`;
-          expect(renderer.create(<Foo style={123} />).toJSON()).toMatchSnapshot();
-          expect(renderer.create(<Bar style={123} />).toJSON()).toMatchSnapshot();
-      })
-
-      it('should generated an element with a logic fn that can take undefined', () => {
-
-        // VERSION  A
-          const css = {
-            foo : {   fontSize: "20px" }
-          };
-          const logic = {
-            foo: x => ({ background: "gray" }),
-          };
-          const stylesA = outline(css,logic); // random name with random value
-
-        // VERSION  B
-
-          const allStyles = {
-            base: {
-              foo : {   fontSize: "20px" }
-            },
-            foo: x => ({ background: "gray" })
-          };
-          const stylesB = outline(allStyles); // random name with random value
-
-          const FooA = stylesA.foo`span`;
-          const FooB = stylesB.foo`span`;
-
-          expect(renderer.create(<FooA style={undefined} />).toJSON()).toMatchSnapshot();
-          expect(renderer.create(<FooB style={undefined} />).toJSON())
-        .toEqual(renderer.create(<FooA style={undefined} />).toJSON());
-      })
-
-      /*it('should attach dom event to element', () => {
-
-
-          styles = outline({ textarea : {} })
-
-          <Textarea onDomEvent={{'scroll': ()=>{
-
-                    }}}
-                    defaultValue={"1,2,3,4,5".replace(/,/g,"\n")} />
-
-
-          //expect(renderer.create(<FooA style={undefined} />).toJSON()).toMatchSnapshot();
-          console.log(renderer.create(<FooA style={false}/>).toJSON())
-      })*/
-
-
-
-      it.skip('should generated an element with css selector', () => {
-
-          let styles = {
-            base : {
-              cell:{
-                base:{
-                  minHeight: "100%"
-                },
-                ">div": {
-                    minHeight: "100%"
-                }
-              }
-            },
-            cell : x => Object.assign({minHeight: "auto"},x)
-          };
-          styles = outline(styles)
-
-          const FooA = styles.cell`${()=><div/>}`;
-
-          //expect(renderer.create(<FooA style={undefined} />).toJSON()).toMatchSnapshot();
-          console.log(renderer.create(<FooA style={false}/>).toJSON())
-      })
-
-})
-
-describe('CSS selectors', () => {
-  it('should work with user defined callNames', () => {
-
-      testing.resetCSS();
-
-      const styles = outline({ a : { based:{}, ":hover":{}  },b : {  } }); // random name with random value
-
-      const ElemA = styles.a`div`;
-      const ElemB = styles.b`div`;
-      expect(renderer.create(<div>
-        <ElemA className="a" />
-        <ElemA />
-        <ElemB className="b"/>
-        <ElemB />
-      </div>).toJSON()).toMatchSnapshot();
-  })
-  it('should allow you to select a nested element', () => {
-
-      testing.resetCSS();
-
-      const css = {
-        div : {
-          base:{color: "red"},
-          " .abc":{fontSize: "20px"}
-        }
-      };
-      const styles = outline(css); // random name with random value
-
-      const Elem = styles.div``;
-      expect(renderer.create(<div>
-        <Styles/>
-        <Elem/>
-      </div>).toJSON()).toMatchSnapshot();
-  })
-
-  it('should allow for color replacment', () => {
-
-      testing.resetCSS();
-
-      const custom_outline =  withOptions({colors:{squanchy:"#e5a939"}})
-
-      const css = {
-        div : {
-          base:{color: "squanchy"},
-          " .abc":{fontSize: "20px"}
-        }
-      };
-      const styles = outline(css); // random name with random value
-
-      const Elem = styles.div``;
-      expect(renderer.create(<div>
-        <Styles/>
-        <Elem/>
-      </div>).toJSON()).toMatchSnapshot();
-  })
-
-
-})
-
-describe('Check setOptions', () => {
-
-    it('should throw no options are passed', () => {
-      expect(() => {
-        setOptions();
-      }).toThrow();
-    })
-
-    it('should allow dev to set custom colours', () => {
-      const colors = {crazyRed:"RED!"};
-      expect(outline.colors).toBeUndefined();
-      setOptions({colors:{crazyRed:"RED!"}});
-      expect(outline.colors).toEqual(colors);
-    })
-})

package/dist/utils/sanitizeStyleObj.js

@@ -1,22 +0,0 @@
-"use strict";
-
-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 = mirgeStyles;
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function mirgeStyles(x) {
-  // remove all style values that are 'true'
-  if (x) return Object.keys(x).reduce(function (a, b) {
-    var type = _typeof(x[b]);
-    if ("string" === type || "number" === type || Array.isArray(x[b])) {
-      Object.assign(a, _defineProperty({}, b, x[b]));
-    }
-    return a;
-  }, {});
-}

package/empty-module.js

@@ -1 +0,0 @@
-module.exports = ''

package/example/.babelrc

@@ -1,4 +0,0 @@
-
-{
-  "presets": [ "react", "es2015"]
-}

package/example/.storybook/config.js

@@ -1,7 +0,0 @@
-import { configure } from '@kadira/storybook'
-
-function loadStories() {
-  require('../stories');
-}
-
-configure(loadStories, module);

package/example/.storybook/webpack.config.js

@@ -1,14 +0,0 @@
-var path = require("path");
-
-module.exports = {
-  resolve:{
-    alias:{
-      'react-outline$':path.join(__dirname, "../../dist/main.js")
-    }
-  },
-  module: {
-      loaders: [
-          { test: /\.css$/, loader: "style-loader!css-loader" }
-      ]
-  }
-};

package/example/README.md

@@ -1,11 +0,0 @@
-# How to run Example / [Live Demo](https://s3.amazonaws.com/react-outline/index.html?down=0)
-
-1) `npm install react-outline`
-2) `cd node_modules/react-outline/example/`
-
-once you are in the "example" folder and run the following commands
-
-3) `npm install`
-4) `npm start`
-
-then open a web brower to http://localhost:6006

package/example/package.json

@@ -1,55 +0,0 @@
-{
-  "name": "react-outline-example",
-  "version": "1.0.0",
-  "description": "Example: a utility of managing your inline style",
-  "main": "main.jsx",
-  "scripts": {
-    "start": "start-storybook -p 6006",
-    "build": "build-storybook"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/codemeasandwich/react-outline.git"
-  },
-  "keywords": [
-    "redux",
-    "middleware",
-    "reducers",
-    "actions",
-    "example"
-  ],
-  "author": "Brian Shannon (http://www.codemeasandwich.com)",
-  "license": "MPL",
-  "bugs": {
-    "url": "https://github.com/codemeasandwich/react-outline/issues"
-  },
-  "homepage": "https://github.com/codemeasandwich/react-outline/example#readme",
-  "dependencies": {
-    "animate.css": "^3.5.2",
-    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "html-webpack-plugin": "^2.28.0",
-    "js-beautify": "^1.7.4",
-    "react": "^15.6.1",
-    "react-addons-css-transition-group": "^15.6.0",
-    "react-dom": "^15.6.1",
-    "webpack": "^2.5.1",
-    "webpack-dev-server": "^2.4.5"
-  },
-  "devDependencies": {
-    "@kadira/storybook": "^2.21.0",
-    "@storybook/addon-info": "^3.2.0",
-    "babel-plugin-module-resolver": "^2.7.1",
-    "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-stage-0": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "css-loader": "^0.28.4",
-    "raw-loader": "^0.5.1",
-    "style-loader": "^0.18.2",
-    "webpack-subresource-integrity": "^1.0.1"
-  }
-}

package/example/stories/Animate/basic.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
-import outline,{ Styles } from 'react-outline'
-import 'animate.css'
-
-let styles = {
-    base : {
-      list:{ listStyleType: "none" },
-      item:{
-        base:{ textShadow: "1px 1px 10px #000", color:"white", cursor:"pointer" },
-        ":hover":{ color:"blue" }
-      }
-    }
-}
-styles = outline(styles);
-
-const List = styles.list`ul`
-const Item = styles.item`li`
-
-class Panel extends React.Component {
-  constructor(props) {
-    super(props);
-    this.add = this.add.bind(this);
-    this.state = {  data: [],  name:'' };
-  }
-
-  render() {
-    return (
-      <div><Styles/>
-       <input placeholder="Type something here" type="text"
-              onChange={({target})=>this.setState({name:target.value})}
-              value={this.state.name}/>
-       <input onClick={this.add} type="button" value="Add" />
-       {!!this.state.data.length && <div>click on item to remove</div>}
-        <List>
-
-        <ReactCSSTransitionGroup
-                      transitionEnterTimeout={600}
-                       transitionLeaveTimeout={600}
-                       transitionName={{enter       :"animated",
-                                       enterActive  :"fadeIn",
-                                       leave        :"animated",
-                                       leaveActive  :"fadeOut"}}>
-        {
-          this.list()
-        }
-        </ReactCSSTransitionGroup>
-        </List>
-
-      </div>
-    )
-  }
-
-  list(){
-  return  this.state.data.map((player,i) =>{
-       return <Item key={player.id} onClick={()=> this.remove(i) }>{player.name}</Item>
-    })
-  }
-
-  add(){
-    var arr = this.state.data.slice();
-    arr.push({'id':(new Date()).getTime(),'name':this.state.name})
-    this.setState({data:arr,name:""})
-  }
-
-  remove(index){
-    const data = this.state.data.slice(0);
-    data.splice( index, 1 )
-    this.setState({data})
-  }
-}
-
-export default <Panel/>

package/example/stories/Basics/CreatingAndApplyingAStyle.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      title:{ backgroundColor: "red" }
-    }
-}
-styles = outline(styles);
-
-const Title = <div style={styles.title()}>basic</div>
-export default Title

package/example/stories/Basics/Form.js

@@ -1,24 +0,0 @@
-
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-      fullName:{ }
-}
-styles = outline(styles);
-
-const FullName = styles.fullName`input`
-
-const Form = <form onSubmit={handleSubmit}>
-
-  <label htmlFor="fullName">Full Name</label>
-  
-    <FullName
-      type="text"
-      value={this.state.fullName}
-      onChange={this.handleFullNameChange} />
-
-  <input type="submit" value="Submit" />
-</form>
-
-export default Form

package/example/stories/Basics/ImpliedTags.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      table : {
-          borderCollapse: "collapse",
-          width: "100%"
-      },
-      tr : {
-          borderBottom: "thick solid red"
-      },
-      td : {
-          border: "1px solid #dddddd",
-          padding: "8px"
-      }
-    }
-}
-styles = outline(styles);
-
-// The HTML tag type is implied by the name
-
-const Table = styles.table``
-const Row   = styles.tr``
-const Cell  = styles.td``
-
-export default <Table>
-                  <Row>
-                    <Cell>Maria Anders</Cell>
-                    <Cell>Germany</Cell>
-                  </Row>
-                  <Row>
-                    <Cell>Francisco Chang</Cell>
-                    <Cell>Mexico</Cell>
-                  </Row>
-                  <Row>
-                    <Cell>Roland Mendel</Cell>
-                    <Cell>Austria</Cell>
-                  </Row>
-              </Table>

package/example/stories/Basics/PassingStyleAndFuntion.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-      title:{ backgroundColor: "red" }
-}
-const fus = {title:()=> ({ color:"white" }) }
-
-styles = outline(styles,fus);
-
-const Title = styles.title`div`
-
-export default <Title>basic</Title>

package/example/stories/Basics/PassingStyleAndFuntionAsArray.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-      title:{ backgroundColor: "red" }
-}
-const fus = {title:()=> ({ color:"white" }) }
-
-styles = outline([styles,fus]);
-
-const Title = styles.title`div`
-
-export default <Title>basic</Title>

package/example/stories/Basics/ReusingElements.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      title:{ backgroundColor: "red" }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`span`
-
-export default <div><Title>foo</Title><Title>bar</Title></div>