chore: consolidate components and docs into one Storybook (#494)

* converting remaining mdx files * changing all primary story names to default to prep for docs migration * adding overview pages in storybook * changing name of Default story to BaseStory * adding form components * reorganizing stories * fixing heroes overview * updating storybook to v8.2.4
nasa-jpl · Jul 16, 2024 · 3d8cc33 · 3d8cc33
1 parent ee432c4
commit 3d8cc33
Show file tree

Hide file tree

Showing 155 changed files with 2,109 additions and 1,401 deletions.
diff --git a/apps/html-storybook/package.json b/apps/html-storybook/package.json
@@ -26,7 +26,8 @@
     "lint:fix": "eslint .storybook --fix",
     "build": "pnpm run prepare && storybook build -c .storybook -o storybook_compiled",
     "percy": "percy storybook http://localhost:7007",
-    "percy:dry-run": "percy storybook http://localhost:7007 --dry-run"
+    "percy:dry-run": "percy storybook http://localhost:7007 --dry-run",
+    "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
@@ -41,24 +42,24 @@
     "@percy/cli": "^1.28.6",
     "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-docs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/addon-links": "^8.2.1",
-    "@storybook/addon-viewport": "^8.2.1",
-    "@storybook/html": "^8.2.1",
-    "@storybook/html-vite": "^8.2.1",
-    "@storybook/manager-api": "^8.2.1",
-    "@storybook/preview-api": "^8.2.1",
-    "@storybook/theming": "^8.2.1",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-docs": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/addon-links": "^8.2.4",
+    "@storybook/addon-viewport": "^8.2.4",
+    "@storybook/html": "^8.2.4",
+    "@storybook/html-vite": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/preview-api": "^8.2.4",
+    "@storybook/theming": "^8.2.4",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.4",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",

diff --git a/apps/vue-storybook/.storybook/manager-head.html b/apps/vue-storybook/.storybook/manager-head.html
@@ -12,13 +12,7 @@
     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);

diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts
@@ -104,16 +104,26 @@ const preview: Preview = {
           'Getting Started',
           ['Developer'],
           'Guides',
-          'Foundation',
+          'Foundations',
           [
             'Colors',
             'Typography',
             'Icons',
             'Logos',
             'Themes',
             'Grid and Layout',
+            ['Docs'],
             'Responsive Design'
           ],
+          'Navigation',
+          [
+            'Overview',
+            'Headers',
+            ['Overview', 'WWW'],
+            'Footers',
+            ['Overview', 'WWW'],
+            'Secondary Navigation'
+          ],
           'Global Layout',
           [
             'Overview',
@@ -139,7 +149,7 @@ const preview: Preview = {
             'Blocks',
             ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
             'Heroes',
-            ['*', 'HeroMedia', 'HeroListingIndex'],
+            ['Overview', 'HeroSmall', 'HeroMedium', 'HeroLarge', 'HeroMedia', 'HeroListingIndex'],
             'Forms',
             ['Overview', 'TextInput', 'TextArea'],
             'Search',
@@ -149,7 +159,9 @@ const preview: Preview = {
             'Utilities',
             ['Overview', '*'],
             'EDU'
-          ]
+          ],
+          'Mixins',
+          ['Overview']
         ]
       }
     }

diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json
@@ -29,7 +29,8 @@
     "start": "http-server storybook_compiled -p 6006 -c-1 -s",
     "test": "test-storybook --stories-json --maxWorkers=4",
     "test:cross-browser": "test-storybook --stories-json --verbose --maxWorkers=4 --browsers chromium webkit firefox",
-    "test:ci": "test-storybook --stories-json --maxWorkers=4"
+    "test:ci": "test-storybook --stories-json --maxWorkers=4",
+    "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
     "@explorer-1/common": "workspace:*",
@@ -49,13 +50,15 @@
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/blocks": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/preview-api": "^8.2.4",
     "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.2.1",
-    "@storybook/vue3": "^8.2.1",
-    "@storybook/vue3-vite": "^8.2.1",
+    "@storybook/theming": "^8.2.4",
+    "@storybook/vue3": "^8.2.4",
+    "@storybook/vue3-vite": "^8.2.4",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
@@ -69,7 +72,7 @@
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.4",
     "storybook-addon-vue-slots": "^0.9.29",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",

diff --git a/packages/vue/components.d.ts b/packages/vue/components.d.ts
@@ -200,6 +200,8 @@ declare module 'vue' {
     ShareButtonsEdu: typeof import('./src/components/ShareButtonsEdu/ShareButtonsEdu.vue')['default']
     SkipLink: typeof import('./src/components/SkipLink/SkipLink.vue')['default']
     SwimlaneCTA: typeof import('./src/components/SwimlaneCTA/SwimlaneCTA.vue')['default']
+    TextArea: typeof import('./src/components/TextArea/TextArea.vue')['default']
+    TextInput: typeof import('./src/components/TextInput/TextInput.vue')['default']
     TheFooter: typeof import('./src/components/TheFooter/TheFooter.vue')['default']
     TheFooterSignUp: typeof import('./src/components/TheFooter/TheFooterSignUp.vue')['default']
     ThumbnailCarousel: typeof import('./src/components/ThumbnailCarousel/ThumbnailCarousel.vue')['default']

diff --git a/packages/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js b/packages/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js
@@ -1,7 +1,7 @@
 import AsteroidWatchWidget from './AsteroidWatchWidget.vue'
 
 export default {
-  title: 'Components/AsteroidWatchWidget',
+  title: 'Components/WWW/AsteroidWatchWidget',
   component: AsteroidWatchWidget,
   excludeStories: /.*Data$/,
   decorators: [
@@ -151,6 +151,6 @@ export const AsteroidWatchWidgetData = {
   ]
 }
 
-export const Base = {
+export const BaseStory = {
   args: AsteroidWatchWidgetData
 }
diff --git a/packages/vue/src/components/BackToTop/BackToTop.stories.js b/packages/vue/src/components/BackToTop/BackToTop.stories.js
@@ -16,9 +16,9 @@ const BackToTopTemplate = (args) => ({
   `
 })
 
-export const Default = BackToTopTemplate.bind({})
-Default.storyName = 'BackToTop'
-Default.args = {
+export const BaseStory = BackToTopTemplate.bind({})
+BaseStory.storyName = 'BackToTop'
+BaseStory.args = {
   threshhold: 300,
   scrollTo: 0
 }
diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.stories.js b/packages/vue/src/components/BaseAudio/BaseAudio.stories.js
@@ -23,7 +23,7 @@ export const BaseAudioData = {
   loop: false
 }
 
-export const Base = {
+export const BaseStory = {
   name: 'BaseAudio', // single story hoisting
   args: BaseAudioData
 }
diff --git a/packages/vue/src/components/BaseButton/BaseButton.stories.ts b/packages/vue/src/components/BaseButton/BaseButton.stories.ts
@@ -8,7 +8,7 @@ export default {
   tags: ['autodocs'],
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     docs: {
       description: {
@@ -45,7 +45,8 @@ export const BaseButtonData = {
   default: 'Button'
 }
 
-export const PrimaryButton = {
+export const BaseStory = {
+  name: 'Primary Button',
   args: {
     ...BaseButtonData,
     variant: 'primary'

diff --git a/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.js b/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.js
@@ -0,0 +1,39 @@
+import BaseCheckboxGroup from './BaseCheckboxGroup.vue'
+
+export default {
+  title: 'Components/Base/BaseCheckboxGroup',
+  component: BaseCheckboxGroup
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    options: [
+      {
+        id: 'educators',
+        title: 'Educators',
+        text: null
+      },
+      {
+        id: 'educator-workshop',
+        title: 'Educators Workshops',
+        text: 'Southern California'
+      },
+      {
+        id: 'students',
+        title: 'Students K-12',
+        text: null
+      },
+      {
+        id: 'internships',
+        title: 'Internships',
+        text: null
+      }
+    ],
+    group: 'edumail',
+    heading: 'JPL Education Groups',
+    subHeading:
+      'The JPL Education Office also offers email updates about classroom activities and workshops for educators, projects and competitons for K-12 students and internship opportunities at JPL and NASA.',
+    title: 'Education Email Groups'
+  }
+}
diff --git a/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx b/packages/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx
diff --git a/packages/vue/src/components/BaseHeading/BaseHeading.stories.js b/packages/vue/src/components/BaseHeading/BaseHeading.stories.js
@@ -23,7 +23,7 @@ export default {
   },
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     },
     viewMode: 'docs',
     docs: {
@@ -36,7 +36,7 @@ export default {
 }
 
 // stories
-export const H1 = {
+export const BaseStory = {
   name: 'H1',
   args: { size: 'h1', level: 'h1', default: 'Heading 1' }
 }

diff --git a/packages/vue/src/components/BaseImage/BaseImage.stories.ts b/packages/vue/src/components/BaseImage/BaseImage.stories.ts
@@ -31,7 +31,7 @@ export const BaseImageData = {
   objectFitClass: 'contain'
 }
 // stories
-export const Default = {
+export const BaseStory = {
   args: BaseImageData,
   decorators: [() => ({ template: '<div class="max-w-full"><story /></div>' })]
 }

diff --git a/packages/vue/src/components/BaseImageCaption/BaseImageCaption.stories.js b/packages/vue/src/components/BaseImageCaption/BaseImageCaption.stories.js
@@ -20,7 +20,7 @@ export const BaseImageCaptionData = {
   detailUrl: '/image-detail/slug/'
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     data: BaseImageCaptionData
   }

diff --git a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js
@@ -42,6 +42,7 @@ export const BaseImagePlaceholderData = {
 }
 
 export const WithImage = {
+  name: 'With Image',
   args: {
     ...BaseImagePlaceholderData,
     BaseImageProps: {
@@ -55,7 +56,8 @@ export const WithImage = {
     }
   }
 }
-export const NoImage = {
+export const BaseStory = {
+  name: 'No Image',
   args: {
     ...BaseImagePlaceholderData,
     BaseImageProps: {

diff --git a/packages/vue/src/components/BaseLink/BaseLink.stories.js b/packages/vue/src/components/BaseLink/BaseLink.stories.js
@@ -4,7 +4,7 @@ export default {
   component: BaseLink,
   parameters: {
     slots: {
-      default: 'Default slot content'
+      default: 'BaseStory slot content'
     }
   },
   argTypes: {
@@ -27,7 +27,8 @@ export const BaseLinkData = {
 }
 
 // stories
-export const Primary = {
+export const BaseStory = {
+  name: 'Primary',
   args: { ...BaseLinkData }
 }