Merge branch 'feat/cwc-storybook-7-vite' into chore/cwc-sb7-remove-deps

packages/carbon-web-components/.storybook/main.ts

@@ -16,109 +16,8 @@ const glob = require('fast-glob');
 const stories = glob.sync(
   [
     '../docs/**/*.mdx',
-    // go back to wildcard globs once all stories are written
-    // '../src/**/*.mdx',
-    // '../src/**/*.stories.@(js|jsx|ts|tsx)',
-    // add mdx/story files as they are being worked on
-    '../src/**/checkbox.stories.ts',
-    '../src/**/checkbox.mdx',
-    '../src/**/accordion.mdx',
-    '../src/**/accordion.stories.ts',
-    '../src/**/breadcrumb.mdx',
-    '../src/**/breadcrumb.stories.ts',
-    '../src/**/code-snippet.mdx',
-    '../src/**/code-snippet.stories.ts',
-    '../src/**/combo-box.stories.ts',
-    '../src/**/combo-box.mdx',
-    '../src/**/date-picker.mdx',
-    '../src/**/date-picker.stories.ts',
-    '../src/**/content-switcher.mdx',
-    '../src/**/content-switcher.stories.ts',
-    '../src/**/dropdown.stories.ts',
-    '../src/**/dropdown.mdx',
-    '../src/**/data-table-*.stories.ts',
-    '../src/**/data-table.mdx',
-    '../src/**/ordered-list.stories.ts',
-    '../src/**/unordered-list.stories.ts',
-    '../src/**/list.mdx',
-    '../src/**/icon-button.mdx',
-    '../src/**/icon-button.stories.ts',
-    '../src/**/inline-loading.mdx',
-    '../src/**/inline-loading.stories.ts',
-    '../src/**/loading.stories.ts',
-    '../src/**/loading.mdx',
-    '../src/**/button.mdx',
-    '../src/**/button.stories.ts',
-    '../src/**/link.mdx',
-    '../src/**/link.stories.ts',
-    '../src/**/layer.stories.ts',
-    '../src/**/layer.mdx',
-    '../src/**/file-uploader.mdx',
-    '../src/**/file-uploader.stories.ts',
-    '../src/**/popover.mdx',
-    '../src/**/popover.stories.ts',
-    '../src/**/form-group.mdx',
-    '../src/**/form-group.stories.ts',
-    '../src/**/modal.stories.ts',
-    '../src/**/modal.mdx',
-    '../src/**/file-uploader.stories.ts',
-    '../src/**/number-input.mdx',
-    '../src/**/number-input.stories.ts',
-    '../src/**/multi-select.mdx',
-    '../src/**/multi-select.stories.ts',
-    '../src/**/notification.mdx',
-    '../src/**/actionable-notification.stories.ts',
-    '../src/**/inline-notification.stories.ts',
-    '../src/**/toast-notification.stories.ts',
-    '../src/**/overflow-menu.mdx',
-    '../src/**/overflow-menu.stories.ts',
-    '../src/**/pagination.mdx',
-    '../src/**/pagination.stories.ts',
-    '../src/**/progress-bar.mdx',
-    '../src/**/progress-bar.stories.ts',
-    '../src/**/progress-indicator.mdx',
-    '../src/**/progress-indicator.stories.ts',
-    '../src/**/radio-button.mdx',
-    '../src/**/radio-button.stories.ts',
-    '../src/**/search.mdx',
-    '../src/**/search.stories.ts',
-    '../src/**/select.mdx',
-    '../src/**/select.stories.ts',
-    '../src/**/skeleton-icon.mdx',
-    '../src/**/skeleton-icon.stories.ts',
-    '../src/**/skeleton-placeholder.mdx',
-    '../src/**/skeleton-placeholder.stories.ts',
-    '../src/**/skeleton-text.mdx',
-    '../src/**/skeleton-text.stories.ts',
-    '../src/**/skip-to-content.mdx',
-    '../src/**/skip-to-content.stories.ts',
-    '../src/**/slider.mdx',
-    '../src/**/slider.stories.ts',
-    '../src/**/structured-list.stories.ts',
-    '../src/**/structured-list.mdx',
-    '../src/**/tabs.stories.ts',
-    '../src/**/tabs.mdx',
-    '../src/**/slug.mdx',
-    '../src/**/slug.stories.ts',
-    '../src/**/slug-example.stories.ts',
-    '../src/**/slug-data-table.stories.ts',
-    '../src/**/slug-form.stories.ts',
-    '../src/**/tag.mdx',
-    '../src/**/tag.stories.ts',
-    '../src/**/textarea.mdx',
-    '../src/**/textarea.stories.ts',
-    '../src/**/text-input.mdx',
-    '../src/**/text-input.stories.ts',
-    '../src/**/tile.mdx',
-    '../src/**/tile.stories.ts',
-    '../src/**/tooltip.mdx',
-    '../src/**/tooltip.stories.ts',
-    '../src/**/ui-shell.mdx',
-    '../src/**/ui-shell.stories.ts',
-    '../src/**/toggle.mdx',
-    '../src/**/toggle.stories.ts',
-    '../src/**/toggletip.mdx',
-    '../src/**/toggletip.stories.ts',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   {
     ignore: ['../src/**/docs/*.mdx'],
@@ -130,8 +29,9 @@ const config: StorybookConfig = {
   stories: stories,
   addons: [
     '@storybook/addon-links',
-    '@storybook/addon-essentials',
     '@storybook/addon-mdx-gfm',
+    '@storybook/addon-essentials',
+    '@storybook/addon-storysource',
     'storybook-addon-accessibility-checker',
   ],
   framework: {
@@ -140,16 +40,7 @@ const config: StorybookConfig = {
   },
   async viteFinal(config) {
     // Merge custom configuration into the default config
-    const x = mergeConfig(config, {
-      // Add dependencies to pre-optimization)
-      // resolve: {
-      //   alias: [{ find: "@", replacement: resolve(__dirname, "node_modules") }]
-      // },
-      // resolve: {
-      //   alias: {
-      //     '@carbon/web-components/es/icons': path.resolve(__dirname, '@carbon/icons/lib') },
-      // },
-      assetsInclude: ['**/*.html'],
+    return mergeConfig(config, {
       plugins: [
         litStyleLoader(),
         litTemplateLoader(),
@@ -160,9 +51,6 @@ const config: StorybookConfig = {
         exclude: ['lit', 'lit-html'],
       },
     });
-
-    // console.log(x)
-    return x;
   },
   docs: {
     autodocs: true,

packages/carbon-web-components/.storybook/manager-head.html

@@ -0,0 +1,39 @@
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, Web Components, Custom Elements" />
+<meta
+  name="description"
+  content="This is the Custom Elements implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs." />
+
+<!-- Open Graph -->
+<meta property="og:title" content="Carbon Custom Elements" />
+<meta property="og:site_name" content="Carbon Custom Elements" />
+<meta
+  property="og:description"
+  content="This is the Custom Elements implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs." />
+<meta
+  property="og:url"
+  content="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components" />
+
+<!-- Social -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image:alt" content="Carbon Design System" />
+<meta name="twitter:site" content="@_carbondesign" />
+
+<!-- Storybook override -->
+<script>
+    setTimeout(function () {
+      document.title = 'Carbon Web Components';
+    }, 1000);
+</script>
+
+<style>
+
+  body div[data-item-id='data-table--overview'],
+  body div[data-item-id='list--overview'],
+  body div[data-item-id='notification--overview'],
+  body div[data-item-id='tile--overview']
+   {
+    display: none;
+  }
+</style>

packages/carbon-web-components/.storybook/preview.js

@@ -162,6 +162,7 @@ export const parameters = {
   },
   options: {
     storySort: {
+      method: 'alphabetical',
       order: [
         'Introduction',
         [

packages/carbon-web-components/docs/carbon-cdn-style-helpers.mdx

@@ -1,4 +1,4 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
+import { Description, Meta } from '@storybook/blocks';
 
 <Meta title="Introduction/Carbon CDN style helpers" />
 

packages/carbon-web-components/docs/form.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Introduction/Form participation" />
 

packages/carbon-web-components/docs/styling.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Introduction/Custom styles" />
 

packages/carbon-web-components/docs/welcome.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/blocks';
 
 <Meta title="Introduction/Welcome" />
 

packages/carbon-web-components/src/components/accordion/accordion.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 import * as AccordionStories from './accordion.stories';
 
@@ -36,8 +36,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/accordion/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['accordion'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['accordion'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 

packages/carbon-web-components/src/components/breadcrumb/breadcrumb.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 import * as BreadcrumbStories from './breadcrumb.stories';
 
@@ -22,8 +22,8 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/breadcrumb/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['breadcrumb'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['breadcrumb'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 

packages/carbon-web-components/src/components/breadcrumb/breadcrumb.stories.ts

@@ -14,7 +14,6 @@ import './breadcrumb-link';
 import './breadcrumb-overflow-menu';
 import '../overflow-menu/overflow-menu-body';
 import './breadcrumb-skeleton';
-import storyDocs from './breadcrumb.mdx';
 
 const args = {
   ariaLabel: '',
@@ -123,11 +122,6 @@ export const Playground = {
 
 const meta = {
   title: 'Components/Breadcrumb',
-  parameters: {
-    docs: {
-      page: storyDocs,
-    },
-  },
 };
 
 export default meta;

packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts

@@ -46,7 +46,7 @@ class CDSBreadcrumb extends LitElement {
     `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
 }
 
 export default CDSBreadcrumb;

packages/carbon-web-components/src/components/button/button-set.ts

@@ -68,7 +68,7 @@ class CDSButtonSet extends LitElement {
     return `${prefix}-button`;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */

packages/carbon-web-components/src/components/button/button-skeleton.ts

@@ -75,7 +75,7 @@ class CDSButtonSkeleton extends CDSButton {
         `;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
 }
 
 export default CDSButtonSkeleton;

packages/carbon-web-components/src/components/button/button.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 import Add16 from '@carbon/web-components/es/icons/add/16';
 import * as ButtonStories from './button.stories';
@@ -36,8 +36,8 @@ import '@carbon/web-components/es/components/button/index.js';
 @use '@carbon/styles/scss/components/button';
 ```
 
-<Description markdown={`${cdnJs({ components: ['button'] })}`} />
-<Description markdown={`${cdnCss()}`} />
+<Markdown>{`${cdnJs({ components: ['button'] })}`}</Markdown>
+<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 

packages/carbon-web-components/src/components/button/button.stories.ts

@@ -20,7 +20,6 @@ import {
   BUTTON_TOOLTIP_POSITION,
 } from './button';
 import './index';
-import storyDocs from './button.mdx';
 
 const kind = {
   [`Primary button (${BUTTON_KIND.PRIMARY})`]: BUTTON_KIND.PRIMARY,
@@ -420,9 +419,6 @@ const meta = {
   title: 'Components/Button',
   parameters: {
     actions: { argTypesRegex: '^on.*' },
-    docs: {
-      page: storyDocs,
-    },
   },
 };
 

packages/carbon-web-components/src/components/button/button.ts

@@ -380,7 +380,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
 }
 
 export default CDSButton;

packages/carbon-web-components/src/components/checkbox/checkbox-group.ts

@@ -229,7 +229,7 @@ class CDSCheckboxGroup extends LitElement {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
 }
 
 export default CDSCheckboxGroup;

packages/carbon-web-components/src/components/checkbox/checkbox.mdx

@@ -1,6 +1,5 @@
-import { ArgsTable, Markdown, Meta } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-
 import * as CheckboxStories from './checkbox.stories';
 
 <Meta of={CheckboxStories} /> 

packages/carbon-web-components/src/components/checkbox/checkbox.stories.ts

@@ -9,7 +9,6 @@
 
 import { html } from 'lit';
 import { prefix } from '../../globals/settings';
-import storyDocs from './checkbox.mdx';
 import './index';
 
 const checkboxLabel = 'Checkbox label';
@@ -139,9 +138,6 @@ const meta = {
   title: 'Components/Checkbox',
   parameters: {
     actions: { argTypesRegex: '^on.*' },
-    docs: {
-      page: storyDocs,
-    },
   },
 };
 

packages/carbon-web-components/src/components/checkbox/checkbox.ts

@@ -299,7 +299,7 @@ class CDSCheckbox extends FocusMixin(FormMixin(LitElement)) {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
   };
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom Vite loader
 }
 
 export default CDSCheckbox;