bonkers-ui 1.0.7 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bonkers-ui",
-  "version": "1.0.7",
+  "version": "1.0.10",
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

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

@@ -0,0 +1,6 @@
+export enum EAlertTypes {
+	PRIMARY = "PRIMARY",
+	SECONDARY = "SECONDARY",
+	ERROR = "ERROR",
+	WARNING = "WARNING",
+}

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

@@ -0,0 +1,2 @@
+export { default } from "./ui-alert.vue";
+export { EAlertTypes } from "./_types";

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

@@ -0,0 +1,38 @@
+import UiAlert from "./ui-alert.vue";
+import type { Story } from "@storybook/vue3";
+import { EAlertTypes } from "./_types";
+
+export default {
+	title: "Components/ui-alert",
+	component: UiAlert,
+	argTypes: {
+		kind: {
+			control: { type: "select" },
+			options: Object.values(EAlertTypes),
+			description: "The button kinds",
+		},
+	},
+	args: {
+		slot: "some description text: lorem",
+		kind: EAlertTypes.WARNING
+	}
+};
+
+type TComponentProps = InstanceType<typeof UiAlert>["$props"];
+
+const Template: Story<TComponentProps> = (args) => ({
+	components: { UiAlert },
+	setup() {
+		return { args };
+	},
+	template: `
+		<ui-alert
+			:kind="args.kind"
+			:icon="['far', 'face-smile']"
+		>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+		</ui-alert>
+	`
+});
+
+export const Default = Template.bind({});

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

@@ -0,0 +1,40 @@
+<template>
+	<div
+		class="ui-alert flex gap-sm p-sm border rounded-lg"
+		:class="[
+			(!kind || kind === EAlertTypes.PRIMARY) && 'border-primary',
+			kind === EAlertTypes.WARNING && 'border-warning',
+			kind === EAlertTypes.ERROR && 'border-error',
+			kind === EAlertTypes.SECONDARY && 'border-secondary',
+		]"
+	>
+		<ui-icon
+			:icon-name="icon"
+			:size="ESize.SM"
+			:class="[
+				(!kind || kind === EAlertTypes.PRIMARY) && 'text-primary',
+				kind === EAlertTypes.WARNING && 'text-warning',
+				kind === EAlertTypes.ERROR && 'text-error',
+				kind === EAlertTypes.SECONDARY && 'text-secondary',
+			]"
+		/>
+		<ui-typography
+			:size="ETypographySizes.XS"
+			line-height
+		>
+			<slot />
+		</ui-typography>
+	</div>
+</template>
+
+<script lang="ts" setup>
+	import UiTypography, { ETypographySizes } from "../ui-typography";
+	import UiIcon, { type TIconName } from "../ui-icon";
+	import { ESize } from "../../_types/sizing";
+	import { EAlertTypes } from "./_types";
+
+	defineProps<{
+		icon: TIconName
+		kind?: EAlertTypes
+	}>();
+</script>

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

@@ -32,7 +32,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args };
 	},
 	template: `
-		<ui-badge :icon="['far', 'face-smile']" v-bind="args">
+		<ui-badge :icon="['far', 'face-smile']" v-bind="args" class="inline-flex">
 			{{ args.slot }}
 		</ui-badge>
 	`,

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

@@ -1,6 +1,6 @@
 <template>
-	<span
-		class="ui-badge rounded-full inline-flex items-center"
+	<div
+		class="ui-badge rounded-full flex items-center content-center gap-xxs"
 		:class="[
 			(!size || size === EBadgeSize.SMALL) && 'px-xs py-xxs',
 			(!kind || kind === EBadgeKind.PRIMARY) && 'bg-primary-alt-300 text-primary-alt-700',
@@ -14,24 +14,23 @@
 	>
 		<ui-icon
 			v-if="icon"
-			class="mr-xxs"
 			:size="ESize.SM"
 			:icon-name="icon"
 		/>
 
 		<ui-typography
-			is="span"
+			v-if="slots.default"
 			:size="getBadgeSize"
 			:weight="ETextWeight.SEMI_BOLD"
 			class="whitespace-nowrap"
 		>
 			<slot />
 		</ui-typography>
-	</span>
+	</div>
 </template>
 
 <script lang="ts" setup>
-	import { computed } from "vue";
+	import { computed, useSlots } from "vue";
 	import { EBadgeKind, EBadgeSize } from "./_typings";
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
@@ -43,6 +42,8 @@
 		icon?: TIconName;
 	}>();
 
+	const slots = useSlots();
+
 	const getBadgeSize = computed(()=>{
 		switch (props.size) {
 			case EBadgeSize.MEDIUM:

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

@@ -0,0 +1,77 @@
+import { EColors } from "../../_types/colors";
+
+type Ran<T extends number> = number extends T ? number :_Range<T, []>;
+type _Range<T extends number, R extends unknown[]> = R["length"] extends T ? R[number] : _Range<T, [R["length"], ...R]>;
+
+export type TBerPropNumber = Ran<typeof berRankDictionary.length>
+export type TBerPropString = `${TBerPropNumber}`;
+export type TBerRank = typeof berRankDictionary[TBerPropNumber]["text"];
+
+export const berRankDictionary = [
+	{
+		text: "N/A",
+		color: EColors.SECONDARY_ALT,
+	},
+	{
+		text: "G",
+		color: EColors.ERROR,
+	},
+	{
+		text: "F",
+		color: EColors.WARNING,
+	},
+	{
+		text: "E2",
+		color: EColors.WARNING_600,
+	},
+	{
+		text: "E1",
+		color: EColors.WARNING_600,
+	},
+	{
+		text: "D2",
+		color: EColors.WARNING_400,
+	},
+	{
+		text: "D1",
+		color: EColors.WARNING_400,
+	},
+	{
+		text: "C3",
+		color: EColors.PRIMARY_ALT,
+	},
+	{
+		text: "C2",
+		color: EColors.PRIMARY_ALT,
+	},
+	{
+		text: "C1",
+		color: EColors.PRIMARY_ALT,
+	},
+	{
+		text: "B3",
+		color: EColors.PRIMARY_ALT_600,
+	},
+	{
+		text: "B2",
+		color: EColors.PRIMARY_ALT_600,
+	},
+	{
+		text: "B1",
+		color: EColors.PRIMARY_ALT_600,
+	},
+	{
+		text: "A3",
+		color: EColors.PRIMARY_ALT_700,
+	},
+	{
+		text: "A2",
+		color: EColors.PRIMARY_ALT_700,
+	},
+	{
+		text: "A1",
+		color: EColors.PRIMARY_ALT_700,
+	},
+] as const;
+
+export const berRanksList = berRankDictionary.map(({ text }) => text);

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

@@ -56,83 +56,11 @@
 <script lang="ts" setup>
 	import UiTypography, { ETextWeight, ETypographySizes, ETextTransform } from "../ui-typography";
 	import { EColors } from "../../_types/colors";
-
-	type Ran<T extends number> = number extends T ? number :_Range<T, []>;
-	type _Range<T extends number, R extends unknown[]> = R["length"] extends T ? R[number] : _Range<T, [R["length"], ...R]>;
-
-	type TPropNumber = Ran<typeof berRankDictionary.length>
-	type TPropString = `${TPropNumber}`;
+	import { berRankDictionary, type TBerPropNumber, type TBerPropString }from"./_types";
 
 	defineProps<{
-		rank: TPropNumber | TPropString; // from 0 to 15
+		rank: TBerPropNumber | TBerPropString | number; // from 0 to 15
 	}>();
-
-	const berRankDictionary = [
-		{
-			text: "N/A",
-			color: EColors.SECONDARY_ALT,
-		},
-		{
-			text: "G",
-			color: EColors.ERROR,
-		},
-		{
-			text: "F",
-			color: EColors.WARNING,
-		},
-		{
-			text: "E2",
-			color: EColors.WARNING_600,
-		},
-		{
-			text: "E1",
-			color: EColors.WARNING_600,
-		},
-		{
-			text: "D2",
-			color: EColors.WARNING_400,
-		},
-		{
-			text: "D1",
-			color: EColors.WARNING_400,
-		},
-		{
-			text: "C3",
-			color: EColors.PRIMARY_ALT,
-		},
-		{
-			text: "C2",
-			color: EColors.PRIMARY_ALT,
-		},
-		{
-			text: "C1",
-			color: EColors.PRIMARY_ALT,
-		},
-		{
-			text: "B3",
-			color: EColors.PRIMARY_ALT_600,
-		},
-		{
-			text: "B2",
-			color: EColors.PRIMARY_ALT_600,
-		},
-		{
-			text: "B1",
-			color: EColors.PRIMARY_ALT_600,
-		},
-		{
-			text: "A3",
-			color: EColors.PRIMARY_ALT_700,
-		},
-		{
-			text: "A2",
-			color: EColors.PRIMARY_ALT_700,
-		},
-		{
-			text: "A1",
-			color: EColors.PRIMARY_ALT_700,
-		},
-	] as const;
 </script>
 
 <style>

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

@@ -10,6 +10,7 @@ export enum EButtonTypes {
 	LINK = "link",
 }
 export enum EButtonSizes {
+	DEFAULT = "default",
 	SMALL = "sm",
 	MEDIUM = "md",
 	LARGE = "lg"

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

@@ -1,6 +1,6 @@
 <template>
 	<button
-		class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation"
+		class="ui-button justify-center grid text-base rounded-lg whitespace-nowrap font-bold leading-none touch-manipulation items-center"
 		:disabled="disabled"
 		:class="[
 			(!kind || kind === EButtonTypes.PRIMARY) && [primaryColor, primaryColorHover, primaryColorActive].join(' '),
@@ -16,8 +16,9 @@
 			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.MEDIUM) && 'py-sm px-md',
+			(!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',
 			fullWidth && 'w-full',
 			disabled && 'pointer-events-none',

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

@@ -68,9 +68,8 @@ const Template: Story<TComponentProps> = (args) => ({
 						class="mb-xs"
 						:key="item"
 						:icon="['far', 'face-smile']"
-					>
-						Feature item {{ item }}
-					</ui-list-item>
+						:title="'Feature item ' + item"
+					/>
 				</ul>
 
 				<ui-typography

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

@@ -49,7 +49,7 @@ const Template: Story<TComponentProps> = (args) => ({
 	},
 	// And then the `args` are bound to your component with `v-bind="args"`
 	template: `
-		<ui-checkbox v-bind="args" v-model:modelValue="args.modelValue">
+		<ui-checkbox v-bind="args" v-model="modelValue">
 			${args.slot}
 		</ui-checkbox>
 	`,

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

@@ -13,11 +13,11 @@
 		]"
 	>
 		<input
-			:checked="modelValue"
+			v-model="checkboxModel"
 			class="appearance-none absolute"
 			type="checkbox"
+			:value="value"
 			:disabled="disabled"
-			@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
 		>
 		<span
 			class="ui-checkbox_custom w-md h-md flex items-center justify-center border border-secondary-alt-500 rounded relative hover:border-secondary-alt-700"
@@ -50,21 +50,32 @@
 </template>
 
 <script lang="ts" setup>
-	import { useSlots } from "vue";
+	import { useSlots, computed } from "vue";
 	import { EJustify } from "../../_types/align";
 
 	const slots = useSlots();
 
-	defineProps<{
-		modelValue: boolean;
+	const props = defineProps<{
+		modelValue: boolean | unknown[];
 		justify?: EJustify;
 		invertOrder?: boolean;
 		disabled?: boolean;
+		value?: string;
 	}>();
 
-	defineEmits<{
-		(e: "update:modelValue", state: boolean): void
+	const emit = defineEmits<{
+		(e: "update:modelValue", state: unknown): void
 	}>();
+
+	const checkboxModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
+
 </script>
 
 <style scoped>

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

@@ -18,10 +18,6 @@ export default {
 			options: Object.values(EInputTypes),
 			description: "The input kinds",
 		},
-		fullWidth: {
-			control: { type: "boolean" },
-			description: "The full width size",
-		},
 		disabled: {
 			control: { type: "boolean" },
 			description: "The Element disabled state",
@@ -29,7 +25,6 @@ export default {
 	},
 	args: {
 		placeholder: "Placeholder",
-		fullWidth: false,
 		kind: undefined,
 		disabled: false,
 	}

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

@@ -8,30 +8,26 @@
 			{{ heading }}
 		</ui-typography>
 		<div
-			class="ui-input__wrapper grid rounded-lg border bg-white max-w-xs items-center p-sm gap-xs"
+			class="ui-input__wrapper flex w-full rounded-lg border bg-white items-center p-sm gap-xs"
 			:class="[
 				!kind && 'border-secondary-alt-500 hover:border-secondary-alt-700',
 				kind === EInputTypes.PRIMARY && 'border-primary',
 				kind === EInputTypes.ERROR && 'border-error',
 
 				disabled && 'border-secondary-alt-300 bg-secondary-alt-200',
-
-				fullWidth && 'max-w-full',
 			]"
 		>
-			<div class="icon-wrapper">
-				<slot name="prefix-icon" />
-			</div>
+			<slot name="prefix-icon" />
+			
 			<input
-				class="bg-transparent border-0 outline-0"
+				class="bg-transparent border-0 outline-none w-full"
 				type="text"
 				:placeholder="placeholder"
 				:value="modelValue"
 				@input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement)?.value)"
 			>
-			<div class="icon-wrapper">
-				<slot name="postfix-icon" />
-			</div>
+			
+			<slot name="postfix-icon" />
 		</div>
 		<ui-typography
 			v-if="subLabel"
@@ -51,7 +47,6 @@
 		placeholder?: string;
 		modelValue: string;
 		disabled?: boolean;
-		fullWidth?: boolean;
 		kind?: EInputTypes;
 		heading?: string;
 		subLabel?: string;
@@ -61,10 +56,6 @@
 </script>
 
 <style scoped>
-	.ui-input__wrapper {
-		grid-template-columns: auto 1fr auto;
-	}
-
 	.ui-input__wrapper input::placeholder {
 		color: var(--color-secondary-alt-500);
 		font-style: italic;

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

@@ -53,6 +53,18 @@
 		z-index: 1;
 	}
 
+	input[type="range"]::-moz-range-thumb {
+		appearance: none;
+		background-color: var(--color-primary);
+		height: 13px;
+		width: 13px;
+		border-radius: 50%;
+		border: var(--xs) solid var(--color-white);
+		box-shadow: 0 0 0 4px var(--color-primary);
+		box-sizing: content-box;
+		z-index: 1;
+	}
+
 	.ui-input-range__line {
 		top: 50%;
 		transform: translate3d(0, -50%, 0);

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

@@ -1,33 +1,37 @@
-import UiIconList from "./ui-list-item.vue";
+import UiListItem from "./ui-list-item.vue";
 import type { Story } from "@storybook/vue3";
 
 export default {
 	title: "Components/ui-list-item",
-	component: UiIconList,
-	argTypes: {},
+	component: UiListItem,
+	argTypes: {
+		description: {
+			control: { type: "text" },
+			title: "The Element title",
+		}
+	},
 	args: {
-		slot: "default text",
+		slot: "some description text: lorem",
+		title: "default text",
 	}
 };
 
-type TComponentProps = InstanceType<typeof UiIconList>["$props"];
+type TComponentProps = InstanceType<typeof UiListItem>["$props"];
 
 const Template: Story<TComponentProps> = (args) => ({
-	components: { UiIconList },
+	components: { UiListItem },
 	setup() {
 		return { args };
 	},
 	template: `
-		<ul>
-			<ui-icon-list :icon="['far', 'face-smile']">
-				{{args.slot}}
-			</ui-icon-list>
-			<ui-icon-list :icon="['far', 'face-smile']">
-				{{args.slot}}
-			</ui-icon-list>
-			<ui-icon-list :icon="['far', 'face-smile']">
+		<ul class="grid gap-sm">
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
+			</ui-list-item>
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
 				{{args.slot}}
-			</ui-icon-list>
+			</ui-list-item>
+			<ui-list-item :icon="['far', 'face-smile']" :title="args.title">
+			</ui-list-item>
 		</ul>
 	`
 });

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

@@ -1,5 +1,5 @@
 <template>
-	<li class="ui-icon-list">
+	<li class="ui-icon-list flex">
 		<ui-icon
 			v-if="icon"
 			class="mr-xs"
@@ -7,23 +7,30 @@
 			:icon-name="icon"
 		/>
 
-		<ui-typography
-			is="span"
-			:weight="ETextWeight.SEMI_BOLD"
-			:size="ETypographySizes.SM"
-		>
-			<slot />
-		</ui-typography>
+		<div>
+			<ui-typography
+				:weight="ETextWeight.SEMI_BOLD"
+			>
+				{{ title }}
+			</ui-typography>
+			<p
+				v-if="$slots.default"
+				class="mt-xs"
+			>
+				<slot />
+			</p>
+		</div>
 	</li>
 </template>
 
 <script lang="ts" setup>
 	import UiIcon, { type TIconName } from "../ui-icon";
 	import { ESize } from "../../_types/sizing";
-	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import UiTypography, { ETextWeight } from "../ui-typography";
 
 	defineProps<{
 		icon?: TIconName;
+		title?: string;
 	}>();
 
 </script>

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

@@ -10,6 +10,10 @@ export default {
 			control: { type: "boolean" },
 			description: "The Element disabled state",
 		},
+		alignCenter: {
+			control: { type: "boolean" },
+			description: "The Elements center align state",
+		},
 		invertOrder: {
 			control: { type: "boolean" },
 			description: "The Element order state",
@@ -19,6 +23,7 @@ export default {
 		slot: "default text",
 		disabled: false,
 		invertOrder: false,
+		alignCenter: false,
 	},
 };
 
@@ -32,7 +37,7 @@ const Template: Story<TComponentProps> = (args) => ({
 		return { args, modelValue };
 	},
 	template: `
-		<ui-toggle v-bind="args" v-model:model-value="modelValue" header="Header" :title="args.slot" />
+		<ui-toggle v-bind="args" v-model="modelValue" header="Header" :title="args.slot" />
 	`,
 });
 

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

@@ -14,14 +14,17 @@
 			:class="[
 				disabled && 'pointer-events-none ui-toggle_disabled',
 				invertOrder && 'flex-row-reverse',
+				alignCenter && 'items-center'
 			]"
 		>
-			<span class="ui-input__input-wrapper block relative h-md">
+			<span
+				class="ui-input__input-wrapper block relative h-md"
+			>
 				<input
+					v-model="checkboxModel"
 					type="checkbox"
 					class="appearance-none absolute w-0 h-0 border-0"
-					:checked="modelValue"
-					@input="$emit('update:modelValue', !!($event.target as HTMLInputElement)?.value)"
+					:value="value"
 				>
 
 				<span class="ui-toggle__bg-block w-lg h-md bg-secondary-alt block rounded-full" />
@@ -57,18 +60,30 @@
 
 <script lang="ts" setup>
 	import UiTypography, { ETypographySizes, ETextWeight } from "../ui-typography";
+	import { computed } from "vue";
 
-	defineProps<{
+	const props = defineProps<{
 		header?: string;
 		title?: string;
-		modelValue: boolean;
+		modelValue: boolean | unknown[];
 		disabled?: boolean;
 		invertOrder?: boolean;
+		alignCenter?: boolean;
+		value?: string;
 	}>();
 
-	defineEmits<{
-		(e: "update:modelValue", state: boolean): void
+	const emit = defineEmits<{
+		(e: "update:modelValue", state: unknown): void
 	}>();
+
+	const checkboxModel = computed({
+		get() {
+			return props.modelValue;
+		},
+		set(value) {
+			emit("update:modelValue", value);
+		}
+	});
 </script>
 
 <style scoped>