@dcrackel/hematournamentui 1.0.44 → 1.0.45

package/.storybook/main.js

@@ -5,14 +5,13 @@ const config = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
-    "@storybook/addon-mdx-gfm"
+    "@storybook/addon-mdx-gfm",
+    "@chromatic-com/storybook"
   ],
   framework: {
     name: "@storybook/vue3-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+  docs: {},
 };
 export default config;

package/.storybook/preview.js

@@ -4,7 +4,6 @@ import 'font-awesome/css/font-awesome.min.css';
 
 const preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -14,4 +13,4 @@ const preview = {
   },
 };
 
-export default preview;
+export default preview;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.44",
+  "version": "1.0.45",
   "type": "module",
   "main": "dist/HemaTouranmentUI-lib.umd.js",
   "module": "dist/HemaTouranmentUI-lib.es.js",
@@ -24,39 +24,42 @@
     "@tiptap/extension-text-align": "^2.1.13",
     "@tiptap/starter-kit": "^2.1.13",
     "@tiptap/vue-3": "^2.1.13",
-    "@vuepic/vue-datepicker": "^7.4.0",
+    "@vuepic/vue-datepicker": "^7.4.1",
     "concurrently": "^8.2.2",
     "cropperjs": "^1.6.1",
     "eslint-plugin-jest": "^27.6.3",
     "font-awesome": "^4.7.0",
     "happy-dom": "^12.10.3",
+    "postcss": "^8.4.38",
+    "postcss-nesting": "^12.1.5",
     "vue": "^3.4.0",
     "vue-avatar-cropper": "^6.0.10",
     "vue-google-autocomplete": "^1.1.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.10",
-    "@storybook/addon-docs": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-mdx-gfm": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.6.10",
-    "@storybook/vue3-vite": "^7.6.10",
+    "@chromatic-com/storybook": "^1.4.0",
+    "@storybook/addon-actions": "^8.1.3",
+    "@storybook/addon-docs": "^8.1.3",
+    "@storybook/addon-essentials": "^8.1.3",
+    "@storybook/addon-interactions": "^8.1.3",
+    "@storybook/addon-links": "^8.1.3",
+    "@storybook/addon-mdx-gfm": "^8.1.3",
+    "@storybook/blocks": "^8.1.3",
+    "@storybook/react": "^8.1.3",
+    "@storybook/test": "^8.1.3",
+    "@storybook/vue3": "^8.1.3",
+    "@storybook/vue3-vite": "^8.1.3",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vitest/coverage-v8": "^1.1.0",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/test-utils": "^2.4.3",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.56.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.20.1",
-    "storybook": "^7.6.10",
+    "storybook": "^8.1.3",
     "storybook-vue3-router": "^5.0.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.3",
     "vite": "^5.0.10",
     "vitest": "^1.1.0"
   }

package/postcss.config.js

@@ -1,5 +1,6 @@
 export default {
   plugins: {
+    'postcss-nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },

package/src/mocks/EventQuestionsMock.js

@@ -0,0 +1,59 @@
+const mockEventQuestions = [
+    {
+        "TotalPages": 2,
+        "Pages": [
+            {
+                "pageNumber": 1,
+                "questions": [
+                    {
+                        "id": 1,
+                        "text": "What Weapon Form will this event be for?",
+                        "answers": [
+                            "Longsword",
+                            "Saber",
+                            "Rapier and Dagger",
+                            "Sword and Buckler",
+                            "Single Rapier",
+                            "Small Sword",
+                            "Messer"
+                        ]
+                    },
+                    {
+                        "id": 2,
+                        "text": "Gender Restriction",
+                        "answers": [
+                            "Open",
+                            "Women",
+                            "Gender Minority"
+                        ]
+                    }
+                ]
+            },
+            {
+                "pageNumber": 2,
+                "questions": [
+                    {
+                        "id": 3,
+                        "text": "Division",
+                        "answers": [
+                            "Div1",
+                            "Div2",
+                            "Div3"
+                        ]
+                    },
+                    {
+                        "id": 4,
+                        "text": "How will your pools be seeded?",
+                        "answers": [
+                            "HEMA Ratings",
+                            "Our Point System",
+                            "Manual"
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+];
+
+export default mockEventQuestions;

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.stories.js

@@ -1,4 +1,5 @@
 import BaseButton from './BaseButton.vue';
+
 export default {
     title: 'Molecules/Buttons/BaseButton',
     component: BaseButton,
@@ -35,7 +36,7 @@ export default {
             control: {
                 type: 'select'
             },
-            options: ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'square'],
+            options: ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'square', 'tabBar'],
             defaultValue: 'primary'
         }
     }
@@ -97,3 +98,10 @@ export const IconButton = {
         iconName: 'fa-check',
     }
 };
+
+export const TabBarButton = {
+    args: {
+        type: 'tabBar',
+        label: 'Button'
+    }
+};

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -36,7 +36,7 @@ export default {
     type: {
       type: String,
       default: 'primary',
-      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square'].includes(value)
+      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square', 'tabBar'].includes(value)
     },
     selected: {
       type: Boolean,
@@ -49,6 +49,7 @@ export default {
     const typeClasses = {
       primary: 'mx-1 p-2 items-center gap-2.5 text-center rounded-md shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
           (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
+
       secondary: 'px-2.5 items-center gap-2.5 text-center my-1 p-3 border-b border-secondary hover:border-b hover:border-neutral w-full rounded-lg flex flex-row justify-center ' +
           (props.selected ? 'bg-secondary' : 'bg-primary'),
 
@@ -70,8 +71,12 @@ export default {
 
       square: 'p-8 my-3 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ' +
           (props.selected ? 'bg-dropdownSelect' : 'bg-neutral'),
+
+      tabBar: 'p-2 items-center justify-center text-center hover:border-b hover:border-b-bright text-primaryHighlight '
+          + (props.selected ? 'border-b border-b-bright' : 'border-b border-b-neutral'),
     };
 
+
     const sizeClasses = {
       xs: 'text-xs',
       sm: 'text-sm',
@@ -94,7 +99,8 @@ export default {
           adminSecondary: 'neutral',
           iconOnly: 'neutral',
           editor: props.selected ? 'bright' : 'quaternary',
-          square: 'primary'
+          square: 'primary',
+          tabBar: 'primaryHighlight',
         };
         return colorMap[props.type];
       }),

package/src/stories/Molecules/Buttons/ButtonBar/ButtonBar.stories.js

@@ -0,0 +1,42 @@
+import ButtonBar from './ButtonBar.vue';
+
+export default {
+    title: 'Molecules/Buttons/ButtonBar',
+    component: ButtonBar,
+    tags: ['autodocs'],
+    args: {
+        buttons: [
+            { id: 'btn1', label: 'Option 1' },
+            { id: 'btn2', label: 'Option 2' }
+        ]
+    },
+    argTypes: {
+        buttons: {
+            control: 'object'
+        },
+        selected: {
+            control: 'text'
+        },
+        onSelected: {},
+    }
+};
+
+export const Primary = {
+    args: {
+        buttons: [
+            { id: 'btn1', label: 'Absent' },
+            { id: 'btn2', label: 'Present' }
+        ]
+    }
+};
+
+export const ThreeButtons = {
+    args: {
+        buttons: [
+            { id: 'btn1', label: 'Option 1' },
+            { id: 'btn2', label: 'Option 2' },
+            { id: 'btn3', label: 'Option 3' }
+        ]
+    }
+};
+

package/src/stories/Molecules/Buttons/ButtonBar/ButtonBar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex">
+    <section v-for="(button, index) in buttons" :key="button.id" class="flex flex-row text-sm" @click="selectButton(button.id)">
+      <div class="py-3 px-4 transition-colors duration-200 border border-1"
+           :class="{
+       'rounded-l-xl': parseInt(index) === 0,
+       'rounded-r-xl': parseInt(index) === Object.keys(this.buttons).length - 1,
+       'bg-tertiary text-primaryHighlight': selected === button.id,
+       'bg-natural text-quaternary': selected !== button.id
+     }">
+        {{ button.label }}
+      </div>
+    </section>
+  </div>
+</template>
+
+
+<script>
+import { watch, ref } from 'vue';
+
+export default {
+  name: 'ButtonBar',
+  props: {
+    buttons: {
+      type: Array,
+      required: true,
+    },
+    selected: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ['update:selected'],
+  setup(props, { emit }) {
+    const selected = ref(props.selected);
+
+    // Watch for external changes to the `selected` prop
+    watch(() => props.selected, (newValue) => {
+      selected.value = newValue;
+    });
+
+    const selectButton = (id) => {
+      selected.value = id;
+      emit('update:selected', id);
+    };
+
+    return { selected, selectButton };
+  },
+};
+</script>

package/src/stories/Molecules/Cards/AdminFencerCard/AdminFencerCard.js

@@ -0,0 +1,29 @@
+import PlayerCard from './AdminFencerCard.vue';
+
+export default {
+    title: 'Molecules/Cards/PlayerCard',
+    component: PlayerCard,
+    argTypes: {
+        name: { control: 'text' },
+        points: { control: 'number' }
+    },
+};
+
+const Template = (args) => ({
+    components: { PlayerCard },
+    setup() {
+        return { args };
+    },
+    template: '<PlayerCard v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+        position: 1,
+        profileUrl: 'https://via.placeholder.com/150',
+        playerName: 'John Doe',
+        clubName:  'Super Duper Fencing club of really long name',
+        USAHemaRating: '1200',
+        HEMARating: 'A'
+};
+

package/src/stories/Molecules/Cards/AdminFencerCard/AdminFencerCard.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="w-full flex flex-row justify-between  border border-1 border-dropdownSelect h-20 rounded-xl">
+    <span class="w-3/4 flex flex-row">
+      <div class="flex flex-col justify-center px-2 mr-4 items-center border-r-2 border-dropdownSelect">
+        <BaseText :text="position" color="primary" size="md" weight="semi-bold" />
+      </div>
+      <div class="flex flex-col justify-center flex-shrink-0 mr-4">
+        <img :src="profileUrl" alt="player" class="w-14 h-14 rounded-xl" />
+      </div>
+      <div class="flex flex-col justify-center flex-shrink-0 mr-4 w-80">
+        <BaseText :text="playerName" color="dropdownSelect" size="md" weight="semi-bold" />
+        <BaseText :text="clubName" color="dropdownSelect" size="xs" weight="semi-bold" />
+      </div>
+      <div class="flex flex-col justify-center flex-shrink-0 mr-4">
+      <BaseText :text="'USA Hema: ' + USAHemaRating" color="primary" size="sm" weight="semi-bold" />
+      <BaseText :text="'HemaRating: ' + HEMARating" color="primary" size="sm" weight="semi-bold" />
+      </div>
+    </span>
+
+    <div class="flex flex-col justify-center mr-4" >
+      <ButtonBar
+          :buttons="{0:{id:'Absent',label:'Absent'},1:{id:'Present',label:'Present'}}"
+          v-on:selected="()=>({})"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+import ButtonBar from "../../Buttons/ButtonBar/ButtonBar.vue";
+
+export default {
+  name: 'AdminFencerCard',
+  components: {
+    ButtonBar,
+    BaseText
+  },
+  props: {
+    position: {
+      type: Number,
+      required: true,
+    },
+    profileUrl: {
+      type: String,
+      required: true,
+    },
+    playerName: {
+      type: String,
+      required: true,
+    },
+    clubName: {
+      type: String,
+      required: true,
+    },
+    USAHemaRating: {
+      type: String,
+      required: true,
+    },
+    HEMARating: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>

package/src/stories/Molecules/Cards/Detail/TournamentCardDetail.vue

@@ -10,7 +10,7 @@
       <BaseText :text="`${detail.EndDate}`" color="primaryHighlight" size="sm" weight="light" />
     </div>
     <div class="flex flex-row w-full justify-end">
-      <BaseButton :label="`Edit`" class="mt-2" primary />
+      <BaseButton :label="`Edit`" class="mt-2" primary @click="onClick" />
     </div>
   </div>
 </template>
@@ -48,6 +48,11 @@ export default {
         tags: []
       })
     }
+  },
+  methods: {
+    onClick() {
+      this.$emit('edit', this.detail);
+    }
   }
 };
 </script>

package/src/stories/Molecules/CombinationInputs/TitledInput/TitledInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col mb-3">
-    <BaseText :invalid=invalid :text=title class="mb-1 ml-1" color="primary"
+    <BaseText :invalid=invalid :text=title class="mb-1 ml-1" color="primaryHighlight"
               size="sm" weight="normal"/>
     <BaseInput :addBorder="true" :invalid=invalid :placeholder=placeholder :value=inputValue
                @update:value="handleUpdateValue"/>

package/src/stories/Molecules/Menus/TabBar/TabBar.stories.js

@@ -0,0 +1,26 @@
+import TabBar from './TabBar.vue';
+
+export default {
+    title: 'Molecules/Menus/TabBar/TabBar',
+    component: TabBar,
+    tags: ['autodocs']
+};
+
+const Template = (args) => ({
+    components: {TabBar},
+    setup() {
+        return {args};
+    }
+});
+
+export const Default = {
+    args: {
+        buttons: [
+            {label: 'Basic'},
+            {label: 'Details'},
+            {label: 'Events'},
+            {label: 'Payments'}, // should be greyed out if ferrotas not being used for this
+            {label: 'Staff'}
+        ]
+    }
+};

package/src/stories/Molecules/Menus/TabBar/TabBar.vue

@@ -0,0 +1,14 @@
+<template>
+  <nav class="flex flex-row w-full">
+    <slot></slot>
+  </nav>
+</template>
+
+<script>
+
+export default {
+  name: 'TabBar',
+  components: {},
+  props: {},
+};
+</script>

package/src/stories/Molecules/StepIndicator/BaseStepIndicator/StepIndicator.stories.js

@@ -0,0 +1,20 @@
+import StepIndicator from "./StepIndicator.vue";
+import mockEventQuestions from "../../../../mocks/EventQuestionsMock.js";
+
+export default {
+    title: 'Molecules/StepIndicator/BaseStepIndicator',
+    component: StepIndicator,
+    tags: ['autodocs'],
+    args: {
+        eventQuestions: mockEventQuestions
+    },
+    argTypes: {}
+};
+
+export const Default = {
+    args: {
+        eventQuestions: mockEventQuestions,
+        iconName: "fa-circle-1",
+        steps: 3
+    }
+}

package/src/stories/Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue

@@ -0,0 +1,100 @@
+<!--make as many circles as there are pages-->
+<!--circles need labels underneath with the page number "page 1" etc-->
+<!--highlight the circle that is the same number as the current page-->
+<!--for numbers less than the current, replace circle and number with circle and checkmark-->
+<!--also highlight the line between previous steps-->
+<!--allow circles less than the current page number to be clickable objects that will take you back to that page-->
+
+<!--<template>-->
+<!--  <nav class="flex flex-row w-full">-->
+<!--    <div v-for="(step, index) in steps" :key="index" class="flex flex-row">-->
+<!--      <BaseIcon v-if="index > 0" :color="color" :icon-name="iconName" :size="size" :style="iconStyle"-->
+<!--                data-testid="base-icon"/>-->
+<!--    </div>-->
+<!--  </nav>-->
+<!--</template>-->
+
+<template>
+  <nav class="flex flex-row w-full">
+    <div v-for="step in steps" class="flex flex-row">
+      <BaseIcon class="mx-5" :color="color" :icon-name="`fa-regular fa-circle-${step}`" :size="size" :style="iconStyle" :hover="hover"
+                data-testid="base-icon"/>
+      <BaseText :color="'primaryHighlight'" :size="'sm'" :text="`Step ${step}`"
+                :weight="'normal'"/>
+    </div>
+  </nav>
+</template>
+<script>
+
+import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from "../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'base-step-indicator',
+  components: {BaseText, BaseIcon},
+
+  props: {
+    // steps: {
+    //   type: Array,
+    //   required: true,
+    //   default: () => []
+    // },
+
+    steps: {
+      type: Number,
+      default: 3
+    },
+
+    iconName: {
+      type: String,
+      default:
+          ''
+    }
+    ,
+    iconStyle: {
+      type: String,
+      default:
+          'fa-solid',
+      validator:
+          value => ['fa-solid', 'fa-regular', 'fa-light', 'fa-thing'].includes(value)
+    }
+    ,
+    size: {
+      type: String,
+      default:
+          'md',
+      validator:
+          value => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'].includes(value)
+    },
+    color: {
+      type: String,
+      default: 'bright'
+    },
+    hover: {
+      type: String,
+      default: 'primary',
+      validator:
+       value => ['primary', 'secondary', 'tertiary', 'bright'].includes(value)
+    },
+    type: {
+      type: String,
+      default:
+          'primary',
+      validator:
+          value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square', 'tabBar'].includes(value)
+    }
+    ,
+    selected: {
+      type: Boolean,
+      default:
+          false
+    }
+  },
+
+  setup(props) {
+    const typeClasses = {
+      primary: 'mx-1 p-2 items-center icon="fa-regular fa-circle-1" />'
+    }
+  }
+}
+</script>

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

@@ -25,6 +25,7 @@ export default {
 export const Default = {
     args: {
         detail: {
+            tournamentId: '1234',
             artwork: '',
             tags: ['tag1', 'tag2'],
             name: 'Tournament Name',

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

@@ -1,7 +1,7 @@
 <template>
   <div class="rounded-xl w-72 shadow">
     <TournamentHeader :artwork="detail.images && detail.images.length > 0 ? detail.images[0].URL : ''" :tags="detail.tags" />
-    <TournamentDetail :detail="detail" />
+    <TournamentDetail :detail="detail" @click="onClick" />
   </div>
 </template>
 
@@ -20,7 +20,7 @@ export default {
       type: Object,
       required: true,
       default: () => ({
-        TournamentId: null,
+        tournamentId: null,
         Name: '',
         StartDate: '',
         EndDate: '',
@@ -42,6 +42,11 @@ export default {
       })
     }
   },
+  methods: {
+    onClick() {
+      this.$emit('edit', this.detail.TournamentId);
+    }
+  }
 };
 
 </script>