stuff

package.json

@@ -13,6 +13,7 @@
   "author": "Julien Calixte <julienc@bam.tech>",
   "license": "ISC",
   "dependencies": {
+    "pinia": "^2.1.4",
     "vue": "^3.3.4",
     "vue-starport": "^0.3.0"
   },

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  pinia:
+    specifier: ^2.1.4
+    version: 2.1.4(typescript@5.1.6)(vue@3.3.4)
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -378,6 +381,10 @@ packages:
       '@vue/compiler-dom': 3.3.4
       '@vue/shared': 3.3.4
 
+  /@vue/devtools-api@6.5.0:
+    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
+    dev: false
+
   /@vue/reactivity-transform@3.3.4:
     resolution: {integrity: sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==}
     dependencies:
@@ -712,6 +719,24 @@ packages:
     engines: {node: '>=8.6'}
     dev: true
 
+  /pinia@2.1.4(typescript@5.1.6)(vue@3.3.4):
+    resolution: {integrity: sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+    dependencies:
+      '@vue/devtools-api': 6.5.0
+      typescript: 5.1.6
+      vue: 3.3.4
+      vue-demi: 0.14.5(vue@3.3.4)
+    dev: false
+
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
     dependencies:
@@ -822,7 +847,6 @@ packages:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: true
 
   /ufo@1.1.2:
     resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}

src/data/bird.ts

@@ -0,0 +1,202 @@
+export const birds = [
+  'Varied Thrush',
+  'Rock Dove',
+  'California Quail',
+  'Yellow-faced Grassquit',
+  'American Dipper',
+  'Tufted Puffin',
+  "Le Conte's Thrasher",
+  "Cassin's Vireo",
+  'Buff-bellied Hummingbird',
+  'Red Crossbill',
+  'Little Ringed Plover',
+  'American Avocet',
+  'Little Curlew',
+  'Tree Swallow',
+  'Three-toed Woodpecker',
+  'Bahama Mockingbird',
+  'Wandering Albatross',
+  'Hepatic Tanager',
+  'Ashy Storm-Petrel',
+  'Hoary Redpoll',
+  'Lazuli Bunting',
+  'Common House-Martin',
+  'Varied Bunting',
+  'Pygmy Nuthatch',
+  'American Coot',
+  'Shiny Cowbird',
+  'Rufous-capped Warbler',
+  'Eastern Wood-Pewee',
+  'Common Snipe',
+  'Northern Pygmy-Owl',
+  'Wood Stork',
+  'Gray-spotted Flycatcher',
+  'Bahama Woodstar',
+  'Black-backed Wagtail',
+  'Bean Goose',
+  'Buff-breasted Sandpiper',
+  'Northern Shoveler',
+  'Cinnamon Teal',
+  'Ruffed Grouse',
+  'Orchard Oriole',
+  'Black-footed Albatross',
+  'Mottled Duck',
+  'Red-headed Woodpecker',
+  'Double-crested Cormorant',
+  'Little Gull',
+  'Rufous Hummingbird',
+  'American Tree Sparrow',
+  'Black Swift',
+  'Fish Crow',
+  'Yellow-nosed Albatross',
+  'Ruddy Ground-Dove',
+  'White-winged Scoter',
+  'Black-capped Vireo',
+  'Chestnut-sided Warbler',
+  'Turkey Vulture',
+  'Mississippi Kite',
+  'Sage Thrasher',
+  'Whiskered Screech-Owl',
+  'Yucatan Vireo',
+  'Mountain Chickadee',
+  "Lewis's Woodpecker",
+  'Passenger Pigeon',
+  "Sabine's Gull",
+  'Black-billed Magpie',
+  'Florida Scrub-Jay',
+  'Plumbeous Vireo',
+  'Hoary Redpoll',
+  'Dusky Warbler',
+  "Couch's Kingbird",
+  'Double-striped Thick-knee',
+  'Canvasback',
+  'Warbling Vireo',
+  'Western Scrub-Jay',
+  'Green-winged Teal',
+  'Spot-breasted Oriole',
+  'American Bittern',
+  'White-winged Dove',
+  'Fieldfare',
+  'Barn Swallow',
+  'Golden-crowned Kinglet',
+  'Alder Flycatcher',
+  'Spotted Rail',
+  'Great Egret',
+  'Peregrine Falcon',
+  'Pacific-slope Flycatcher',
+  'Far Eastern Curlew',
+  'Whiskered Auklet',
+  'Yellow-billed Magpie',
+  'Eurasian Woodcock',
+  'Hepatic Tanager',
+  'Buff-bellied Hummingbird',
+  'Indigo Bunting',
+  "Gambel's Quail",
+  'Northern Waterthrush',
+  'Eurasian Wryneck',
+  "Audubon's Oriole",
+  'Gilded Flicker',
+  'Red-tailed Hawk',
+  'Zenaida Dove',
+  'Common Black-Hawk',
+  'Swamp Sparrow',
+  'Bahama Swallow',
+  'Jack Snipe',
+  "Le Conte's Thrasher",
+  'House Wren',
+  'Osprey',
+  'Savannah Sparrow',
+  'Eurasian Wigeon',
+  'Mexican Jay',
+  'Yellow Wagtail',
+  'Green Sandpiper',
+  'Greater Shearwater',
+  'Black-legged Kittiwake',
+  'Elegant Tern',
+  'Tufted Duck',
+  'Gray-headed Chickadee',
+  'Spotted Sandpiper',
+  'Barn Swallow',
+  'Bank Swallow',
+  'Scarlet Ibis',
+  'Spotted Redshank',
+  'Lark Bunting',
+  'American Golden-Plover',
+  'House Sparrow',
+  'Laysan Albatross',
+  'Whooper Swan',
+  'Marbled Murrelet',
+  "Townsend's Solitaire",
+  'Flesh-footed Shearwater',
+  'European Storm-Petrel',
+  'Manx Shearwater',
+  'Fieldfare',
+  'Least Bittern',
+  'Eskimo Curlew',
+  'Buff-collared Nightjar',
+  'White-breasted Nuthatch',
+  'Lanceolated Warbler',
+  'Bridled Tern',
+  'Yellow Wagtail',
+  'Jack Snipe',
+  'Western Tanager',
+  'Common Goldeneye',
+  'Greater Scaup',
+  'Belted Kingfisher',
+  'Rustic Bunting',
+  'Olive-sided Flycatcher',
+  'Bahama Mockingbird',
+  'White-tailed Ptarmigan',
+  'Lesser Scaup',
+  'Common Murre',
+  'Siberian Rubythroat',
+  'Siberian Rubythroat',
+  'Eared Trogon',
+  'Swallow-tailed Kite',
+  'Sulphur-bellied Flycatcher',
+  'Bohemian Waxwing',
+  'Common Sandpiper',
+  'Altamira Oriole',
+  'Mountain Plover',
+  'Common Ground-Dove',
+  'Great Gray Owl',
+  'Common Tern',
+  'Great Black-backed Gull',
+  'Horned Lark',
+  'Tricolored Heron',
+  'California Towhee',
+  'Fulvous Whistling-Duck',
+  'Hoary Redpoll',
+  'Plumbeous Vireo',
+  'Caribbean Elaenia',
+  'Purple Martin',
+  'American Crow',
+  'Key West Quail-Dove',
+  'Jungle Nightjar',
+  'Common Redpoll',
+  'Dusky Warbler',
+  'Neotropic Cormorant',
+  'Chestnut-backed Chickadee',
+  'Black Catbird',
+  'Redhead',
+  'American Tree Sparrow',
+  "Le Conte's Sparrow",
+  'Neotropic Cormorant',
+  'Wood Duck',
+  'Plumbeous Vireo',
+  'Bahama Mockingbird',
+  'Greater White-fronted Goose',
+  'Elegant Trogon',
+  'Jack Snipe',
+  'American Black Duck',
+  'Killdeer',
+  'Brown Jay',
+  'Pine Warbler',
+  'Nashville Warbler',
+  'Winter Wren',
+  'Blue Jay',
+  'Snowy Egret',
+  'Gray Bunting',
+  "Steller's Jay",
+  'Wood Warbler'
+]

src/main.ts

@@ -1,4 +1,7 @@
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const pinia = createPinia()
+
+createApp(App).use(pinia).mount('#app')

src/modules/feature/FeatureItem.vue

@@ -13,13 +13,17 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
   <div class="feature-item bin" :class="{ live: isLive }">
     <div>
       {{ feature.name }}
-      <span class="numeric">({{ feature.complexity }})</span>
     </div>
+    <div class="numeric">
+      ({{ feature.complexity }})
+      <div class="indicator">
         <div class="lead-time numeric">{{ feature.leadTime }} days</div>
-    <div v-if="hasQualityIssues" class="red-bin numeric">
+        <div v-if="hasQualityIssues" class="red-bin">
           {{ feature.qualityIssue }} 🔴
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
@@ -29,11 +33,24 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
   transition-timing-function: ease-out;
   transition-delay: 1s 2s;
 
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+
   &.live {
     visibility: hidden;
     opacity: 0;
   }
 
+  .indicator {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 0.2rem;
+    flex-wrap: wrap;
+  }
+
   .red-bin {
     border: 2px solid #ff7979;
     padding: 0 0.5rem 0.1rem;

src/modules/feature/FeatureStep.vue

@@ -24,7 +24,6 @@ const remainingBlueBuckets = computed(() =>
 const hasFeaturesInProgress = computed(
   () => featuresInProgress.value.length > 0
 )
-const hasFeaturesDone = computed(() => featuresDone.value.length > 0)
 const isLive = computed(
   () => props.step.title.toLocaleLowerCase() === 'release'
 )
@@ -86,6 +85,9 @@ const isLive = computed(
 }
 
 .feature-step {
+  display: flex;
+  flex-direction: column;
+
   header {
     padding: 0.5rem;
     border: solid 2px var(--background-color);
@@ -103,7 +105,7 @@ const isLive = computed(
   }
 
   h5 {
-    margin-bottom: 0;
+    margin: 0;
     background-color: var(--background-color);
     padding: 0.35rem;
     text-align: center;

src/modules/feature/feature.fixture.test.ts

@@ -4,7 +4,7 @@ import { describe, it } from 'vitest'
 describe('feature fixture', () => {
   it('creates lots of animals', () => {
     for (let i = 0; i < 200; i++) {
-      console.log(`"${faker.color.hsl()}", `)
+      console.log(`"${faker.animal.bird()}", `)
     }
   })
 })

src/modules/feature/feature.fixture.ts

@@ -1,7 +1,7 @@
-import { dogs } from '@/data/dog'
+import { birds } from '@/data/bird'
 import { Feature } from '@/modules/feature/feature'
 
-export const features: Feature[] = dogs.map((name) => ({
+export const features: Feature[] = birds.map((name) => ({
   name,
   complexity: Math.floor(Math.random() * 6),
   leadTime: 0,

src/modules/feature/store.ts

@@ -0,0 +1,15 @@
+import { Feature } from '@/modules/feature/feature'
+import { FeatureStep } from '@/modules/feature/feature-steps'
+import { defineStore } from 'pinia'
+
+type State = {
+  steps: FeatureStep[]
+  features: Feature[]
+}
+
+export const featureStore = defineStore('feature', {
+  state: (): State => ({
+    steps: [],
+    features: []
+  })
+})