@dcrackel/hematournamentui 1.0.707 → 1.0.709

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.707",
+  "version": "1.0.709",
   "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/Atoms/Input/BaseInput.test.js

@@ -1,85 +1,97 @@
-import BaseInput from './BaseInput.vue';
-import { mount } from '@vue/test-utils';
-import { describe, expect, test, it } from 'vitest';
-
-describe('BaseInput.vue', () => {
-  it('renders with default props', () => {
-    const wrapper = mount(BaseInput);
-    const inputElement = wrapper.find('input');
-
-    expect(inputElement.attributes('placeholder')).toBe('');
-    expect(wrapper.vm.internalValue).toBe('');
-  });
-
-  it('initializes with the correct value prop', () => {
-    const initialValue = 'Hello, World!';
-    const wrapper = mount(BaseInput, {
-      props: {
-        value: initialValue
-      }
-    });
-
-    expect(wrapper.vm.internalValue).toBe(initialValue);
-  });
-
-  it('updates internalValue when value prop changes', async () => {
-    const wrapper = mount(BaseInput);
-    await wrapper.setProps({ value: 'New Value' });
-
-    expect(wrapper.vm.internalValue).toBe('New Value');
-  });
-
-  it('emits update:value with a delay upon input', async () => {
-    const wrapper = mount(BaseInput);
-    const inputElement = wrapper.find('input');
-
-    await inputElement.setValue('Test Input');
-
-    // TODO: Handle timer-related functionality with vitest
-    await new Promise(resolve => setTimeout(resolve, 350));
-
-    expect(wrapper.emitted('update:value')).toBeTruthy();
-    expect(wrapper.emitted('update:value')[0]).toEqual(['Test Input']);
-  });
-
-  it('applies formInput styles when type is formInput', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        type: 'formInput',
-        invalid: false
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).toContain('border');
-    expect(inputElement.classes()).toContain('rounded-lg');
-    expect(inputElement.classes()).toContain('text-secondary');
-    expect(inputElement.classes()).toContain('placeholder:text-xs');
-    expect(inputElement.classes()).toContain('text-sm');
-    expect(inputElement.classes()).toContain('p-2');
-    expect(inputElement.classes()).toContain('w-full');
-    expect(inputElement.classes()).toContain('border-dropdownSelect');
-  });
-
-  it('applies border-alarm class when invalid is true', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        type: 'formInput',
-        invalid: true
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).toContain('border-alarm');
-  });
-
-  it('does not apply border-alarm class when invalid is false', () => {
-    const wrapper = mount(BaseInput, {
-      props: {
-        type: 'formInput',
-        invalid: false
-      }
-    });
-    const inputElement = wrapper.find('input');
-    expect(inputElement.classes()).not.toContain('border-alarm');
-    expect(inputElement.classes()).toContain('border-dropdownSelect');
-  });
-});
+import BaseInput from './BaseInput.vue';
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, it } from 'vitest';
+
+describe('BaseInput.vue', () => {
+  it('renders with default props', () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
+
+    expect(inputElement.attributes('placeholder')).toBe('');
+    expect(wrapper.vm.internalValue).toBe('');
+  });
+
+  it('initializes with the correct value prop', () => {
+    const initialValue = 'Hello, World!';
+    const wrapper = mount(BaseInput, {
+      props: {
+        value: initialValue
+      }
+    });
+
+    expect(wrapper.vm.internalValue).toBe(initialValue);
+  });
+
+  it('updates internalValue when value prop changes', async () => {
+    const wrapper = mount(BaseInput);
+    await wrapper.setProps({ value: 'New Value' });
+
+    expect(wrapper.vm.internalValue).toBe('New Value');
+  });
+
+  it('emits the latest value synchronously before the next action', () => {
+    const wrapper = mount(BaseInput);
+    const inputElement = wrapper.find('input');
+
+    inputElement.element.value = 'Test Input';
+    inputElement.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toEqual([['Test Input']]);
+  });
+
+  it('applies input border styles when addBorder is enabled', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: false
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border');
+    expect(inputElement.classes()).toContain('rounded-lg');
+    expect(inputElement.classes()).toContain('text-quinary');
+    expect(inputElement.classes()).toContain('text-sm');
+    expect(inputElement.classes()).toContain('p-2');
+    expect(inputElement.classes()).toContain('w-full');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
+
+  it('applies border-alarm class when invalid is true', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: true
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).toContain('border-alarm');
+  });
+
+  it('does not apply border-alarm class when invalid is false', () => {
+    const wrapper = mount(BaseInput, {
+      props: {
+        addBorder: true,
+        invalid: false
+      }
+    });
+    const inputElement = wrapper.find('input');
+    expect(inputElement.classes()).not.toContain('border-alarm');
+    expect(inputElement.classes()).toContain('border-dropdownSelect');
+  });
+
+  it('delivers a cleared value before the input is unmounted', () => {
+    const wrapper = mount(BaseInput, { props: { value: '123', inputType: 'number' } });
+    const input = wrapper.find('input');
+    input.element.value = '';
+    input.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toEqual([['']]);
+    wrapper.unmount();
+  });
+
+  it('does not emit edits while disabled', () => {
+    const wrapper = mount(BaseInput, { props: { disabled: true, value: 'original' } });
+    const input = wrapper.find('input');
+    input.element.value = 'changed';
+    input.element.dispatchEvent(new Event('input', { bubbles: true }));
+    expect(wrapper.emitted('update:value')).toBeUndefined();
+  });
+});

package/src/stories/Atoms/Input/BaseInput.vue

@@ -1,150 +1,149 @@
-<template>
-  <div :class="iconName ? '' : ''">
-    <input
-      ref="input"
-      v-model="internalValue"
-      :class="baseClasses"
-      :placeholder="placeholder"
-      :type="inputType"
-      :disabled="disabled"
-      @input="onInput"
-      @focus="onFocus"
-      @blur="onBlur"
-    />
-  </div>
-</template>
-
-<script>
-const sizeClasses = {
-  xs: ' text-xs',
-  sm: ' text-sm',
-  md: ' text-md',
-  lg: ' text-lg',
-  xl: ' text-xl',
-  '2xl': ' text-2xl',
-  '3xl': ' text-3xl',
-  '4xl': ' text-4xl',
-  '5xl': ' text-5xl'
-};
-
-export default {
-  name: 'BaseInput',
-  emits: ['update:value'],
-  props: {
-    placeholder: {
-      type: [String, Number],
-      default: ''
-    },
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    inputType: {
-      type: String,
-      default: 'text'
-    },
-    invalid: {
-      type: Boolean,
-      default: false
-    },
-    addBorder: {
-      type: Boolean,
-      default: false
-    },
-    iconName: {
-      type: String,
-      default: ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    iconStyle: {
-      type: String,
-      default: 'fa-solid',
-      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
-    },
-    size: {
-      type: String,
-      default: 'sm',
-      validator: value => ['', ' ', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
-    },
-    centerInput: {
-      type: Boolean,
-      default: false
-    },
-    iconColor: {
-      type: String,
-      default: 'primary',
-      validator: value =>
-        ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(
-          value
-        )
-    },
-    allowPercent: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      internalValue: this.value,
-      currentPlaceholder: this.placeholder,
-      timeout: null
-    };
-  },
-  computed: {
-    baseClasses() {
-      let classes = 'appearance-none focus:outline-none w-full text-sm rounded-lg text-quinary';
-      if (this.addBorder) {
-        classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
-      }
-
-      if (this.centerInput) classes += ' text-center';
-
-      classes += sizeClasses[this.size] || '';
-
-      return classes;
-    }
-  },
-  watch: {
-    value(newValue) {
-      this.internalValue = newValue;
-    }
-  },
-  methods: {
-    onInput(event) {
-      let sanitizedValue = event.target.value;
-
-      if (this.inputType === 'number') {
-        sanitizedValue = sanitizedValue.replace(/\D/g, '');
-      }
-      if (this.inputType === 'text') {
-        this.allowPercent
-          ? (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, ''))
-          : (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, ''));
-      }
-
-      this.internalValue = sanitizedValue;
-
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        this.$emit('update:value', this.internalValue);
-      }, 300);
-    },
-    onFocus() {
-      this.currentPlaceholder = '';
-    },
-    onBlur() {
-      if (!this.internalValue) {
-        this.currentPlaceholder = this.placeholder;
-      }
-    },
-    focus() {
-      if (this.$refs.input) {
-        this.$refs.input.focus();
-      }
-    }
-  }
-};
-</script>
+<template>
+  <div :class="iconName ? '' : ''">
+    <input
+      ref="input"
+      :value="internalValue"
+      :class="baseClasses"
+      :placeholder="placeholder"
+      :type="inputType"
+      :disabled="disabled"
+      :aria-invalid="invalid"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script>
+const sizeClasses = {
+  xs: ' text-xs',
+  sm: ' text-sm',
+  md: ' text-md',
+  lg: ' text-lg',
+  xl: ' text-xl',
+  '2xl': ' text-2xl',
+  '3xl': ' text-3xl',
+  '4xl': ' text-4xl',
+  '5xl': ' text-5xl'
+};
+
+export default {
+  name: 'BaseInput',
+  emits: ['update:value'],
+  props: {
+    placeholder: {
+      type: [String, Number],
+      default: ''
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    addBorder: {
+      type: Boolean,
+      default: false
+    },
+    iconName: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    iconStyle: {
+      type: String,
+      default: 'fa-solid',
+      validator: value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
+    },
+    size: {
+      type: String,
+      default: 'sm',
+      validator: value => ['', ' ', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
+    },
+    centerInput: {
+      type: Boolean,
+      default: false
+    },
+    iconColor: {
+      type: String,
+      default: 'primary',
+      validator: value =>
+        ['neutral', 'primary', 'secondary', 'tertiary', 'quaternary', 'quinary', 'bright', 'white', 'alarm'].includes(
+          value
+        )
+    },
+    allowPercent: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalValue: this.value,
+      currentPlaceholder: this.placeholder
+    };
+  },
+  computed: {
+    baseClasses() {
+      let classes = 'appearance-none focus:outline-none w-full text-sm rounded-lg text-quinary';
+      if (this.addBorder) {
+        classes += this.invalid ? ' border border-alarm p-2' : ' border border-dropdownSelect p-2';
+      }
+
+      if (this.centerInput) classes += ' text-center';
+
+      classes += sizeClasses[this.size] || '';
+
+      return classes;
+    }
+  },
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    }
+  },
+  methods: {
+    onInput(event) {
+      if (this.disabled) return;
+      const input = event.target;
+      let sanitizedValue = input.value;
+
+      if (this.inputType === 'number') {
+        sanitizedValue = sanitizedValue.replace(/\D/g, '');
+      }
+      if (this.inputType === 'text') {
+        this.allowPercent
+          ? (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$^(){}\[\]]/g, ''))
+          : (sanitizedValue = sanitizedValue.replace(/[\\'"=*<>|#$%^(){}\[\]]/g, ''));
+      }
+
+      this.internalValue = sanitizedValue;
+      input.value = sanitizedValue;
+      this.$emit('update:value', sanitizedValue);
+    },
+    onFocus() {
+      this.currentPlaceholder = '';
+    },
+    onBlur() {
+      if (!this.internalValue) {
+        this.currentPlaceholder = this.placeholder;
+      }
+    },
+    focus() {
+      if (this.$refs.input) {
+        this.$refs.input.focus();
+      }
+    }
+  }
+};
+</script>