@dcrackel/meyersquaredui 1.0.36

package/src/stories/Atoms/BaseButton/BaseButton.stories.js

@@ -0,0 +1,83 @@
+import BaseButton from './BaseButton.vue';
+
+export default {
+    title: 'Atoms/BaseButton',
+    component: BaseButton,
+    args: {
+        label: 'Click Me',
+        color: 'primary',
+        border: 'none',
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The text inside the button',
+        },
+        color: {
+            control: {
+                type: 'select',
+                options: ['primary', 'secondary', 'accent'],
+            },
+            description: 'The background color of the button',
+        },
+        border: {
+            control: {
+                type: 'select',
+                options: ['none', 'primary', 'secondary', 'gradient', 'gradient2'],
+            },
+            description: 'The border style of the button',
+        },
+        altText: {
+            control: 'text',
+            description: 'Optional alt text for accessibility (aria-label)',
+        },
+    },
+};
+
+const Template = (args) => ({
+    components: { BaseButton },
+    setup() {
+        return { args };
+    },
+    template: '<BaseButton v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Click Me',
+    color: 'secondary',
+    backgroundColor: 'primary',
+    border: 'none',
+};
+
+export const PrimaryWithGradientBorder = Template.bind({});
+PrimaryWithGradientBorder.args = {
+    label: 'Primary Button',
+    color: 'secondary',
+    backgroundColor: 'primary',
+    border: 'gradient1',
+};
+
+export const PrimaryWithGradientBorderTwo = Template.bind({});
+PrimaryWithGradientBorderTwo.args = {
+    label: 'Primary Button',
+    color: 'secondary',
+    backgroundColor: 'primary',
+    border: 'gradient2',
+};
+
+export const SecondaryWithAccentBorder = Template.bind({});
+SecondaryWithAccentBorder.args = {
+    label: 'Secondary Button',
+    color: 'secondary',
+    backgroundColor: 'primary',
+    border: 'accent',
+};
+
+export const BlackBorderWithWhiteBackground = Template.bind({});
+BlackBorderWithWhiteBackground.args = {
+    label: 'Secondary Button',
+    color: 'primary',
+    backgroundColor: 'secondary',
+    border: 'primary',
+};

package/src/stories/Atoms/BaseButton/BaseButton.vue

@@ -0,0 +1,110 @@
+<template>
+  <button
+      :class="[
+      'px-4 py-2 rounded-md transition duration-300 ease-in-out',
+      textColorClass,
+      backgroundClass,
+      borderClass,
+    ]"
+      :title="altText || label"
+      :aria-label="altText || label"
+      @click="$emit('click')"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'BaseButton',
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    altText: {
+      type: String,
+      default: null,
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
+    },
+    backgroundColor: {
+      type: String,
+      default: 'primary',
+      validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
+    },
+    border: {
+      type: String,
+      default: 'none',
+      validator: (value) =>
+          ['none', 'primary', 'secondary', 'accent', 'gradient1', 'gradient2'].includes(value),
+    },
+  },
+  computed: {
+    textColorClass() {
+      const textColor = {
+        primary: 'text-primary',
+        secondary: 'text-secondary',
+        accent: 'text-accent',
+      };
+      return textColor[this.color] || 'text-primary';
+    },
+    backgroundClass() {
+      const colorMap = {
+        primary: 'bg-primary hover:bg-accent',
+        secondary: 'bg-secondary hover:bg-accent',
+        accent: 'bg-accent hover:bg-accent',
+      };
+      return colorMap[this.backgroundColor] || 'bg-primary';
+    },
+    borderClass() {
+      const borderMap = {
+        none: '',
+        primary: 'border border-primary',
+        secondary: 'border border-secondary',
+        accent: 'border border-accent',
+        gradient1: 'border-gradient-rounded-1',
+        gradient2: 'border-gradient-rounded-2',
+      };
+      return borderMap[this.border] || '';
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Gradient Border 1 */
+.border-gradient-rounded-1 {
+  border: 1px solid transparent;
+  background:
+      linear-gradient(to right, black, black),
+      linear-gradient(to right, #FF7A00, #A3412A);
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  transition: background-size 0.5s ease-in-out, color 0.5s ease-in-out;
+}
+
+.border-gradient-rounded-1:hover {
+  background: linear-gradient(to right, #FF7A00, #FFA238);
+  color: white;
+}
+
+/* Gradient Border 2 */
+.border-gradient-rounded-2 {
+  border: 1px solid transparent;
+  background:
+      linear-gradient(to right, black, black),
+      linear-gradient(to right, #009DFF, #25E07C);
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+}
+
+.border-gradient-rounded-2:hover {
+  background: linear-gradient(to right, #009DFF, #25E07C);
+  color: white; /* Optional: You can change the text color on hover as well */
+}
+
+</style>

package/src/stories/Atoms/BaseText/BaseText.stories.js

@@ -0,0 +1,55 @@
+import BaseText from './BaseText.vue';
+
+export default {
+    title: 'Atoms/BaseText',
+    component: BaseText,
+    tags: ['autodocs'],
+    args: {
+        tag: 'p',
+        size: 'md',
+        color: 'primary',
+        weight: 'normal',
+        content: 'This is a text component'
+    },
+    argTypes: {
+        tag: {
+            control: { type: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'] }
+        },
+        size: {
+            control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] }
+        },
+        color: {
+            control: { type: 'select', options: ['primary', 'secondary', 'danger', 'success', 'warning', 'info'] }
+        },
+        weight: {
+            control: { type: 'select', options: ['light', 'normal', 'semibold', 'bold'] }
+        },
+        content: { control: 'text' }
+    }
+};
+
+const Template = (args) => ({
+    components: { BaseText },
+    setup() {
+        return { args };
+    },
+    template: '<BaseText v-bind="args">{{ args.content }}</BaseText>',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    tag: 'p',
+    size: 'md',
+    color: 'primary',
+    weight: 'normal',
+    content: 'This is a paragraph'
+};
+
+export const BoldText = Template.bind({});
+BoldText.args = {
+    tag: 'h1',
+    size: '2xl',
+    color: 'primary',
+    weight: 'bold',
+    content: 'This is bold text'
+};

package/src/stories/Atoms/BaseText/BaseText.vue

@@ -0,0 +1,56 @@
+<template>
+  <component :is="tag" :class="textClasses">
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'BaseText',
+  props: {
+    tag: {
+      type: String,
+      default: 'p',
+      validator: (value) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div'].includes(value),
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].includes(value),
+    },
+    color: {
+      type: String,
+      default: 'primary',
+    },
+    weight: {
+      type: String,
+      default: 'normal',
+      validator: (value) => ['light', 'normal', 'semibold', 'bold'].includes(value),
+    },
+  },
+  computed: {
+    textClasses() {
+      const sizeClasses = {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'lg:text-base',
+        lg: 'text-lg',
+        xl: 'text-xl',
+        '2xl': 'text-2xl',
+        '3xl': 'text-3xl',
+        '4xl': 'text-4xl',
+        '5xl': 'text-5xl'
+      };
+
+      const weightClasses = {
+        light: 'font-light',
+        normal: 'font-normal',
+        semibold: 'font-semibold',
+        bold: 'font-bold',
+      };
+
+      return `${sizeClasses[this.size]} ${weightClasses[this.weight]} text-${this.color}`;
+    },
+  },
+};
+</script>

package/src/stories/Atoms/Icon/Icon.stories.js

@@ -0,0 +1,44 @@
+import Icon from './Icon.vue';
+
+export default {
+    title: 'Atoms/Icon',
+    component: Icon,
+    args: {
+        icon: 'fa-search',
+        color: 'primary',
+        size: 'md',
+    },
+    argTypes: {
+        icon: { control: 'text', description: 'Font Awesome icon class' },
+        color: {
+            control: { type: 'select', options: ['primary', 'secondary', 'accent'] },
+            description: 'Icon color',
+        },
+        size: {
+            control: { type: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] },
+            description: 'Icon size',
+        },
+    },
+};
+
+const Template = (args) => ({
+    components: { Icon },
+    setup() {
+        return { args };
+    },
+    template: '<Icon v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    icon: 'fa-search',
+    color: 'primary',
+    size: 'md',
+};
+
+export const LargeAccent = Template.bind({});
+LargeAccent.args = {
+    icon: 'fa-search',
+    color: 'accent',
+    size: '3xl',
+};

package/src/stories/Atoms/Icon/Icon.vue

@@ -0,0 +1,47 @@
+<template>
+  <i :class="[ 'fas', icon, colorClasses, sizeClasses ]" @click="$emit('click')" />
+</template>
+
+<script>
+export default {
+  name: 'Icon',
+  props: {
+    icon: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      default: 'primary',
+      validator: (value) => ['primary', 'secondary', 'accent'].includes(value),
+    },
+    size: {
+      type: String,
+      default: 'md',
+      validator: (value) => ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(value),
+    },
+  },
+  computed: {
+    colorClasses() {
+      const colorMap = {
+        primary: 'text-primary',
+        secondary: 'text-secondary',
+        accent: 'text-accent',
+      };
+      return colorMap[this.color] || 'text-primary';
+    },
+    sizeClasses() {
+      const sizeMap = {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-base',
+        lg: 'text-lg',
+        xl: 'text-xl',
+        '2xl': 'text-2xl',
+        '3xl': 'text-3xl',
+      };
+      return sizeMap[this.size] || 'text-base';
+    },
+  },
+};
+</script>

package/src/stories/Atoms/InputField/InputField.stories.js

@@ -0,0 +1,26 @@
+import InputField from './InputField.vue';
+
+export default {
+    title: 'Atoms/InputField',
+    component: InputField,
+    args: {
+        type: 'text',
+        placeholder: 'Search',
+        modelValue: '',
+    },
+    argTypes: {
+        type: { control: 'text' },
+        placeholder: { control: 'text' },
+        modelValue: { control: 'text' },
+    },
+};
+
+const Template = (args) => ({
+    components: { InputField },
+    setup() {
+        return { args };
+    },
+    template: '<InputField v-bind="args" />',
+});
+
+export const Default = Template.bind({});

package/src/stories/Atoms/InputField/InputField.vue

@@ -0,0 +1,29 @@
+<template>
+  <input
+      :type="type"
+      :placeholder="placeholder"
+      v-bind="$attrs"
+      class="bg-black text-secondary border-b-2 border-secondary focus:outline-none focus:border-accent w-full placeholder-secondary px-2 hover:border-accent duration-300 ease-in-out"
+      @input="$emit('update:modelValue', $event.target.value)"
+  />
+</template>
+
+<script>
+export default {
+  name: 'InputField',
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+    },
+    placeholder: {
+      type: String,
+      default: 'Search',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>

package/src/stories/Configure.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Meyer Squared Public UI" />
+
+# Meyer Squared Public UI
+
+This is a simple example of an MDX file in Storybook.

package/src/stories/Molecules/SearchBox/SearchBox.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="relative flex items-center w-full max-w-md">
+    <InputField v-model="searchQuery" placeholder="Search" />
+    <Icon icon="fa-search" color="secondary" size="sm" class="absolute right-2" @click="onSearch" />
+  </div>
+</template>
+
+<script>
+import InputField from '../../Atoms/InputField/InputField.vue';
+import Icon from '../../Atoms/Icon/Icon.vue';
+
+export default {
+  name: 'SearchBox',
+  components: {
+    InputField,
+    Icon,
+  },
+  data() {
+    return {
+      searchQuery: '',
+    };
+  },
+  methods: {
+    onSearch() {
+      console.log('Search Query:', this.searchQuery);
+    },
+  },
+};
+</script>

package/src/stories/Molecules/SearchBox/Searchbox.stories.js

@@ -0,0 +1,30 @@
+import SearchBox from './SearchBox.vue';
+
+export default {
+    title: 'Molecules/SearchBox',
+    component: SearchBox,
+    tags: ['autodocs'],
+    argTypes: {
+        searchQuery: { control: 'text', description: 'Search input value' },
+    },
+};
+
+const Template = (args) => ({
+    components: { SearchBox },
+    setup() {
+        return { args };
+    },
+    template: '<SearchBox v-bind="args" />',
+});
+
+// Ensure that the Default export is initialized AFTER the Template function is declared
+export const Default = Template.bind({});
+Default.args = {
+    searchQuery: '',
+};
+
+// Another example story
+export const FilledSearch = Template.bind({});
+FilledSearch.args = {
+    searchQuery: 'Search Term',
+};

package/src/stories/Organisms/Headers/Header.stories.js

@@ -0,0 +1,17 @@
+import Header from './Header.vue';
+
+export default {
+    title: 'Organisms/Header',
+    component: Header,
+};
+
+const Template = (args) => ({
+    components: { Header },
+    setup() {
+        return { args };
+    },
+    template: '<Header v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/stories/Organisms/Headers/Header.vue

@@ -0,0 +1,63 @@
+<template>
+  <header class="border-b border-lineGrey w-full bg-primary m-0">
+    <section class="w-full hidden md:flex ">
+      <div class="flex items-center justify-center w-36 h-36">
+        <img :src="logo" alt="Logo" class="h-14 w-18 bg-accent" />
+      </div>
+
+      <section class="flex w-full items-center  border-r border-l border-lineGrey">
+        <div class="hidden lg:flex w-1/3 pl-20">
+          <SearchBox class="w-24 md:w-32 lg:w-52 xl:w-64 bg-primary" />
+        </div>
+        <nav class="ml-8 w-2/3 flex justify-around">
+          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Tournaments</BaseText>
+          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Clubs</BaseText>
+          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Leaderboard</BaseText>
+          <BaseText color="secondary" size="md" tag="p" weight="normal" class="border-b-2 border-primary hover:border-accent pb-2 duration-300 ease-in-out">Contact</BaseText>
+        </nav>
+      </section>
+
+      <div class="flex items-center justify-center w-36 h-36">
+        <BaseButton
+            backgroundColor="primary"
+            border="secondary"
+            color="secondary"
+            label="Login"
+            size="xs"
+        />
+      </div>
+    </section>
+
+    <!-- mobile header -->
+    <section class="w-full flex md:hidden">
+      <div class="m-4 flex justify-between">
+        <img :src="logo" alt="Logo" class="h-10 w-14" />
+        <Icon icon="fa-bars" color="secondary" size="xl" class="absolute right-2" @click="onSearch" />
+      </div>
+    </section>
+  </header>
+</template>
+
+<script>
+import logo from '../../../assets/images/m2.png';
+
+import SearchBox from '../../Molecules/SearchBox/SearchBox.vue';
+import BaseText from '../../Atoms/BaseText/BaseText.vue';
+import Icon from '../../Atoms/Icon/Icon.vue';
+import BaseButton from '../../Atoms/BaseButton/BaseButton.vue';
+
+export default {
+  name: 'Header',
+  components: {
+    SearchBox,
+    BaseText,
+    BaseButton,
+    Icon
+  },
+  data() {
+    return {
+      logo: logo,
+    };
+  },
+};
+</script>

package/src/stories/Organisms/HeroBanners/HomePage/HeroBanner.stories.js

@@ -0,0 +1,29 @@
+import HeroBanner from './HeroBanner.vue';
+
+export default {
+    title: 'Organisms/HeroBanners/HomePage/HeroBanner',
+    component: HeroBanner,
+    argTypes: {
+        imageSrc: { control: 'text', description: 'The image displayed in the hero banner' },
+        title: { control: 'text', description: 'Main title text' },
+        description: { control: 'text', description: 'Subtitle or description text' },
+        buttonLabel: { control: 'text', description: 'Label for the button' },
+        'button-click': { action: 'button-click' },
+    },
+};
+
+const Template = (args) => ({
+    components: { HeroBanner },
+    setup() {
+        return { args };
+    },
+    template: '<HeroBanner v-bind="args" @button-click="args[\'button-click\']" />',
+});
+
+export const DefaultHeroBanner = Template.bind({});
+DefaultHeroBanner.args = {
+    imageSrc: 'https://via.placeholder.com/1920x1080',
+    title: 'Welcome to Our Website',
+    description: 'Explore our features and discover more.',
+    buttonLabel: 'Get Started',
+};