From e2fd6655720c65277ba687a799a5030203f93d16 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Wed, 20 Nov 2024 14:54:32 +0530 Subject: [PATCH 1/5] chore(Web components): configure docs in storybook --- .../.storybook/main.ts | 18 +++-- .../side-panel/side-panel.stories.ts | 2 +- .../src/components/side-panel/side-panel.ts | 10 +-- .../src/globals/internal/storybook-cdn.ts | 69 +++++++++++++++++++ 4 files changed, 88 insertions(+), 11 deletions(-) create mode 100644 packages/ibm-products-web-components/src/globals/internal/storybook-cdn.ts diff --git a/packages/ibm-products-web-components/.storybook/main.ts b/packages/ibm-products-web-components/.storybook/main.ts index 651209d990..89486e35d0 100644 --- a/packages/ibm-products-web-components/.storybook/main.ts +++ b/packages/ibm-products-web-components/.storybook/main.ts @@ -1,9 +1,20 @@ import { mergeConfig } from 'vite'; import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader'; import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-loader'; - +const glob = require('fast-glob'); +const stories = glob.sync( + [ + '../docs/**/*.mdx', + '../src/**/*.mdx', + '../src/**/*.stories.@(js|jsx|ts|tsx)', + ], + { + ignore: ['../src/**/docs/*.mdx'], + cwd: __dirname, + } +); const config = { - stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: stories, addons: [ '@storybook/addon-links', '@storybook/addon-toolbars', @@ -23,9 +34,6 @@ const config = { name: '@storybook/web-components-vite', options: {}, }, - docs: { - autodocs: 'tag', - }, async viteFinal(config) { return mergeConfig(config, { plugins: [ diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.stories.ts b/packages/ibm-products-web-components/src/components/side-panel/side-panel.stories.ts index d4d7d1134f..2a761d5233 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.stories.ts +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.stories.ts @@ -432,7 +432,7 @@ const defaultTemplate = { size=${args.size} ?slide-in=${args.slideIn} .title=${args.title} - @cds-side-panel-navigate-back=${prevStep} + @c4p-side-panel-navigate-back=${prevStep} > ${args.content} diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts b/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts index 51292c4b35..fe7b498300 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts @@ -85,13 +85,13 @@ function tryFocusElements(elements: NodeListOf, reverse: boolean) { /** * SidePanel. * - * @element cds-side-panel + * @element c4p-side-panel * @csspart dialog The dialog. - * @fires cds-side-panel-beingclosed + * @fires c4p-side-panel-beingclosed * The custom event fired before this side-panel is being closed upon a user gesture. * Cancellation of this event stops the user-initiated action of closing this side-panel. - * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture. - * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0) + * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture. + * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0) */ @customElement(`${prefix}-side-panel`) class CDSSidePanel extends HostListenerMixin(LitElement) { @@ -913,7 +913,7 @@ class CDSSidePanel extends HostListenerMixin(LitElement) { await (this.constructor as typeof CDSSidePanel)._delay(); if (focusNode) { // For cases where a `carbon-web-components` component (e.g. ``) being `primaryFocusNode`, - // where its first update/render cycle that makes it focusable happens after ``'s first update/render cycle + // where its first update/render cycle that makes it focusable happens after ``'s first update/render cycle (focusNode as HTMLElement).focus(); } else if ( !tryFocusElements( diff --git a/packages/ibm-products-web-components/src/globals/internal/storybook-cdn.ts b/packages/ibm-products-web-components/src/globals/internal/storybook-cdn.ts new file mode 100644 index 0000000000..c331b6a8c5 --- /dev/null +++ b/packages/ibm-products-web-components/src/globals/internal/storybook-cdn.ts @@ -0,0 +1,69 @@ +/** + * @license + * + * Copyright IBM Corp. 2021, 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. + */ + +import packageJson from '../../../package.json'; + +/* eslint-disable max-len */ + +/** + * + */ +/** + * Renders the component(s) script tag content and returns back the string + * + * @param {Array} components array of component names + * @param {string} tag tag folder + */ +function _renderScript(components, tag) { + let scripts = ''; + components.forEach((component) => { + scripts += `\n`; + }); + return scripts; +} + +/** + * This is the markdown block for JS via CDN + * + * @param {Array} components array of components to render + * @param components.components components to render + */ +export const cdnJs = ({ components }) => { + return ` +### JS (via CDN) + + > NOTE: Only one version of artifacts should be used. Mixing versions will cause rendering issues. + + \`\`\`html + // SPECIFIC VERSION (available starting v2.0.0) + ${_renderScript(components, `version/v${packageJson.version}`)} + \`\`\` + + #### Right-to-left (RTL) versions + + \`\`\`html + // SPECIFIC VERSION (available starting v2.0.0) + ${_renderScript(components, `version/v${packageJson.version}`)} + \`\`\` + `; +}; + +/** + * This is the markdown block for CSS via CDN + */ +export const cdnCss = () => { + return ` +### Carbon CDN style helpers (optional) + +There are optional CDN artifacts available that can assist with global Carbon +styles in lieu of including into your specific application bundle. + +[Click here to learn more](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.md)\n\n + `; +}; From ea491b4e8e35227d84cfc9664549c2374d6ce685 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 21 Nov 2024 13:57:31 +0530 Subject: [PATCH 2/5] fix(web componenents): build fail isusue fix and import updates --- .../ibm-products-web-components/package.json | 1 + .../src/components/side-panel/side-panel.mdx | 17 ++++------------- .../src/components/tearsheet/tearsheet.mdx | 17 ++++------------- .../ibm-products-web-components/tasks/build.js | 2 ++ 4 files changed, 11 insertions(+), 26 deletions(-) diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json index a6de6211f6..d9bc07abab 100644 --- a/packages/ibm-products-web-components/package.json +++ b/packages/ibm-products-web-components/package.json @@ -60,6 +60,7 @@ "@mordech/vite-lit-loader": "^0.35.0", "@rollup/plugin-alias": "^5.1.1", "@rollup/plugin-commonjs": "^28.0.0", + "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.3.0", "@rollup/plugin-typescript": "^12.1.0", "@storybook/addon-essentials": "^8.3.6", diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx b/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx index f553f5eac5..75ebb6898c 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx @@ -6,12 +6,6 @@ import * as SidePanelStories from './side-panel.stories'; # SidePanel -> 💡 Check our -> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel) -> example implementation. - -[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel) - Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new. @@ -22,16 +16,13 @@ Here's a quick example to get you started. ### JS (via import) ```javascript -import '@carbon/web-components/es/components/side-panel/index.js'; +import '@carbon/ibm-products-web-components/es/components/side-panel/index.js'; // The following are used for slotted fields -import '@carbon/web-components/es/components/text-input/index.js'; -import '@carbon/web-components/es/components/textarea/index.js'; -import '@carbon/web-components/es/components/button/index.js'; +import '@carbon/ibm-products-web-components/es/components/text-input/index.js'; +import '@carbon/ibm-products-web-components/es/components/textarea/index.js'; +import '@carbon/ibm-products-web-components/es/components/button/index.js'; ``` -{`${cdnJs({ components: ['side-panel'] })}`} -{`${cdnCss()}`} - ### HTML ```html diff --git a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx index 8c44b87303..589c010701 100644 --- a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx +++ b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx @@ -6,12 +6,6 @@ import * as TearsheetStories from './tearsheet.stories'; # Tearsheet -> 💡 Check our -> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet) -> example implementation. - -[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet) - Tearsheets keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new. @@ -22,16 +16,13 @@ Here's a quick example to get you started. ### JS (via import) ```javascript -import '@carbon/web-components/es/components/tearsheet/index.js'; +import '@carbon/ibm-products-web-components/es/components/tearsheet/index.js'; // The following are used for slotted fields -import '@carbon/web-components/es/components/text-input/index.js'; -import '@carbon/web-components/es/components/textarea/index.js'; -import '@carbon/web-components/es/components/button/index.js'; +import '@carbon/ibm-products-web-components/es/components/text-input/index.js'; +import '@carbon/ibm-products-web-components/es/components/textarea/index.js'; +import '@carbon/ibm-products-web-components/es/components/button/index.js'; ``` -{`${cdnJs({ components: ['tearsheet'] })}`} -{`${cdnCss()}`} - ### HTML ```html diff --git a/packages/ibm-products-web-components/tasks/build.js b/packages/ibm-products-web-components/tasks/build.js index 1cddff9eec..35a96de035 100644 --- a/packages/ibm-products-web-components/tasks/build.js +++ b/packages/ibm-products-web-components/tasks/build.js @@ -22,6 +22,7 @@ import nodeResolve from '@rollup/plugin-node-resolve'; import path from 'path'; import postcss from 'postcss'; import typescript from '@rollup/plugin-typescript'; +import json from '@rollup/plugin-json'; import * as packageJson from '../package.json' assert { type: 'json' }; @@ -125,6 +126,7 @@ function getRollupConfig(input, rootDir, outDir, iconInput) { targets: [{ src: 'src/components/**/*.scss', dest: 'scss' }], flatten: false, }), + [json()], nodeResolve({ browser: true, mainFields: ['jsnext', 'module', 'main'], From 5b2a26eab39367f4d1e3d954a7076a2dde66cd40 Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 21 Nov 2024 14:01:01 +0530 Subject: [PATCH 3/5] fix(web components): conflict resolve --- packages/ibm-products-web-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json index d9bc07abab..f2225be27f 100644 --- a/packages/ibm-products-web-components/package.json +++ b/packages/ibm-products-web-components/package.json @@ -59,7 +59,7 @@ "@carbon/motion": "^11.24.0", "@mordech/vite-lit-loader": "^0.35.0", "@rollup/plugin-alias": "^5.1.1", - "@rollup/plugin-commonjs": "^28.0.0", + "@rollup/plugin-commonjs": "^28.0.1", "@rollup/plugin-json": "^6.1.0", "@rollup/plugin-node-resolve": "^15.3.0", "@rollup/plugin-typescript": "^12.1.0", From 4023f75de9fa962ec2da889093beadeb39bd87fa Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 21 Nov 2024 14:10:04 +0530 Subject: [PATCH 4/5] fix(web components): resolve conflict --- yarn.lock | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/yarn.lock b/yarn.lock index 2e04d39b74..d335dd986e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1878,6 +1878,7 @@ __metadata: "@mordech/vite-lit-loader": "npm:^0.35.0" "@rollup/plugin-alias": "npm:^5.1.1" "@rollup/plugin-commonjs": "npm:^28.0.1" + "@rollup/plugin-json": "npm:^6.1.0" "@rollup/plugin-node-resolve": "npm:^15.3.0" "@rollup/plugin-typescript": "npm:^12.1.1" "@storybook/addon-essentials": "npm:^8.3.6" @@ -6047,6 +6048,20 @@ __metadata: languageName: node linkType: hard +"@rollup/plugin-json@npm:^6.1.0": + version: 6.1.0 + resolution: "@rollup/plugin-json@npm:6.1.0" + dependencies: + "@rollup/pluginutils": "npm:^5.1.0" + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + checksum: cc018d20c80242a2b8b44fae61a968049cf31bb8406218187cc7cda35747616594e79452dd65722e7da6dd825b392e90d4599d43cd4461a02fefa2865945164e + languageName: node + linkType: hard + "@rollup/plugin-node-resolve@npm:^15.3.0": version: 15.3.0 resolution: "@rollup/plugin-node-resolve@npm:15.3.0" From 1fb0ae88276f12160e3c0ed57d2689bc425c7c4d Mon Sep 17 00:00:00 2001 From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com> Date: Thu, 21 Nov 2024 14:41:28 +0530 Subject: [PATCH 5/5] fix(web components): update import urls --- .../src/components/side-panel/side-panel.mdx | 6 +++--- .../src/components/tearsheet/tearsheet.mdx | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx b/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx index 75ebb6898c..d786152f66 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.mdx @@ -18,9 +18,9 @@ Here's a quick example to get you started. ```javascript import '@carbon/ibm-products-web-components/es/components/side-panel/index.js'; // The following are used for slotted fields -import '@carbon/ibm-products-web-components/es/components/text-input/index.js'; -import '@carbon/ibm-products-web-components/es/components/textarea/index.js'; -import '@carbon/ibm-products-web-components/es/components/button/index.js'; +import '@carbon/web-components/es/components/text-input/index.js'; +import '@carbon/web-components/es/components/textarea/index.js'; +import '@carbon/web-components/es/components/button/index.js'; ``` ### HTML diff --git a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx index 589c010701..949e81d8a5 100644 --- a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx +++ b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.mdx @@ -18,11 +18,12 @@ Here's a quick example to get you started. ```javascript import '@carbon/ibm-products-web-components/es/components/tearsheet/index.js'; // The following are used for slotted fields -import '@carbon/ibm-products-web-components/es/components/text-input/index.js'; -import '@carbon/ibm-products-web-components/es/components/textarea/index.js'; -import '@carbon/ibm-products-web-components/es/components/button/index.js'; +import '@carbon/web-components/es/components/text-input/index.js'; +import '@carbon/web-components/es/components/textarea/index.js'; +import '@carbon/web-components/es/components/button/index.js'; ``` + ### HTML ```html