Commit 8c47322d authored by Yannis Barlas's avatar Yannis Barlas

working styleguidist

parent 2c7d7a06
......@@ -4,6 +4,8 @@
"description": "",
"main": "index.js",
"scripts": {
"styleguide": "styleguidist server",
"styleguide:build": "styleguidist build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
......@@ -28,14 +30,25 @@
"redux": "3.6.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"eslint-config-editoria": "0.0.4",
"file-loader": "^0.11.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.4",
"node-sass": "^4.5.3",
"react-addons-test-utils": "^15.6.0",
"react-styleguidist": "^6.0.24",
"react-test-renderer": "^15.6.1",
"sass-loader": "^6.0.6",
"sinon": "^2.3.6",
"sinon-as-promised": "^4.0.3"
"sinon-as-promised": "^4.0.3",
"webpack": "^3.5.6",
"webpack-node-externals": "^1.6.0"
}
}
import { includes } from 'lodash'
import React from 'react'
import styles from '../styles/bookBuilder.local.scss'
import styles from './AlignmentBox.local.scss'
class AlignmentBox extends React.Component {
constructor (props) {
......
$light-grey: #b3b3b3;
$main-grey: #666;
$white: #fff;
.leftRightBox {
border: 1px solid $main-grey;
float: left;
height: 26px;
padding: 2px 0 0 1.8px;
text-align: center;
width: 17.5px;
}
.leftBox {
border-right: 0;
}
.rightBox {
border-left: 0;
}
.boxActive {
background-color: $main-grey;
cursor: pointer;
height: 20px;
width: 12px;
}
.boxInactiveHover {
background-color: $white;
cursor: pointer;
height: 20px;
width: 12px;
&:hover {
background-color: $light-grey;
transition: .25s ease-in-out 0s;
}
}
Something
```js
const chapter = {
alignment: {
'left': false,
'right': false
}
};
const position = 'left';
const update = () => { return null };
<AlignmentBox
chapter={chapter}
position={position}
update={update}
/>
```
\ No newline at end of file
......@@ -523,23 +523,23 @@ $upload-multiple: #b1b1b1;
font-size: 16px;
font-style: italic;
}
.leftRightBox {
border: 1px solid $main-grey;
float: left;
height: 26px;
padding: 2px 0 0 1.8px;
text-align: center;
width: 17.5px;
}
// .leftRightBox {
// border: 1px solid $main-grey;
// float: left;
// height: 26px;
// padding: 2px 0 0 1.8px;
// text-align: center;
// width: 17.5px;
// }
.leftBox {
border-right: 0;
}
// .leftBox {
// border-right: 0;
// }
.rightBox {
border-left: 0;
}
// .rightBox {
// border-left: 0;
// }
.boxDiver {
border-right: 1px solid $dark-grey;
......@@ -549,23 +549,23 @@ $upload-multiple: #b1b1b1;
right: 17.9px;
}
.boxActive {
background-color: $main-grey;
cursor: pointer;
height: 20px;
width: 12px;
}
.boxInactiveHover {
background-color: $white;
cursor: pointer;
height: 20px;
width: 12px;
&:hover {
background-color: $light-grey;
transition: .25s ease-in-out 0s;
}
}
// .boxActive {
// background-color: $main-grey;
// cursor: pointer;
// height: 20px;
// width: 12px;
// }
// .boxInactiveHover {
// background-color: $white;
// cursor: pointer;
// height: 20px;
// width: 12px;
// &:hover {
// background-color: $light-grey;
// transition: .25s ease-in-out 0s;
// }
// }
}
}
}
......
module.exports = {
components: 'src/**/*.js'
}
process.env.BABEL_ENV = 'development'
process.env.NODE_ENV = 'development'
const path = require('path')
const nodeExternals = require('webpack-node-externals')
const include = [
path.join(__dirname, 'src'),
/xpub-[^/]+\/src/,
]
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js',
path: path.join(__dirname, 'dist'),
},
devtool: 'cheap-module-source-map',
externals: [nodeExternals({
whitelist: [/\.(?!js$).{1,5}$/i]
})],
resolve: {
symlinks: false
},
module: {
rules: [
{
oneOf: [
// ES6 modules
{
test: /\.js$/,
include,
loader: 'babel-loader',
options: {
presets: [
['env', { modules: false }],
'react',
'stage-2'
],
cacheDirectory: true,
},
},
// CSS modules
{
test: /\.local\.css$/,
include,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
],
},
// SCSS modules
{
test: /\.local\.scss$/,
include,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1
}
},
'sass-loader'
],
},
// global CSS
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
},
// global SCSS
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'sass-loader'
],
},
// Files
{
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
}
}
]
}
]
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment