bonkers-ui 1.0.54 → 1.0.56

package/.eslintrc.js

@@ -1,51 +1,106 @@
 module.exports = {
-	"root": true,
-	"env": {
-		"browser": true,
-		"es2021": true,
-		"node": true
+	root: true,
+	env: {
+		browser: true,
+		es2021: true,
+		node: true,
 	},
-	"extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/typescript/recommended", "plugin:storybook/recommended"],
-	"parserOptions": {
-		"ecmaVersion": 2021
+	extends: [
+		"plugin:vue/vue3-recommended",
+		"eslint:recommended",
+		"@vue/typescript/recommended",
+		"plugin:storybook/recommended",
+		"plugin:tailwindcss/recommended"
+	],
+	parserOptions: {
+		ecmaVersion: 2021,
 	},
-	"parser": "vue-eslint-parser",
-	"plugins": [],
-	"overrides": [{
-		"files": ["*.vue"],
-		"rules": {
-			"indent": "off"
-		}
-	}],
-	"rules": {
-		"indent": ["error", "tab", {
-			"VariableDeclarator": "first",
-			"MemberExpression": 1,
-			"ObjectExpression": 1
-		}],
-		"vue/html-indent": ["error", "tab", {
-			"attribute": 1,
-			"baseIndent": 1,
-			"closeBracket": 0,
-			"alignAttributesVertically": true
-		}],
-		"vue/script-indent": ["error", "tab", {
-			"baseIndent": 1,
-			"switchCase": 1
-		}],
+	parser: "vue-eslint-parser",
+	plugins: [
+		"tailwindcss",
+	],
+	overrides: [
+		{
+			files: ["*.vue"],
+			rules: {
+				indent: "off",
+			},
+		},
+	],
+	rules: {
+		indent: [
+			"error",
+			"tab",
+			{
+				VariableDeclarator: "first",
+				MemberExpression: 1,
+				ObjectExpression: 1,
+			},
+		],
+		"vue/html-indent": [
+			"error",
+			"tab",
+			{
+				attribute: 1,
+				baseIndent: 1,
+				closeBracket: 0,
+				alignAttributesVertically: true,
+			},
+		],
+		"vue/script-indent": [
+			"error",
+			"tab",
+			{
+				baseIndent: 1,
+				switchCase: 1,
+			},
+		],
 		"eol-last": ["error", "always"],
 		"no-console": "warn",
 		"no-debugger": "warn",
 		"vue/multi-word-component-names": 0,
 		"object-curly-spacing": ["error", "always"],
-		"quotes": ["error", "double", {
-			"avoidEscape": true,
-			"allowTemplateLiterals": true
+		quotes: [
+			"error",
+			"double",
+			{
+				avoidEscape: true,
+				allowTemplateLiterals: true,
+			},
+		],
+		"no-multiple-empty-lines": [
+			"error",
+			{
+				max: 1,
+				maxEOF: 0,
+			},
+		],
+		semi: ["error", "always"],
+		"max-len": ["error", {
+			"code": 120,
+			"tabWidth": 4,
+			"ignoreStrings": true,
+			"ignoreTemplateLiterals": true,
+			"ignoreRegExpLiterals": true,
+			"ignoreUrls": true,
+			"ignoreComments": true,
+			"ignoreTrailingComments": true,
+			ignorePattern: 'd="([\\s\\S]*?)"',
 		}],
-		"no-multiple-empty-lines": ["error", {
-			"max": 1,
-			"maxEOF": 0
+		"tailwindcss/no-custom-classname": "off",
+		"object-curly-newline": ["error", {
+			"ObjectExpression": {
+				"multiline": true,
+				"minProperties": 1,
+			},
+			"ImportDeclaration": {
+				"multiline": true,
+				"minProperties": 5,
+			}
 		}],
-		semi: ["error", "always"]
-	}
+		"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.54",
+    "version": "v1.0.56",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -19,50 +19,56 @@
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/vue-fontawesome": "^3.0.3",
+        "eslint-plugin-tailwindcss": "^3.13.0",
         "storybook-addon-designs": "^6.3.1",
         "vue": "^3.3.4",
-        "vue-router": "^4.2.2"
+        "vue-router": "^4.2.4"
     },
     "devDependencies": {
-        "@storybook/addon-essentials": "^7.0.20",
-        "@storybook/addon-links": "^7.0.20",
-        "@storybook/addon-mdx-gfm": "^7.0.20",
-        "@storybook/vue3": "^7.0.20",
-        "@storybook/vue3-vite": "^7.0.20",
+        "@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.3.2",
-        "eslint": "8.42.0",
-        "eslint-plugin-storybook": "^0.6.12",
-        "eslint-plugin-vue": "^9.14.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.2",
-        "postcss": "^8.4.24",
+        "lint-staged": "^13.2.3",
+        "postcss": "^8.4.27",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.0.20",
+        "storybook": "^7.2.0",
         "storybook-tailwind-dark-mode": "^1.0.22",
-        "stylelint": "^15.7.0",
-        "stylelint-config-recommended": "^12.0.0",
-        "stylelint-config-recommended-vue": "^1.4.0",
-        "stylelint-config-standard": "^33.0.0",
-        "tailwindcss": "^3.3.2",
+        "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.3",
-        "vite": "^4.3.9",
-        "vitest": "^0.32.0",
-        "vue-eslint-parser": "^9.3.0",
+        "typescript": "^5.1.6",
+        "vite": "^4.4.8",
+        "vitest": "^0.34.1",
+        "vue-eslint-parser": "^9.3.1",
         "vue-loader": "^17.2.2",
-        "vue-tsc": "^1.6.5"
+        "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}": [
-            "eslint --fix",
+            "yarn eslint --fix",
             "bash -c 'yarn typecheck'"
         ],
         "*.{css,vue,tsx}": "stylelint --fix"

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-alert/ui-alert.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="ui-alert flex gap-sm p-sm border rounded-lg bg-white"
+		class="ui-alert flex gap-sm rounded-lg border bg-white p-sm"
 		:class="[
 			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
 			kind === EAlertTypes.WARNING && 'border-warning',

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

@@ -1,11 +1,11 @@
 <template>
 	<div
-		class="ui-badge relative text-white overflow-hidden"
+		class="ui-badge relative overflow-hidden text-white"
 	>
-		<div class="relative z-[1] flex items-center content-center gap-xxs px-xs py-xxs">
+		<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"
 			/>
 
@@ -16,7 +16,7 @@
 				class="whitespace-nowrap"
 				line-height
 				:class="[
-					elipsis && 'overflow-hidden overflow-ellipsis',
+					elipsis && 'overflow-hidden text-ellipsis',
 				]"
 			>
 				<slot />
@@ -24,7 +24,7 @@
 		</div>
 
 		<div
-			class="absolute rounded-full top-0 left-0 w-full h-full"
+			class="absolute left-0 top-0 h-full w-full rounded-full"
 			:class="[
 				(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-600',
 

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

@@ -22,7 +22,7 @@
 				:weight="ETextWeight.BOLD"
 				:size="textSize"
 				:text-transform="ETextTransform.UPPERCASE"
-				class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+				class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
 			>
 				ber
 			</ui-typography>
@@ -52,7 +52,7 @@
 				:weight="ETextWeight.BOLD"
 				:size="textSize"
 				:text-transform="ETextTransform.UPPERCASE"
-				class="absolute top-0 left-0 w-full h-full flex justify-center items-center"
+				class="absolute left-0 top-0 flex h-full w-full items-center justify-center"
 			>
 				{{ berRankDictionary[+rank]?.text || berRankDictionary[0].text }}
 			</ui-typography>
@@ -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.test.ts

@@ -4,6 +4,6 @@ import UiButton from "./ui-button.vue";
 test("VButton.test.ts", () => {
 	expect(UiButton).toBeTruthy();
 
-	const container = mount(UiButton as any);
+	const container = mount(UiButton);
 	expect(container).toBeTruthy();
 });

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

@@ -1,26 +1,48 @@
 <template>
 	<button
-		class="ui-button grid justify-center items-center grid-flow-col text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation "
+		class="ui-button
+			text-base
+			grid
+			touch-manipulation
+			grid-flow-col
+			items-center
+			justify-center
+			whitespace-nowrap
+			rounded-lg
+			font-bold
+			leading-none
+			"
 		:disabled="disabled"
 		:class="[
 			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
 			kind === EButtonTypes.SECONDARY
-				&& 'text-white bg-secondary hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
-			kind === EButtonTypes.WARNING && 'text-white bg-warning hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
-			kind === EButtonTypes.ERROR && 'text-white bg-error hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
+				&& 'bg-secondary text-white hover:bg-secondary-600 active:bg-secondary-700 disabled:bg-secondary-300',
+			kind === EButtonTypes.WARNING
+				&& 'bg-warning text-white hover:bg-warning-600 active:bg-warning-700 disabled:bg-warning-300',
+			kind === EButtonTypes.ERROR
+				&& 'bg-error text-white hover:bg-error-600 active:bg-error-700 disabled:bg-error-300',
 			kind === EButtonTypes.PRIMARY_OVERLAY
-				&& 'text-primary border border-primary hover:bg-primary-600 hover:border-transparent hover:text-white active:bg-primary-700 active:border-transparent active:text-white disabled:text-primary-300 disabled:border-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
-				&& 'text-secondary border border-secondary hover:bg-secondary-600 hover:border-transparent hover:text-white active:bg-secondary-700 active:border-transparent active:text-white disabled:text-secondary-300 disabled:border-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
-				&& 'text-warning border border-warning hover:bg-warning-600 hover:border-transparent hover:text-white active:bg-warning-700 active:border-transparent active:text-white disabled:text-warning-300 disabled:border-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
-				&& 'text-error border border-error hover:bg-error-600 hover:border-transparent hover:text-white active:bg-error-700 active:border-transparent active:text-white disabled:text-error-300 disabled:border-error-300',
-			kind === EButtonTypes.LINK && 'text-accent-alt hover:text-accent-alt-600 active:text-accent-alt-700 disabled:text-accent-alt-300',
-			(!size || size === EButtonSizes.DEFAULT) && 'py-sm px-md',
-			size === EButtonSizes.SMALL && 'py-xs px-md',
-			size === EButtonSizes.MEDIUM && 'py-sm px-sm',
-			size === EButtonSizes.LARGE && 'py-md px-md',
+				&& `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',
+			size === EButtonSizes.LARGE && 'p-md',
 			($slots.default || $slots.postfix) && 'gap-sm',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',

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-cta/ui-card-cta.vue

@@ -3,22 +3,22 @@
 		class="
 			ui-card-cta
 			w-full
-			outline-0
+			rounded-2xl
 			border
 			border-secondary-alt-500
-			rounded-2xl
+			bg-white
 			p-sm
 			shadow-md
-			bg-white
+			outline-0
 			hover:border-secondary-700
 			focus:shadow-border-primary
 			active:bg-secondary-alt-200
-			disabled:bg-secondary-alt-200
-			disabled:pointer-events-none"
+			disabled:pointer-events-none
+			disabled:bg-secondary-alt-200"
 		:disabled="disabled"
 	>
 		<span
-			class="ui-card-cta__wrapper w-full grid gap-sm items-center"
+			class="ui-card-cta__wrapper grid w-full items-center gap-sm"
 			:class="[
 				invertOrder && 'ui-card-cta_inverted',
 			]"

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*/`