carbon-design-system / carbon-labs

An innovation space for the creation of components leveraging Carbon Design System

@carbon-labs

A collection of experimental components and patterns implemented utilizing the Carbon Design System.

Getting started

This monorepo houses a collection of components, each as their own package. Here's a full list of packages that we support!

Package name	Description
@carbon-labs/ai-chat	AI Chat component
@carbon-labs/utilities	Common utilities shared amongst packages

A Storybook demo of all component packages is available here: https://labs-canary.carbondesignsystem.com/

🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our guides:

• Developer Guide

📝 License

Licensed under the Apache 2.0 License.

IBM Telemetry

@carbon-labs/ai-chat uses IBM Telemetry to collect metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.

carbon-labs's Issues

[Chat]: Additional features

From Daniel:

• on-click event when user clicks a message in the chat
• it could be nice if in the chat, when it is a bot message, right next to the AI slug where it says {AI time} if you could instead allow me to provide a string that you would then put instead of AI next to the time
• set the chat to state "loading" programmatically
• ability to disable input - without hiding the whole chat window
• ability to set the input prompt myself - currently it says "Type something..." always i would like to be able to overwrite that
• response contains a tabular result
• response contains a vega lite

[Architecture]: Initial Carbon for AI Architecture setup (Phase 1)

User story

As a [user role below]:

User of Carbon for AI

I need to:

Have available a storybook, npm, and CDN artifacts in the Carbon for AI library

so that I can:

Integrate AI experiences into my IBM Product/Application

Additional information

• Approach will be an open-source library under the Apache 2.0 license
• Library will utilize Carbon Web Components, and will be built as Web Components
• Will use the @carbon/ai package name
  • Should determine if we can identify and publish experimental components under the @carbon-labs/ai package name
• All components for the initial phase will be published as experimental
• Should publish components in a way that classes and templates can be exported separately to allow extensibility for teams that wish to define their own custom elements in addition to having custom elements be automatically defined
• Example Github Actions for CDN publishing:
  • https://github.com/IBM-Design/design-website/actions/workflows/deploy.yml
• CDN publishing will utilize the same Content Object Storage bucket used by Carbon Web Components, and published on IBM Akamai servers
• Considering the following technologies
  • Storybook v7, Vite, Lit v3, rollup, pnpm
• Environments:
  • Production: Manual deployment based on tag (COS hosted)
  • Stage: Manual deployment based on tag (off release branches) (COS hosted)
  • Canary: Automatic deployments based off main branch (Netlify hosted)
  • Deploy previews: Automatic deployments in pull requests (Netlify hosted)

Tasks

Beta Give feedback

1. Storybook environment setup for production
2. Storybook environment setup for staging
3. Storybook environment setup for canary
4. Storybook environment setup for deploy previews
5. CI/CD pipelines set up for npm publishing (semver tagging and publishing)
6. CI/CD pipelines set up for CDN publishing
7. Setup of Github templates (issue templates, PR templates, etc)
8. Addition of Apache 2.0 license
9. Setup of linting/husky
10. Setup of testing framework
11. Setup of automerge workflow between release branches and main
12. Setup of example component structure
13. Setup DCO workflow
14. Setup storybook docs tab (README, properties table, CDN, etc)
15. CI check workflow
16. Add release schedule
17. Improve security practices for carbon-for-ai carbon-for-ai#12
    7 of 7
    area: AI +1
    
18. Add eslint configuration
19. convert project to use TS
20. Create React wrappers with @lit/react package
21. Convert to monorepo

Tearsheet Web Component w/ AI enhancements

Placeholder epic, details TBD.

Improve security practices for `carbon-for-ai`

Hey there, Carbon team member here! 👋 We'd like to ensure the security practices for packages published from the carbon-design-system GitHub org are in place and up to date. We'd like to work with you to get the following security practices implemented:

Tasks

Beta Give feedback

1. Add a security policy to the repository
2. Enable Security advisories
3. Enable Private vulnerability reporting
4. Enable Dependabot alerts
5. Enable Code scanning alerts
6. Enable Secret scanning alerts
7. Publish your package(s) to npm with provenance statements

Most of these can be found under the Security tab for this repository. You may already have most of these implemented and turned on - if so, awesome!

For establishing a security policy, the existing security policy for the Carbon monorepo can be used as a template if you'd like. It can be modified to include proper version(s) for your package and any other attributes unique to your project that you may want to highlight.

I'm happy to meet up and chat about this if you'd like, just let me know. Thanks in advance for your help in ensuring security and stability across the Carbon ecosystem! 🙏 💙

Create document to provide steps for dev teams to get started using AI components

User story

As a developer, I need to be able to find and use the components and styles that have embedded the AI slug so that I can add them to my product.

Additional information

Julia Lubarsky has created box note here to draft this documentation -> https://ibm.box.com/s/05zzb8pmhr3rk3zdfm6o6589zj8f6pbc.

Final location tbd

Acceptance criteria

• {{State acceptance criteria}}
• {{State another}}
• {{And another}}

[Bug]: Feedback Slug incorrectly displays "flag" icon

Browser

No response

Package version

latest

React version

No response

Description

The AI slug of the feedback component incorrectly shows the flag icon.

Reproduction/example

none

Steps to reproduce

1. Select any portion of the text.
2. Click the AI slug

Now the "flag icon" appears next to the AI slug. Instead, the selected text should be deselected and no flag would show at all, especially not near the AI slug.

Suggested Severity

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

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

docs(stackblitz): set up stackblitz examples for components

Set up stackblitz examples for components and link them in the storybook docs

Aura: Explore dev feasibility of initial AI Aura requirements

This issue is for exploring the feasibility of early designs, collaborate with designers to determine limits of dev implementation, and overall answer the many questions surrounding the existing design specifications for Carbon for AI.

Existing delivered explorations:

https://codepen.io/lee-chase/pen/MWZdZxo/78d436c84ea15d00094fcb878188c4cf

Tasks

Beta Give feedback

No tasks being tracked yet.

Rename repo to @carbon-labs

After some discussion, carbon-for-ai will be renamed to carbon-labs to open the repository up to more general contributions not specific to AI.

• Rename repo to carbon-labs
• Change canary and staging storybook urls
  - ai-canary.carbondesignsystem.com ---> labs-canary.carbondesignsystem.com
  - ai-staging.carbondesignsystem.com ---> labs-staging.carbondesignsystem.com
• Change production storybook url
• Rename the utilities package
• Change prefex to clabs
• Update CDN paths

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	@storybook/addon-styling

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update yarn to v4.4.0
• fix(deps): update dependency @carbon/styles to v1.63.1
• chore(deps): update dependency sinon to v18
• fix(deps): update dependency uuid to v10
• chore(deps): lock file maintenance

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• chore(deps): update dependency prettier to v3

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @carbon/icons to v11.47.1
• chore(deps): update dependency @carbon/type to v11.29.0
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency stylelint to v16
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update storybook monorepo to v8 (major) (@storybook/addon-essentials, @storybook/addon-links, @storybook/blocks, @storybook/theming, @storybook/web-components, @storybook/web-components-vite)

Detected dependencies

github-actions

.github/workflows/automerge.yml

• actions/checkout v4
• devmasx/merge-branch 1.4.0
• ubuntu 22.04

.github/workflows/ci.yml

• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4
• actions/checkout v4
• actions/setup-node v4

.github/workflows/dco.yml

• cla-assistant/github-action v2.1.3-beta
• ubuntu 22.04

.github/workflows/publish-canary-cdn.yml

• actions/checkout v4.1.7@692973e3d937129bcbf40652eb9f2f61becf3332
• fkirc/skip-duplicate-actions v5.3.1
• actions/setup-node v4

.github/workflows/publish-cdn.yml

• actions/checkout v4.1.7@692973e3d937129bcbf40652eb9f2f61becf3332
• actions/setup-node v4

.github/workflows/release-canary.yml

• actions/checkout v4.1.7@692973e3d937129bcbf40652eb9f2f61becf3332
• actions/setup-node v4

.github/workflows/release.yml

• actions/checkout v4.1.7@692973e3d937129bcbf40652eb9f2f61becf3332
• actions/setup-node v4

.github/workflows/storybook-publish-production.yml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/storybook-publish-staging.yml

• actions/checkout v4
• actions/setup-node v4

npm

package.json

• @carbon/styles 1.53.0
• lit ^3.0.0
• @carbon/grid ^11.21.1
• @carbon/icon-helpers 10.50.0
• @carbon/icons 11.47.0
• @carbon/layout 11.24.0
• @carbon/motion 11.20.0
• @carbon/themes 11.38.0
• @carbon/type 11.28.0
• @commitlint/cli ^19.0.0
• @commitlint/config-conventional ^19.0.0
• @custom-elements-manifest/analyzer ^0.10.0
• @lit/react ^1.0.1
• @open-wc/testing ^4.0.0
• @playwright/test ^1.39.0
• @rollup/plugin-alias ^5.1.0
• @rollup/plugin-commonjs ^26.0.0
• @rollup/plugin-json ^6.1.0
• @rollup/plugin-node-resolve ^15.2.3
• @rollup/plugin-replace ^5.0.5
• @rollup/plugin-terser ^0.4.4
• @rollup/pluginutils ^5.0.5
• @storybook/addon-essentials ^7.5.1
• @storybook/addon-links ^7.5.1
• @storybook/addon-styling ^1.3.7
• @storybook/blocks ^7.5.1
• @storybook/theming ^7.5.1
• @storybook/web-components ^7.5.1
• @storybook/web-components-vite ^7.5.1
• @types/mocha ^10.0.3
• @types/react ^18.2.36
• @types/sinon ^17.0.0
• @web/dev-server-esbuild ^1.0.0
• @web/test-runner ^0.18.0
• @web/test-runner-commands ^0.9.0
• @web/test-runner-playwright ^0.11.0
• async-done ^2.0.0
• autoprefixer ^10.4.16
• babel-preset-carbon ^0.0.14
• browserslist-config-carbon ^11.2.0
• commander ^12.0.0
• cssnano ^7.0.0
• doctoc ^2.2.1
• esbuild ^0.23.0
• eslint ^8.57.0
• eslint-config-carbon ^3.11.0
• gitignore-to-glob ^0.3.0
• globby ^14.0.0
• gulp ^5.0.0
• gulp-babel ^8.0.0
• gulp-clean-css ^4.3.0
• gulp-filter ^9.0.0
• gulp-header ^2.0.9
• gulp-postcss ^10.0.0
• gulp-prettier ^6.0.0
• gulp-sass ^5.1.0
• gulp-sourcemaps ^3.0.0
• gulp-typescript 6.0.0-alpha.1
• husky ^9.0.0
• lerna ^8.0.0
• lint-staged ^15.0.2
• postcss ^8.4.31
• prettier ^2.8.8
• prettier-config-carbon ^0.11.0
• react ^18.2.0
• react-dom ^18.2.0
• replace-ext ^2.0.0
• rollup ^4.0.0
• rollup-plugin-esbuild ^6.1.0
• rollup-plugin-postcss ^4.0.2
• rollup-plugin-postcss-lit ^2.1.0
• sass ~1.77.0
• sinon ^17.0.1
• storybook ^8.0.0
• strip-comments ^2.0.1
• stylelint 15.11.0
• stylelint-config-carbon 1.17.0
• through2 ^4.0.2
• typescript ^5.2.2
• vite ^5.0.0
• node >=18.x
• yarn 4.3.1

packages/chat/package.json

• @babel/runtime ^7.23.2
• @carbon/web-components 2.11.1
• @ibm/telemetry-js ^1.6.0
• mathjax ^3.2.2
• smiles-drawer ^2.1.7
• vega ^5.28.0
• vega-embed ^6.24.0
• vega-lite ^5.17.0

packages/feedback/package.json

• @babel/runtime ^7.23.2
• @carbon/grid ^11.21.0
• @carbon/web-components 2.11.1
• uuid ^9.0.1

packages/network-graph/package.json

• @babel/runtime ^7.23.2
• @carbon/grid ^11.21.0
• @carbon/web-components 2.11.1
• force-graph ^1.43.5

packages/tag/package.json

• @babel/runtime ^7.23.2
• @carbon/grid ^11.21.0
• @carbon/web-components 2.11.1

packages/utilities/package.json

• @rollup/plugin-babel ^6.0.4
• babel-cli ^6.26.0

packages/ux-control/package.json

• @babel/runtime ^7.23.2
• @carbon/grid ^11.21.0
• @carbon/web-components 2.11.1

---

• Check this box to trigger a request for Renovate to run again on this repository

Natural Language Interface Web Components (aka chat)

Placeholder epic, details TBD.

Evaluate how Web Components work in common React environments

This is important for products built with Carbon v10 React, because the AI enhancements (e.g. slug, gradient) are only being built in Carbon v11 (React and Web Components).

If a product is built with Carbon v10 React, and they want an AI-enhanced modal component for example, we'd recommend they use the AI-enhanced Web Component modal (not React).

This POC is not applicable to products built with Carbon v11 React, as they would just use the AI-enhanced React components not the AI-enhanced Web Components.

Side Panel Web Component w/ AI enhancements

Blocked by

• carbon-design-system/ibm-products#3752

[POC]: Investigate feasibility of integrating v11 components into a v10 application

User story

As a [user role below]:

Developer working on an IBM Software product on Carbon v10

I need to:

integrate v11 based Carbon components with AI capabilities

so that I can:

have AI experiences embedded into our product before we fully migrate to Carbon v11

Additional information

• Related issue: #23

• Approaches we would like to investigate would be:

  • integrate Carbon React v11 components (e.g. AI slug, enhanced core components) into an existing application with Carbon React v10
  • integrate Carbon Web Components v11 components (e.g. AI slug, enhanced core components) into an existing application with Carbon React v10
  • integrate Carbon Web Components v11 components (e.g. AI slug, enhanced core components) into an existing application with Carbon Angular v10

• One known issue would be the handling of sub-dependencies like downshift, which might be troublesome between Carbon React v10 and Carbon React v11

  • Sub note to this, Carbon Web Components does not use downshift as a dependency

• Ideally, we can find sponsor product teams to test out this POC in actual products

  • List of products and which version of Carbon/framework they are on: https://ibm.ent.box.com/notes/1312171108218
  • EIS is currently on Angular v10 and may be a team of interest to work with, see box note for dev contact to work with

Acceptance criteria

• Determine ability (and limitations) of embedding Carbon React v11 components into a Carbon React v10 application
• Determine ability (and limitations) of embedding Carbon Web Components v11 components into a Carbon React v10 application
• Determine ability (and limitations) of embedding Carbon Web Components v11 components into a Carbon Angular v10 application

Create WC Chat Button