@dcrackel/hematournamentui 1.0.2 → 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 p, 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: {
@@ -92,7 +92,7 @@ const M = /* @__PURE__ */ A(v, [["render", Y]]), G = {
   },
   setup(e) {
     return e = p(e), {
-      classes: m(() => {
+      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":
@@ -201,7 +198,7 @@ function q(e, t, r, o, u, n) {
 }
 const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
   name: "base-button",
-  components: { DefaultText: b },
+  components: { BaseText: b },
   props: {
     label: {
       type: String,
@@ -214,8 +211,9 @@ const b = /* @__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 b = /* @__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 = p(e), {
-      textColor: m(() => {
+      textColor: y(() => {
         switch (e.type) {
           case "primary":
             return "primary";
@@ -241,72 +243,47 @@ const b = /* @__PURE__ */ A(G, [["render", q]]), U = {
           case "admin":
             return "neutral";
           case "adminSecondary":
-            return "secondary";
-          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;
+            return "neutral";
         }
       }),
-      classes: m(() => {
-        let r = "py-2 px-2.5 mx-2 inline-flex ";
+      classes: y(() => {
+        let r = "px-2.5 mx-1 inline-flex ";
         switch (e.type) {
           case "primary":
-            r += " items-center gap-2.5 rounded-md text-center shadow border border-skeleton 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 += " 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 += " 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 += " 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 += " 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 += " items-center gap-2.5 text-center my-1 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 b = /* @__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,
@@ -351,7 +330,7 @@ const _ = /* @__PURE__ */ A(U, [["render", V]]), $ = {
   },
   setup(e) {
     return e = p(e), {
-      classes: m(() => {
+      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))
@@ -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"])
     ]),
@@ -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,10 +612,10 @@ 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,
+    FilterAndSortBar: me,
     BaseText: b,
     TournamentCard: te
   },
@@ -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-white" }, Be = { class: "w-full text-center mb-9" }, be = { class: "my-4" }, pe = { class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl: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", be, [
+    i("div", xe, [
       d(l, {
         items: r.dropdownItems,
         label: r.label,
@@ -720,16 +697,16 @@ function fe(e, t, r, o, u, n) {
         onSort: n.handleSort
       }, null, 8, ["items", "label", "selectedItem", "onFilterbar", "onSort"])
     ]),
-    i("div", pe, [
-      (s(!0), c(x, null, B(n.filteredItems, (y) => (s(), c("div", {
-        key: y.id
+    i("div", be, [
+      (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,31 +720,32 @@ 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", {
         class: "w-32",
-        src: "https://ferrotas.com/assets/ferrotas-white-small-720502db.png"
+        src: "https://ferrotas.com/assets/ferrotas-white-small-720502db.png",
+        alt: "logo"
       })
     ])
   ])
-], -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",
@@ -784,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,
   b as BaseText,
-  ce as DropDownMenu,
-  ye as FilterAndSortBar,
-  ve as GridContainer,
+  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.2",
+  "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"
   }
 }

package/prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    semi: true, // Remove semicolons
+    trailingComma: 'none', // No trailing commas
+    singleQuote: true, // Use single quotes instead of double quotes
+    printWidth: 120, // Wrap lines at 120 characters
+    tabWidth: 2, // Use 2 spaces for indentation
+    useTabs: false, // Use spaces instead of tabs
+    bracketSpacing: true, // Space between object literals
+    arrowParens: 'avoid' // Avoid parentheses around single arrow function parameters
+};