feat(components): upgrading storybook to v7

.storybook/main.js

@@ -14,5 +14,8 @@ module.exports = {
     '@storybook/addon-interactions',
     'storybook-dark-mode',
   ],
+  features: {
+    legacyMdx1: true, // 👈 Enables MDX v1 support
+  },
   staticDirs: [join(__dirname, './public')],
 };

.storybook/preview.js

@@ -18,9 +18,7 @@ export const parameters = {
   },
   darkMode: {
     // Override the default dark theme
-    dark: {
-      ...darkTheme,
-    },
+    dark: darkTheme,
     // Override the default light theme
     light: lightTheme,
 

.storybook/theme/markdown-elements.scss

@@ -1,3 +1,6 @@
+.sb-show-main {
+  background-color: var(--mdc-theme-background);
+}
 .sb-show-main .sbdocs-wrapper {
   background-color: var(--mdc-theme-background);
   background-image: url(./globe.svg);
@@ -20,35 +23,35 @@
     margin-top: 2rem;
   }
 
-  table.docblock-argstable {
-    border-collapse: unset;
+  table {
+    border-collapse: collapse;
     border-radius: 0;
 
     tbody {
       box-shadow: none;
+    }
 
-      tr {
-        height: 3rem;
-      }
+    tr {
+      height: 3rem;
+    }
 
-      td {
-        background: transparent;
-        border-bottom: 1px solid var(--mdc-theme-border);
-        color: var(--mdc-theme-text-primary-on-background);
-        font-family: var(--mdc-typography-font-family);
-        font-size: var(--mdc-typography-body1-font-size);
-        font-weight: var(--mdc-typography-body1-font-weight);
-        line-height: var(--mdc-typography-body1-line-height);
-        min-height: 3rem;
-        padding: 0 1rem;
-        vertical-align: middle;
+    td {
+      background: transparent;
+      border-bottom: 1px solid var(--mdc-theme-border);
+      color: var(--mdc-theme-text-primary-on-background);
+      font-family: var(--mdc-typography-font-family);
+      font-size: var(--mdc-typography-body1-font-size);
+      font-weight: var(--mdc-typography-body1-font-weight);
+      line-height: var(--mdc-typography-body1-line-height);
+      min-height: 3rem;
+      padding: 0 1rem;
+      vertical-align: middle;
 
-        &:first-of-type {
-          padding-left: 1rem !important;
-        }
-        &:last-of-type {
-          padding-right: 1rem !important;
-        }
+      &:first-of-type {
+        padding-left: 1rem !important;
+      }
+      &:last-of-type {
+        padding-right: 1rem !important;
       }
     }
 
@@ -100,7 +103,7 @@
     }
   }
 
-  a.link-item {
+  a.link-item[href] {
     display: block;
     padding: 16px;
     border: 1px solid var(--mdc-theme-border);
@@ -173,20 +176,20 @@
       border-color: var(--mdc-theme-surface-canvas);
     }
   }
-  .sbdocs {
-    &-h1,
-    &-h2,
-    &-h3,
-    &-h4,
-    &-h5,
-    &-h6 {
-      &:first-of-type {
-        margin-top: 0;
-        padding-top: 4rem;
-      }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:first-of-type {
+      margin-top: 0;
+      padding-top: 4rem;
     }
   }
-  .sbdocs-h1,
+
+  h1,
   .sbdocs-title {
     color: var(--mdc-theme-text-primary-on-background);
     font-family: var(--mdc-typography-headline1-font-family);
@@ -196,14 +199,9 @@
     margin: 0;
     padding-bottom: 4rem;
     padding-top: 2rem;
-
-    &#covalent-design-system {
-      padding-top: 0;
-      max-width: 40rem;
-    }
   }
-  .sbdocs-h2,
-  .sbdocs-h2:first-of-type {
+  h2,
+  h2:first-of-type {
     border: none;
     color: var(--mdc-theme-text-primary-on-background);
     font-family: var(--mdc-typography-headline2-font-family);
@@ -214,7 +212,7 @@
     padding-bottom: 1.5rem;
     padding-top: 2rem;
   }
-  .sbdocs-h3 {
+  h3 {
     color: var(--mdc-theme-text-primary-on-background);
     font-family: var(--mdc-typography-headline3-font-family);
     font-size: var(--mdc-typography-headline3-font-size);
@@ -224,7 +222,7 @@
     padding-bottom: 1.5rem;
     padding-top: 2rem;
   }
-  .sbdocs-h4 {
+  h4 {
     color: var(--mdc-theme-text-primary-on-background);
     font-family: var(--mdc-typography-headline4-font-family);
     font-size: var(--mdc-typography-headline4-font-size);
@@ -234,7 +232,7 @@
     padding-bottom: 1.5rem;
     padding-top: 2rem;
   }
-  .sbdocs-h5 {
+  h5 {
     color: var(--mdc-theme-text-primary-on-background);
     font-family: var(--mdc-typography-headline5-font-family);
     font-size: var(--mdc-typography-headline5-font-size);
@@ -244,7 +242,7 @@
     padding-bottom: 1.5rem;
     padding-top: 2rem;
   }
-  .sbdocs-h6 {
+  h6 {
     color: var(--mdc-theme-text-primary-on-background);
     font-family: var(--mdc-typography-headline6-font-family);
     font-size: var(--mdc-typography-headline6-font-size);
@@ -254,17 +252,17 @@
     padding-bottom: 1.5rem;
     padding-top: 2rem;
   }
-  .sbdocs-hr {
+  hr {
     border-color: var(--mdc-theme-border);
     height: 1px;
     margin: 5rem 0 0;
     padding: 0 0 3rem;
   }
-  .sbdocs-ul {
+  ul {
     margin: 0;
     padding-top: 0.5rem;
   }
-  .sbdocs-li {
+  li {
     color: var(--mdc-theme-text-secondary-on-background);
     font-family: var(--mdc-typography-font-family);
     font-size: var(--mdc-typography-body1-font-size);
@@ -276,11 +274,11 @@
     &:first-of-type {
       padding-top: 0;
     }
-    .sbdocs-ul {
+    ul {
       padding-top: 0.75rem;
     }
   }
-  .sbdocs-p {
+  p {
     color: var(--mdc-theme-text-secondary-on-background);
     font-family: var(--mdc-typography-font-family);
     font-size: var(--mdc-typography-body1-font-size);
@@ -291,13 +289,13 @@
     padding-bottom: 0.75rem;
     padding-top: 0;
   }
-  .sbdocs-table {
+  table {
     font-family: var(--mdc-typography-subtitle2-font-family);
 
     thead th {
       height: 3.5rem;
     }
-    tbody td {
+    td {
       height: 3rem;
     }
     tr {

libs/components/.storybook/main.js

@@ -30,4 +30,5 @@ module.exports = {
       assetsInclude: ['**/*.html'],
     });
   },
+  framework: '@storybook/html-vite'
 };

libs/components/.storybook/preview.js

@@ -1,23 +1,19 @@
-import anysort from 'anysort';
-
 import { parameters as mainParameters } from '../../../.storybook/preview';
 
 import '../theme/theme.scss';
 import '../../../.storybook/theme/markdown-elements.scss';
 
 export const parameters = {
   options: {
-    storySort: (previous, next) => {
-      const [previousStory, previousMeta] = previous;
-      const [nextStory, nextMeta] = next;
-
-      return anysort(previousMeta.kind, nextMeta.kind, [
+    storySort: {
+      order: [
+        'Overview',
         'Introduction',
-        'Guides/**',
-        'Patterns/**',
-        'Basics/**',
-        'Components/**/Overview',
-      ]);
+        'Guides',
+        'Patterns',
+        'Basics',
+        'Components',
+      ],
     },
   },
   ...mainParameters,

libs/components/README.md

@@ -10,34 +10,19 @@ All components are published in npm and available on any CDN that host npm modul
 
 ```html
 <!-- using a specific version -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@covalent/[email protected]/theme.css"
-/>
-<script
-  type="module"
-  src="https://cdn.jsdelivr.net/npm/@covalent/[email protected]/index.js"
-></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/[email protected]/index.mjs"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/[email protected]/style.css" />
 
 <!-- using the latest version -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/theme.css"
-/>
-<script
-  type="module"
-  src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/index.js"
-></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/index.mjs"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/style.css" />
 ```
 
 the component bundles are also available individually
 
 ```html
 <!-- just include the button component -->
-<script
-  type="module"
-  src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/button.js"
-></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/button.mjs"></script>
 ```
 
 ### Basic usage
@@ -48,8 +33,8 @@ once the script is loaded, its now possible to start using our custom HTML eleme
 <!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/theme.css" />
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/index.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/index.mjs"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/style.css" />
   </head>
   <body>
     <cv-button raised>Hello world<cv-button>
@@ -79,7 +64,7 @@ Applications using angular can use covalent components in the same way they use
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { AppComponent } from './app.component';
 
-import '@covalent/components/button.js';
+import '@covalent/components/button';
 
 @component({
   standalone: true,

libs/components/package.json

@@ -10,6 +10,10 @@
       "import": "./index.mjs",
       "require": "./index.js"
     },
+    "./style.css": {
+      "import": "./style.css",
+      "require": "./style.css"
+    },
     "./action-ribbon": {
       "types": "./action-ribbon/action-ribbon.d.ts",
       "import": "./action-ribbon.mjs",
@@ -40,6 +44,16 @@
       "import": "./card.mjs",
       "require": "./card.js"
     },
+    "./chip": {
+      "types": "./chips/chip.d.ts",
+      "import": "./chip.mjs",
+      "require": "./chip.js"
+    },
+    "./chip-set": {
+      "types": "./chip/chip-set.d.ts",
+      "import": "./chip-set.mjs",
+      "require": "./chip-set.js"
+    },
     "./circular-progress": {
       "types": "./circular-progress/circular-progress.d.ts",
       "import": "./circular-progress.mjs",
@@ -100,11 +114,6 @@
       "import": "./list.mjs",
       "require": "./list.js"
     },
-    "./list/list-expansion": {
-      "types": "./list/list-expansion.d.ts",
-      "import": "./list-expansion.mjs",
-      "require": "./list-expansion.js"
-    },
     "./list/list-item": {
       "types": "./list/list-item.d.ts",
       "import": "./list-item.mjs",

libs/components/project.json

@@ -8,9 +8,7 @@
     "serve": {
       "executor": "nx:run-commands",
       "options": {
-        "commands": [
-          "cd libs/components/ && vite"
-        ],
+        "commands": ["cd libs/components/ && vite"],
         "parallel": false
       }
     },
@@ -57,7 +55,7 @@
       "options": {
         "commands": [
           {
-            "command": "npx start-storybook -c libs/components/.storybook"
+            "command": "storybook dev -c libs/components/.storybook"
           }
         ]
       }
@@ -67,7 +65,7 @@
       "options": {
         "commands": [
           {
-            "command": "npx build-storybook -c libs/components/.storybook -o dist/storybook/components"
+            "command": "storybook build -c libs/components/.storybook -o dist/storybook/components"
           }
         ]
       }