Feature: migrating www components (#455)

* adding all icons, adding HeroMedia and related mixins and stores

* adding pinia store to nuxt module

* porting over all blocks

* fixing the majority of components

* porting over remaining components

* fixing BaseTimer story

* adding PageContent

* adding plugins to nuxt module

* removing queries from explorer-1 components

* testing more components in the nuxt module

* fixing NavMobile components

* fixing store action highlightPrimary

* moving PageError to www

* lint

* fixing bottom border on main navigation

Author: stephiescastle

apps/vue-storybook/.storybook/preview.ts

@@ -4,15 +4,26 @@ import useMockComponents from './_mock-components.js'
 import { StoryContext } from '@storybook/types'
 import { VueRenderer, setup, type Preview } from '@storybook/vue3'
 import { Swiper, SwiperSlide } from 'swiper/vue'
+import vClickOutside from 'click-outside-vue3'
+import VueCompareImage from 'vue3-compare-image'
+import { createPinia } from 'pinia'
+import filters from '@explorer-1/vue/src/utils/filters'
 import '@explorer-1/common-storybook/src/config/canvas.css'
 import '@explorer-1/vue/src/assets/scss/styles.scss'
-
 import { withGlobals, globalTypes } from '@explorer-1/common-storybook/src/config/withGlobals'
+
+const pinia = createPinia()
+
 setup((app: App, context?: StoryContext<VueRenderer>) => {
+  app.use(pinia)
+  app.use(vClickOutside)
+  app.use(VueCompareImage)
   app.component('Swiper', Swiper)
   app.component('SwiperSlide', SwiperSlide)
+  app.config.globalProperties.$filters = filters
   useMockComponents(app)
 })
+
 const preview: Preview = {
   globalTypes,
 

apps/vue-storybook/components.d.ts

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "prettier": "@explorer-1/prettier-config",
+  "type": "module",
   "scripts": {
     "dev": "pnpm run storybook",
     "storybook": "storybook dev -c .storybook -p 6006 --ci",
@@ -16,8 +17,10 @@
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
     "@tailwindcss/forms": "^0.5.7",
+    "click-outside-vue3": "^4.0.1",
     "swiper": "^11.1.3",
-    "vue": "^3.2.47"
+    "vue": "^3.2.47",
+    "vue3-compare-image": "^1.2.5"
   },
   "devDependencies": {
     "@explorer-1/common": "workspace:*",
@@ -37,6 +40,7 @@
     "autoprefixer": "^10.4.19",
     "msw": "^2.3.0",
     "msw-storybook-addon": "^2.0.2",
+    "pinia": "^2.1.7",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "rimraf": "^5.0.5",
@@ -45,6 +49,7 @@
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.2.2",
+    "unplugin-vue-components": "^0.27.0",
     "vite": "^5.2.0",
     "vue-tsc": "^2.0.6"
   }

apps/vue-storybook/package.json

@@ -0,0 +1,156 @@
+import AsteroidWatchWidget from '@explorer-1/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue'
+
+export default {
+  title: 'Components/AsteroidWatchWidget',
+  component: AsteroidWatchWidget,
+  excludeStories: /.*Data$/,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="mt-20"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator' // to omit decorators from html output
+    }
+  },
+  argTypes: {
+    status: {
+      control: { type: 'text' }
+    }
+  }
+}
+
+export const AsteroidWatchWidgetData = {
+  nextCloseApproaches: [
+    {
+      name: '(2008 YN2)',
+      date: '2024-06-05',
+      sizeFeet: 61,
+      sizeMeters: 19,
+      distanceMiles: 2500000,
+      distanceKilometers: 4020000,
+      externalLink: 'https://ssd.jpl.nasa.gov/tools/sbdb_lookup.html#/?sstr=2008%20YN2&view=VOP',
+      comparisonImage: {
+        image: {
+          webp: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagem.2e16d0ba.fill-320x320.format-webp_mp07rlQ.webp',
+            __typename: 'CustomRendition'
+          },
+          src: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagementcommandsda.2e16d0ba.fill-320x320_5YFe2jp.png',
+            __typename: 'CustomRendition'
+          },
+          __typename: 'CustomImage'
+        },
+        text: 'HOUSE-SIZE',
+        __typename: 'AsteroidSizeComparison'
+      },
+      __typename: 'AsteroidApproach'
+    },
+    {
+      name: '(2024 JR17)',
+      date: '2024-06-05',
+      sizeFeet: 260,
+      sizeMeters: 80,
+      distanceMiles: 4600000,
+      distanceKilometers: 7400000,
+      externalLink: 'https://ssd.jpl.nasa.gov/tools/sbdb_lookup.html#/?sstr=2024%20JR17&view=VOP',
+      comparisonImage: {
+        image: {
+          webp: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagem.2e16d0ba.fill-320x320.format-webp_miCwBak.webp',
+            __typename: 'CustomRendition'
+          },
+          src: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagementcommandsda.2e16d0ba.fill-320x320_XtfVXBr.png',
+            __typename: 'CustomRendition'
+          },
+          __typename: 'CustomImage'
+        },
+        text: 'BUILDING-SIZE',
+        __typename: 'AsteroidSizeComparison'
+      },
+      __typename: 'AsteroidApproach'
+    },
+    {
+      name: '(2021 LW3)',
+      date: '2024-06-06',
+      sizeFeet: 270,
+      sizeMeters: 82,
+      distanceMiles: 2310000,
+      distanceKilometers: 3710000,
+      externalLink: 'https://ssd.jpl.nasa.gov/tools/sbdb_lookup.html#/?sstr=2021%20LW3&view=VOP',
+      comparisonImage: {
+        image: {
+          webp: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagem.2e16d0ba.fill-320x320.format-webp_miCwBak.webp',
+            __typename: 'CustomRendition'
+          },
+          src: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagementcommandsda.2e16d0ba.fill-320x320_XtfVXBr.png',
+            __typename: 'CustomRendition'
+          },
+          __typename: 'CustomImage'
+        },
+        text: 'BUILDING-SIZE',
+        __typename: 'AsteroidSizeComparison'
+      },
+      __typename: 'AsteroidApproach'
+    },
+    {
+      name: '(2024 LA)',
+      date: '2024-06-07',
+      sizeFeet: 77,
+      sizeMeters: 24,
+      distanceMiles: 1120000,
+      distanceKilometers: 1800000,
+      externalLink: 'https://ssd.jpl.nasa.gov/tools/sbdb_lookup.html#/?sstr=2024%20LA&view=VOP',
+      comparisonImage: {
+        image: {
+          webp: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagem.2e16d0ba.fill-320x320.format-webp_frsqFOl.webp',
+            __typename: 'CustomRendition'
+          },
+          src: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagementcommandsda.2e16d0ba.fill-320x320_QiuTjYV.png',
+            __typename: 'CustomRendition'
+          },
+          __typename: 'CustomImage'
+        },
+        text: 'AIRPLANE-SIZE',
+        __typename: 'AsteroidSizeComparison'
+      },
+      __typename: 'AsteroidApproach'
+    },
+    {
+      name: '(2024 KA1)',
+      date: '2024-06-07',
+      sizeFeet: 95,
+      sizeMeters: 29,
+      distanceMiles: 1170000,
+      distanceKilometers: 1880000,
+      externalLink: 'https://ssd.jpl.nasa.gov/tools/sbdb_lookup.html#/?sstr=2024%20KA1&view=VOP',
+      comparisonImage: {
+        image: {
+          webp: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagem.2e16d0ba.fill-320x320.format-webp_frsqFOl.webp',
+            __typename: 'CustomRendition'
+          },
+          src: {
+            url: 'https://d2pn8kiwq2w21t.cloudfront.net/images/asteroid_watchmanagementcommandsda.2e16d0ba.fill-320x320_QiuTjYV.png',
+            __typename: 'CustomRendition'
+          },
+          __typename: 'CustomImage'
+        },
+        text: 'AIRPLANE-SIZE',
+        __typename: 'AsteroidSizeComparison'
+      },
+      __typename: 'AsteroidApproach'
+    }
+  ]
+}
+
+export const Base = {
+  args: AsteroidWatchWidgetData
+}

apps/vue-storybook/stories/Icons.stories.ts

@@ -0,0 +1,24 @@
+import BackToTop from '@explorer-1/vue/src/components/BackToTop/BackToTop.vue'
+
+export default {
+  title: 'Components/Utilities/BackToTop',
+  component: BackToTop
+}
+
+// template
+const BackToTopTemplate = (args) => ({
+  components: { BackToTop },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div style="height: 2000px;"><div class="fixed">Will appear here on scroll: <BackToTop v-show="true" v-bind="args" /></div></div>
+  `
+})
+
+export const Default = BackToTopTemplate.bind({})
+Default.storyName = 'BackToTop'
+Default.args = {
+  threshhold: 300,
+  scrollTo: 0
+}

apps/vue-storybook/stories/components/AsteroidWatchWidget.stories.js

@@ -0,0 +1,29 @@
+import BaseAudio from '@explorer-1/vue/src/components/BaseAudio/BaseAudio.vue'
+
+export default {
+  title: 'Components/Base/BaseAudio',
+  component: BaseAudio,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="bg-black p-4 pb-5"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const BaseAudioData = {
+  file: 'http://127.0.0.1:9000/media/media/05_Da_Funk_Call_Out_Research_Hook.mp3',
+  autoPlay: false,
+  loop: false
+}
+
+export const Base = {
+  name: 'BaseAudio', // single story hoisting
+  args: BaseAudioData
+}

apps/vue-storybook/stories/components/BackToTop.stories.js

@@ -0,0 +1,68 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import BaseCheckboxGroup from '@explorer-1/vue/src/components/BaseCheckboxGroup/BaseCheckboxGroup.vue'
+
+<Meta
+  title="Components/Base/BaseCheckboxGroup"
+  component={BaseCheckboxGroup}
+  parameters={{ viewMode: 'docs' }}
+/>
+
+export const BaseCheckboxGroupData = {
+  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'
+}
+
+export const BaseCheckboxGroupTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BaseCheckboxGroup },
+  template: `<BaseCheckboxGroup :options="options" :group="group" :heading="heading" :sub-heading="subHeading" :title="title"
+></BaseCheckboxGroup>`
+})
+
+# Base Checkbox Group
+
+## Usage
+
+The BaseCheckboxGroup component is expected to contain an array of options and a grouping name with the goal of selecting multiple options.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={BaseCheckboxGroupData}
+  >
+    {BaseCheckboxGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable for={BaseCheckboxGroup} />
+
+## Example data
+
+<code language="json">{JSON.stringify(BaseCheckboxGroupData, null, 2)}</code>