diff --git a/.bowerrc b/.bowerrc index ebb4732..69fad35 100644 --- a/.bowerrc +++ b/.bowerrc @@ -1,3 +1,3 @@ { - "directory": "example/app/assets/bower_components" + "directory": "bower_components" } diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..7a29b05 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +node_modules/* +bower_components/* +dist/* +example/dist/* +lib/* diff --git a/.eslintrc b/.eslintrc index ab2c701..8c45ff9 100644 --- a/.eslintrc +++ b/.eslintrc @@ -43,7 +43,7 @@ "no-unused-expressions": 2, "space-after-keywords": 2, "space-before-blocks": 2, - "jsx-quotes": [1, "prefer-single"], + "jsx-quotes": [1, "prefer-double"], "react/display-name": 0, "react/jsx-boolean-value": [2, "always"], "react/jsx-no-undef": 2, @@ -53,7 +53,7 @@ "react/jsx-uses-vars": 2, "react/no-did-mount-set-state": 2, "react/no-did-update-set-state": 2, - "react/no-multi-comp": 2, + "react/no-multi-comp": [2, {"ignoreStateless": true}], "react/no-unknown-property": 2, "react/prop-types": 1, "react/react-in-jsx-scope": 2, diff --git a/.gitignore b/.gitignore index f16cf12..df267cb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -.idea -node_modules -bower_components -example/dist +.idea/* +node_modules/* +bower_components/* +example/dist/* diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000..7a29b05 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,5 @@ +node_modules/* +bower_components/* +dist/* +example/dist/* +lib/* diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..ad677af --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,11 @@ +{ + "extends": "stylelint-config-standard", + "rules": { + "at-rule-empty-line-before": [ + "always", { + "except": ["blockless-group", "all-nested"], + "ignore": ["after-comment"] + } + ] + } +} \ No newline at end of file diff --git a/bower.json b/bower.json index c3a8924..20b2a05 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,8 @@ { "name": "react-tooltip-component", - "version": "0.2.1", + "version": "0.3.0", "description": "React component.", - "main": ["dist/react-tooltip-component.js", "dist/tooltip"], + "main": ["dist/react-tooltip-component.js", "dist/react-tooltip-component.css"], "keywords": [ "react-component", "react", @@ -18,7 +18,5 @@ "tests" ], "dependencies": {}, - "devDependencies": { - "bootstrap-customize": "~3.3.4" - } + "devDependencies": {} } diff --git a/dist/tooltip.css b/dist/react-tooltip-component.css similarity index 100% rename from dist/tooltip.css rename to dist/react-tooltip-component.css diff --git a/example/app/app.js b/example/app/app.js index 484b581..3fc0530 100644 --- a/example/app/app.js +++ b/example/app/app.js @@ -2,30 +2,29 @@ import 'babel-core/polyfill'; import React from 'react'; import ReactDOM from 'react-dom'; -import {createHistory, useBasename} from 'history'; -import Router from 'react-router'; +import {createHistory} from 'history'; +import {Router, useRouterHistory} from 'react-router'; import App from 'components/App.js'; -import pkg from '../../package.json'; +import {name} from '../../package.json'; -import 'assets/bower_components/bootstrap-customize/css/bootstrap.css'; -import 'react-tooltip-component/src/tooltip.scss'; +import 'bootstrap/dist/css/bootstrap.css'; import 'assets/styles/app.scss'; const routes = { path: '/', component: App, indexRoute: { - component: require('./components/pages/PageHome') + component: require('components/pages/Home') }, childRoutes: [ - require('./routes/Example1Route'), - require('./routes/Example2Route') + require('routes/Example1'), + require('routes/Example2') ] }; const DEV = process && process.env && process.env.NODE_ENV === 'development'; -const history = useBasename(createHistory)({ - basename: '/' + (DEV ? '' : pkg.name) +const history = useRouterHistory(createHistory)({ + basename: '/' + (DEV ? '' : name) }); const run = () => { diff --git a/example/app/assets/styles/_animations.scss b/example/app/assets/styles/_animations.scss deleted file mode 100644 index 89db1e0..0000000 --- a/example/app/assets/styles/_animations.scss +++ /dev/null @@ -1,8 +0,0 @@ -@keyframes spinner { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} diff --git a/example/app/assets/styles/_common.scss b/example/app/assets/styles/_common.scss new file mode 100644 index 0000000..9b46157 --- /dev/null +++ b/example/app/assets/styles/_common.scss @@ -0,0 +1,33 @@ +/* Pre Render + ========================================================================== */ +@keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.pre-render { + background: rgba(255, 255, 255, 0.7); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99999; + .spinner { + width: 48px; + height: 48px; + border: 1px solid lighten($primary, 40%); + border-left-color: darken($primary, 10%); + border-radius: 50%; + animation: spinner 700ms infinite linear; + position: absolute; + top: 50%; + left: 50%; + margin-left: -24px; + margin-top: -24px; + } +} diff --git a/example/app/assets/styles/_mixins.scss b/example/app/assets/styles/_mixin.scss similarity index 68% rename from example/app/assets/styles/_mixins.scss rename to example/app/assets/styles/_mixin.scss index 3830a34..ce149e4 100644 --- a/example/app/assets/styles/_mixins.scss +++ b/example/app/assets/styles/_mixin.scss @@ -1,10 +1,10 @@ @mixin clearfix() { - &:before, - &:after { + &::before, + &::after { content: " "; display: table; } - &:after { + &::after { clear: both; } } diff --git a/example/app/assets/styles/_page.scss b/example/app/assets/styles/_page.scss new file mode 100644 index 0000000..e69de29 diff --git a/example/app/assets/styles/_region.scss b/example/app/assets/styles/_region.scss new file mode 100644 index 0000000..39810d0 --- /dev/null +++ b/example/app/assets/styles/_region.scss @@ -0,0 +1,41 @@ +/* Header + ========================================================================== */ +.navbar { + border-radius: 0; +} + +/* Footer + ========================================================================== */ +html, +body, +#app { + height: 100%; +} + +.layout-page { + position: relative; + min-height: 100%; + padding-bottom: 60px; +} + +.layout-main { + margin-bottom: 30px; +} + +.layout-footer { + position: absolute; + bottom: 0; + width: 100%; + height: 60px; + background-color: #f8f8f8; + padding: 20px 0; +} + +/* Tooltip example + ========================================================================== */ +.tooltips-example { + text-align: center; + .btn { + margin: 15px; + } +} diff --git a/example/app/assets/styles/_variables.scss b/example/app/assets/styles/_variable.scss similarity index 100% rename from example/app/assets/styles/_variables.scss rename to example/app/assets/styles/_variable.scss diff --git a/example/app/assets/styles/app.scss b/example/app/assets/styles/app.scss index 733797d..4f5939c 100644 --- a/example/app/assets/styles/app.scss +++ b/example/app/assets/styles/app.scss @@ -1,79 +1,8 @@ /* ========================================================================== - Imports + React component starter ========================================================================== */ -@import "variables"; -@import "mixins"; -@import "animations"; - -/* ========================================================================== - Components - ========================================================================== */ -/* Pre Render - ========================================================================== */ -.pre-render { - background: rgba(255, 255, 255, .7); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 99999; - .spinner { - width: 48px; - height: 48px; - border: 1px solid lighten($primary, 40%); - border-left-color: darken($primary, 10%); - border-radius: 50%; - animation: spinner 700ms infinite linear; - position: absolute; - top: 50%; - left: 50%; - margin-left: -24px; - margin-top: -24px; - } -} - -/* ========================================================================== - Sections - ========================================================================== */ -/* Header - ========================================================================== */ -.navbar { - border-radius: 0; -} - -/* Footer - ========================================================================== */ -html, -body, -#app { - height: 100%; -} - -.layout-page { - position: relative; - min-height: 100%; - padding-bottom: 60px; -} - -.layout-main { - margin-bottom: 30px; -} - -.layout-footer { - position: absolute; - bottom: 0; - width: 100%; - height: 60px; - background-color: #F8F8F8; - padding: 20px 0; -} - -/* Tooltip example - ========================================================================== */ -.tooltips-example { - text-align: center; - .btn { - margin: 15px; - } -} +@import "variable"; +@import "mixin"; +@import "common"; +@import "region"; +@import "page"; diff --git a/example/app/components/App.js b/example/app/components/App.js index 3be219c..d828cf3 100644 --- a/example/app/components/App.js +++ b/example/app/components/App.js @@ -9,10 +9,10 @@ class App extends React.Component { render() { return ( -
+
-
-
+
+
{this.props.children}
diff --git a/example/app/components/Footer.js b/example/app/components/Footer.js index 15f49ad..f0c636e 100644 --- a/example/app/components/Footer.js +++ b/example/app/components/Footer.js @@ -3,9 +3,9 @@ import React from 'react'; class Footer extends React.Component { render() { return ( -