Remove webpack configs, work only with styleguidist

Author: onurkerimov

package.json

@@ -4,12 +4,10 @@
   "description": "A React component for choosing dates and date ranges.",
   "main": "dist/index.js",
   "scripts": {
-    "styleguide": "styleguidist server",
-    "styleguide:build": "styleguidist build",
-    "dev": "NODE_ENV=development & webpack-dev-server --config webpack/webpack.config.dev.js",
-    "build": "NODE_ENV=production & yarn build-library & yarn build-demo",
-    "build-demo": "webpack --config webpack/webpack.config.prod.js",
-    "build-library": "babel ./src --out-dir ./dist & postcss 'src/styles.scss' -d dist --ext css & postcss 'src/theme/*.scss' -d 'dist/theme' --ext css",
+    "start": "yarn build:css & yarn build:js & styleguidist server",
+    "build": "yarn build:css & yarn build:js & styleguidist build",
+    "build:css": "postcss 'src/styles.scss' -d dist --ext css & postcss 'src/theme/*.scss' -d 'dist/theme' --ext css",
+    "build:js": "babel ./src --out-dir ./dist",
     "lint": "eslint 'src/**/*.js'",
     "test": "jest",
     "preversion": "yarn clear & yarn build"
@@ -44,7 +42,8 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-list": "^0.8.13"
+    "react-list": "^0.8.13",
+    "url-loader": "^3.0.0"
   },
   "peerDependencies": {
     "react": "^0.14 || ^15.0.0-rc || >=15.0"
@@ -76,7 +75,9 @@
     "node-sass": "^4.13.0",
     "postcss": "^7.0.25",
     "postcss-cli": "^6.1.3",
+    "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
+    "precss": "^4.0.0",
     "prettier": "^1.19.1",
     "react-styleguidist": "^10.4.0",
     "sass-loader": "^8.0.0",

postcss.config.js

@@ -1,5 +1,7 @@
+const precss = require('precss');
 const autoprefixer = require('autoprefixer');
+const cssImport = require('postcss-import');
 
 module.exports = {
-  plugins: [autoprefixer()],
+  plugins: [cssImport(), precss(), autoprefixer()],
 };

src/components/Calendar/README.md

@@ -1,10 +1,10 @@
-DatePicker - Internationalization
+### Internationalization
 
 ```jsx inside Markdown
-import Calendar from 'react-date-range/components/Calendar';
-import * as locales from 'react-date-range/locale';
-//import '../../dist/styles.css'; // main style file
-//import 'react-date-range/dist/theme/default.css'; // theme css file
+import { Calendar } from 'react-date-range';
+import * as locales from 'react-date-range/dist/locale';
+import 'react-date-range/dist/styles.css'; // main style file
+import 'react-date-range/dist/theme/default.css'; // theme css file
 
 const [locale, setLocale] = React.useState('ja');
 <Calendar

src/components/DateRange/DateRange.js

@@ -1,6 +1,6 @@
-@import 'components/Calendar';
-@import 'components/DateRange';
-@import 'components/DateInput';
-@import 'components/DayCell';
-@import 'components/DateRangePicker';
-@import 'components/DefinedRange';
+@import 'components/Calendar/index.scss';
+@import 'components/DateRange/index.scss';
+@import 'components/DateInput/index.scss';
+@import 'components/DayCell/index.scss';
+@import 'components/DateRangePicker/index.scss';
+@import 'components/DefinedRange/index.scss';

src/styles.scss

@@ -1,6 +1,7 @@
 .rdrCalendarWrapper{
   color: #000000;
   font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .rdrDateDisplay{

src/theme/default.scss

@@ -1,8 +1,94 @@
 const path = require('path');
 
 module.exports = {
-  webpackConfig: require('./webpack/webpack.config.dev.js'),
+  ignore: ['**/*.test.js', '**/DateInput/*', '**/DayCell/*', '**/Month/*', '**/InputRangeField/*'],
+  title: 'react-date-range',
+  showSidebar: false,
+  template: {
+    head: {
+      links: [
+        {
+          rel: 'stylesheet',
+          href: 'https://fonts.googleapis.com/css?family=Open+Sans:300,400',
+        },
+        {
+          rel: 'stylesheet',
+          href: './dist/styles.css',
+        },
+        {
+          rel: 'stylesheet',
+          href: './dist/theme/default.css',
+        },
+        {
+          rel: 'stylesheet',
+          href: './styleguide/styles.css',
+        },
+      ],
+    },
+  },
+  theme: {
+    baseBackground: '#fdfdfc',
+    link: '#274e75',
+    linkHover: '#90a7bf',
+    border: '#e0d2de',
+    font: ['Open Sans'],
+    fontFamily: {
+      base: '"Open Sans", "Helvetica", sans-serif',
+    },
+  },
+
+  getComponentPathLine(componentPath) {
+    const arr = componentPath.split('/');
+    const name = arr[arr.length - 2];
+    return `import { ${name} } from 'react-date-range';`;
+  },
+
+  styles: function styles(theme) {
+    return {
+      Playground: {
+        preview: {
+          paddingLeft: 0,
+          paddingRight: 0,
+          borderWidth: [[0, 0, 1, 0]],
+          borderRadius: 0,
+        },
+      },
+      Code: {
+        code: {
+          // make inline code example appear the same color as links
+          color: theme.color.link,
+          fontSize: 14,
+        },
+      },
+    };
+  },
+  // Override Styleguidist components
+  styleguideComponents: {
+    LogoRenderer: path.join(__dirname, 'styleguide/components/Logo'),
+    StyleGuideRenderer: path.join(__dirname, 'styleguide/components/StyleGuide'),
+    SectionsRenderer: path.join(__dirname, 'styleguide/components/SectionsRenderer'),
+  },
   moduleAliases: {
-    'react-date-range': path.resolve(__dirname, 'src'),
+    'react-date-range/dist': path.resolve(__dirname, 'dist'),
+    'react-date-range': path.resolve(__dirname, 'dist'),
+  },
+  webpackConfig: {
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          exclude: /node_modules/,
+          loader: 'babel-loader',
+        },
+        {
+          test: /\.css$/,
+          loader: 'style-loader!css-loader?modules',
+        },
+        {
+          test: /\.svg$/,
+          loader: 'url-loader',
+        },
+      ],
+    },
   },
 };