carteb · mxstbr · May 28, 2016 · May 28, 2016 · May 28, 2016
diff --git a/examples/aphrodite/src/components/Button/index.js b/examples/aphrodite/src/components/Button/index.js
@@ -0,0 +1,18 @@
+import React, { PropTypes } from 'react';
+import { css } from 'aphrodite';
+
+import styles from './styles';
+
+const Button = (props) => (
+  <button
+    className={(props.type === 'secondary') ? css(styles.button) : css(styles.buttonPrimary)}
+    {...props}
+  />
+);
+
+Button.propTypes = {
+  children: PropTypes.node.isRequired,
+  type: PropTypes.oneOf(['primary', 'secondary']),
+};
+
+export default Button;
diff --git a/examples/aphrodite/src/components/Button/styles.js b/examples/aphrodite/src/components/Button/styles.js
@@ -0,0 +1,24 @@
+import { StyleSheet } from 'aphrodite';
+
+const baseStyles = {
+  padding: '0.5em 1.75em',
+  fontSize: '0.75em',
+  borderRadius: '3px',
+};
+
+const styles = StyleSheet.create({
+  button: {
+    ...baseStyles,
+    border: '1px solid #6CC0E5',
+    color: '#6CC0E5',
+    backgroundColor: 'white',
+  },
+  buttonPrimary: {
+    ...baseStyles,
+    backgroundColor: '#6CC0E5',
+    color: 'white',
+    border: '1px solid #6CC0E5',
+  },
+});
+
+export default styles;
diff --git a/examples/aphrodite/src/components/Profile/index.js b/examples/aphrodite/src/components/Profile/index.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { css } from 'aphrodite';
+
+import Button from '../Button';
+
+import styles from './styles';
+
+class Profile extends Component {
+  static propTypes = {
+    avatarUrl: React.PropTypes.string.isRequired,
+    firstName: React.PropTypes.string.isRequired,
+    lastName: React.PropTypes.string,
+    username: React.PropTypes.string.isRequired,
+    bio: React.PropTypes.string,
+  };
+
+  onAddFriend = () => {
+    alert(`Add @${this.props.username} as a friend`); // eslint-disable-line no-alert
+  };
+
+  render() {
+    return (
+      <div className={css(styles.card)}>
+        <div className={css(styles.row)}>
+          <img
+            className={css(styles.avatar)}
+            src={this.props.avatarUrl}
+            alt={`${this.props.firstName} ${this.props.lastName}`}
+          />
+          <div className={css(styles.information)}>
+            <h1 className={css(styles.name)}>
+              {this.props.firstName}{(this.props.lastName) ? (` ${this.props.lastName}`) : null}
+            </h1>
+            <h2 className={css(styles.username)}>@{this.props.username}</h2>
+          </div>
+        </div>
+        <p className={css(styles.paragraph)}>{this.props.bio}</p>
+        <div className={css(styles.buttonWrapper)}>
+          <Button type="secondary" onClick={this.onAddFriend}>
+            Add friend!
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Profile;
diff --git a/examples/aphrodite/src/components/Profile/styles.js b/examples/aphrodite/src/components/Profile/styles.js
@@ -0,0 +1,58 @@
+import { StyleSheet } from 'aphrodite';
+
+const borderRadius = '3px';
+const fontFamily = 'Helvetica, Arial, sans-serif';
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'white',
+    borderRadius,
+    boxShadow: '0 1px 1px rgba(50,59,67,0.1)',
+    padding: '1.5em',
+    fontFamily,
+    color: '#222',
+    maxWidth: '20em',
+  },
+  row: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  avatar: {
+    borderRadius,
+    height: '6em',
+    width: '6em',
+  },
+  information: {
+    paddingLeft: '1.5em',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  name: {
+    fontSize: '1.5em',
+    fontFamily,
+    margin: 0,
+    color: '#222',
+  },
+  username: {
+    fontSize: '1em',
+    fontFamily,
+    fontWeight: 300,
+    margin: 0,
+    color: '#999',
+  },
+  paragraph: {
+    fontSize: '1em',
+    margin: '1.25em 0',
+    fontFamily,
+    color: '#222',
+  },
+  buttonWrapper: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default styles;
diff --git a/examples/aphrodite/src/index.html b/examples/aphrodite/src/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Styleguide</title>
+  </head>
+  <body>
+    <div id='root'></div>
+  </body>
+</html>
diff --git a/examples/aphrodite/src/index.js b/examples/aphrodite/src/index.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Profile from './components/Profile';
+import { StyleSheet, css } from 'aphrodite';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+  },
+});
+
+ReactDOM.render(
+  <div className={css(styles.wrapper)}>
+    <style>{`
+      html,
+      body,
+      #root {
+        width: 100%;
+        height: 100%;
+        background-color: #f4f7f9;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+      }
+    `}</style>
+    <Profile
+      avatarUrl="https://pbs.twimg.com/profile_images/681114454029942784/PwhopfmU.jpg"
+      firstName="Max"
+      lastName="Stoiber"
+      username="mxstbr"
+      bio="I travel around the world, brew coffee, ski mountains and make stuff on the web. Open source developer advocate (@KeystoneJS @ElementalUI), part of @reactvienna." // eslint-disable-line max-len
+    />
+  </div>,
+  document.getElementById('root')
+);
diff --git a/examples/aphrodite/webpack.dev.babel.js b/examples/aphrodite/webpack.dev.babel.js
@@ -0,0 +1,77 @@
+import path from 'path';
+import webpack from 'webpack';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import StyleguidePlugin from '../../plugin/styleguide-plugin';
+import autoprefixer from 'autoprefixer';
+
+export default {
+  devtool: 'inline-source-map',
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: 'bundle.js',
+    publicPath: '/',
+  },
+  entry: [
+    'webpack-dev-server/client',
+    'webpack/hot/only-dev-server',
+    path.join(__dirname, './src/index.js'),
+  ],
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        DISABLE_LOGGER: process.env.DISABLE_LOGGER,
+      },
+    }),
+    new HtmlWebpackPlugin({
+      inject: true,
+      template: path.join(__dirname, './src/index.html'),
+    }),
+    new StyleguidePlugin({
+      include: [
+        // match components like Button/index.js
+        'src/components/**/[A-Z][a-zA-Z]*/index.js',
+        // match components like Button.js
+        'src/components/**/[A-Z][a-zA-Z]*.js',
+      ],
+    }),
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loaders: ['react-hot', 'babel'],
+        exclude: /node_modules/,
+      }, {
+        test: /\.css/,
+        loader: 'style!css?modules&importLoaders=1&localIdentName=[local]__[path][name]__[hash:base64:5]!postcss-loader', // eslint-disable-line max-len
+      }, {
+        test: /\.(png|jpg|gif)$/,
+        loaders: ['url?limit=10000'],
+      }, {
+        test: /\.(svg)$/,
+        loaders: ['url?limit=0'],
+      }, {
+        test: /\.(json)$/,
+        loader: 'json',
+      },
+    ],
+  },
+  postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
+  // It suppress error shown in console, so it has to be set to false.
+  quiet: false,
+  // It suppress everything except error, so it has to be set to false as well
+  // to see success build.
+  noInfo: false,
+  stats: {
+    // Config for minimal console.log mess.
+    assets: false,
+    colors: true,
+    version: false,
+    hash: false,
+    timings: false,
+    chunks: false,
+    chunkModules: false,
+  },
+};
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "example:profile": "npm run server -- --context examples/profile/ --config examples/profile/webpack.dev.babel.js",
     "example:radium": "npm run server -- --context examples/radium/ --config examples/radium/webpack.dev.babel.js",
     "example:jss": "npm run server -- --context examples/jss/ --config examples/jss/webpack.dev.babel.js",
+    "example:aphrodite": "npm run server -- --context examples/aphrodite/ --config examples/aphrodite/webpack.dev.babel.js",
     "client:dev": "webpack-dev-server --hot --config client/webpack.dev.babel.js",
     "client:build": "webpack --config client/webpack.prod.babel.js --progress -p",
     "build": "npm run client:build",
@@ -75,6 +76,7 @@
     "whatwg-fetch": "^1.0.0"
   },
   "devDependencies": {
+    "aphrodite": "^0.3.1",
     "autoprefixer-loader": "^3.2.0",
     "babel": "^6.5.2",
     "babel-cli": "^6.9.0",