@dcrackel/hematournamentui 1.0.712 → 1.0.714

package/src/mocks/getDEBouts-TableOf64.js

@@ -1,35 +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;
+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,97 +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 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();
-  });
-});
+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,149 +1,149 @@
-<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>
+<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>

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

@@ -1,23 +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 }] } }
-};
+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 }] } }
+};