@transferwise/components 0.0.0-experimental-463fe0b

package/package.json

@@ -0,0 +1,161 @@
+{
+  "name": "@transferwise/components",
+  "version": "0.0.0-experimental-463fe0b",
+  "description": "Neptune React components",
+  "license": "Apache-2.0",
+  "main": "./build/umd/polyfill/main.js",
+  "module": "./build/es/polyfill/index.js",
+  "types": "./build/types/index.d.ts",
+  "style": "./build/main.css",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "build",
+    "scripts",
+    "upgrades"
+  ],
+  "repository": {
+    "type": "git",
+    "fullname": "transferwise/neptune",
+    "url": "git+https://github.com/transferwise/neptune-web.git"
+  },
+  "bin": {
+    "neptune-upgrade-util": "scripts/neptune-upgrader.js"
+  },
+  "devDependencies": {
+    "@formatjs/cli": "^4.8.3",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-image": "^3.0.1",
+    "@rollup/plugin-json": "^4.0.3",
+    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@storybook/addon-a11y": "^7.0.6",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-knobs": "^7.0.0",
+    "@storybook/addon-viewport": "^7.0.6",
+    "@storybook/addons": "^7.0.0",
+    "@storybook/api": "^7.0.0",
+    "@storybook/components": "^7.0.0",
+    "@storybook/core-events": "^7.0.0",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.0",
+    "@testing-library/dom": "^7.21.4",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@transferwise/icons": "^3.2.3",
+    "@transferwise/neptune-tokens": "^8.4.0",
+    "@types/jest": "^26.0.20",
+    "@types/jscodeshift": "^0.11.0",
+    "@types/node": "^14.14.31",
+    "@types/react-transition-group": "4.4.5",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@wise/art": "^2.0.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "babel-plugin-inline-react-svg": "^2.0.1",
+    "enzyme": "^3.11.0",
+    "html-loader": "^1.3.2",
+    "jest": "^27.0.6",
+    "jest-cli": "^27.0.6",
+    "jest-fetch-mock": "^3.0.3",
+    "lodash.times": "^4.3.2",
+    "npm-watch": "^0.11.0",
+    "react-intl": "^5.10.0",
+    "rollup": "^2.34.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "storybook": "^7.0.6",
+    "@transferwise/less-config": "3.0.6",
+    "@transferwise/neptune-css": "0.0.0-experimental-463fe0b",
+    "@wise/components-theming": "0.7.5"
+  },
+  "peerDependencies": {
+    "@transferwise/icons": "^3.2.3",
+    "@transferwise/neptune-css": "0.0.0-experimental-463fe0b",
+    "@wise/art": "^2",
+    "@wise/components-theming": "0.5 - 0.7",
+    "currency-flags": "^4.0.2",
+    "prop-types": "^15.7.2",
+    "react": ">=16.14",
+    "react-dom": ">=16.14",
+    "react-intl": "^5.10.0 || ^6"
+  },
+  "peerDependenciesMeta": {
+    "currency-flags": {
+      "optional": true
+    },
+    "prop-types": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.18.3",
+    "@formatjs/intl-locale": "^2.4.14",
+    "@popperjs/core": "^2.6.0",
+    "@react-spring/web": "~9.6.1",
+    "@transferwise/formatting": "^2.1.0",
+    "@transferwise/neptune-validation": "^3.0.12",
+    "classnames": "^2.2.6",
+    "commonmark": "0.29.1",
+    "core-js": "^3.8.0",
+    "inquirer": "^8.1.1",
+    "inquirer-file-tree-selection-prompt": "^1.0.7",
+    "jscodeshift": "^0.11.0",
+    "lodash.clamp": "^4.0.3",
+    "lodash.debounce": "^4.0.8",
+    "lodash.difference": "^4.5.0",
+    "lodash.throttle": "^4.1.1",
+    "lodash.topairs": "^4.3.0",
+    "react-merge-refs": "^1.1.0",
+    "react-popper": "^2.2.4",
+    "react-required-if": "^1.0.3",
+    "react-transition-group": "^4.4.2"
+  },
+  "watch": {
+    "build:crowdin-source-file": "src/**/*.messages.js"
+  },
+  "resolutions": {
+    "**/remark-parse/trim": "0.0.3",
+    "**/chokidar/glob-parent": "5.1.2",
+    "**/fast-glob/glob-parent": "5.1.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "npm-run-all --parallel dev:*",
+    "dev:watch-less": "gulp watchLess --dest=src",
+    "dev:translations": "npx npm-watch",
+    "sb:dev": "storybook dev -p 3001",
+    "sb:build": "storybook build",
+    "build-css": "gulp compileLess --dest=src",
+    "build": "npm-run-all build:*",
+    "build:clean": "rm -rf lib build",
+    "build:crowdin-source-file": "formatjs extract 'src/**/*.messages.+(js|ts|tsx)' --out-file src/i18n/en.json --format simple && prettier --find-config-path --write src/i18n/*.json",
+    "build:es": "NODE_ENV=es babel src --extensions '.tsx,.js,.ts' -d build/es/polyfill --ignore '**/*.spec.js','**/*.story.js','**/__mocks__','**/test-utils'",
+    "build:es-nopolyfill": "NODE_ENV=es-nopolyfill babel src --extensions '.tsx,.js,.ts' -d build/es/no-polyfill --ignore '**/*.spec.js','**/*.story.js','**/__mocks__','**/test-utils'",
+    "build:umd": "NODE_ENV=umd rollup -c",
+    "build:umd-nopolyfill": "NODE_ENV=umd-nopolyfill rollup -c",
+    "build:generate-types": "tsc && node ./scripts/generate-type-declarations.js",
+    "build:copy-files": "cpx 'src/**/!(db)/*.{json,svg}' build/es/polyfill & cpx 'src/**/!(db)/*.{json,svg}' build/es/no-polyfill",
+    "build:copy-css": "cpx 'src/main.css' build/ & cpx 'src/**/*.css' build/styles/",
+    "build:copy-lang": "cpx 'src/i18n/*.json' build/i18n && cpx 'src/i18n/index.js' build/i18n",
+    "docs": "pnpm build",
+    "test": "jest --env=jsdom --maxWorkers=4",
+    "test:watch": "jest --watch --env=jsdom",
+    "test:visual": "build-storybook && percy storybook ./storybook-static",
+    "lint": "pnpm run lint:check",
+    "lint:check": "npm-run-all --parallel lint:check:*",
+    "lint:check:format": "prettier --check --ignore-path ../../.prettierignore . || echo \"Prettier failed. Remove this to make this a failure\"",
+    "lint:check:js+ts": "eslint --ext .js,.jsx,.mjs,.ts,.tsx,.mts --ignore-path ../../.gitignore .",
+    "lint:check:types": "tsc --noEmit --emitDeclarationOnly false",
+    "lint:fix": "npm-run-all --serial lint:fix:*",
+    "lint:fix:format": "prettier --write --ignore-path ../../.prettierignore .",
+    "lint:fix:js+ts": "pnpm run lint:check:js+ts --fix"
+  }
+}

package/scripts/generate-type-declarations.js

@@ -0,0 +1,79 @@
+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: '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: 'RadioOption', folder: 'radioOption' },
+  { filename: 'NavigationOptionsList', folder: 'navigationOptionsList' },
+  { filename: 'DateLookup', folder: 'dateLookup' },
+  { filename: 'PhoneNumberInput', folder: 'phoneNumberInput' },
+  { filename: 'DateInput', folder: 'dateInput' },
+  { filename: 'ProcessIndicator', folder: 'processIndicator' },
+  { filename: 'Upload', folder: 'upload' },
+  { filename: 'DefinitionList', folder: 'definitionList' },
+  { filename: 'DynamicFieldDefinitionList', folder: 'dynamicFieldDefinitionList' },
+  { filename: 'Avatar', folder: 'avatar' },
+  { 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);
+});

package/scripts/neptune-upgrader.js

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+const { exec } = require('child_process');
+const path = require('path');
+
+const inquirer = require('inquirer');
+const inquirerFileTreeSelection = require('inquirer-file-tree-selection-prompt');
+
+inquirer.registerPrompt('file-tree-selection', inquirerFileTreeSelection);
+
+const IGNORE_PATTERN = '**/node_modules/*';
+const EXTENSIONS = {
+  JS: 'js & jsx',
+  TSX: 'tsx',
+  BOTH: 'js,jsx & tsx',
+};
+
+const fetchSettings = () => {
+  const questions = [
+    {
+      name: 'transform',
+      type: 'file-tree-selection',
+      root: path.join(__dirname, '../upgrades'),
+      message: '✨ Which upgrade would you like to run?',
+    },
+    {
+      type: 'list',
+      name: 'extension',
+      message: '✨ What file extensions should I look at?',
+      choices: Object.values(EXTENSIONS),
+    },
+    {
+      name: 'files',
+      type: 'file-tree-selection',
+      onlyShowDir: true,
+      root: process.cwd(),
+      message: '✨ And what directory would you like to transform?',
+    },
+  ];
+  return inquirer.prompt(questions);
+};
+
+const fetchOptions = () => {
+  const questions = [
+    {
+      name: 'dry',
+      type: 'confirm',
+      message: '✨ Dry run? (no changes are made to files)',
+    },
+    {
+      name: 'verbose',
+      type: 'confirm',
+      message: '✨ Extra logging?',
+      default: false,
+    },
+  ];
+  return inquirer.prompt(questions);
+};
+
+const okToProceed = () => {
+  const questions = [
+    {
+      name: 'confirm',
+      type: 'confirm',
+      message: 'Does everything look ok?',
+    },
+  ];
+  return inquirer.prompt(questions);
+};
+
+const run = async () => {
+  const { transform, extension, files } = await fetchSettings();
+  const { dry, verbose } = await fetchOptions();
+
+  console.log(`✨ Please review the following:`);
+  console.log(`✨ Upgrade script: ${transform}`);
+  console.log(`✨ File extension(s): ${extension}`);
+  console.log(`✨ Directory: ${files}`);
+  console.log(`✨ Dry run: ${dry}`);
+
+  const { confirm } = await okToProceed();
+
+  const options = `${dry ? '-d' : ''} ${verbose ? '-v=2' : ''}`;
+
+  const handleOutput = (error, stdout, stderr) => {
+    if (error) {
+      console.log(stderr);
+      return;
+    }
+    console.log(stdout);
+  };
+
+  const codeshiftPath = path.join(__dirname, '../node_modules/.bin/jscodeshift');
+
+  const coreCommand = `${codeshiftPath} ${files} -t=${transform} ${options}`;
+
+  if (confirm) {
+    console.log('🚀 Running codemod, please wait a few seconds...');
+    if (extension === EXTENSIONS.BOTH || extension === EXTENSIONS.JS) {
+      exec(`${coreCommand} --extensions=js,jsx --ignore-pattern='${IGNORE_PATTERN}'`, handleOutput);
+    }
+    if (extension === EXTENSIONS.BOTH || extension === EXTENSIONS.TSX) {
+      exec(
+        `${coreCommand} --parser=tsx --extensions=tsx --ignore-pattern='${IGNORE_PATTERN}'`,
+        handleOutput,
+      );
+    }
+  } else {
+    console.log('👋 Exiting');
+  }
+};
+
+run();

package/upgrades/2021-02-v34-35.js

@@ -0,0 +1,193 @@
+import { log } from './utils';
+
+const TYPE_REPLACEMENTS = {
+  primary: 'Button.Type.ACCENT',
+  secondary: 'Button.Type.ACCENT',
+  link: 'Button.Type.ACCENT',
+  danger: 'Button.Type.NEGATIVE',
+  pay: 'Button.Type.POSITIVE',
+};
+
+const PRIORITY_ADDITIONS = {
+  secondary: 'Button.Priority.SECONDARY',
+  link: 'Button.Priority.TERTIARY',
+  danger: 'Button.Priority.SECONDARY',
+};
+
+const transform = (file, api, options) => {
+  const printOptions = options.printOptions || {
+    quote: 'single',
+    trailingComma: true,
+  };
+
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  log('All aboard the transformation train 🚂', 2);
+  log(
+    'Upgrading instances of Button from @transferwise/components. Please refer to components/upgrades/2021-02-v34-35.js for details.',
+    1,
+  );
+  log(`Using the ${options.parser} parser.`, 2);
+
+  const literalType = options.parser === 'tsx' ? 'StringLiteral' : 'Literal';
+
+  // First, ensure they are importing Button from our package
+  const buttonImports = root
+    .find(j.ImportDeclaration, {
+      source: {
+        type: literalType,
+        value: '@transferwise/components',
+      },
+    })
+    .find(j.Identifier, {
+      name: 'Button',
+    });
+
+  if (buttonImports.size() === 0) {
+    return null;
+  }
+
+  log('Found import of Button from @transferwise/components, continuing 🛤', 1);
+
+  const buttons = root.findJSXElements('Button');
+
+  log('Adding priorities for literal types', 2);
+
+  // Add in priorities for literal types such as <Button type="secondary"/> => <Button type="secondary" priority={Button.Priority.SECONDARY} />
+  buttons
+    .find(j.JSXAttribute, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'type',
+      },
+      value: {
+        type: 'Literal',
+      },
+    })
+    .replaceWith((nodePath) => {
+      const priority = PRIORITY_ADDITIONS[nodePath.value.value.value]; // 😅
+
+      if (!priority) {
+        return nodePath.value;
+      }
+
+      return [
+        nodePath.value,
+        j.jsxAttribute(
+          j.jsxIdentifier('priority'),
+          j.jsxExpressionContainer(j.identifier(priority)),
+        ),
+      ];
+    });
+
+  log('Adding priorities for expressive types', 2);
+
+  // Add in priorities for expressive types such as <Button type={Button.Type.SECONDARY}/> => <Button type={Button.Type.SECONDARY} priority={Button.Priority.SECONDARY} />
+  buttons
+    .find(j.JSXAttribute, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'type',
+      },
+      value: {
+        type: 'JSXExpressionContainer',
+        expression: {
+          type: 'MemberExpression',
+          object: {
+            type: 'MemberExpression',
+            object: {
+              name: 'Button',
+              type: 'Identifier',
+            },
+            property: {
+              name: 'Type',
+              type: 'Identifier',
+            },
+          },
+        },
+      },
+    })
+    .replaceWith((nodePath) => {
+      const type = nodePath.value.value.expression.property.name;
+
+      const priority = PRIORITY_ADDITIONS[type.toLowerCase()];
+
+      if (!priority) {
+        return nodePath.value;
+      }
+
+      return [
+        nodePath.value,
+        j.jsxAttribute(
+          j.jsxIdentifier('priority'),
+          j.jsxExpressionContainer(j.identifier(priority)),
+        ),
+      ];
+    });
+
+  log('Replacing deprecated literal types', 2);
+
+  // Replace literal types such as <Button type="primary"/> => <Button type={Button.Type.ACCENT} />
+  buttons
+    .find(j.JSXAttribute, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'type',
+      },
+      value: {
+        type: 'Literal',
+      },
+    })
+    .find(j.Literal)
+    .replaceWith((nodePath) => {
+      const type = TYPE_REPLACEMENTS[nodePath.value.value];
+
+      if (!type) {
+        return nodePath.value;
+      }
+
+      return j.jsxExpressionContainer(j.identifier(type));
+    });
+
+  log('Replacing deprecated expressive types', 2);
+
+  // Replace expressive types such as <Button type={Button.Type.PRIMARY}/> => <Button type={Button.Type.ACCENT} />
+  buttons
+    .find(j.JSXAttribute, {
+      name: {
+        type: 'JSXIdentifier',
+        name: 'type',
+      },
+      value: {
+        type: 'JSXExpressionContainer',
+      },
+    })
+    .find(j.MemberExpression, {
+      object: {
+        type: 'MemberExpression',
+        object: {
+          name: 'Button',
+          type: 'Identifier',
+        },
+        property: {
+          name: 'Type',
+          type: 'Identifier',
+        },
+      },
+    })
+    .replaceWith((node) => {
+      const type = node.value.property.name.toLowerCase();
+
+      if (!TYPE_REPLACEMENTS[type]) {
+        return node.value;
+      }
+      return j.jsxIdentifier(TYPE_REPLACEMENTS[type]);
+    });
+
+  log('Transformation complete, printing to source.', 1);
+
+  return root.toSource(printOptions);
+};
+
+export default transform;