@transferwise/components 38.3.1 → 39.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "38.3.1",
+  "version": "39.0.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "main": "./build/umd/polyfill/main.js",
@@ -12,7 +12,7 @@
   ],
   "files": [
     "build",
-    "bin",
+    "scripts",
     "upgrades"
   ],
   "repository": {
@@ -41,7 +41,7 @@
     "test": "jest --env=jsdom --maxWorkers=4 --config=../../node_modules/@transferwise/test-config/jest.config.js",
     "test:watch": "jest --watch --env=jsdom --config=../../node_modules/@transferwise/test-config/jest.config.js",
     "lint": "jest --maxWorkers=4 --config ../../node_modules/@transferwise/test-config/test/jest.lint.js && yarn lintless",
-    "test:visual": "build-storybook && percy-storybook --widths=1280",
+    "test:visual": "build-storybook && percy storybook ./storybook-static",
     "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
     "lintless": "stylelint --allow-empty-input './src/**/*.less'",
     "lintless:fix": "yarn lintless --fix"
@@ -59,20 +59,21 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@formatjs/cli": "^4.2.31",
-    "@percy/storybook": "^3.3.1",
-    "@pxblue/storybook-rtl-addon": "^1.0.0",
+    "@percy/cli": "1.0.0-beta.63",
+    "@percy/storybook": "~4.0.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@transferwise/icons": "^2.12.0",
     "@transferwise/less-config": "^3.0.2",
-    "@transferwise/neptune-css": "^11.0.1",
-    "@transferwise/neptune-tokens": "^1.0.0",
-    "@transferwise/test-config": "^4.0.3",
+    "@transferwise/neptune-css": "^12.0.0",
+    "@transferwise/neptune-tokens": "6.1.0",
+    "@transferwise/test-config": "^5.0.0",
     "@types/jest": "^26.0.20",
     "@types/jscodeshift": "^0.11.0",
     "@types/node": "^14.14.31",
+    "@types/react-transition-group": "4.4.4",
     "babel-loader": "^8.1.0",
     "babel-plugin-react-intl": "^8.2.16",
     "babel-preset-minify": "^0.5.1",
@@ -87,7 +88,7 @@
   },
   "peerDependencies": {
     "@transferwise/icons": "^2.12.0",
-    "@transferwise/neptune-css": "^11",
+    "@transferwise/neptune-css": "^12",
     "currency-flags": "^2.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.14 || ^17",
@@ -99,7 +100,7 @@
     "@formatjs/intl-locale": "^2.4.14",
     "@popperjs/core": "^2.6.0",
     "@transferwise/formatting": "^2.1.0",
-    "@transferwise/neptune-validation": "^3.0.3",
+    "@transferwise/neptune-validation": "^3.0.4",
     "@types/react-transition-group": "4.4.4",
     "classnames": "^2.2.6",
     "commonmark": "0.29.1",
@@ -115,7 +116,7 @@
     "react-popper": "^2.2.4",
     "react-required-if": "^1.0.3",
     "react-spring": "^8.0.27",
-    "react-transition-group": "^4.2.1"
+    "react-transition-group": "^4.4.2"
   },
   "watch": {
     "build:crowdin-source-file": "src/**/*.messages.js"
@@ -123,5 +124,5 @@
   "resolutions": {
     "@storybook/**/kind-of": "^6.0.3"
   },
-  "gitHead": "0f307302a6980a4681a2bcd656ed302e675b8c20"
+  "gitHead": "cae0d8e25621aabda6ff9bb5540f5f29bcdd95a4"
 }

package/scripts/generate-type-declarations.js

@@ -0,0 +1,85 @@
+const fs = require('fs');
+
+const { generateFromFile } = require('react-to-typescript-definitions');
+
+/**
+ * dir where we would place generated `.d.ts` files
+ * (same folder as we specifing in `tsconfig.json` via `declarationDir`)
+ */
+const typesDistFolder = 'build/types';
+
+/**
+ * list of JS files that uses prop-types (basically React components)
+ * and that are exposed from `@transferwise/components` library
+ */
+const jsFiles = [
+  { filename: 'Provider', folder: 'provider' },
+  { filename: 'Checkbox', folder: 'checkbox' },
+  { filename: 'CheckboxButton', folder: 'checkboxButton' },
+  { filename: 'Radio', folder: 'radio' },
+  { filename: 'Select', folder: 'select' },
+  { filename: 'MoneyInput', folder: 'moneyInput' },
+  { filename: 'Stepper', folder: 'stepper' },
+  { filename: 'FlowNavigation', folder: 'flowNavigation' },
+  { filename: 'Popover', folder: 'popover' },
+  { filename: 'Money', folder: 'money' },
+  { filename: 'Modal', folder: 'modal' },
+  { filename: 'RadioOption', folder: 'radioOption' },
+  { filename: 'CheckboxOption', folder: 'checkboxOption' },
+  { filename: 'NavigationOption', folder: 'navigationOption' },
+  { filename: 'NavigationOptionsList', folder: 'navigationOptionsList' },
+  { filename: 'DateLookup', folder: 'dateLookup' },
+  { filename: 'PhoneNumberInput', folder: 'phoneNumberInput' },
+  { filename: 'DateInput', folder: 'dateInput' },
+  { filename: 'InstructionsList', folder: 'instructionsList' },
+  { filename: 'ProcessIndicator', folder: 'processIndicator' },
+  { filename: 'Upload', folder: 'upload' },
+  { filename: 'DefinitionList', folder: 'definitionList' },
+  { filename: 'DynamicFieldDefinitionList', folder: 'dynamicFieldDefinitionList' },
+  { filename: 'Avatar', folder: 'avatar' },
+  { filename: 'Button', folder: 'button' },
+  { filename: 'CircularButton', folder: 'circularButton' },
+  { filename: 'Info', folder: 'info' },
+  { filename: 'RadioGroup', folder: 'radioGroup' },
+  { filename: 'Alert', folder: 'alert' },
+  { filename: 'InputWithDisplayFormat', folder: 'inputWithDisplayFormat' },
+  { filename: 'TextareaWithDisplayFormat', folder: 'textareaWithDisplayFormat' },
+  { filename: 'Chevron', folder: 'chevron' },
+  { filename: 'Accordion', folder: 'accordion' },
+  { filename: 'SlidingPanel', folder: 'slidingPanel' },
+  { filename: 'Drawer', folder: 'drawer' },
+  { filename: 'Sticky', folder: 'sticky' },
+  { filename: 'Typeahead', folder: 'typeahead' },
+  { filename: 'Snackbar', folder: 'snackbar' },
+  { filename: 'SnackbarProvider', folder: 'snackbar' },
+  { filename: 'Tabs', folder: 'tabs' },
+  { filename: 'OverlayHeader', folder: 'overlayHeader' },
+  { filename: 'Image', folder: 'image' },
+  { filename: 'Markdown', folder: 'markdown' },
+  { filename: 'Card', folder: 'card' },
+  { filename: 'Summary', folder: 'summary' },
+  { filename: 'Decision', folder: 'decision' },
+  { filename: 'Nudge', folder: 'nudge' },
+  { filename: 'InlineAlert', folder: 'inlineAlert' },
+  { filename: 'AvatarWrapper', folder: 'avatarWrapper' },
+  { filename: 'Logo', folder: 'logo' },
+];
+
+jsFiles.forEach(({ filename, folder }) => {
+  const filePath = `${folder}/${filename}`;
+
+  // generate types declration content
+  let fileTypeDeclrationContent = null;
+  try {
+    fileTypeDeclrationContent = generateFromFile(null, `src/${filePath}.js`, {
+      babylonPlugins: ['optionalChaining', 'nullishCoalescingOperator'],
+    });
+  } catch (error) {
+    /* eslint-disable no-console */
+    console.log(`Error while generating types for '${filePath}'`);
+    throw error;
+  }
+
+  // write content into .d.ts files
+  fs.writeFileSync(`${typesDistFolder}/${filePath}.d.ts`, fileTypeDeclrationContent);
+});