Merge pull request #147 from facultyai/add-custom-css

Add custom css

.gitignore

@@ -8,3 +8,4 @@ dash_bootstrap_components/metadata.json
 dist
 changelog.tmp
 dash_bootstrap_components/_components/
+.sass-cache

Gruntfile.js

@@ -0,0 +1,168 @@
+module.exports = function(grunt) {
+  grunt.loadNpmTasks("grunt-contrib-clean");
+  grunt.loadNpmTasks("grunt-contrib-concat");
+  grunt.loadNpmTasks("grunt-contrib-copy");
+  grunt.loadNpmTasks("grunt-sass");
+
+  grunt.initConfig({
+    pkg: grunt.file.readJSON("package.json"),
+    builddir: "css",
+    buildtheme: "bootstrap",
+    banner:
+      "/*!\n" +
+      " * Dash Bootstrap CSS v<%= pkg.version %>\n" +
+      ' * Copyright 2019-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
+      " * Licensed under <%= pkg.license %>\n" +
+      " * Based on Bootstrap and Bootswatch\n" +
+      "*/\n",
+    swatch: {
+      bootstrap: {},
+      cerulean: {},
+      cosmo: {},
+      cyborg: {},
+      darkly: {},
+      flatly: {},
+      journal: {},
+      litera: {},
+      lumen: {},
+      lux: {},
+      materia: {},
+      minty: {},
+      pulse: {},
+      sandstone: {},
+      simplex: {},
+      sketchy: {},
+      slate: {},
+      solar: {},
+      spacelab: {},
+      superhero: {},
+      united: {},
+      yeti: {}
+    },
+    clean: {
+      build: {
+        src: ["css/*/*.scss"]
+      }
+    },
+    concat: {
+      options: {
+        banner: "<%= banner %>",
+        stripBanners: false
+      },
+      dist: {
+        src: [],
+        dest: ""
+      }
+    },
+    copy: {
+      main: {
+        expand: true,
+        cwd: "scss",
+        src: "components/*",
+        dest: "css/"
+      },
+      swatch: {
+        expand: true,
+        cwd: "node_modules/bootswatch/dist/<%=buildtheme%>/",
+        src: "*.scss",
+        dest: "css/<%=buildtheme%>"
+      }
+    },
+    sass: {
+      options: {
+        implementation: require("node-sass"),
+        sourceMap: false
+      }
+    }
+  });
+
+  grunt.registerTask("default", function() {});
+
+  grunt.registerTask("build", "build themes from scss", function(theme) {
+    var t = theme;
+    if (!t) {
+      for (t in grunt.config("swatch")) {
+        grunt.task.run(["copy", "build-theme:" + t]);
+      }
+      grunt.task.run(["clean:build"]);
+    } else {
+      grunt.task.run(["copy", "build-theme:" + t, "clean:build"]);
+    }
+  });
+
+  grunt.registerTask("build-theme", "build a regular theme from scss", function(
+    theme,
+    compress
+  ) {
+    theme = theme === undefined ? grunt.config("buildtheme") : theme;
+    grunt.config("buildtheme", theme);
+    compress = compress === undefined ? true : compress;
+
+    var isValidTheme =
+      theme === "bootstrap" ||
+      (grunt.file.exists(
+        "node_modules/bootswatch/dist/" + theme,
+        "_variables.scss"
+      ) &&
+        grunt.file.exists(
+          "node_modules/bootswatch/dist/" + theme,
+          "_bootswatch.scss"
+        ));
+
+    // cancel the build (without failing) if this directory is not a valid theme
+    if (!isValidTheme) {
+      return;
+    }
+
+    if (theme !== "bootstrap") {
+      grunt.task.run(["copy:swatch"])
+    }
+
+    var concatSrc;
+    var concatDest;
+    var scssDest;
+    var scssSrc;
+    var files = {};
+    var dist = {};
+    concatSrc =
+      "scss/build/" +
+      (theme === "bootstrap" ? "bootstrap" : "bootswatch") +
+      ".scss";
+    concatDest = "<%=builddir%>/" + theme + "/build.scss";
+    scssSrc = "<%=builddir%>/" + theme + "/build.scss";
+    scssDest = "<%=builddir%>/" + theme + "/bootstrap.css";
+
+    dist = { src: concatSrc, dest: concatDest };
+    grunt.config("concat.dist", dist);
+    files = {};
+    files[scssDest] = scssSrc;
+    grunt.config("sass.dist.files", files);
+    grunt.config("sass.dist.options.outputStyle", "expanded");
+
+    grunt.task.run([
+      "concat",
+      "sass:dist",
+      compress
+        ? "compress:" +
+          scssDest +
+          ":" +
+          "<%=builddir%>/" +
+          theme +
+          "/bootstrap.min.css"
+        : "none"
+    ]);
+  });
+
+  grunt.registerTask("compress", "compress a generic css with sass", function(
+    fileSrc,
+    fileDst
+  ) {
+    var files = {};
+    files[fileDst] = fileSrc;
+    grunt.log.writeln("compressing file " + fileSrc);
+
+    grunt.config("sass.dist.files", files);
+    grunt.config("sass.dist.options.outputStyle", "compressed");
+    grunt.task.run(["sass:dist"]);
+  });
+};

package.json

@@ -11,6 +11,7 @@
     "demo": "webpack-dev-server --hot --inline --port=8888 --config=webpack/config.demo.js",
     "build:lib": "webpack --config=webpack/config.lib.js",
     "build:py": "mkdirp dash_bootstrap_components/_components && dash-generate-components ./src/components dash_bootstrap_components/_components && move-cli dash_bootstrap_components/_components/_imports_.py dash_bootstrap_components/_components/__init__.py",
+    "build:css": "grunt build",
     "format": "prettier src/**/*.js --write",
     "lint": "prettier src/**/*.js --list-different",
     "prepublish": "NODE_ENV=production npm run build-dist && NODE_ENV=production npm run build:lib",
@@ -33,15 +34,23 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
+    "bootstrap": "^4.3.1",
+    "bootswatch": "^4.3.1",
     "copyfiles": "^2.1.0",
     "css-loader": "^1.0.1",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.5.0",
+    "grunt": "^1.0.3",
+    "grunt-contrib-clean": "^2.0.0",
+    "grunt-contrib-concat": "^1.0.1",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-sass": "^3.0.2",
     "jest": "^23.6.0",
     "jest-environment-jsdom-global": "^1.1.0",
     "jsdom": "^12.0.0",
     "mkdirp": "^0.5.1",
     "move-cli": "^1.2.0",
+    "node-sass": "^4.11.0",
     "prettier": "^1.14.3",
     "react-docgen": "^2.21.0",
     "rimraf": "^2.6.2",

scss/build/bootstrap.scss

@@ -0,0 +1,5 @@
+@import '../../node_modules/bootstrap/scss/bootstrap';
+
+@import '../components/_utilities';
+@import '../components/datepicker';
+@import '../components/dropdown';

scss/build/bootswatch.scss

@@ -0,0 +1,7 @@
+@import 'variables';
+@import '../../node_modules/bootstrap/scss/bootstrap';
+@import 'bootswatch';
+
+@import '../components/_utilities';
+@import '../components/datepicker';
+@import '../components/dropdown';

scss/components/_utilities.scss

@@ -0,0 +1,14 @@
+// Color contrast with threshold
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light, $threshold: $yiq-contrasted-threshold) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}