chore: Upgrade to Storybook 8, Tailwind 3, and npm v20+ (#428)

* upgrade to Storybook 8

- recreate theme selection capability
- fix react component renderer
- use dynamic descriptions
- convert mdx
- fix links within stories
- fix js mounting

restoring designlab branding theme

Restoring markdown in Description

* upgrade to Tailwind 3

* fix typography in BlockAccordion after tailwind 3 upgrade

* update class name usage in components after tailwind 3 upgrade

* additional storybook 8 cleanup
- clean up and restoring html viewer
- cleaning up docs in storybook
- fixing percy integration

* linting

* fixing stylelint and linting

* rebuilding css

* removing storybook/addon-mdx-gfm

.gitignore

@@ -30,3 +30,6 @@ out/
 # Linter caches
 .eslintcache
 .stylelintcache
+
+# logs
+.log

.nvmrc

@@ -1 +1 @@
-v16.20.2
+v20.13.1

README.md

@@ -246,7 +246,7 @@ require('@fancyapps/ui')
 
 ## Component templates (HTML)
 
-Reference the [Explorer 1 Storybook](https://nasa-jpl.github.io/explorer-1/) for HTML snippets you can use to create components and build your pages. Step-by-step instructions on how to copy HTML snippets can be found on the [Getting Started Guide for Developers](https://nasa-jpl.github.io/explorer-1/?path=/docs/getting-started-developer--page#components-and-html-templates) page.
+Reference the [Explorer 1 Storybook](https://nasa-jpl.github.io/explorer-1/) for HTML snippets you can use to create components and build your pages. Step-by-step instructions on how to copy HTML snippets can be found on the [Getting Started Guide for Developers](https://nasa-jpl.github.io/explorer-1/?path=/docs/getting-started-developer--docs#components-and-html-templates) page.
 
 ## For contributing developers
 

dist/css/font-face.css

@@ -3,87 +3,88 @@
   font-weight: 800;
   font-style: normal;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-ExtraBold.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-ExtraBold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 700;
   font-style: normal;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-Bold.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-Bold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 700;
   font-style: italic;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-BoldItalic.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-BoldItalic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 600;
   font-style: normal;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-SemiBold.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-SemiBold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 600;
   font-style: italic;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-SemiBoldItalic.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-SemiBoldItalic.woff2')
+    format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 500;
   font-style: normal;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-Medium.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-Medium.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 500;
   font-style: italic;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-MediumItalic.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-MediumItalic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 400;
   font-style: normal;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-Regular.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-Regular.woff2') format('woff2');
 }
 
 @font-face {
   font-family: Metropolis;
   font-weight: 400;
   font-style: italic;
   font-display: swap;
-  src: url(../fonts/metropolis/Metropolis-RegularItalic.woff2) format('woff2');
+  src: url('../fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Archivo Narrow';
   font-weight: 700;
   font-style: normal;
   font-display: swap;
-  src: url(../fonts/archivo-narrow/ArchivoNarrow-Bold.woff2) format('woff2');
+  src: url('../fonts/archivo-narrow/ArchivoNarrow-Bold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Archivo Narrow';
   font-weight: 700;
   font-style: italic;
   font-display: swap;
-  src: url(../fonts/archivo-narrow/ArchivoNarrow-BoldItalic.woff2)
+  src: url('../fonts/archivo-narrow/ArchivoNarrow-BoldItalic.woff2')
     format('woff2');
 }
 
@@ -92,14 +93,15 @@
   font-weight: 600;
   font-style: normal;
   font-display: swap;
-  src: url(../fonts/archivo-narrow/ArchivoNarrow-SemiBold.woff2) format('woff2');
+  src: url('../fonts/archivo-narrow/ArchivoNarrow-SemiBold.woff2')
+    format('woff2');
 }
 
 @font-face {
   font-family: 'Archivo Narrow';
   font-weight: 600;
   font-style: italic;
   font-display: swap;
-  src: url(../fonts/archivo-narrow/ArchivoNarrow-SemiBoldItalic.woff2)
+  src: url('../fonts/archivo-narrow/ArchivoNarrow-SemiBoldItalic.woff2')
     format('woff2');
 }