Merge pull request #1 from intljusticemission/master

update

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 471349,
-    "minified": 153211,
-    "gzipped": 42302
+    "bundled": 561648,
+    "minified": 171367,
+    "gzipped": 50382
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 414053,
-    "minified": 136181,
-    "gzipped": 38428
+    "bundled": 497985,
+    "minified": 152018,
+    "gzipped": 45872
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 168039,
-    "minified": 80688,
-    "gzipped": 19864,
+    "bundled": 169583,
+    "minified": 81478,
+    "gzipped": 20083,
     "treeshaked": {
       "rollup": {
-        "code": 62227,
-        "import_statements": 1470
+        "code": 62961,
+        "import_statements": 1466
       },
       "webpack": {
-        "code": 65735
+        "code": 66479
       }
     }
   }

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-actions/register'

.storybook/config.js

@@ -1,4 +1,11 @@
-import { configure } from '@storybook/react'
+import { configure, addParameters } from '@storybook/react'
+import rbcTheme from './rbc.theme'
+
+addParameters({
+  options: {
+    theme: rbcTheme,
+  },
+})
 
 function loadStories() {
   require('../stories')

.storybook/rbc.theme.js

@@ -0,0 +1,30 @@
+import { create } from '@storybook/theming'
+
+export default create({
+  base: 'light',
+
+  colorSecondary: 'white',
+
+  // UI
+  appBg: 'white',
+
+  // Typography
+  fontBase: '"Open Sans", sans-serif',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: 'black',
+  textInverseColor: 'rgba(255,255,255,0.9)',
+
+  // Toolbar default and active colors
+  barTextColor: 'white',
+  barBg: 'rgb(49, 116, 173)',
+
+  // Form colors
+  inputBg: 'white',
+  inputTextColor: 'black',
+  inputBorderRadius: 4,
+
+  brandTitle: 'Big Calendar',
+  brandUrl: 'http://intljusticemission.github.io/react-big-calendar/examples',
+})

.storybook/webpack.config.js

@@ -2,18 +2,14 @@ const { rules, loaders, plugins, stats } = require('webpack-atoms')
 
 const browsers = ['last 2 versions', 'ie >= 10']
 
-module.exports = function(config) {
-  return {
-    ...config,
-    module: {
-      rules: [
-        rules.js(),
-        rules.fonts(),
-        rules.images(),
-        rules.css(),
-        rules.less({ browsers }),
-      ],
-    },
-    plugins: [...config.plugins],
-  }
+module.exports = function({ config }) {
+  config.module.rules = [
+    rules.js(),
+    rules.fonts(),
+    rules.images(),
+    rules.css(),
+    rules.sass({ browsers }),
+  ]
+
+  return config
 }

README.md

@@ -11,7 +11,7 @@ Inspired by [Full Calendar](http://fullcalendar.io/).
 `yarn add react-big-calendar` or `npm install --save react-big-calendar`
 
 Include `react-big-calendar/lib/css/react-big-calendar.css` for styles, and make sure your calendar's container
-element has a height, or the calendar won't be visible.
+element has a height, or the calendar won't be visible. To provide your own custom styling, see the [Custom Styling](#custom-styling) topic.
 
 ## Starters
 
@@ -76,6 +76,20 @@ const MyCalendar = props => (
 )
 ```
 
+## Custom Styling
+
+Out of the box you can include the compiled css files and be up and running. But, sometimes, you may want to style
+Big Calendar to match your application styling. For this reason SASS files are included with Big Calendar.
+
+```
+  @import 'react-big-calendar/lib/sass/styles';
+  @import 'react-big-calendar/addons/dragAndDrop/styles'; // if using DnD
+```
+
+SASS implementation provides a `variables` file containing color and sizing variables that you can
+update to fit your application. _Note:_ Changing and/or overriding styles can cause rendering issues with your
+Big Calendar. Carefully test each change accordingly.
+
 ## Join us on Reactiflux Discord
 
 Join us on [Reactiflux Discord](https://discord.gg/uJsgpkC) community under the channel #react-big-calendar if you have any questions.

examples/App.js

@@ -10,9 +10,9 @@ import globalize from 'globalize'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'font-awesome/css/font-awesome.min.css'
 
-import 'react-big-calendar/lib/less/styles.less'
-import './styles.less'
-import './prism.less'
+import 'react-big-calendar/lib/sass/styles.scss'
+import './styles.scss'
+import './prism.scss'
 import Card from './Card'
 import ExampleControlSlot from './ExampleControlSlot'
 import Basic from './demos/basic'

examples/Intro.md

@@ -7,7 +7,9 @@ _yarn:_ `yarn add react-big-calendar`
 _npm:_ `npm install --save react-big-calendar`
 
 Styles can be found at: `react-big-calendar/lib/css/react-big-calendar.css`, and should be included on the page
-with the calendar component. Also make sure that your calendar's container
+with the calendar component. Alternatively, you can include the styles directly in your SASS build. See the [Custom Styling](https://github.com/intljusticemission/react-big-calendar/blob/master/README.md#custom-styling) section of the README file for more details.
+
+Also make sure that your calendar's container
 element has a height, or the calendar won't be visible (see why below).
 
 Date internationalization and localization is **hard** and `react-big-calendar` doesn't even attempt to