@explorer-1/vue 0.0.0

package/src/components/BaseSwimlane/BaseSwimlane.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import BaseSwimlane from './BaseSwimlane.vue'
+
+<Meta
+  title="Components/Base/BaseSwimlane"
+  component={BaseSwimlane}
+  parameters={{ viewMode: 'docs' }}
+/>
+
+export const BaseSwimlaneData = {
+  words: [
+    'Artists',
+    'Communicators',
+    'Designers',
+    'Disruptors',
+    'Dreamers',
+    'Educators',
+    'Engineers',
+    'Innovators',
+    'Inventors',
+    'Makers',
+    'Problem Solvers',
+    'Roboticists',
+    'Scientists',
+    'Software Engineers',
+    'Thinkers',
+    'Visualizers'
+  ],
+  rows: 9,
+  scale: 2,
+  transition: 'ease-out',
+  transitionDuration: 1800,
+  transitionDelay: 800
+}
+
+export const BaseSwimlaneTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BaseSwimlane },
+  template: `<BaseSwimlane :words="words" :rows="rows" :scale="scale" :transition="transition" :transition-duration="transitionDuration" :transition-delay="transitionDelay"
+></BaseSwimlane>`
+})
+
+# Base Swimlane
+
+## Usage
+
+The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={BaseSwimlaneData}
+  >
+    {BaseSwimlaneTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable for={BaseSwimlane} />
+
+## Example data
+
+<code language="json">{JSON.stringify(BaseSwimlaneData, null, 2)}</code>

package/src/components/BaseSwimlane/BaseSwimlane.vue

@@ -0,0 +1,204 @@
+<template>
+  <div
+    :style="listParentStyle"
+    class="BaseSwimlane"
+    @mouseenter="toggleAnimation"
+    @mouseleave="toggleAnimation"
+  >
+    <ul :style="listStyle">
+      <li
+        v-for="(word, index) in list"
+        :key="index"
+        :style="itemStyle"
+        v-html="word"
+      />
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BaseSwimlane',
+  props: {
+    words: {
+      type: Array,
+      default: () => {
+        return [
+          'Artists',
+          'Communicators',
+          'Designers',
+          'Disruptors',
+          'Dreamers',
+          'Educators',
+          'Engineers',
+          'Innovators',
+          'Inventors',
+          'Makers',
+          'Problem Solvers',
+          'Roboticists',
+          'Scientists',
+          'Software Engineers',
+          'Thinkers',
+          'Visualizers'
+        ]
+      }
+    },
+    rows: {
+      type: Number,
+      default: 1
+    },
+    scale: {
+      type: Number,
+      default: 1
+    },
+    transitionDuration: {
+      type: Number,
+      default: 1000
+    },
+    transitionDelay: {
+      type: Number,
+      default: 500
+    },
+    transition: {
+      type: String,
+      default: 'ease-out'
+    },
+    pauseOnHover: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      list: [],
+      listTop: 0,
+      isPaused: false,
+      isMovingBackwards: false
+    }
+  },
+  computed: {
+    listCount() {
+      return this.list.length
+    },
+    fontSize() {
+      // scale from 16px font size
+      return 16 * this.scale
+    },
+    itemHeight() {
+      return this.fontSize * 1.5
+    },
+    listHeight() {
+      return this.itemHeight * this.listCount
+    },
+    listParentHeight() {
+      return this.itemHeight * this.rows
+    },
+    itemStyle() {
+      return `font-size: ${this.fontSize}px;
+              height: ${this.itemHeight}px;`
+    },
+    listStyle() {
+      return `height: ${this.listHeight}px;
+              transition-delay: ${this.transitionDelay}ms;
+              transition-duration: ${this.transitionDuration}ms;
+              transition-timing-function: ${this.transition};
+              will-change: transform;
+              transform: translateY(${this.listTop}px)`
+    },
+    listParentStyle() {
+      return `height: ${this.listParentHeight}px;`
+    }
+  },
+  // update word list
+  watch: {
+    words(val) {
+      this.list = val
+    }
+  },
+  // copy word list
+  created() {
+    this.list = this.words
+  },
+  // initiate animation
+  mounted() {
+    setTimeout(this.updateState, this.transitionDelay)
+  },
+  methods: {
+    updateState() {
+      // check if enough keywords or is not paused
+      if (this.listCount <= this.rows) return
+      if (this.isPaused) return
+      // update list state
+      if (this.isMovingBackwards) {
+        this.listTop += this.itemHeight
+      } else {
+        this.listTop -= this.itemHeight
+      }
+      // one way animation
+      if (this.listTop < this.rows * this.itemHeight - this.listHeight) {
+        this.listTop = 0
+      }
+      // set time out for next update
+      this.timeOutId = window.setTimeout(() => {
+        this.updateState()
+      }, this.transitionDuration + this.transitionDelay)
+    },
+    // pause/resume animaiton on hover
+    toggleAnimation() {
+      if (this.pauseOnHover) {
+        this.isPaused = !this.isPaused
+        if (this.isPaused) {
+          clearTimeout(this.timeOutId)
+        } else {
+          this.updateState()
+        }
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.BaseSwimlane {
+  @apply overflow-hidden;
+
+  -webkit-mask-image: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0, transparent),
+    color-stop(0.05, rgba(0, 0, 0, 0.35)),
+    color-stop(0.1, black),
+    color-stop(0.5, black),
+    color-stop(0.9, rgba(0, 0, 0, 0.15)),
+    color-stop(1, transparent)
+  );
+  @screen lg {
+    -webkit-mask-image: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      color-stop(0, transparent),
+      color-stop(0.1, rgba(0, 0, 0, 0.15)),
+      color-stop(0.35, black),
+      color-stop(0.65, black),
+      color-stop(0.9, rgba(0, 0, 0, 0.15)),
+      color-stop(1, transparent)
+    );
+  }
+
+  ul {
+    @apply list-none overflow-hidden transition-transform;
+
+    li {
+      @apply text-center p-0 m-0;
+      @screen lg {
+        @apply text-left font-medium;
+      }
+    }
+  }
+}
+</style>

package/src/components/BaseTag/BaseTag.stories.js

@@ -0,0 +1,34 @@
+import BaseTag from './BaseTag.vue'
+
+export default {
+  title: 'Components/Base/BaseTag',
+  component: BaseTag,
+  argTypes: {
+    variant: {
+      type: { name: 'string', required: false },
+      description: 'The variant (color) of the tag',
+      control: { type: 'select' },
+      options: ['primary', 'secondary', 'action']
+    },
+    size: {
+      type: { name: 'string', required: false },
+      description: 'The size of the tag',
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg']
+    }
+  },
+  parameters: {
+    slots: {
+      default: 'Default slot'
+    }
+  }
+}
+
+// stories
+export const PrimaryMedium = {
+  args: { size: 'md', variant: 'primary', default: 'Psyche Asteroid' }
+}
+
+export const SecondarySmall = {
+  args: { size: 'sm', variant: 'secondary', default: 'Do it yourself' }
+}

package/src/components/BaseTag/BaseTag.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { Attributes } from './../../interfaces'
+
+// using borders to vertically center wonky font face
+const variantMap: Attributes = {
+  primary: 'bg-primary border-primary',
+  secondary: 'bg-secondary border-secondary',
+  action: 'bg-action border-action'
+}
+
+const sizeMap: Attributes = {
+  sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
+  md: 'text-base capitalize border-t py-2 px-3',
+  lg: 'text-lg capitalize border-t py-2 px-3'
+}
+
+interface BaseTagProps {
+  variant?: string
+  size?: string
+}
+
+// define props
+const props = withDefaults(defineProps<BaseTagProps>(), {
+  variant: 'primary',
+  size: 'md'
+})
+</script>
+<template>
+  <p
+    :class="`${variantMap[props.variant]} ${sizeMap[props.size]}`"
+    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0"
+  >
+    <slot />
+    <span class="sr-only">.</span>
+  </p>
+</template>

package/src/components/BaseTimer/BaseTimer.stories.js

@@ -0,0 +1,78 @@
+import BaseTimer from './BaseTimer.vue'
+
+export default {
+  title: 'Components/Base/BaseTimer',
+  component: BaseTimer
+}
+
+export const FullDateTime = {
+  args: {
+    targetDateTime: '2011-11-26 15:02:21+01:00',
+    selectedUnits: ['years', 'months', 'days', 'hours', 'minutes', 'seconds'],
+    inline: false,
+    countdown: false,
+    legendClass: 'text-gray-mid-dark'
+  }
+}
+export const DateOnly = {
+  args: {
+    targetDateTime: '2011-11-26 15:02:21+01:00',
+    selectedUnits: ['years', 'months', 'days'],
+    inline: false,
+    countdown: false
+  }
+}
+
+export const Mixed = {
+  args: {
+    targetDateTime: '2011-11-26 15:02:21+01:00',
+    selectedUnits: ['months', 'days', 'hours'],
+    inline: false,
+    countdown: false
+  }
+}
+
+export const Countdown = {
+  args: {
+    targetDateTime: new Date(new Date().getTime() + 999999999).toISOString(),
+    selectedUnits: ['years', 'months', 'days', 'hours', 'minutes', 'seconds'],
+    inline: false,
+    countdown: true
+  }
+}
+
+export const CountdownStop = {
+  args: {
+    targetDateTime: new Date(new Date().getTime() + 1000 * 10).toISOString(),
+    selectedUnits: ['years', 'months', 'days', 'hours', 'minutes', 'seconds'],
+    inline: false,
+    countdown: true
+  }
+}
+
+export const AutoUnits = {
+  args: {
+    targetDateTime: new Date(new Date().getTime() - 999999999).toISOString(),
+    selectedUnits: [],
+    inline: false,
+    countdown: false
+  }
+}
+
+export const AutoUnitsCountdown = {
+  args: {
+    targetDateTime: new Date(new Date().getTime() + 1000 * 10).toISOString(),
+    selectedUnits: [],
+    inline: false,
+    countdown: true
+  }
+}
+
+export const Inline = {
+  args: {
+    targetDateTime: '2011-11-26 15:02:21+01:00',
+    selectedUnits: ['years', 'months', 'days', 'hours', 'minutes', 'seconds'],
+    inline: true,
+    countdown: false
+  }
+}

package/src/components/BaseTimer/BaseTimer.test.js

@@ -0,0 +1,15 @@
+import { mount } from '@vue/test-utils'
+
+import BaseTimer from './BaseTimer.vue'
+
+describe('BaseTimer', () => {
+  test('does not display its values server-side', () => {
+    const wrapper = mount(BaseTimer, {
+      propsData: {
+        targetDateTime: '2011-11-26 15:02:21+01:00',
+        selectedUnits: ['years', 'months', 'days']
+      }
+    })
+    expect(wrapper.text().replace(/\s+/g, ' ')).toBe('Loading… Yrs : Mos : Days')
+  })
+})

package/src/components/BaseTimer/BaseTimer.vue

@@ -0,0 +1,270 @@
+<template>
+  <component
+    :is="diff ? 'time' : 'div'"
+    class="BaseTimer whitespace-nowrap"
+    :datetime="diff ? diff.toISOString() : null"
+    :class="{ '-inline': inline }"
+  >
+    <span :hidden="!!diff">Loading…</span>
+    <span
+      class="transition-opacity duration-500 ease-in-out opacity-0"
+      :class="{ 'opacity-100': diff, 'flex justify-between': inline }"
+    >
+      <span
+        v-for="(unit, index) in selectedUnitsComputed"
+        :key="unit"
+      >
+        <!-- Add a break between the date and time components, for mobile version -->
+        <span
+          v-if="index !== 0"
+          class="text-stats-xl text-stats-separator"
+          :class="{
+            'block invisible -mt-6 md:inline md:visible md:mt-0':
+              selectedUnitsComputed.length >= 4 && unit === 'hours'
+          }"
+          >&nbsp;:&nbsp;</span
+        >
+        <!-- Make the seconds unit left-aligned to avoid it shifting position constantly, -->
+        <!-- due to the lack of equal-width numerals. -->
+        <span
+          class="inline-block align-top"
+          :class="unit === 'seconds' ? 'text-left' : 'text-center'"
+          aria-hidden="true"
+        >
+          <span
+            class="text-stats-xl"
+            :class="{ 'text-seconds': unit === 'seconds' }"
+          >
+            <template v-if="countdown && isPast">00</template>
+            <template v-else>{{ unitValue(unit) }}</template>
+          </span>
+          <br v-if="!inline" />
+          <span class="unit text-body-xs uppercase">
+            {{ shortLabel(unit) }}
+          </span>
+        </span>
+      </span>
+    </span>
+  </component>
+</template>
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import dayjs, { Dayjs } from 'dayjs'
+import duration, { type Duration } from 'dayjs/plugin/duration'
+import minMax from 'dayjs/plugin/minMax'
+
+dayjs.extend(duration)
+dayjs.extend(minMax)
+
+const calculateDuration = (start: Dayjs): Duration | undefined => {
+  // Use round seconds so the datetime string stays valid and can be read by screen readers.
+  // This also makes the timer run more reliably, as the difference is always 1 full second.
+  const now = dayjs().millisecond(0)
+  const max = dayjs.max(start, now)
+  const min = dayjs.min(start, now)
+  return max ? dayjs.duration(max.diff(min)) : undefined
+}
+
+// Based on https://day.js.org/docs/en/durations/creating#list-of-all-available-units.
+export const timerUnits = {
+  years: { shortLabel: 'Yrs', longLabel: 'Years' },
+  months: { shortLabel: 'Mos', longLabel: 'Months' },
+  days: { shortLabel: 'Days', longLabel: 'Days' },
+  hours: { shortLabel: 'Hrs', longLabel: 'Hours' },
+  minutes: { shortLabel: 'Mins', longLabel: 'Minutes' },
+  seconds: { shortLabel: 'Secs', longLabel: 'Seconds' }
+} as const
+type UnitID = keyof typeof timerUnits
+
+// Normally this should just be `number`, but due to our usage of `@types/node`
+// we need to define this in a way that is compatible with both Node and browser code.
+type Interval = ReturnType<typeof setInterval>
+
+export default defineComponent({
+  name: 'BaseTimer',
+  props: {
+    targetDateTime: {
+      type: String,
+      required: true
+    },
+    // if blank, the first three significant units will show
+    selectedUnits: {
+      type: Array as PropType<UnitID[]>,
+      required: false,
+      validator: (val: UnitID[]): boolean => val.every((v) => Boolean(timerUnits[v]))
+    },
+    inline: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // if a countdown clock, then this will force it to stop at 0
+    countdown: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data(): {
+    diff: Duration | undefined
+    interval: Interval | undefined
+  } {
+    return {
+      diff: undefined,
+      interval: undefined
+    }
+  },
+  computed: {
+    selectedUnitsComputed(): UnitID[] {
+      if (!this.selectedUnits || this.selectedUnits.length === 0) {
+        const unitChoices = ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
+        let significantUnits = [] as UnitID[]
+        unitChoices.forEach((e) =>
+          this.unitSignificant(e as UnitID) ? significantUnits.push(e as UnitID) : significantUnits
+        )
+        // if only three units (i.e. hours, minutes, seconds)
+        // then do not make significant units dynamic
+        // (we always want a minimum of three to show)
+        if (significantUnits.length <= 3) {
+          return ['hours', 'minutes', 'seconds']
+        } else {
+          significantUnits = significantUnits.slice(0, 3)
+        }
+
+        return significantUnits
+      }
+      return this.selectedUnits
+    },
+    isPast(): boolean {
+      if (this.targetDateTime) {
+        const now = dayjs(new Date())
+        const start = dayjs(new Date(this.targetDateTime.replace(/\s+/g, 'T'))).millisecond(0)
+        if (start.isBefore(now)) {
+          return true
+        }
+      }
+      return false
+    }
+  },
+  mounted(): void {
+    // Convert ISO8601 RFC 3339 datetime formats into a stricter format supported by Safari.
+    const start = dayjs(new Date(this.targetDateTime.replace(/\s+/g, 'T'))).millisecond(0)
+
+    this.diff = calculateDuration(start)
+
+    // Only make the timer live-update if there are units that are going to show live changes.
+    const shouldUpdate =
+      this.selectedUnitsComputed.includes('seconds') ||
+      this.selectedUnitsComputed.includes('minutes')
+    if (shouldUpdate) {
+      // Imprecise timer, but keeps performance impact very low.
+      this.interval = setInterval(() => {
+        this.diff = calculateDuration(start)
+
+        const countdownTimer = this.diff?.as('seconds') === 0
+        if (countdownTimer) {
+          clearInterval(this.interval as Interval)
+        }
+      }, 1000)
+    }
+  },
+  beforeUnmount(): void {
+    clearInterval(this.interval as Interval)
+  },
+  methods: {
+    shortLabel(unit: UnitID) {
+      return timerUnits[unit]?.shortLabel || unit
+    },
+    longLabel(unit: UnitID) {
+      return timerUnits[unit]?.longLabel || unit
+    },
+    unitSignificant(unit: UnitID): boolean {
+      if (this.diff === null) {
+        return false
+      }
+      const value = this.diff?.get(unit)
+
+      if ((value && value > 0) || this.checkOtherUnits(unit)) {
+        return true
+      }
+      return false
+    },
+    // TODO: make this more efficient
+    checkOtherUnits(unit: UnitID): boolean {
+      // necessary to check if higher units have a value, otherwise 0 values will not display when they should
+      if (this.diff) {
+        if (unit === 'seconds') {
+          if (
+            this.diff.get('minutes') > 0 ||
+            this.diff.get('hours') > 0 ||
+            this.diff.get('days') > 0 ||
+            this.diff.get('months') > 0 ||
+            this.diff.get('years') > 0
+          ) {
+            return true
+          }
+        } else if (unit === 'minutes') {
+          if (
+            this.diff.get('hours') > 0 ||
+            this.diff.get('days') > 0 ||
+            this.diff.get('months') > 0 ||
+            this.diff.get('years') > 0
+          ) {
+            return true
+          }
+        } else if (unit === 'hours') {
+          if (
+            this.diff.get('days') > 0 ||
+            this.diff.get('months') > 0 ||
+            this.diff.get('years') > 0
+          ) {
+            return true
+          }
+        } else if (unit === 'days') {
+          if (this.diff.get('months') > 0 || this.diff.get('years') > 0) {
+            return true
+          }
+        } else if (unit === 'months') {
+          if (this.diff.get('years') > 0) {
+            return true
+          }
+        }
+      }
+      return false
+    },
+    unitValue(unit: UnitID) {
+      if (this.diff === null) {
+        return ''
+      }
+
+      const value = this.diff?.get(unit)
+
+      // Pad a number with a leading zero.
+      return value?.toString().padStart(2, '0')
+    }
+  }
+})
+</script>
+<style lang="scss">
+.BaseTimer {
+  .unit {
+    // Make the units dimmer than the numbers, regardless of which color it’s displayed with.
+    --text-opacity: 0.84;
+  }
+
+  &.-inline {
+    .text-stats-separator {
+      @apply hidden;
+    }
+
+    .text-seconds {
+      width: 2ch;
+    }
+
+    > span span {
+      @apply inline-block;
+    }
+  }
+}
+</style>