diff --git a/examples/aphrodite/src/components/Button/index.js b/examples/aphrodite/src/components/Button/index.js
new file mode 100644
index 0000000..9726807
--- /dev/null
+++ 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.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
new file mode 100644
index 0000000..9e389e7
--- /dev/null
+++ 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
new file mode 100644
index 0000000..a5e43d0
--- /dev/null
+++ 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 (
+
+
+
+
+
+ {this.props.firstName}{(this.props.lastName) ? (` ${this.props.lastName}`) : null}
+
+ @{this.props.username}
+
+
+
{this.props.bio}
+
+
+
+
+ );
+ }
+}
+
+export default Profile;
diff --git a/examples/aphrodite/src/components/Profile/styles.js b/examples/aphrodite/src/components/Profile/styles.js
new file mode 100644
index 0000000..b3d3025
--- /dev/null
+++ 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
new file mode 100644
index 0000000..37151ff
--- /dev/null
+++ b/examples/aphrodite/src/index.html
@@ -0,0 +1,10 @@
+
+
+
+
+ Styleguide
+
+
+
+
+
diff --git a/examples/aphrodite/src/index.js b/examples/aphrodite/src/index.js
new file mode 100644
index 0000000..5cd5e5e
--- /dev/null
+++ 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(
+ ,
+ document.getElementById('root')
+);
diff --git a/examples/aphrodite/webpack.dev.babel.js b/examples/aphrodite/webpack.dev.babel.js
new file mode 100644
index 0000000..e64ab54
--- /dev/null
+++ 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
index 76ab54f..25147ee 100644
--- 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",