Carbon: Inconsistent imports for multiple components

[rvsia]

Inconsistent import for multiple components

Some components cannot be automatically import as their import differs from others.

What package(s) are you using?

• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

In Data Driven Forms we are using Babel's transform-imports to include different versions of imports for CJS/ESM builds. For most Carbon components it's actually pretty straightforward process as the export structure is clear:

// .../Component/Component.js

...

export default Component;

To transform lines like

import { TextInput } from 'carbon-components-react';

we are using this config

    'carbon-components-react': {
      transform: (importName) => {
        let res;
        const files = glob.sync(path.resolve(__dirname, `../../node_modules/carbon-components-react/${env === 'cjs' ? 'lib' : 'es' }/**/${importName}.js`));
        if (files.length > 0) {
          res = files[0];
        } else {
          throw new Error(`File with importName ${importName} does not exist`);
        }
        res = res.replace(path.resolve(__dirname, '../../node_modules/'), '');
        res = res.replace(/^\//, '');
        return res;
      },
      preventFullImport: false,
      skipDefaultConversion: false
    },

And it works well. However, there are several components, that break the consistency and because of that, the transformation isn't working. I found two: ProgressIndicator and StructuredList. (Maybe there are more, I wasn't exploring the rest of library.)

// ../ProgressIndicator/ProgressIndicator.js

export const ProgressIndicator;
export const ProgressStep;

// ../StructuredList/StructuredList.js

export const StructuredListWrapper;
export const StructuredListCell;
export const StructuredListRow;
export const StructuredListBody;

So the absence of the default import and combination of multiple components in one file break the consistency.

Is this issue related to a specific component?

ProgressIndicator
StructuredList

What did you expect to happen? What happened instead? What would you like to see changed?

I would like to change the structure to be in line with all other components:

// ../ProgressIndicator/ProgressIndicator.js

export default ProgressIndicator;

// ../ProgressIndicator/ProgressStep.js

export default ProgressStep;

// ../StructuredList/StructuredListWrapper.js

export default StructuredListWrapper;

// ../StructuredList/StructuredListCell.js

export default StructuredListCell;

// ../StructuredList/StructuredListRow.js

export default StructuredListRow;

// ../StructuredList/StructuredListBody.js

export default StructuredListBody;

Of course, it's possible to keep the old exports in files to be backwards compatible. No issues there.

What version of the Carbon Design System are you using?

"carbon-components-react": "^7.20.0",

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

https://github.com/data-driven-forms/react-forms/

Steps to reproduce the issue

1. use the babel plugin to transform import { ProgressStep } from 'carbon-components-react';

Additional information

I have no problem with creating a PR to solve this issue.

cc @Hyperkid123

[tw15egan]

Any possible side effects of doing this for the current users? I guess as long as we can ensure backward compatibility can be maintained it makes sense 👍

Would it be possible to add deprecation warnings for the old import syntax? Then in the next major version, we can remove the old ones.

[rvsia]

@tw15egan yeah, a deprecation message sounds great! Should it be shown only when process.env.NODE_ENV is not production?

Otherwise, I don’t think there will be any side-effect (maybe a little bit bigger bundle size because of few additional lines..)

[tw15egan]

Works for me 👍

[rvsia]

Awesome, thanks for the response. I will prepare a PR next week.