bonkers-ui 1.0.55 → 1.0.57

package/.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
 	parser: "vue-eslint-parser",
 	plugins: [
 		"tailwindcss",
+		"eslint-plugin-storybook"
 	],
 	overrides: [
 		{
@@ -88,5 +89,19 @@ module.exports = {
 			ignorePattern: 'd="([\\s\\S]*?)"',
 		}],
 		"tailwindcss/no-custom-classname": "off",
+		"object-curly-newline": ["error", {
+			"ObjectExpression": {
+				"multiline": true,
+				"minProperties": 1,
+			},
+			"ImportDeclaration": {
+				"multiline": true,
+				"minProperties": 5,
+			}
+		}],
+		"object-property-newline": "error",
+		"space-before-blocks": ["error", "always"],
+		"keyword-spacing": "error",
+		"key-spacing": "error"
 	},
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.55",
+    "version": "v1.0.57",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -25,41 +25,46 @@
         "vue-router": "^4.2.4"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.0.27",
-        "@storybook/addon-links": "^7.0.27",
-        "@storybook/addon-mdx-gfm": "^7.0.27",
-        "@storybook/vue3": "^7.0.27",
-        "@storybook/vue3-vite": "^7.0.27",
+        "@storybook/addon-essentials": "^7.2.0",
+        "@storybook/addon-links": "^7.2.0",
+        "@storybook/addon-mdx-gfm": "^7.2.0",
+        "@storybook/vue3": "^7.2.0",
+        "@storybook/vue3-vite": "^7.2.0",
         "@typescript-eslint/eslint-plugin": "^5.59.9",
         "@typescript-eslint/parser": "^5.59.9",
         "@vitejs/plugin-vue": "^4.2.3",
         "@vue/eslint-config-typescript": "^11.0.3",
-        "@vue/test-utils": "^2.4.0",
-        "eslint": "8.44.0",
-        "eslint-plugin-storybook": "^0.6.12",
-        "eslint-plugin-vue": "^9.15.1",
+        "@vue/test-utils": "^2.4.1",
+        "eslint": "8.46.0",
+        "eslint-plugin-storybook": "^0.6.13",
+        "eslint-plugin-vue": "^9.16.1",
         "gh-pages": "^5.0.0",
         "husky": "4.3.8",
         "jsdom": "^22.1.0",
         "lint-staged": "^13.2.3",
-        "postcss": "^8.4.26",
+        "postcss": "^8.4.27",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.0.27",
+        "storybook": "^7.2.0",
         "storybook-tailwind-dark-mode": "^1.0.22",
-        "stylelint": "^15.10.1",
+        "stylelint": "^15.10.2",
         "stylelint-config-recommended": "^13.0.0",
         "stylelint-config-recommended-vue": "^1.5.0",
         "stylelint-config-standard": "^34.0.0",
         "tailwindcss": "^3.3.3",
         "ts-node": "^10.9.1",
         "typescript": "^5.1.6",
-        "vite": "^4.4.4",
-        "vitest": "^0.33.0",
+        "vite": "^4.4.8",
+        "vitest": "^0.34.1",
         "vue-eslint-parser": "^9.3.1",
         "vue-loader": "^17.2.2",
-        "vue-tsc": "^1.8.4"
+        "vue-tsc": "^1.8.8"
+    },
+    "resolutions": {
+        "strip-ansi": "^6.0.1",
+        "string-width": "^4.2.2",
+        "wrap-ansi": "^7.0.0"
     },
     "lint-staged": {
         "*.{ts,tsx,vue}": [

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

@@ -9,12 +9,16 @@ export default {
 
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EAlertTypes),
 			description: "The button kinds",
 		},
 		default: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 		}
 	},
 } satisfies Meta<typeof UiAlert>;

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

@@ -7,12 +7,16 @@ export default {
 	component: UiBadge,
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EBadgeKind),
 			description: "The Element kinds",
 		},
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EBadgeSize),
 			description: "The Element size",
 		},
@@ -27,9 +31,13 @@ export default {
 type TComponentProps = InstanceType<typeof UiBadge>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiBadge },
+	components: {
+		UiBadge 
+	},
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
 	template: /*html*/`
 		<ui-badge :icon="['far', 'face-smile']" v-bind="args" class="inline-flex">

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

@@ -5,7 +5,7 @@
 		<div class="relative z-[1] flex content-center items-center gap-xxs px-xs py-xxs">
 			<ui-icon
 				v-if="icon"
-				:size="ESize.XS"
+				:size="ESize.SM"
 				:icon-name="icon"
 			/>
 

package/src/components/ui-ber-rank/ui-ber-rank.stories.ts

@@ -7,12 +7,16 @@ export default {
 	title: "Components/ui-ber-rank",
 	component: UiBerRank,
 	argTypes: {
-		rank:{
-			control: { type: "number" },
+		rank: {
+			control: {
+				type: "number" 
+			},
 			description: "The Element rank from 0 to 15",
 		},
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EBerSize),
 			description: "The size of the rank",
 		}

package/src/components/ui-ber-rank/ui-ber-rank.vue

@@ -64,7 +64,7 @@
 	import { computed } from "vue";
 	import UiTypography, { ETextWeight, ETypographySizes, ETextTransform } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
-	import { berRankDictionary, type TBerPropNumber, type TBerPropString, EBerSize }from"./_types";
+	import { berRankDictionary, type TBerPropNumber, type TBerPropString, EBerSize } from "./_types";
 
 	const props = withDefaults(defineProps<{
 		rank: TBerPropNumber | TBerPropString | number; // from 0 to 15
@@ -74,7 +74,7 @@
 	});
 
 	const textSize = computed(()=>{
-		switch(props.size) {
+		switch (props.size) {
 			case EBerSize.SMALL:
 				return ETypographySizes.SM;
 			case EBerSize.MEDIUM:

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

@@ -9,32 +9,46 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EButtonTypes),
 			description: "The button kinds",
 		},
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EButtonSizes),
 			description: "The button sizes",
 		},
 		fullWidth: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The full width size",
 		},
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "Disabled state",
 		},
 		slot: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "The slot text or component",
 		},
-		hasPrefix:{
-			control: { type: "boolean" },
+		hasPrefix: {
+			control: {
+				type: "boolean" 
+			},
 		},
-		hasPostfix:{
-			control: { type: "boolean" },
+		hasPostfix: {
+			control: {
+				type: "boolean" 
+			},
 		}
 	},
 	args: {
@@ -48,10 +62,16 @@ type TComponentProps = InstanceType<typeof UiButton>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
-	components: { UiButton, UiIcon },
+	components: {
+		UiButton,
+		UiIcon 
+	},
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
-		return { args, ESize };
+		return {
+			args,
+			ESize 
+		};
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: /*html*/`
@@ -76,10 +96,15 @@ const Template: Story<TComponentProps> = (args) => ({
 		</ui-button>`,
 });
 const TemplateAll: Story<TComponentProps> = () => ({
-	components: { UiButton },
+	components: {
+		UiButton 
+	},
 
 	setup() {
-		return { EButtonSizes, EButtonTypes };
+		return {
+			EButtonSizes,
+			EButtonTypes 
+		};
 	},
 
 	template: /*html*/`

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

@@ -22,23 +22,23 @@
 			kind === EButtonTypes.ERROR
 				&& 'bg-error text-white hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
 			kind === EButtonTypes.PRIMARY_OVERLAY
-				&& 'border border-primary text-primary hover:border-transparent hover:bg-primary-600'
-					+ 'hover:text-white active:border-transparent active:bg-primary-700'
-					+ 'active:text-white disabled:border-primary-300 disabled:text-primary-300',
+				&& `border border-primary text-primary hover:border-transparent hover:bg-primary-600
+					hover:text-white active:border-transparent active:bg-primary-700
+					active:text-white disabled:border-primary-300 disabled:text-primary-300`,
 			kind === EButtonTypes.SECONDARY_OVERLAY
-				&& 'border border-secondary text-secondary hover:border-transparent hover:bg-secondary-600'
-					+ 'hover:text-white active:border-transparent active:bg-secondary-700'
-					+ 'active:text-white disabled:border-secondary-300 disabled:text-secondary-300',
+				&& `border border-secondary text-secondary hover:border-transparent hover:bg-secondary-600
+					hover:text-white active:border-transparent active:bg-secondary-700
+					active:text-white disabled:border-secondary-300 disabled:text-secondary-300`,
 			kind === EButtonTypes.WARNING_OVERLAY
-				&& 'border border-warning text-warning hover:border-transparent hover:bg-warning-600'
-					+ 'hover:text-white active:border-transparent active:bg-warning-700'
-					+ 'active:text-white disabled:border-warning-300 disabled:text-warning-300',
+				&& `border border-warning text-warning hover:border-transparent hover:bg-warning-600
+					hover:text-white active:border-transparent active:bg-warning-700
+					active:text-white disabled:border-warning-300 disabled:text-warning-300`,
 			kind === EButtonTypes.ERROR_OVERLAY
-				&& 'border border-error text-error hover:border-transparent hover:bg-error-600'
-					+'hover:text-white active:border-transparent active:bg-error-700'
-					+'active:text-white disabled:border-error-300 disabled:text-error-300',
-			kind === EButtonTypes.LINK && 'hover:text-accent-alt-600 active:text-accent-alt-700'
-				+'disabled:text-accent-alt-300 text-accent-alt',
+				&& `border border-error text-error hover:border-transparent hover:bg-error-600
+					hover:text-white active:border-transparent active:bg-error-700
+					active:text-white disabled:border-error-300 disabled:text-error-300`,
+			kind === EButtonTypes.LINK && `hover:text-accent-alt-600 active:text-accent-alt-700
+				disabled:text-accent-alt-300 text-accent-alt`,
 			(!size || size === EButtonSizes.DEFAULT) && 'px-md py-sm',
 			size === EButtonSizes.SMALL && 'px-md py-xs',
 			size === EButtonSizes.MEDIUM && 'p-sm',

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

@@ -7,11 +7,15 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		invertOrder: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element order",
 		},
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The full width size",
 		},
 	},
@@ -25,9 +29,13 @@ export default {
 type TComponentProps = InstanceType<typeof UiCardCta>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiCardCta },
+	components: {
+		UiCardCta 
+	},
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
 	template: /*html*/ `
 		<ui-card-cta v-bind="args" :icon-name="['far', 'face-smile']">

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

@@ -13,11 +13,15 @@ export default {
 	component: UiCardResult,
 	argTypes: {
 		exclusiveText: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "Whether to show the exclusive text",
 		},
 		exclusiveTextBottom: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "Whether to show the exclusive text",
 		},
 	},
@@ -31,9 +35,24 @@ export default {
 type TComponentProps = InstanceType<typeof UiCardResult>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiCardResult, UiTypography, UiBadge, UiListItem, UiButton, UiIcon },
+	components: {
+		UiCardResult,
+		UiTypography,
+		UiBadge,
+		UiListItem,
+		UiButton,
+		UiIcon 
+	},
 	setup() {
-		return { args, ETypographySizes, ETextWeight, ETextAlign, EButtonTypes, ESize, EColors };
+		return {
+			args,
+			ETypographySizes,
+			ETextWeight,
+			ETextAlign,
+			EButtonTypes,
+			ESize,
+			EColors 
+		};
 	},
 	template:
 	/*html*/`

package/src/components/ui-card-result/ui-card-result.vue

@@ -11,7 +11,7 @@
 				:size="ETypographySizes.XXS"
 				:kind="EColors.WHITE"
 				:align="ETextAlign.CENTER"
-				:weight="ETextWeight.BOLD"
+				:weight="ETextWeight.SEMI_BOLD"
 			>
 				{{ exclusiveText }}
 			</ui-typography>
@@ -37,7 +37,7 @@
 					line-height
 					class="line-clamp flex-1"
 					:size="ETypographySizes.SM"
-					:weight="ETextWeight.SEMI_BOLD"
+					:weight="ETextWeight.BOLD "
 					:kind="EColors.SECONDARY"
 				>
 					{{ header }}

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

@@ -13,9 +13,13 @@ export default {
 type TComponentProps = InstanceType<typeof UiCardSimple>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiCardSimple },
+	components: {
+		UiCardSimple 
+	},
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
 	template: /*html*/`
 

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

@@ -9,20 +9,28 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		justify: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EJustify),
 			description: "The Element justify",
 		},
 		invertOrder: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element order",
 		},
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element disabled state",
 		},
 		modelValue: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element disabled state",
 		},
 
@@ -40,12 +48,17 @@ type TComponentProps = InstanceType<typeof UiCheckbox>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
-	components: { UiCheckbox },
+	components: {
+		UiCheckbox 
+	},
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
 		const modelValue = ref(true);
 
-		return { args, modelValue };
+		return {
+			args,
+			modelValue 
+		};
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `

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

@@ -1,3 +1,3 @@
 export { default } from "./ui-icon.vue";
 export { ESize } from "../../_types/sizing";
-export type { TIconName }from "./_typings";
+export type { TIconName } from "./_typings";

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

@@ -8,7 +8,9 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(ESize),
 			description: "The Element size",
 		}
@@ -23,10 +25,14 @@ type TComponentProps = InstanceType<typeof UiIcon>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
 	// Components used in your story `template` are defined in the `components` object
-	components: { UiIcon },
+	components: {
+		UiIcon 
+	},
 	// The story's `args` need to be mapped into the template through the `setup()` method
 	setup() {
-		return { args };
+		return {
+			args 
+		};
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `

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

@@ -10,12 +10,16 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EIconWrapperTypes),
 			description: "The Icon Wrapper kinds",
 		},
 		size: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EIconWrapperSizes),
 			description: "The Icon Wrapper sizes",
 		}
@@ -28,9 +32,18 @@ export default {
 type TComponentProps = InstanceType<typeof UiIconWrapper>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiIconWrapper, UiIcon, UiNotificationBadge },
+	components: {
+		UiIconWrapper,
+		UiIcon,
+		UiNotificationBadge 
+	},
 	setup() {
-		return { args, EBadgeOrigin, EIconWrapperSizes, EIconWrapperTypes };
+		return {
+			args,
+			EBadgeOrigin,
+			EIconWrapperSizes,
+			EIconWrapperTypes 
+		};
 	},
 	template: /*html*/`
 		<ui-icon-wrapper :kind="EIconWrapperTypes.PRIMARY" v-bind="args" class="mb-sm">

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

@@ -10,21 +10,29 @@ export default {
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
 		placeholder: {
-			control: { type: "text" },
+			control: {
+				type: "text" 
+			},
 			description: "Placeholder",
 		},
 		kind: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EInputKinds),
 			description: "The input kinds",
 		},
 		type: {
-			control: { type: "select" },
+			control: {
+				type: "select" 
+			},
 			options: Object.values(EInputType),
 			description: "The input type",
 		},
 		disabled: {
-			control: { type: "boolean" },
+			control: {
+				type: "boolean" 
+			},
 			description: "The Element disabled state",
 		},
 	},
@@ -39,12 +47,12 @@ export default {
 type MyComponentProps = InstanceType<typeof UiInput>["$props"];
 
 const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
-	components:{
+	components: {
 		UiInput
 	},
-	setup(){
+	setup() {
 		const valueModel = ref("");
-		return{
+		return {
 			args,
 			valueModel
 		};
@@ -55,14 +63,14 @@ const Template: Story<MyComponentProps> = (args: MyComponentProps) => ({
 });
 
 const TemplateAll: Story<MyComponentProps> = (args: MyComponentProps) => ({
-	components:{
+	components: {
 		UiInput,
 		Icon
 	},
-	setup(){
+	setup() {
 		const valueModel = ref("");
 
-		return{
+		return {
 			args,
 			valueModel
 		};

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

@@ -85,8 +85,8 @@
 	defineEmits(["update:modelValue"]);
 
 	const getAutoComplete =()=> {
-		if(props.autocomplete !== "") return props.autocomplete;
-		switch(props.type) {
+		if (props.autocomplete !== "") return props.autocomplete;
+		switch (props.type) {
 			case EInputType.PASSWORD: return "current-password";
 			case EInputType.EMAIL: return "email";
 			default: return "off";