Improve examples

example/package.json → demo/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "webpack-dev-server",
     "postinstall": "npm run link",
-    "link": "cd ../ && npm link && cd example && npm link react-skeletor"
+    "link": "cd ../ && npm link && cd - && npm link react-skeletor"
   },
   "keywords": [
     "react",
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@types/react": "^15.0.25",
     "@types/react-dom": "^15.5.0",
+    "@types/react-router": "^3.0.11",
     "ts-loader": "^2.1.0",
     "typescript": "^2.3.3",
     "webpack": "^2.6.0",
@@ -25,6 +26,7 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-live": "^1.5.2",
+    "react-router": "^3.0.5",
     "styled-components": "^1.4.6"
   }
 }

example/src/components/CardCSS/CardCSS.tsx → demo/src/components/CardCSS/CardCSS.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSkeletonProvider, Span, Img, Div } from 'react-skeletor';
 
-import { UserCard } from '../../index';
+import { UserCard } from '../../data';
 
 const dummyData = {
   card: {

example/src/components/CardInlineStyles/CardInlineStyles.styles.ts → demo/src/components/CardInlineStyles/CardInlineStyles.styles.ts

@@ -1,7 +1,8 @@
 export default {
   container: {
     display: 'flex',
-    width: '100%',
+    width: '80%',
+    margin: 'auto',
     border: '1px solid  #ddd'
   },
   avatar: {
@@ -26,9 +27,5 @@ export default {
   description: {
     color: '#95a5a6',
     marginTop: 10,
-  },
-  wrapper: {
-    backgroundColor: 'white',
-    padding: 20
   }
 };

example/src/components/CardInlineStyles/CardInlineStyles.tsx → demo/src/components/CardInlineStyles/CardInlineStyles.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSkeletonProvider, Span, Img, Div } from 'react-skeletor';
 
-import { UserCard } from '../../index';
+import { UserCard } from '../../data';
 
 import styles from './CardInlineStyles.styles';
 
@@ -21,19 +21,16 @@ export interface Props {
 }
 
 export const Card: React.StatelessComponent<Props> = ({ card }) => (
-  <div style={styles.wrapper}>
-    <h3>Rendering:</h3>
-    <div style={styles.container}>
-      <Img style={styles.avatar} src={card.avatar} className="pending"/>
-      <div style={styles.content}>
-        <h1 style={styles.firstName}>
-          <Span className="pending">{card.firstName}</Span>
-        </h1>
-        <h3 style={styles.lastName}>
-          <Span className="pending">{card.lastName}</Span>
-        </h3>
-        <Div style={styles.description} className="pending">{card.description}</Div>
-      </div>
+  <div style={styles.container}>
+    <Img style={styles.avatar} src={card.avatar} className="pending"/>
+    <div style={styles.content}>
+      <h1 style={styles.firstName}>
+        <Span className="pending">{card.firstName}</Span>
+      </h1>
+      <h3 style={styles.lastName}>
+        <Span className="pending">{card.lastName}</Span>
+      </h3>
+      <Div style={styles.description} className="pending">{card.description}</Div>
     </div>
   </div>
 );

example/src/components/CardStyledComponents/CardStyledComponents.tsx → demo/src/components/CardStyledComponents/CardStyledComponents.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createSkeletonProvider } from 'react-skeletor';
 
-import { UserCard } from '../../index';
+import { UserCard } from '../../data';
 
 import { Avatar, Content, FirstName, LastName, Container, Description, Name } from './CardStyledComponents.styles';
 

demo/src/components/cardCode.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { LiveProvider, LiveEditor } from 'react-live';
+import cardInlineCode from './cardInline.code';
+
+const CardCode = () => (
+  <LiveProvider code={cardInlineCode}>
+    <LiveEditor contentEditable={false}/>
+  </LiveProvider>
+);
+
+export default CardCode;

demo/src/examples/index.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+// import styled from 'styled-components';
+import CardStyledComponents from '../components/CardStyledComponents/CardStyledComponents';
+import CardInlineStyles from '../components/CardInlineStyles/CardInlineStyles';
+import CardCSS from '../components/CardCSS/CardCSS';
+import data, { ApplicationState } from '../data';
+
+const fakeAPI = () => new Promise<ApplicationState>((resolve, reject) => setTimeout(() => resolve(data), 10000002500));
+
+class Home extends React.Component<{}, ApplicationState> {
+  state = {} as ApplicationState;
+
+  componentWillMount() {
+    fakeAPI().then((response) => this.setState(response));
+  }
+
+  render() {
+    return (
+      <div>
+        <CardInlineStyles card={this.state.cardA}/>
+        <CardStyledComponents card={this.state.cardB} title="A title"/>
+        <CardCSS card={this.state.cardC}/>
+      </div>
+    );
+  }
+}
+
+export default Home;

demo/src/home/index.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import CardCode from '../components/cardCode';
+import data, { ApplicationState } from '../data';
+
+const fakeAPI = () => new Promise<ApplicationState>((resolve, reject) => setTimeout(() => resolve(data), 10000002500));
+
+const P = styled.p`
+  font-size: 20px;
+`;
+
+class Home extends React.Component<{}, ApplicationState> {
+  state = {} as ApplicationState;
+
+  componentWillMount() {
+    fakeAPI().then((response) => this.setState(response));
+  }
+
+  render() {
+    return (
+      <div>
+        <P>Display a skeleton preview of your application's content before the data get loaded</P>
+        <CardCode/>
+      </div>
+    );
+  }
+}
+
+export default Home;

example/src/index.html → demo/src/index.html

@@ -1,7 +1,7 @@
 <html>
   <head>
     <title>React Skeletor</title>
-    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Code+Pro:400,500" rel="stylesheet">
     <style>
 
       /*
@@ -13,11 +13,7 @@
       }
       *, *:before, *:after {
         box-sizing: inherit;
-        font-family: 'Source Code Pro', monospace;
-      }
-
-      body {
-       background-color: #059E87; 
+        font-family: 'open-sans', monospace;
       }
       /*
         Animation is here since we can't do this in JS with inline styles :(

demo/src/index.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Router, Route, browserHistory, Link, IndexRoute } from 'react-router';
+import styled from 'styled-components';
+import Examples from './examples';
+import Home from './home';
+
+const Title = styled.h1`
+  font-family: open-sans, sans-serif;
+  font-size: 24px;
+  text-align: center;
+`;
+
+const Nav = styled.nav`
+  text-align: center;
+`;
+
+const StyledLink = styled(Link)`
+  margin: 0px 4px;
+`;
+
+const Root: React.StatelessComponent<void> = ({ children }) => (
+  <div>
+    <Title>React-skeletor</Title>
+    <Nav>
+      <StyledLink to="/">home</StyledLink>
+      <StyledLink to="/demo">Examples</StyledLink>
+    </Nav>
+    {
+      children
+    }
+  </div>
+);
+
+function render() {
+  ReactDOM.render(
+    <Router history={browserHistory}>
+      <Route path="/" component={Root}>
+        <IndexRoute component={Home}/>
+        <Route path="/demo" component={Examples}/>
+      </Route>
+    </Router>,
+    document.getElementById('root')
+  );
+}
+
+render();

tsconfig.json

@@ -20,7 +20,7 @@
   },
   "exclude": [
     "src/__tests__",
-    "example",
+    "demo",
     "node_modules",
     "lib"
   ]