Merge pull request #67 from mumuki/new-mumuki-styles

New mumuki-styles

.gitignore

@@ -9,3 +9,4 @@
 /build/
 node_modules/
 .idea/
+yarn-error.log

README.md

@@ -1,6 +1,60 @@
-# mumuki-styles
+# mumuki-styles [![Build Status](https://travis-ci.org/mumuki/mumuki-styles.svg?branch=master)](https://travis-ci.org/mumuki/mumuki-styles)
+
+## Installing
+
+### Ruby
+
+Add `gem 'mumuki-styles'` to your Gemfile and then run `bundle install`.
+
+If you want to run it with `rails-assets` you must also:
+
+1. Add the following code into `app/assets/javascripts/application.js`
+
+  ```js
+  //= require mumuki-styles
+  ```
+
+2. Add the following code into `app/assets/stylesheets/application.scss`
+
+  ```scss
+  @import "mumuki-styles";
+  ```
+**Note**: If you do not use SCSS, add `*= require mumuki-styles` to `app/assets/stylesheets/application.css`.
+
+
+### Bower
+
+1. Run `bower install --save mumuki-styles`
+2. Add the css and js files to `index.html`
+
+  ```html
+  <link rel="stylesheet" href="bower_compoments/mumuki-styles/dist/css/mumuki-styles.css">
+  <script src="bower_compoments/mumuki-styles/dist/javascript/mumuki-styles.js"></script>
+  ```
+3. if you are using SCSS, simply import the scss file
+
+  ```scss
+  @import "bower_compoments/mumuki-styles/dist/scss/mumuki-styles.scss"
+  ```
+
+
+## Development
+
+**Note:** Building `mumuki-styles` requires your `node` installation version to be 8 or greater and `yarn` to be 1 or greater.
+
+Running `yarn build` both generates the `dist` folder and updates the necessary gem files. If you only need to build the gem, you can run `yarn build-gem`.
+
+
+### Tagging and releasing
+
+When `tag.sh X.Y.Z` is run:
+* The yarn, bower and gem version files are updated to version `X.Y.Z`
+* `yarn build` is executed
+* The `dist` folder is unignored so its files are included when pushing
+* All autogenerated files are included in the new version, which is tagged `vX.Y.Z` and pushed to the repository.
+
+The next time `yarn build` is run, the `dist` folder is ignored again, as it is autogenerated - but we do need it on the repo.
 
-[![Build Status](https://travis-ci.org/mumuki/mumuki-styles.svg?branch=master)](https://travis-ci.org/mumuki/mumuki-styles)
 
 ## Components
 
@@ -216,93 +270,6 @@ You don't need any data attribute - just follow this convention:
 With jQuery you can manually render this component using `$('.mu-sql-table-rendered').renderPrerenderedSqlTable()`;
 
 
-## Installing
-
-You usually add `mumuki-styles` to an empty project. First you need to add it to your Gemfile:
-
-```ruby
-gem 'mumuki-styles'
-```
-
-or, if you want latest version:
-
-```ruby
-gem 'mumuki-styles', github: 'mumuki/mumuki-styles', branch: 'master'
-```
-
-And then bundle install
-
-### How to use it in with rails-assets?
-
-1. Add the following code into `Gemfile`
-
-  ```ruby
-  gem 'mumuki-styles'
-  ```
-
-1. Install it running
-
-  ```bash
-  bundle install
-  ```
-
-1. Add the following code into `app/assets/javascripts/application.js`
-
-  ```js
-  //= require mumuki-styles
-  ```
-
-1. Add the following code into `app/assets/stylesheets/application.scss`
-
-  ```scss
-  @import "mumuki-styles";
-  ```
-  **Note**: If you do not use SCSS, add `*= require mumuki-styles` to `app/assets/stylesheets/application.css` file
-
-
-### How to use it with bower?
-
-1. Run `bower install --save mumuki-styles`
-1. Add the css and js files to `index.html`
-
-  ```html
-  <link rel="stylesheet" href="bower_compoments/mumuki-styles/dist/css/mumuki-styles.css">
-  <script src="bower_compoments/mumuki-styles/dist/javascript/mumuki-styles.js"></script>
-  ```
-1. if you are using SCSS, simply import the scss file
-
-  ```scss
-  @import "bower_compoments/mumuki-styles/dist/scss/mumuki-styles.scss"
-  ```
-
-
-### Installing
-
- **Note:** Building `mumuki-styles` requires your `node` installation version to be 8 or greater and `yarn` to be 1 or greater.
-
-```bash
-yarn
-yarn build
-```
-
-
-### Gem wrapper
-
-This module can also be deployed a a ruby gem. `mumuki-styles` works with Ruby 2.3.1
-
-```bash
-cd gem
-rake wrapper:wrap
-bundle install
-bundle exec rspec
-```
-
-### Tagging and releasing
-
-```bash
-./tag.sh
-```
-
 ## License
 
 This project is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

gulpfile.js

@@ -2,57 +2,12 @@ const del = require('del');
 const gulp = require('gulp');
 const glps = require('gulp-load-plugins');
 const runs = require('run-sequence');
+const merge = require('merge-stream');
 
 const $ = glps();
 
 gulp.task('dist', (done) => runs('clear', ['css', 'scss', 'js', 'fonts'], done));
-
-gulp.task('build:dev', ['css:dev', 'scss:dev', 'js:dev', 'fonts:dev']);
-gulp.task('dev', (done) => runs('clear:dev', 'build:dev', 'watch', 'serve', done));
-
-
-gulp.task('clear:dev', () => {
-  return del(['build'], {force: true});
-});
-
-gulp.task('css:dev', () => {
-  return gulp.src('src/stylesheets/mumuki-styles.scss')
-    .pipe($.sass())
-    .pipe($.concat('mumuki-styles.css'))
-    .pipe(gulp.dest('build/css'));
-});
-
-gulp.task('scss:dev', ['scss:vendor:dev'], () => {
-  return gulp.src('src/stylesheets/**/*.scss')
-    .pipe($.replace('@import "../../node_modules/@bower_components/', '@import "vendor/'))
-    .pipe($.replace('@import "../../node_modules/@fortawesome/', '@import "vendor/'))
-    .pipe(gulp.dest('build/scss'));
-});
-
-gulp.task('scss:vendor:dev', () => {
-  const sources = [
-    'node_modules/@bower_components/**/*.scss',
-    'node_modules/@fortawesome/**/*.scss'
-  ];
-  return gulp.src(sources)
-    .pipe(gulp.dest('build/scss/vendor'));
-});
-
-gulp.task('js:dev', () => {
-  return gulp.src(require('./src/assets.js').concat(require('./src/javascripts')))
-    .pipe($.concat('mumuki-styles.js'))
-    .pipe(gulp.dest('build/javascripts'));
-});
-
-gulp.task('fonts:dev', () => {
-  const fonts = [
-    'node_modules/@bower_components/bootstrap-sass/assets/fonts/**/*',
-    'node_modules/@fortawesome/fontawesome-free/webfonts/*',
-    'node_modules/@bower_components/dev-awesome/dist/fonts/**/*',
-  ];
-  return gulp.src(fonts)
-    .pipe(gulp.dest('build/fonts'));
-});
+gulp.task('dev', (done) => runs('watch', 'serve', done));
 
 gulp.task('serve', () => {
   gulp
@@ -66,7 +21,7 @@ gulp.task('serve', () => {
 });
 
 gulp.task('watch', () => {
-  gulp.watch('src/**/*', ['build:dev']);
+  gulp.watch('src/**/*', ['dist']);
 });
 
 
@@ -83,18 +38,23 @@ gulp.task('css', () => {
 
 gulp.task('scss', ['scss:vendor'], () => {
   return gulp.src('src/stylesheets/**/*.scss')
-    .pipe($.replace('@import "../../node_modules/@bower_components/', '@import "vendor/'))
+    .pipe($.replace('@import "../../node_modules/bootstrap/scss', '@import "vendor/bootstrap/'))
+    .pipe($.replace('@import "../../node_modules/dev-awesome/', '@import "vendor/dev-awesome/'))
     .pipe($.replace('@import "../../node_modules/@fortawesome/', '@import "vendor/'))
     .pipe(gulp.dest('dist/scss'));
 });
 
 gulp.task('scss:vendor', () => {
-  const sources = [
-    'node_modules/@bower_components/**/*.scss',
-    'node_modules/@fortawesome/**/*.scss'
-  ];
-  return gulp.src(sources)
+  const fontawesome = gulp.src('node_modules/@fortawesome/**/*.scss')
     .pipe(gulp.dest('dist/scss/vendor'));
+
+  const bootstrap = gulp.src('node_modules/bootstrap/scss/**/*.scss')
+    .pipe(gulp.dest('dist/scss/vendor/bootstrap'));
+
+  const devawesome = gulp.src('node_modules/dev-awesome/**/*.scss')
+    .pipe(gulp.dest('dist/scss/vendor/dev-awesome'));
+
+  return merge(fontawesome, bootstrap, devawesome);
 });
 
 gulp.task('js', () => {
@@ -105,9 +65,8 @@ gulp.task('js', () => {
 
 gulp.task('fonts', () => {
   const fonts = [
-    'node_modules/@bower_components/bootstrap-sass/assets/fonts/**/*',
     'node_modules/@fortawesome/fontawesome-free/webfonts/*',
-    'node_modules/@bower_components/dev-awesome/dist/fonts/**/*',
+    'node_modules/dev-awesome/dist/fonts/**/*',
   ];
   return gulp.src(fonts)
     .pipe(gulp.dest('dist/fonts'));

index.html

@@ -4,9 +4,9 @@
   <title>Mumuki Styles</title>
   <meta charset="utf-8">
 
-  <link rel="stylesheet" type="text/css" href="build/css/mumuki-styles.css">
+  <link rel="stylesheet" type="text/css" href="dist/css/mumuki-styles.css">
 
-  <script type="text/javascript" src="build/javascripts/mumuki-styles.js"></script>
+  <script type="text/javascript" src="dist/javascripts/mumuki-styles.js"></script>
 </head>
 <body style="margin: 15px">
 

package.json

@@ -4,10 +4,13 @@
   "description": "Mumuki Styles",
   "main": "index.js",
   "scripts": {
-    "dev": "gulp dev",
+    "dev": "yarn build && gulp dev",
     "test": "echo \"Error: no test specified\" && exit 1",
     "prebuild": "yarn",
-    "build": "gulp dist && sass-shake -p dist/scss -f dist/scss/mumuki-styles.scss -t -d"
+    "build": "gulp dist && yarn build-gem && yarn clean-scss && yarn ignore-dist",
+    "build-gem": "cd gem && ./bin/setup && bundle exec rake",
+    "clean-scss": "sass-shake -p dist/scss -f dist/scss/mumuki-styles.scss -t -d",
+    "ignore-dist": "git ls-files -z dist/ | xargs -0 git update-index --skip-worktree"
   },
   "repository": {
     "type": "git",
@@ -23,18 +26,21 @@
   },
   "homepage": "https://github.com/mumuki/mumuki-styles#readme",
   "dependencies": {
-    "@bower_components/awesome-bootstrap-checkbox": "flatlogic/awesome-bootstrap-checkbox#v0.3.7",
-    "@bower_components/bootstrap-sass": "twbs/bootstrap-sass#v3.3.7",
-    "@bower_components/dev-awesome": "mumuki/dev-awesome#v0.10.0",
-    "@bower_components/jquery": "jquery/jquery-dist#3.1.1",
     "@fortawesome/fontawesome-free": "~5.15.1",
+    "@popperjs/core": "2.9.1",
+    "bootstrap": "5.0.0-beta3",
+    "dev-awesome": "git+https://github.com/mumuki/dev-awesome.git",
+    "jquery": "~3.1.1"
+  },
+  "devDependencies": {
     "del": "2.2.2",
     "gulp": "3.9.1",
     "gulp-concat": "2.6.1",
     "gulp-load-plugins": "1.4.0",
     "gulp-replace": "0.5.4",
     "gulp-sass": "3.1.0",
     "gulp-webserver": "0.9.1",
+    "merge-stream": "^2.0.0",
     "run-sequence": "1.2.2",
     "sass-shake": "https://github.com/Javi/sass-shake"
   },

src/assets.js

@@ -1,6 +1,7 @@
 const JS = [
   'jquery/dist/jquery.js',
-  'bootstrap-sass/assets/javascripts/bootstrap.js'
-].map((file) => `node_modules/@bower_components/${file}`);
+  '@popperjs/core/dist/umd/popper.js',
+  'bootstrap/dist/js/bootstrap.js'
+].map((file) => `node_modules/${file}`);
 
 module.exports = JS;