@transferwise/components 0.0.0-experimental-1c5d31a → 0.0.0-experimental-d024c8c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-1c5d31a",
+  "version": "0.0.0-experimental-d024c8c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "main": "./build/umd/polyfill/main.js",
@@ -12,17 +12,13 @@
   ],
   "files": [
     "build",
-    "scripts",
-    "upgrades"
+    "scripts"
   ],
   "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",
@@ -53,7 +49,6 @@
     "@transferwise/icons": "^3.2.3",
     "@transferwise/neptune-tokens": "^8.5.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",
@@ -72,12 +67,12 @@
     "rollup-plugin-uglify": "^6.0.4",
     "storybook": "^7.0.6",
     "@transferwise/less-config": "3.0.6",
-    "@transferwise/neptune-css": "14.3.49",
+    "@transferwise/neptune-css": "0.0.0-experimental-d024c8c",
     "@wise/components-theming": "0.7.5"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.2.3",
-    "@transferwise/neptune-css": "^14.3.49",
+    "@transferwise/neptune-css": "0.0.0-experimental-d024c8c",
     "@wise/art": "^2",
     "@wise/components-theming": "0.5 - 0.7",
     "currency-flags": "^4.0.2",
@@ -101,13 +96,9 @@
     "@react-spring/web": "~9.6.1",
     "@transferwise/formatting": "^2.1.0",
     "@transferwise/neptune-validation": "^3.0.12",
-    "@types/lodash.throttle": "^4.1.7",
     "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",

package/scripts/generate-type-declarations.js

@@ -18,6 +18,8 @@ const jsFiles = [
   { 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' },

package/scripts/neptune-upgrader.js

@@ -1,114 +0,0 @@
-#!/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

@@ -1,193 +0,0 @@
-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;

package/upgrades/2021-04-v35-36-typescript-support.js

@@ -1,290 +0,0 @@
-/* eslint-disable no-console */
-import { componentsPackageName, defaultPrintOptions, getLiteralType } from './utils';
-
-const Scroll = 'Scroll';
-const sizeCase = { old: 'Size', new: 'Size' };
-const priorityCase = { old: 'Priority', new: 'Priority' };
-const positionCase = { old: 'Position', new: 'Position' };
-const monthFormatCase = { old: 'MonthFormat', new: 'MonthFormat' };
-const layoutCase = { old: 'Layout', new: 'Layout' };
-const statusCase = { old: 'Status', new: 'Status' };
-
-const breakingChangesMap = [
-  {
-    component: 'Avatar',
-    enums: [sizeCase, { old: 'Type', new: 'AvatarType' }, { old: 'Theme', new: 'Theme' }],
-  },
-  {
-    component: 'Loader',
-    enums: [sizeCase],
-  },
-  {
-    component: 'Badge',
-    enums: [sizeCase, { old: 'Border', new: 'Theme' }],
-  },
-  {
-    component: 'Alert',
-    enums: [
-      { old: 'Type', new: 'Sentiment' },
-      { old: 'ArrowPosition', new: 'AlertArrowPosition' },
-    ],
-  },
-  {
-    component: 'Button',
-    enums: [priorityCase, sizeCase],
-  },
-  {
-    component: 'Chevron',
-    enums: [{ old: 'Orientation', new: 'Position' }, sizeCase],
-  },
-  {
-    component: 'CircularButton',
-    enums: [{ old: 'Type', new: 'ControlType' }, priorityCase],
-  },
-  {
-    component: 'AvatarWrapper',
-    enums: [{ old: 'ProfileType', new: 'ProfileType' }],
-  },
-  {
-    component: 'DateInput',
-    enums: [sizeCase, { old: 'DateMode', new: 'DateMode' }, monthFormatCase],
-  },
-  {
-    component: 'DateLookup',
-    enums: [sizeCase, monthFormatCase],
-  },
-  {
-    component: 'Decision',
-    enums: [
-      { old: 'Presentation', new: 'DecisionPresentation' },
-      { old: 'Type', new: 'DecisionType' },
-      sizeCase,
-    ],
-  },
-  {
-    component: 'DefinitionList',
-    enums: [layoutCase],
-  },
-  {
-    component: 'Drawer',
-    enums: [positionCase],
-  },
-  {
-    component: 'DynamicFieldDefinitionList',
-    enums: [layoutCase],
-  },
-  {
-    component: 'Info',
-    enums: [sizeCase, { old: 'Presentation', new: 'InfoPresentation' }],
-  },
-  {
-    component: 'InlineAlert',
-    enums: [{ old: 'Type', new: 'Sentiment' }],
-  },
-  {
-    component: 'Modal',
-    enums: [sizeCase, positionCase, { old: Scroll, new: Scroll }],
-  },
-  {
-    component: 'PhoneNumberInput',
-    enums: [sizeCase],
-  },
-  {
-    component: 'Popover',
-    enums: [{ old: 'Placement', new: 'Position' }],
-  },
-  {
-    component: 'ProcessIndicator',
-    enums: [statusCase, sizeCase],
-  },
-  {
-    component: 'Summary',
-    enums: [statusCase],
-  },
-  {
-    component: 'Tabs',
-    enums: [
-      { old: 'SpacerSizes', new: 'Size' },
-      { old: 'HeaderWidth', new: 'Width' },
-    ],
-  },
-  {
-    component: 'Tile',
-    enums: [sizeCase],
-  },
-  {
-    component: 'Tooltip',
-    enums: [positionCase],
-  },
-  {
-    component: 'Typeahead',
-    enums: [sizeCase, { old: 'Type', new: 'Sentiment' }],
-  },
-  {
-    component: 'Upload',
-    enums: [{ old: 'UploadStep', new: 'UploadStep' }],
-  },
-];
-
-const ButtonTypeBreakingChange = {
-  Type: ['PRIMARY', 'PAY', 'SECONDARY', 'DANGER', 'LINK'],
-  ControlType: ['ACCENT', 'POSITIVE', 'NEGATIVE'],
-};
-
-export default function codemod(file, api, options) {
-  const literalType = getLiteralType(options.parser);
-  const j = api.jscodeshift;
-  const fileTree = j(file.source);
-
-  let hasModifications = false;
-  breakingChangesMap.forEach(({ component, enums }) => {
-    const componentImport = fileTree
-      .find(j.ImportDeclaration, {
-        source: {
-          type: literalType,
-          value: componentsPackageName,
-        },
-      })
-      .find(j.Identifier, {
-        name: component,
-      });
-
-    if (componentImport.size() > 0) {
-      enums.forEach((enumItem) => {
-        let newEnum = enumItem.new;
-        fileTree
-          .find(j.MemberExpression, {
-            object: {
-              type: 'Identifier',
-              name: component,
-            },
-            property: {
-              type: 'Identifier',
-              name: enumItem.old,
-            },
-          })
-          .replaceWith((node) => {
-            hasModifications = true;
-            // cover Button's edge case
-            if (component === 'Button') {
-              const enumItemValue = node.parentPath.node.property.name;
-              if (
-                enumItemValue === 'ACCENT' ||
-                enumItemValue === 'POSITIVE' ||
-                enumItemValue === 'NEGATIVE'
-              ) {
-                // use `ControlType` instead of `Type` in above cases
-                newEnum = 'ControlType';
-              }
-            }
-            return j.jsxIdentifier(newEnum);
-          });
-
-        if (hasModifications) {
-          hasModifications = false;
-          // check whether we already added this enum into import statement
-          const enumImports = fileTree
-            .find(j.ImportDeclaration, {
-              source: {
-                type: literalType,
-                value: componentsPackageName,
-              },
-            })
-            .find(j.Identifier, {
-              name: newEnum,
-            });
-
-          if (enumImports.size() === 0) {
-            // add import for `newEnum`
-            fileTree
-              .find(j.ImportDeclaration, {
-                source: {
-                  type: literalType,
-                  value: componentsPackageName,
-                },
-              })
-              .forEach((paths) => {
-                paths.value.specifiers.push(j.importSpecifier(j.identifier(newEnum)));
-              });
-          }
-
-          // do we still need import component?
-          const isComponentNotUsedAtJsx =
-            fileTree
-              .find(j.JSXElement, {
-                openingElement: {
-                  name: {
-                    type: 'JSXIdentifier',
-                    name: component,
-                  },
-                },
-              })
-              .size() === 0;
-
-          if (isComponentNotUsedAtJsx) {
-            // delete component from import statement
-            fileTree
-              .find(j.ImportDeclaration, {
-                source: {
-                  type: literalType,
-                  value: componentsPackageName,
-                },
-              })
-              .find(j.Identifier, {
-                name: component,
-              })
-              .remove();
-          }
-        }
-      });
-    }
-  });
-
-  [...ButtonTypeBreakingChange.Type, ...ButtonTypeBreakingChange.ControlType].forEach(
-    (enumItemValue) => {
-      fileTree
-        .find(j.MemberExpression, {
-          object: {
-            property: {
-              name: 'Type',
-            },
-          },
-          property: {
-            name: enumItemValue,
-          },
-        })
-        .replaceWith(() => {
-          // eslint-disable-next-line unicorn/prevent-abbreviations -- this is a useless rule, and useless application of it
-          const newProp = ButtonTypeBreakingChange.Type.includes(enumItemValue)
-            ? 'Type'
-            : 'ControlType';
-
-          const enumImports = fileTree
-            .find(j.ImportDeclaration, {
-              source: {
-                type: literalType,
-                value: componentsPackageName,
-              },
-            })
-            .find(j.Identifier, {
-              name: newProp,
-            });
-          if (enumImports.size() === 0) {
-            fileTree
-              .find(j.ImportDeclaration, {
-                source: {
-                  type: literalType,
-                  value: componentsPackageName,
-                },
-              })
-              .forEach((paths) => {
-                paths.value.specifiers.push(j.importSpecifier(j.identifier(newProp)));
-              });
-          }
-          return j.jsxIdentifier(`${newProp}.${enumItemValue}`);
-        });
-    },
-  );
-
-  return fileTree.toSource(defaultPrintOptions);
-}

package/upgrades/utils/index.js

@@ -1,17 +0,0 @@
-export const componentsPackageName = '@transferwise/components';
-
-export const defaultPrintOptions = {
-  quote: 'single',
-  trailingComma: true,
-};
-
-export function getLiteralType(parser) {
-  return parser === 'tsx' ? 'StringLiteral' : 'Literal';
-}
-
-export const log = (verbose, message, level = 0) => {
-  if (verbose >= level) {
-    // eslint-disable-next-line no-undef
-    api.report(`✨ ${message}`);
-  }
-};