@dcrackel/hematournamentui 1.0.0

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

package/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>StoryBookLib</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@dcrackel/hematournamentui",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/my-library.umd.js",
+  "module": "dist/my-library.es.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "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"
+  },
+  "dependencies": {
+    "concurrently": "^8.2.1",
+    "font-awesome": "^4.7.0",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^7.4.5",
+    "@storybook/addon-essentials": "^7.4.5",
+    "@storybook/addon-interactions": "^7.4.5",
+    "@storybook/addon-links": "^7.4.5",
+    "@storybook/blocks": "^7.4.5",
+    "@storybook/testing-library": "^0.2.1",
+    "@storybook/vue3": "^7.4.5",
+    "@storybook/vue3-vite": "^7.4.5",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "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",
+    "tailwindcss": "^3.3.3",
+    "vite": "^4.4.5"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/src/index.js

@@ -0,0 +1,15 @@
+export { default as BaseInput } from './stories/Base/Input/BaseInput.vue';
+export { default as BaseButton } from './stories/Base/Button/BaseButton.vue';
+export { default as BaseTag } from './stories/Base/Tag/BaseTag.vue';
+export { default as BaseText } from './stories/Base/Text/BaseText.vue';
+
+export { default as TournamentCard } from './stories/Cards/TournamentCard/TournamentCard.vue';
+export { default as TournamentCardDetails } from './stories/Cards/TournamentCard/Detail/TournamentCardDetail.vue';
+export { default as TournamentCardHeader } from './stories/Cards/TournamentCard/Header/TournamentCardHeader.vue';
+
+export { default as GridContainer } from './stories/Containers/Grid/GridContainer.vue';
+
+export { default as FilterAndSortBar } from './stories/Filters/FilterAndSortBar/FilterAndSortBar.vue';
+export { default as AdminLeftMenu } from './stories/Menu/Admin/AdminLeftMenu.vue';
+export { default as DropDownMenu } from './stories/Menu/DropDown/DropDownMenu.vue';
+

package/src/main.js

@@ -0,0 +1,2 @@
+import '../tailwind/output.css'
+

package/src/mocks/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

package/src/mocks/tournamentMock.js

@@ -0,0 +1,34 @@
+const mockTournaments = [
+  {
+    id: 1,
+    artwork: 'https://node.ferrotas.com:5000/uploads/t-450.png',
+    tags: ['Tag1', 'Tag2'],
+    name: 'Summer Slam 2023',
+    description: 'Join us for the hottest tournament this summer!',
+    date: '15 June 2023',
+    closes: 'Status Line',
+    location: 'Beachside Arena, Miami, FL'
+  },
+  {
+    id: 2,
+    artwork: 'https://node.ferrotas.com:5000/uploads/t-196.png',
+    tags: ['Tag3', 'Tag4', 'Tag5'],
+    name: 'Winter Showdown 2023',
+    description: 'Cold weather, hot competition!',
+    date: '10 December 2023',
+    closes: 'Registration Closes 1 December 2023',
+    location: 'Snowy Mountain Stadium, Denver, CO'
+  },
+  {
+    id: 3,
+    artwork: 'https://usahema.org/img/tournaments/usahema-tournament-45.jpg',
+    tags: ['Tag6'],
+    name: 'Autumn Cup 2023',
+    description: 'Celebrate fall with intense matches!',
+    date: '20 October 2023',
+    closes: 'Registration Closes 18th October 2023',
+    location: 'Forest Field, Portland, OR'
+  }
+];
+
+export default mockTournaments;

package/src/stories/Base/Button/BaseButton.stories.js

@@ -0,0 +1,69 @@
+import BaseButton from './BaseButton.vue';
+
+export default {
+    title: 'Base/BaseButton',
+    component: BaseButton,
+    tags: ['autodocs'],
+    argTypes: {
+        onClick: {},
+        size: {
+            control: {
+                type: 'select'
+            },
+            options: ['small', 'medium', 'large']
+        },
+        iconClass: {
+            control: {
+                type: 'text'
+            },
+            defaultValue: ''
+        },
+        type: {
+            control: {
+                type: 'select'
+            },
+            options: ['primary', 'secondary', 'tertiary', 'bright', 'admin']
+        }
+    }
+};
+export const Primary = {
+    args: {
+        type: 'primary',
+        label: 'Button'
+    }
+};
+export const PrimaryButtonWithIcon = {
+    args: {
+        type: 'primary',
+        label: 'Button',
+        iconClass: 'fas fa-check'
+    }
+};
+export const Secondary = {
+    args: {
+        label: 'Button'
+    }
+};
+export const HighlightedButton = {
+    args: {
+        type: 'bright',
+        size: 'large',
+        label: 'Button'
+    }
+};
+export const SmallTertiary = {
+    args: {
+        type: 'tertiary',
+        size: 'small',
+        label: 'Button'
+    }
+};
+
+export const AdminMunuButton = {
+    args: {
+        type: 'admin',
+        size: 'small',
+        label: 'Admin Button',
+        hoverColor: 'highlightPrimary'
+    }
+};

package/src/stories/Base/Button/BaseButton.vue

@@ -0,0 +1,141 @@
+<template>
+  <button :class="classes" type="button" @click="onClick">
+    <i v-if="iconClass" :class="iconClass" class="mr-2 hover:text-highlightedClass"></i>
+    <DefaultText :color="textColor" :size="size" :text="label" weight="normal" />
+  </button>
+</template>
+
+<script>
+import { computed, reactive } from 'vue';
+import DefaultText from '../Text/BaseText.vue';
+
+export default {
+  name: 'base-button',
+  components: { DefaultText },
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    iconClass: {
+      type: String,
+      default: null
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['xs', 'small', 'medium', 'large', 'xl'].indexOf(value) !== -1;
+      }
+    },
+    type: {
+      type: String,
+      default: 'primary',
+      validator: function (value) {
+        return ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary'].indexOf(value) !== -1;
+      }
+    }
+  },
+  emits: ['click'],
+
+  setup(props, { emit }) {
+    props = reactive(props);
+    return {
+      textColor: computed(() => {
+        switch (props.type) {
+          case 'primary':
+            return 'text-primary';
+          case 'secondary':
+            return 'text-secondary';
+          case 'tertiary':
+            return 'text-tertiary';
+          case 'bright':
+            return 'text-bright';
+          case 'admin':
+            return 'text-neutral';
+          case 'adminSecondary':
+            return 'text-secondary';
+          default:
+            return 'text-primary';
+        }
+      }),
+      hoverClass: computed(() => {
+        switch (props.type) {
+          case 'admin':
+            return 'hover:text-secondary';
+          case 'adminSecondary':
+            return 'hover:text-tertiary';
+          default:
+            return '';
+        }
+      }),
+      hoverColor: computed(() => {
+        switch (props.type) {
+          case 'admin':
+            return 'text-secondary';
+          case 'adminSecondary':
+            return 'text-tertiary';
+          default:
+            return null;
+        }
+      }),
+      classes: computed(() => {
+        let baseClasses = 'py-2 px-2.5 mx-2 inline-flex ';
+
+        switch (props.type) {
+          case 'primary':
+            baseClasses +=
+                ' items-center gap-2.5 rounded-md text-center shadow border border-skeleton justify-center bg-neutral hover:bg-tertiary';
+            break;
+          case 'secondary':
+            baseClasses +=
+                ' items-center gap-2.5 rounded-md text-center shadow bg-secondary justify-center hover:bg-primary text-neutral';
+            break;
+          case 'tertiary':
+            baseClasses +=
+                ' items-center gap-2.5 rounded-md text-center justify-center bg-tertiary hover:bg-primary text-primary';
+            break;
+          case 'bright':
+            baseClasses +=
+                ' items-center gap-2.5 rounded-md text-center justify-center bg-bright hover:bg-primary text-neutral';
+            break;
+          case 'admin':
+            baseClasses +=
+                ' items-center rounded-md gap-2.5 text-center bg-primary hover:bg-primary my-1 text-neutral hover:bg-primaryHighlight';
+            break;
+          case 'adminSecondary':
+            baseClasses +=
+                ' items-center gap-2.5 text-center my-1 border-b border-secondary hover:border-b hover:border-neutral w-11/12 text-neutral';
+            break;
+        }
+
+        switch (props.size) {
+          case 'xs':
+            baseClasses += ' text-xs';
+            break;
+          case 'small':
+            baseClasses += ' text-sm';
+            break;
+          case 'medium':
+            baseClasses += ' text-md';
+            break;
+          case 'large':
+            baseClasses += ' text-lg';
+            break;
+          case 'xl':
+            baseClasses += ' text-xl';
+            break;
+          default:
+            baseClasses += '';
+            break;
+        }
+
+        return baseClasses;
+      }),
+      onClick() {
+        console.log('Click!');
+        emit('click');
+      }
+    };
+  }
+};
+</script>

package/src/stories/Base/Input/BaseInput.stories.js

@@ -0,0 +1,28 @@
+import BaseInput from './BaseInput.vue';
+
+export default {
+    title: 'Base/Input',
+    component: BaseInput,
+    tags: ['autodocs'],
+    argTypes: {
+        placeholder: { control: 'text' },
+        value: { control: 'text' }
+    }
+};
+
+const Template = args => ({
+    components: { BaseInput },
+    props: Object.keys(args),
+    methods: {
+        onValueUpdate(newValue) {
+            console.log('Value updated:', newValue);
+        }
+    }
+});
+
+export const Default = {
+    args: {
+        placeholder: 'Enter text...',
+        value: ''
+    }
+};

package/src/stories/Base/Input/BaseInput.vue

@@ -0,0 +1,44 @@
+<template>
+  <input
+      class="appearance-none focus:outline-none w-full"
+      :placeholder="placeholder"
+      v-model="internalValue"
+      @input="onInput"
+  />
+</template>
+
+<script>
+export default {
+  name: 'BaseInput',
+  props: {
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      internalValue: this.value,
+      timeout: null
+    };
+  },
+
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    }
+  },
+  methods: {
+    onInput() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.$emit('update:value', this.internalValue);
+      }, 300);
+    }
+  }
+};
+</script>

package/src/stories/Base/Tag/BaseTag.stories.js

@@ -0,0 +1,29 @@
+import BaseTag from './BaseTag.vue';
+
+export default {
+    title: 'Base/BaseTag',
+    component: BaseTag,
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            control: {
+                type: 'text',
+                defaultValue: 'Default Label'
+            }
+        },
+        backgroundColor: {
+            control: {
+                type: 'select'
+            },
+            options: ['primary', 'secondary', 'tertiary', 'neutral', 'bright'],
+            defaultValue: 'primary'
+        }
+    }
+};
+
+export const Basic = {
+    args: {
+        label: 'default tag',
+        backgroundColor: 'primary'
+    }
+};

package/src/stories/Base/Tag/BaseTag.vue

@@ -0,0 +1,57 @@
+<template>
+  <div :class="classes">{{ label }}</div>
+</template>
+
+<script>
+import { computed, reactive } from 'vue';
+
+export default {
+  name: 'base-tag',
+
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    backgroundColor: {
+      type: String,
+      validator: function (value) {
+        return ['primary', 'secondary', 'tertiary', 'neutral', 'bright'].indexOf(value) !== -1;
+      }
+    }
+  },
+
+  setup(props) {
+    props = reactive(props);
+
+    return {
+      classes: computed(() => {
+        let baseClasses = 'cursor-pointer inline-block py-1 px-3 my-2 ml-3 text-xs font-normal rounded-full text-neutral';
+
+        switch (props.backgroundColor) {
+          case 'primary':
+            baseClasses += ' bg-primary';
+            break;
+          case 'secondary':
+            baseClasses += ' bg-secondary';
+            break;
+          case 'tertiary':
+            baseClasses += ' bg-tertiary';
+            break;
+          case 'neutral':
+            baseClasses += ' bg-neutral';
+            break;
+          case 'bright':
+            baseClasses += ' bg-bright';
+            break;
+          default:
+            baseClasses += ' bg-primary';
+            break;
+        }
+
+        return baseClasses;
+      })
+    };
+  }
+};
+</script>

package/src/stories/Base/Text/BaseText.stories.js

@@ -0,0 +1,77 @@
+import BaseText from './BaseText.vue';
+export default {
+    title: 'Base/BaseText',
+    component: BaseText,
+    tags: ['autodocs'],
+    argTypes: {
+        text: {
+            control: {
+                type: 'text',
+                defaultValue: 'Default Text'
+            }
+        },
+        size: {
+            control: {
+                type: 'select'
+            },
+            options: ['xs', 'small', 'medium', 'large', 'xl', '2xl', '3xl'],
+            defaultValue: 'medium'
+        },
+        weight: {
+            control: {
+                type: 'select'
+            },
+            options: ['light', 'normal', 'medium', 'semi-bold', 'bold', 'extra-bold'],
+            defaultValue: 'normal'
+        },
+        color: {
+            control: {
+                type: 'select'
+            },
+            options: ['neutral', 'quaternary', 'tertiary', 'secondary', 'primary', 'bright'],
+            defaultValue: 'primary'
+        },
+        hoverColor: {
+            control: {
+                type: 'select'
+            },
+            options: [
+                'primary',
+                'quaternary',
+                'secondary',
+                'tertiary',
+                'neutral',
+                'bright',
+                'none'
+            ],
+            defaultValue: 'none'
+        }
+    }
+};
+
+export const Large = {
+    args: {
+        size: 'large',
+        text: 'Large Text'
+    }
+};
+
+export const Medium = {
+    args: {
+        size: 'medium',
+        text: 'Medium Text'
+    }
+};
+export const Small = {
+    args: {
+        size: 'small',
+        text: 'Small Text'
+    }
+};
+
+export const TextWithHover = {
+    args: {
+        ...Large.args,
+        hoverColor: 'bright'
+    }
+};