Merge pull request #764 from baloise-incubator/756-button-only-add-th…

…e-spinner-to-the-dom-when-loading-is-true perf: use custom bundles and do not ship doc components
baloise · Oct 18, 2022 · b1285cc · b1285cc
2 parents ea7f9da + ab4973f
commit b1285cc
Show file tree

Hide file tree

Showing 12 changed files with 187 additions and 1,847 deletions.
diff --git a/packages/components-angular/package-lock.json b/packages/components-angular/package-lock.json
diff --git a/packages/components-table/package-lock.json b/packages/components-table/package-lock.json
diff --git a/packages/components/config/doc.components.ts b/packages/components/config/doc.components.ts
@@ -7,15 +7,21 @@ export const docComponents = [
   'bal-doc-github',
   'bal-doc-icons',
   'bal-doc-image',
+  'bal-doc-lead',
+  'bal-doc-link-list',
+  'bal-doc-link-list-item',
   'bal-doc-shades',
   'bal-doc-support-color',
-  'bal-doc-lead',
   'bal-doc-tabs',
+  'bal-doc-tokens-radius',
+  'bal-doc-tokens-border',
+  'bal-doc-tokens-breakpoints',
+  'bal-doc-tokens-colors',
+  'bal-doc-tokens-font-sizes',
+  'bal-doc-tokens-font-weight',
+  'bal-doc-tokens-font',
+  'bal-doc-tokens-shadow',
+  'bal-doc-tokens-spacing',
   'bal-doc-usage',
   'bal-doc-usage-item',
-  'bal-doc-link-list',
-  'bal-doc-link-list-item',
-  'bal-doc-link-tabs',
-  'bal-doc-link-usage',
-  'bal-doc-link-usage-item',
 ]
diff --git a/packages/components/config/stencil.basic.config.ts b/packages/components/config/stencil.basic.config.ts
@@ -11,6 +11,7 @@ export const StencilBaseConfig: Config = {
   globalScript: 'src/global.ts',
   watchIgnoredRegex: [/\.stories\.(js|jsx|ts|tsx|mdx)$/, /\/stories\//], // ignore storybook files in --watch mode
   enableCache: true,
+  tsconfig: 'tsconfig.json',
   sourceMap: true,
   autoprefixCss: true,
   plugins: [sass()],
@@ -24,6 +25,108 @@ export const StencilBaseConfig: Config = {
     },
     VueGenerator('../..', './.storybook/vue/components.ts', []),
   ],
+  bundles: [
+    { components: ['bal-accordion'] },
+    { components: ['bal-app'] },
+    { components: ['bal-badge'] },
+    { components: ['bal-button', 'bal-button-group'] },
+    {
+      components: [
+        'bal-card',
+        'bal-card-actions',
+        'bal-card-button',
+        'bal-card-content',
+        'bal-card-subtitle',
+        'bal-card-title',
+      ],
+    },
+    { components: ['bal-close'] },
+    { components: ['bal-data', 'bal-data-item', 'bal-data-label', 'bal-data-value'] },
+    { components: ['bal-footer'] },
+    { components: ['bal-heading', 'bal-text'] },
+    { components: ['bal-hint', 'bal-hint-text', 'bal-hint-title'] },
+    { components: ['bal-icon'] },
+    { components: ['bal-image-slider', 'bal-image-slider-item'] },
+    {
+      components: [
+        'bal-list',
+        'bal-list-item',
+        'bal-list-item-accordion-head',
+        'bal-list-item-accordion-body',
+        'bal-list-item-content',
+        'bal-list-item-icon',
+        'bal-list-item-title',
+        'bal-list-item-subtitle',
+      ],
+    },
+    { components: ['bal-logo'] },
+    {
+      components: ['bal-navbar', 'bal-navbar-brand', 'bal-navbar-menu', 'bal-navbar-menu-start', 'bal-navbar-menu-end'],
+    },
+    {
+      components: [
+        'bal-navigation',
+        'bal-navigation-level-block',
+        'bal-navigation-level-block-item',
+        'bal-navigation-level-main',
+        'bal-navigation-level-meta',
+        'bal-navigation-levels',
+        'bal-navigation-main',
+        'bal-navigation-main-body',
+        'bal-navigation-main-head',
+        'bal-navigation-menu',
+        'bal-navigation-menu-list',
+        'bal-navigation-menu-list-item',
+        'bal-navigation-meta',
+        'bal-navigation-meta-end',
+        'bal-navigation-meta-start',
+        'bal-navigation-popover',
+      ],
+    },
+    { components: ['bal-pagination'] },
+    { components: ['bal-popover', 'bal-popover-content'] },
+    { components: ['bal-product-slider', 'bal-product-slider-item'] },
+    { components: ['bal-shape'] },
+    { components: ['bal-slider', 'bal-slider-item'] },
+    { components: ['bal-spinner'] },
+    {
+      components: [
+        'bal-stage',
+        'bal-stage-back-link',
+        'bal-stage-body',
+        'bal-stage-foot',
+        'bal-stage-head',
+        'bal-stage-image',
+      ],
+    },
+    { components: ['bal-table'] },
+    { components: ['bal-tabs', 'bal-tab-item'] },
+    { components: ['bal-tag', 'bal-tag-group'] },
+    //
+    // form components
+    { components: ['bal-checkbox', 'bal-checkbox-group'] },
+    { components: ['bal-datepicker'] },
+    { components: ['bal-field', 'bal-field-label', 'bal-field-control', 'bal-field-message', 'bal-field-hint'] },
+    { components: ['bal-file-upload'] },
+    { components: ['bal-form'] },
+    { components: ['bal-form-grid', 'bal-form-col'] },
+    { components: ['bal-input'] },
+    { components: ['bal-input-group'] },
+    { components: ['bal-input-slider'] },
+    { components: ['bal-input-stepper'] },
+    { components: ['bal-number-input'] },
+    { components: ['bal-radio', 'bal-radio-group'] },
+    { components: ['bal-select', 'bal-select-option'] },
+    { components: ['bal-textarea'] },
+    //
+    // overlay components
+    { components: ['bal-modal', 'bal-modal-body', 'bal-modal-header'] },
+    { components: ['bal-notices'] },
+    { components: ['bal-notification'] },
+    { components: ['bal-sheet'] },
+    { components: ['bal-snackbar'] },
+    { components: ['bal-toast'] },
+  ],
   rollupPlugins: {
     before: [
       {