style refactor and avatar component chages

src/components/bo_avatar/BoAvatar.vue

@@ -1,17 +1,60 @@
 <template>
-	<div class="bo-avatar"></div>
+	<div :class="['bo_avatar', containerClasses]">
+		<img
+			v-if="type === BoAvatarType.image"
+			:src="imageSrc"
+			:alt="imageAlt"
+			class="bo_avatar__image"
+		/>
+		<span
+			v-if="type === BoAvatarType.text"
+			:about="textAlt"
+			class="bo_avatar__initial"
+		>
+			{{ textValue }}
+		</span>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { ref, onBeforeMount, toRefs } from 'vue';
+import { onBeforeMount, toRefs, computed } from 'vue';
 import type { AvatarComponentProps } from './bo_avatar.types';
 import { BoSize } from '@/global';
+import { BoAvatarType } from './bo_avatar';
+import { StringUtils } from '@/utils';
 
 const props = withDefaults(defineProps<AvatarComponentProps>(), {
 	size: () => BoSize.default,
+	type: () => BoAvatarType.image,
 });
 
-const { size, text, image } = toRefs(props);
+const { size, type, text, image } = toRefs(props);
+
+const containerClasses = /*tw*/ 'flex items-center justify-center relative';
+
+const renderImage = computed<boolean>(() => {
+	return (
+		type.value === BoAvatarType.image &&
+		image.value?.src != null &&
+		!StringUtils.isEmpty(image.value?.src)
+	);
+});
+
+const imageSrc = computed<string>(() => {
+	return require(image.value?.src ?? '../../assets/svg/avatar.svg');
+});
+
+const imageAlt = computed<string>(() => {
+	return image.value?.alt ?? 'user-avatar';
+});
+
+const textValue = computed<string>(() => {
+	return text.value?.value ?? '';
+});
+
+const textAlt = computed<string>(() => {
+	return text.value?.alt ?? 'user-avatar';
+});
 
 const validateProps = (): void => {
 	if (text.value == null && image.value == null) {

src/components/bo_avatar/__stories__/bo_avatar.stories.ts

@@ -0,0 +1,87 @@
+import { BoAvatar, BoAvatarType } from '@/components/bo_avatar';
+import { BoSize } from '@/global';
+import { StorybookUtils } from '@/utils';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+const meta = {
+	title: 'Components/bo-avatar',
+	component: BoAvatar,
+	argTypes: {
+		size: {
+			description: 'The size of the avatar',
+			table: {
+				category: 'props',
+				subcategory: 'optional',
+				type: {
+					summary: 'BoSize',
+					detail: StorybookUtils.stringEnumFormatter(BoSize, 'BoSize'),
+				},
+			},
+			control: { type: 'select' },
+			options: Object.values(BoSize),
+		},
+		type: {
+			description: 'The type of the avatar',
+			table: {
+				category: 'props',
+				subcategory: 'optional',
+				type: {
+					summary: 'BoAvatarType',
+					detail: StorybookUtils.stringEnumFormatter(
+						BoAvatarType,
+						'BoAvatarType',
+					),
+				},
+			},
+			control: { type: 'select' },
+			options: Object.values(BoAvatarType),
+		},
+		text: {
+			description:
+				'Object containing the text to be displayed and the alt text',
+			table: {
+				category: 'props',
+				subcategory: 'optional',
+				type: {
+					summary: 'AvatarTextArgs',
+					detail: StorybookUtils.stringEnumFormatter(
+						BoAvatarType,
+						'AvatarTextArgs',
+					),
+				},
+			},
+			control: { type: 'object' },
+		},
+		image: {
+			description:
+				'Object containing the image to be displayed and the alt text',
+			table: {
+				category: 'props',
+				subcategory: 'optional',
+				type: {
+					summary: 'AvatarImageArgs',
+					detail: StorybookUtils.stringEnumFormatter(
+						BoAvatarType,
+						'AvatarImageArgs',
+					),
+				},
+			},
+			control: { type: 'object' },
+		},
+	},
+} satisfies Meta<typeof BoAvatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+	args: {
+		size: BoSize.default,
+		type: BoAvatarType.image,
+		image: {
+			src: '@/assets/avatar.svg',
+			alt: 'user-avatar',
+		},
+	},
+};

src/components/bo_avatar/bo_avatar.ts

@@ -7,3 +7,15 @@ export enum BoAvatarShape {
 	circle = 'circle',
 	square = 'square',
 }
+
+export enum BoAvatarSizeClasses {
+	small = /*tw*/ 'h-6 w-6',
+	default = /*tw*/ 'h-8 w-8',
+	large = /*tw*/ 'h-10 w-10',
+}
+
+export enum BoAvatarTextSizeClasses {
+	small = /*tw*/ 'text-small leading-small',
+	default = /*tw*/ 'text-default leading-default',
+	large = /*tw*/ 'text-large leading-large',
+}

src/components/bo_avatar/bo_avatar.types.ts

@@ -1,19 +1,22 @@
-import type { BoVariant } from '@/global';
+export enum BoAvatarType {
+	image = 'image',
+	text = 'text',
+}
 
 export type AvatarImageArgs = {
 	src: string;
 	alt?: string;
 };
 
 export type AvatarTextArgs = {
-	initial: string;
+	value: string;
 	alt?: string;
 	backgroundColor?: string;
 };
 
 export type AvatarComponentProps = {
 	size?: string;
+	type: BoAvatarType;
 	text?: AvatarTextArgs;
 	image?: AvatarImageArgs;
-	variant?: BoVariant;
 };

src/components/bo_badge/BoBadge.vue

@@ -33,7 +33,6 @@ import {
 	BoBadgeFilledColorClasses,
 	BoBadgeOutlineColorClasses,
 	BoBadgePaddingClasses,
-	BoBadgeShadowClasses,
 	BoBadgeShape,
 	BoBadgeSizeClasses,
 	BoBadgeTextSizeClasses,
@@ -88,7 +87,7 @@ const borderRadiusClasses = computed<string>(() => {
 });
 
 const shadowClasses = computed<string>(() => {
-	return BoBadgeShadowClasses[variant.value];
+	return /*tw*/ 'shadow-sm';
 });
 
 const fontSizeClasses = computed<string>(() => {

src/components/bo_badge/bo_badge.ts

@@ -48,37 +48,25 @@ export enum BoBadgeCircleSizeClasses {
 }
 
 export enum BoBadgeFilledColorClasses {
-	primary = /*tw*/ 'bg-blue-600  focus:ring-blue-600 text-white',
-	secondary = /*tw*/ 'bg-gray-600 focus:ring-gray-600 text-white',
-	danger = /*tw*/ 'bg-red-600  focus:ring-red-600 text-white',
-	warning = /*tw*/ 'bg-yellow-600  focus:ring-yellow-600 text-white',
-	success = /*tw*/ 'bg-green-600  focus:ring-green-600 text-white',
-	dark = /*tw*/ 'bg-black focus:ring-black text-white',
-	light = /*tw*/ 'bg-neutral-100 focus:ring-neutral-300 text-neutral-900',
+	primary = /*tw*/ 'bg-primary  focus:ring-primary text-white',
+	secondary = /*tw*/ 'bg-secondary  focus:ring-secondary text-neutral-600',
+	danger = /*tw*/ 'bg-danger  focus:ring-danger text-white',
+	warning = /*tw*/ 'bg-warning  focus:ring-warning text-white',
+	success = /*tw*/ 'bg-success  focus:ring-success text-white',
+	dark = /*tw*/ 'bg-dark  focus:ring-dark text-white',
+	light = /*tw*/ 'bg-light  focus:ring-light text-blue-500',
 	purple = /*tw*/ 'bg-purple-600  focus:ring-purple-600 text-white',
 	teal = /*tw*/ 'bg-teal-600  focus:ring-teal-600 text-white',
 }
 
 export enum BoBadgeOutlineColorClasses {
-	primary = /*tw*/ 'border border-blue-600  focus:ring-blue-600 text-blue-600',
-	secondary = /*tw*/ 'border border-gray-600  focus:ring-gray-600 text-gray-600',
-	danger = /*tw*/ 'border border-red-600  focus:ring-red-600 text-red-600',
-	warning = /*tw*/ 'border border-yellow-600  focus:ring-yellow-600 text-yellow-600',
-	success = /*tw*/ 'border border-green-600  focus:ring-green-600 text-green-600',
-	dark = /*tw*/ 'border border-black focus:ring-black text-black',
-	light = /*tw*/ 'border border-neutral-300 focus:ring-neutral-300 text-neutral-900',
-	purple = /*tw*/ 'border border-purple-600  focus:ring-purple-600 text-purple-600',
-	teal = /*tw*/ 'border border-teal-600  focus:ring-teal-600 text-teal-600',
-}
-
-export enum BoBadgeShadowClasses {
-	primary = /*tw*/ 'shadow-sm shadow-blue-600/10 dark:shadow-sm dark:shadow-blue-800/80',
-	secondary = /*tw*/ 'shadow-sm shadow-gray-600/10 dark:shadow-sm dark:shadow-gray-800/80',
-	danger = /*tw*/ 'shadow-sm shadow-red-600/10 dark:shadow-sm dark:shadow-red-800/80',
-	warning = /*tw*/ 'shadow-sm shadow-yellow-600/10 dark:shadow-sm dark:shadow-yellow-800/80',
-	success = /*tw*/ 'shadow-sm shadow-green-600/10 dark:shadow-sm dark:shadow-green-800/80',
-	dark = /*tw*/ 'shadow-sm shadow-black-600/10 dark:shadow-sm dark:shadow-black-800/80',
-	light = /*tw*/ 'shadow-sm shadow-neutral-900/10 dark:shadow-sm dark:shadow-neutral-900/80',
-	purple = /*tw*/ 'shadow-sm shadow-purple-600/10 dark:shadow-sm dark:shadow-purple-800/80',
-	teal = /*tw*/ 'shadow-sm shadow-teal-600/10 dark:shadow-sm dark:shadow-teal-800/80',
+	primary = /*tw*/ 'border border-primary  focus:ring-primary text-primary',
+	secondary = /*tw*/ 'border border-secondary  focus:ring-secondary text-secondary',
+	danger = /*tw*/ 'border border-danger  focus:ring-danger text-danger',
+	warning = /*tw*/ 'border border-warning  focus:ring-warning text-warning',
+	success = /*tw*/ 'border border-success  focus:ring-success text-success',
+	dark = /*tw*/ 'border border-dark  focus:ring-dark text-dark',
+	light = /*tw*/ 'border border-light  focus:ring-light text-blue-500',
+	purple = /*tw*/ 'border border-purple  focus:ring-purple text-purple',
+	teal = /*tw*/ 'border border-teal  focus:ring-teal text-teal',
 }

src/components/bo_badge/index.ts

@@ -4,7 +4,6 @@ export {
 	BoBadgeFilledColorClasses,
 	BoBadgeOutlineColorClasses,
 	BoBadgePaddingClasses,
-	BoBadgeShadowClasses,
 	BoBadgeShape,
 	BoBadgeSizeClasses,
 	BoBadgeTextSizeClasses,

src/global/bo_status.ts

@@ -0,0 +1,6 @@
+export enum BoStatus {
+	online = 'online',
+	busy = 'busy',
+	away = 'away',
+	offline = 'offline',
+}

src/global/index.ts

@@ -1,3 +1,4 @@
 export { BoColor } from './bo_color';
 export { BoSize } from './bo_size';
+export { BoStatus } from './bo_status';
 export { BoVariant } from './bo_variant';