@papillonbits/library 0.32.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papillonbits/library",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "description": "Papillon Bits Library",
   "homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/library",
   "repository": {
@@ -24,6 +24,7 @@
     "pagination/",
     "sort/",
     "store/",
+    "storybook/",
     "string/",
     "webpack/",
     "README.md"
@@ -37,5 +38,5 @@
     "build-acceptance": "npm run build",
     "build-release": "npm run build"
   },
-  "gitHead": "a3f7da0995192a4c9fbd3a4092dfbf416d783881"
+  "gitHead": "f891ea6c3f15319912254db9049bce8e7f4aa6ef"
 }

package/storybook/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getStorybookMainSetup", {
+  enumerable: true,
+  get: function get() {
+    return _mainSetup.getStorybookMainSetup;
+  }
+});
+
+var _mainSetup = require("./setup/mainSetup");

package/storybook/setup/mainSetup.js

@@ -0,0 +1,188 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStorybookMainSetup = getStorybookMainSetup;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _mdxCompilerPlugin = _interopRequireDefault(require("@storybook/addon-docs/mdx-compiler-plugin"));
+
+/* eslint-disable no-restricted-syntax */
+
+/* eslint-disable vars-on-top */
+
+/* eslint-disable no-var */
+
+/* eslint-disable no-prototype-builtins */
+
+/* eslint-disable no-unused-vars */
+
+/* eslint-disable no-param-reassign */
+
+/* eslint-disable global-require */
+function isEmptyObject(obj) {
+  for (var prop in obj) {
+    if (obj.hasOwnProperty(prop)) return false;
+  }
+
+  return true;
+}
+
+function getStorybookMainSetup(_ref) {
+  var storiesBasePath = _ref.storiesBasePath,
+      includeBasePath = _ref.includeBasePath,
+      modulesBasePath = _ref.modulesBasePath;
+  return {
+    stories: ["".concat(storiesBasePath, "/*.int.story.@(js|mdx)")],
+    addons: ['@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', {
+      name: '@storybook/addon-docs',
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: {
+          injectStoryParameters: false
+        }
+      }
+    }, '@storybook/addon-controls', '@storybook/addon-jest', {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          test: [/\.int.story\.js?$/],
+          include: ["".concat(includeBasePath, "/*")]
+        },
+        loaderOptions: {
+          prettierConfig: {
+            tabWidth: 2,
+            semi: false,
+            singleQuote: true,
+            printWidth: 140,
+            trailingComma: 'all'
+          }
+        }
+      }
+    }, '@storybook/addon-viewport' // fails with @storybook/addon-postcss v3.0.0-alpha.1
+    // '@storybook/addon-postcss',
+    // {
+    //   name: '@storybook/addon-postcss',
+    //   options: {
+    //     postcssLoaderOptions: {
+    //       implementation: require('postcss'),
+    //     },
+    //   },
+    // },
+    ],
+    framework: '@storybook/react',
+    core: {
+      builder: 'webpack5'
+    },
+    webpackFinal: function () {
+      var _webpackFinal = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(config, _ref2) {
+        var configType, fileLoaderRuleSVG;
+        return _regenerator["default"].wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                configType = _ref2.configType;
+                // to be activated when storybook catches up with react/babel new jsx transform
+                // https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
+                // const babelLoaderRule = config.module.rules.find((rule) => rule.test.test && rule.test.test('.jsx'))
+                // babelLoaderRule.use[0].options.presets = babelLoaderRule.use[0].options.presets.map((preset) => {
+                //   return preset === path.resolve(__dirname, '../node_modules/@babel/preset-react/lib/index.js')
+                //     ? [
+                //         path.resolve(__dirname, '../node_modules/@babel/preset-react/lib/index.js'),
+                //         {
+                //           runtime: 'automatic',
+                //         },
+                //       ]
+                //     : preset
+                // })
+                fileLoaderRuleSVG = config.module.rules.find(function (rule) {
+                  return !isEmptyObject(rule) && rule.test.test && rule.test.test('.svg');
+                });
+                fileLoaderRuleSVG.exclude = /\.svg$/; // const fileLoaderRuleJSX = config.module.rules.find((rule) => !isEmptyObject(rule) && rule.test.test && rule.test.test('.jsx'))
+                // fileLoaderRuleJSX.use[0].options.plugins.push(
+                //   path.resolve(__dirname, '../node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js'),
+                // )
+                // fileLoaderRuleJSX.use[0].options.plugins.push(
+                //   path.resolve(__dirname, '../node_modules/babel-plugin-syntax-async-functions/lib/index.js'),
+                // )
+
+                config.module.rules = config.module.rules.concat([{
+                  test: /\.(css|scss)$/,
+                  use: [{
+                    loader: 'style-loader'
+                  }, {
+                    loader: 'css-loader',
+                    options: {
+                      importLoaders: 2,
+                      sourceMap: true,
+                      modules: {
+                        localIdentName: '[name]__[local]___[hash:base64:5]'
+                      }
+                    }
+                  }, {
+                    loader: 'postcss-loader',
+                    options: {
+                      postcssOptions: {
+                        sourceMap: true,
+                        plugins: function plugins() {
+                          return [require('postcss-preset-env')()];
+                        },
+                        parser: 'postcss-scss'
+                      }
+                    }
+                  }, {
+                    loader: 'sass-loader',
+                    options: {
+                      sassOptions: {
+                        includePaths: [modulesBasePath]
+                      }
+                    }
+                  }]
+                }, {
+                  test: /\.svg$/i,
+                  issuer: /\.[jt]sx?$/,
+                  use: ['@svgr/webpack']
+                }, {
+                  test: /\.int.story\.mdx$/,
+                  use: [{
+                    loader: 'babel-loader',
+                    options: {
+                      plugins: ['@babel/plugin-transform-react-jsx']
+                    }
+                  }, {
+                    loader: '@mdx-js/loader',
+                    options: {
+                      compilers: [(0, _mdxCompilerPlugin["default"])({})]
+                    }
+                  }]
+                }, {
+                  test: /\.int.story\.jsx?$/,
+                  loader: require.resolve('@storybook/source-loader'),
+                  exclude: [/node_modules/],
+                  enforce: 'pre'
+                }]);
+                return _context.abrupt("return", config);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function webpackFinal(_x, _x2) {
+        return _webpackFinal.apply(this, arguments);
+      }
+
+      return webpackFinal;
+    }()
+  };
+}

package/webpack/loader/markdownLoader.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getMarkdownLoaderStandardSetup = getMarkdownLoaderStandardSetup;
 
+// https://github.com/webpack-contrib/html-loader
 // https://github.com/peerigon/markdown-loader
 function getMarkdownLoaderStandardSetup() {
   return {