Add bundling (rollup) (#34)

* feat: first-attempt at adding rollup

* feat(build-process): fix css bundling

* feat(build-process): fix svg bundling ^_^

* chore(build-process): dep cleanup"

* chore(build-process): fixup rollup config

* feat(build-process): add messages export

* chore: moved proxy exports

* chore(build-process): add cjs module and script fixups

Add cjs module export, rearrange npm scripts, fix for namespace exports, add cleanup rollup plugin,
and copy files and folders to dist.

* chore(build-process): remove thread loader from webpack config

* chore: copy files from rollup

* chore: inline plugins in rollup config

* chore: cp -r -> -R

* chore: rename demo to storybook in scripts

* chore(build-process): remove remnants of thread-loader from webpack.config

* chore(build-process): remove unused webpack loaders

* chore(build-process): fixup deps, remove unused rollup deps

* chore: disable eslint for proxy-exports dir

* chore(build-systems): add cross-env for node-env setting

* chore: add netlify.toml config

* docs(readme): improve imports docs

* chore: run prettier, adjust glob matches

* chore(build-process): add rollup replace plugin for production node env setting

* chore(build-process): add srync copy for orig materials

* chore(build-process): remove unused proxy exports

* chore(build-process): copy images as well

* chore(process-build): add table-cell proxy export

* chore: add script for copying files to dist folder

.eslintignore

@@ -1,3 +1,4 @@
 dist/
+proxy_exports/**/*.js
 node_modules/*
 **/node_modules/*

.gitignore

@@ -4,7 +4,8 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
+**/.DS_Store
+dist
 # Runtime data
 pids
 *.pid
@@ -79,6 +80,3 @@ typings/
 .idea
 .vscode
 !.vscode/settings.json
-
-# Netlify
-netlify.toml

.storybook/webpack.config.js

@@ -29,22 +29,6 @@ module.exports = (storybookBaseConfig, configType) => {
       test: /\.js$/,
       include: sourceFolders,
       use: [
-        // This loader parallelizes code compilation, it is optional but
-        // improves compile time on larger projects
-        Object.assign(
-          {},
-          {
-            loader: require.resolve('thread-loader'),
-          },
-          // Keep workers alive only for development mode
-          configType === 'PRODUCTION'
-            ? {}
-            : {
-                options: {
-                  poolTimeout: Infinity, // keep workers alive for more effective watch mode
-                },
-              }
-        ),
         {
           loader: require.resolve('babel-loader'),
           options: {
@@ -99,30 +83,6 @@ module.exports = (storybookBaseConfig, configType) => {
         },
       ],
     },
-    // For normal svg files (not icons) we should load the file normally
-    // and simply use it as a `<img src/>`.
-    {
-      test: function testForNormalSvgFiles(fileName) {
-        return (
-          // Use this only for plain SVG.
-          // For SVG as React components, see loader above.
-          fileName.endsWith('.svg') && !fileName.endsWith('.react.svg')
-        );
-      },
-      use: [
-        {
-          loader: require.resolve('svg-url-loader'),
-          options: { noquotes: true },
-        },
-      ],
-    },
-    // "url" loader works like "file" loader except that it embeds assets
-    // smaller than specified limit in bytes as data URLs to avoid requests.
-    // A missing `test` is equivalent to a match.
-    {
-      test: /\.png$/,
-      use: [require.resolve('url-loader')],
-    },
     // "postcss" loader applies autoprefixer to our CSS
     // "css" loader resolves paths in CSS and adds assets as dependencies.
     // "style" loader turns CSS into JS modules that inject <style> tags.

.stylelintrc

@@ -28,6 +28,7 @@
     "rule-empty-line-before": null,
     "value-list-comma-newline-after": null,
     "indentation": null,
-    "selector-descendant-combinator-no-non-space": null
+    "selector-descendant-combinator-no-non-space": null,
+    "selector-combinator-space-before": null
   }
 }

CODE_OF_CONDUCT.md

@@ -8,19 +8,19 @@ In the interest of fostering an open and welcoming environment, we as contributo
 
 Examples of behavior that contributes to creating a positive environment include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
 
 ## Our Responsibilities
 

README.md

@@ -13,8 +13,6 @@ $ npm install --save @commercetools-frontend/ui-kit
 $ yarn add @commercetools-frontend/ui-kit
 ```
 
-## Export structure
-
 The package main exports contains all the UI components.
 
 ```js
@@ -26,10 +24,17 @@ import {
 } from '@commercetools-frontend/ui-kit';
 ```
 
-There are some other exports that are grouped under different subfolders:
+#### Exports for backwards compatibility
+
+Previously the library was consumed by reaching into the folders structure like
+
+```js
+import PrimaryButton from '@commercetools-frontend/ui-kit/buttons/primary-button';
+```
+
+In order to keep those imports backwards compatible, we provide the same old file structure in the `proxy-exports` folder, which then gets copied into `dist` at build time. Each folder only contains an `index.js` that points to the main export of the generated bundle.
 
-- `@commercetools-frontend/ui-kit/hocs`: contains useful Higher Order Components
-- `@commercetools-frontend/ui-kit/materials`: contains low-level styles and components
+> The `proxy-exports` folder will be removed in the future.
 
 ## Motivation
 

i18n/index.js

@@ -1,3 +1,5 @@
-export * as en from './en.json';
-export * as de from './de.json';
-export * as es from './es.json';
+import * as en from './en.json';
+import * as de from './de.json';
+import * as es from './es.json';
+
+export { en, de, es };

jest.eslint.config.js

@@ -8,6 +8,6 @@ module.exports = {
     '<rootDir>/src/**/*.js',
     '<rootDir>/**/*.js', // for backwards compatible folders
   ],
-  testPathIgnorePatterns: ['<rootDir>/node_modules'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/proxy-exports'],
   watchPlugins: ['jest-plugin-filename'],
 };

lint-staged.config.js

@@ -1,25 +1,31 @@
+const formatMarkdown = ['npm run format:md', 'git add'];
+const formatJs = [
+  // NOTE: apparently if you pass some argument that is not a flag AFTER the `reporters`
+  // flag, jest does not seem correctly parse the arguments.
+  //
+  //   No tests found related to files changed since last commit.
+  //   Run Jest without `-o` or with `--all` to run all tests.
+  //   Error: An error occurred while adding the reporter at path "/path/to/file".Reporter is not a constructor
+  //
+  // For that reason, we move the `--onlyChanged` flag next to it.
+  'npm run lint:js -- --reporters=jest-silent-reporter --onlyChanged',
+];
+const formatCss = [
+  // NOTE: apparently if you pass some argument that is not a flag AFTER the `reporters`
+  // flag, jest does not seem correctly parse the arguments.
+  //
+  //   No tests found related to files changed since last commit.
+  //   Run Jest without `-o` or with `--all` to run all tests.
+  //   Error: An error occurred while adding the reporter at path "/path/to/file".Reporter is not a constructor
+  //
+  // For that reason, we move the `--onlyChanged` flag next to it.
+  'npm run lint:css -- --reporters=jest-silent-reporter --onlyChanged',
+];
+
 module.exports = {
-  '{.github,src,examples}/**/*.md': ['npm run format:md', 'git add'],
-  '{src,scripts,examples,.storybook}/**/*.js': [
-    // NOTE: apparently if you pass some argument that is not a flag AFTER the `reporters`
-    // flag, jest does not seem correctly parse the arguments.
-    //
-    //   No tests found related to files changed since last commit.
-    //   Run Jest without `-o` or with `--all` to run all tests.
-    //   Error: An error occurred while adding the reporter at path "/path/to/file".Reporter is not a constructor
-    //
-    // For that reason, we move the `--onlyChanged` flag next to it.
-    'npm run lint:js -- --reporters=jest-silent-reporter --onlyChanged',
-  ],
-  'src/**/*.css': [
-    // NOTE: apparently if you pass some argument that is not a flag AFTER the `reporters`
-    // flag, jest does not seem correctly parse the arguments.
-    //
-    //   No tests found related to files changed since last commit.
-    //   Run Jest without `-o` or with `--all` to run all tests.
-    //   Error: An error occurred while adding the reporter at path "/path/to/file".Reporter is not a constructor
-    //
-    // For that reason, we move the `--onlyChanged` flag next to it.
-    'npm run lint:css -- --reporters=jest-silent-reporter --onlyChanged',
-  ],
+  '*.md': formatMarkdown,
+  '{.github,.storybook,examples,src}/**/*.md': formatMarkdown,
+  '*.js': formatJs,
+  '{.storybook,examples,scripts,src}/**/*.js': formatJs,
+  '{.storybook,examples,src}/**/*.css': formatCss,
 };

netlify.toml

@@ -0,0 +1,4 @@
+[build]
+  command = "yarn storybook:build"
+  publish = ".public"
+