carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.73k stars 1.79k forks source link

[Bug]: Issues with types for @carbon/react (ESM) #15420

Open nstuyvesant opened 9 months ago

nstuyvesant commented 9 months ago

Package

@carbon/react

Browser

Safari

Package version

1.46.0

React version

18.2.0

Description

The file @carbon/react/es/index.d.ts has a large number of exports that refer to files that DO NOT EXIST...

export * from './components/AccordionItem';
export * from './components/CheckboxGroup';
export * from './components/CodeSnippet';
export * from './components/ContainedList';
export * from './components/ContextMenu';
export * from './components/ErrorBoundary';
export * from './components/FilterableMultiSelect';
export * from './components/Menu';
export * from './components/ModalWrapper';
export * from './components/Pagination';
export * from './components/PaginationNav';
export * from './components/PasswordInput';
export * from './components/PrimaryButton';
export * from './components/ProgressIndicator';
export * from './components/SecondaryButton';
export * from './components/SkeletonIcon';
export * from './components/Switch';
export * from './components/TreeView';
export { FluidDatePickerInput as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput';
export { FluidTimePickerSelect as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect';
export { LayoutDirection as unstable_LayoutDirection, useLayoutDirection as unstable_useLayoutDirection, } from './components/LayoutDirection';
export { PageSelector as unstable_PageSelector, Pagination as unstable_Pagination, } from './components/Pagination/experimental';
export * from './components/ProgressBar';

Also, it should have proper exports in the package.json for the types.

Reproduction/example

https://unpkg.com/@carbon/react@1.46.0/es/index.d.ts

Steps to reproduce

  1. Go to https://unpkg.com/@carbon/react@1.46.0/es/index.d.ts
  2. Look in the es/components directory for the package to see that those files are not there.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

@carbon/charts

Code of Conduct

kuri-sun commented 8 months ago

Hello @nstuyvesant! Once you build the package, those files are going to show up. Just in case, you would like to know how to build the package, I will put the documentation here! (https://github.com/carbon-design-system/carbon/blob/main/.github/CONTRIBUTING.md)

So, I think you can close this issue! thank you! ❤️

nstuyvesant commented 8 months ago

Hi @kuri-sun - I am building a website that has @carbon/react as a dependency. When I examine what was installed by yarn in my node_modules/@carbon/react/es directory, what I found was there.

Are you saying I have to not only install @carbon/react in my project as a dependency but also separately create a build of it?

kuri-sun commented 8 months ago

Hi @nstuyvesant! Thanks for the reply! I apologize that I completely misunderstood the issue that you reported. Yes, you are right. this path resolution is not correctly done. I am going to take a look at the issue again. I will reply to you back ASAP. Thank you so much!

nstuyvesant commented 8 months ago

@kuri-sun - thanks for the follow up.

tay1orjones commented 8 months ago

Yeah it looks like the pathing for these is incorrect. That file is a generated one. The build process is probably using some type of inference to generate the paths and it's incorrect for some components.

The list looks like a good bunch of edge cases to look into. For AccordionItem for example, this is a subcomponent that actually lives within the Accordion folder.

We'd appreciate some help looking into why this is happening if someone is interested!

kuri-sun commented 8 months ago

Hello @tay1orjones, I am searching this build behavior is coming from. I assume this is because of Tree-Shaking from the roll-up library but I am not sure. For sure I will take a look at this more. Related to this, I would like to ask you why we have the "AccordionItem" folder in the react/src/component. Thank you so much! 😄