@dcrackel/hematournamentui 1.0.21 → 1.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/hematournamentui",
   "private": false,
-  "version": "1.0.21",
+  "version": "1.0.22",
   "type": "module",
   "main": "dist/HemaTouranmentUI-lib.umd.js",
   "module": "dist/HemaTouranmentUI-lib.es.js",
@@ -21,6 +21,8 @@
   "dependencies": {
     "@storybook/addon-actions": "^7.4.5",
     "@tiptap/extension-bold": "^2.1.11",
+    "@tiptap/extension-highlight": "^2.1.12",
+    "@tiptap/extension-text-align": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.11",
     "@tiptap/vue-3": "^2.1.11",
     "@vuepic/vue-datepicker": "^7.1.0",

package/src/index.js

@@ -1,6 +1,6 @@
 export { default as BaseIcon } from './stories/Atoms/Icon/BaseIcon.vue';
 export { default as BaseInput } from './stories/Atoms/Input/BaseInput.vue';
-export { default as BaseRaioGroup } from './stories/Atoms/RadioGroup/BaseRadioGroup.vue';
+export { default as BaseRadioGroup } from './stories/Atoms/RadioGroup/BaseRadioGroup.vue';
 export { default as BaseTag } from './stories/Atoms/Tag/BaseTag.vue';
 export { default as BaseText } from './stories/Atoms/Text/BaseText.vue';
 

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

@@ -0,0 +1,91 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BaseIcon from './BaseIcon.vue';
+
+describe('BaseIcon', () => {
+    // Mocking console.warn
+    const originalWarn = console.warn;
+    let consoleOutput = [];
+    const mockedWarn = output => consoleOutput.push(output);
+    console.warn = mockedWarn;
+
+    afterEach(() => {
+        console.warn = originalWarn;
+        consoleOutput = [];
+    });
+
+    it('renders without errors', () => {
+        const wrapper = mount(BaseIcon, {
+            props: { iconName: 'fa-icons' }
+        });
+        expect(wrapper.exists()).toBeTruthy();
+    });
+
+    it('default values are correctly applied when props are not provided', () => {
+        const wrapper = mount(BaseIcon, {
+            props: {}
+        });
+        expect(wrapper.classes()).toContain('fa-solid');
+        expect(wrapper.classes()).toContain('fa-face-smile');
+        expect(wrapper.classes()).toContain('text-sm');
+        expect(wrapper.classes()).toContain('text-primary');
+    })
+
+    it('applies default props correctly', () => {
+        const wrapper = mount(BaseIcon, {
+            props: { iconName: 'fa-icons' }
+        });
+        expect(wrapper.classes()).toContain('fa-solid');
+        expect(wrapper.classes()).toContain('text-sm');
+        expect(wrapper.classes()).toContain('text-primary');
+    });
+
+    it('computes classes based on props', () => {
+        const wrapper = mount(BaseIcon, {
+            props: {
+                iconName: 'fa-icons',
+                style: 'fa-regular',
+                size: 'lg',
+                color: 'secondary'
+            }
+        });
+        expect(wrapper.classes()).toContain('fa-regular');
+        expect(wrapper.classes()).toContain('fa-icons');
+        expect(wrapper.classes()).toContain('text-lg');
+        expect(wrapper.classes()).toContain('text-secondary');
+    });
+
+    it('validates style prop correctly with valid value', () => {
+        mount(BaseIcon, {
+            props: { style: 'fa-solid' }
+        });
+        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+    });
+
+    it('emits a warning with invalid style prop value', () => {
+        mount(BaseIcon, {
+            props: { style: 'invalid-style' }
+        });
+        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "style".';
+        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
+        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+    });
+
+    it('validates style size correctly with valid value', () => {
+        mount(BaseIcon, {
+            props: { size: 'sm' }
+        });
+        expect(consoleOutput).toHaveLength(0); // No warnings should be emitted
+    });
+
+    it('emits a warning with invalid size prop value', () => {
+        mount(BaseIcon, {
+            props: { size: 'invalid-size' }
+        });
+        const expectedWarning = '[Vue warn]: Invalid prop: custom validator check failed for prop "size".';
+        const styleWarning = consoleOutput.find(msg => msg.includes(expectedWarning));
+        expect(styleWarning).toBeFalsy(); // Check if specific warning is found
+    });
+
+});
+

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

@@ -9,6 +9,7 @@ export default {
   props: {
     iconName: {
       type: String,
+      default: 'fa-face-smile',
       required: true
     },
     style: {

package/src/stories/Atoms/RadioGroup/BaseRadioGroup.test.js

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import BaseRadioGroup from './BaseRadioGroup.vue';
+
+const items = [
+    { label: 'Option 1', description: 'Description 1', value: '1' },
+    { label: 'Option 2', description: 'Description 2', value: '2' },
+    { label: 'Option 3', description: 'Description 3', value: '3' },
+    // Add more items as needed
+];
+
+describe('BaseRadioGroup', () => {
+    it('renders correct number of items', () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items }
+        });
+        expect(wrapper.findAll('[role="radio"]').length).toBe(items.length);
+    });
+
+    it('applies correct classes based on selectedIndex and invalid prop', async () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items, invalid: true }
+        });
+        await wrapper.vm.selectItem(0);
+        expect(wrapper.findAll('.bg-tertiary').length).toBe(1);
+        expect(wrapper.find('.border-alarm').exists()).toBeTruthy();
+    });
+
+    it('updates selectedIndex and emits event on item click', async () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items }
+        });
+        await wrapper.findAll('[role="radio"]')[0].trigger('click');
+
+        // console.log(wrapper.emitted())
+
+        expect(wrapper.vm.selectedIndex).toBe(0);
+        expect(wrapper.emitted('update:value')[0]).toEqual([items[0].value]);
+    });
+
+    it('handles keyboard interaction correctly', async () => {
+        const wrapper = mount(BaseRadioGroup, {
+            props: { items }
+        });
+        await wrapper.findAll('[role="radio"]')[0].trigger('keydown.enter');
+        expect(wrapper.vm.selectedIndex).toBe(0);
+        expect(wrapper.emitted('update:value')[0]).toEqual([items[0].value]);
+    });
+});

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.test.js

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import Breadcrumb from './Breadcrumb.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+// Mocking BaseText and router-link
+const mocks = {
+    components: {
+        BaseText,
+        RouterLink: {
+            template: '<div><slot></slot></div>',
+            props: ['to'],
+            methods: { click: vi.fn() }
+        }
+    }
+};
+
+describe('Breadcrumb', () => {
+    it('renders breadcrumbs correctly', () => {
+        const items = [
+            { text: 'Home', link: '/' },
+            { text: 'Category', link: '/category' },
+            { text: 'Item', link: '/category/item' }
+        ];
+
+        const wrapper = shallowMount(Breadcrumb, {
+            props: { items },
+            global: mocks
+        });
+
+        const linkElements = wrapper.findAll('[to]');
+
+        // console.log(wrapper.html());
+
+        expect(linkElements.length).toBe(items.filter(item => item.link).length);
+    });
+
+    // it('calls onLinkClick on link click', async () => {
+    //     const onLinkClick = vi.fn();
+    //     const items = [
+    //         { text: 'Home', link: '/' },
+    //         { text: 'Category' } // No link
+    //     ];
+    //
+    //     const wrapper = shallowMount(Breadcrumb, {
+    //         props: { items, onLinkClick },
+    //         global: mocks
+    //     });
+    //
+    //     const link = wrapper.find('[to]');
+    //     await link.trigger('click.native');
+    //     expect(onLinkClick).toHaveBeenCalled();
+    // });
+
+    it('calls onLinkClick when a link is clicked', async () => {
+        const onLinkClick = vi.fn();
+        const items = [
+            { text: 'Home', link: '/' },
+            { text: 'Category', link: '/category' }
+        ];
+
+        const wrapper = shallowMount(Breadcrumb, {
+            props: { items, onLinkClick},
+            global: {
+                stubs: {
+                    BaseText,
+                    RouterLink: true
+                }
+            }
+        });
+
+        const links = wrapper.findAll('[to]');
+        if (links.length > 0) {
+            await links[0].trigger('click.native');
+            expect(onLinkClick).toHaveBeenCalled();
+        } else {
+            throw new Error('No links found to test');
+        }
+    });
+});

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.vue

@@ -1,6 +1,6 @@
 <template>
-  <nav class="flex flex-row">
-    <div v-for="(item, index) in items" :key="index">
+  <nav class="flex flex-row w-full">
+    <div v-for="(item, index) in items" :key="index" class="flex flex-row">
       <BaseText v-if="index > 0" :text="' > '" size="lg" color="quaternary" class="mr-2" />
       <BaseText v-if="!item.link" class="mr-2" :text="item.text" size="lg" color="quaternary" />
       <router-link v-if="item.link" :to="item.link" @click.native="onLinkClick" class="mr-2">

package/src/stories/Templates/Forms/AddTournamentPageOne/AddTournamentPageOne.vue

@@ -4,7 +4,7 @@
       <BaseText data-testid="text-step" :color="'quaternary'" :size="'sm'" :text="'Step 1 out of 2'" :weight="'normal'" />
     </div>
     <div class="w-full flex flex-row justify-center my-4">
-      <BaseText data-testid="text-add-tournamnet" :color="'primaryHighlight'" :size="'2xl'" :text="'Add Tournament'" :weight="'normal'" />
+      <BaseText data-testid="text-add-tournament" :color="'primaryHighlight'" :size="'2xl'" :text="'Add Tournament'" :weight="'normal'" />
     </div>
     <div class="w-full flex flex-row justify-center my-4">
       <ImageCropper :personID="1" />
@@ -55,6 +55,7 @@ import DatePicker from "../../../Organisms/DatePicker/DatePicker.vue";
 import TextBoxEditor from "../../../Organisms/TextBoxEditor/TextBoxEditor.vue";
 import BaseRadioGroup from "../../../Atoms/RadioGroup/BaseRadioGroup.vue";
 import BaseButton from "../../../Molecules/Button/BaseButton.vue";
+
 export default {
   name: 'AddTournamentPageOne',
   components: {

package/package/.eslintrc.js

@@ -1,18 +0,0 @@
-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/package/.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto

package/package/.prettierignore

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

package/package/.storybook/main.js

@@ -1,18 +0,0 @@
-/** @type { import('@storybook/vue3-vite').StorybookConfig } */
-const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-mdx-gfm"
-  ],
-  framework: {
-    name: "@storybook/vue3-vite",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-};
-export default config;

package/package/.storybook/mockRoutes.js

@@ -1,9 +0,0 @@
-// .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/package/.storybook/preview-head.html

@@ -1 +0,0 @@
-<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

package/package/.storybook/preview.js

@@ -1,17 +0,0 @@
-/** @type { import('@storybook/vue3').Preview } */
-import '../tailwind/output.css';
-import 'font-awesome/css/font-awesome.min.css';
-
-const preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-};
-
-export default preview;

package/package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Dwain Crackel
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/package/README.md

@@ -1,83 +0,0 @@
-# Vue 3 + Vite
-
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-
-
-
-
-## Publishing a Storybook Library to NPM
-Follow this guide to publish your Storybook library to NPM, making it available for others to easily npm install.
-
-# 1. Setup & Prerequisites
-Ensure you have an account on npm. If not, you can create one for free.
-Verify node and npm installations:
-```
-Copy code
-node -v
-npm -v
-```
-
-# 2. Preparing Your Storybook Library
-a. Building the Library
-Compile your library with Vite or your bundler:
-
-```
-vite build
-```
-
-b. Update package.json
-Ensure the following fields are set:
-
-name: Name of your package.
-version: Version number.
-main: Main entry file (e.g., dist/index.js).
-files: Files to include, e.g., ["dist"].
-
-# 3. Logging in to NPM
-Login to npm (if you haven't already):
-
-```
-npm login
-```
-Provide your username, password, and email.
-
-# 4. Publishing to NPM
-a. Default (Private Package)
-For scoped private packages (@username/project-name):
-
-```
-npm publish
-```
-b. Public Package
-For public packages:
-
-```
-npm publish --access=public
-```
-
-# 5. Verifying Your Package
-Check on the npm website to verify your package's publication.
-
-Check the registry name
-```
-npm get registry
-```
-
-# 6. Installing and Using the Library
-To install the library:
-
-```
-npm install your-library-name
-```
-
-Users can then import and utilize your library's components.
-
-Notes:
-
-Always update the version in package.json before republishing.
-Ensure only necessary files are bundled to prevent package bloat.

package/package/index.html

@@ -1,12 +0,0 @@
-<!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/package.json

@@ -1,49 +0,0 @@
-{
-  "name": "@dcrackel/hematournamentui",
-  "private": false,
-  "version": "1.0.7",
-  "type": "module",
-  "main": "dist/HemaTouranmentUI-lib.umd.js",
-  "module": "dist/HemaTouranmentUI-lib.es.js",
-  "scripts": {
-    "dev": "vite",
-    "build": "npm version patch && vite build",
-    "publish:package": "npm publish",
-    "preview": "vite preview",
-    "build-storybook": "npm run build:tailwind && storybook build",
-    "build:tailwind": "tailwindcss build ./tailwind/tailwind.css -o ./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",
-    "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": {
-    "@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/addon-mdx-gfm": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@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",
-    "storybook": "^7.4.5",
-    "storybook-vue3-router": "^4.0.1",
-    "tailwindcss": "^3.3.3",
-    "vite": "^4.4.5",
-    "vitest": "^0.34.6"
-  }
-}

package/package/postcss.config.js

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

package/package/prettier.config.js

@@ -1,10 +0,0 @@
-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
-};

package/package/src/index.js

@@ -1,15 +0,0 @@
-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/package/src/main.js

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

package/package/src/mocks/fileMock.js

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

package/package/src/mocks/tournamentMock.js

@@ -1,34 +0,0 @@
-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: 'Amber 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: 'Withers Field, Portland, OR'
-  }
-];
-
-export default mockTournaments;