build(forma-36-react-components): build with tsdx

contentful · Nov 6, 2020 · e599909 · e599909
1 parent 6380525
commit e599909
Show file tree

Hide file tree

Showing 15 changed files with 1,640 additions and 2,363 deletions.
diff --git a/package.json b/package.json
@@ -8,9 +8,7 @@
       "packages/components/*"
     ],
     "nohoist": [
-      "@contentful/forma-36-fcss/node-sass-import",
-      "**/tsdx",
-      "**/tsdx/**"
+      "@contentful/forma-36-fcss/node-sass-import"
     ]
   },
   "devDependencies": {

diff --git a/packages/forma-36-react-components/.babelrc b/packages/forma-36-react-components/.babelrc
diff --git a/packages/forma-36-react-components/.size-limit b/packages/forma-36-react-components/.size-limit
diff --git a/packages/forma-36-react-components/package.json b/packages/forma-36-react-components/package.json
@@ -3,20 +3,47 @@
   "description": "Contentful UI Component Library",
   "version": "3.64.0",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/forma-36-react-components.esm.js",
   "style": "dist/styles.css",
   "license": "MIT",
   "types": "dist/index.d.ts",
   "files": [
-    "package.json",
-    "dist"
-  ],
-  "sideEffects": [
-    "*.css"
+    "dist",
+    "src"
   ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "analyze": "size-limit --why",
+    "build-storybook": "build-storybook",
+    "build": "tsdx build --entry src/index.ts --entry src/alpha.ts && yarn post-build",
+    "generate": "yarn plop --plopfile ./tools/plopfile.js",
+    "lint": "tsdx lint",
+    "post-build": "node ./tools/postBuild.js",
+    "semantic-release": "semantic-release",
+    "size": "size-limit",
+    "start": "start-storybook -p 9001 -c ./tools/.storybook -s ./tools/.storybook/public",
+    "storybook": "yarn build-storybook -c tools/.storybook -s ./tools/.storybook/public -o dist-storybook",
+    "test": "tsdx test --passWithNoTests"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.4.4",
+    "classnames": "^2.2.6",
+    "dayjs": "^1.9.1",
+    "react-animate-height": "^2.0.7",
+    "react-copy-to-clipboard": "^5.0.1",
+    "react-modal": "^3.11.2",
+    "react-popper": "^2.2.3",
+    "react-transition-group": "^2.4.0",
+    "truncate": "^2.0.1"
+  },
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
+    "@babel/core": "^7.12.3",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
     "@babel/plugin-transform-runtime": "^7.2.0",
@@ -30,39 +57,25 @@
     "@storybook/addon-essentials": "^6.0.28",
     "@storybook/addon-knobs": "^6.0.28",
     "@storybook/addon-storysource": "^6.0.28",
+    "@storybook/addons": "^6.0.28",
     "@storybook/react": "6.0.28",
     "@storybook/theming": "^6.0.28",
+    "@svgr/rollup": "^5.4.0",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@types/classnames": "2.2.7",
-    "@types/enzyme": "^3.10.7",
+    "@types/enzyme": "3.9.1",
     "@types/jest": "^24.0.25",
-    "@types/jest-axe": "^3.5.1",
+    "@types/jest-axe": "^3.2.1",
     "@types/react": "16.8.6",
     "@types/react-color": "^3.0.1",
     "@types/react-copy-to-clipboard": "4.2.6",
-    "@types/react-dom": "16.8.4",
+    "@types/react-dom": "^16.9.8",
     "@types/react-transition-group": "2.0.15",
-    "@types/storybook__react": "5.2.1",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
-    "@typescript-eslint/parser": "^1.13.0",
-    "babel-jest": "^24.1.0",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-css-modules-transform": "^1.6.2",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-inline-react-svg": "^1.1.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "babel-plugin-typescript-to-proptypes": "0.17.1",
-    "css-loader": "^1.0.1",
-    "cz-conventional-changelog": "^2.1.0",
+    "babel-loader": "^8.1.0",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.5",
-    "eslint": "5.16.0",
-    "eslint-config-dev": "2.0.0",
-    "eslint-config-prettier": "4.2.0",
-    "eslint-plugin-import": "2.17.2",
     "eslint-plugin-jest": "22.5.1",
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-prettier": "^3.1.4",
@@ -73,73 +86,22 @@
     "jest": "^24.9.0",
     "jest-axe": "^3.2.0",
     "markdown-it": "^8.4.2",
-    "mini-css-extract-plugin": "^0.7.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
     "plop": "^2.5.3",
-    "postcss": "^7.0.5",
-    "postcss-copy-assets": "^0.3.1",
     "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-url": "^8.0.0",
-    "react-docgen-typescript-loader": "3.1.0",
-    "react-test-renderer": "^16.8.3",
-    "rollup": "^1.8.0",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.3.0",
-    "rollup-plugin-local-resolve": "^1.0.7",
-    "rollup-plugin-node-resolve": "^4.0.1",
-    "rollup-plugin-replace": "^2.1.1",
-    "rollup-plugin-terser": "^4.0.4",
-    "semantic-release": "^15.14.0",
-    "size-limit": "^4.5.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
+    "rollup-plugin-postcss": "^3.1.8",
+    "size-limit": "^4.6.2",
     "storybook-addon-jsx": "^7.3.4",
     "storybook-prop-types-addon": "1.0.2",
     "style-loader": "^0.23.1",
     "travis-deploy-once": "^4.4.1",
-    "typescript": "3.9.7",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.5"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.3.4",
-    "@popperjs/core": "^2.4.4",
-    "classnames": "^2.2.6",
-    "dayjs": "^1.9.1",
-    "react-animate-height": "^2.0.7",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-modal": "^3.11.2",
-    "react-popper": "^2.2.3",
-    "react-transition-group": "^2.4.0",
-    "truncate": "^2.0.1"
-  },
-  "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
-  },
-  "scripts": {
-    "start": "start-storybook -p 9001 -c ./tools/.storybook -s ./tools/.storybook/public",
-    "test": "jest",
-    "build:clean": "rm -rf dist esm",
-    "build:scripts": "BABEL_ENV=build yarn babel src --out-dir dist --ignore 'src/**/*.stories.js','src/**/*.stories.tsx','src/**/*.test.tsx','src/**/*.test.js','src/**/*.css.d.ts' --extensions '.ts','.tsx','.js'",
-    "build:esm": "BABEL_ENV=esm yarn babel src --out-dir esm --ignore 'src/**/*.stories.js','src/**/*.stories.tsx','src/**/*.test.tsx','src/**/*.test.js','src/**/*.css.d.ts' --extensions '.ts','.tsx','.js' && rollup -c tools/rollup.esm.config.js && rm -rf esm",
-    "build:styles": "yarn webpack --config ./tools/webpack.production.config.js",
-    "build:umd": "rollup -c tools/rollup.umd.config.js",
-    "build:types": "tsc --emitDeclarationOnly",
-    "build:post-clean": "rm -rf dist/styles.js dist/main.js",
-    "build": "yarn build:clean && yarn build:scripts && yarn build:esm && yarn build:styles && yarn build:types && yarn build:umd && yarn size && yarn build:post-clean",
-    "size": "size-limit",
-    "generate": "yarn plop --plopfile ./tools/plopfile.js",
-    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint": "yarn eslint",
-    "add-component": "yarn generate component",
-    "add-documentation": "yarn generate documentation",
-    "prepublishOnly": "yarn lint && yarn test && yarn build",
-    "travis-deploy-once": "travis-deploy-once --pro",
-    "type-check": "tsc --noEmit",
-    "type-check:watch": "npm run type-check -- --watch",
-    "semantic-release": "semantic-release",
-    "storybook": "yarn build-storybook -c tools/.storybook -s ./tools/.storybook/public -o dist-storybook"
+    "tsdx": "^0.14.1",
+    "tslib": "^2.0.3",
+    "typescript": "3.9.7"
   },
   "jest": {
     "globalSetup": "<rootDir>/test/config/globalSetup.js",
@@ -160,6 +122,24 @@
       "enzyme-to-json/serializer"
     ]
   },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "name": "gzipped js",
+      "gzip": false,
+      "limit": "376 KB",
+      "ignore": [
+        "react",
+        "react-dom"
+      ]
+    },
+    {
+      "path": "dist/styles.css",
+      "name": "gzipped css",
+      "limit": "75 KB",
+      "gzip": false
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/contentful/forma-36.git"

diff --git a/packages/forma-36-react-components/src/components/Notification/index.tsx b/packages/forma-36-react-components/src/components/Notification/index.tsx
@@ -37,21 +37,21 @@ function createRoot(callback: () => void) {
   render(<NotificationManager register={registerAPI} />, container, callback);
 }
 
-const afterInit = (fn: Function) => {
+function afterInit<PromiseValueType>(fn: Function) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (...args: any[]) => {
     if (!initiated) {
       initiated = true;
-      return new Promise((resolve) => {
+      return new Promise<PromiseValueType>((resolve) => {
         createRoot(() => {
           resolve(fn(...args));
         });
       });
     } else {
-      return Promise.resolve(fn(...args));
+      return Promise.resolve<PromiseValueType>(fn(...args));
     }
   };
-};
+}
 
 const show = (intent: NotificationIntent) => (
   text: string,
@@ -91,25 +91,27 @@ export const Notification: {
   setPosition: SetPositionAction<Promise<void>>;
   setDuration: SetDurationAction<Promise<void>>;
 } = {
-  success: afterInit(show('success')),
-  error: afterInit(show('error')),
-  warning: afterInit(show('warning')),
-  close: afterInit((id: string | number) => {
+  success: afterInit<NotificationType>(show('success')),
+  error: afterInit<NotificationType>(show('error')),
+  warning: afterInit<NotificationType>(show('warning')),
+  close: afterInit<void>((id: string | number) => {
     if (internalAPI.close) {
       return internalAPI.close(id);
     }
   }),
-  closeAll: afterInit(() => {
+  closeAll: afterInit<void>(() => {
     if (internalAPI.closeAll) {
       return internalAPI.closeAll();
     }
   }),
-  setPosition: afterInit((position: Position, params?: { offset: number }) => {
-    if (internalAPI.setPosition) {
-      return internalAPI.setPosition(position, params);
-    }
-  }),
-  setDuration: afterInit((duration: number) => {
+  setPosition: afterInit<void>(
+    (position: Position, params?: { offset: number }) => {
+      if (internalAPI.setPosition) {
+        return internalAPI.setPosition(position, params);
+      }
+    },
+  ),
+  setDuration: afterInit<void>((duration: number) => {
     if (internalAPI.setDuration) {
       return internalAPI.setDuration(duration);
     }

diff --git a/packages/forma-36-react-components/test/config/tests.js b/packages/forma-36-react-components/test/config/tests.js
@@ -1,9 +1,9 @@
 /* eslint-disable no-console, prefer-destructuring */
 
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import { toHaveNoViolations } from 'jest-axe';
-import '@babel/polyfill';
+const { configure } = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+const { toHaveNoViolations } = require('jest-axe');
+require('@babel/polyfill');
 
 configure({ adapter: new Adapter() });