@npm_leadtech/legal-lib-components 0.3.39 → 0.3.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm_leadtech/legal-lib-components",
-  "version": "0.3.39",
+  "version": "0.3.40",
   "dependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
@@ -20,9 +20,10 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.12.16",
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
+    "@babel/core": "^7.12.16",
+    "@babel/preset-env": "^7.12.16",
+    "@babel/preset-react": "^7.12.13",
+    "@rollup/plugin-babel": "^5.2.3",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@rollup/plugin-url": "^6.0.0",
@@ -31,6 +32,7 @@
     "@storybook/addon-links": "^6.1.17",
     "@storybook/react": "^6.1.17",
     "@testing-library/react": "^11.2.5",
+    "autoprefixer": "^10.2.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-preset-react-app": "^10.0.0",
@@ -52,7 +54,7 @@
     "prettier": "^2.2.1",
     "prop-types": "^15.7.2",
     "react-test-renderer": "^17.0.1",
-    "rollup": "^2.38.4",
+    "rollup": "^2.39.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
@@ -61,7 +63,7 @@
   },
   "scripts": {
     "start": "start-storybook -p 6006",
-    "build": "NODE_ENV=production rollup -c",
+    "build": "rm -rf build && rollup -c",
     "reinstall-force": "rm -f yarn.lock && rm -Rf node_modules && yarn",
     "upgrade-patch": "yarn build && yarn reinstall-force && git add . && git commit -m \"$MSG\" && npm config set tag-version-prefix '' && npm version patch -m \"$MSG\" && git push && git push --tags",
     "upgrade-minor": "yarn build && yarn reinstall-force && git add . && git commit -m \"$MSG\" && npm config set tag-version-prefix '' && npm version minor -m \"$MSG\" && git push && git push --tags",
@@ -74,9 +76,5 @@
       ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
     }
   },
-  "main": "build/index.js",
-  "module": "build/index.es.js",
-  "files": [
-    "build"
-  ]
+  "main": "build/index.js"
 }

package/rollup.config.js

@@ -0,0 +1,50 @@
+import resolve from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import commonjs from '@rollup/plugin-commonjs';
+import sass from 'node-sass';
+import postcss from 'rollup-plugin-postcss';
+import autoprefixer from 'autoprefixer';
+import packageJson from './package.json';
+
+export default {
+  input: 'src/index.js', // All of your library files will be named exports from here
+  output: [
+    {
+      // This is an easy way to keep your `main` in sync between rollup & the package
+      file: packageJson.main,
+      format: 'cjs',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    // This prevents needing an additional `external` prop in this config file by automaticall excluding peer dependencies
+    peerDepsExternal(),
+    // Convert CommonJS modules to ES6
+    commonjs({
+      include: 'node_modules/**',
+    }),
+    // "...locates modules using the Node resolution algorithm"
+    resolve(),
+    // Do Babel transpilation
+    babel({
+      exclude: 'node_modules/**',
+      babelHelpers: 'bundled',
+    }),
+    // Does a number of things; Compiles sass, run autoprefixer, creates a sourcemap, and saves a .css file
+    postcss({
+      preprocessor: (content, id) =>
+        new Promise((res) => {
+          const result = sass.renderSync({ file: id });
+
+          res({ code: result.css.toString() });
+        }),
+      plugins: [autoprefixer],
+      modules: {
+        scopeBehaviour: 'global',
+      },
+      sourceMap: true,
+      extract: true,
+    }),
+  ],
+};

package/src/components/atoms/Button/Button.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './Button.scss';
+
+export const Button = ({ message = 'Hello world' }) => <button className='primary'>{message}</button>;
+
+Button.propTypes = {
+  message: PropTypes.string,
+};

package/src/components/atoms/Button/Button.scss

@@ -0,0 +1,4 @@
+.primary {
+    background-color: blue;
+    color: white;
+}

package/src/components/atoms/Button/__stories__/Button.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Button } from '../Button';
+
+export default {
+  component: Button,
+  title: 'Atoms/Button',
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  message: 'Default',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  message: 'Secondary',
+};

package/src/components/atoms/Button/__tests__/Button.test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+import { Button } from '../Button';
+
+afterEach(cleanup);
+
+it('render component Button with label', () => {
+  const { getByText } = render(<Button message='Kappa' />);
+  expect(getByText('Kappa')).toBeTruthy();
+});

package/src/index.js

@@ -0,0 +1,3 @@
+import { Button } from './components/atoms/Button/Button';
+
+export { Button };

package/build/index.es.js

@@ -1,4 +0,0 @@
-const { Button } = './components/atoms/Button';
-
-export { Button };
-//# sourceMappingURL=index.es.js.map

package/build/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","sources":["../src/index.js"],"sourcesContent":["const { Button } = './components/atoms/Button';\nexport { Button };\n"],"names":[],"mappings":"AAAK,MAAC,EAAE,MAAM,EAAE,GAAG;;;;"}