fix(doc): define components individually on preview loader

ovh · Jul 29, 2024 · b28a1eb · b28a1eb
1 parent 58c397f
commit b28a1eb
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 5 deletions.
diff --git a/packages/storybook/.storybook/preview.ts b/packages/storybook/.storybook/preview.ts
@@ -1,10 +1,92 @@
 import type { Preview } from '@storybook/web-components';
 import '@ovhcloud/ods-themes/default';
-import { defineCustomElements } from '@ovhcloud/ods-components/dist/loader';
-
-defineCustomElements();
+import { defineCustomElement as defineAccordion } from '@ovhcloud/ods-components/dist/components/ods-accordion';
+import { defineCustomElement as defineBadge } from '@ovhcloud/ods-components/dist/components/ods-badge';
+import { defineCustomElement as defineBreadcrumb } from '@ovhcloud/ods-components/dist/components/ods-breadcrumb';
+import { defineCustomElement as defineBreadcrumbItem } from '@ovhcloud/ods-components/dist/components/ods-breadcrumb-item';
+import { defineCustomElement as defineButton } from '@ovhcloud/ods-components/dist/components/ods-button';
+import { defineCustomElement as defineCard } from '@ovhcloud/ods-components/dist/components/ods-card';
+import { defineCustomElement as defineCheckbox } from '@ovhcloud/ods-components/dist/components/ods-checkbox';
+import { defineCustomElement as defineClipboard } from '@ovhcloud/ods-components/dist/components/ods-clipboard';
+import { defineCustomElement as defineCode } from '@ovhcloud/ods-components/dist/components/ods-code';
+import { defineCustomElement as defineDatepicker } from '@ovhcloud/ods-components/dist/components/ods-datepicker';
+import { defineCustomElement as defineDivider } from '@ovhcloud/ods-components/dist/components/ods-divider';
+import { defineCustomElement as defineFileUpload } from '@ovhcloud/ods-components/dist/components/ods-file-upload';
+import { defineCustomElement as defineFormField } from '@ovhcloud/ods-components/dist/components/ods-form-field';
+import { defineCustomElement as defineIcon } from '@ovhcloud/ods-components/dist/components/ods-icon';
+import { defineCustomElement as defineInput } from '@ovhcloud/ods-components/dist/components/ods-input';
+import { defineCustomElement as defineLink } from '@ovhcloud/ods-components/dist/components/ods-link';
+import { defineCustomElement as defineMedium } from '@ovhcloud/ods-components/dist/components/ods-medium';
+import { defineCustomElement as defineMessage } from '@ovhcloud/ods-components/dist/components/ods-message';
+import { defineCustomElement as defineModal } from '@ovhcloud/ods-components/dist/components/ods-modal';
+import { defineCustomElement as definePagination } from '@ovhcloud/ods-components/dist/components/ods-pagination';
+import { defineCustomElement as definePassword } from '@ovhcloud/ods-components/dist/components/ods-password';
+import { defineCustomElement as definePhoneNumber } from '@ovhcloud/ods-components/dist/components/ods-phone-number';
+import { defineCustomElement as definePopover } from '@ovhcloud/ods-components/dist/components/ods-popover';
+import { defineCustomElement as defineProgressBar } from '@ovhcloud/ods-components/dist/components/ods-progress-bar';
+import { defineCustomElement as defineQuantity } from '@ovhcloud/ods-components/dist/components/ods-quantity';
+import { defineCustomElement as defineRadio } from '@ovhcloud/ods-components/dist/components/ods-radio';
+import { defineCustomElement as defineRange } from '@ovhcloud/ods-components/dist/components/ods-range';
+import { defineCustomElement as defineSelect } from '@ovhcloud/ods-components/dist/components/ods-select';
+import { defineCustomElement as defineSkeleton } from '@ovhcloud/ods-components/dist/components/ods-skeleton';
+import { defineCustomElement as defineSpinner } from '@ovhcloud/ods-components/dist/components/ods-spinner';
+import { defineCustomElement as defineSwitch } from '@ovhcloud/ods-components/dist/components/ods-switch';
+import { defineCustomElement as defineTable } from '@ovhcloud/ods-components/dist/components/ods-table';
+import { defineCustomElement as defineTabs } from '@ovhcloud/ods-components/dist/components/ods-tabs';
+import { defineCustomElement as defineTag } from '@ovhcloud/ods-components/dist/components/ods-tag';
+import { defineCustomElement as defineText } from '@ovhcloud/ods-components/dist/components/ods-text';
+import { defineCustomElement as defineTextarea } from '@ovhcloud/ods-components/dist/components/ods-textarea';
+import { defineCustomElement as defineTimepicker } from '@ovhcloud/ods-components/dist/components/ods-timepicker';
+import { defineCustomElement as defineToggle } from '@ovhcloud/ods-components/dist/components/ods-toggle';
+import { defineCustomElement as defineTooltip } from '@ovhcloud/ods-components/dist/components/ods-tooltip';
 
 const preview: Preview = {
+  loaders: [
+    // This is only needed to display mdx story that includes components as TS story will auto-load what's needed
+    // But for page like Gallery or Menu Migration page, we need to define here all components to avoid a blank page on first render
+    // (defineCustomElements does not work on prod bundle, this need more investigation)
+    () => {
+      defineAccordion();
+      defineBadge();
+      defineBreadcrumb();
+      defineBreadcrumbItem();
+      defineButton();
+      defineCard();
+      defineCheckbox();
+      defineClipboard();
+      defineCode();
+      defineDatepicker();
+      defineDivider();
+      defineFileUpload();
+      defineFormField();
+      defineIcon();
+      defineInput();
+      defineLink();
+      defineMedium();
+      defineMessage();
+      defineModal();
+      definePagination();
+      definePassword();
+      definePhoneNumber();
+      definePopover();
+      defineProgressBar();
+      defineQuantity();
+      defineRadio();
+      defineRange();
+      defineSelect();
+      defineSkeleton();
+      defineSpinner();
+      defineSwitch();
+      defineTable();
+      defineTabs();
+      defineTag();
+      defineText();
+      defineTextarea();
+      defineTimepicker();
+      defineToggle();
+      defineTooltip();
+    },
+  ],
   parameters: {
     docs: {
       toc: {

diff --git a/packages/storybook/stories/components/tooltip/tooltip.stories.ts b/packages/storybook/stories/components/tooltip/tooltip.stories.ts
@@ -1,10 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { ODS_TOOLTIP_POSITION, ODS_TOOLTIP_POSITIONS } from '@ovhcloud/ods-components';
-import { defineCustomElement as defineIcon } from '@ovhcloud/ods-components/dist/components/ods-icon';
 import { html } from 'lit-html';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { CONTROL_CATEGORY, orderControls } from '../../control';
-defineIcon();
 
 const meta: Meta = {
   title: 'ODS Components/Tooltip',