Reformat exports

[BPScott]

WHY are these changes introduced?

Most of an implementation for #1959. This is a big change so I'm going to split it into a few commits:

• Convert sub-components
• Convert top level components
• Enable linting rules to alert on default exports

WHAT is this pull request doing?

Updates all components (and sub-components and sub-sub-components) so that:

• They have a named export that matches the name of the component - e.g. in Button.ts the component will be exported as Button instead of a default export
• They have a named export for props based on the component name - e.g. in Button.ts the props will be exported as ButtonProps instead of Props

This means that in component (/ subcomponent) indexes we don't need to do any renaming of exports when reexporting them, things keep the same name throughout the hierarchy.

---

There's still a few default exports used because of how we export things in withAppProvider and I think it is better to leave them be for the moment, The fix for them can be added in a separate PR where the changes won't get lost in all the other noise.

---

You can use the following script to search for items that have default or Props exports

const fs = require('fs');
const glob = require('glob');
const {parseSync: babelParse, traverse: babelTraverse} = require('@babel/core');

const isComponentFilePathRegex = /components\/([a-z0-9]+)\/(\1|index)\.tsx?/i;

function containsAny(haystack, needles) {
  return haystack.some((name) => needles.includes(name));
}

// eslint-disable-next-line id-length
function caseInsensitiveCompare(a, b) {
  return a.localeCompare(b, undefined, {sensitivity: 'base'});
}

const result = glob
  .sync('src/**/*.{ts,tsx}')
  //.filter((filePath) => !isComponentFilePathRegex.test(filePath))
  .map((filePath) => {
    const content = fs.readFileSync(filePath, 'utf-8');
    const ast = babelParse(content, {filename: filePath});

    const allExports = [];

    babelTraverse(ast, {
      ExportDefaultDeclaration() {
        allExports.push('default');
      },
      ExportSpecifier(path) {
        allExports.push(path.node.exported.name);
      },
    });

    allExports.sort(caseInsensitiveCompare);
    return {filePath, allExports};
  })
  .filter(({allExports}) => containsAny(allExports, ['default', 'Props']));

result.forEach((item) => {
  process.stdout.write(`${item.filePath}\n    ${item.allExports.join(', ')}\n`);
});

process.stdout.write(`\n\n${result.length} files found\n`);

[amrocha]

A few questions

[amrocha]

?

[amrocha]

?

[amrocha]

?

[amrocha]

?

[amrocha]

Why change this here?

[BPScott]

If we don't need the typehint here, then we can avoid importing UserMenuProps entirely

[amrocha]

oh, does TS infer the type?

[BPScott]

yep, it'll complain if we miss a prop that needs to be passed in

[amrocha]

My comments make more sense in split diff view

[amrocha]

Fine for this PR, but let's revisit this, it might make sense to rename the entire component

[amrocha]

Same as above