Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 78b5e9d

Browse files
author
joeshub
committed
adding glamorous
1 parent dd50812 commit 78b5e9d

File tree

11 files changed

+5389
-2
lines changed

11 files changed

+5389
-2
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ npm-debug.log*
55
**/build
66
public/index.html
77
*.iml
8-
.idea
8+
.idea

‎12-glamorous/button/App.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { Component } from 'react'
2+
import pkg from './package.json'
3+
import { Button } from './Button'
4+
5+
export default class App extends Component {
6+
7+
render () {
8+
return (
9+
<main>
10+
<p>{pkg.description}</p>
11+
<Button>Button</Button>
12+
</main>
13+
)
14+
}
15+
}

‎12-glamorous/button/Button.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { Component } from 'react'
2+
import glamorous from 'glamorous'
3+
4+
const StyledButton = glamorous.button({
5+
display: 'inline-block',
6+
outline: 'none',
7+
textAlign: 'center',
8+
font: 'bold 32px helvetica',
9+
padding: '20px 40px',
10+
border: '0',
11+
cursor: 'pointer',
12+
color: '#fff',
13+
transition: 'all 300ms'
14+
},({ depressed, bgDepressed, bgColor, bgHover }) => ({
15+
backgroundColor: depressed ? bgDepressed : bgColor,
16+
':hover': {
17+
backgroundColor: depressed ? bgDepressed : bgHover
18+
}
19+
}))
20+
21+
22+
export class Button extends Component {
23+
24+
state = {
25+
depressed: false
26+
}
27+
28+
static defaultProps = {
29+
bgColor: '#ec4800',
30+
bgHover: '#f98d00',
31+
bgDepressed: '#bebebe'
32+
}
33+
34+
onButtonClicked = () => this.setState({
35+
depressed: !this.state.depressed
36+
})
37+
38+
render () {
39+
const { depressed } = this.state
40+
const { bgColor, bgHover, bgDepressed, ...otherProps } = this.props
41+
42+
return (
43+
<StyledButton
44+
depressed={ depressed }
45+
bgColor={ bgColor }
46+
bgDepressed={ bgDepressed }
47+
bgHover={ bgHover }
48+
onClick={ this.onButtonClicked }
49+
{ ...otherProps }
50+
/>
51+
)
52+
}
53+
}

‎12-glamorous/button/entry.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react'
2+
import { render } from 'react-dom'
3+
import { AppContainer } from 'react-hot-loader'
4+
import App from './App'
5+
6+
render (
7+
<AppContainer>
8+
<App />
9+
</AppContainer>,
10+
document.getElementById('app')
11+
)
12+
13+
// Hot Module Replacement API
14+
if (module.hot) {
15+
module.hot.accept('./App', () => {
16+
const NextApp = require('./App').default
17+
render(
18+
<AppContainer>
19+
<NextApp/>
20+
</AppContainer>,
21+
document.getElementById('app')
22+
)
23+
})
24+
}

‎12-glamorous/button/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "glamorous-button",
3+
"version": "1.0.0",
4+
"description": "Button - Glamorous",
5+
"author": "Joe Seifi",
6+
"license": "ISC",
7+
"main": "build/app.js",
8+
"scripts": {
9+
"start": "../../node_modules/.bin/cross-env NODE_ENV=development node ../../scripts/server-button.js",
10+
"build": "../../node_modules/.bin/cross-env NODE_ENV=production ../../node_modules/.bin/webpack --config webpack.build.js --progress --colors"
11+
},
12+
"devDependencies": {
13+
"babel-core": "^6.23.1",
14+
"babel-eslint": "^7.1.1",
15+
"babel-loader": "^6.3.2",
16+
"babel-plugin-transform-decorators-legacy": "^1.3.4",
17+
"babel-polyfill": "^6.23.0",
18+
"babel-preset-es2015": "^6.22.0",
19+
"babel-preset-react": "^6.23.0",
20+
"babel-preset-stage-0": "^6.22.0",
21+
"cross-env": "^3.1.4",
22+
"css-loader": "^0.26.1",
23+
"eslint": "^3.15.0",
24+
"eslint-plugin-react": "^6.10.0",
25+
"express": "^4.14.1",
26+
"extract-text-webpack-plugin": "^2.0.0-rc.3",
27+
"glamorous": "^4.12.0",
28+
"html-webpack-plugin": "^2.28.0",
29+
"json-loader": "^0.5.4",
30+
"react": "^15.4.2",
31+
"react-dom": "^15.4.2",
32+
"react-hot-loader": "^3.0.0-beta.6",
33+
"style-loader": "^0.13.1",
34+
"webpack": "^2.2.1",
35+
"webpack-dev-middleware": "^1.10.1",
36+
"webpack-hot-middleware": "^2.17.0"
37+
}
38+
}

‎12-glamorous/button/webpack.build.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
var HtmlWebpackPlugin = require('html-webpack-plugin')
4+
5+
module.exports = {
6+
entry: ['babel-polyfill','./entry.js'],
7+
output: {
8+
path: path.join(__dirname + '/build'),
9+
filename: 'app.js',
10+
publicPath: ''
11+
},
12+
plugins: [
13+
new HtmlWebpackPlugin({ inject: true, template: '../../templates/plain.ejs' }),
14+
new webpack.optimize.OccurrenceOrderPlugin(),
15+
new webpack.DefinePlugin({
16+
'process.env': {
17+
'NODE_ENV': JSON.stringify('production')
18+
}
19+
})
20+
],
21+
module: {
22+
rules: [
23+
{
24+
test: /\.js$/,
25+
exclude: /node_modules/,
26+
use: 'babel-loader'
27+
},
28+
{
29+
test: /\.css$/,
30+
use: ['style-loader','css-loader']
31+
},
32+
{
33+
test: /\.json$/,
34+
use: 'json-loader'
35+
}
36+
]
37+
}
38+
}
Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
var HtmlWebpackPlugin = require('html-webpack-plugin')
4+
var settings = require('../../scripts/settings.js')
5+
var devServer = settings.devServer
6+
7+
module.exports = {
8+
devServer: devServer,
9+
devtool: 'source-map',
10+
entry: [
11+
'react-hot-loader/patch',
12+
'webpack-hot-middleware/client?reload=1',
13+
'babel-polyfill',
14+
'./entry'
15+
],
16+
output: {
17+
path: path.join(__dirname),
18+
filename: 'bundle.js',
19+
publicPath: '/'
20+
},
21+
plugins: [
22+
new HtmlWebpackPlugin({ inject: true, template: '../../templates/server.ejs' }),
23+
new webpack.HotModuleReplacementPlugin(),
24+
new webpack.NoEmitOnErrorsPlugin()
25+
],
26+
module: {
27+
rules: [
28+
{
29+
test: /\.js$/,
30+
exclude: /node_modules/,
31+
use: 'babel-loader'
32+
},
33+
{
34+
test: /\.css$/,
35+
use: ['style-loader','css-loader']
36+
},
37+
{
38+
test: /\.json$/,
39+
use: 'json-loader'
40+
}
41+
]
42+
}
43+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /