Merge pull request #230 from KenEucker/develop

fix(component library): resolves issues with importing the component library

.npmignore

@@ -20,6 +20,7 @@ test
 .stylelintrc.js
 .gitattributes
 .prettierignore
+.prettierrc.js
 .prettierrc.json
 .releaserc.json
 .yarnrc.yml
@@ -35,5 +36,6 @@ tsconfig.node.json
 vite.config.ts
 publish.config.ts
 postcss.config.json
+postcss.config.js
 netlify.toml
 

functions/common/methods.ts

@@ -79,6 +79,8 @@ export const getBikeTagClientOpts = (
   const domainInfo = getDomainInfo(request)
   const isAuthenticatedPOST = request?.method === 'POST' || authorized
   const isGET = !isAuthenticatedPOST && request?.method === 'GET'
+
+  /// The minimum to load a BikeTag Game in Read-Only mode
   const opts: any = {
     game:
       game?.name?.toLocaleLowerCase() ??
@@ -95,7 +97,9 @@ export const getBikeTagClientOpts = (
     },
   }
 
+  /// Credentials to make changes to the BikeTag Game
   if (authorized) {
+    /// Enables Imgur uploads and edits for non-admin sources
     opts.imgur = opts.imgur ?? {}
     opts.imgur.clientSecret = process.env.I_CSECRET
     opts.imgur.accessToken = process.env.I_TOKEN

package.json

@@ -140,16 +140,13 @@
     "vuejs"
   ],
   "types": "./index.d.ts",
-  "main": "./biketag-vue.umd.js",
-  "module": "./biketag-vue.mjs",
+  "module": "./biketag-vue.es.js",
   "exports": {
     ".": {
-      "import": "./biketag-vue.mjs",
-      "require": "./biketag-vue.umd.js"
+      "import": "./biketag-vue.es.js"
     },
     "./style.css": {
-      "import": "./style.css",
-      "require": "./style.css"
+      "import": "./style.css"
     }
   }
 }

publish.config.ts

@@ -9,11 +9,14 @@ export default defineConfig({
     lib: {
       entry: path.resolve(__dirname, 'src/index.ts'),
       name: 'BikeTag',
-      fileName: 'biketag-vue',
+      formats: ['es'],
+      fileName: (format) => `biketag-vue.${format}.js`,
     },
     rollupOptions: {
       external: ['vue'],
       output: {
+        // disable warning on src/index.ts using both default and named export
+        exports: 'named',
         globals: {
           vue: 'Vue',
         },

src/App.vue

@@ -27,7 +27,7 @@
 <script setup name="App">
 import { ref, inject, computed, onMounted, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
-import { useStore } from '@/store/index'
+import { useBikeTagStore } from '@/store/index'
 import { useAuth0 } from '@auth0/auth0-vue'
 import { debug, isAuthenticationEnabled } from './common/utils'
 import ConfettiExplosion from 'vue-confetti-explosion'
@@ -41,7 +41,7 @@ import { useI18n } from 'vue-i18n'
 // data
 const gameIsSet = ref(false)
 const showConfetti = ref(false)
-const store = useStore()
+const store = useBikeTagStore()
 const router = useRouter()
 const { t } = useI18n()
 const toast = inject('toast')
@@ -152,19 +152,19 @@ async function created() {
       gameIsSet.value = false
     }
 
-    initResults.push(await store.setCurrentBikeTag())
-    initResults.push(store.setTags())
-    initResults.push(store.setPlayers())
-    initResults.push(store.setLeaderboard())
+    initResults.push(await store.fetchCurrentBikeTag())
+    initResults.push(store.fetchTags())
+    initResults.push(store.fetchPlayers())
+    initResults.push(store.fetchLeaderboard())
     initResults.push(await store.fetchCredentials())
-    initResults.push(store.setQueuedTags())
-    initResults.push(store.setAllGames())
+    initResults.push(store.fetchQueuedTags())
+    initResults.push(store.fetchAllGames())
 
     await Promise.allSettled(initResults)
 
     checkForNewBikeTagPost()
   } else if (!_gameIsSet) {
-    await store.setAllGames()
+    await store.fetchAllGames()
     router.push('/landing')
   }
   debug(`view::data-init`, 'created')

src/common/index.ts

@@ -1,2 +1,4 @@
+export * from './types'
 export * from './utils'
 export * from './uuid'
+

src/common/types.ts

@@ -1,5 +1,7 @@
 import { Achievement, Game, Player, Tag } from 'biketag/lib/common/schema'
 
+export type { Achievement, Game, Player, Tag }
+
 export type DomainInfo = {
   host: string
   subdomain: string | undefined
@@ -11,6 +13,7 @@ export const BikeTagDefaults = {
   source: 'sanity',
   logo: '/images/BikeTag.svg',
   jingle: 'media/biketag-jingle-1.mp3',
+  store: 'biketag',
   /// TODO: THIS IS BAD
   sanityBaseCDNUrl: 'https://cdn.sanity.io/images/x37ikhvs/production/',
 }

src/components/BikeTag.vue

@@ -97,107 +97,67 @@
   </b-row>
 </template>
 
-<script setup name="BikeTag">
-import { ref, computed, onMounted } from 'vue'
+<script setup name="BikeTag" lang="ts">
+import { ref, computed, onMounted, withDefaults } from 'vue'
 import { useRouter } from 'vue-router'
-import { useStore } from '@/store/index'
-import { getTagDate } from '@/common/utils'
+import { useBikeTagStore } from '@/store/index'
+import { getTagDate, Tag } from '@/common'
 import { useI18n } from 'vue-i18n'
 
+export interface BikeTagProps {
+  tag: Tag & { inBoundary: boolean }
+  showHint?: boolean
+  showPostedDate?: boolean
+  showMysteryPostedDateTime?: boolean
+  showFoundPostedDateTime?: boolean
+  sizedMysteryImage?: boolean
+  sizedFoundImage?: boolean
+  showPlayer?: boolean
+  reverse?: boolean
+  showInBoundary?: boolean
+  tagnumber?: number
+  foundTagnumber?: number
+  size?: string
+  imageSize?: string
+  foundImageUrl?: string
+  mysteryImageUrl?: string
+  foundDescription?: string
+  mysteryDescription?: string
+}
+
 // componets
 import ExpandableImage from '@/components/ExpandableImage.vue'
 import BikeTagButton from '@/components/BikeTagButton.vue'
 
 // props
-const props = defineProps({
-  tag: {
-    type: Object,
-    default: () => {
-      return {}
-    },
-  },
-  size: {
-    type: String,
-    default: 'm',
-  },
-  showHint: {
-    type: Boolean,
-    default: false,
-  },
-  showPostedDate: {
-    type: Boolean,
-    default: true,
-  },
-  showMysteryPostedDateTime: {
-    type: Boolean,
-    default: true,
-  },
-  showFoundPostedDateTime: {
-    type: Boolean,
-    default: true,
-  },
-  sizedMysteryImage: {
-    type: Boolean,
-    default: true,
-  },
-  sizedFoundImage: {
-    type: Boolean,
-    default: true,
-  },
-  imageSize: {
-    type: String,
-    default: null,
-  },
-  tagnumber: {
-    type: Number,
-    default: 0,
-  },
-  foundTagnumber: {
-    type: Number,
-    default: 0,
-  },
-  foundImageUrl: {
-    type: String,
-    default: null,
-  },
-  mysteryImageUrl: {
-    type: String,
-    default: null,
-  },
-  showPlayer: {
-    type: Boolean,
-    default: true,
-  },
-  foundDescription: {
-    type: String,
-    default: null,
-  },
-  mysteryDescription: {
-    type: String,
-    default: null,
-  },
-  reverse: {
-    type: Boolean,
-    default: false,
-  },
-  showInBoundary: {
-    type: Boolean,
-    default: false,
-  },
+const props = withDefaults(defineProps<BikeTagProps>(), {
+  showPostedDate: true,
+  showMysteryPostedDateTime: true,
+  showFoundPostedDateTime: true,
+  sizedMysteryImage: true,
+  sizedFoundImage: true,
+  showPlayer: true,
+  tagnumber: 0,
+  foundTagnumber: 0,
+  size: 'm',
+  imageSize: 'm',
+  foundImageUrl: '',
+  mysteryImageUrl: '',
+  foundDescription: '',
+  mysteryDescription: '',
 })
 
 // data
 const emit = defineEmits(['load'])
 const mysteryImageLoaded = ref(false)
 const foundImageLoaded = ref(false)
 const noTagnumberLink = ref(false)
-const store = useStore()
+const store = useBikeTagStore()
 const router = useRouter()
 const { t } = useI18n()
 const dynamicFontSettings = { min: 20, max: 28 }
 
 // computed
-const getImgurImageSized = computed(() => store.getImgurImageSized)
 const _tagnumber = computed(() => (props.tagnumber ? props.tagnumber : props.tag?.tagnumber))
 const _getHint = computed(() => (props.tag?.hint ? props.tag.hint : t('pages.play.nohint')))
 const _foundTagnumber = computed(() =>
@@ -206,29 +166,29 @@ const _foundTagnumber = computed(() =>
 const _foundImageUrl = computed(() => {
   return props.foundImageUrl
     ? props.foundImageUrl.length === 0
-      ? null
+      ? ''
       : props.foundImageUrl
     : props.tag?.foundImageUrl
 })
 const _mysteryImageUrl = computed(() => {
   return props.mysteryImageUrl
     ? props.mysteryImageUrl.length === 0
-      ? null
+      ? ''
       : props.mysteryImageUrl
     : props.tag?.mysteryImageUrl
 })
 const getFoundImageSrc = computed(() => {
   return props.imageSize
-    ? getImgurImageSized.value(_foundImageUrl.value, props.imageSize)
+    ? store.getImgurImageSized(_foundImageUrl.value, props.imageSize)
     : props.sizedFoundImage
-      ? getImgurImageSized.value(_foundImageUrl.value)
+      ? store.getImgurImageSized(_foundImageUrl.value)
       : _foundImageUrl.value
 })
 const getMysteryImageSrc = computed(() => {
   return props.imageSize
-    ? getImgurImageSized.value(_mysteryImageUrl.value, props.imageSize)
+    ? store.getImgurImageSized(_mysteryImageUrl.value, props.imageSize)
     : props.sizedMysteryImage
-      ? getImgurImageSized.value(_mysteryImageUrl.value, _foundImageUrl.value ? 'm' : 'l')
+      ? store.getImgurImageSized(_mysteryImageUrl.value, _foundImageUrl.value ? 'm' : 'l')
       : _mysteryImageUrl.value
 })
 const _mysteryDescription = computed(() => {
@@ -247,7 +207,7 @@ const tagInBoundary = computed(() => {
 })
 
 // methods
-const getPostedDate = (timestamp, timeOnly = false) => {
+const getPostedDate = (timestamp: number, timeOnly = false) => {
   if (!timestamp) {
     return ''
   }
@@ -257,7 +217,7 @@ const getPostedDate = (timestamp, timeOnly = false) => {
 
   return `${timeOnly ? ' @ ' : t('components.biketag.posted_on')} ${datetime}`
 }
-const tagImageLoaded = (type) => {
+const tagImageLoaded = (type: string) => {
   if (type === 'mystery') {
     mysteryImageLoaded.value = true
   } else if (type === 'found') {
@@ -276,7 +236,7 @@ const goTagPage = () => {
     router.push('/' + encodeURIComponent(_tagnumber.value))
   }
 }
-const goPlayerPage = (player) => {
+const goPlayerPage = (player: string) => {
   router.push('/player/' + encodeURIComponent(player))
 }
 

src/components/BikeTagFooter.vue

@@ -86,7 +86,7 @@
 <script setup name="BikeTagFooter">
 import { ref, computed, onBeforeUnmount, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
-import { useStore } from '@/store/index'
+import { useBikeTagStore } from '@/store/index'
 import HintIcon from '@/assets/images/hint-icon.svg'
 import CloseRounded from '@/assets/images/close-rounded.svg'
 import { useI18n } from 'vue-i18n'
@@ -116,7 +116,7 @@ const hintIcon = HintIcon
 const closeRounded = CloseRounded
 const hintPopover = ref(null)
 const hintButton = ref(null)
-const store = useStore()
+const store = useBikeTagStore()
 const router = useRouter()
 const { t } = useI18n()
 const downloadingTag = ref(false)

src/components/BikeTagGames.vue

@@ -18,7 +18,7 @@
 import { computed } from 'vue'
 
 import StyledHr from '@/assets/images/hr.svg'
-import { useStore } from '@/store/index'
+import { useBikeTagStore } from '@/store/index'
 import { useI18n } from 'vue-i18n'
 
 // props
@@ -39,7 +39,7 @@ const props = defineProps({
 
 // data
 const styledHr = StyledHr
-const store = useStore()
+const store = useBikeTagStore()
 const { t } = useI18n()
 
 // computed