Merge pull request #201 from MatthewDorner/addTheme

feat(css): create a Theme to override Bootstrap colors

Author: matteovivona

.eslintignore

@@ -0,0 +1 @@
+tsdx.config.js

.storybook/webpack.config.js

@@ -18,6 +18,17 @@ module.exports = async ({ config, mode }) => {
       },
     ],
   })
+  config.module.rules.push({
+    test: /\.s[ac]ss$/i,
+    use: [
+      // Creates `style` nodes from JS strings
+      'style-loader',
+      // Translates CSS into CommonJS
+      'css-loader',
+      // Compiles Sass to CSS
+      'sass-loader',
+    ],
+  })
   config.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx']
   config.resolve.plugins = [new TsConfigPathsPlugin({})]
   config.plugins.push(

package.json

@@ -81,13 +81,15 @@
     "@types/tinymce": "~4.5.23",
     "@typescript-eslint/eslint-plugin": "~2.15.0",
     "@typescript-eslint/parser": "~2.15.0",
+    "autoprefixer": "~9.7.3",
     "awesome-typescript-loader": "~5.2.1",
     "babel-loader": "~8.0.6",
     "bootstrap": "~4.4.0",
     "commitizen": "~4.0.3",
     "commitlint-config-cz": "0.12.1",
     "coveralls": "~3.0.6",
     "cross-env": "~6.0.3",
+    "cssnano": "~4.1.10",
     "cz-conventional-changelog": "~3.0.2",
     "enzyme": "~3.11.0",
     "enzyme-adapter-react-16": "~1.15.2",
@@ -103,12 +105,15 @@
     "husky": "~4.0.0",
     "jest-canvas-mock": "~2.2.0",
     "lint-staged": "~9.5.0",
+    "node-sass": "~4.13.0",
     "prettier": "~1.19.1",
     "react": "~16.12.0",
     "react-bootstrap": "~1.0.0-beta.14",
     "react-docgen": "~5.1.0",
     "react-docgen-typescript-loader": "~3.6.0",
     "react-dom": "~16.12.0",
+    "rollup-plugin-postcss": "~2.0.3",
+    "sass-loader": "~8.0.0",
     "semantic-release": "~15.14.0",
     "sinon": "~8.0.1",
     "tsdx": "~0.12.0",
@@ -143,7 +148,7 @@
       "<rootDir>/__mocks__/matchMediaMock.js"
     ],
     "moduleNameMapper": {
-      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+      "\\.(css|scss|less)$": "<rootDir>/__mocks__/styleMock.js"
     }
   }
 }

scss/_variables.scss

@@ -0,0 +1,10 @@
+$theme-colors: (
+  "primary": #1abc9c,
+  "secondary": #009b9e,
+  "success": #273647,
+  "warning": #ffc107,
+  "danger": #dc3545,
+  "info": #177db8,
+  "light": #fdfffc,
+  "dark": #011627
+);

scss/main.scss

@@ -0,0 +1,11 @@
+/* Bootstrap overrides */
+
+@import "./_variables";
+
+/* Import bootstrap */
+
+@import "node_modules/bootstrap/scss/bootstrap";
+
+/* Other CSS Imports */
+
+@import '../node_modules/react-toastify/dist/ReactToastify.min.css';

src/components/Toaster/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { ToastContainer, toast, Slide } from 'react-toastify'
 import { ToastProps, ToasterProps } from './interfaces'
 import { titleWithMessage, titleWithoutMessage } from './components'
+import './toaster.scss'
 
 export const Toast: any = (
   type: ToastProps['type'],

src/components/Toaster/toaster.scss

@@ -0,0 +1,17 @@
+@import "../../../scss/_variables";
+
+div.Toastify__toast.Toastify__toast--error {
+  background: map-get($theme-colors, error);
+}
+
+div.Toastify__toast.Toastify__toast--info {
+  background: map-get($theme-colors, info);
+}
+
+div.Toastify__toast.Toastify__toast--success {
+  background: map-get($theme-colors, success);
+}
+
+div.Toastify__toast.Toastify__toast--warning {
+  background: map-get($theme-colors, warning);
+}

src/index.tsx

@@ -1,6 +1,8 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 
+import '../scss/main.scss'
+
 library.add(fas)
 export * from './components/Toaster'
 export * from './components/Spinner'

stories/textfield.stories.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 import { TextField } from '../src'
-import 'bootstrap/dist/css/bootstrap.min.css'
 
 storiesOf('TextField', module)
   .addParameters({

stories/toaster.stories.tsx

@@ -4,8 +4,6 @@ import { storiesOf } from '@storybook/react'
 
 import Button from 'react-bootstrap/Button'
 import { Toast, Toaster } from '../src'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'react-toastify/dist/ReactToastify.min.css'
 
 storiesOf('Toaster', module)
   .addParameters({

tsdx.config.js

@@ -0,0 +1,23 @@
+const postcss = require('rollup-plugin-postcss')
+const autoprefixer = require('autoprefixer')
+const cssnano = require('cssnano')
+
+module.exports = {
+  rollup(config, options) {
+    config.plugins.push(
+      postcss({
+        plugins: [
+          autoprefixer(),
+          cssnano({
+            preset: 'default',
+          }),
+        ],
+        inject: false,
+        // only write out CSS for the first bundle (avoids pointless extra files):
+        extract: !!options.writeMeta,
+        modules: true,
+      }),
+    )
+    return config
+  },
+}