@dcrackel/hematournamentui 1.0.3 → 1.0.4

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+    root: true,
+    env: {
+        node: true,
+        'jest/globals': true
+    },
+    extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', 'plugin:jest/recommended', 'prettier', 'plugin:storybook/recommended'],
+    parserOptions: {
+        parser: 'babel-eslint'
+    },
+    rules: {
+        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    },
+    plugins: [
+        'jest'
+    ]
+}

package/.prettierignore

@@ -0,0 +1 @@
+node_modules/

package/.storybook/main.js

@@ -5,6 +5,7 @@ const config = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-mdx-gfm"
   ],
   framework: {
     name: "@storybook/vue3-vite",

package/.storybook/mockRoutes.js

@@ -0,0 +1,9 @@
+// .storybook/mockRoutes.js
+import config from "./main.js";
+
+export const routes = [
+    { path: '/', component: { template: '<div>Home</div>' } },
+    { path: '/event', component: { template: '<div>Event</div>' } },
+];
+
+export default routes;

package/dist/{my-library.es.js → HemaTouranmentUI-lib.es.js}

@@ -1,10 +1,10 @@
-import { withDirectives as I, openBlock as s, createElementBlock as c, vModelText as Q, reactive as b, computed as m, normalizeClass as h, toDisplayString as k, resolveComponent as g, createCommentVNode as w, createVNode as d, createElementVNode as i, normalizeStyle as D, Fragment as x, renderList as B, createBlock as f, resolveDynamicComponent as E } from "vue";
+import { withDirectives as I, openBlock as s, createElementBlock as c, vModelText as Q, reactive as p, computed as y, normalizeClass as h, toDisplayString as k, resolveComponent as g, createCommentVNode as w, createVNode as d, createElementVNode as i, normalizeStyle as D, Fragment as B, renderList as x, createBlock as f, resolveDynamicComponent as E } from "vue";
 const A = (e, t) => {
   const r = e.__vccOpts || e;
   for (const [o, u] of t)
     r[o] = u;
   return r;
-}, v = {
+}, S = {
   name: "BaseInput",
   props: {
     placeholder: {
@@ -34,18 +34,18 @@ const A = (e, t) => {
       }, 300);
     }
   }
-}, S = ["placeholder"];
-function Y(e, t, r, o, u, n) {
+}, Y = ["placeholder"];
+function v(e, t, r, o, u, n) {
   return I((s(), c("input", {
     class: "appearance-none focus:outline-none w-full text-sm",
     placeholder: r.placeholder,
     "onUpdate:modelValue": t[0] || (t[0] = (a) => u.internalValue = a),
     onInput: t[1] || (t[1] = (...a) => n.onInput && n.onInput(...a))
-  }, null, 40, S)), [
+  }, null, 40, Y)), [
     [Q, u.internalValue]
   ]);
 }
-const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
+const M = /* @__PURE__ */ A(S, [["render", v]]), G = {
   name: "BaseText",
   props: {
     text: {
@@ -64,7 +64,7 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
       type: String,
       default: "small",
       validator: function(e) {
-        return ["xs", "small", "medium", "large", "xl", "2xl", "3xl"].indexOf(e) !== -1;
+        return ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"].indexOf(e) !== -1;
       }
     },
     color: {
@@ -91,8 +91,8 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
     }
   },
   setup(e) {
-    return e = b(e), {
-      classes: m(() => {
+    return e = p(e), {
+      classes: y(() => {
         let t = "inline-block font-sans";
         switch (e.color) {
           case "neutral":
@@ -159,21 +159,18 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
           case "extra-bold":
             t += " font-extrabold";
             break;
-          default:
-            t += " font-normal";
-            break;
         }
         switch (e.size) {
           case "xs":
             t += " text-xs";
             break;
-          case "small":
+          case "sm":
             t += " text-sm";
             break;
-          case "medium":
+          case "md":
             t += " text-md";
             break;
-          case "large":
+          case "lg":
             t += " text-lg";
             break;
           case "xl":
@@ -199,9 +196,9 @@ function q(e, t, r, o, u, n) {
     class: h(o.classes)
   }, k(r.text), 3);
 }
-const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
+const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
   name: "base-button",
-  components: { DefaultText: p },
+  components: { BaseText: b },
   props: {
     label: {
       type: String,
@@ -214,8 +211,9 @@ const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
     size: {
       type: String,
       validator: function(e) {
-        return ["xs", "small", "medium", "large", "xl"].indexOf(e) !== -1;
-      }
+        return ["xs", "sm", "md", "lg", "xl"].indexOf(e) !== -1;
+      },
+      default: "sm"
     },
     type: {
       type: String,
@@ -223,12 +221,16 @@ const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
       validator: function(e) {
         return ["primary", "secondary", "tertiary", "bright", "admin", "adminSecondary"].indexOf(e) !== -1;
       }
+    },
+    selected: {
+      type: Boolean,
+      default: !1
     }
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    return e = b(e), {
-      textColor: m(() => {
+    return e = p(e), {
+      textColor: y(() => {
         switch (e.type) {
           case "primary":
             return "primary";
@@ -242,71 +244,46 @@ const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
             return "neutral";
           case "adminSecondary":
             return "neutral";
-          default:
-            return "primary";
-        }
-      }),
-      hoverClass: m(() => {
-        switch (e.type) {
-          case "admin":
-            return "hover:text-secondary";
-          case "adminSecondary":
-            return "hover:text-tertiary";
-          default:
-            return "";
-        }
-      }),
-      hoverColor: m(() => {
-        switch (e.type) {
-          case "admin":
-            return "text-secondary";
-          case "adminSecondary":
-            return "text-tertiary";
-          default:
-            return null;
         }
       }),
-      classes: m(() => {
-        let r = "px-2.5 mx-2 inline-flex ";
+      classes: y(() => {
+        let r = "px-2.5 mx-1 inline-flex ";
         switch (e.type) {
           case "primary":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center bg-neutral hover:bg-tertiary";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary", e.selected ? r += " bg-dropdownSelect" : r += " bg-neutral";
             break;
           case "secondary":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow bg-secondary justify-center hover:bg-primary text-neutral";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral", e.selected ? r += " bg-dropdownSelect" : r += " bg-secondary";
             break;
           case "tertiary":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center bg-tertiary hover:bg-primary text-primary";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary", e.selected ? r += " bg-primary" : r += " bg-tertiary";
             break;
           case "bright":
-            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center bg-bright hover:bg-primary text-neutral";
+            r += " py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral", e.selected ? r += " bg-primary" : r += " bg-bright";
             break;
           case "admin":
-            r += " py-2 items-center rounded-md gap-2.5 text-center bg-primary hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight";
+            r += " py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight", e.selected, r += " bg-primary";
             break;
           case "adminSecondary":
-            r += " py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral";
+            r += " py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral", e.selected ? r += " bg-primary" : r += " bg-tertiary";
             break;
         }
         switch (e.size) {
           case "xs":
             r += " text-xs";
             break;
-          case "small":
+          case "sm":
             r += " text-sm";
             break;
-          case "medium":
+          case "md":
             r += " text-md";
             break;
-          case "large":
+          case "lg":
             r += " text-lg";
             break;
           case "xl":
             r += " text-xl";
             break;
-          default:
-            r += "";
-            break;
         }
         return r;
       }),
@@ -317,8 +294,9 @@ const p = /* @__PURE__ */ A(G, [["render", q]]), U = {
   }
 };
 function V(e, t, r, o, u, n) {
-  const a = g("DefaultText");
+  const a = g("BaseText");
   return s(), c("button", {
+    "data-testid": "base-button",
     class: h(o.classes),
     type: "button",
     onClick: t[0] || (t[0] = (...l) => o.onClick && o.onClick(...l))
@@ -328,6 +306,7 @@ function V(e, t, r, o, u, n) {
       class: h([r.iconClass, "mr-2 hover:text-highlightedClass"])
     }, null, 2)) : w("", !0),
     d(a, {
+      "data-testid": "base-text",
       color: o.textColor,
       size: r.size,
       text: r.label,
@@ -350,8 +329,8 @@ const _ = /* @__PURE__ */ A(U, [["render", V]]), $ = {
     }
   },
   setup(e) {
-    return e = b(e), {
-      classes: m(() => {
+    return e = p(e), {
+      classes: y(() => {
         let t = "cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral";
         switch (e.backgroundColor) {
           case "primary":
@@ -413,7 +392,7 @@ function j(e, t, r, o, u, n) {
       class: "h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center"
     }, [
       i("div", J, [
-        (s(!0), c(x, null, B(r.tags, (l) => (s(), f(a, {
+        (s(!0), c(B, null, x(r.tags, (l) => (s(), f(a, {
           key: l,
           label: l
         }, null, 8, ["label"]))), 128))
@@ -425,7 +404,7 @@ const F = /* @__PURE__ */ A(K, [["render", j]]), O = {
   name: "tournament-card-details",
   components: {
     BaseButton: _,
-    BaseText: p
+    BaseText: b
   },
   props: {
     detail: {
@@ -452,20 +431,20 @@ function N(e, t, r, o, u, n) {
     d(a, {
       text: r.detail.location,
       color: "primary",
-      size: "small",
+      size: "sm",
       weight: "normal"
     }, null, 8, ["text"]),
     i("div", z, [
       d(a, {
         text: `${r.detail.date}`,
         color: "primaryHighlight",
-        size: "small",
+        size: "sm",
         weight: "light"
       }, null, 8, ["text"]),
       d(a, {
         text: `${r.detail.closes}`,
         color: "primaryHighlight",
-        size: "small",
+        size: "sm",
         weight: "light"
       }, null, 8, ["text"])
     ]),
@@ -512,7 +491,7 @@ function ee(e, t, r, o, u, n) {
 }
 const te = /* @__PURE__ */ A(R, [["render", ee]]), re = {
   name: "DropDownMenu",
-  components: { BaseText: p },
+  components: { BaseText: b },
   props: {
     label: {
       type: String
@@ -538,38 +517,36 @@ const te = /* @__PURE__ */ A(R, [["render", ee]]), re = {
       this.isDropDownOpen = !this.isDropDownOpen;
     }
   }
-}, ae = { class: "flex flex-row" }, ne = { class: "mr-2 pt-1" }, le = /* @__PURE__ */ i("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), se = {
+}, ae = { class: "flex flex-row" }, ne = /* @__PURE__ */ i("i", { class: "fa-solid fa-chevron-down text-xs" }, null, -1), le = {
   key: 0,
-  class: "flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-white"
-}, oe = ["onClick"];
-function ie(e, t, r, o, u, n) {
+  class: "flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral"
+}, se = ["onClick"];
+function oe(e, t, r, o, u, n) {
   const a = g("BaseText");
   return s(), c("div", ae, [
-    i("span", ne, [
-      d(a, {
-        text: r.label,
-        color: "quaternary",
-        size: "small",
-        weight: "normal"
-      }, null, 8, ["text"])
-    ]),
     i("span", null, [
       i("div", {
         class: "z-10 rounded-lg shadow px-2 py-2 w-32 flex flex-row justify-between",
         onClick: t[0] || (t[0] = (l) => n.handleDropDown())
       }, [
+        d(a, {
+          text: r.label,
+          color: "quaternary",
+          size: "sm",
+          weight: "normal"
+        }, null, 8, ["text"]),
         d(a, {
           text: r.selectedItem.text,
           color: "secondary",
           size: "sm",
           weight: "normal"
         }, null, 8, ["text"]),
-        le
+        ne
       ]),
-      e.isDropDownOpen ? (s(), c("div", se, [
-        (s(!0), c(x, null, B(r.items, (l) => (s(), c("a", {
+      e.isDropDownOpen ? (s(), c("div", le, [
+        (s(!0), c(B, null, x(r.items, (l) => (s(), c("a", {
           key: l.id,
-          onClick: (y) => n.handleClick(l),
+          onClick: (m) => n.handleClick(l),
           class: "hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0"
         }, [
           d(a, {
@@ -578,15 +555,15 @@ function ie(e, t, r, o, u, n) {
             size: "xs",
             weight: "normal"
           }, null, 8, ["text"])
-        ], 8, oe))), 128))
+        ], 8, se))), 128))
       ])) : w("", !0)
     ])
   ]);
 }
-const ce = /* @__PURE__ */ A(re, [["render", ie]]), de = {
+const ie = /* @__PURE__ */ A(re, [["render", oe]]), ce = {
   name: "FilterAndSortBar",
   components: {
-    DropDownMenu: ce,
+    DropDownMenu: ie,
     BaseInput: M
   },
   data() {
@@ -612,12 +589,12 @@ const ce = /* @__PURE__ */ A(re, [["render", ie]]), de = {
       this.$emit("sort", e), console.log("handleSelectedItem", e);
     }
   }
-}, ue = { class: "flex flex-row w-full justify-between" }, ge = { class: "rounded-lg shadow px-2 py-1 w-1/2 flex flex-row mt-0.5" }, Ae = /* @__PURE__ */ i("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
-function me(e, t, r, o, u, n) {
+}, de = { class: "flex flex-row w-full justify-between" }, ue = { class: "rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4" }, ge = /* @__PURE__ */ i("i", { class: "fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1" }, null, -1);
+function Ae(e, t, r, o, u, n) {
   const a = g("BaseInput"), l = g("DropDownMenu");
-  return s(), c("section", ue, [
-    i("div", ge, [
-      Ae,
+  return s(), c("section", de, [
+    i("div", ue, [
+      ge,
       d(a, {
         placeholder: "Search on Name, Location, or Date",
         class: "text-quaternary",
@@ -635,11 +612,11 @@ function me(e, t, r, o, u, n) {
     ])
   ]);
 }
-const ye = /* @__PURE__ */ A(de, [["render", me]]), he = {
+const me = /* @__PURE__ */ A(ce, [["render", Ae]]), ye = {
   name: "GridContainer",
   components: {
-    FilterAndSortBar: ye,
-    BaseText: p,
+    FilterAndSortBar: me,
+    BaseText: b,
     TournamentCard: te
   },
   props: {
@@ -699,10 +676,10 @@ const ye = /* @__PURE__ */ A(de, [["render", me]]), he = {
       this.sortCriteria = e.text;
     }
   }
-}, xe = { class: "border border-dropdownSelect rounded-lg p-9 bg-neutral" }, Be = { class: "w-full text-center mb-9" }, pe = { class: "my-4" }, be = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full" };
-function fe(e, t, r, o, u, n) {
+}, he = { class: "border border-dropdownSelect rounded-lg p-9 bg-neutral" }, Be = { class: "w-full text-center mb-9" }, xe = { class: "my-4" }, be = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full" };
+function pe(e, t, r, o, u, n) {
   const a = g("BaseText"), l = g("FilterAndSortBar");
-  return s(), c("div", xe, [
+  return s(), c("div", he, [
     i("h1", Be, [
       d(a, {
         color: "primaryHighlight",
@@ -711,7 +688,7 @@ function fe(e, t, r, o, u, n) {
         weight: "normal"
       })
     ]),
-    i("div", pe, [
+    i("div", xe, [
       d(l, {
         items: r.dropdownItems,
         label: r.label,
@@ -721,15 +698,15 @@ function fe(e, t, r, o, u, n) {
       }, null, 8, ["items", "label", "selectedItem", "onFilterbar", "onSort"])
     ]),
     i("div", be, [
-      (s(!0), c(x, null, B(n.filteredItems, (y) => (s(), c("div", {
-        key: y.id
+      (s(!0), c(B, null, x(n.filteredItems, (m) => (s(), c("div", {
+        key: m.id
       }, [
-        (s(), f(E(r.component), { detail: y }, null, 8, ["detail"]))
+        (s(), f(E(r.component), { detail: m }, null, 8, ["detail"]))
       ]))), 128))
     ])
   ]);
 }
-const ve = /* @__PURE__ */ A(he, [["render", fe]]), Ce = {
+const Ee = /* @__PURE__ */ A(ye, [["render", pe]]), fe = {
   name: "AdminLeftMenu",
   components: { BaseButton: _ },
   props: {
@@ -743,7 +720,7 @@ const ve = /* @__PURE__ */ A(he, [["render", fe]]), Ce = {
       this.$emit("button-click", e);
     }
   }
-}, ke = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, we = /* @__PURE__ */ i("section", { class: "h-28 border-b-2 border-neutral" }, [
+}, Ce = { class: "bg-secondary w-64 h-screen flex flex-col justify-between" }, ke = /* @__PURE__ */ i("section", { class: "h-28 border-b border-neutral" }, [
   /* @__PURE__ */ i("div", { class: "flex flex-col justify-center h-28" }, [
     /* @__PURE__ */ i("div", { class: "ml-8" }, [
       /* @__PURE__ */ i("img", {
@@ -753,22 +730,22 @@ const ve = /* @__PURE__ */ A(he, [["render", fe]]), Ce = {
       })
     ])
   ])
-], -1), _e = { class: "flex flex-col p-2 h-full" }, Ie = { class: "flex flex-col justify-end p-2 h-full" }, Qe = { class: "border-t-2 border-neutral pt-2" };
-function De(e, t, r, o, u, n) {
+], -1), we = { class: "flex flex-col p-2 h-full" }, _e = { class: "flex flex-col justify-end p-2 flex-grow" }, Ie = { class: "border-t border-neutral pt-2" };
+function Qe(e, t, r, o, u, n) {
   const a = g("BaseButton");
-  return s(), c("div", ke, [
-    we,
-    i("section", _e, [
-      (s(!0), c(x, null, B(r.buttons, (l) => (s(), f(a, {
+  return s(), c("div", Ce, [
+    ke,
+    i("section", we, [
+      (s(!0), c(B, null, x(r.buttons, (l) => (s(), f(a, {
         label: l.label,
         iconClass: "fa-solid fa-trophy text-white",
         type: "admin",
         hover: "admin",
-        onClick: (y) => n.handleButtonClick(l)
+        onClick: (m) => n.handleButtonClick(l)
       }, null, 8, ["label", "onClick"]))), 256))
     ]),
-    i("section", Ie, [
-      i("div", Qe, [
+    i("section", _e, [
+      i("div", Ie, [
         d(a, {
           iconClass: "fa-solid fa-circle-user text-textSecondary",
           label: "Account",
@@ -785,16 +762,16 @@ function De(e, t, r, o, u, n) {
     ])
   ]);
 }
-const Se = /* @__PURE__ */ A(Ce, [["render", De]]);
+const Se = /* @__PURE__ */ A(fe, [["render", Qe]]);
 export {
   Se as AdminLeftMenu,
   _ as BaseButton,
   M as BaseInput,
   W as BaseTag,
-  p as BaseText,
-  ce as DropDownMenu,
-  ye as FilterAndSortBar,
-  ve as GridContainer,
+  b as BaseText,
+  ie as DropDownMenu,
+  me as FilterAndSortBar,
+  Ee as GridContainer,
   te as TournamentCard,
   Z as TournamentCardDetails,
   F as TournamentCardHeader

package/dist/HemaTouranmentUI-lib.umd.js

@@ -0,0 +1 @@
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.HemaTournamentUI={},c.Vue))})(this,function(c,e){"use strict";const d=(t,r)=>{const a=t.__vccOpts||t;for(const[s,i]of r)a[s]=i;return a},k={name:"BaseInput",props:{placeholder:{type:String,default:""},value:{type:String,default:""}},data(){return{internalValue:this.value,timeout:null}},watch:{value(t){this.internalValue=t}},methods:{onInput(){clearTimeout(this.timeout),this.timeout=setTimeout(()=>{console.log("this.internalValue",this.internalValue),this.$emit("update:value",this.internalValue)},300)}}},C=["placeholder"];function w(t,r,a,s,i,l){return e.withDirectives((e.openBlock(),e.createElementBlock("input",{class:"appearance-none focus:outline-none w-full text-sm",placeholder:a.placeholder,"onUpdate:modelValue":r[0]||(r[0]=n=>i.internalValue=n),onInput:r[1]||(r[1]=(...n)=>l.onInput&&l.onInput(...n))},null,40,C)),[[e.vModelText,i.internalValue]])}const B=d(k,[["render",w]]),_={name:"BaseText",props:{text:{type:String,required:!0,default:""},weight:{type:String,default:"normal",validator:function(t){return["light","normal","medium","semi-bold","bold","extra-bold"].indexOf(t)!==-1}},size:{type:String,default:"small",validator:function(t){return["xs","sm","md","lg","xl","2xl","3xl"].indexOf(t)!==-1}},color:{type:String,default:"primary",validator:function(t){return["neutral","quaternary","tertiary","secondary","primary","bright","primaryHighlight"].indexOf(t)!==-1}},hoverColor:{type:String,default:"none",validator:function(t){return["primary","secondary","tertiary","quaternary","neutral","bright","none"].indexOf(t)!==-1}}},setup(t){return t=e.reactive(t),{classes:e.computed(()=>{let r="inline-block font-sans";switch(t.color){case"neutral":r+=" text-neutral";break;case"tertiary":r+=" text-tertiary";break;case"secondary":r+=" text-secondary";break;case"quaternary":r+=" text-quaternary";break;case"primary":r+=" text-primary";break;case"primaryHighlight":r+=" text-primaryHighlight";break;case"bright":r+=" text-bright";break}switch(t.hoverColor){case"neutral":r+=" hover:text-neutral";break;case"tertiary":r+=" hover:text-tertiary";break;case"secondary":r+=" hover:text-secondary";break;case"quaternary":r+=" hover:text-quaternary";break;case"primary":r+=" hover:text-primary";break;case"bright":r+=" hover:text-bright";break;case"none":r+="";break}switch(t.weight){case"light":r+=" font-light";break;case"normal":r+=" font-normal";break;case"medium":r+=" font-medium";break;case"semi-bold":r+=" font-semibold";break;case"bold":r+=" font-bold";break;case"extra-bold":r+=" font-extrabold";break}switch(t.size){case"xs":r+=" text-xs";break;case"sm":r+=" text-sm";break;case"md":r+=" text-md";break;case"lg":r+=" text-lg";break;case"xl":r+=" text-xl";break;case"2xl":r+=" text-2xl";break;case"3xl":r+=" text-3xl";break;default:r+=" text-sm";break}return r})}}};function I(t,r,a,s,i,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s.classes)},e.toDisplayString(a.text),3)}const m=d(_,[["render",I]]),E={name:"base-button",components:{BaseText:m},props:{label:{type:String,required:!0},iconClass:{type:String,default:null},size:{type:String,validator:function(t){return["xs","sm","md","lg","xl"].indexOf(t)!==-1},default:"sm"},type:{type:String,default:"primary",validator:function(t){return["primary","secondary","tertiary","bright","admin","adminSecondary"].indexOf(t)!==-1}},selected:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:r}){return t=e.reactive(t),{textColor:e.computed(()=>{switch(t.type){case"primary":return"primary";case"secondary":return"secondary";case"tertiary":return"tertiary";case"bright":return"bright";case"admin":return"neutral";case"adminSecondary":return"neutral"}}),classes:e.computed(()=>{let a="px-2.5 mx-1 inline-flex ";switch(t.type){case"primary":a+=" py-0.5 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary",t.selected?a+=" bg-dropdownSelect":a+=" bg-neutral";break;case"secondary":a+=" py-0.5 items-center gap-2.5 rounded-md text-center shadow justify-center hover:bg-primary text-neutral",t.selected?a+=" bg-dropdownSelect":a+=" bg-secondary";break;case"tertiary":a+=" py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-primary",t.selected?a+=" bg-primary":a+=" bg-tertiary";break;case"bright":a+=" py-0.5 items-center gap-2.5 rounded-md text-center justify-center hover:bg-primary text-neutral",t.selected?a+=" bg-primary":a+=" bg-bright";break;case"admin":a+=" py-2 items-center rounded-md gap-2.5 text-center hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight",t.selected,a+=" bg-primary";break;case"adminSecondary":a+=" py-0.5 items-center gap-2.5 text-center my-1 pb-0.5 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral",t.selected?a+=" bg-primary":a+=" bg-tertiary";break}switch(t.size){case"xs":a+=" text-xs";break;case"sm":a+=" text-sm";break;case"md":a+=" text-md";break;case"lg":a+=" text-lg";break;case"xl":a+=" text-xl";break}return a}),onClick(){console.log("Click!"),r("click")}}}};function Q(t,r,a,s,i,l){const n=e.resolveComponent("BaseText");return e.openBlock(),e.createElementBlock("button",{"data-testid":"base-button",class:e.normalizeClass(s.classes),type:"button",onClick:r[0]||(r[0]=(...o)=>s.onClick&&s.onClick(...o))},[a.iconClass?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass([a.iconClass,"mr-2 hover:text-highlightedClass"])},null,2)):e.createCommentVNode("",!0),e.createVNode(n,{"data-testid":"base-text",color:s.textColor,size:a.size,text:a.label,weight:"normal"},null,8,["color","size","text"])],2)}const A=d(E,[["render",Q]]),D={name:"base-tag",props:{label:{type:String,required:!0},backgroundColor:{type:String,validator:function(t){return["primary","secondary","tertiary","neutral","bright"].indexOf(t)!==-1}}},setup(t){return t=e.reactive(t),{classes:e.computed(()=>{let r="cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral";switch(t.backgroundColor){case"primary":r+=" bg-primary";break;case"secondary":r+=" bg-secondary";break;case"tertiary":r+=" bg-tertiary";break;case"neutral":r+=" bg-neutral";break;case"bright":r+=" bg-bright";break;default:r+=" bg-primary";break}return r})}}};function V(t,r,a,s,i,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(s.classes)},e.toDisplayString(a.label),3)}const y=d(D,[["render",V]]),h="data:image/png;base64,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",S={name:"tournament-card-header",components:{BaseTag:y},props:{artwork:{type:String,required:!0,default:h},tags:{type:Array,default:()=>[]}},computed:{backgroundStyle(){return`background-image: url('${this.artwork||h}');`}}},Y={class:"rounded-t-xl w-full"},M={class:"flex flex-row"};function G(t,r,a,s,i,l){const n=e.resolveComponent("BaseTag");return e.openBlock(),e.createElementBlock("div",Y,[e.createElementVNode("div",{style:e.normalizeStyle(l.backgroundStyle),class:"h-36 w-full flex flex-col justify-end rounded-t-xl bg-cover bg-no-repeat bg-center"},[e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.tags,o=>(e.openBlock(),e.createBlock(n,{key:o,label:o},null,8,["label"]))),128))])],4)])}const p=d(S,[["render",G]]),q={name:"tournament-card-details",components:{BaseButton:A,BaseText:m},props:{detail:{type:Object,required:!0,default:()=>({name:"",date:"",closes:"",location:""})}}},U={class:"flex flex-col w-full pt-4 pb-3 px-3"},N={class:"mt-4 flex flex-col"},T={class:"flex flex-row w-full justify-end"};function $(t,r,a,s,i,l){const n=e.resolveComponent("BaseText"),o=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock("div",U,[e.createVNode(n,{text:a.detail.name,color:"primary",size:"xl",weight:"semi-bold"},null,8,["text"]),e.createVNode(n,{text:a.detail.location,color:"primary",size:"sm",weight:"normal"},null,8,["text"]),e.createElementVNode("div",N,[e.createVNode(n,{text:`${a.detail.date}`,color:"primaryHighlight",size:"sm",weight:"light"},null,8,["text"]),e.createVNode(n,{text:`${a.detail.closes}`,color:"primaryHighlight",size:"sm",weight:"light"},null,8,["text"])]),e.createElementVNode("div",T,[e.createVNode(o,{label:"Edit",class:"mt-2",primary:""})])])}const u=d(q,[["render",$]]),W={name:"TournamentCard",components:{TournamentHeader:p,TournamentDetail:u},props:{detail:{type:Object,required:!0,default:()=>({artwork:"",tags:[],name:"",description:"",date:"",closes:"",location:""})}}},K={class:"rounded-xl w-72 shadow"};function H(t,r,a,s,i,l){const n=e.resolveComponent("TournamentHeader"),o=e.resolveComponent("TournamentDetail");return e.openBlock(),e.createElementBlock("div",K,[e.createVNode(n,{artwork:a.detail.artwork,tags:a.detail.tags},null,8,["artwork","tags"]),e.createVNode(o,{detail:a.detail},null,8,["detail"])])}const b=d(W,[["render",H]]),F={name:"DropDownMenu",components:{BaseText:m},props:{label:{type:String},items:{type:Array,validator:t=>t.every(r=>typeof r.text=="string")},selectedItem:{type:Object,default:()=>({text:""}),validator:t=>typeof t.text=="string"}},data:()=>({isDropDownOpen:!1}),methods:{handleClick(t){this.isDropDownOpen=!1,this.$emit("update:selectedItem",t)},handleDropDown(){this.isDropDownOpen=!this.isDropDownOpen}}},j={class:"flex flex-row"},J=e.createElementVNode("i",{class:"fa-solid fa-chevron-down text-xs"},null,-1),L={key:0,class:"flex flex-col w-32 shadow mt-2 z-10 rounded-xl py-1 absolute bg-neutral"},O=["onClick"];function P(t,r,a,s,i,l){const n=e.resolveComponent("BaseText");return e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("span",null,[e.createElementVNode("div",{class:"z-10 rounded-lg shadow px-2 py-2 w-32 flex flex-row justify-between",onClick:r[0]||(r[0]=o=>l.handleDropDown())},[e.createVNode(n,{text:a.label,color:"quaternary",size:"sm",weight:"normal"},null,8,["text"]),e.createVNode(n,{text:a.selectedItem.text,color:"secondary",size:"sm",weight:"normal"},null,8,["text"]),J]),t.isDropDownOpen?(e.openBlock(),e.createElementBlock("div",L,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.items,o=>(e.openBlock(),e.createElementBlock("a",{key:o.id,onClick:g=>l.handleClick(o),class:"hover:bg-dropdownSelect py-1 px-2 border-b border-dropdownSelect last:border-0"},[e.createVNode(n,{text:o.text,color:"primary",size:"xs",weight:"normal"},null,8,["text"])],8,O))),128))])):e.createCommentVNode("",!0)])])}const x=d(F,[["render",P]]),z={name:"FilterAndSortBar",components:{DropDownMenu:x,BaseInput:B},data(){return{filterText:""}},props:{label:{type:String},items:{type:Array,default:()=>[]},selectedItem:null},methods:{handleFilter(t){this.$emit("filterbar",t)},handleSelectedItem(t){this.$emit("sort",t),console.log("handleSelectedItem",t)}}},Z={class:"flex flex-row w-full justify-between"},R={class:"rounded-lg shadow px-2 py-1 w-full flex flex-row mt-0.5 mr-4"},X=e.createElementVNode("i",{class:"fa-solid fa-magnifying-glass text-primaryHighlight w-6 mt-1"},null,-1);function v(t,r,a,s,i,l){const n=e.resolveComponent("BaseInput"),o=e.resolveComponent("DropDownMenu");return e.openBlock(),e.createElementBlock("section",Z,[e.createElementVNode("div",R,[X,e.createVNode(n,{placeholder:"Search on Name, Location, or Date",class:"text-quaternary",value:i.filterText,"onUpdate:value":l.handleFilter},null,8,["value","onUpdate:value"])]),e.createElementVNode("div",null,[e.createVNode(o,{label:a.label,items:a.items,selectedItem:a.selectedItem,"onUpdate:selectedItem":l.handleSelectedItem},null,8,["label","items","selectedItem","onUpdate:selectedItem"])])])}const f=d(z,[["render",v]]),ee={name:"GridContainer",components:{FilterAndSortBar:f,BaseText:m,TournamentCard:b},props:{items:{type:Array,default:()=>[]},component:{type:String,required:!0},label:{type:String},dropdownItems:{type:Array,default:()=>[]},selectedItem:null},data(){return{filterOn:"",sortCriteria:"Date"}},computed:{filteredItems(){let t=this.items;if(this.filterOn.trim()){const r=this.filterOn.toLowerCase();t=t.filter(a=>Object.values(a).some(s=>typeof s=="string"&&s.toLowerCase().includes(r)))}switch(this.sortCriteria){case"Date":t=[...t].sort((r,a)=>new Date(r.date)-new Date(a.date));break;case"Name":t=[...t].sort((r,a)=>r.name.localeCompare(a.name));break;case"Location":t=[...t].sort((r,a)=>r.location.localeCompare(a.location));break}return t}},methods:{handleFilter(t){this.filterOn=t},handleSort(t){this.sortCriteria=t.text}}},te={class:"border border-dropdownSelect rounded-lg p-9 bg-neutral"},re={class:"w-full text-center mb-9"},ae={class:"my-4"},ne={class:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4 gap-6 w-full"};function le(t,r,a,s,i,l){const n=e.resolveComponent("BaseText"),o=e.resolveComponent("FilterAndSortBar");return e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("h1",re,[e.createVNode(n,{color:"primaryHighlight",size:"2xl",text:"Upcoming Tournaments",weight:"normal"})]),e.createElementVNode("div",ae,[e.createVNode(o,{items:a.dropdownItems,label:a.label,selectedItem:a.selectedItem,onFilterbar:l.handleFilter,onSort:l.handleSort},null,8,["items","label","selectedItem","onFilterbar","onSort"])]),e.createElementVNode("div",ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.filteredItems,g=>(e.openBlock(),e.createElementBlock("div",{key:g.id},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.component),{detail:g},null,8,["detail"]))]))),128))])])}const oe=d(ee,[["render",le]]),se={name:"AdminLeftMenu",components:{BaseButton:A},props:{buttons:{type:Array,default:()=>[]}},methods:{handleButtonClick(t){this.$emit("button-click",t)}}},ce={class:"bg-secondary w-64 h-screen flex flex-col justify-between"},ie=e.createElementVNode("section",{class:"h-28 border-b border-neutral"},[e.createElementVNode("div",{class:"flex flex-col justify-center h-28"},[e.createElementVNode("div",{class:"ml-8"},[e.createElementVNode("img",{class:"w-32",src:"https://ferrotas.com/assets/ferrotas-white-small-720502db.png",alt:"logo"})])])],-1),de={class:"flex flex-col p-2 h-full"},me={class:"flex flex-col justify-end p-2 flex-grow"},ge={class:"border-t border-neutral pt-2"};function Ae(t,r,a,s,i,l){const n=e.resolveComponent("BaseButton");return e.openBlock(),e.createElementBlock("div",ce,[ie,e.createElementVNode("section",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.buttons,o=>(e.openBlock(),e.createBlock(n,{label:o.label,iconClass:"fa-solid fa-trophy text-white",type:"admin",hover:"admin",onClick:g=>l.handleButtonClick(o)},null,8,["label","onClick"]))),256))]),e.createElementVNode("section",me,[e.createElementVNode("div",ge,[e.createVNode(n,{iconClass:"fa-solid fa-circle-user text-textSecondary",label:"Account",type:"adminSecondary",onClick:r[0]||(r[0]=o=>l.handleButtonClick(t.button))}),e.createVNode(n,{iconClass:"fa-solid fa-right-to-bracket fa-rotate-180 text-textSecondary",label:"Log Out",type:"adminSecondary",onClick:r[1]||(r[1]=o=>l.handleButtonClick(t.button))})])])])}const Be=d(se,[["render",Ae]]);c.AdminLeftMenu=Be,c.BaseButton=A,c.BaseInput=B,c.BaseTag=y,c.BaseText=m,c.DropDownMenu=x,c.FilterAndSortBar=f,c.GridContainer=oe,c.TournamentCard=b,c.TournamentCardDetails=u,c.TournamentCardHeader=p,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>StoryBookLib</title>
+    <title>StoryBookLib !!!!!</title>
   </head>
   <body>
     <div id="app"></div>

package/package.json

@@ -1,23 +1,28 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "main": "dist/my-library.umd.js",
   "module": "dist/my-library.es.js",
   "scripts": {
     "dev": "vite",
     "build": "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 ./tailwind/output.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"
+    "watch:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ./tailwind/output.css --watch",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@storybook/addon-actions": "^7.4.5",
     "concurrently": "^8.2.1",
     "font-awesome": "^4.7.0",
+    "happy-dom": "^12.8.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
@@ -25,18 +30,20 @@
     "@storybook/addon-essentials": "^7.4.5",
     "@storybook/addon-interactions": "^7.4.5",
     "@storybook/addon-links": "^7.4.5",
+    "@storybook/addon-mdx-gfm": "^7.4.5",
     "@storybook/blocks": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/testing-library": "^0.2.2",
     "@storybook/vue3": "^7.4.5",
     "@storybook/vue3-vite": "^7.4.5",
     "@vitejs/plugin-vue": "^4.2.3",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/test-utils": "^2.4.0-alpha.2",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.30",
-    "postcss-cli": "^10.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "storybook": "^7.4.5",
+    "storybook-vue3-router": "^4.0.1",
     "tailwindcss": "^3.3.3",
-    "vite": "^4.4.5"
+    "vite": "^4.4.5",
+    "vitest": "^0.34.6"
   }
 }