From 3008851a015274394328187a95a36260ac950b23 Mon Sep 17 00:00:00 2001
From: Utwo <mihai.legat@gmail.com>
Date: Sat, 23 May 2020 12:37:10 +0300
Subject: [PATCH] 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                                 | 26 ++++++
 package-lock.json                             |  2 +-
 package.json                                  | 24 +-----
 rollup.config.js                              | 67 +++++++++++----
 src/components/checkbox/checkbox.js           |  1 -
 .../completed-form-table.js                   |  2 +-
 ....styles.scss => completed-form-table.scss} |  0
 src/components/footer/footer-links.js         |  1 -
 src/components/footer/footer.js               |  1 -
 src/components/form/datePicker.css            |  7 --
 src/components/form/datePicker.js             |  5 +-
 src/components/form/datePicker.scss           |  9 ++
 src/components/form/form.js                   | 11 ++-
 src/components/input/input.js                 |  1 -
 src/components/label/label.js                 |  1 -
 src/components/list-item/list-item.js         |  2 +-
 .../{list-item.styles.scss => list-item.scss} |  0
 src/components/list/list.js                   |  2 +-
 .../list/{list.styles.scss => list.scss}      |  0
 src/components/login-form/login-form.js       |  1 -
 .../personal-data-table.js                    |  2 +-
 ...e.styles.scss => personal-data-table.scss} |  0
 .../search-result-list-item.js                |  2 +-
 ...yles.scss => search-result-list-item.scss} |  0
 src/index.js                                  | 82 ++++++++++---------
 src/styles.scss                               |  3 +-
 26 files changed, 150 insertions(+), 102 deletions(-)
 create mode 100644 .babelrc.json
 rename src/components/completed-form-table/{completed-form-table.styles.scss => completed-form-table.scss} (100%)
 delete mode 100644 src/components/form/datePicker.css
 create mode 100644 src/components/form/datePicker.scss
 rename src/components/list-item/{list-item.styles.scss => list-item.scss} (100%)
 rename src/components/list/{list.styles.scss => list.scss} (100%)
 rename src/components/personal-data-table/{personal-data-table.styles.scss => personal-data-table.scss} (100%)
 rename src/components/search-result-list-item/{search-result-list-item.styles.scss => search-result-list-item.scss} (100%)

diff --git a/.babelrc.json b/.babelrc.json
new file mode 100644
index 0000000..4bf9a54
--- /dev/null
+++ b/.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"]
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 284c9a7..5527d19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 3b3cde7..f85863b 100644
--- a/package.json
+++ b/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": "",
diff --git a/rollup.config.js b/rollup.config.js
index 018ad66..0b18a3f 100644
--- a/rollup.config.js
+++ b/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"],
 };
diff --git a/src/components/checkbox/checkbox.js b/src/components/checkbox/checkbox.js
index a454452..a997560 100644
--- a/src/components/checkbox/checkbox.js
+++ b/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 = ({
diff --git a/src/components/completed-form-table/completed-form-table.js b/src/components/completed-form-table/completed-form-table.js
index a3e6328..50a768f 100644
--- a/src/components/completed-form-table/completed-form-table.js
+++ b/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";
diff --git a/src/components/completed-form-table/completed-form-table.styles.scss b/src/components/completed-form-table/completed-form-table.scss
similarity index 100%
rename from src/components/completed-form-table/completed-form-table.styles.scss
rename to src/components/completed-form-table/completed-form-table.scss
diff --git a/src/components/footer/footer-links.js b/src/components/footer/footer-links.js
index 73dcc2c..51d2481 100644
--- a/src/components/footer/footer-links.js
+++ b/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 }) => {
diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
index 265b889..c182dda 100644
--- a/src/components/footer/footer.js
+++ b/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";
 
diff --git a/src/components/form/datePicker.css b/src/components/form/datePicker.css
deleted file mode 100644
index 91ff539..0000000
--- a/src/components/form/datePicker.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.date-picker>div:nth-child(2) {
-  width: 100%;
-}
-
-.react-datepicker__day--outside-month {
-  color: #bbbbbb;
-}
\ No newline at end of file
diff --git a/src/components/form/datePicker.js b/src/components/form/datePicker.js
index 67291b4..3160617 100644
--- a/src/components/form/datePicker.js
+++ b/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,
diff --git a/src/components/form/datePicker.scss b/src/components/form/datePicker.scss
new file mode 100644
index 0000000..927a0b7
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/form/form.js b/src/components/form/form.js
index 0064180..75e3161 100644
--- a/src/components/form/form.js
+++ b/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
diff --git a/src/components/input/input.js b/src/components/input/input.js
index f5952ab..3d8863c 100644
--- a/src/components/input/input.js
+++ b/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 = ({
diff --git a/src/components/label/label.js b/src/components/label/label.js
index e324d05..517fd00 100644
--- a/src/components/label/label.js
+++ b/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 }) => (
diff --git a/src/components/list-item/list-item.js b/src/components/list-item/list-item.js
index 85bb4e2..ff1a7c1 100644
--- a/src/components/list-item/list-item.js
+++ b/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 = ({
diff --git a/src/components/list-item/list-item.styles.scss b/src/components/list-item/list-item.scss
similarity index 100%
rename from src/components/list-item/list-item.styles.scss
rename to src/components/list-item/list-item.scss
diff --git a/src/components/list/list.js b/src/components/list/list.js
index fade759..18c7773 100644
--- a/src/components/list/list.js
+++ b/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 (
diff --git a/src/components/list/list.styles.scss b/src/components/list/list.scss
similarity index 100%
rename from src/components/list/list.styles.scss
rename to src/components/list/list.scss
diff --git a/src/components/login-form/login-form.js b/src/components/login-form/login-form.js
index 81d4c9b..14a396c 100644
--- a/src/components/login-form/login-form.js
+++ b/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 = ({
diff --git a/src/components/personal-data-table/personal-data-table.js b/src/components/personal-data-table/personal-data-table.js
index 6f2f906..ff5785c 100644
--- a/src/components/personal-data-table/personal-data-table.js
+++ b/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 (
diff --git a/src/components/personal-data-table/personal-data-table.styles.scss b/src/components/personal-data-table/personal-data-table.scss
similarity index 100%
rename from src/components/personal-data-table/personal-data-table.styles.scss
rename to src/components/personal-data-table/personal-data-table.scss
diff --git a/src/components/search-result-list-item/search-result-list-item.js b/src/components/search-result-list-item/search-result-list-item.js
index 5559c03..c7f7ad8 100644
--- a/src/components/search-result-list-item/search-result-list-item.js
+++ b/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,
diff --git a/src/components/search-result-list-item/search-result-list-item.styles.scss b/src/components/search-result-list-item/search-result-list-item.scss
similarity index 100%
rename from src/components/search-result-list-item/search-result-list-item.styles.scss
rename to src/components/search-result-list-item/search-result-list-item.scss
diff --git a/src/index.js b/src/index.js
index 0e1c6e8..84ed0f4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,59 +1,63 @@
 import "./styles.scss";
 
-export * from "./components/accordion/accordion";
-export * from "./components/button/button";
-export * from "./components/checkbox/checkbox";
-export * from "./components/input/input";
-export * from "./components/label/label";
+export { Accordion } from "./components/accordion/accordion";
+export { Button } from "./components/button/button";
+export { Checkbox } from "./components/checkbox/checkbox";
+export { Input } from "./components/input/input";
+export { Label } from "./components/label/label";
 
-export * from "./components/developed-by/developed-by";
+export { DevelopedBy } from "./components/developed-by/developed-by";
 
-export * from "./components/footer/footer-links";
-export * from "./components/footer/footer";
+export {
+  FooterLinks,
+  FooterLinkHeader,
+  FooterLinkItem
+} from "./components/footer/footer-links";
+export { Footer } from "./components/footer/footer";
 
-export * from "./components/header/header";
+export { Header } from "./components/header/header";
 
-export * from "./components/hero/hero";
+export { Hero } from "./components/hero/hero";
 
-export * from "./components/incubated-by/incubated-by";
+export { IncubatedBy } from "./components/incubated-by/incubated-by";
 
-export * from "./components/banner/banner";
+export { Banner } from "./components/banner/banner";
 
-export * from "./components/instruments/instruments";
-export * from "./components/instruments-item/instruments-item";
+export { Instruments } from "./components/instruments/instruments";
+export { InstrumentsItem } from "./components/instruments-item/instruments-item";
 
-export * from "./components/select/select";
-export * from "./components/radio-list/radio-list";
+export { Select } from "./components/select/select";
+export { RadioList } from "./components/radio-list/radio-list";
 
-export * from "./components/login-form/login-form";
+export { LoginForm } from "./components/login-form/login-form";
 
-export * from "./components/list/list";
-export * from "./components/list-header/list-header";
-export * from "./components/list-item/list-item";
-export * from "./components/search-result-list-item/search-result-list-item";
+export { List } from "./components/list/list";
+export { ListHeader } from "./components/list-header/list-header";
+export { ListItem } from "./components/list-item/list-item";
+export { SearchResultListItem } from "./components/search-result-list-item/search-result-list-item";
 
-export * from "./components/logo/logo";
+export { Logo } from "./components/logo/logo";
 
-export * from "./components/search-input/search-input";
-export * from "./components/social-share/social-share";
+export { SearchInput } from "./components/search-input/search-input";
+export { SocialsShare } from "./components/social-share/social-share";
 
-export * from "./components/completed-form-table/completed-form-table";
-export * from "./components/temperature-chart/temperature-chart";
-export * from "./components/personal-data-table/personal-data-table";
-export * from "./components/subscribe/mailchimp-subscribe";
-export * from "./components/subscribe/subscribe-form";
+export { CompletedFormTable } from "./components/completed-form-table/completed-form-table";
+export { TemperatureChart } from "./components/temperature-chart/temperature-chart";
+export { PersonalDataTable } from "./components/personal-data-table/personal-data-table";
+export { MailchimpSubscribe } from "./components/subscribe/mailchimp-subscribe";
+export { SubscribeForm } from "./components/subscribe/subscribe-form";
 
-export * from "./components/form/form";
+export { Form } from "./components/form/form";
 
-export * from "./components/sidebar-menu/sidebar-menu";
-export * from "./components/sidebar-menu-item/sidebar-menu-item";
+export { SidebarMenu } from "./components/sidebar-menu/sidebar-menu";
+export { SidebarMenuItem } from "./components/sidebar-menu-item/sidebar-menu-item";
 
-export * from "./components/back-to-top/back-to-top";
+export { BackToTop } from "./components/back-to-top/back-to-top";
 
-export * from "./components/data-table/data-table";
-export * from "./components/data-table-item/data-table-item";
-export * from "./components/data-table-row/data-table-row";
+export { DataTable } from "./components/data-table/data-table";
+export { DataTableItem } from "./components/data-table-item/data-table-item";
+export { DataTableRow } from "./components/data-table-row/data-table-row";
 
-export * from "./components/filter-modal/filter-modal";
-export * from "./components/dropdown-search/dropdown-search";
-export * from "./components/header-filter/header-filter";
+export { FilterModal } from "./components/filter-modal/filter-modal";
+export { DropdownSearch } from "./components/dropdown-search/dropdown-search";
+export { HeaderFilter } from "./components/header-filter/header-filter";
diff --git a/src/styles.scss b/src/styles.scss
index a6034b4..08cffa6 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -9,8 +9,7 @@
 @import "~bulma/sass/elements/title.sass";
 @import "~bulma/sass/layout/section.sass";
 @import "~bulma/sass/elements/content.sass";
-@import '~bulma/sass/elements/table.sass';
+@import "~bulma/sass/elements/table.sass";
 @import "~bulma/sass/elements/container.sass";
 @import "~bulma/sass/layout/hero.sass";
 @import "~bulma/sass/grid/columns.sass";
-