@dcrackel/hematournamentui 1.0.707 → 1.0.708

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.707",
+  "version": "1.0.708",
   "type": "module",
   "main": "dist/HemaTournamentUI-lib.umd.js",
   "module": "dist/HemaTournamentUI-lib.es.js",
@@ -58,18 +58,18 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.6",
-    "@chromatic-com/storybook": "^5.3.0",
+    "@chromatic-com/storybook": "^5.5.1",
     "@eslint/eslintrc": "^3.3.5",
-    "@storybook/addon-docs": "^10.5.6",
-    "@storybook/addon-links": "^10.5.6",
-    "@storybook/react": "^10.5.6",
-    "@storybook/vue3-vite": "^10.5.6",
+    "@storybook/addon-docs": "^10.6.2",
+    "@storybook/addon-links": "^10.6.2",
+    "@storybook/react": "^10.6.2",
+    "@storybook/vue3-vite": "^10.6.2",
     "@tailwindcss/cli": "^4.3.0",
     "@tailwindcss/postcss": "^4.3.0",
     "@typescript-eslint/eslint-plugin": "^8.59.3",
     "@typescript-eslint/parser": "^8.59.3",
     "@vitejs/plugin-vue": "^6.0.7",
-    "@vitest/coverage-v8": "^4.1.6",
+    "@vitest/coverage-v8": "^4.1.11",
     "@vue/test-utils": "^2.4.10",
     "@vuepic/vue-datepicker": "^12.1.0",
     "autoprefixer": "^10.5.0",
@@ -77,17 +77,17 @@
     "eslint": "^9.9.0",
     "eslint-plugin-jest": "^29.15.2",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "^10.5.6",
+    "eslint-plugin-storybook": "^10.6.2",
     "eslint-plugin-vue": "^10.9.1",
     "happy-dom": "^20.9.0",
     "patch-package": "^8.0.1",
     "postcss": "^8.5.14",
     "prettier": "^3.9.6",
-    "storybook": "^10.5.6",
+    "storybook": "^10.6.2",
     "storybook-vue3-router": "^7.0.0",
     "tailwindcss": "^4.3.0",
     "vite": "^8.0.13",
-    "vitest": "^4.1.6",
+    "vitest": "^4.1.11",
     "vue-eslint-parser": "^10.4.0"
   },
   "overrides": {

package/src/index.js

@@ -17,6 +17,8 @@ export { default as DatePicker } from './stories/Organisms/ComplexInputs/DatePic
 export { default as DropDownMenu } from './stories/Organisms/ComplexInputs/DropDown/DropDownMenu.vue';
 export { default as GridContainer } from './stories/Organisms/Grids/GridContainer.vue';
 export { default as PoolGrid } from './stories/Organisms/Containers/PoolGrid/PoolGrid.vue';
+export { default as BracketDirectorAssignmentCard } from './stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+export { default as BracketDirectorAssignmentPanel } from './stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
 export { default as ImageCropper } from './stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue';
 export { default as TextBoxEditor } from './stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue';
 export { default as EditEventWizard } from './stories/Organisms/Wizards/EditEventWizard/EditEventWizard.vue';

package/src/mocks/getDEBouts-42Fencers.js

@@ -3150,7 +3150,7 @@ const getDEWithBouts42Fencers = {
           TimeLeft: 0,
           CurrentPass: 0,
           MaxPasses: 0,
-          RoundLabel: 'Quarterfinal',
+          RoundLabel: 'Table of 8',
           DEBoutId: 57,
           DENextBoutId: 61,
           LoserNextBoutId: null,
@@ -3201,7 +3201,7 @@ const getDEWithBouts42Fencers = {
           TimeLeft: 0,
           CurrentPass: 0,
           MaxPasses: 0,
-          RoundLabel: 'Quarterfinal',
+          RoundLabel: 'Table of 8',
           DEBoutId: 58,
           DENextBoutId: 61,
           LoserNextBoutId: null,
@@ -3252,7 +3252,7 @@ const getDEWithBouts42Fencers = {
           TimeLeft: 0,
           CurrentPass: 0,
           MaxPasses: 0,
-          RoundLabel: 'Quarterfinal',
+          RoundLabel: 'Table of 8',
           DEBoutId: 59,
           DENextBoutId: 62,
           LoserNextBoutId: null,
@@ -3303,7 +3303,7 @@ const getDEWithBouts42Fencers = {
           TimeLeft: 0,
           CurrentPass: 0,
           MaxPasses: 0,
-          RoundLabel: 'Quarterfinal',
+          RoundLabel: 'Table of 8',
           DEBoutId: 60,
           DENextBoutId: 62,
           LoserNextBoutId: null,

package/src/mocks/getDEBouts-TableOf128.js

@@ -0,0 +1,37 @@
+import historicalSixtySevenFencerBracket from './getDEBouts-67Fencers.js';
+
+const roundLabelRules = [
+  { matches: boutId => boutId >= 1 && boutId <= 64, label: 'Table of 128' },
+  { matches: boutId => boutId >= 65 && boutId <= 96, label: 'Table of 64' },
+  { matches: boutId => boutId >= 97 && boutId <= 112, label: 'Table of 32' },
+  { matches: boutId => boutId >= 113 && boutId <= 120, label: 'Table of 16' },
+  { matches: boutId => boutId >= 121 && boutId <= 124, label: 'Table of 8' },
+  { matches: boutId => boutId >= 125 && boutId <= 126, label: 'Semifinal' },
+  { matches: boutId => boutId === 127, label: 'Final' }
+];
+
+const getCurrentRoundLabel = bout => {
+  const boutId = Number(bout.DEBoutId);
+  return roundLabelRules.find(rule => rule.matches(boutId))?.label || bout.RoundLabel;
+};
+
+const normalizeTableOf128Bout = bout => ({
+  ...bout,
+  RoundLabel: getCurrentRoundLabel(bout)
+});
+
+const [historicalPool, ...otherPools] = historicalSixtySevenFencerBracket.pools;
+
+const getDEBoutsTableOf128 = {
+  ...historicalSixtySevenFencerBracket,
+  message: 'Current Table of 128 fixture retrieved',
+  pools: [
+    {
+      ...historicalPool,
+      Bouts: historicalPool.Bouts.map(normalizeTableOf128Bout)
+    },
+    ...otherPools
+  ]
+};
+
+export default getDEBoutsTableOf128;

package/src/mocks/getDEBouts-TableOf64.js

@@ -0,0 +1,35 @@
+import historicalSixtySevenFencerBracket from './getDEBouts-67Fencers.js';
+
+const FIRST_TABLE_OF_64_BOUT_ID = 65;
+
+const roundLabelRules = [
+  { matches: boutId => boutId >= 65 && boutId <= 96, label: 'Table of 64' },
+  { matches: boutId => boutId >= 97 && boutId <= 112, label: 'Table of 32' },
+  { matches: boutId => boutId >= 113 && boutId <= 120, label: 'Table of 16' },
+  { matches: boutId => boutId >= 121 && boutId <= 124, label: 'Table of 8' },
+  { matches: boutId => boutId >= 125 && boutId <= 126, label: 'Semifinal' },
+  { matches: boutId => boutId === 127, label: 'Final' }
+];
+
+const isTableOf64Bout = bout => Number(bout.DEBoutId) >= FIRST_TABLE_OF_64_BOUT_ID;
+
+const getCurrentRoundLabel = bout => {
+  const boutId = Number(bout.DEBoutId);
+  return roundLabelRules.find(rule => rule.matches(boutId))?.label || bout.RoundLabel;
+};
+
+const normalizeTableOf64Bout = bout => ({
+  ...bout,
+  RoundLabel: getCurrentRoundLabel(bout)
+});
+
+const [historicalPool, ...otherPools] = historicalSixtySevenFencerBracket.pools;
+const tableOf64Bouts = historicalPool.Bouts.filter(isTableOf64Bout).map(normalizeTableOf64Bout);
+
+const getDEBoutsTableOf64 = {
+  ...historicalSixtySevenFencerBracket,
+  message: 'Current Table of 64 fixture retrieved',
+  pools: [{ ...historicalPool, Bouts: tableOf64Bouts }, ...otherPools]
+};
+
+export default getDEBoutsTableOf64;

package/src/stories/Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.stories.js

@@ -0,0 +1,23 @@
+import MissingHemaRatingsId from './MissingHemaRatingsId.vue';
+
+export default {
+  title: 'Molecules/Indicators/MissingHemaRatingsId',
+  component: MissingHemaRatingsId,
+  tags: ['autodocs'],
+  args: { person: { HemaRatingsId: null } },
+  argTypes: {
+    person: { control: 'object' }
+  }
+};
+
+export const MissingId = {
+  args: { person: { HemaRatingsId: null } }
+};
+
+export const UnratedWithId = {
+  args: { person: { HemaRatingsId: 10255, HEMARatings: [] } }
+};
+
+export const IdFromRating = {
+  args: { person: { HEMARatings: [{ HemaRatingId: 10255, Rating: 1708.8 }] } }
+};

package/src/stories/Molecules/Indicators/MissingHemaRatingsId/MissingHemaRatingsId.vue

@@ -0,0 +1,35 @@
+<template>
+  <span
+    v-if="!hasHemaRatingsId"
+    role="img"
+    aria-label="Missing HEMA Ratings ID"
+    title="Missing HEMA Ratings ID"
+    data-testid="missing-hema-ratings-id"
+    class="inline-flex shrink-0 items-center justify-center text-alarm"
+  >
+    <svg class="h-6 w-6 md:h-7 md:w-7" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+      <circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="2" />
+      <text x="16" y="20" text-anchor="middle" fill="currentColor" class="font-bold" font-size="11">HR</text>
+      <path d="M7 25 25 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+    </svg>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'MissingHemaRatingsId',
+  props: {
+    person: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    hasHemaRatingsId() {
+      const id = this.person?.HemaRatingsId ?? this.person?.HEMARatings?.[0]?.HemaRatingId;
+      const numericId = Number(id);
+      return Number.isInteger(numericId) && numericId > 0;
+    }
+  }
+};
+</script>

package/src/stories/Molecules/Modals/DirectorModal/DirectorModal.test.js

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import DirectorModal from './DirectorModal.vue';
+
+describe('DirectorModal backdrop', () => {
+  it('keeps the directing screen visible through a 25 percent backdrop', () => {
+    const wrapper = shallowMount(DirectorModal, {
+      props: {
+        show: true,
+        bout: { BoutId: 42 },
+        eventRules: {},
+        hostingClubColors: {}
+      }
+    });
+
+    expect(wrapper.find('[data-testid="director-modal-backdrop"]').classes()).toContain('bg-secondary/25');
+  });
+});

package/src/stories/Molecules/Modals/DirectorModal/DirectorModal.vue

@@ -9,10 +9,11 @@
   >
     <div
       v-if="show"
-      class="fixed inset-0 bg-secondary bg-opacity-75 flex items-center justify-center z-50"
+      data-testid="director-modal-backdrop"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-secondary/85"
       @click="close"
     >
-      <div class="w-full md:w-1/3 md:min-w-[30rem] bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
+      <div class="w-full md:w-1/3 md:min-w-120 bg-neutral rounded-lg shadow-lg pb-6 px-2" @click.stop>
         <div class="flex w-full justify-end mt-1">
           <BaseIcon icon-name="fa-circle-xmark" size="lg" color="quaternary" hover="alarm" @click="close" />
         </div>

package/src/stories/Molecules/Modals/EditBoutModal/EditBoutModal.vue

@@ -47,7 +47,7 @@ export default {
       required: true
     },
     eventRules: {
-      type: Object,
+      type: Array,
       required: true
     },
     hostingClubColors: {

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.stories.js

@@ -0,0 +1,33 @@
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+export default {
+  title: 'Organisms/Cards/BracketDirectorAssignmentCard',
+  component: BracketDirectorAssignmentCard,
+  args: {
+    station: {
+      RingId: 1,
+      RingName: 'Ring 1',
+      Color: '#2563eb',
+      Director: {
+        PersonId: 1001,
+        DisplayName: 'Alex Morgan',
+        PortraitUrl: ''
+      }
+    },
+    variant: 'assigned'
+  },
+  argTypes: {
+    station: { control: 'object' },
+    variant: { control: 'select', options: ['assigned', 'add'] },
+    addLabel: { control: 'text' }
+  }
+};
+
+export const Assigned = {};
+
+export const AddDirector = {
+  args: {
+    station: null,
+    variant: 'add'
+  }
+};

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.test.js

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BracketDirectorAssignmentCard from './BracketDirectorAssignmentCard.vue';
+
+const station = {
+  RingId: 3,
+  RingName: 'Ring 3',
+  Color: '#059669',
+  Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: '/portrait.png' }
+};
+
+describe('BracketDirectorAssignmentCard', () => {
+  it('renders the ring, portrait, and director name', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { station } });
+
+    expect(wrapper.find('img').attributes()).toMatchObject({
+      src: '/portrait.png',
+      alt: 'Sam Rivera portrait'
+    });
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Sam Rivera');
+    expect(wrapper.find('[data-testid="bracket-director-assignment"]').attributes('style')).toBeUndefined();
+    expect(wrapper.find('[data-testid="director-color-dot"]').attributes('style')).toContain('#059669');
+    expect(wrapper.find('[data-testid="ring-number-icon"]').exists()).toBe(false);
+    expect(wrapper.findAll('base-text-stub').map(text => text.attributes('text'))).toContain('Ring 3');
+  });
+
+  it('uses director initials when no portrait is supplied', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, {
+      props: { station: { ...station, Director: { ...station.Director, PortraitUrl: '' } } }
+    });
+
+    expect(wrapper.find('img').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="director-initials"]').classes()).toContain('rounded-xl');
+    expect(wrapper.find('[data-testid="director-initials"] base-text-stub').attributes('text')).toBe('SR');
+  });
+
+  it('emits add intent from the summary card', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentCard, { props: { variant: 'add' } });
+
+    await wrapper.find('[data-testid="add-bracket-director"]').trigger('click');
+
+    expect(wrapper.emitted('action:add')).toEqual([[]]);
+    expect(wrapper.find('base-text-stub').attributes('text')).toBe('Click here to add director');
+  });
+});

package/src/stories/Organisms/Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue

@@ -0,0 +1,103 @@
+<template>
+  <button
+    v-if="isAddCard"
+    type="button"
+    data-testid="add-bracket-director"
+    class="flex min-h-20 w-full items-center justify-center gap-3 rounded-lg border-2 border-dashed border-dropdownSelect bg-white px-4 py-3 text-left transition hover:border-bright hover:shadow-md focus-visible:border-bright focus-visible:outline-none"
+    @click="$emit('action:add')"
+  >
+    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-bannerBackground" aria-hidden="true">
+      <BaseIcon iconName="fa-plus" color="primaryHighlight" size="sm" />
+    </span>
+    <BaseText :text="addLabel" color="primaryHighlight" size="sm" weight="bold" />
+  </button>
+
+  <article
+    v-else-if="station"
+    data-testid="bracket-director-assignment"
+    class="flex min-h-16 w-full items-center gap-3 overflow-hidden rounded-md border border-poolSetup bg-white px-3 py-2 shadow-sm hover:border-bright"
+    :aria-label="assignmentLabel"
+  >
+    <div class="relative h-12 w-12 flex-none">
+      <img
+        v-if="portraitUrl"
+        :src="portraitUrl"
+        :alt="`${directorName} portrait`"
+        class="h-12 w-12 rounded-xl object-cover"
+      />
+      <div
+        v-else
+        data-testid="director-initials"
+        class="flex h-12 w-12 items-center justify-center rounded-xl bg-dropdownSelect"
+        aria-hidden="true"
+      >
+        <BaseText :text="directorInitials" color="primaryHighlight" size="sm" weight="bold" />
+      </div>
+      <span
+        data-testid="director-color-dot"
+        class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full ring-2 ring-white"
+        :style="{ backgroundColor: station.Color }"
+        aria-hidden="true"
+      ></span>
+    </div>
+
+    <div class="min-w-0 flex-1">
+      <BaseText :text="ringLabel" color="quaternary" size="xs" />
+      <BaseText class="truncate" :text="directorName" color="primaryHighlight" size="sm" weight="bold" />
+    </div>
+  </article>
+</template>
+
+<script>
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const getInitials = displayName =>
+  String(displayName || '')
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(name => name[0].toUpperCase())
+    .join('');
+
+export default {
+  name: 'BracketDirectorAssignmentCard',
+  components: { BaseIcon, BaseText },
+  emits: ['action:add'],
+  props: {
+    station: {
+      type: Object,
+      default: null
+    },
+    variant: {
+      type: String,
+      default: 'assigned',
+      validator: value => ['assigned', 'add'].includes(value)
+    },
+    addLabel: {
+      type: String,
+      default: 'Click here to add director'
+    }
+  },
+  computed: {
+    assignmentLabel() {
+      return `${this.ringLabel}, Director ${this.directorName}`;
+    },
+    directorInitials() {
+      return getInitials(this.directorName) || '?';
+    },
+    directorName() {
+      return this.station?.Director?.DisplayName || 'Director TBD';
+    },
+    isAddCard() {
+      return this.variant === 'add';
+    },
+    portraitUrl() {
+      return this.station?.Director?.PortraitUrl || '';
+    },
+    ringLabel() {
+      return this.station?.RingName || `Ring ${this.station?.RingId ?? ''}`.trim();
+    }
+  }
+};
+</script>