diff --git a/.eslintignore b/.eslintignore index 428df3602f..cb1b11786f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -23,6 +23,9 @@ packages/*/examples/* # React **/storybook-static/** +# Story files +*.stories.* + # Ignore template files packages/ibm-products/scripts/generate/templates/**/*.js* scripts/example-gallery-builder/update-example/**/*.js* diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 1a45257abb..6246b5c908 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -4,7 +4,7 @@ on: pull_request: branches: - main - - main_v1 + - v1 merge_group: types: [checks_requested] diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index 4cd533a5df..0b0601a921 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -4,12 +4,12 @@ on: pull_request: branches: - main - - main_v1 + - v1 push: branches: - main - - main_v1 + - v1 merge_group: types: [checks_requested] diff --git a/.github/workflows/move-issue-to-project-and-set-fields.yml b/.github/workflows/move-issue-to-project-and-set-fields.yml deleted file mode 100644 index 38a8facd5a..0000000000 --- a/.github/workflows/move-issue-to-project-and-set-fields.yml +++ /dev/null @@ -1,97 +0,0 @@ -name: Add issue to project and set field and field option given a specific label -on: - workflow_call: - inputs: - field: - default: '' - type: string - required: true - field_option: - default: '' - type: string - required: true - project_number: - default: '' - type: string - required: true - -jobs: - move_to_project_field: - runs-on: ubuntu-latest - steps: - - name: Get project data - env: - GH_TOKEN: ${{ secrets.ADD_TO_PROJECT_SET_FIELD }} - run: | - gh api graphql -f query=' - query($org: String!, $number: Int!) { - organization(login: $org){ - projectV2(number: $number) { - id - fields(first:20) { - nodes { - ... on ProjectV2Field { - id - name - } - ... on ProjectV2SingleSelectField { - id - name - options { - id - name - } - } - } - } - } - } - }' -f org=${{ github.repository_owner }} -F number=${{ inputs.project_number }} > project_data.json - - echo 'Field and field option are: "${{ inputs.field }}: ${{ inputs.field_option }}"' - echo 'PROJECT_ID='$(jq '.data.organization.projectV2.id' project_data.json) >> $GITHUB_ENV - echo 'FIELD_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name=="${{ inputs.field }}") | .id' project_data.json) >> $GITHUB_ENV - echo 'FIELD_OPTION_ID='$(jq '.data.organization.projectV2.fields.nodes[] | select(.name=="${{ inputs.field }}") | .options[] | select(.name=="${{ inputs.field_option }}") |.id' project_data.json) >> $GITHUB_ENV - - - name: Add issue to project - env: - GH_TOKEN: ${{ secrets.ADD_TO_PROJECT_SET_FIELD }} - ISSUE_ID: ${{ github.event.issue.node_id }} - # Uses [GitHub CLI](https://cli.github.com/manual/) and the API to add the issue that triggered this workflow to the project. The `jq` flag parses the response to get the ID of the created item. - run: | - item_id="$( gh api graphql -f query=' - mutation($project:ID!, $issue:ID!) { - addProjectV2ItemById(input: {projectId: $project, contentId: $issue}) { - item { - id - } - } - }' -f project=$PROJECT_ID -f issue=$ISSUE_ID --jq '.data.addProjectV2ItemById.item.id')" - - echo 'ITEM_ID='$item_id >> $GITHUB_ENV - - - name: Set field value - env: - GH_TOKEN: ${{ secrets.ADD_TO_PROJECT_SET_FIELD }} - # Sets the value of the `field` to the specified `field_option`. - run: | - gh api graphql -f query=' - mutation ( - $project: ID! - $item: ID! - $field_id: ID! - $field_option: String! - ) { - set_field: updateProjectV2ItemFieldValue(input: { - projectId: $project - itemId: $item - fieldId: $field_id - value: { - singleSelectOptionId: $field_option - } - }) { - projectV2Item { - id - } - } - }' -f project=$PROJECT_ID -f item=$ITEM_ID -f field_id=$FIELD_ID -f field_option=${{ env.FIELD_OPTION_ID }} --silent diff --git a/.github/workflows/release-v1.yml b/.github/workflows/release-v1.yml index 4d036ae07c..af5ace273c 100644 --- a/.github/workflows/release-v1.yml +++ b/.github/workflows/release-v1.yml @@ -19,7 +19,7 @@ jobs: with: fetch-depth: 0 # https://github.com/actions/checkout/issues/217 token: ${{ secrets.GH_TOKEN_LERNA }} # https://github.com/lerna/lerna/issues/1957 - ref: 'main_v1' + ref: 'v1' # https://github.com/actions/checkout#push-a-commit-using-the-built-in-token - run: | diff --git a/.github/workflows/triage-labeled-issues.yml b/.github/workflows/triage-labeled-issues.yml index b1262adbfd..01c2bf3ce6 100644 --- a/.github/workflows/triage-labeled-issues.yml +++ b/.github/workflows/triage-labeled-issues.yml @@ -7,25 +7,28 @@ on: jobs: move-ts-issues: if: ${{contains(github.event.label.name, format('area{0} typescript', ':'))}} - uses: ./.github/workflows/move-issue-to-project-and-set-fields.yml + uses: carbon-design-system/.github/.github/workflows/move-issue-to-project-and-set-fields.yml@main with: field: 'Area' field_option: '🟦 Typescript' project_number: '65' - secrets: inherit + secrets: + token: ${{ secrets.ADD_TO_PROJECT_SET_FIELD }} move-migration-issues: if: ${{contains(github.event.label.name, format('area{0} migration ➡️', ':'))}} - uses: ./.github/workflows/move-issue-to-project-and-set-fields.yml + uses: carbon-design-system/.github/.github/workflows/move-issue-to-project-and-set-fields.yml@main with: field: 'Area' field_option: '🗺 Migration' project_number: '65' - secrets: inherit + secrets: + token: ${{ secrets.ADD_TO_PROJECT_SET_FIELD }} move-a11y-issues: if: ${{contains(github.event.label.name, format('type{0} a11y ♿', ':'))}} - uses: ./.github/workflows/move-issue-to-project-and-set-fields.yml + uses: carbon-design-system/.github/.github/workflows/move-issue-to-project-and-set-fields.yml@main with: field: 'Area' field_option: '♿️ Accessibility' project_number: '65' - secrets: inherit + secrets: + token: ${{ secrets.ADD_TO_PROJECT_SET_FIELD }} diff --git a/.github/workflows/update-v1.yml b/.github/workflows/update-v1.yml index 4cf48fbf19..4c5aedc7cc 100644 --- a/.github/workflows/update-v1.yml +++ b/.github/workflows/update-v1.yml @@ -13,7 +13,7 @@ jobs: - name: Checkout uses: actions/checkout@v3 with: - ref: 'main_v1' + ref: 'v1' - name: Install run: yarn diff --git a/README.md b/README.md index bf6331e4dd..513dc6be60 100644 --- a/README.md +++ b/README.md @@ -35,11 +35,11 @@ other users. This project consists of a number of component library packages published on npm: -| Package name | Description | -| --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -| [`@carbon/ibm-products`](./packages/ibm-products) | A curated set of components and patterns, built on top of Carbon and designed by the Carbon for IBM Products team | -| [`@carbon/ibm-cloud-cognitive-cdai`](https://github.com/carbon-design-system/ibm-products/tree/main_v1/packages/cdai) | (**v1 only**) Legacy and non-curated design implementations used in application integration | -| [`@carbon/ibm-security`](https://github.com/carbon-design-system/ibm-products/tree/main_v1/packages/security) | (**v1 only**) Legacy and non-curated design implementations used in security | +| Package name | Description | +| ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | +| [`@carbon/ibm-products`](./packages/ibm-products) | A curated set of components and patterns, built on top of Carbon and designed by the Carbon for IBM Products team | +| [`@carbon/ibm-cloud-cognitive-cdai`](https://github.com/carbon-design-system/ibm-products/tree/v1/packages/cdai) | (**v1 only**) Legacy and non-curated design implementations used in application integration | +| [`@carbon/ibm-security`](https://github.com/carbon-design-system/ibm-products/tree/v1/packages/security) | (**v1 only**) Legacy and non-curated design implementations used in security | Also the following additional utility packages are published on npm: diff --git a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md index 591a4f860e..880a04a03d 100644 --- a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md +++ b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.1.6](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.1.5...jest-config-ibm-cloud-cognitive@1.1.6) (2024-04-30) + + +### Bug Fixes + +* adds snapshot test as part of CI checks ([#4798](https://github.com/carbon-design-system/ibm-products/issues/4798)) ([7fd4343](https://github.com/carbon-design-system/ibm-products/commit/7fd43439642040cf303e287efc13b00d09d885de)) + + + + + ## [1.1.5](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.1.4...jest-config-ibm-cloud-cognitive@1.1.5) (2024-02-27) **Note:** Version bump only for package jest-config-ibm-cloud-cognitive diff --git a/config/jest-config-ibm-cloud-cognitive/index.js b/config/jest-config-ibm-cloud-cognitive/index.js index c86cd6cefc..25c68ecfa7 100644 --- a/config/jest-config-ibm-cloud-cognitive/index.js +++ b/config/jest-config-ibm-cloud-cognitive/index.js @@ -46,7 +46,7 @@ module.exports = { }, }, resolver: require.resolve('./setup/resolver.js'), - moduleFileExtensions: ['tsx', 'ts', 'js', 'json', 'node'], + moduleFileExtensions: ['tsx', 'ts', 'jsx', 'js', 'json', 'node'], moduleNameMapper: { // This mapping is the result of updating to Jest 28. We currently require // this as the version of uuid that gets resolved is ESM but we would like @@ -98,6 +98,7 @@ module.exports = { '/umd/', '[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$', 'ace-node\\.js', + 'ace-node-([a-zA-Z0-9_-]+).(js|ts)$', ], watchPathIgnorePatterns: [ '/.avt/', diff --git a/config/jest-config-ibm-cloud-cognitive/package.json b/config/jest-config-ibm-cloud-cognitive/package.json index 55c0d766f0..0c15f76fcb 100644 --- a/config/jest-config-ibm-cloud-cognitive/package.json +++ b/config/jest-config-ibm-cloud-cognitive/package.json @@ -1,7 +1,7 @@ { "name": "jest-config-ibm-cloud-cognitive", "private": true, - "version": "1.1.5", + "version": "1.1.6", "license": "Apache-2.0", "main": "index.js", "repository": { diff --git a/config/storybook-addon-carbon-theme/CHANGELOG.md b/config/storybook-addon-carbon-theme/CHANGELOG.md index 0c634d5dd3..188e6a764b 100644 --- a/config/storybook-addon-carbon-theme/CHANGELOG.md +++ b/config/storybook-addon-carbon-theme/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.1.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.0.8...@carbon/storybook-addon-theme@2.1.0) (2024-04-30) + + +### Bug Fixes + +* **sidePanel:** Close scrollbar overlap 3975 ([#4680](https://github.com/carbon-design-system/ibm-products/issues/4680)) ([8ef8d7b](https://github.com/carbon-design-system/ibm-products/commit/8ef8d7b98ceebc1a9934d98a5e5891c65163fedf)) + + +### Features + +* instrument current packages with js scope ([#5012](https://github.com/carbon-design-system/ibm-products/issues/5012)) ([59074fe](https://github.com/carbon-design-system/ibm-products/commit/59074fe8ae93d3854565ba3c92f20065f3f2867e)) + + + + + ## [2.0.8](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.0.7...@carbon/storybook-addon-theme@2.0.8) (2024-04-02) **Note:** Version bump only for package @carbon/storybook-addon-theme diff --git a/config/storybook-addon-carbon-theme/package.json b/config/storybook-addon-carbon-theme/package.json index bae7b2ace3..f89dfa97f8 100644 --- a/config/storybook-addon-carbon-theme/package.json +++ b/config/storybook-addon-carbon-theme/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/storybook-addon-theme", "description": "Carbon theme switcher for Storybook", - "version": "2.0.8", + "version": "2.1.0", "license": "Apache-2.0", "main": "dist/react.js", "repository": { diff --git a/cspell.json b/cspell.json index d2332d1865..0423d88acb 100644 --- a/cspell.json +++ b/cspell.json @@ -85,6 +85,7 @@ "dasharray", "data-testid", "datagrid", + "denormalized", "disttag", "disttags", "dragbar", diff --git a/e2e/components/AboutModal/AboutModal-test.avt.e2e.js b/e2e/components/AboutModal/AboutModal-test.avt.e2e.js new file mode 100644 index 0000000000..8ac328c291 --- /dev/null +++ b/e2e/components/AboutModal/AboutModal-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2024, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +import { expect, test } from '@playwright/test'; +import { visitStory } from '../../test-utils/storybook'; + +test.describe('AboutModal @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'AboutModal', + id: 'ibm-products-patterns-about-modal-aboutmodal--about-modal', + globals: { + carbonTheme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('AboutModal @avt-default-state'); + }); +}); diff --git a/e2e/components/TagSet/TagSet-test.avt.e2e.js b/e2e/components/TagSet/TagSet-test.avt.e2e.js new file mode 100644 index 0000000000..d3d6b25324 --- /dev/null +++ b/e2e/components/TagSet/TagSet-test.avt.e2e.js @@ -0,0 +1,24 @@ +/** + * Copyright IBM Corp. 2024, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +import { expect, test } from '@playwright/test'; +import { visitStory } from '../../test-utils/storybook'; + +test.describe('TagSet @avt', () => { + test('@avt-default-state', async ({ page }) => { + await visitStory(page, { + component: 'TagSet', + id: 'ibm-products-components-tag-set-tagset--five-tags', + globals: { + carbonTheme: 'white', + }, + }); + await expect(page).toHaveNoACViolations('TagSet @avt-default-state'); + }); +}); diff --git a/examples/carbon-for-ibm-products/example-gallery/src/example-gallery.stories.js b/examples/carbon-for-ibm-products/example-gallery/src/example-gallery.stories.js index 9fa095613b..405f6dd4a2 100644 --- a/examples/carbon-for-ibm-products/example-gallery/src/example-gallery.stories.js +++ b/examples/carbon-for-ibm-products/example-gallery/src/example-gallery.stories.js @@ -9,7 +9,7 @@ import React from 'react'; import App from './App.jsx'; -import styles from './_storybook-styles.scss'; +import styles from './_storybook-styles.scss?inline'; export default { title: 'Overview/Examples', diff --git a/package.json b/package.json index 69dddc1e12..76e1f84976 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "scripts": { "audit": "node scripts/audit.js '--environment production' moderate", + "avt": "yarn playwright test --project chromium --grep @avt", "build": "run-s -s 'build:*' storybook:build:storybook", "build:packages": "yarn run-all --include-dependencies build", "ci-check": "run-s -s 'ci-check:*' storybook:build", @@ -46,9 +47,8 @@ "test:c4p-styles": "lerna run --stream --scope @carbon/ibm-products-styles test --", "test:community": "lerna run --stream --scope @carbon/ibm-products-community test --", "spellcheck": "cspell '**' -e './examples' --gitignore --quiet --no-must-find-files", - "storybook": "run-s storybook:build:dependencies storybook:start", + "storybook": "yarn storybook:start", "storybook:build": "run-s -s 'storybook:build:*'", - "storybook:build:dependencies": "yarn run-all --include-dependencies --scope \"@carbon/storybook-addon-theme\" build", "storybook:build:storybook": "cd packages/core && yarn build", "storybook:start": "cd packages/core && yarn start", "sync": "carbon-cli sync", diff --git a/packages/core/.storybook/babel.config.json b/packages/core/.storybook/babel.config.json deleted file mode 100644 index f406f678e7..0000000000 --- a/packages/core/.storybook/babel.config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"] -} diff --git a/packages/core/.storybook/index.scss b/packages/core/.storybook/index.scss index d7f8667835..56caa333e9 100644 --- a/packages/core/.storybook/index.scss +++ b/packages/core/.storybook/index.scss @@ -1,10 +1,18 @@ // -// Copyright IBM Corp. 2020, 2022 +// Copyright IBM Corp. 2020, 2024 // // This source code is licensed under the Apache-2.0 license found in the // LICENSE file in the root directory of this source tree. // +// We need to specify the $font-path first otherwise the config +// is specified by components forwarded from index-without-carbon.scss +// and can't be changed again. This will result in plex 404s when +// running storybook. +@use '@carbon/styles/scss/config' with ( + $font-path: '@ibm/plex' +); + // Load the C&CS styles first, excluding Carbon styles. We will then load full // Carbon styles at the end -- this is to obtain a "worst case" for our own CSS, // to ensure we are resilient against different CSS loading orders and our @@ -13,13 +21,9 @@ @use '../../ibm-products-styles/src/index-without-carbon.scss'; // Load all Carbon styles now -@use '../css/carbon'; -// @import '../../security/src/index'; -// @import 'docs'; @use '@carbon/styles' as styles; @use '@carbon/styles/scss/theme' as *; @use '@carbon/react/scss/spacing' as *; -@use '@carbon/react/scss/config'; // Setting attribute storybook-carbon-theme="XXX" on the html element // will set the carbon theme used for the storybook pane. @@ -30,7 +34,7 @@ body { --doc-story-height: initial; } -[storybook-carbon-theme] { +[data-carbon-theme] { @include styles.theme(styles.$white); /* make sure background and color are set if theme in use */ @@ -38,23 +42,23 @@ body { color: $text-primary; } -[storybook-carbon-theme='g10'], +[data-carbon-theme='g10'], .sb--use-carbon-theme-g10 { @include styles.theme(styles.$g10); } -[storybook-carbon-theme='g90'], +[data-carbon-theme='g90'], .sb--use-carbon-theme-g90 { @include styles.theme(styles.$g90); } -[storybook-carbon-theme='debug'], -[storybook-carbon-theme='g100'], +[data-carbon-theme='debug'], +[data-carbon-theme='g100'], .sb--use-carbon-theme-g100 { @include styles.theme(styles.$g100); } -[storybook-carbon-theme='debug'] body { +[data-carbon-theme='debug'] body { color: initial; } diff --git a/packages/core/.storybook/main.js b/packages/core/.storybook/main.js index 4cc0c316a3..de1ec5696c 100644 --- a/packages/core/.storybook/main.js +++ b/packages/core/.storybook/main.js @@ -5,14 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -const { merge } = require('webpack-merge'); -const { resolve } = require('path'); -const TerserPlugin = require('terser-webpack-plugin'); const glob = require('fast-glob'); +const path = require('path'); import remarkGfm from 'remark-gfm'; -const maxAssetSize = 1024 * 1024; - const storyGlobs = [ '../../ibm-products/src/**/*.stories.*', '../../ibm-products-community/src/**/*.stories.*', @@ -37,7 +33,6 @@ module.exports = { '@storybook/addon-storysource', '@storybook/addon-viewport', '@storybook/addon-mdx-gfm', - '@carbon/storybook-addon-theme/preset.js', { name: '@storybook/addon-docs', options: { @@ -48,100 +43,55 @@ module.exports = { }, }, }, - ], - - core: { - builder: { - name: 'webpack5', + { + name: '@storybook/addon-essentials', options: { - lazyCompilation: true, - fsCache: true, + actions: true, + backgrounds: false, + controls: true, + docs: true, + toolbars: true, + viewport: true, }, }, + ], + core: { + builder: '@storybook/builder-vite', }, - - framework: { - name: '@storybook/react-webpack5', - options: {}, - }, - + framework: '@storybook/react-vite', features: { storyStoreV7: true, }, - stories, - typescript: { reactDocgen: 'react-docgen', // Favor docgen from prop-types instead of TS interfaces }, + async viteFinal(config, { configType }) { + // Merge custom configuration into the default config + const { mergeConfig } = await import('vite'); - // v11 will only show stories for C4P components (or at least until CDAI/Security move from v10 to v11) - webpackFinal: async (configuration, { configType }) => - merge(configuration, { - optimization: { - removeAvailableModules: true, - removeEmptyChunks: true, - splitChunks: { - chunks: 'all', - minSize: 30 * 1024, - maxSize: maxAssetSize, - }, - minimize: true, - minimizer: [ - new TerserPlugin({ - minify: TerserPlugin.esbuildMinify, - terserOptions: { - minify: true, - }, - }), - ], + return mergeConfig(config, { + esbuild: { + include: /\.[jt]sx?$/, + exclude: [], + loader: 'tsx', }, - performance: { - maxAssetSize: maxAssetSize, - }, - module: { - rules: [ - { - test: /\.stories\.js$/, - loader: 'babel-loader', - options: require('babel-preset-ibm-cloud-cognitive')(), - }, - { - test: /\.scss$/, - use: [ - { - loader: 'style-loader', - options: { - // https://webpack.js.org/loaders/style-loader/#lazystyletag - injectType: 'lazyStyleTag', - }, - }, - 'css-loader', - { - loader: 'sass-loader', - options: { - sassOptions: { - includePaths: [ - resolve(__dirname, '..', 'node_modules'), - resolve(__dirname, '..', '..', '..', 'node_modules'), - ], - }, - warnRuleAsWarning: true, - sourceMap: true, - }, - }, - ], + optimizeDeps: { + esbuildOptions: { + loader: { + '.js': 'jsx', }, - ], + }, }, resolve: { alias: { - ALIAS_STORY_STYLE_CONFIG$: resolve( + ALIAS_STORY_STYLE_CONFIG: path.resolve( configType === 'DEVELOPMENT' ? '../ibm-products-styles/src/config-dev.scss' : '../ibm-products-styles/src/config.scss' ), }, }, - }), + }); + }, }; diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js index 1c68a35e2c..89d0705f14 100644 --- a/packages/core/.storybook/preview.js +++ b/packages/core/.storybook/preview.js @@ -5,50 +5,47 @@ * LICENSE file in the root directory of this source tree. */ -// cspell:words unuse - -import { withCarbonTheme } from '@carbon/storybook-addon-theme/withCarbonTheme'; -import { - PARAM_KEY as CARBON_THEME_PARAM_KEY, - CARBON_THEMES, -} from '@carbon/storybook-addon-theme/constants'; - -import { ActionableNotification, UnorderedList, ListItem } from '@carbon/react'; import React, { useEffect } from 'react'; +import { ActionableNotification, UnorderedList, ListItem } from '@carbon/react'; +import { white, g10, g90, g100 } from '@carbon/themes'; import { pkg } from '../../ibm-products/src/settings'; -import index from './index.scss'; +import index from './index.scss?inline'; import { StoryDocsPage } from '../../ibm-products/src/global/js/utils/StoryDocsPage'; // Enable all components, whether released or not, for storybook purposes pkg._silenceWarnings(true); pkg.setAllComponents(true); -const Style = ({ children, styles }) => { - const { unuse, use } = styles; - - useEffect(() => { - use(); - - return () => unuse(); - }, []); - - return children; -}; +const Style = ({ children, styles }) => ( + <> + + {children} + +); -const isDev = CONFIG_TYPE === 'DEVELOPMENT'; // process.env?.NODE_ENV === 'development'; +const isDev = CONFIG_TYPE === 'DEVELOPMENT'; if (isDev) { // use a prefix in all development storybook pkg.prefix = `dev-prefix--${pkg.prefix}`; } const decorators = [ - (storyFn, { args, parameters: { styles } }) => { + (storyFn, context) => { + const { + args, + globals, + parameters: { styles }, + } = context; + const { theme } = globals; const story = storyFn(); - JSON.stringify(args.featureFlags); + useEffect(() => { + document.documentElement.setAttribute('data-carbon-theme', theme); + }, [theme]); + return (