Try to make bundle size smaller (#179)

* Try to make bundle size smaller

* Export in multiple bundles by hand. Still not tree-shaking by at least is a plus.

* Bump version

.babelrc.json

@@ -0,0 +1,26 @@
+{
+  "plugins": [
+    "inline-react-svg",
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
+  ],
+  "presets": [
+    [
+      "@babel/env",
+      {
+        "modules": false,
+        "useBuiltIns": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "env": {
+    "test": {
+      "presets": ["@babel/env"]
+    }
+  }
+}

package.json

@@ -1,7 +1,8 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "private": false,
+  "sideEffects": false,
   "dependencies": {
     "bulma": "^0.8.0",
     "date-fns": "^2.11.1",
@@ -46,24 +47,9 @@
       "\\.(scss|png|css)$": "<rootDir>/src/__mocks__/styleMock.js"
     }
   },
-  "babel": {
-    "plugins": [
-      "inline-react-svg",
-      [
-        "@babel/plugin-proposal-class-properties",
-        {
-          "loose": true
-        }
-      ]
-    ],
-    "presets": [
-      "@babel/env",
-      "@babel/preset-react"
-    ]
-  },
   "browserslist": {
     "production": [
-      ">0.2%",
+      ">0.5%",
       "not dead",
       "not op_mini all"
     ],
@@ -86,7 +72,6 @@
     "babel-jest": "^25.2.3",
     "babel-loader": "^8.0.6",
     "babel-plugin-inline-react-svg": "1.0.1",
-    "classnames": "^2.2.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
@@ -106,8 +91,7 @@
     "style-loader": "^1.1.3"
   },
   "description": "Component library for code4ro Taskforce",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.js",
   "style": "dist/index.css",
   "repository": "https://github.com/code4romania/taskforce-fe-components.git",
   "author": "",

rollup.config.js

@@ -1,33 +1,70 @@
 import babel from "rollup-plugin-babel";
 import postcss from "rollup-plugin-postcss";
-import pkg from "./package.json";
 import image from "@rollup/plugin-image";
 
 export default {
-  input: "src/index.js",
+  input: {
+    index: "src/index.js",
+    Accordion: "src/components/accordion/accordion",
+    Button: "src/components/button/button",
+    Checkbox: "src/components/checkbox/checkbox",
+    Input: "src/components/input/input",
+    Label: "src/components/label/label",
+    DevelopedBy: "src/components/developed-by/developed-by",
+    FooterLinks: "src/components/footer/footer-links",
+    FooterLinkHeader: "src/components/footer/footer-links",
+    FooterLinkItem: "src/components/footer/footer-links",
+    Footer: "src/components/footer/footer",
+    Header: "src/components/header/header",
+    Hero: "src/components/hero/hero",
+    IncubatedBy: "src/components/incubated-by/incubated-by",
+    Banner: "src/components/banner/banner",
+    Instruments: "src/components/instruments/instruments",
+    InstrumentsItem: "src/components/instruments-item/instruments-item",
+    Select: "src/components/select/select",
+    RadioList: "src/components/radio-list/radio-list",
+    LoginForm: "src/components/login-form/login-form",
+    List: "src/components/list/list",
+    ListHeader: "src/components/list-header/list-header",
+    ListItem: "src/components/list-item/list-item",
+    SearchResultListItem:
+      "src/components/search-result-list-item/search-result-list-item",
+    Logo: "src/components/logo/logo",
+    SearchInput: "src/components/search-input/search-input",
+    SocialsShare: "src/components/social-share/social-share",
+    CompletedFormTable:
+      "src/components/completed-form-table/completed-form-table",
+    TemperatureChart: "src/components/temperature-chart/temperature-chart",
+    PersonalDataTable: "src/components/personal-data-table/personal-data-table",
+    MailchimpSubscribe: "src/components/subscribe/mailchimp-subscribe",
+    SubscribeForm: "src/components/subscribe/subscribe-form",
+    Form: "src/components/form/form",
+    SidebarMenu: "src/components/sidebar-menu/sidebar-menu",
+    SidebarMenuItem: "src/components/sidebar-menu-item/sidebar-menu-item",
+    BackToTop: "src/components/back-to-top/back-to-top",
+    DataTable: "src/components/data-table/data-table",
+    DataTableItem: "src/components/data-table-item/data-table-item",
+    DataTableRow: "src/components/data-table-row/data-table-row",
+    FilterModal: "src/components/filter-modal/filter-modal",
+    DropdownSearch: "src/components/dropdown-search/dropdown-search",
+    HeaderFilter: "src/components/header-filter/header-filter",
+  },
   output: [
     {
-      file: pkg.main,
-      format: "cjs",
-      exports: "named",
+      dir: "dist",
+      format: "es",
       sourcemap: true,
-      strict: false
     },
-    {
-      file: pkg.module,
-      format: "es",
-      sourcemap: true
-    }
   ],
   plugins: [
     image(),
     postcss({
       extract: true,
-      minimize: true
+      minimize: true,
     }),
     babel({
-      runtimeHelpers: true
-    })
+      exclude: "node_modules/**",
+    }),
   ],
-  external: ["react", "react-dom", "prop-types"]
+  external: ["react", "react-dom", "prop-types", "debug", "assert"],
 };

src/components/checkbox/checkbox.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "../../styles.scss";
 import "./checkbox.scss";
 
 export const Checkbox = ({

src/components/completed-form-table/completed-form-table.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import CaretSvg from "../../images/icons/caret-down.svg";
-import "./completed-form-table.styles.scss";
+import "./completed-form-table.scss";
 import { Label } from "../label/label";
 import format from "date-fns/format";
 import fromUnixTime from "date-fns/fromUnixTime";

src/components/footer/footer-links.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "./../../styles.scss";
 import "./footer.scss";
 
 export const FooterLinks = ({ children }) => {

src/components/footer/footer.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "./../../styles.scss";
 import Code4RomaniaGrayLogo from "../../images/code4romania-gray.svg";
 import "./footer.scss";
 

src/components/form/datePicker.js

@@ -1,13 +1,12 @@
 import React, { forwardRef, useState } from "react";
 import PropTypes from "prop-types";
-import { ListHeader } from "../list-header/list-header";
 import ReactDatePicker from "react-datepicker";
+import { ListHeader } from "../list-header/list-header";
 
 import ro from "date-fns/locale/ro";
 import { setHours, setMinutes, isSameDay } from "date-fns";
 
-import "react-datepicker/dist/react-datepicker.css";
-import "./datePicker.css";
+import "./datePicker.scss";
 
 export const DatePicker = ({
   withTime,

src/components/form/datePicker.scss

@@ -0,0 +1,9 @@
+// @import "react-datepicker/dist/react-datepicker.css";
+
+.date-picker > div:nth-child(2) {
+  width: 100%;
+}
+
+.react-datepicker__day--outside-month {
+  color: #bbbbbb;
+}

src/components/form/form.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { groupBy, mapObject } from "underscore";
+import { mapObject } from "underscore";
 import SingleChoice from "./singleChoice";
 import "./form.scss";
 import { Button } from "../button/button";
@@ -32,12 +32,15 @@ export const Form = ({ data, evaluateForm, onFinishingForm }) => {
   };
 
   const toMap = form => {
-    const groupedById = groupBy(form, question => question.questionId);
-    return mapObject(groupedById, listOfQuestions => listOfQuestions[0]);
+    return form.reduce((obj, item) => {
+      return {
+        ...obj,
+        [item["questionId"]]: item
+      };
+    }, {});
   };
 
   const formAsMap = toMap(data.form);
-
   const createFormWithAnswers = () => {
     const answersById = mapObject(formAsMap, (question, id) => {
       //a bit a of hack to get rid of the final entry - needs restructuring of the data model

src/components/input/input.js

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
-import "../../styles.scss";
 import { Label } from "../label/label";
 
 export const Input = ({

src/components/label/label.js

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "../../styles.scss";
 import "./label.scss";
 
 export const Label = ({ text, isSecondary }) => (

src/components/list-item/list-item.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import classNames from "classnames";
 import Tick from "../../images/icons/tick.svg";
 import ArrowRight from "../../images/icons/arrow-right.svg";
-import "./list-item.styles.scss";
+import "./list-item.scss";
 import { onEnterOrSpace } from "../../a11y";
 
 export const ListItem = ({

src/components/list/list.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "./list.styles.scss";
+import "./list.scss";
 
 export const List = ({ columns, children }) => {
   return (

src/components/login-form/login-form.js

@@ -3,7 +3,6 @@ import PropTypes from "prop-types";
 import { Input } from "../input/input";
 import { Checkbox } from "../checkbox/checkbox";
 import { Button } from "../button/button";
-import "../../styles.scss";
 import "./login-form.scss";
 
 export const LoginForm = ({

src/components/personal-data-table/personal-data-table.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "./personal-data-table.styles.scss";
+import "./personal-data-table.scss";
 
 export const PersonalDataTable = ({ personalData }) => {
   return (

src/components/search-result-list-item/search-result-list-item.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import "./search-result-list-item.styles.scss";
+import "./search-result-list-item.scss";
 
 export const SearchResultListItem = ({
   date,