bonkers-ui 1.0.33 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "private": false,
   "scripts": {
     "storybook": "start-storybook -p 6006",
@@ -8,75 +8,54 @@
     "lint:script": "eslint --fix './src/**/*.{ts,tsx,vue}'",
     "lint:style": "stylelint --fix './src/**/*.{css,scss,vue}'",
     "lint:markup": "vue-tsc --noEmit",
-    "test": "jest",
     "deploy": "gh-pages -d storybook-static",
     "typecheck": "tsc --noEmit && vue-tsc --noEmit",
+    "test": "vitest run",
     "i": "yarn install --frozen-lockfile"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-brands-svg-icons": "^6.2.0",
-    "@fortawesome/free-regular-svg-icons": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/vue-fontawesome": "^3.0.1",
-    "@vueuse/components": "^9.4.0",
-    "@vueuse/core": "^9.4.0",
-    "vue": "^3.2.41"
+    "@fortawesome/fontawesome-svg-core": "^6.2.1",
+    "@fortawesome/free-brands-svg-icons": "^6.2.1",
+    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/vue-fontawesome": "^3.0.2",
+    "@vueuse/components": "^9.10.0",
+    "@vueuse/core": "^9.10.0",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-vite": "^0.2.4",
-    "@storybook/vue3": "^6.5.13",
-    "@types/jest": "^29.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.41.0",
-    "@typescript-eslint/parser": "^5.41.0",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@storybook/builder-vite": "^0.2.7",
+    "@storybook/vue3": "^6.5.15",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.2.0",
-    "@vue/vue3-jest": "^27.0.0",
-    "babel-jest": "27",
-    "eslint": "8.26.0",
-    "eslint-plugin-vue": "^9.6.0",
+    "@vue/test-utils": "^2.2.7",
+    "eslint": "8.31.0",
+    "eslint-plugin-vue": "^9.8.0",
     "gh-pages": "^4.0.0",
-    "husky": "4",
-    "jest": "27.3.1",
-    "lint-staged": "^13.0.2",
-    "postcss": "^8.4.18",
+    "husky": "4.3.8",
+    "jsdom": "^21.0.0",
+    "lint-staged": "^13.1.0",
+    "postcss": "^8.4.21",
     "postcss-html": "^1.4.1",
     "storybook-tailwind-dark-mode": "^1.0.15",
-    "stylelint": "^14.14.0",
+    "stylelint": "^14.16.1",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^29.0.0",
-    "tailwindcss": "^3.2.1",
-    "ts-jest": "^27.0.7",
+    "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vitest": "^0.27.0",
     "vue-eslint-parser": "^9.1.0",
-    "vue-loader": "^17.0.0",
-    "vue-tsc": "^1.0.9"
-  },
-  "jest": {
-    "preset": "ts-jest",
-    "moduleFileExtensions": [
-      "vue",
-      "js",
-      "jsx",
-      "ts"
-    ],
-    "testEnvironment": "jsdom",
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
-    },
-    "transform": {
-      ".*\\.(js)$": "babel-jest",
-      "^.+\\.tsx?$": "ts-jest",
-      ".*\\.(vue)$": "@vue/vue3-jest"
-    }
+    "vue-loader": "^17.0.1",
+    "vue-tsc": "^1.0.24"
   },
   "lint-staged": {
     "*.{ts,tsx,vue}": [

package/src/components/ui-badge/ui-badge.vue

@@ -10,6 +10,7 @@
 
 			size === EBadgeSize.MEDIUM && 'px-xs py-xs',
 			size === EBadgeSize.LARGE && 'px-sm py-xs',
+			elipsis && 'max-w-full',
 		]"
 	>
 		<ui-icon
@@ -23,6 +24,9 @@
 			:size="getBadgeSize"
 			:weight="ETextWeight.SEMI_BOLD"
 			class="whitespace-nowrap"
+			:class="[
+				elipsis && 'overflow-hidden overflow-ellipsis',
+			]"
 		>
 			<slot />
 		</ui-typography>
@@ -40,6 +44,7 @@
 		size?: EBadgeSize;
 		kind?: EBadgeKind;
 		icon?: TIconName;
+		elipsis?: boolean;
 	}>();
 
 	const slots = useSlots();

package/src/components/ui-button/ui-button.test.ts

@@ -1,7 +1,10 @@
 import { mount } from "@vue/test-utils";
 import UiButton from "./ui-button.vue";
+import { test, expect } from "vitest";
+
+test("VButton.test.ts", async () => {
+	expect(UiButton).toBeTruthy();
 
-describe("VButton.test.ts", () => {
 	it("renders props.msg when passed", () => {
 		const className = "message";
 		const wrapper = mount(UiButton, {
@@ -12,4 +15,5 @@ describe("VButton.test.ts", () => {
 
 		expect(wrapper.classes()).toContain(className);
 	});
+
 });

package/src/components/ui-card-cta/ui-card-cta.stories.ts

@@ -37,7 +37,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		<ui-card-cta v-bind="args">
 			<template #icon>
 				<ui-icon-wrapper>
-					<ui-icon :icon-name="['far', 'fa-face-smile']" :size=ESize.MD />
+					<ui-icon :icon-name="['far', 'face-smile']" :size=ESize.MD />
 				</ui-icon-wrapper>
 			</template>
 

package/src/components/ui-icon/_typings.ts

@@ -5,7 +5,7 @@ export enum EIconType {
 	FAL = "fal",
 	FAD = "fad",
 	FAT = "fat",
-	BRANDS = "brands",
+	BRANDS = "fa-brands",
 }
 
 export type TIconName = [EIconType, string];

package/src/components/ui-icon/ui-icon.stories.ts

@@ -30,7 +30,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `
-		<ui-icon v-bind="args" :icon-name="['far', 'fa-face-smile']" />
+		<ui-icon v-bind="args" :icon-name="['far', 'face-smile']" />
 	`,
 });
 

package/src/components/ui-icon-wrapper/ui-icon-wrapper.stories.ts

@@ -46,7 +46,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		</ui-icon-wrapper>
 
 		<ui-icon-wrapper kind="primary"  v-bind="args">
-			<ui-icon :icon-name="['far', 'fa-face-smile']" :size=ESize.LG />
+			<ui-icon :icon-name="['far', 'face-smile']" :size=ESize.LG />
 			<UiNotificationBadge slot="badge" :origin=EBadgeOrigin.DEFAULT>
 			2
 			</UiNotificationBadge>

package/src/components/ui-list-item/ui-list-item.vue

@@ -15,7 +15,7 @@
 		<slot name="icon">
 			<ui-icon
 				v-if="icon"
-				class="bg-white"
+				class="bg-white z-[1] mt-[0.2em]"
 				:icon-name="icon"
 				:size="ESize.SM"
 			/>

package/src/components/ui-order-card/ui-order-card.stories.ts

@@ -30,7 +30,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 
 	template: /*html*/`
-		<ui-order-card v-bind="args" :iconName="['far', 'fa-face-smile']">
+		<ui-order-card v-bind="args" :iconName="['far', 'face-smile']">
 			<template #title>
 				Thank you for your order!
 			</template>
@@ -44,7 +44,7 @@ const Template: Story<TComponentProps> = (args) => ({
 			</template>
 		</ui-order-card>
 
-		
+
 	`,
 });
 

package/src/components/ui-radio-fancy/ui-radio-fancy.vue

@@ -1,6 +1,10 @@
 <template>
 	<label
-		class="ui-radio-fancy relative"
+		class="
+			ui-radio-fancy
+			relative
+
+		"
 		:class="disabled && 'pointer-events-none'"
 	>
 		<input
@@ -8,7 +12,7 @@
 			type="radio"
 			:name="name"
 			:value="value"
-			class="peer group appearance-none absolute invisible"
+			class="peer group appearance-none absolute"
 		>
 		<div
 			class="
@@ -23,38 +27,32 @@
 				hover:border-secondary-alt-700
 				cursor-pointer
 				rounded-xl
+
+				before:absolute
+				before:-z-10
+				before:box-border
+				before:rounded-[16px]
+				before:bg-primary-300
+
 				peer-checked:border-transparent
 				peer-checked:active:shadow-border-primary
+				peer-checked:active:before:-top-xs
+				peer-checked:active:before:-bottom-xs
+				peer-checked:active:before:-left-xs
+				peer-checked:active:before:-right-xs
+
 				peer-checked:hover:shadow-border-selected
 				peer-checked:shadow-selected-shadow
-				peer-focus:before:absolute
-				peer-focus:before:-top-xs
-				peer-focus:before:-bottom-xs
-				peer-focus:before:-left-xs
-				peer-focus:before:-right-xs
-				peer-focus:before:bg-primary-300
-				peer-focus:before:rounded-[20px]
-				peer-focus:before:box-border
-				peer-focus:before:-z-10
-				peer-active:before:absolute
+
 				peer-active:before:-top-xxs
 				peer-active:before:-bottom-xxs
 				peer-active:before:-left-xxs
 				peer-active:before:-right-xxs
-				peer-active:before:bg-primary-300
-				peer-active:before:rounded-[16px]
-				peer-active:before:box-border
-				peer-active:before:-z-10
-				active:bg-secondary-alt-200
-				active:before:absolute
-				active:before:-top-xs
-				active:before:-bottom-xs
-				active:before:-left-xs
-				active:before:-right-xs
-				active:before:bg-primary-300
-				active:before:rounded-[20px]
-				active:before:box-border
-				active:before:-z-10
+
+				peer-focus:before:-top-xs
+				peer-focus:before:-bottom-xs
+				peer-focus:before:-left-xs
+				peer-focus:before:-right-xs
 			"
 			:class="disabled && 'pointer-events-none'"
 		>

package/src/components/ui-result-card-range/ui-result-card-range.stories.ts

@@ -25,7 +25,7 @@ const Template = (args) => ({
 		return { args };
 	},
 	template:/*html*/`
-		<ui-result-card-range :icon-name="['far', 'fa-face-smile']" :title="args.title">
+		<ui-result-card-range :icon-name="['far', 'face-smile']" :title="args.title">
 			{{args.slot}}
 		</ui-result-card-range>
     `,
@@ -38,18 +38,18 @@ const TemplateAll = (args) => ({
 	},
 	template:/*html*/`
     <div class="ui-result-card-range grid gap-sm w-full">
-		
+
 		<ui-result-card-range style="grid-column: 1 / 1"
-		 	:icon-name="['far', 'fa-face-smile']" :title="args.title">
+		 	:icon-name="['far', 'face-smile']" :title="args.title">
 			{{args.slot}}
 		</ui-result-card-range>
 
 		<ui-result-card-range style="grid-column: 2 / 2"
-			 :icon-name="['far', 'fa-face-smile']" :title="args.title">
+			 :icon-name="['far', 'face-smile']" :title="args.title">
 			 {{args.slot}}
 
 		</ui-result-card-range>
-		
+
 		<ui-result-card-range style="grid-column: 1 / 3; flex-direction: row; justify-content: space-between;">
 
 				<b>25/02/2022</b>
@@ -62,7 +62,7 @@ const TemplateAll = (args) => ({
 });
 
 export const singleCard = Template.bind({
-	
+
 });
 
 export const FullCard = TemplateAll.bind({});

package/tsconfig.json

@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"types": [
 			"vite/client",
-			"jest"
+			"vitest/globals"
 		],
 		"target": "esnext",
 		"module": "esnext",

package/vitest.config.ts

@@ -0,0 +1,17 @@
+
+import { defineConfig, UserConfig } from "vite";
+import type { InlineConfig } from "vitest";
+
+import Vue from "@vitejs/plugin-vue";
+
+interface VitestConfigExport extends UserConfig {
+	test: InlineConfig;
+}
+
+export default defineConfig({
+	plugins: [Vue()],
+	test: {
+		globals: true,
+		environment: "jsdom",
+	},
+} as VitestConfigExport);