Feature: theming enhancements and additions

.gitignore

@@ -68,7 +68,18 @@ storybook_compiled
 # copied assets when preparing builds
 apps/**/.storybook/static/dist
 packages/**/src/assets/fonts
+apps/**/public/explorer-1/
+apps/**/public/edu/explorer-1/
+packages/**/public/explorer-1/
+packages/**/public/edu/explorer-1/
+!public/explorer-1/**/.gitkeep
+!packages/common/src/public/explorer-1
+apps/vue-storybook/public/fonts
+apps/vue-storybook/public/css
 
 # dist
 dist
-!packages/**/dist
+!packages/**/dist
+
+
+!.gitkeep

apps/html-storybook/.storybook/preview.ts

@@ -4,7 +4,7 @@ import '@explorer-1/html/src/assets/scss/styles.scss'
 import './../public/dist/css/font-face.css'
 import '@explorer-1/html/src/main.js'
 import '@explorer-1/common-storybook/src/config/canvas.css'
-import { withGlobals } from '@explorer-1/common-storybook/src/config/withGlobals'
+import { withGlobals } from './withGlobals'
 
 // viewports that match our tailwind config
 const customViewports = {

apps/html-storybook/package.json

@@ -14,9 +14,9 @@
   "prettier": "@explorer-1/prettier-config",
   "scripts": {
     "dev": "pnpm run storybook",
-    "prepare": "npm run prepare:clean && npm run prepare:public",
+    "prepare": "npm run prepare:clean && npm run prepare:assets",
     "prepare:clean": "rimraf ./public/dist",
-    "prepare:public": "cp -R ./node_modules/@explorer-1/html/dist/assets/ ./public/dist",
+    "prepare:assets": "cp -R ./node_modules/@explorer-1/html/dist/assets/ ./public/dist",
     "storybook": "pnpm run prepare && storybook dev -c .storybook -p 7007 --ci",
     "lint": "eslint .storybook",
     "lint:fix": "eslint .storybook --fix",

apps/vue-storybook/.storybook/main.ts

@@ -1,6 +1,12 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
+import remarkGfm from 'remark-gfm'
 const config = {
-  stories: ['./../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: [
+    './../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    './../stories/**/*.docs.mdx',
+    './../docs/**/*.stories.@(js|jsx|ts|tsx)',
+    './../docs/**/*.docs.mdx'
+  ],
   addons: [
     {
       name: '@storybook/addon-essentials',
@@ -10,11 +16,25 @@ const config = {
         outlines: false
       }
     },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm]
+          }
+        }
+      }
+    },
     '@storybook/addon-a11y',
     '@whitespace/storybook-addon-html',
     'storybook-addon-vue-slots'
   ],
-
+  staticDirs: [
+    './../public',
+    './../node_modules/@explorer-1/common-storybook/src/public',
+    './../node_modules/@explorer-1/common/src'
+  ],
   framework: {
     name: '@storybook/vue3-vite',
     options: {}

apps/vue-storybook/.storybook/manager-head.html

@@ -0,0 +1,40 @@
+<style type="text/css">
+  /* styles for the storybook sidebar */
+  @import 'css/font-face.css';
+
+  .sidebar-item {
+    font-family: Metropolis, sans-serif !important;
+    line-height: 1.2rem !important;
+    display: flex !important;
+    align-items: center !important;
+  }
+  .sidebar-item svg:not([type='document']) {
+    color: inherit !important;
+  }
+
+  /* www should be in uppercase */
+  .sidebar-item#www {
+    text-transform: uppercase;
+  }
+
+  /* create illusion of hrs between sidebar sections */
+  .sidebar-item#www,
+  .sidebar-item#appendix {
+    border-radius: 0;
+    border-top: 2px solid rgba(0, 0, 0, 0.1);
+    margin-top: 0.5rem;
+    padding-top: 1rem !important;
+  }
+
+  /* logo placement tweaks */
+  .sidebar-header > div {
+    margin-right: 0 !important;
+  }
+  .sidebar-header a {
+    margin: 6px 0 !important;
+  }
+  .sidebar-header a > img {
+    max-width: none !important;
+    max-height: none !important;
+  }
+</style>

apps/vue-storybook/.storybook/manager.ts

@@ -0,0 +1,11 @@
+// customizing Storybook's manager UI
+// see config options: https://storybook.js.org/docs/vue/configure/features-and-behavior
+
+import { addons } from '@storybook/manager-api'
+import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
+
+// to collapse all sections and use custom theme
+addons.setConfig({
+  theme: customTheme,
+  sidebar: { showRoots: false }
+})

apps/vue-storybook/.storybook/preview-head.html

@@ -0,0 +1,146 @@
+<style type="text/css">
+  /* styles for docs tab */
+  /* @import 'dist/css/font-face.css'; */
+
+  #storybook-docs
+    .sbdocs
+    .sbdocs-content
+    *:not(.sbdocs-preview, .sbdocs-preview *, pre, pre *, code, code *) {
+    font-family: Metropolis, sans-serif !important;
+  }
+  /* make docs have full width iframes
+  ** rescopes width to all nested divs, not the container wrapper */
+  .sbdocs.sbdocs-content {
+    max-width: 1950px;
+  }
+  .sbdocs.sbdocs-content > * {
+    width: 100%;
+    max-width: 950px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .sbdocs.sbdocs-content > div[id*='anchor--'],
+  .sbdocs.sbdocs-content .reactdocs-content {
+    max-width: none;
+  }
+  .sbdocs.sbdocs-content > div[id*='anchor--'] > *,
+  .sbdocs.sbdocs-content .reactdocs-content > div,
+  .reactdocs-container {
+    width: 100%;
+    max-width: 950px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* .sbdocs.sbdocs-content .sbdocs-pre {
+    margin-left: auto;
+    margin-right: auto;
+  } */
+  .sbdocs.sbdocs-content > pre {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .sbdocs .sbdocs-content ol:not(.list-none) {
+    list-style-type: decimal;
+  }
+
+  /* custom border color for h2 to match gray-light-mid */
+  .sbdocs.sbdocs-h2 {
+    border-bottom: 1px solid rgba(216, 216, 216, 1);
+  }
+
+  /* .sbdocs-preview-full-width overrides max width in doc view
+  ** use this class via the `className` prop on Canvas
+  */
+  .sbdocs.sbdocs-content .sbdocs-preview-full-width,
+  .sbdocs-preview-full-width .sbdocs.sbdocs-content .sbdocs-preview,
+  .sbdocs.sbdocs-content .sb-anchor .sbdocs-preview {
+    max-width: none !important;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  /* unset the mysterious height that storybook adds to Canvas doc blocks rendered via a React component */
+  .sbdocs.sbdocs-content .reactdocs-content .sbdocs-preview .docs-story div[height='20'] {
+    height: unset;
+  }
+
+  /* sometimes inline stories still need an explicit height set */
+  .sbdocs-inline-height .docs-story {
+    height: 500px !important;
+  }
+  .sbdocs-inline-height-2xs .docs-story {
+    height: 200px !important;
+  }
+  .sbdocs-inline-height-xs .docs-story {
+    height: 300px !important;
+  }
+  .sbdocs-inline-height-sm .docs-story {
+    height: 400px !important;
+  }
+  .sbdocs-inline-height-lg .docs-story {
+    height: 600px !important;
+  }
+  .sbdocs-inline-height-xl .docs-story {
+    height: 700px !important;
+  }
+  .sbdocs-inline-height-2xl .docs-story {
+    height: 800px !important;
+  }
+  .sbdocs-inline-height .docs-story > div:first-child {
+    height: inherit !important;
+  }
+
+  /* sbdocs link style */
+  .sbdocs.sbdocs-a {
+    font-weight: 600;
+    border-bottom: 1px solid #489fdf;
+    color: black;
+  }
+  .sbdocs.sbdocs-a:hover {
+    border-bottom-color: black;
+  }
+
+  /* sbdocs table styles */
+  .sbdocs.sbdocs-table {
+    margin-top: 24px;
+    margin-bottom: 24px;
+  }
+  .sbdocs.sbdocs-table tr:nth-of-type(2n) {
+    background: white;
+  }
+  .sbdocs.sbdocs-table tr th,
+  .sbdocs.sbdocs-table tr td {
+    border-left: none;
+    border-right: none;
+  }
+
+  /* tag or image alignment */
+  .sbdocs.sbdocs-content img[src*='#left'] {
+    float: left;
+  }
+  .sbdocs.sbdocs-content img[src*='#right'] {
+    float: right;
+  }
+  .sbdocs.sbdocs-content img[src*='#center'] {
+    display: block;
+    margin: auto;
+  }
+  .sbdocs.sbdocs-content img[src*='#inline'] {
+    display: inline;
+  }
+
+  /* background color for code blocks */
+  .sbdocs .docblock-source {
+    background-color: #f5f5f5;
+  }
+
+  /* make details > summary text appear clickable in docs */
+  .sbdocs details > summary {
+    cursor: pointer;
+  }
+  .sbdocs details > summary > .sbdocs-span {
+    font-size: unset !important;
+  }
+</style>