@dcrackel/hematournamentui 1.0.706 → 1.0.708

package/src/stories/Organisms/ComplexInputs/FindPerson/FindPerson.vue

@@ -2,15 +2,20 @@
   <section>
     <div v-if="!showNewPerson" class="relative">
       <BaseInput
-          :addBorder="addBorder"
-          :value="inputValue"
-          @input="updateInput"
-          placeholder="Type to search person..."
+        :addBorder="addBorder"
+        :value="inputValue"
+        @input="updateInput"
+        placeholder="Type to search person..."
       />
       <div v-if="showDropdown" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1">
         <ul>
-          <li v-for="(person, index) in filteredPersons" :key="index" @click="selectPerson(person)" class="p-2 hover:bg-gridBoxHeader cursor-pointer even:bg-eventBoxBlue">
-            <div class="grid w-full" style="grid-template-columns: 1fr 2fr;">
+          <li
+            v-for="(person, index) in filteredPersons"
+            :key="index"
+            @click="selectPerson(person)"
+            class="p-2 hover:bg-gridBoxHeader cursor-pointer even:bg-eventBoxBlue"
+          >
+            <div class="grid w-full" style="grid-template-columns: 1fr 2fr">
               <BaseText :text="person.DisplayName" size="md" />
               <BaseText :text="person.Club.Name" size="md" class="ml-4" />
             </div>
@@ -18,22 +23,60 @@
         </ul>
         <div @click="addNewPerson" class="p-2 hover:bg-gray-100 cursor-pointer">
           <base-button
-              type="secondary"
-              label="Add New Person"
-              iconName="fa-user-plus"
-              v-on:click="showNewPerson = true"
+            type="secondary"
+            label="Add New Person"
+            iconName="fa-user-plus"
+            v-on:click="showNewPerson = true"
           />
         </div>
       </div>
     </div>
-    <div v-if="showNewPerson" >
-      <BaseModal :show="showNewPerson" iconName="fa-user" buttonText="Add Person" @submit-modal="handleSubmit" @update:show="showNewPerson = false">
+    <div v-if="showNewPerson">
+      <BaseModal
+        :show="showNewPerson"
+        iconName="fa-user"
+        buttonText="Add Person"
+        @submit-modal="handleSubmit"
+        @update:show="showNewPerson = false"
+      >
         <template #modal-content>
           <BaseText class="pb-2" text="Enter Primary Contacts Information" />
-          <BaseInput :addBorder="true" :invalid="false" :value="personName" class="pb-2" placeholder="Display Name" type="formInput" @update:value="value => personName = value"/>
-          <BaseInput :addBorder="true" :invalid="false" :value="personName" class="pb-2" placeholder="Legal Name" type="formInput" @update:value="value => personName = value"/>
-          <BaseInput :addBorder="true" :invalid="false" :value="personEmail" class="pb-2" placeholder="Email" type="formInput" @update:value="value => personEmail = value"/>
-          <BaseInput :addBorder="true" :invalid="false" :value="personPronouns" class="pb-2" placeholder="Pronouns" type="formInput" @update:value="value => personPronouns = value"/>
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personName"
+            class="pb-2"
+            placeholder="Display Name"
+            type="formInput"
+            @update:value="value => (personName = value)"
+          />
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personName"
+            class="pb-2"
+            placeholder="Legal Name"
+            type="formInput"
+            @update:value="value => (personName = value)"
+          />
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personEmail"
+            class="pb-2"
+            placeholder="Email"
+            type="formInput"
+            @update:value="value => (personEmail = value)"
+          />
+          <BaseInput
+            :addBorder="true"
+            :invalid="false"
+            :value="personPronouns"
+            class="pb-2"
+            placeholder="Pronouns"
+            type="formInput"
+            @update:value="value => (personPronouns = value)"
+          />
         </template>
       </BaseModal>
     </div>
@@ -42,14 +85,14 @@
 
 <script>
 import BaseInput from '../../../Atoms/Input/BaseInput.vue';
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import BaseModal from "../../../Molecules/Modals/BaseModal/BaseModal.vue";
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BaseModal from '../../../Molecules/Modals/BaseModal/BaseModal.vue';
 
 export default {
   name: 'FindPerson',
   emits: ['add-new-person', 'person-selected'],
-  components: {BaseModal, BaseText, BaseButton, BaseInput},
+  components: { BaseModal, BaseText, BaseButton, BaseInput },
   props: {
     persons: {
       type: Array,
@@ -110,16 +153,18 @@ export default {
     },
     onInputChanged(value) {
       if (!this.showDropdown) return;
-      this.filteredPersons = this.persons.filter(person => person.DisplayName.toLowerCase().includes(value.toLowerCase()));
+      this.filteredPersons = this.persons.filter(person =>
+        person.DisplayName.toLowerCase().includes(value.toLowerCase())
+      );
     },
     debounceSearch() {
       clearTimeout(this.debouncedTimeout);
       this.debouncedTimeout = setTimeout(() => {
-        this.onInputChanged(this.inputValue)
+        this.onInputChanged(this.inputValue);
       }, 500);
     },
     handleSubmit() {
-      console.log('submitting person')
+      console.log('submitting person');
     }
   }
 };

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.stories.js

@@ -1,20 +1,20 @@
 import GenericImageCropper from './ImageCropper.vue';
 
 export default {
-    title: 'Organisms/ComplexInputs/ImageCropper',
-    component: GenericImageCropper,
-    tags: ['autodocs'],
-    args: {},
-    argTypes: {
-        personID: {
-            control: 'number',
-            description: 'The ID of the person for the image cropper'
-        },
-    },
+  title: 'Organisms/ComplexInputs/ImageCropper',
+  component: GenericImageCropper,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {
+    personID: {
+      control: 'number',
+      description: 'The ID of the person for the image cropper'
+    }
+  }
 };
 
 export const Default = {
-    args: {
-        personID: 1,
-    }
+  args: {
+    personID: 1
+  }
 };

package/src/stories/Organisms/ComplexInputs/ImageCropper/ImageCropper.vue

@@ -1,26 +1,23 @@
 <template>
   <section class="flex w-full justify-center">
-    <img v-if="!uploading"
-        :src="displayedUrl"
-        :class="getClasses"
-        :style="customStyle"
-        :alt="displayedUrl"
-        @error="onImageError"
-        @click="setShowCropper()"
-    />
-    <div v-if="uploading"
-         :class="getSkeletonClass"
-         @error="onImageError"
-         @click="setShowCropper()"
+    <img
+      v-if="!uploading"
+      :src="displayedUrl"
+      :class="getClasses"
+      :style="customStyle"
+      :alt="displayedUrl"
+      @error="onImageError"
+      @click="setShowCropper()"
     />
+    <div v-if="uploading" :class="getSkeletonClass" @error="onImageError" @click="setShowCropper()" />
     <avatar-cropper
-        v-model="showCropper"
-        :upload-url="`${uploadServer}${uploadImageName}`"
-        :cropper-options="cropperOptions"
-        @uploading="handleUploading"
-        @uploaded="handleUploaded"
-        @completed="handleCompleted"
-        @error="handlerError"
+      v-model="showCropper"
+      :upload-url="`${uploadServer}${uploadImageName}`"
+      :cropper-options="cropperOptions"
+      @uploading="handleUploading"
+      @uploaded="handleUploaded"
+      @completed="handleCompleted"
+      @error="handlerError"
     />
   </section>
 </template>
@@ -29,7 +26,7 @@
 import AvatarCropper from 'vue-avatar-cropper';
 import SelectAnProfile from '../../../../assets/select-profile.png';
 import SelectAnImage from '../../../../assets/select-tournament.png';
-import loading from '../../../../assets/loading-spinner.gif'
+import loading from '../../../../assets/loading-spinner.gif';
 
 export default {
   name: 'GenericImageCropper',
@@ -94,10 +91,14 @@ export default {
       return this.localImageUrl || (this.isProfile ? SelectAnProfile : SelectAnImage);
     },
     getClasses() {
-      return this.customClass ? this.customClass : "h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat"
+      return this.customClass
+        ? this.customClass
+        : 'h-52 w-80 border-2 border-dashed rounded-lg bg-contain bg-contain bg-center bg-no-repeat';
     },
     getSkeletonClass() {
-      return this.customSkeletonClass ? this.customSkeletonClass : "border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse"
+      return this.customSkeletonClass
+        ? this.customSkeletonClass
+        : 'border-2 h-52 w-80 border-dashed rounded-lg bg-quaternaryHighlight animate-pulse';
     }
   },
   methods: {
@@ -105,10 +106,10 @@ export default {
       this.showCropper = true;
     },
     handleUploading() {
-      this.uploading = true
+      this.uploading = true;
     },
     handleUploaded(response) {
-      this.uploading = false
+      this.uploading = false;
       if (response.response.status === 200) {
         this.localImageUrl = `${this.imageServer}${this.uploadImageName}.png`;
         this.$emit('update:url', `${this.imageServer}${this.uploadImageName}.png`);

package/src/stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.stories.js

@@ -1,17 +1,13 @@
 import TextBoxEditor from './TextBoxEditor.vue';
 
 export default {
-    title: 'Organisms/ComplexInputs/TextBoxEditor',
-    tags: ['autodocs'],
-    component: TextBoxEditor,
-    args: {},
-    argTypes: {}
+  title: 'Organisms/ComplexInputs/TextBoxEditor',
+  tags: ['autodocs'],
+  component: TextBoxEditor,
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    args: {
-    }
+  args: {}
 };
-
-
-

package/src/stories/Organisms/ComplexInputs/TextBoxEditor/TextBoxEditor.vue

@@ -1,52 +1,113 @@
 <template>
-  <div class="border rounded-lg text-secondary text-sm p-4 w-full" :class="invalid ? 'border-alarm' : 'border-dropdownSelect'" @click="editor && editor.commands.focus()">
+  <div
+    class="border rounded-lg text-secondary text-sm p-4 w-full"
+    :class="invalid ? 'border-alarm' : 'border-dropdownSelect'"
+    @click="editor && editor.commands.focus()"
+  >
     <div data-testid="editor-buttons" class="flex flex-row pl-2">
       <div class="w-1/2 md:w-1/3 border-r border-dropdownSelect flex flex-row justify-between pr-2">
-        <BaseButton iconName="fa-h1" label="" type="editor"
-                    :selected="editor && editor.isActive('heading', { level: 1 })"
-                    @buttonClick="editor.chain().toggleHeading({ level: 1 }).run()" />
-        <BaseButton iconName="fa-h2" label="" type="editor"
-                    :selected="editor && editor.isActive('heading', { level: 2 })"
-                    @buttonClick="editor.chain().toggleHeading({ level: 2 }).run()"/>
-        <BaseButton iconName="fa-h3" label="" type="editor"
-                    :selected="editor && editor.isActive('heading', { level: 3 })"
-                    @buttonClick="editor.chain().toggleHeading({ level: 3 }).run()"/>
-        <BaseButton iconName="fa-paragraph" label="" type="editor"
-                    :selected="editor && editor.isActive('paragraph')"
-                    @buttonClick="editor.chain().setParagraph().run()"/>
+        <BaseButton
+          iconName="fa-h1"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('heading', { level: 1 })"
+          @buttonClick="editor.chain().toggleHeading({ level: 1 }).run()"
+        />
+        <BaseButton
+          iconName="fa-h2"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('heading', { level: 2 })"
+          @buttonClick="editor.chain().toggleHeading({ level: 2 }).run()"
+        />
+        <BaseButton
+          iconName="fa-h3"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('heading', { level: 3 })"
+          @buttonClick="editor.chain().toggleHeading({ level: 3 }).run()"
+        />
+        <BaseButton
+          iconName="fa-paragraph"
+          label=""
+          type="editor"
+          :selected="editor && editor.isActive('paragraph')"
+          @buttonClick="editor.chain().setParagraph().run()"
+        />
       </div>
       <div class="hidden md:flex w-1/3 border-r border-dropdownSelect flex-row justify-around">
-        <BaseButton :selected="editor && editor.isActive('bold')" iconName="fa-bold" label="" type="editor"
-                    @buttonClick="editor && editor.chain().toggleBold().run()"/>
-        <BaseButton :selected="editor && editor.isActive('italic')" iconName="fa-italic" label="" type="editor"
-                    @buttonClick="editor && editor.chain().toggleItalic().run()"/>
-        <BaseButton :selected="editor && editor.isActive('strike')" iconName="fa-strikethrough" label="" type="editor"
-                    @buttonClick="editor && editor.chain().toggleStrike().run()"/>
+        <BaseButton
+          :selected="editor && editor.isActive('bold')"
+          iconName="fa-bold"
+          label=""
+          type="editor"
+          @buttonClick="editor && editor.chain().toggleBold().run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive('italic')"
+          iconName="fa-italic"
+          label=""
+          type="editor"
+          @buttonClick="editor && editor.chain().toggleItalic().run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive('strike')"
+          iconName="fa-strikethrough"
+          label=""
+          type="editor"
+          @buttonClick="editor && editor.chain().toggleStrike().run()"
+        />
       </div>
       <div class="hidden md:flex w-1/3 flex-row justify-between pl-2">
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'left' })" iconName="fa-align-left" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('left').run()"/>
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'center' })" iconName="fa-align-center" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('center').run()"/>
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'right' })" iconName="fa-align-right" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('right').run()"/>
-        <BaseButton :selected="editor && editor.isActive({ textAlign: 'justify' })" iconName="fa-align-justify" label="" type="editor"
-                    @buttonClick="editor.chain().setTextAlign('justify').run()"/>
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'left' })"
+          iconName="fa-align-left"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('left').run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'center' })"
+          iconName="fa-align-center"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('center').run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'right' })"
+          iconName="fa-align-right"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('right').run()"
+        />
+        <BaseButton
+          :selected="editor && editor.isActive({ textAlign: 'justify' })"
+          iconName="fa-align-justify"
+          label=""
+          type="editor"
+          @buttonClick="editor.chain().setTextAlign('justify').run()"
+        />
       </div>
       <div class="w-36 flex flex-row justify-around ml-4 border-l">
-        <BaseButton :selected="editor && editor.isActive('bulletList')"
-                    iconName="fa-list-ul"
-                    type="editor"
-                    @buttonClick="editor.chain().toggleBulletList().run()"  label=""/>
-        <BaseButton :selected="editor && editor.isActive('orderedList')"
-                    iconName="fa-list-ol"
-                    type="editor"
-                    @buttonClick="editor.chain().toggleOrderedList().run()"  label=""/>
+        <BaseButton
+          :selected="editor && editor.isActive('bulletList')"
+          iconName="fa-list-ul"
+          type="editor"
+          @buttonClick="editor.chain().toggleBulletList().run()"
+          label=""
+        />
+        <BaseButton
+          :selected="editor && editor.isActive('orderedList')"
+          iconName="fa-list-ol"
+          type="editor"
+          @buttonClick="editor.chain().toggleOrderedList().run()"
+          label=""
+        />
       </div>
     </div>
 
     <div class="my-4 p-4 rounded-xl h-72 bg-tertiary overflow-auto">
-      <editor-content :editor="editor" class="focus:shadow-none focus:outline-none"/>
+      <editor-content :editor="editor" class="focus:shadow-none focus:outline-none" />
     </div>
   </div>
 </template>
@@ -57,7 +118,7 @@ import { EditorContent, useEditor } from '@tiptap/vue-3';
 import StarterKit from '@tiptap/starter-kit';
 import Highlight from '@tiptap/extension-highlight';
 import TextAlign from '@tiptap/extension-text-align';
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
 
 export default {
   components: {
@@ -83,13 +144,13 @@ export default {
         StarterKit,
         Highlight,
         TextAlign.configure({
-          types: ['heading', 'paragraph'],
-        }),
+          types: ['heading', 'paragraph']
+        })
       ],
       editorProps: {
         attributes: {
-          class: 'focus:outline-none',
-        },
+          class: 'focus:outline-none'
+        }
       },
       onUpdate({ editor }) {
         editorContent.value = editor.getHTML();
@@ -97,14 +158,17 @@ export default {
       }
     });
 
-    watch(() => props.initialContent, (newContent) => {
-      if (editor.value) {
-        const currentContent = editor.value.getHTML();
-        if (newContent !== currentContent) {
-          editor.value.commands.setContent(newContent);
+    watch(
+      () => props.initialContent,
+      newContent => {
+        if (editor.value) {
+          const currentContent = editor.value.getHTML();
+          if (newContent !== currentContent) {
+            editor.value.commands.setContent(newContent);
+          }
         }
       }
-    });
+    );
 
     return { editor, editorContent };
   },
@@ -126,4 +190,4 @@ export default {
   padding: 0 1rem;
   list-style: disc !important;
 }
-</style>
+</style>

package/src/stories/Organisms/Containers/BoutsSection/BoutsSection.stories.js

@@ -5,65 +5,64 @@ import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPool
 const baseBouts = getPoolsWithBoutsByPoolId.pools[0]?.Bouts || [];
 
 // Helpers to clone with a different Status
-const withStatus = (bouts, status) =>
-    bouts.map((b, i) => ({ ...b, Status: status, OrderIndex: i }));
+const withStatus = (bouts, status) => bouts.map((b, i) => ({ ...b, Status: status, OrderIndex: i }));
 
 export default {
-    title: 'Organisms/Containers/BoutsSection',
-    component: BoutsSection,
-    tags: ['autodocs'],
-    args: {
-        title: 'Upcoming',
-        bouts: withStatus(baseBouts.slice(0, 4), 'Scheduled'),
-        draggable: false,
-        reorderMode: false,
-        showPlaceholder: false,
-        cardProps: {
-            hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
-            editMode: false,
-            isCountingBackwardsMaxScore: null
-        }
-    },
-    argTypes: {
-        title: { control: 'text' },
-        bouts: { control: 'object' },
-        draggable: { control: 'boolean' },
-        reorderMode: { control: 'boolean' },
-        showPlaceholder: { control: 'boolean' },
-        cardProps: { control: 'object' }
+  title: 'Organisms/Containers/BoutsSection',
+  component: BoutsSection,
+  tags: ['autodocs'],
+  args: {
+    title: 'Upcoming',
+    bouts: withStatus(baseBouts.slice(0, 4), 'Scheduled'),
+    draggable: false,
+    reorderMode: false,
+    showPlaceholder: false,
+    cardProps: {
+      hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
+      editMode: false,
+      isCountingBackwardsMaxScore: null
     }
+  },
+  argTypes: {
+    title: { control: 'text' },
+    bouts: { control: 'object' },
+    draggable: { control: 'boolean' },
+    reorderMode: { control: 'boolean' },
+    showPlaceholder: { control: 'boolean' },
+    cardProps: { control: 'object' }
+  }
 };
 
 export const Upcoming = {};
 
 export const UpcomingDraggable = {
-    args: {
-        title: 'Upcoming (Draggable)',
-        draggable: true,
-        reorderMode: true
-    }
+  args: {
+    title: 'Upcoming (Draggable)',
+    draggable: true,
+    reorderMode: true
+  }
 };
 
 export const Active = {
-    args: {
-        title: 'Active',
-        bouts: withStatus(baseBouts.slice(0, 2), 'Active'),
-        draggable: false
-    }
+  args: {
+    title: 'Active',
+    bouts: withStatus(baseBouts.slice(0, 2), 'Active'),
+    draggable: false
+  }
 };
 
 export const ActiveEmptyWithPlaceholder = {
-    args: {
-        title: 'Active',
-        bouts: [],
-        showPlaceholder: true
-    }
+  args: {
+    title: 'Active',
+    bouts: [],
+    showPlaceholder: true
+  }
 };
 
 export const Completed = {
-    args: {
-        title: 'Completed',
-        bouts: withStatus(baseBouts.slice(0, 3), 'Completed'),
-        draggable: false
-    }
+  args: {
+    title: 'Completed',
+    bouts: withStatus(baseBouts.slice(0, 3), 'Completed'),
+    draggable: false
+  }
 };