Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #27 from yldio/ramos/css

Browse Source 
aphrodite and css-modules working examples
This commit is contained in:
Tom Gallacher 2016-10-19 15:11:42 +01:00 committed by GitHub
commit 1d86d4c776
33 changed files with 700 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
spikes/css/aphrodite/.flooignore Normal file
View File

@ -0,0 +1,8 @@
#*
*.o
*.pyc
*~
extern/
node_modules/
tmp
vendor/

15
spikes/css/aphrodite/.gitignore vendored Normal file
View File

@ -0,0 +1,15 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# testing
coverage
# production
build
# misc
.DS_Store
.env
npm-debug.log

7
spikes/css/aphrodite/.storybook/config.js Normal file
View File

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

23
spikes/css/aphrodite/package.json Normal file
View File

@ -0,0 +1,23 @@
{
"name": "aphrodite-spike",
"version": "1.0.0",
"private": true,
"devDependencies": {
"react-scripts": "0.6.1",
"@kadira/storybook": "^2.21.0"
},
"dependencies": {
"aphrodite": "^0.6.0",
"color": "^0.11.3",
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
}
}

12
spikes/css/aphrodite/public/index.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Aphrodite CSS</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

11
spikes/css/aphrodite/src/App.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import Button from './button';
export default () => {
return (
<div>
<h1>Hello</h1>
<Button>Button</Button>
</div>
);
};

68
spikes/css/aphrodite/src/button.js Normal file
View File

@ -0,0 +1,68 @@
import React from 'react';
import { StyleSheet, css } from 'aphrodite';
import color from 'color';
import hoverTransition from './mixins/hover-transition';
import variables from './variables.json';
import h3 from './globals/h3'; // this is just to showcase style dependencies (not mixins)
const primaryHover = hoverTransition({
type: 'button',
hover: color(variables.color.cta.primary).darken(0.2).rgbString(),
color: variables.color.cta.primary
});
const secondaryHover = hoverTransition({
type: 'button',
hover: color(variables.color.cta.secondary).darken(0.2).rgbString(),
color: variables.color.cta.secondary
});
const styles = StyleSheet.create({
button: {
display: 'block',
verticalAlign: 'top',
textTransform: 'capitalize',
borderRadius: 10,
margin: 0,
border: 'none',
':hover': {
textDecoration: 'none'
},
':disabled': {
color: 'black'
}
},
primary: {
...primaryHover,
color: 'white'
},
secondary: {
...secondaryHover,
color: 'black',
lineHeight: 25
}
});
const Button = (props) => {
const {
className = '',
children = '',
primary = true,
secondary = false
} = props;
const _styles = [
styles.button,
(primary || !secondary) ? styles.primary : styles.secondary,
h3 // this is just to showcase style dependencies (not mixins)
];
return (
<button {...props} className={`${css(..._styles)} ${className}`}>
{children}
</button>
);
};
export default Button;

9
spikes/css/aphrodite/src/globals/h3.js Normal file
View File

@ -0,0 +1,9 @@
import { StyleSheet } from 'aphrodite';
import variables from '../variables.json';
export default StyleSheet.create({
h3: {
fontSize: 13
}
}).h3;

8
spikes/css/aphrodite/src/index.js Normal file
View File

@ -0,0 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);

37
spikes/css/aphrodite/src/mixins/hover-transition.js Normal file
View File

@ -0,0 +1,37 @@
const transition = 'ease-in-out all 0.5s';
const types = {
button: ({
type,
color,
hover
}) => {
return {
backgroundColor: color,
transition,
':hover': {
backgroundColor: hover,
transition
}
};
},
text: ({
type,
color,
hover
}) => {
return {
color,
transition,
':hover': {
color: hover,
transition,
textDecoration: 'underline'
}
};
}
};
export default (props) => {
return types[props.type](props);
};

14
spikes/css/aphrodite/src/stories/index.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from '../button';
storiesOf('Button', module)
.add('with text', () => (
<Button onClick={action('clicked')}>Hello Button</Button>
))
.add('with some emoji', () => (
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
))
.add('secondary', () => (
<Button secondary={true}>Hello Button</Button>
));

22
spikes/css/aphrodite/src/variables.json Normal file
View File

@ -0,0 +1,22 @@
{
"font": {
"primary": "'freddiesflowerstitle-webfont', 'Times', serif",
"secondary": "'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
"tertiary": "Georgia, Times, 'Times New Roman', serif"
},
"color": {
"background": "#f2f2f2",
"primary": {
"main": "#ccc",
"dark": "#222",
"mid": "#959595",
"light": "#f4f4f4"
},
"warning": "#C93F3F",
"valid": "#547954",
"cta": {
"primary": "#60b4d6",
"secondary": "#e5eef2"
}
}
}

15
spikes/css/css-modules/.babelrc Normal file
View File

@ -0,0 +1,15 @@
{
"presets": [
"react",
"es2015"
],
"plugins": [
["transform-object-rest-spread", {
"useBuiltIns": true
}],
"add-module-exports",
"transform-es2015-modules-commonjs",
"react-hot-loader/babel"
],
"sourceMaps": "both"
}

3
spikes/css/css-modules/.eslintignore Normal file
View File

@ -0,0 +1,3 @@
/node_modules
coverage
.nyc_output

29
spikes/css/css-modules/.eslintrc Normal file
View File

@ -0,0 +1,29 @@
{
"extends": "semistandard",
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 7,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"babel",
"react"
],
"rules": {
"generator-star-spacing": 0,
"babel/generator-star-spacing": 1,
"space-before-function-paren": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2,
"object-curly-newline": ["error", {
"minProperties": 1
}],
"sort-vars": ["error", {
"ignoreCase": true
}]
}
}

4
spikes/css/css-modules/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
/node_modules
coverage
.nyc_output
npm-debug.log

5
spikes/css/css-modules/.storybook/config.js Normal file
View File

@ -0,0 +1,5 @@
const Storybook = require('@kadira/storybook');
Storybook.configure(() => {
require('../stories');
}, module);

59
spikes/css/css-modules/package.json Normal file
View File

@ -0,0 +1,59 @@
{
"name": "redux-thunks-spike",
"private": true,
"license": "private",
"main": "src/index.js",
"scripts": {
"start": "webpack-dev-server --open --config webpack.config.js",
"lint": "eslint .",
"test": "NODE_ENV=test nyc ava test/*.js --fail-fast --verbose --tap",
"open": "nyc report --reporter=html & open coverage/index.html",
"coverage": "nyc check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"autoprefixer": "^6.5.1",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-runtime": "^6.11.6",
"css-loader": "^0.25.0",
"postcss-loader": "^1.0.0",
"postcss-modules-values": "^1.2.2",
"postcss-nested": "^1.0.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"@kadira/storybook": "^2.24.1",
"ava": "^0.16.0",
"babel-register": "^6.16.3",
"enzyme": "^2.5.1",
"eslint": "^3.8.1",
"eslint-config-semistandard": "^7.0.0",
"eslint-config-standard": "^6.2.0",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "^6.4.1",
"eslint-plugin-standard": "^2.0.1",
"nyc": "^8.3.1",
"react-addons-test-utils": "^15.3.2"
},
"ava": {
"require": [
"babel-register"
],
"babel": "inherit"
}
}

15
spikes/css/css-modules/readme.md Normal file
View File

@ -0,0 +1,15 @@
# postcss + css-modules
#### src/showcase
contains all the files to showcase the components
#### src/components
contains all the css files and react components
## usage
## todo
- [ ] mixins (https://github.com/postcss/postcss-mixins)

103
spikes/css/css-modules/src/components/base/index.css Normal file
View File

@ -0,0 +1,103 @@
@value color_primary_dark, font_primary, font_secondary, font_tertiary from "./variables.css";
.base {
:global {
h1,
h2,
h3,
h4,
h5,
p,
li {
color: color_primary_dark;
}
h1,
h2,
h3 {
font-family: font_primary;
}
h4,
p,
li {
font-family: font_secondary;
}
a {
font-family: inherit;
text-decoration: none;
&:hover {
text-decoration: none;
}
}
h5,
p,
li {
& > a:hover {
text-decoration: underline;
}
}
h1 {
font-size: 14px;
line-height: 35px;
}
h2 {
font-size: 10px;
line-height: 25px;
}
h3 {
font-size: 6px;
line-height: 20px;
}
h4 {
font-size: 15px;
line-height: 20px;
letter-spacing: -0.025em;
}
h5 {
font-family: font_tertiary;
font-style: italic;
font-size: 15px;
line-height: 20px;
}
p {
font-size: 14px;
line-height: 18px;
letter-spacing: -0.025em;
a {
text-decoration: underline;
}
&.small {
font-size: 12px;
line-height: 16px;
}
}
span {
font-family: inherit;
}
button,
select,
a {
outline: none;
}
/* Removes the grey background when you tap on a link in IOS */
button,
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
}
}

12
spikes/css/css-modules/src/components/base/index.js Normal file
View File

@ -0,0 +1,12 @@
const React = require('react');
const styles = require('./index.css');
module.exports = ({
children
}) => {
return (
<div className={styles.base}>
{children}
</div>
);
};

12
spikes/css/css-modules/src/components/base/variables.css Normal file
View File

@ -0,0 +1,12 @@
@value font_primary: "freddiesflowerstitle-webfont", "Times", serif;
@value font_secondary: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
@value font_tertiary: Georgia, Times, "Times New Roman", serif;
@value color_primary: #ccc;
@value color_primary_dark: #222;
@value color_primary_mid: #959595;
@value color_primary_light: #f4f4f4;
@value color_warning: #C93F3F;
@value color_valid: #547954;
@value color_cta_primary: #60b4d6;
@value color_cta_secondary: #e5eef2;

9
spikes/css/css-modules/src/components/button/index.js Normal file
View File

@ -0,0 +1,9 @@
const React = require('react');
module.exports = (props) => {
return (
<button>
{props.children}
</button>
);
};

38
spikes/css/css-modules/src/components/container/index.css Normal file
View File

@ -0,0 +1,38 @@
@value color_background from "../base/variables.css";
.container {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container::after {
content: "";
display: table;
clear: both;
}
@media (min-width: 544px) {
.container {
max-width: 576px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 940px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

12
spikes/css/css-modules/src/components/container/index.js Normal file
View File

@ -0,0 +1,12 @@
const React = require('react');
const styles = require('./index.css');
module.exports = ({
children
}) => {
return (
<div className={styles.container}>
{children}
</div>
);
};

5
spikes/css/css-modules/src/components/index.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
Button: require('./button'),
Container: require('./container'),
Base: require('./base')
};

1
spikes/css/css-modules/src/index.js Normal file
View File

@ -0,0 +1 @@
module.exports = require('./components');

17
spikes/css/css-modules/src/showcase/index.js Normal file
View File

@ -0,0 +1,17 @@
const ReactDOM = require('react-dom');
const React = require('react');
const render = () => {
const Root = require('./root');
ReactDOM.render(
<Root />,
document.getElementById('root')
);
};
render();
if (module.hot) {
module.hot.accept('./root', render);
}

25
spikes/css/css-modules/src/showcase/root.js Normal file
View File

@ -0,0 +1,25 @@
const React = require('react');
const ReactHotLoader = require('react-hot-loader');
const {
Button,
Container,
Base
} = require('../');
const {
AppContainer
} = ReactHotLoader;
module.exports = () => {
return (
<AppContainer>
<Base>
<Container>
<p>Hello</p>
<Button>Hello</Button>
</Container>
</Base>
</AppContainer>
);
};

11
spikes/css/css-modules/static/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html lang='en-US'>
<head>
<title>React Boilerplate</title>
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
</head>
<body>
<div id='root'></div>
<script src='/static/bundle.js'></script>
</body>
</html>

10
spikes/css/css-modules/stories/index.js Normal file
View File

@ -0,0 +1,10 @@
const React = require('react');
const Storybook = require('@kadira/storybook');
const Home = require('../src/client/containers/home');
const homeStories = Storybook.storiesOf('Home', module);
homeStories.add('with nothing', () => (
<Home />
));

13
spikes/css/css-modules/test/index.js Normal file
View File

@ -0,0 +1,13 @@
const test = require('ava');
const enzyme = require('enzyme');
const React = require('react');
const {
shallow
} = enzyme;
test('renders <Home> without exploding', (t) => {
const Home = require('../src/client/containers/home');
const wrapper = shallow(<Home />);
t.deepEqual(wrapper.length, 1);
});

68
spikes/css/css-modules/webpack.config.js Normal file
View File

@ -0,0 +1,68 @@
const webpack = require('webpack');
const path = require('path');
const config = {
debug: true,
devtool: 'eval',
context: path.join(__dirname, './src'),
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./showcase/index.js'
],
output: {
path: path.join(__dirname, './static'),
publicPath: '/static/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
postcss: () => {
return [
require('postcss-modules-values'),
require('postcss-nested'),
require('autoprefixer')
];
},
module: {
loaders: [{
test: /js?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './src')
],
loaders: ['babel']
}, {
test: /\.json?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './src')
],
loaders: ['json']
}, {
test: /\.css$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './src')
],
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
}]
}
};
const devServer = {
hot: true,
compress: true,
lazy: false,
publicPath: config.output.publicPath,
historyApiFallback: {
index: './static/index.html'
}
};
module.exports = Object.assign({
devServer
}, config);