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

contentful · Nov 16, 2020 · c255c7a · c255c7a
1 parent d14d35a
commit c255c7a
Show file tree

Hide file tree

Showing 421 changed files with 4,561 additions and 3,618 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": {
@@ -41,7 +39,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "yarn pretty-quick --staged",
-      "pre-push": "yarn lint && yarn type-check && yarn test",
+      "pre-push": "yarn lint && yarn test",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   }

diff --git a/packages/components/forma-36-react-datepicker/package.json b/packages/components/forma-36-react-datepicker/package.json
@@ -21,11 +21,6 @@
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
   "prettier": {
     "printWidth": 80,
     "semi": true,
@@ -38,11 +33,11 @@
     "@testing-library/react": "^9.3.2",
     "@types/jest": "^24.0.21",
     "@types/pikaday": "^1.7.4",
+    "eslint-plugin-prettier": "^3.1.4",
     "date-fns": "^2.6.0",
-    "husky": "^3.0.9",
-    "tsdx": "^0.11.0",
-    "tslib": "^1.10.0",
-    "typescript": "^3.6.4"
+    "tsdx": "^0.14.1",
+    "tslib": "^2.0.3",
+    "typescript": "3.9.7"
   },
   "dependencies": {
     "emotion": "^10.0.23",

diff --git a/packages/components/forma-36-react-datepicker/tsconfig.json b/packages/components/forma-36-react-datepicker/tsconfig.json
@@ -7,7 +7,7 @@
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
-    "rootDir": "./",
+    "rootDir": "./src",
     "strict": true,
     "noImplicitAny": true,
     "strictNullChecks": true,

diff --git a/packages/components/forma-36-react-timepicker/package.json b/packages/components/forma-36-react-timepicker/package.json
@@ -20,11 +20,6 @@
     "react": ">=16.8",
     "react-dom": ">=16.8"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
-  },
   "devDependencies": {
     "@contentful/forma-36-react-components": "^3.65.3",
     "@contentful/forma-36-tokens": "^0.9.2",
@@ -34,11 +29,11 @@
     "@types/jest": "^24.0.22",
     "@types/lodash.orderby": "^4.6.6",
     "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.9.3",
-    "husky": "^3.0.9",
-    "tsdx": "^0.11.0",
-    "tslib": "^1.10.0",
-    "typescript": "^3.6.4"
+    "@types/react-dom": "^16.9.8",
+    "eslint-plugin-prettier": "^3.1.4",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.0.3",
+    "typescript": "3.9.7"
   },
   "dependencies": {
     "date-fns": "^2.9.0",

diff --git a/packages/components/forma-36-react-timepicker/tsconfig.json b/packages/components/forma-36-react-timepicker/tsconfig.json
@@ -7,7 +7,7 @@
     "importHelpers": true,
     "declaration": true,
     "sourceMap": true,
-    "rootDir": "./",
+    "rootDir": "./src",
     "strict": true,
     "noImplicitAny": true,
     "strictNullChecks": true,

diff --git a/packages/forma-36-react-components/.babelrc b/packages/forma-36-react-components/.babelrc
diff --git a/packages/forma-36-react-components/jest.config.js b/packages/forma-36-react-components/jest.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  globalSetup: '<rootDir>/src/test/config/globalSetup.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test/config/tests.ts'],
+  testPathIgnorePatterns: [
+    '<rootDir>/node_modules/',
+    '<rootDir>/dist/',
+    '<rootDir>/dist-storybook/',
+    '<rootDir>/tools/',
+  ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/test/__mocks__/fileMock.js',
+    '\\.css': 'identity-obj-proxy',
+  },
+};
diff --git a/packages/forma-36-react-components/package.json b/packages/forma-36-react-components/package.json
@@ -3,155 +3,109 @@
   "description": "Contentful UI Component Library",
   "version": "3.65.3",
   "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"
+    "dist",
+    "src"
   ],
   "sideEffects": [
     "*.css"
   ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "add-component": "yarn generate component",
+    "add-documentation": "yarn generate documentation",
+    "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",
+    "prepublishOnly": "yarn lint && yarn test && yarn build",
+    "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",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "yarn type-check --watch"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6 || ^17.0.0",
+    "react-dom": "^16.8.6 || ^17.0.0"
+  },
+  "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/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
-    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/core": "^7.12.3",
     "@babel/polyfill": "7.2.5",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "7.3.3",
     "@contentful/forma-36-fcss": "^0.2.12",
     "@contentful/forma-36-tokens": "^0.9.2",
+    "@rollup/plugin-url": "^5.0.1",
     "@size-limit/preset-big-lib": "^4.5.5",
     "@storybook/addon-a11y": "^6.0.28",
     "@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/dom": "^7.26.6",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.2.0",
     "@types/classnames": "2.2.7",
     "@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-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",
+    "babel-loader": "^8.1.0",
     "css-loader": "^1.0.1",
     "cz-conventional-changelog": "^2.1.0",
-    "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-jest-dom": "^3.2.4",
-    "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "7.13.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.10.0",
-    "file-loader": "^3.0.1",
     "identity-obj-proxy": "^3.0.0",
     "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",
-    "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",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
+    "rollup-plugin-postcss": "^3.1.8",
     "semantic-release": "^15.14.0",
     "size-limit": "^4.5.5",
     "storybook-addon-jsx": "^7.3.4",
     "storybook-prop-types-addon": "1.0.2",
     "style-loader": "^0.23.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 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0"
-  },
-  "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",
-    "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"
-  },
-  "jest": {
-    "globalSetup": "<rootDir>/test/config/globalSetup.js",
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/config/tests.ts"
-    ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/",
-      "<rootDir>/dist/",
-      "<rootDir>/dist-storybook/",
-      "<rootDir>/tools/"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
-      "\\.css": "identity-obj-proxy"
-    }
+    "tsdx": "^0.14.1",
+    "tslib": "^2.0.3",
+    "typescript": "3.9.7"
   },
   "repository": {
     "type": "git",

diff --git a/packages/forma-36-react-components/src/components/Accordion/Accordion.stories.tsx b/packages/forma-36-react-components/src/components/Accordion/Accordion.stories.tsx
@@ -48,10 +48,10 @@ export const basic = ({ align, ...args }: AccordionProps) => (
 );
 basic.args = {
   align: 'end',
-  ['AccordionItem Title #1']: 'Accordion I',
-  ['AccordionItem Content #1']: defaultText,
-  ['AccordionItem Title #2']: 'Accordion II',
-  ['AccordionItem Content #2']: defaultText,
-  ['AccordionItem Title #3']: 'Accordion III',
-  ['AccordionItem Content #3']: defaultText,
+  'AccordionItem Title #1': 'Accordion I',
+  'AccordionItem Content #1': defaultText,
+  'AccordionItem Title #2': 'Accordion II',
+  'AccordionItem Content #2': defaultText,
+  'AccordionItem Title #3': 'Accordion III',
+  'AccordionItem Content #3': defaultText,
 };
diff --git a/packages/forma-36-react-components/src/components/Accordion/AccordionItem/AccordionItem.tsx b/packages/forma-36-react-components/src/components/Accordion/AccordionItem/AccordionItem.tsx
@@ -31,7 +31,6 @@ export interface AccordionItemProps {
    * A function to be called when the accordion item is closed
    */
   onCollapse?: Function;
-
 }
 
 const defaultProps: AccordionItemProps = {
@@ -53,13 +52,13 @@ export const AccordionItem: FC<AccordionItemProps> = ({
 
   const onClick = () => {
     if (!isExpanded && onExpand) {
-      onExpand()
+      onExpand();
     }
-     if (isExpanded && onCollapse) {
-      onCollapse()
+    if (isExpanded && onCollapse) {
+      onCollapse();
     }
 
-    setIsExpanded(!isExpanded)
+    setIsExpanded(!isExpanded);
   };
 
   return (