@dcrackel/meyersquaredui 1.0.110 → 1.0.112

package/package.json

@@ -1,68 +1,68 @@
-{
-  "name": "@dcrackel/meyersquaredui",
-  "private": false,
-  "version": "1.0.110",
-  "type": "module",
-  "main": "dist/meyersquaredui.cjs.js",
-  "module": "dist/meyersquaredui.esm.js",
-  "exports": {
-    ".": {
-      "import": "./dist/meyersquaredui.es.js",
-      "require": "./dist/meyersquaredui.umd.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "npm version patch && vite build",
-    "publish:package": "npm publish",
-    "preview": "vite preview",
-    "build-storybook": "npm run build:tailwind && storybook build",
-    "build:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ../HemaTournamentPublic/src/ui-tailwind.css",
-    "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
-    "watch:storybook": "storybook dev -p 6006",
-    "watch:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
-    "copy:css": "copy .\\dist\\ui-tailwind.css ..\\HemaTournamentPublic\\src\\ui-tailwind.css",
-    "lint": "eslint --ext .ts,.vue .",
-    "test": "vitest",
-    "coverage": "vitest run --coverage"
-  },
-  "dependencies": {
-    "concurrently": "^9.0.1",
-    "font-awesome": "^4.7.0",
-    "version": "^0.0.1",
-    "vue": "^3.5.10",
-    "vue3-google-map": "^0.21.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-controls": "^8.3.0",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/addon-interactions": "^8.3.0",
-    "@storybook/addon-links": "^8.3.0",
-    "@storybook/addon-mdx-gfm": "^8.3.0",
-    "@storybook/addon-onboarding": "^8.3.0",
-    "@storybook/blocks": "^8.3.0",
-    "@storybook/test": "^8.3.0",
-    "@storybook/vue3": "^8.3.0",
-    "@storybook/vue3-vite": "^8.3.0",
-    "@vitejs/plugin-vue": "^5.1.2",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.45",
-    "storybook": "^8.3.0",
-    "tailwindcss": "^3.4.11",
-    "vite": "^5.4.1"
-  },
-  "keywords": [
-    "story",
-    "hema",
-    "tournament",
-    "UI",
-    "vue3"
-  ],
-  "author": "Meyer Squared",
-  "license": "MIT"
-}
+{
+  "name": "@dcrackel/meyersquaredui",
+  "private": false,
+  "version": "1.0.112",
+  "type": "module",
+  "main": "dist/meyersquaredui.cjs.js",
+  "module": "dist/meyersquaredui.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/meyersquaredui.es.js",
+      "require": "./dist/meyersquaredui.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm version patch && vite build",
+    "publish:package": "npm publish",
+    "preview": "vite preview",
+    "build-storybook": "npm run build:tailwind && storybook build",
+    "build:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ../HemaTournamentPublic/src/ui-tailwind.css",
+    "storybook": "concurrently \"npm run watch:tailwind\" \"npm run watch:storybook\"",
+    "watch:storybook": "storybook dev -p 6006",
+    "watch:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
+    "copy:css": "copy .\\dist\\ui-tailwind.css ..\\HemaTournamentPublic\\src\\ui-tailwind.css",
+    "lint": "eslint --ext .ts,.vue .",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "concurrently": "^9.0.1",
+    "font-awesome": "^4.7.0",
+    "version": "^0.0.1",
+    "vue": "^3.5.10",
+    "vue3-google-map": "^0.21.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^2.0.2",
+    "@storybook/addon-controls": "^8.3.5",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-mdx-gfm": "^8.3.5",
+    "@storybook/addon-onboarding": "^8.3.5",
+    "@storybook/blocks": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@storybook/vue3": "^8.3.5",
+    "@storybook/vue3-vite": "^8.3.5",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "storybook": "^8.3.5",
+    "tailwindcss": "^3.4.11",
+    "vite": "^5.4.1"
+  },
+  "keywords": [
+    "story",
+    "hema",
+    "tournament",
+    "UI",
+    "vue3"
+  ],
+  "author": "Meyer Squared",
+  "license": "MIT"
+}

package/src/stories/Molecules/ProgressTracker/ProgressTracker.stories.js

@@ -1,8 +1,13 @@
 import ProgressTracker from './ProgressTracker.vue';
 
 export default {
-    title: 'Molecules/ProgressTracker/ProgressTracker',
+    title: 'Components/ProgressTracker',
     component: ProgressTracker,
+    argTypes: {
+        currentPhase: { control: { type: 'number', min: 0, max: 4 } },
+        highlightPhase: { control: { type: 'number', min: 0, max: 4 } },
+        isEventComplete: { control: 'boolean' },
+    },
 };
 
 const Template = (args) => ({
@@ -13,21 +18,44 @@ const Template = (args) => ({
     template: '<ProgressTracker v-bind="args" />',
 });
 
-export const ActiveEvent = Template.bind({});
-ActiveEvent.args = {
-    currentPhase: 2, // Example: "Bracket" phase
+export const Default = Template.bind({});
+Default.args = {
+    currentPhase: 2, // Example: Pool Results
+    highlightPhase: 1, // Example: Pools (User viewing Pools page)
     isEventComplete: false,
+    phases: [
+        { label: 'Registration', icon: 'fa-solid fa-file-alt' },
+        { label: 'Pools', icon: 'fa-kit fa-longsword' },
+        { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
+        { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
+        { label: 'Final Result', icon: 'fa-solid fa-trophy' },
+    ],
 };
 
-export const CompletedEvent = Template.bind({});
-CompletedEvent.args = {
-    currentPhase: 3,
+export const EventComplete = Template.bind({});
+EventComplete.args = {
+    currentPhase: 4, // Event is complete
+    highlightPhase: 4, // User is viewing the final results
+    isEventComplete: true,
     phases: [
         { label: 'Registration', icon: 'fa-solid fa-file-alt' },
-        { label: 'Demo Pools', icon: 'fa-kit fa-longsword' },
+        { label: 'Pools', icon: 'fa-kit fa-longsword' },
+        { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
+        { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
+        { label: 'Final Result', icon: 'fa-solid fa-trophy' },
+    ],
+};
+
+export const EarlyPhase = Template.bind({});
+EarlyPhase.args = {
+    currentPhase: 0, // Event hasn't started yet
+    highlightPhase: 0, // Viewing registration page
+    isEventComplete: false,
+    phases: [
+        { label: 'Registration', icon: 'fa-solid fa-file-alt' },
+        { label: 'Pools', icon: 'fa-kit fa-longsword' },
         { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
         { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
         { label: 'Final Result', icon: 'fa-solid fa-trophy' },
     ],
-    isEventComplete: true,
 };

package/src/stories/Molecules/ProgressTracker/ProgressTracker.vue

@@ -29,11 +29,11 @@
         <BaseText
             tag="p"
             size="sm"
-            :weight="currentPhase === index ? 'bold' : 'normal'"
+            :weight="highlightPhase === index ? 'bold' : 'normal'"
             class="mt-2 transition-all duration-300"
             :class="{
-            'font-bold text-accent': isPhaseActive(index),
-            'text-gray-600': !isPhaseActive(index),
+            'font-bold text-accent': isPhaseActive(index) || highlightPhase === index,
+            'text-gray-600': !isPhaseActive(index) && highlightPhase !== index,
             'hover:text-accent': hoveredPhase === index && index <= currentPhase,
           }"
         >
@@ -68,6 +68,10 @@ export default {
       required: true,
       default: 0,
     },
+    highlightPhase: {
+      type: Number,
+      default: null,
+    },
     isEventComplete: {
       type: Boolean,
       default: false,

package/src/stories/Organisms/GridLayout/GridLayout.stories.js

@@ -81,4 +81,14 @@ ArticleGridLoading.args = {
     cardComponent: ArticleCard,
     items: mockArticles,
     isLoading: true
+};
+
+export const Empty = FencerTemplate.bind({});
+Empty.args = {
+    title: 'Empty Set',
+    moreButtonLabel: '',
+    maxColumns: 1,
+    cardComponent: ArticleCard,
+    items: [],
+    isLoading: true
 };

package/src/stories/Organisms/GridLayout/GridLayout.vue

@@ -7,6 +7,7 @@
       </div>
       <div :class="gridClasses">
         <component
+            v-if="items.length > 0"
             v-for="(item, index) in items"
             :is="cardComponent"
             :key="index"
@@ -15,6 +16,10 @@
             :isLoading="isLoading"
             @grid-card-click="handleTournamentCardClick"
         />
+        <div v-if="items.length === 0" class="w-full flex-col flex p-10">
+          <Icon :icon="noResultsIcon" color="primary" size="5xl" class="w-full flex justify-center"/>
+          <BaseText color="primary" size="lg" weight="normal" class="w-full flex justify-center mt-4">{{noResultsMsg}}</BaseText>
+        </div>
       </div>
     </div>
     <div v-if="!whiteStyle && moreButtonLabel" class="w-full flex justify-center pb-28 pt-10 md:pt-14">
@@ -36,10 +41,12 @@
 import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
 import BaseText from "../../Atoms/BaseText/BaseText.vue";
 import {markRaw} from "vue";
+import Icon from "../../Atoms/Icon/Icon.vue";
 
 export default {
   name: 'GridLayout',
   components: {
+    Icon,
     BaseButton,
     BaseText,
   },
@@ -81,6 +88,14 @@ export default {
       type: String,
       default: 'w-full flex justify-center mx-auto',
     },
+    noResultsMsg: {
+      type: String,
+      default: 'No results found',
+    },
+    noResultsIcon: {
+      type: String,
+      default: 'fa-user-magnifying-glass',
+    },
   },
   emits: ['grid-click', 'grid-card-click'],
   computed: {

package/src/stories/Templates/TournamentDetailPage/TournamentDetailPage.vue

@@ -18,10 +18,11 @@
           />
         </div>
         <div class="w-full max-w-4xl mx-auto md:p-4 mb-20">
+          <!--              :items="tournament.Events"-->
           <GridLayout
               v-if="tournament.Events.length > 0"
               :cardComponent="EventListCard"
-              :items="tournament.Events"
+              :items="[]"
               :maxColumns="1"
               :isLoading="false"
               :whiteStyle="true"