bonkers-ui 1.0.56 → 1.0.58

package/.eslintrc.js

@@ -18,6 +18,7 @@ module.exports = {
 	parser: "vue-eslint-parser",
 	plugins: [
 		"tailwindcss",
+		"eslint-plugin-storybook"
 	],
 	overrides: [
 		{
@@ -26,6 +27,12 @@ module.exports = {
 				indent: "off",
 			},
 		},
+		{
+			files: ["*.ts"],
+			rules: {
+				"@typescript-eslint/indent": ["error", "tab"],
+			}
+		}
 	],
 	rules: {
 		indent: [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bonkers-ui",
-    "version": "v1.0.56",
+    "version": "v1.0.58",
     "private": false,
     "scripts": {
         "storybook": "storybook dev -p 6006",
@@ -14,10 +14,10 @@
         "i": "yarn install --frozen-lockfile"
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.4.0",
-        "@fortawesome/free-brands-svg-icons": "^6.4.0",
-        "@fortawesome/free-regular-svg-icons": "^6.4.0",
-        "@fortawesome/free-solid-svg-icons": "^6.4.0",
+        "@fortawesome/fontawesome-svg-core": "^6.4.2",
+        "@fortawesome/free-brands-svg-icons": "^6.4.2",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "eslint-plugin-tailwindcss": "^3.13.0",
         "storybook-addon-designs": "^6.3.1",
@@ -25,38 +25,38 @@
         "vue-router": "^4.2.4"
     },
     "devDependencies": {
-        "@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",
+        "@storybook/addon-essentials": "^7.3.2",
+        "@storybook/addon-links": "^7.3.2",
+        "@storybook/addon-mdx-gfm": "^7.3.2",
+        "@storybook/vue3": "^7.3.2",
+        "@storybook/vue3-vite": "^7.3.2",
         "@typescript-eslint/eslint-plugin": "^5.59.9",
         "@typescript-eslint/parser": "^5.59.9",
-        "@vitejs/plugin-vue": "^4.2.3",
+        "@vitejs/plugin-vue": "^4.3.3",
         "@vue/eslint-config-typescript": "^11.0.3",
         "@vue/test-utils": "^2.4.1",
-        "eslint": "8.46.0",
+        "eslint": "8.47.0",
         "eslint-plugin-storybook": "^0.6.13",
-        "eslint-plugin-vue": "^9.16.1",
-        "gh-pages": "^5.0.0",
+        "eslint-plugin-vue": "^9.17.0",
+        "gh-pages": "^6.0.0",
         "husky": "4.3.8",
         "jsdom": "^22.1.0",
-        "lint-staged": "^13.2.3",
-        "postcss": "^8.4.27",
+        "lint-staged": "^14.0.1",
+        "postcss": "^8.4.28",
         "postcss-html": "^1.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.2.0",
+        "storybook": "^7.3.2",
         "storybook-tailwind-dark-mode": "^1.0.22",
-        "stylelint": "^15.10.2",
+        "stylelint": "^15.10.3",
         "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.8",
-        "vitest": "^0.34.1",
+        "vite": "^4.4.9",
+        "vitest": "^0.34.2",
         "vue-eslint-parser": "^9.3.1",
         "vue-loader": "^17.2.2",
         "vue-tsc": "^1.8.8"

package/src/_types/colors.ts

@@ -1,58 +1,58 @@
 export enum EColors {
-	WHITE = "white",
-	BLACK = "black",
-	TRANSPARENT = "transparent",
-	CURRENT = "current",
-
-	PRIMARY = "primary",
-	PRIMARY_300 = "primary-300",
-	PRIMARY_400 = "primary-400",
-	PRIMARY_500 = "primary-500",
-	PRIMARY_600 = "primary-600",
-	PRIMARY_700 = "primary-700",
-
-	PRIMARY_ALT = "primary-alt",
-	PRIMARY_ALT_300 = "primary-alt-300",
-	PRIMARY_ALT_400 = "primary-alt-400",
-	PRIMARY_ALT_500 = "primary-alt-500",
-	PRIMARY_ALT_600 = "primary-alt-600",
-	PRIMARY_ALT_700 = "primary-alt-700",
-
-	SECONDARY = "secondary",
-	SECONDARY_300 = "secondary-300",
-	SECONDARY_400 = "secondary-400",
-	SECONDARY_500 = "secondary-500",
-	SECONDARY_600 = "secondary-600",
-	SECONDARY_700 = "secondary-700",
-
-	WARNING = "warning",
-	WARNING_300 = "warning-300",
-	WARNING_400 = "warning-400",
-	WARNING_500 = "warning-500",
-	WARNING_600 = "warning-600",
-	WARNING_700 = "warning-700",
-
-	ERROR = "error",
-	ERROR_300 = "error-300",
-	ERROR_400 = "error-400",
-	ERROR_500 = "error-500",
-	ERROR_600 = "error-600",
-	ERROR_700 = "error-700",
-
-	ACCENT = "accent",
-	ACCENT_300 = "accent-300",
-	ACCENT_500 = "accent-500",
-	ACCENT_600 = "accent-600",
-	ACCENT_700 = "accent-700",
-
-	ACCENT_ALT = "accent-alt",
-	ACCENT_ALT_500 = "accent-alt-500",
-
-	SECONDARY_ALT = "secondary-alt",
-	SECONDARY_ALT_200 = "secondary-alt-200",
-	SECONDARY_ALT_300 = "secondary-alt-300",
-	SECONDARY_ALT_400 = "secondary-alt-400",
-	SECONDARY_ALT_500 = "secondary-alt-500",
-	SECONDARY_ALT_600 = "secondary-alt-600",
-	SECONDARY_ALT_700 = "secondary-alt-700",
+	WHITE = "--color-white",
+	BLACK = "--color-black",
+	TRANSPARENT = "--color-transparent",
+	CURRENT = "--color-current",
+
+	PRIMARY = "--color-primary",
+	PRIMARY_300 = "--color-primary-300",
+	PRIMARY_400 = "--color-primary-400",
+	PRIMARY_500 = "--color-primary-500",
+	PRIMARY_600 = "--color-primary-600",
+	PRIMARY_700 = "--color-primary-700",
+
+	PRIMARY_ALT = "--color-primary-alt",
+	PRIMARY_ALT_300 = "--color-primary-alt-300",
+	PRIMARY_ALT_400 = "--color-primary-alt-400",
+	PRIMARY_ALT_500 = "--color-primary-alt-500",
+	PRIMARY_ALT_600 = "--color-primary-alt-600",
+	PRIMARY_ALT_700 = "--color-primary-alt-700",
+
+	SECONDARY = "--color-secondary",
+	SECONDARY_300 = "--color-secondary-300",
+	SECONDARY_400 = "--color-secondary-400",
+	SECONDARY_500 = "--color-secondary-500",
+	SECONDARY_600 = "--color-secondary-600",
+	SECONDARY_700 = "--color-secondary-700",
+
+	WARNING = "--color-warning",
+	WARNING_300 = "--color-warning-300",
+	WARNING_400 = "--color-warning-400",
+	WARNING_500 = "--color-warning-500",
+	WARNING_600 = "--color-warning-600",
+	WARNING_700 = "--color-warning-700",
+
+	ERROR = "--color-error",
+	ERROR_300 = "--color-error-300",
+	ERROR_400 = "--color-error-400",
+	ERROR_500 = "--color-error-500",
+	ERROR_600 = "--color-error-600",
+	ERROR_700 = "--color-error-700",
+
+	ACCENT = "--color-accent",
+	ACCENT_300 = "--color-accent-300",
+	ACCENT_500 = "--color-accent-500",
+	ACCENT_600 = "--color-accent-600",
+	ACCENT_700 = "--color-accent-700",
+
+	ACCENT_ALT = "--color-accent-alt",
+	ACCENT_ALT_500 = "--color-accent-alt-500",
+
+	SECONDARY_ALT = "--color-secondary-alt",
+	SECONDARY_ALT_200 = "--color-secondary-alt-200",
+	SECONDARY_ALT_300 = "--color-secondary-alt-300",
+	SECONDARY_ALT_400 = "--color-secondary-alt-400",
+	SECONDARY_ALT_500 = "--color-secondary-alt-500",
+	SECONDARY_ALT_600 = "--color-secondary-alt-600",
+	SECONDARY_ALT_700 = "--color-secondary-alt-700",
 }

package/src/components/ui-list-item/_types.ts

@@ -3,11 +3,11 @@ export enum EListItemTypes {
 	PROGRESS = "PROGRESS"
 }
 export enum EListItemSpacing {
-    DEFAULT = "DEFAULT",
+	DEFAULT = "DEFAULT",
 	COMPACT = "COMPACT"
 }
 
 export enum EListItemSize {
-    SM = "SM",
+	SM = "SM",
 	MD = "MD"
 }

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

@@ -1,4 +1,4 @@
 export enum EOrderCardTypes {
-    DEFAULT = "DEFAULT",
-    WARNING = "WARNING"
+	DEFAULT = "DEFAULT",
+	WARNING = "WARNING"
 }

package/src/components/ui-radio-compact/index.ts

@@ -0,0 +1 @@
+export { default } from "./ui-radio-compact.vue";

package/src/components/ui-radio-compact/ui-radio-compact.stories.ts

@@ -0,0 +1,51 @@
+import UiRadioCompact from "../ui-radio-compact";
+import UiTypography,  { ETypographySizes, ETextAlign } from "../ui-typography";
+import { ref } from "vue";
+import type { Meta } from "@storybook/vue3";
+
+const meta: Meta<typeof UiRadioCompact> = {
+	title: "Components/ui-radio-compact",
+	component: UiRadioCompact,
+	argTypes: {}
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		default: "1"
+	},
+	render: (args) => ({
+		components: {
+			UiRadioCompact,
+			UiTypography
+		},
+		setup() {
+			const modelValue = ref("1");
+			return {
+				args,
+				ETypographySizes,
+				ETextAlign,
+				modelValue
+			};
+		},
+		template: /*html*/`
+		<div class="flex flex-row gap-sm align-middle" :style="{}">
+			<ui-radio-compact v-for="item in 8"
+				:key="item"
+				:value="String(item)"
+				v-model="modelValue"
+				name="radio" title="title"
+
+			>
+					{{item}}
+				</ui-radio-compact>
+
+		</div>
+		`,
+		args: {
+			default: "1"
+		},
+	}),
+
+};

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

@@ -0,0 +1,92 @@
+<template>
+	<label
+		class="
+		ui-radio-compact
+		relative
+		"
+	>
+		<input
+			v-model="radioModel"
+			type="radio"
+			:name="name"
+			:value="value"
+			class="group peer absolute appearance-none"
+			:disabled="disabled"
+		>
+		<div
+			class="
+			ui-radio-compact_content
+			box-border
+			grid
+			cursor-pointer
+			items-center
+			justify-items-center
+			rounded-xl
+			border
+			border-secondary-alt-500
+			bg-white
+			before:absolute
+			before:-z-10
+			before:box-border
+			before:rounded-[16px]
+
+			before:bg-primary-300
+			hover:border-secondary-alt-700
+			peer-checked:border-transparent
+			peer-checked:shadow-selected-shadow
+			peer-checked:hover:shadow-border-selected
+
+			peer-checked:active:shadow-border-primary
+			peer-checked:active:before:-bottom-xs
+			peer-checked:active:before:-left-xs
+			peer-checked:active:before:-right-xs
+			peer-checked:active:before:-top-xs
+			peer-focus:before:-bottom-xs
+
+			peer-focus:before:-left-xs
+			peer-focus:before:-right-xs
+
+			peer-focus:before:-top-xs
+			peer-active:before:-bottom-xxs
+			peer-active:before:-left-xxs
+			peer-active:before:-right-xxs
+
+			peer-active:before:-top-xxs
+			"
+		>
+
+			<ui-typography
+				class="px-md py-sm"
+				:size="ETypographySizes.MD"
+				line-height
+				:align="ETextAlign.CENTER"
+			>
+				<slot />
+			</ui-typography>
+
+		</div>
+	</label>
+</template>
+
+<script lang="ts" setup>
+	import { computed } from "vue";
+	import UiTypography, { ETypographySizes, ETextAlign } from "../ui-typography";
+
+	const props = defineProps<{
+		modelValue: string | number | boolean;
+		name: string;
+		value: string | number | boolean;
+		disabled?: boolean;
+	}>();
+
+	const emit = defineEmits(["update:modelValue"]);
+
+	const radioModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
+</script>

package/src/components/ui-radio-fancy/_typings.ts

@@ -1,4 +1,5 @@
 export enum ERadioSizes {
 	DEFAULT = "default",
-	MINIMAL = "minimal"
+	MINIMAL = "minimal",
+	COMPACT = "compact"
 }

package/src/components/ui-radio-fancy/ui-radio-fancy.stories.ts

@@ -1,65 +1,81 @@
 import { ERadioSizes } from "./_typings";
-import { ref } from "vue";
 import UiRadioFancy from "../ui-radio-fancy";
-import type { Story } from "@storybook/vue3";
-import { EIconType } from "../ui-icon/_typings";
+import { ICON_DEFAULT } from "./../../CONSTANTS";
+import UiTypography, { ETypographySizes } from "../ui-typography";
+import type { Meta } from "@storybook/vue3";
+import { ref } from "vue";
 
-export default {
+const meta: Meta<typeof UiRadioFancy> =  {
 	title: "Components/ui-radio-fancy",
 	component: UiRadioFancy,
 	// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 	argTypes: {
-		invertOrder: {
-			control: {
-				type: "boolean" 
-			},
-			description: "The Element order",
-		},
 		disabled: {
 			control: {
-				type: "boolean" 
+				type: "boolean"
 			},
 			description: "The full width size",
 		},
 		radioSize: {
 			control: {
-				type: "select" 
+				type: "select"
 			},
 			options: Object.values(ERadioSizes),
 			description: "The radio kinds",
 		},
 	},
+};
+
+export default meta;
+
+export const Default = {
 	args: {
-		slot: "Description",
+		iconName: ICON_DEFAULT,
+		default: "Description",
 		invertOrder: false,
 		disabled: false,
 		radioSize: ERadioSizes.DEFAULT
 	},
 };
 
-type TComponentProps = InstanceType<typeof UiRadioFancy>["$props"];
-
-const Template: Story<TComponentProps> = (args) => ({
-	components: {
-		UiRadioFancy 
+export const Compact = {
+	args: {
+		default: "1",
+		radioSize: ERadioSizes.COMPACT
 	},
-	setup() {
-		const modelValue = ref("1");
 
-		return {
-			modelValue,
-			EIconType,
-			args,
-			ERadioSizes 
-		};
-	},
-	template: /*html*/`
-		<div class="grid gap-sm" :style="{'grid-template-columns': 'repeat(auto-fit, minmax(160px, 1fr))'}">
-			<ui-radio-fancy v-for="item in 2" :key="item" :value="String(item)" v-model="modelValue" name="radio" title="title" :icon-name="[EIconType.FAR, 'face-smile']" :radioSize="args.radioSize" :disabled="args.disabled">
-				{{args.slot}}
+	render: (args) => ({
+		components: {
+			UiRadioFancy,
+			UiTypography
+		},
+		setup() {
+			const modelValue = ref("1");
+			return {
+				args,
+				ETypographySizes,
+				modelValue
+			};
+		},
+		template: /*html*/`
+		<div class="flex gap-sm" :style="{}">
+			<ui-radio-fancy v-for="item in 2"
+				:key="item"
+				:value="String(item)"
+				v-model="modelValue"
+				name="radio" title="title"
+				:radioSize="args.radioSize"
+				:disabled="args.disabled"
+			>
+				<ui-typography :size="ETypographySizes.MD">
+					{{item}}
+				</ui-typography>
 			</ui-radio-fancy>
 		</div>
-	`,
-});
-
-export const Default = Template.bind({});
+		`,
+		args: {
+			default: "1",
+			radioSize: ERadioSizes.COMPACT
+		},
+	}),
+};

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

@@ -57,12 +57,13 @@
 			:class="[
 				disabled
 					&& 'pointer-events-none border-secondary-alt-400 peer-checked:shadow-border-primary-disabled',
-				radioSize === ERadioSizes.DEFAULT && 'default',
-				radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle'
+				radioSize === ERadioSizes.MINIMAL && 'flex gap-sm align-middle',
+				radioSize === ERadioSizes.COMPACT && 'grid cursor-pointer grid-flow-col px-md'
+
 			]"
 		>
 			<div
-				v-if="radioSize === ERadioSizes.DEFAULT"
+				v-if="radioSize === ERadioSizes.DEFAULT && iconName"
 			>
 				<ui-icon
 					:icon-name="iconName"
@@ -74,7 +75,7 @@
 					]"
 				/>
 			</div>
-			<div v-else-if="radioSize === ERadioSizes.MINIMAL">
+			<div v-else-if="radioSize === ERadioSizes.MINIMAL && iconName">
 				<ui-icon
 					:icon-name="iconName"
 					:size="ESize.MD"
@@ -85,6 +86,9 @@
 				/>
 
 			</div>
+			<div
+				v-else-if="radioSize === ERadioSizes.COMPACT"
+			/>
 			<ui-typography
 				:size="ETypographySizes.SM"
 				:kind="EColors.SECONDARY"
@@ -109,11 +113,12 @@
 		modelValue: string | number | boolean;
 		name: string;
 		value: string | number | boolean;
-		iconName: TIconName;
+		iconName?: TIconName;
 		disabled?: boolean;
 		radioSize?: ERadioSizes;
 	}>(), {
-		radioSize: ERadioSizes.DEFAULT
+		radioSize: ERadioSizes.DEFAULT,
+		iconName: undefined
 	});
 	const emit = defineEmits(["update:modelValue"]);
 	const radioModel = computed({

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

@@ -1,8 +1,8 @@
 export enum EResultCardRangeSizes {
-DEFAULT = "DEFAULT",
+	DEFAULT = "DEFAULT",
 }
 
 export enum EResultCardRangeTypes {
-    DEFAULT = "DEFAULT",
-    FULL = "FULL",
+	DEFAULT = "DEFAULT",
+	FULL = "FULL",
 }

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

@@ -0,0 +1,4 @@
+export enum ESkeletonKind {
+	RESULT_CARD = "RESULT_CARD",
+	FILTER_MENU = "FILTER_MENU"
+}

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

@@ -0,0 +1 @@
+export { default } from "./ui-skeleton.vue";

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

@@ -0,0 +1,42 @@
+import UiSkeleton from "../ui-skeleton";
+import type { Meta } from "@storybook/vue3";
+import { ESkeletonKind } from "./_typings";
+
+export default {
+	title: "Components/ui-skeleton",
+	component: UiSkeleton,
+	argTypes: {
+		kind: {
+			control: {
+				type: "select"
+			},
+			options: Object.values(ESkeletonKind),
+			description: "The skeleton kind",
+		}
+	},
+	args: {
+		kind: ESkeletonKind.RESULT_CARD
+	},
+	render: (args) => ({
+		components: {
+			UiSkeleton
+		},
+		setup() {
+			return {
+				args
+			};
+		},
+		template: /*html*/`
+			<ui-skeleton :kind="args.kind" />
+		`,
+		args: {
+			kind: ESkeletonKind.RESULT_CARD
+		},
+	})
+} satisfies Meta<typeof UiSkeleton>;
+
+export const Default = {
+	args: {
+		kind: ESkeletonKind.RESULT_CARD
+	}
+};

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

@@ -0,0 +1,61 @@
+<template>
+	<div
+		v-if="props.kind === ESkeletonKind.RESULT_CARD"
+		class="ui-skeleton-card animate-pulse rounded-2xl border-2 border-secondary-alt-300 p-xs"
+	>
+		<div
+			class="ui-skeleton-card__header flex items-center
+			justify-between rounded-lg bg-secondary-alt-200 p-xs"
+		>
+			<div class="flex w-full flex-col items-start">
+				<div class="ui-skeleton-card__content__text my-xs h-md w-full rounded-md bg-secondary-alt-300" />
+				<div class="ui-skeleton-card__content__text h-md w-5/6 rounded-md bg-secondary-alt-300" />
+			</div>
+			<div class="ui-skeleton-card__header__image my-xxs ml-sm h-xl w-xxl rounded-xl bg-secondary-alt-300" />
+		</div>
+
+		<div class="ui-skeleton-card__content flex flex-col items-start justify-start rounded-lg pt-sm">
+			<div
+				v-for="i in ['w-1/2', 'w-1/3', 'w-2/3', 'w-3/4']"
+				:key="i"
+				:class="`${i}`"
+				class="ui-skeleton-card__content__text mb-xs h-md rounded-md bg-secondary-alt-300"
+			/>
+		</div>
+
+		<div class="ui-skeleton-card__footer flex flex-row justify-between">
+			<div class="ui-skeleton-card__footer__text h-md w-1/4 self-end rounded-lg bg-secondary-alt-300" />
+			<div class="ui-skeleton-card__footer__text h-lg w-1/4 rounded-lg bg-secondary-alt-300" />
+		</div>
+
+		<div
+			class="ui-skeleton-card__button mt-xs flex h-md w-full items-center
+		justify-center rounded-lg bg-secondary-alt-300 py-md"
+		/>
+	</div>
+	<div
+		v-else
+		class="ui-skeleton-menu mb-sm flex animate-pulse flex-row items-center justify-between"
+	>
+		<div class="ui-skeleton-menu__result-count h-sm w-full max-w-xxl rounded-md bg-secondary-alt-300" />
+		<div class="ui-skeleton-menu__filters relative flex h-lg w-xxl flex-row gap-x-sm">
+			<div
+				v-for="i in 2"
+				:key="i"
+				class="ui-skeleton-menu__filters__item relative w-xl rounded-md bg-secondary-alt-300"
+			/>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import { ESkeletonKind } from "./_typings";
+
+	const props = withDefaults(
+		defineProps<{
+			kind?: ESkeletonKind
+		}>(),
+		{
+			kind: ESkeletonKind.RESULT_CARD,
+		});
+</script>

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

@@ -54,7 +54,7 @@
 
 			<slot name="title">
 				<ui-typography
-					:size="ETypographySizes.SM"
+					:size="ETypographySizes.MD"
 					class="w-full"
 					line-height
 				>

package/tailwind.config.js

@@ -18,6 +18,12 @@ module.exports = {
 			minWidth: (theme) => ({
 				...theme("spacing"),
 			}),
+			maxHeight: (theme) => ({
+				...theme("spacing"),
+			}),
+			maxWidth: (theme) => ({
+				...theme("spacing"),
+			}),
 		},
 	},
 	plugins: [],