@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Atoms/CheckBox/BaseCheckbox.stories.js

@@ -1,39 +1,41 @@
 import BaseCheckbox from './BaseCheckbox.vue';
 
 export default {
-    title: 'Atoms/BaseCheckbox',
-    component: BaseCheckbox,
-    tags: ['autodocs'],
-    args: {
-        modelValue: false,
-        label: 'Example checkbox',
-        description: 'Toggles a boolean value',
-    },
-    argTypes: {
-        modelValue: { control: 'boolean' },
-        label: { control: 'text' },
-        description: { control: 'text' },
-    },
+  title: 'Atoms/BaseCheckbox',
+  component: BaseCheckbox,
+  tags: ['autodocs'],
+  args: {
+    modelValue: false,
+    label: 'Example checkbox',
+    description: 'Toggles a boolean value'
+  },
+  argTypes: {
+    modelValue: { control: 'boolean' },
+    label: { control: 'text' },
+    description: { control: 'text' }
+  }
 };
 
 export const BooleanMode = {
-    args: {
-        modelValue: true,
-        label: 'Send reminders to registrants without a signed waiver',
-    },
+  args: {
+    modelValue: true,
+    label: 'Send reminders to registrants without a signed waiver'
+  }
 };
 
 export const ArrayMode = {
-    render: (args) => ({
-        components: { BaseCheckbox },
-        data() { return { cadence: [7] }; },
-        template: `
+  render: args => ({
+    components: { BaseCheckbox },
+    data() {
+      return { cadence: [7] };
+    },
+    template: `
       <div class="space-y-2">
         <BaseCheckbox v-model="cadence" :value="7" label="7 days before" />
         <BaseCheckbox v-model="cadence" :value="3" label="3 days before" />
         <BaseCheckbox v-model="cadence" :value="0" label="Day of" />
         <div class="text-xs text-gray-500">Current: {{ cadence }}</div>
       </div>
-    `,
-    }),
+    `
+  })
 };

package/src/stories/Atoms/CheckBox/BaseCheckbox.vue

@@ -1,35 +1,35 @@
 <template>
   <label
-      class="flex items-start gap-2 cursor-pointer select-none"
-      :class="{ 'opacity-50 cursor-not-allowed': disabled }"
-      :for="id"
+    class="flex items-start gap-2 cursor-pointer select-none"
+    :class="{ 'opacity-50 cursor-not-allowed': disabled }"
+    :for="id"
   >
     <input
-        ref="input"
-        :id="id"
-        :name="name"
-        type="checkbox"
-        class="h-4 w-4 mt-0.5 rounded-md accent-primary focus:ring-2 focus:ring-primaryHighlight border-dropdownSelect"
-        :disabled="disabled"
-        :checked="isChecked"
-        @change="onChange"
-        @blur="$emit('blur')"
-        @focus="$emit('focus')"
+      ref="input"
+      :id="id"
+      :name="name"
+      type="checkbox"
+      class="h-4 w-4 mt-0.5 rounded-md accent-primary focus:ring-2 focus:ring-primaryHighlight border-dropdownSelect"
+      :disabled="disabled"
+      :checked="isChecked"
+      @change="onChange"
+      @blur="$emit('blur')"
+      @focus="$emit('focus')"
     />
     <div>
       <BaseText :text="`${label}`" color="quaternary" :size="'sm'" :weight="'normal'" class="" />
-      <BaseText v-if="description" :text="`${description}`" color="quinary" :size="'xs'" :weight="'normal'"  />
-      <BaseText v-if="invalid && error"  :text="`${label}`" color="alarm" :size="'lg'" :weight="'normal'"  />
+      <BaseText v-if="description" :text="`${description}`" color="quinary" :size="'xs'" :weight="'normal'" />
+      <BaseText v-if="invalid && error" :text="`${label}`" color="alarm" :size="'lg'" :weight="'normal'" />
     </div>
   </label>
 </template>
 
 <script>
-import BaseText from "../Text/BaseText.vue";
+import BaseText from '../Text/BaseText.vue';
 
 export default {
   name: 'BaseCheckbox',
-  components: {BaseText},
+  components: { BaseText },
   props: {
     modelValue: { type: [Boolean, Array], required: true },
     // Provide `value` when binding to an array (multi-select)
@@ -41,22 +41,28 @@ export default {
     error: { type: String, default: '' },
     name: { type: String, default: '' },
     id: { type: String, default: null },
-    indeterminate: { type: Boolean, default: false },
+    indeterminate: { type: Boolean, default: false }
   },
   emits: ['update:modelValue', 'change', 'blur', 'focus'],
   computed: {
-    isArray() { return Array.isArray(this.modelValue); },
+    isArray() {
+      return Array.isArray(this.modelValue);
+    },
     isChecked() {
       return this.isArray && this.value !== undefined
-          ? this.modelValue.some(v => JSON.stringify(v) === JSON.stringify(this.value))
-          : !!this.modelValue;
+        ? this.modelValue.some(v => JSON.stringify(v) === JSON.stringify(this.value))
+        : !!this.modelValue;
     },
-    labelClass() { return this.invalid ? 'text-red-700' : 'text-gray-800'; }
+    labelClass() {
+      return this.invalid ? 'text-red-700' : 'text-gray-800';
+    }
   },
   watch: {
     indeterminate: {
       immediate: true,
-      handler(v) { if (this.$refs.input) this.$refs.input.indeterminate = v; }
+      handler(v) {
+        if (this.$refs.input) this.$refs.input.indeterminate = v;
+      }
     }
   },
   methods: {
@@ -77,4 +83,4 @@ export default {
     }
   }
 };
-</script>
+</script>

package/src/stories/Atoms/Icon/BaseIcon.stories.js

@@ -1,79 +1,78 @@
 import BaseIcon from './BaseIcon.vue';
 
 export default {
-    title: 'Atoms/BaseIcon',
-    component: BaseIcon,
-    tags: ['autodocs'],
-    args: {
-        iconName: 'fa-face-smile',
-        size: 'sm',
-        color: 'primary',
-        style: 'fa-solid',
-        hover: 'alarm'
+  title: 'Atoms/BaseIcon',
+  component: BaseIcon,
+  tags: ['autodocs'],
+  args: {
+    iconName: 'fa-face-smile',
+    size: 'sm',
+    color: 'primary',
+    style: 'fa-solid',
+    hover: 'alarm'
+  },
+  argTypes: {
+    iconName: {
+      control: {
+        type: 'text',
+        defaultValue: 'fa-check'
+      }
     },
-    argTypes: {
-        iconName: {
-            control: {
-                type: 'text',
-                defaultValue: 'fa-check'
-            }
-        },
-        style: {
-          control: {
-                type: 'select'
-          },
-          options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
-          defaultValue: 'solid'
-        },
-        size: {
-            control: {
-                type: 'select'
-            },
-            options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
-            defaultValue: 'sm'
-        },
-        color: {
-            control: {
-                type: 'text'
-            },
-            options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright', "alarm", "accepted"],
-            defaultValue: 'primary'
-        },
-        hover: {
-            control: {
-                type: 'text'
-            },
-            options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright', "alarm", "accepted"],
-            defaultValue: 'primary'
-        }
+    style: {
+      control: {
+        type: 'select'
+      },
+      options: ['fa-solid', 'fa-regular', 'fa-solid', 'fa-light', 'fa-thing'],
+      defaultValue: 'solid'
+    },
+    size: {
+      control: {
+        type: 'select'
+      },
+      options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+      defaultValue: 'sm'
+    },
+    color: {
+      control: {
+        type: 'text'
+      },
+      options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright', 'alarm', 'accepted'],
+      defaultValue: 'primary'
+    },
+    hover: {
+      control: {
+        type: 'text'
+      },
+      options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright', 'alarm', 'accepted'],
+      defaultValue: 'primary'
     }
+  }
 };
 
 export const BasicPrimary = {
-    args: {
-        iconName: 'fa-face-smile',
-        size: 'sm',
-        color: 'primary',
-        style: 'fa-solid'
-    }
+  args: {
+    iconName: 'fa-face-smile',
+    size: 'sm',
+    color: 'primary',
+    style: 'fa-solid'
+  }
 };
 
 export const RegularAndBright = {
-    args: {
-        iconName: 'fa-face-smile',
-        size: 'lg',
-        color: 'bright',
-        style: 'fa-regular'
-    }
+  args: {
+    iconName: 'fa-face-smile',
+    size: 'lg',
+    color: 'bright',
+    style: 'fa-regular'
+  }
 };
 
-
 export const IconWithHover = {
-    args: {
-        iconName: 'fa-face-smile',
-        size: 'lg',
-        color: 'bright',
-        style: 'fa-regular',
-        hover: 'alarm'
-    }
+  args: {
+    iconName: 'fa-face-smile',
+    size: 'lg',
+    color: 'bright',
+    style: 'fa-regular',
+    hover: 'alarm'
+  }
 };

package/src/stories/Atoms/Icon/BaseIcon.test.js

@@ -3,89 +3,87 @@ import { mount } from '@vue/test-utils';
 import BaseIcon from './BaseIcon.vue';
 
 describe('BaseIcon', () => {
-    // Mocking console.warn
-    const originalWarn = console.warn;
-    let consoleOutput = [];
-    const mockedWarn = output => consoleOutput.push(output);
-    console.warn = mockedWarn;
+  // Mocking console.warn
+  const originalWarn = console.warn;
+  let consoleOutput = [];
+  const mockedWarn = output => consoleOutput.push(output);
+  console.warn = mockedWarn;
 
-    afterEach(() => {
-        console.warn = originalWarn;
-        consoleOutput = [];
-    });
+  afterEach(() => {
+    console.warn = originalWarn;
+    consoleOutput = [];
+  });
 
-    it('renders without errors', () => {
-        const wrapper = mount(BaseIcon, {
-            props: { iconName: 'fa-icons' }
-        });
-        expect(wrapper.exists()).toBeTruthy();
+  it('renders without errors', () => {
+    const wrapper = mount(BaseIcon, {
+      props: { iconName: 'fa-icons' }
     });
+    expect(wrapper.exists()).toBeTruthy();
+  });
 
-    it('default values are correctly applied when props are not provided', () => {
-        const wrapper = mount(BaseIcon, {
-            props: {}
-        });
-        expect(wrapper.classes()).toContain('fa-solid');
-        expect(wrapper.classes()).toContain('fa-face-smile');
-        expect(wrapper.classes()).toContain('text-sm');
-        expect(wrapper.classes()).toContain('text-primary');
-    })
-
-    it('applies default props correctly', () => {
-        const wrapper = mount(BaseIcon, {
-            props: { iconName: 'fa-icons' }
-        });
-        expect(wrapper.classes()).toContain('fa-solid');
-        expect(wrapper.classes()).toContain('text-sm');
-        expect(wrapper.classes()).toContain('text-primary');
+  it('default values are correctly applied when props are not provided', () => {
+    const wrapper = mount(BaseIcon, {
+      props: {}
     });
+    expect(wrapper.classes()).toContain('fa-solid');
+    expect(wrapper.classes()).toContain('fa-face-smile');
+    expect(wrapper.classes()).toContain('text-sm');
+    expect(wrapper.classes()).toContain('text-primary');
+  });
 
-    it('computes classes based on props', () => {
-        const wrapper = mount(BaseIcon, {
-            props: {
-                iconName: 'fa-icons',
-                style: 'fa-regular',
-                size: 'lg',
-                color: 'secondary'
-            }
-        });
-        expect(wrapper.classes()).toContain('fa-regular');
-        expect(wrapper.classes()).toContain('fa-icons');
-        expect(wrapper.classes()).toContain('text-lg');
-        expect(wrapper.classes()).toContain('text-secondary');
+  it('applies default props correctly', () => {
+    const wrapper = mount(BaseIcon, {
+      props: { iconName: 'fa-icons' }
     });
+    expect(wrapper.classes()).toContain('fa-solid');
+    expect(wrapper.classes()).toContain('text-sm');
+    expect(wrapper.classes()).toContain('text-primary');
+  });
 
-    it('validates style prop correctly with valid value', () => {
-        mount(BaseIcon, {
-            props: { style: 'fa-solid' }
-        });
-        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+  it('computes classes based on props', () => {
+    const wrapper = mount(BaseIcon, {
+      props: {
+        iconName: 'fa-icons',
+        style: 'fa-regular',
+        size: 'lg',
+        color: 'secondary'
+      }
     });
+    expect(wrapper.classes()).toContain('fa-regular');
+    expect(wrapper.classes()).toContain('fa-icons');
+    expect(wrapper.classes()).toContain('text-lg');
+    expect(wrapper.classes()).toContain('text-secondary');
+  });
 
-    it('emits a warning with invalid style prop value', () => {
-        mount(BaseIcon, {
-            props: { style: 'invalid-style' }
-        });
-        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "style".';
-        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
-        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+  it('validates style prop correctly with valid value', () => {
+    mount(BaseIcon, {
+      props: { style: 'fa-solid' }
     });
+    expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+  });
 
-    it('validates style size correctly with valid value', () => {
-        mount(BaseIcon, {
-            props: { size: 'sm' }
-        });
-        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+  it('emits a warning with invalid style prop value', () => {
+    mount(BaseIcon, {
+      props: { style: 'invalid-style' }
     });
+    const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "style".';
+    const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
+    expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+  });
 
-    it('emits a warning with invalid size prop value', () => {
-        mount(BaseIcon, {
-            props: { size: 'invalid-size' }
-        });
-        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "size".';
-        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
-        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+  it('validates style size correctly with valid value', () => {
+    mount(BaseIcon, {
+      props: { size: 'sm' }
     });
+    expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+  });
 
+  it('emits a warning with invalid size prop value', () => {
+    mount(BaseIcon, {
+      props: { size: 'invalid-size' }
+    });
+    const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "size".';
+    const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
+    expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+  });
 });
-

package/src/stories/Atoms/Icon/BaseIcon.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'BaseIcon',
   props: {
@@ -14,14 +13,14 @@ export default {
     },
     iconStyle: {
       type: String,
-      default: 'fa-solid',
+      default: 'fa-solid'
     },
     size: {
       type: String,
       default: 'sm',
       validator: function (value) {
         return ['', ' ', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].indexOf(value) !== -1;
-      },
+      }
     },
     color: {
       type: String,

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

@@ -1,29 +1,29 @@
 import BaseInput from './BaseInput.vue';
 
 export default {
-    title: 'Atoms/BaseInput',
-    component: BaseInput,
-    tags: ['autodocs'],
-    argTypes: {
-        placeholder: {control: 'text'},
-        value: {control: 'text'},
-        icon: {control: ''}
-    }
+  title: 'Atoms/BaseInput',
+  component: BaseInput,
+  tags: ['autodocs'],
+  argTypes: {
+    placeholder: { control: 'text' },
+    value: { control: 'text' },
+    icon: { control: '' }
+  }
 };
 
 const Template = args => ({
-    components: {BaseInput},
-    props: Object.keys(args),
-    methods: {
-        onValueUpdate(newValue) {
-            console.log('Value updated:', newValue);
-        }
+  components: { BaseInput },
+  props: Object.keys(args),
+  methods: {
+    onValueUpdate(newValue) {
+      console.log('Value updated:', newValue);
     }
+  }
 });
 
 export const Default = {
-    args: {
-        placeholder: 'Enter text...',
-        value: ''
-    }
+  args: {
+    placeholder: 'Enter text...',
+    value: ''
+  }
 };