@explorer-1/vue 0.0.0

package/src/components/AsteroidWatchWidget/AsteroidWatchWidget.stories.js

@@ -0,0 +1,156 @@
+import AsteroidWatchWidget from './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
+}

package/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue

@@ -0,0 +1,156 @@
+<template>
+  <section
+    v-if="nextCloseApproaches?.length"
+    aria-label="Next 5 Earth Approaches within 7.5 million kilometers"
+    class="AsteroidWatchWidget overflow-hidden"
+  >
+    <div
+      v-for="(item, index) in nextCloseApproaches"
+      :key="index"
+      class="MixedBleedGrid lg:pl-0 pl-4"
+    >
+      <div
+        :class="index === 0 ? 'bg-gray-light' : 'border-b border-gray-light-mid'"
+        class="lg:block col-start-indent-col-2 col-end-indent-col-3 hidden"
+      ></div>
+      <div
+        :class="index === 0 ? 'bg-gray-light' : 'border-b border-gray-light-mid'"
+        class="text-gray-dark col-start-indent-col-3 col-end-container lg:py-12 lg:px-0 text-body-lg px-8 py-10 pr-0"
+      >
+        <div class="gap-y-10 lg:col-end-9 grid grid-cols-11 col-start-1 col-end-11 gap-6">
+          <div
+            v-if="
+              item.comparisonImage && item.comparisonImage.image && item.comparisonImage.image.src
+            "
+            class="lg:col-span-3 lg:row-span-2 lg:text-left gap-y-8 col-span-11 -ml-8 text-center"
+          >
+            <picture>
+              <source
+                v-if="item.comparisonImage.image.webp"
+                :srcset="item.comparisonImage.image.webp.url"
+                type="image/webp"
+              />
+              <img
+                loading="lazy"
+                class="mx-auto bg-white rounded-full"
+                :src="item.comparisonImage.image.src.url"
+                width="160"
+                height="160"
+                alt=""
+              />
+            </picture>
+            <p class="text-subtitle mt-4 text-center">
+              {{ item.comparisonImage.text }}
+            </p>
+          </div>
+          <!-- size -->
+          <div class="lg:col-span-3 col-span-full">
+            <p class="label text-subtitle text-jpl-red">Approximate Size</p>
+            <BaseUnitToggle
+              v-slot="slotProps"
+              :unit-pair="'M_FT'"
+              :value="parseFloat(item.sizeFeet)"
+              :value-system="'imperial'"
+            >
+              <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+            </BaseUnitToggle>
+          </div>
+          <!-- size -->
+          <div class="lg:col-span-5 col-span-full">
+            <p class="label text-subtitle text-jpl-red">Closest Earth Approach</p>
+            <BaseUnitToggle
+              v-slot="slotProps"
+              :unit-pair="'MI_KM'"
+              :value="parseFloat(item.distanceMiles)"
+              :second-value="parseFloat(item.distanceKilometers)"
+              :value-system="'imperial'"
+            >
+              <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+            </BaseUnitToggle>
+          </div>
+          <div
+            v-if="item.name"
+            class="lg:col-span-3 col-span-full"
+          >
+            <p class="label text-subtitle text-jpl-red">Name</p>
+            <BaseLink
+              variant="none"
+              :href="item.externalLink"
+              external-target-blank
+            >
+              <span class="flex flex-nowrap items-center">
+                <span>{{ item.name }}</span>
+                <IconExternal class="text-jpl-red ml-3 text-lg" />
+              </span>
+            </BaseLink>
+          </div>
+          <div
+            v-if="item.date"
+            class="lg:col-span-4 col-span-full"
+          >
+            <p class="label text-subtitle text-jpl-red">Date</p>
+            {{
+              // @ts-ignore
+              $filters.displayDate(item.date)
+            }}
+          </div>
+        </div>
+      </div>
+      <div
+        :class="index === 0 ? 'bg-gray-light' : ''"
+        class="col-start-container-end col-end-bleed sm:block hidden"
+      ></div>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseUnitToggle from './../BaseUnitToggle/BaseUnitToggle.vue'
+import IconExternal from './../Icons/IconExternal.vue'
+
+interface NextCloseApproach {
+  date: string
+  distanceMiles: string
+  distanceKilometers: string
+  comparisonImage: {
+    image: {
+      src: {
+        url: string
+      }
+      webp: {
+        url: string
+      }
+    }
+    text: string
+  }
+  sizeFeet: string
+  name: string
+  externalLink: string
+}
+/**
+ * Displays asteroid widget data. API is parsed by the backend. Frontend retrieves via a graphQL query.
+ */
+export default defineComponent({
+  name: 'AsteroidWatchWidget',
+  components: {
+    BaseLink,
+    IconExternal,
+    BaseUnitToggle
+  },
+  props: {
+    nextCloseApproaches: {
+      type: Array as PropType<NextCloseApproach[]>,
+      required: false
+    }
+  }
+})
+</script>
+<style lang="scss">
+.AsteroidWatchWidget {
+  .label {
+    @apply font-semibold mb-4 text-jpl-red-dark;
+  }
+}
+</style>

package/src/components/BackToTop/BackToTop.stories.js

@@ -0,0 +1,24 @@
+import BackToTop from './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
+}

package/src/components/BackToTop/BackToTop.vue

@@ -0,0 +1,76 @@
+<template>
+  <BaseButton
+    v-if="showBackToTop"
+    variant="primary"
+    class="BackToTop z-60"
+    compact
+    @click="scrollToTop"
+  >
+    <IconDropdown />
+    <span class="label-text">Back to top</span>
+  </BaseButton>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import _throttle from 'lodash/throttle'
+import type { DebouncedFunc } from 'lodash'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import IconDropdown from './../Icons/IconDropdown.vue'
+
+export default defineComponent({
+  name: 'BackToTop',
+  components: {
+    BaseButton,
+    IconDropdown
+  },
+  props: {
+    threshold: {
+      type: Number,
+      required: false,
+      default: 300
+    },
+    scrollTo: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  data(): {
+    showBackToTop: Boolean
+    scrollHandler: DebouncedFunc<() => void> | null
+  } {
+    return {
+      showBackToTop: false,
+      scrollHandler: null
+    }
+  },
+  mounted() {
+    this.scrollHandler = _throttle(this.onScroll, 100)
+    window.addEventListener('scroll', this.scrollHandler, {
+      passive: true
+    })
+  },
+  beforeUnmount() {
+    if (this.scrollHandler) {
+      window.removeEventListener('scroll', this.scrollHandler)
+    }
+  },
+  methods: {
+    onScroll() {
+      this.showBackToTop = window.scrollY > this.threshold
+      // De-register the scroll event listener, so the button always shows
+      // and we don’t run scroll listeners for little value.
+      if (this.showBackToTop && this.scrollHandler) {
+        window.removeEventListener('scroll', this.scrollHandler)
+      }
+    },
+    scrollToTop() {
+      window.scrollTo({ top: this.scrollTo, behavior: 'smooth' })
+      this.$emit('click')
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BackToTop';
+</style>

package/src/components/BaseAudio/BaseAudio.stories.js

@@ -0,0 +1,29 @@
+import BaseAudio from './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
+}