fix(storybook): loads with page reload upon change

carbon-design-system · Dec 14, 2023 · 6d5d656 · 6d5d656
1 parent 4e2cfb9
commit 6d5d656
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 22 deletions.
diff --git a/web-components/packages/carbon-web-components/.storybook/container.ts b/web-components/packages/carbon-web-components/.storybook/container.ts
@@ -30,7 +30,6 @@ const container = ({
   <cds-skip-to-content href="#main-content"></cds-skip-to-content>
   <div
     id="main-content"
-    style="background: red;"
     name="main-content"
     data-floating-menu-container
     role="${hasMainTag ? 'none' : 'main'}">

diff --git a/web-components/packages/carbon-web-components/.storybook/main.ts b/web-components/packages/carbon-web-components/.storybook/main.ts
@@ -2,23 +2,14 @@ import type { StorybookConfig } from '@storybook/web-components-vite';
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
 
-import { join, dirname } from 'path';
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
   ],
   framework: {
-    name: getAbsolutePath('@storybook/web-components-vite'),
+    name: '@storybook/web-components-vite',
     options: {},
   },
   async viteFinal(config) {
@@ -27,7 +18,7 @@ const config: StorybookConfig = {
       // Add dependencies to pre-optimization
       plugins: [litStyleLoader(), litTemplateLoader()],
       optimizeDeps: {
-        include: ['storybook-dark-mode', '@storybook/web-components'],
+        include: ['@storybook/web-components'],
         exclude: ['lit', 'lit-html']
       },
     });

diff --git a/...rbon-web-components/.storybook/preview.ts → ...rbon-web-components/.storybook/preview.js b/...rbon-web-components/.storybook/preview.ts → ...rbon-web-components/.storybook/preview.js
@@ -1,16 +1,16 @@
-import { Preview, setCustomElementsManifest } from '@storybook/web-components';
+import {  setCustomElementsManifest } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 import container from './container';
 import theme from './theme';
 
 
 setCustomElementsManifest(customElements);
 
-export const preview: Preview = {
-  parameters: {
-    controls: { expanded: true },
-  },
-};
+// export const Preview = {
+//   parameters: {
+//     controls: { expanded: true },
+//   },
+// };
 
 export const decorators = [
   function decoratorContainer(story, context) {

diff --git a/web-components/packages/carbon-web-components/src/components/button/button.ts b/web-components/packages/carbon-web-components/src/components/button/button.ts
@@ -299,7 +299,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
             </p>
           `
         : html`
-        <p>a</p>
+        <p>sss</p>
             <a
               id="button"
               part="button"