Export Cloudscape themed components in another component library

[GomezIvann]

Hello!

I'm Iván, a frontend developer at DXC, working on our design system, Halstack. We are currently utilizing and enhancing your Bar Chart component with additional functionalities for our users, integrating our components, and simplifying the API for ease of use. Additionally, we are applying our custom data visualization color palette, adhering to your theming guidelines. However, we've encountered a significant issue.

As a component library, we export our components for use by other DXC teams. While building the Bar Chart works as expected, exporting a themed Bar Chart presents a challenge. The theming strategies provided seem designed for application-level use, not for a component library.

Perhaps I'm missing something, but is there a way to export a Cloudscape component with default theming? Or is applying our custom color palette only possible at the application level?

Thanks in advance,
Best regards,
Iván

[GomezIvann]

To give more feedback about what we have tried until now:

• Build-time theming. Works in our halstack Next js application and our local tests (storybook and chromatic) of the library. This makes sense since we are replacing the component inside node_modules with the themed version using npm link. We followed this approach: Customize theme on Nextjs #954. The problem here is that our exported version of the component is vanilla, so it requires cloudscape dependencies to be installed. When consuming our library, installing those dependencies will load the default color palette, not our own, since the exported version doesn't include anything related to the custom theming. Removing @cloudscape-design/components from peerDependency of the library applies the custom colors but the component misses the rest of the styles.
• Runtime theming. Exporting the component with applyTheme partially works. For example, in a vanilla Vite project with React, it works fine but, if using a framework like Next js it throws errors. This makes sense since that function seems to reference node_module files, which is not allowed in a Next application.

[connorlanigan]

Hello Iván, thank you for reaching out to us! Happy to hear you're using our components.

If I understand correctly, the core of the issue lies in treating the themed components as if they're the @cloudscape-design/components package. I would recommend to follow a slightly different approach:

1. Generate a themed version of the Cloudscape components
2. Make these themed components available as their own package (e.g. in NPM or a GitHub Packages registry or a local workspace), for example something like @dxc-technology/halstack-react-themed-cloudscape-components
3. In your component library, depend on (and import from) @dxc-technology/halstack-react-themed-cloudscape-components instead of @cloudscape-design/components.

Your component library would then have no dependency at all on @cloudscape-design/components, and you don't need to modify anything in node_modules.

If you don't want the "intermediate" themed Cloudscape package to be public, you can potentially bundle it directly into the component library that you vend.

[GomezIvann]

Hello @connorlanigan!

Thanks for the quick response. I thought about creating another package and consuming it but I considered it an overexertion so I discarded it.. But now that you mention it, it seems the best solution for our library. I will follow your suggestions and update this discussion with the results.

Thanks again!!

[GomezIvann]

Hello again!

I tried your solution of building a separate library and encountered a few roadblocks. I do not know if it is a problem from my side but the build generated with buildThemedComponents is not enough to make it work (it seems to be missing some files). The exported library @dxc-technology/cloudscape-themed has the following output:

When I try to import the package inside my component library (another package, we have a monorepo structure) it throws this error and the build of the library never finishes:

The screenshot is from the launch of storybook.

@dxc-technology/halstack-react:build: X [ERROR] No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getLogicalBoundingClientRect"@dxc-technology/halstack-react:build: 
@dxc-technology/halstack-react:build:     ../cloudscape-themed/dist/components/table/sticky-scrollbar/use-sticky-scrollbar.js:10:9:
@dxc-technology/halstack-react:build:       10 │ import { getLogicalBoundingClientRect } from '@cloudscape-design/c...
@dxc-technology/halstack-react:build:          ╵          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@dxc-technology/halstack-react:build: 
@dxc-technology/halstack-react:build: X [ERROR] No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getIsRtl"
@dxc-technology/halstack-react:build: 
@dxc-technology/halstack-react:build:     ../cloudscape-themed/dist/components/tabs/scroll-utils.js:4:9:
@dxc-technology/halstack-react:build:       4 │ import { getIsRtl, getScrollInlineStart } from '@cloudscape-design/...
@dxc-technology/halstack-react:build:         ╵          ~~~~~~~~
@dxc-technology/halstack-react:build: 
@dxc-technology/halstack-react:build: X [ERROR] No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getScrollInlineStart"        
@dxc-technology/halstack-react:build: 
@dxc-technology/halstack-react:build:     ../cloudscape-themed/dist/components/tabs/scroll-utils.js:4:19:
@dxc-technology/halstack-react:build:       4 │ import { getIsRtl, getScrollInlineStart } from '@cloudscape-design/...
@dxc-technology/halstack-react:build:         ╵                    ~~~~~~~~~~~~~~~~~~~~
@dxc-technology/halstack-react:build: 
@dxc-technology/halstack-react:build: CJS Build failed
@dxc-technology/halstack-react:build: Error: Build failed with 26 errors:
@dxc-technology/halstack-react:build: ../cloudscape-themed/dist/components/app-layout/utils/use-app-layout-placement.js:6:9: ERROR: No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getLogicalBoundingClientRect"
@dxc-technology/halstack-react:build: ../cloudscape-themed/dist/components/app-layout/utils/use-pointer-events.js:5:9: ERROR: No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getIsRtl"
@dxc-technology/halstack-react:build: ../cloudscape-themed/dist/components/app-layout/utils/use-pointer-events.js:5:19: ERROR: No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getLogicalClientX"
@dxc-technology/halstack-react:build: ../cloudscape-themed/dist/components/app-layout/utils/use-pointer-events.js:5:38: ERROR: No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getLogicalBoundingClientRect"
@dxc-technology/halstack-react:build: ../cloudscape-themed/dist/components/app-layout/visual-refresh/context.js:20:9: ERROR: No matching export in "../../../../node_modules/@cloudscape-design/component-toolkit/internal/index.js" for import "getOffsetInlineStart"
@dxc-technology/halstack-react:build: ...
@dxc-technology/halstack-react:build:     at failureErrorWithLog (C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:1472:15)
@dxc-technology/halstack-react:build:     at C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:945:25
@dxc-technology/halstack-react:build:     at runOnEndCallbacks (C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:1315:45)
@dxc-technology/halstack-react:build:     at buildResponseToResult (C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:943:7)
@dxc-technology/halstack-react:build:     at C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:970:16
@dxc-technology/halstack-react:build:     at responseCallbacks.<computed> (C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:622:9)
@dxc-technology/halstack-react:build:     at handleIncomingPacket (C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:677:12)
@dxc-technology/halstack-react:build:     at Socket.readFromStdout (C:\Users\igomez9\Desktop\halstack-react\node_modules\tsup\node_modules\esbuild\lib\main.js:600:7)
@dxc-technology/halstack-react:build:     at Socket.emit (node:events:517:28)
@dxc-technology/halstack-react:build:     at addChunk (node:internal/streams/readable:335:12)
@dxc-technology/halstack-react:build: ESM Build failed
@dxc-technology/halstack-react:build: DTS ⚡️ Build success in 16603ms
@dxc-technology/halstack-react:build: DTS dist\index.d.ts  212.34 KB
@dxc-technology/halstack-react:build: DTS dist\index.d.mts 212.34 KB
@dxc-technology/halstack-react:build: npm ERR! Lifecycle script `build` failed with error:
@dxc-technology/halstack-react:build: npm ERR! Error: command failed
@dxc-technology/halstack-react:build: npm ERR!   in workspace: @dxc-technology/[email protected]
@dxc-technology/halstack-react:build: npm ERR!   at location: C:\Users\igomez9\Desktop\halstack-react\packages\lib
@dxc-technology/halstack-react:build: ERROR: command finished with error: command (C:\Users\igomez9\Desktop\halstack-react\packages\lib) C:\Program Files\nodejs\npm.cmd run build exited (1)
@dxc-technology/halstack-react#build: command (C:\Users\igomez9\Desktop\halstack-react\packages\lib) C:\Program Files\nodejs\npm.cmd run build exited (1)

 Tasks:    1 successful, 2 total
Cached:    1 cached, 2 total
  Time:    55.951s
Failed:    @dxc-technology/halstack-react#build

 ERROR  run failed: command  exited (1)

This is the output of our build process of the Halstack component library.

The code is here if you want to check it out: https://github.com/dxc-technology/halstack-react/tree/gomezivann/bar-chart-fix.

Any suggestions? Thanks for the feedback!