react-outline 1.7.3 → 2.1.0

package/example/stories/Basics/Share.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      title:{ backgroundColor: "red" },
-      "title, content":{
-         textShadow: "2px 2px 2px black"
-      },
-      content:{ base:{ color: "red"} },
-    }
-}
-styles = outline(styles);
-const Title = styles.title`div`
-
-export default <div>
-  <Title>basic</Title>
-  <span style={styles.content()}>content</span>
-</div>

package/example/stories/Basics/UsingTheTagCreater.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`div`
-
-export default <Title>basic</Title>

package/example/stories/Basics/WrappingAnExistingElement.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-class HelloMessage extends React.Component {
-  render() {
-    return <div style={this.props.style}>Hello, {this.props.name}</div>;
-  }
-}
-
-let styles = {
-    base : {
-      title:{ base : {backgroundColor: "red"} }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`${HelloMessage}`
-
-export default <Title name="basic"/>

package/example/stories/Button.js

@@ -1,27 +0,0 @@
-import React from 'react';
-
-const buttonStyles = {
-  border: '1px solid #eee',
-  borderRadius: 3,
-  backgroundColor: '#FFFFFF',
-  cursor: 'pointer',
-  fontSize: 15,
-  padding: '3px 10px',
-  margin: 10,
-};
-
-const Button = ({ children, onClick }) => (
-  <button
-    style={buttonStyles}
-    onClick={onClick}
-  >
-    {children}
-  </button>
-);
-
-Button.propTypes = {
-  children: React.PropTypes.string.isRequired,
-  onClick: React.PropTypes.func,
-};
-
-export default Button;

package/example/stories/CSSHelpers/CssSelector.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-import { Styles } from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-         base:{     background: "lightblue", color:"black" },
-        "div:nth-child(even)":{  background: "darkblue" , color:"white" }
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`div`
-
-export default <div>
-<Styles/>
-  <Title>
-    <div>foo</div>
-    <div>bar</div>
-    <div>baz</div>
-  </Title>
-</div>

package/example/stories/CSSHelpers/CssSource.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Styles } from 'react-outline'
-
-const Title = <div>
-<Styles>{`
-
-    .title{
-      font-size: 25px;
-      background-color: yellow;
-    }
-
-`}</Styles>
-
-<div className="title">basic</div>
-
-</div>
-
-export default Title

package/example/stories/CSSHelpers/DynamicCssSelectors.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-import { Styles } from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-         base:{     background: "lightblue", color:"black" },
-        "div:nth-child(even)":{  background: "darkblue" , color:"white" }
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`div`
-
-export default <div>
-<Styles/>
-  <Title css={{"div:nth-child(even)":{color:"red"}}}>
-    <div>foo</div>
-    <div>bar</div>
-    <div>baz</div>
-  </Title>
-</div>

package/example/stories/CSSHelpers/Hover.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-import { Styles } from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-         base:{     background: "lightblue", color:"black" },
-        ":hover":{  background: "darkblue" , color:"white" }
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`div`
-
-export default <div>
-<Styles/>
-<Title>basic</Title>
-</div>

package/example/stories/CSSHelpers/MediaQuery.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-import { Styles } from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-         base:{ background: "lightgreen", color:"black" },
-         "@media (max-width: 600px)": {
-             background: "darkgreen", color:"white"
-         }
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`div`
-
-export default <div>
-<Styles/>
-<Title>basic</Title>
-</div>

package/example/stories/CSSHelpers/VendorPrefix.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-          display: "flex",
-          transition: "all .5s",
-          userSelect: "none",
-          fontSize:"40px",
-          background: "linear-gradient(to bottom, lightblue, darkblue)"  
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = <div style={styles.title()}>basic</div>
-
-export default Title

package/example/stories/CombineStyles/CreatingAndApplyingAStyle.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-        base:{fontSize: "25px" },
-        error:{color:"#f00" }
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = <div style={styles.title({error:true})}>basic</div>
-
-export default Title

package/example/stories/CombineStyles/LogicFnWithGenerateElement.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import outline, { withOptions } from 'react-outline'
-
-// example using a custom style generater with custom colors
-const custom_outline =  withOptions({colors:{CrazyRed:"#f00"}})
-
-// inline the style schema
-const styles = custom_outline({
-  title:{fontSize: "25px" }
-},{
-  title:(x)=>x
-});
-
-const Title = styles.title`div`
-
-export default <Title style={{color:"CrazyRed"}}>basic</Title>

package/example/stories/CombineStyles/PassStyleObjToGenerateElement.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-// inline the style schema
-const styles = outline({ title:{fontSize: 25 } });
-
-const Title = styles.title`div`
-
-export default <Title style={{color:"red"}}>basic</Title>

package/example/stories/CombineStyles/UsingAPropFlag.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-        base:{fontSize: "25px" },
-        error:{color:"#f00" }
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`div`
-
-export default <Title error>basic</Title>

package/example/stories/CombineStyles/UsingTheTagCreater.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      title:{
-        base:{fontSize: "25px" },
-        error:{color:"#f00" }
-      }
-    }
-}
-styles = outline(styles);
-
-const Title = styles.title`div`
-
-export default <Title style={{error:true}}>basic</Title>

package/example/stories/Ref/byFn.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom'
-import outline from 'react-outline'
-import { Styles } from 'react-outline'
-
-let styles = {
-    textarea : {
-      base:{
-        border: "2px solid transparent",
-        borderBottom: "2px solid lightgray",
-      },
-      ":focus":{
-        outline: "none",
-        borderBottom: "2px solid red",
-      }
-    }
-}
-styles = outline(styles);
-
-const Textarea = styles.textarea``
-
-class Panel extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.listenScrollEvent = this.listenScrollEvent.bind(this)
-    this.state = {scrollTop : 0};
-  }
-
-  componentDidMount() {
-    this.domElem.addEventListener('scroll', this.listenScrollEvent);
-  }
-
-  componentWillUnmount() {
-     this.domElem.removeEventListener('scroll', this.listenScrollEvent);
-  }
-
-  listenScrollEvent() {
-      this.setState({scrollTop:this.domElem.scrollTop})
-  }
-
-  render() {
-    return <div>
-      <Styles/>
-      Scroll me - { this.state.scrollTop }<br/>
-      <Textarea style={{width:450}} ref={(reatElem)=> this.domElem = findDOMNode(reatElem) } defaultValue={"1,2,3,4,5".replace(/,/g,"\n")} />
-    </div>
-  }
-}
-
-export default <Panel/>

package/example/stories/Ref/onEvent.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom'
-import outline from 'react-outline'
-import { Styles } from 'react-outline'
-
-let styles = {
-    textarea : {
-      base:{
-        border: "2px solid transparent",
-        borderBottom: "2px solid lightgray",
-      },
-      ":focus":{
-        outline: "none",
-        borderBottom: "2px solid red",
-      }
-    }
-}
-styles = outline(styles);
-
-const Textarea = styles.textarea``
-
-class Panel extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.listenScrollEvent = this.listenScrollEvent.bind(this)
-    this.state = {scrollTop : 0};
-  }
-
-  listenScrollEvent(domElem,event) {
-      this.setState({scrollTop:domElem.scrollTop})
-  }
-
-  render() {
-    return <div>
-      <Styles/>
-      Scroll me - { this.state.scrollTop }<br/>
-      <Textarea onDomEvent={{'scroll': this.listenScrollEvent}} style={{width:450}} defaultValue={"1,2,3,4,5".replace(/,/g,"\n")} />
-    </div>
-  }
-}
-
-export default <Panel/>

package/example/stories/RuntimeFunctions/DynamicStyles.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      content:{
-        backgroundColor:"gray"
-      },
-      cell:{
-        fontSize:10
-      }
-    }
-}
-
-styles.content = (numberOfCells) => ({ height : `${numberOfCells*50}px` })
-
-styles = outline(styles);
-
-const data = [{name:"foo"},
-              {name:"bar"},
-              {name:"cat"}]
-
-const LogicStyled = <div style={styles.content(data.length)}> {
-
-            data.map( (cellData,i) => (
-              <span key={i} styles={styles.cell()}>{
-                cellData.name
-              }</span>) )
-
-        } </div>
-
-export default LogicStyled

package/example/stories/RuntimeFunctions/FunctionWithOutStyle.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-// no "content" in style object
-
-let styles = {
-    base : {
-      cell:{
-        fontSize:10
-      }
-    }
-}
-
-styles.content = (numberOfCells) => ({ backgroundColor : "green" })
-
-styles = outline(styles);
-
-const data = [{name:"foo"},
-              {name:"bar"},
-              {name:"cat"}]
-
-const LogicStyled = <div style={styles.content(data.length)}> {
-
-            data.map( (cellData,i) => (
-              <span key={i} styles={styles.cell()}>{
-                cellData.name
-              }</span>) )
-
-        } </div>
-
-export default LogicStyled

package/example/stories/RuntimeFunctions/ModifyingStyles.js

@@ -1,36 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      content:{
-        backgroundColor:"lightgray"
-      },
-      cell:{
-        fontSize:10
-      }
-    }
-}
-
-styles.cell = (style,important) => {
-  return ({ fontSize : style.fontSize + ((important)?5:-5) })
-}
-
-styles = outline(styles);
-
-const data = [{name:"foo",important:true},
-              {name:"bar",important:false},
-              {name:"baz",important:true},
-              {name:"qux",important:false},
-              {name:"quux"}]
-
-const LogicStyled = <div style={styles.content(data.length)}> {
-
-            data.map( (cellData,i) => (
-              <span key={i} style={styles.cell(cellData.important)}>{
-                cellData.name
-              }</span>) )
-
-        } </div>
-
-export default LogicStyled

package/example/stories/RuntimeFunctions/WithGeneratedElements.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-
-let styles = {
-    base : {
-      content:{},
-      cell:{
-        fontSize:10
-      }
-    }
-}
-
-styles.content = (numberOfCells) => ({
-  backgroundColor : "red",
-  height : `${numberOfCells*100}px`
-})
-
-styles.cell = (style,important) => ({ fontSize : style.fontSize + (important)?5:-5 })
-
-styles = outline(styles);
-
-const data = [{name:"foo",important:true},
-              {name:"bar",important:false},
-              {name:"cat"}]
-
-const Group = styles.content`div`
-const Cell  = styles.cell`span`
-
-const LogicStyled = <Group style={data.length}> {
-
-            data.map( (cellData,i) => (
-              <Cell key={i} styles={cellData.important}>{
-                cellData.name
-              }</Cell>) )
-
-        } </Group>
-
-export default LogicStyled

package/example/stories/Welcome.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import outline from 'react-outline'
-import { Styles, setOptions} from 'react-outline'
-
-const css = {
-    article:{
-      base:{
-        background:"linear-gradient(to bottom, rgb(26,154,218) 0%,rgb(13,131,190) 100%)",
-        padding: "10px"
-      },
-      ":hover":{
-        background:"linear-gradient(to bottom, rgb(24, 142, 202) 0%,rgb(12, 118, 171) 100%)"
-      }
-    }
-}
-
-const styles = outline([css]);
-
-const Panel = styles.article``
-
-export default class Welcome extends React.Component {
-  showApp(e) {
-    e.preventDefault();
-    if(this.props.showApp) this.props.showApp();
-  }
-
-  render() {
-    return (<div>
-      <Styles>{`
-
-      *{
-        font-family: arial,sans-serif;
-      }
-
-      `}</Styles>
-<a href="https://www.npmjs.com/package/react-outline">
-      <img alt="react-outline" title="react-outline logo" src="https://s3-eu-west-1.amazonaws.com/files.codemeasandwich.com/react-outline-logo2.png"/></a>
-        <h1>React-outline is a utility of managing your inline style</h1>
-        <h2>
-          react-outline was designed to more easly manage inline styles and better support server side rendering with complete styling
-        </h2>
-        <p>Feathers:</p>
-        <ul>
-        <li>Cleaner JSX markup (without the styles)</li>
-        <li>Easy creation of standered and custom element combining styles into the element
-        <ul>
-        <li>Easer debugging of element with injected name attributes</li>
-        </ul>
-        </li>
-        <li>Support a UI Color Palette</li>
-        <li>Dynamically add vendor prefixes</li>
-        <li>Cache calculated style</li>
-        </ul>
-
-      </div>
-    );
-  }
-}
-
-/*
-<p> ... </p>
-<p> ... </p>
-<p> ... </p>
-<p> ... </p>
-
-<p>
-  Weve added some basic stories inside the <code >src/stories</code> directory.
-  <br/>
-  A story is a single state of one or more UI components. You can have as many stories as you want.
-  <br/>
-  (Basically a story is like a visual test case.)
-</p>
-<p>
-  See these sample <a  href='#' onClick={this.showApp.bind(this)}>stories</a> for a component called <code >Button</code>.
-</p>
-<p>
-  Just like that, you can add your own components as stories.
-  <br />
-  You can also edit those components and see changes right away.
-  <br />
-  (Try editing the <code >Button</code> component
-  located at <code >src/stories/Button.js</code>.)
-</p>
-<p>
-  This is just one thing you can do with Storybook.
-  <br/>
-  Have a look at the <a  href="https://github.com/kadirahq/react-storybook" target="_blank">React Storybook</a> repo for more information.
-</p>
-
-*/