+
+ ![avatar]()
+
+
+ ![]()
+
+
+
+
+
diff --git a/src/components/bo_avatar/__stories__/bo_avatar.mdx b/src/components/bo_avatar/__stories__/bo_avatar.mdx
new file mode 100644
index 00000000..ad71d51b
--- /dev/null
+++ b/src/components/bo_avatar/__stories__/bo_avatar.mdx
@@ -0,0 +1,108 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoAvatarStories from './bo_avatar.stories'
+
+
+
+# bo-avatar
+
+An avatar is a small image that represents a user or entity.
+
+## Basic usage
+
+The avatar component can be used to display an image or a text as an avatar.
+
+To use it with an image, you can use the `imageData` prop to set the image source.
+
+```html
+
+
+ `,
+ }),
+ args: {
+ type: BoAvatarType.image,
+ imageData: {
+ src: new URL('./img_avatar.png', import.meta.url).href,
+ alt: 'avatar',
+ },
+ },
+}
+
+export const Initials: Story = {
+ render: (args) => ({
+ components: { BoAvatar },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ type: BoAvatarType.initials,
+ initialsData: {
+ initials: 'BO',
+ },
+ },
+}
+
+export const Sizes: Story = {
+ render: (args) => ({
+ components: { BoAvatar },
+ setup() {
+ const sizes = Object.values(BoSize)
+ return { sizes, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ type: BoAvatarType.initials,
+ initialsData: {
+ initials: 'BO',
+ },
+ },
+}
+
+export const Shapes: Story = {
+ render: (args) => ({
+ components: { BoAvatar },
+ setup() {
+ const shapes = Object.values(BoAvatarShape)
+ return { shapes, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ type: BoAvatarType.initials,
+ initialsData: {
+ initials: 'BO',
+ },
+ },
+}
+
+export const Clickable: Story = {
+ render: (args) => ({
+ components: { BoAvatar },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ type: BoAvatarType.initials,
+ initialsData: {
+ initials: 'BO',
+ },
+ clickable: true,
+ },
+}
+
+export const WithDefaultImage: Story = {
+ render: (args) => ({
+ components: { BoAvatar },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ withDefaultImage: true,
+ },
+}
diff --git a/src/components/bo_avatar/__stories__/img_avatar.png b/src/components/bo_avatar/__stories__/img_avatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b8318559062626e0f4ffe02a52004d0f32d421c
GIT binary patch
literal 8229
zcmXY0dpuMB|F00;s3gh#Udd%{Ywq_;m?W26a~;WT!y0qHg^ZEQX6{Mkl2XjIlD5?*
zLc$Q%@F{%SNR#*-pYQLFoxNYr_w)I>o%cEK_v3N0u0btN96f*Zz<~oNtgXzhA2@K3
z4g6SqTmVAOouC7MB2nh9QI6q(QAi(nzyV|baNhta>rfw9!1Vwhe^ewTKo3wPU9-Jm
zt`V9t{H)M80dHkxWsz2M^?r-m?Sv8Xh*?s(Rz$i{JkBt#`1$jvik^`fnHiP=2&;^`
zt2s>uu|-$2pIkv?e|$V-kx{3ID%@p$w9KrxOn+#eR;wTTpgJeU$;rtyxk4u<&pNw_
z@p%yvm1}dqxe3-784(_pnWi0i&)nJ5+}!-CchK&?i;$ZE3xjp$QQ0bP!GGyJPa8|X
z4sH$(4nN=5>LT-PZEX$WiVMq1LklW82q~7SRc6*UBfYimS!GpqH5Q@qwyF5PpB~$1
zR+`vdx6N&JaQEKZ+p|c(KXk2ebh&AD@39dw&m@Upoz-BTQe~c6ZJbzU6qRF^Qe~Q4
zZkAeYb+6tCU7~jvs}r4TfGV`gYSg`pHAy6xB$ZobHCSgi>O^CV6L8k|9-AhWL!$0?
zr4Uz`D;V@0Hk-}tt+?jof(Y{T^78&W-s0ixaLvw!v%z8i!`|KDz`R{{fB!U&Nb`tI
zxDtiA4Gp$REVGDvP~e134oh;p>d1e2&g;Md30-S5;~RIUe$0IL6C}kP_!m@jx=sIV
z^rF#gullYR_a2@T@$;Uzpnf6y_MpdORNb}f@bFRh$y
-
+
+
`,
}),
args: {
label: 'Badge',
},
-};
+}
+
+export const SizesWithIcons: Story = {
+ render: (args) => ({
+ components: { BoBadge },
+ setup() {
+ const sizes = Object.values(BoSize)
+ return { sizes, ...args }
+ },
+ template: `
+
+
+
+
+
+
+ `,
+ }),
+ args: {
+ label: 'Badge',
+ prefixIcon: Icon.alert_circle,
+ suffixIcon: Icon.alert_circle,
+ },
+}
export const Variants: Story = {
render: () => ({
components: { BoBadge },
template: `
-
-
+
`,
}),
args: {
label: 'Badge',
},
-};
+}
export const Shapes: Story = {
render: () => ({
components: { BoBadge },
template: `
-
-
+
`,
}),
args: {
label: 'Badge',
},
-};
+}
export const Types: Story = {
render: () => ({
components: { BoBadge },
template: `
-
-
+
`,
}),
args: {
label: 'Badge',
},
-};
+}
export const Icons: Story = {
render: () => ({
components: { BoBadge },
template: `
-
-
+
`,
}),
args: {
label: 'Badge',
},
-};
+}
export const IconOnly: Story = {
- render: () => ({
+ render: (args) => ({
components: { BoBadge },
+ setup() {
+ const sizes = Object.values(BoSize)
+
+ return { ...args, sizes }
+ },
template: `
-
- ;
+let wrapper: ReturnType
beforeEach(() => {
wrapper = mount(BoBadge, {
props: {
label: 'Label',
+ icon: Icon.none,
variant: BoBadgeVariant.primary,
type: BoBadgeType.default,
},
- });
-});
+ })
+})
describe('bo_badge.vue', () => {
- test('should match snapshot', () => {
- expect(true).toBeTruthy();
- });
-
- test('should render the badge', () => {
- expect(wrapper.find('span')).toBeTruthy();
- });
-
- test('should have the default size', () => {
- expect(wrapper.find('w-6')).toBeTruthy();
- expect(wrapper.find('h-6')).toBeTruthy();
- });
-
- test('should have the default type', () => {
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the size', async () => {
- await wrapper.setProps({ size: BoSize.large });
- expect(wrapper.find('w-8')).toBeTruthy();
- expect(wrapper.find('h-8')).toBeTruthy();
- });
-
- test('should be able to change the type', async () => {
- await wrapper.setProps({ type: BoSize.large });
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the variant', async () => {
- await wrapper.setProps({ variant: BoBadgeVariant.secondary });
- expect(wrapper.find('bg-gray-600')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-});
+ test('the badge should be rendered', () => {
+ expect(wrapper.find('span')).toBeTruthy()
+ })
+
+ test('the badge container should have the default classes', () => {
+ expect(wrapper.find('.bo-badge').classes()).contains('flex')
+ expect(wrapper.find('.bo-badge').classes()).contains('items-center')
+ expect(wrapper.find('.bo-badge').classes()).contains('justify-center')
+ expect(wrapper.find('.bo-badge').classes()).contains('select-none')
+ expect(wrapper.find('.bo-badge').classes()).contains('font-bold')
+ expect(wrapper.find('.bo-badge').classes()).contains('font-graphik')
+ expect(wrapper.find('.bo-badge').classes()).contains('gap-2')
+ expect(wrapper.find('.bo-badge').classes()).contains('max-w-fit')
+ })
+
+ test('the badge should render the label', () => {
+ expect(wrapper.findComponent(BoText).exists()).toBe(true)
+ })
+
+ suite('badge types', () => {
+ test('the badge should have the default type', async () => {
+ await wrapper.setProps({ type: BoBadgeType.default })
+ expect(wrapper.find('bg-blue-500')).toBeTruthy()
+ })
+
+ test('the badge should support outline type', async () => {
+ await wrapper.setProps({ type: BoBadgeType.outline })
+ expect(wrapper.find('border')).toBeTruthy()
+ })
+ })
+
+ suite('badge sizes', () => {
+ test('the badge should have the default size', () => {
+ expect(wrapper.find('w-6')).toBeTruthy()
+ expect(wrapper.find('h-6')).toBeTruthy()
+ })
+
+ test('the badge should support extra small size', () => {
+ expect(wrapper.find('w-4')).toBeTruthy()
+ expect(wrapper.find('h-4')).toBeTruthy()
+ })
+
+ test('the badge should support small size', () => {
+ expect(wrapper.find('w-8')).toBeTruthy()
+ expect(wrapper.find('h-8')).toBeTruthy()
+ })
+
+ test('the badge should support large size', () => {
+ expect(wrapper.find('w-12')).toBeTruthy()
+ expect(wrapper.find('h-12')).toBeTruthy()
+ })
+
+ test('the badge should support extra large size', () => {
+ expect(wrapper.find('w-16')).toBeTruthy()
+ expect(wrapper.find('h-16')).toBeTruthy()
+ })
+ })
+
+ suite('badge shapes', () => {
+ test('the badge should have the default shape', () => {
+ expect(wrapper.find('rounded-lg')).toBeTruthy()
+ })
+
+ test('the badge should support circle shape', async () => {
+ await wrapper.setProps({ shape: BoBadgeShape.circle })
+ expect(wrapper.find('rounded-full')).toBeTruthy()
+ })
+
+ test('the badge should support pill shape', async () => {
+ await wrapper.setProps({ shape: BoBadgeShape.pill })
+ expect(wrapper.find('rounded-full')).toBeTruthy()
+ })
+
+ test('the badge should support flat shape', async () => {
+ await wrapper.setProps({ shape: BoBadgeShape.flat })
+ expect(wrapper.find('rounded-none')).toBeTruthy()
+ })
+ })
+
+ suite('badge variants', () => {
+ test('the badge should have the default variant', () => {
+ expect(wrapper.find('bg-blue-500')).toBeTruthy()
+ })
+
+ test('the badge should support primary variant', () => {
+ expect(wrapper.find('bg-blue-600')).toBeTruthy()
+ })
+
+ test('the badge should support secondary variant', () => {
+ expect(wrapper.find('bg-gray-600')).toBeTruthy()
+ })
+
+ test('the badge should support danger variant', () => {
+ expect(wrapper.find('bg-red-600')).toBeTruthy()
+ })
+
+ test('the badge should support warning variant', () => {
+ expect(wrapper.find('bg-yellow-600')).toBeTruthy()
+ })
+
+ test('the badge should support success variant', () => {
+ expect(wrapper.find('bg-green-600')).toBeTruthy()
+ })
+
+ test('the badge should support dark variant', () => {
+ expect(wrapper.find('bg-black')).toBeTruthy()
+ })
+ })
+
+ suite('badge icons', () => {
+ test('the badge should not have any default icon', () => {
+ const icon = wrapper.findComponent(BoIcon)
+ expect(icon.exists()).toBe(false)
+ })
+
+ test('the badge should be able to display a prefix icon', async () => {
+ await wrapper.setProps({ prefixIcon: Icon.activity })
+ expect(wrapper.findComponent(BoIcon).exists()).toBe(true)
+ })
+
+ test('the badge should be able to display a suffix icon', async () => {
+ await wrapper.setProps({ suffixIcon: Icon.activity })
+ expect(wrapper.findComponent(BoIcon).exists()).toBe(true)
+ })
+
+ test('the badge should be able to display both prefix and suffix icons', async () => {
+ await wrapper.setProps({
+ prefixIcon: Icon.activity,
+ suffixIcon: Icon.airplay,
+ })
+ expect(wrapper.findComponent(BoIcon).exists()).toBe(true)
+ })
+ })
+})
diff --git a/src/components/bo_badge/bo_badge.ts b/src/components/bo_badge/bo_badge.ts
deleted file mode 100644
index 9efadb39..00000000
--- a/src/components/bo_badge/bo_badge.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-export enum BoBadgeType {
- default = 'default',
- outline = 'outline',
-}
-
-export enum BoBadgeShape {
- pill = 'pill',
- default = 'default',
- flat = 'flat',
-}
-
-export enum BoBadgeVariant {
- primary = 'primary',
- secondary = 'secondary',
- danger = 'danger',
- warning = 'warning',
- success = 'success',
- dark = 'dark',
- purple = 'purple',
- teal = 'teal',
-}
-
-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',
- 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',
- 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 BoBadgeBorderRadiusClasses {
- pill = /*tw*/ 'rounded-full',
- default = /*tw*/ 'rounded-lg',
- flat = /*tw*/ 'rounded-none',
-}
-
-export enum BoBadgePaddingClasses {
- small = /*tw*/ 'px-2.5',
- default = /*tw*/ 'px-3',
- large = /*tw*/ 'px-3.5',
-}
-
-export enum BoBadgeTextSizeClasses {
- small = /*tw*/ 'text-small leading-small',
- default = /*tw*/ 'text-default leading-default',
- large = /*tw*/ 'text-large leading-large',
-}
-
-export enum BoBadgeSizeClasses {
- small = /*tw*/ 'h-4 w-fit',
- default = /*tw*/ 'h-6 w-fit',
- large = /*tw*/ 'h-8 w-fit',
-}
-
-export enum BoBadgeShadowClasses {
- primary = /*tw*/ 'shadow-sm shadow-blue-500/50 dark:shadow-sm dark:shadow-blue-800/80',
- secondary = /*tw*/ 'shadow-sm shadow-gray-500/50 dark:shadow-sm dark:shadow-gray-800/80',
- danger = /*tw*/ 'shadow-sm shadow-red-500/50 dark:shadow-sm dark:shadow-red-800/80',
- warning = /*tw*/ 'shadow-sm shadow-yellow-500/50 dark:shadow-sm dark:shadow-yellow-800/80',
- success = /*tw*/ 'shadow-sm shadow-green-500/50 dark:shadow-sm dark:shadow-green-800/80',
- dark = /*tw*/ 'shadow-sm shadow-black-500/50 dark:shadow-sm dark:shadow-black-800/80',
- purple = /*tw*/ 'shadow-sm shadow-purple-500/50 dark:shadow-sm dark:shadow-purple-800/80',
- teal = /*tw*/ 'shadow-sm shadow-teal-500/50 dark:shadow-sm dark:shadow-teal-800/80',
-}
diff --git a/src/components/bo_badge/constants.ts b/src/components/bo_badge/constants.ts
new file mode 100644
index 00000000..9da38dfc
--- /dev/null
+++ b/src/components/bo_badge/constants.ts
@@ -0,0 +1,20 @@
+export enum BoBadgeVariant {
+ primary = 'primary',
+ secondary = 'secondary',
+ danger = 'danger',
+ warning = 'warning',
+ success = 'success',
+ dark = 'dark',
+}
+
+export enum BoBadgeType {
+ default = 'default',
+ outline = 'outline',
+}
+
+export enum BoBadgeShape {
+ pill = 'pill',
+ default = 'default',
+ flat = 'flat',
+ circle = 'circle',
+}
diff --git a/src/components/bo_badge/index.ts b/src/components/bo_badge/index.ts
index 4e2fe45b..c05a6f1a 100644
--- a/src/components/bo_badge/index.ts
+++ b/src/components/bo_badge/index.ts
@@ -1,13 +1,3 @@
-export { default as BoBadge } from './BoBadge.vue';
-export {
- BoBadgeBorderRadiusClasses,
- BoBadgeFilledColorClasses,
- BoBadgeOutlineColorClasses,
- BoBadgePaddingClasses,
- BoBadgeShadowClasses,
- BoBadgeShape,
- BoBadgeSizeClasses,
- BoBadgeTextSizeClasses,
- BoBadgeType,
- BoBadgeVariant,
-} from './bo_badge';
+export { default as BoBadge } from './BoBadge.vue'
+export * from './constants'
+export * from './types'
diff --git a/src/components/bo_badge/types.ts b/src/components/bo_badge/types.ts
new file mode 100644
index 00000000..542688ad
--- /dev/null
+++ b/src/components/bo_badge/types.ts
@@ -0,0 +1,13 @@
+import type { Icon } from '@/components/bo_icon'
+import type { BoSize } from '@/data/bo_size.constant'
+import type { BoBadgeShape, BoBadgeType, BoBadgeVariant } from './constants'
+
+export type BoBadgeProps = {
+ label?: string
+ type?: BoBadgeType
+ size?: BoSize
+ shape?: BoBadgeShape
+ variant?: BoBadgeVariant
+ prefixIcon?: Icon
+ suffixIcon?: Icon
+}
diff --git a/src/components/bo_button/BoButton.vue b/src/components/bo_button/BoButton.vue
index 5a65e0bd..55d82887 100644
--- a/src/components/bo_button/BoButton.vue
+++ b/src/components/bo_button/BoButton.vue
@@ -1,223 +1,322 @@
diff --git a/src/components/bo_button/__stories__/bo_button.mdx b/src/components/bo_button/__stories__/bo_button.mdx
index ee69033f..645eec21 100644
--- a/src/components/bo_button/__stories__/bo_button.mdx
+++ b/src/components/bo_button/__stories__/bo_button.mdx
@@ -1,9 +1,9 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as BoButtonStories from './bo_button.stories';
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoButtonStories from './bo_button.stories.ts'
# bo-button
@@ -18,25 +18,46 @@ A button is a control that allows the user to perform an action.
## Props
-- `label` - The label of the button (required)
+- `label` - The label of the button (optional)
+ - either `label` or `prefixIcon` or `suffixIcon` must be provided
- `variant` - The variant of the button (optional)
- default: `BoButtonVariant.primary`
+- `shape` - The shape of the button (optional)
+ - default: `BoButtonShape.default`
- `type` - The type of the button (optional)
- - default: `BoButtonType.default`
+ - default: `button`
- `disabled` - Whether the button is disabled (optional)
- default: `false`
+- `isLoading` - Whether the button is loading (optional)
+ - default: `false`
- `size` - The size of the button (optional)
- default: `BoSize.default`
+- `linkVariantWithShadow` - Whether the button should have a shadow when it is a link (optional)
+ - default: `false`
- `prefixIcon` - The icon to be displayed before the label (optional)
- default: `Icon.none`
+ - either `label` or `prefixIcon` or `suffixIcon` must be provided
- `suffixIcon` - The icon to be displayed after the label (optional)
- default: `Icon.none`
+ - either `label` or `prefixIcon` or `suffixIcon` must be provided
## Examples
;
+}
-export default meta;
-type Story = StoryObj;
+export default meta
+type Story = StoryObj
export const Example: Story = {
args: {
label: 'Label',
variant: BoButtonVariant.primary,
- type: BoButtonType.default,
- disabled: false,
+ type: HtmlButtonType.button,
size: BoSize.default,
},
-};
+}
export const Disabled: Story = {
args: {
label: 'Label',
disabled: true,
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
+ size: BoSize.default,
},
-};
+}
+
+export const isLoading: Story = {
+ args: {
+ label: 'Label',
+ isLoading: true,
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
+ size: BoSize.default,
+ },
+}
export const Sizes: Story = {
- render: () => ({
+ render: (args) => ({
components: { BoButton },
+ setup() {
+ const sizes = Object.values(BoSize)
+ return { sizes, ...args }
+ },
template: `
-
+
+
+
`,
}),
- args: {},
-};
+ args: {
+ prefixIcon: Icon.alert_circle,
+ type: BoBadgeType.default,
+ },
+}
diff --git a/src/components/bo_badge/__tests__/bo_badge.test.ts b/src/components/bo_badge/__tests__/bo_badge.test.ts
index c88cc87c..cd04b69c 100644
--- a/src/components/bo_badge/__tests__/bo_badge.test.ts
+++ b/src/components/bo_badge/__tests__/bo_badge.test.ts
@@ -1,54 +1,159 @@
-import { BoSize } from '@/global';
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, test } from 'vitest';
-import { BoBadge, BoBadgeType, BoBadgeVariant } from '..';
+import {
+ BoBadge,
+ BoBadgeShape,
+ BoBadgeType,
+ BoBadgeVariant,
+} from '@/components/bo_badge'
+import { BoIcon, Icon } from '@/components/bo_icon'
+import BoText from '@/components/bo_text/BoText.vue'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, suite, test } from 'vitest'
-let wrapper: ReturnType
-
+
+
`,
}),
args: {
label: 'Label',
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
},
-};
+}
-export const Types: Story = {
- render: () => ({
+export const Shapes: Story = {
+ render: (args) => ({
components: { BoButton },
+ setup() {
+ const shapes = Object.values(BoButtonShape)
+ return { shapes, ...args }
+ },
template: `
-
-
+
+
`,
}),
args: {
label: 'Label',
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
},
-};
+}
export const Variants: Story = {
- render: () => ({
+ render: (args) => ({
+ components: { BoButton },
+ setup() {
+ const variants = Object.values(BoButtonVariant)
+ return { variants, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ label: 'Label',
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
+ },
+}
+
+export const ShapesAndVariants: Story = {
+ render: (args) => ({
components: { BoButton },
+ setup() {
+ const shapes = Object.values(BoButtonShape)
+ const variants = Object.values(BoButtonVariant)
+ return { shapes, variants, ...args }
+ },
template: `
-
-
+
+beforeEach(() => {
+ globalWrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ variant: BoButtonVariant.primary,
+ },
+ })
+})
+
+describe('bo_button.vue', () => {
+ test('the button should render properly', () => {
+ expect(globalWrapper).toBeTruthy()
+ })
+
+ test('the container should have the correct default classes', () => {
+ expect(globalWrapper.classes()).toContain('bo-button')
+ expect(globalWrapper.classes()).toContain('inline-flex')
+ expect(globalWrapper.classes()).toContain('items-center')
+ expect(globalWrapper.classes()).toContain('justify-center')
+ expect(globalWrapper.classes()).toContain('cursor-pointer')
+ })
+
+ test('the button should render the label', () => {
+ expect(globalWrapper.findComponent(BoText).text()).toBe('Label')
+ })
+
+ suite('when the button is disabled', () => {
+ test('the button should have the disabled class', async () => {
+ await globalWrapper.setProps({ disabled: true })
+
+ expect(globalWrapper.classes()).toContain('disabled:opacity-50')
+ expect(globalWrapper.classes()).toContain('disabled:cursor-not-allowed')
+ })
+
+ test('the button should not be clickable', async () => {
+ await globalWrapper.setProps({ disabled: true })
+ expect(globalWrapper.classes()).toContain('disabled:pointer-events-none')
+ })
+ })
+
+ suite('loading state', () => {
+ test('the loading spinner should be rendered', async () => {
+ await globalWrapper.setProps({ isLoading: true })
+ expect(globalWrapper.findAllComponents(BoLoadingSpinner)).toHaveLength(1)
+ })
+
+ test('the spinner should be hidden if the button is not loading', async () => {
+ await globalWrapper.setProps({ isLoading: false })
+ expect(globalWrapper.find('bo-loading-spinner').exists()).toBe(false)
+ })
+ })
+
+ suite('icon button', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ variant: BoButtonVariant.primary,
+ prefixIcon: Icon.activity,
+ },
+ })
+ })
+
+ test('the button should render the icon properly', () => {
+ expect(wrapper.findComponent(BoIcon)).toBeTruthy()
+ })
+
+ test('the button should have the correct icon size', () => {
+ expect(wrapper.findComponent(BoIcon).props('size')).toBe(BoSize.default)
+ })
+
+ test('the button should have the correct icon color', () => {
+ expect(wrapper.findComponent(BoIcon).props('color')).toBe('currentColor')
+ })
+
+ test('the label should be hidden if the button is an icon button', async () => {
+ await wrapper.setProps({ label: null })
+ expect(wrapper.find('.bo-button__label').exists()).toBe(false)
+ })
+ })
+
+ suite('button with prefix icon', () => {
+ test('the button should render the prefix icon properly', () => {
+ expect(globalWrapper.findComponent(BoIcon)).toBeTruthy()
+ })
+ })
+
+ suite('button with suffix icon', () => {
+ test('the button should render the suffix icon properly', () => {
+ expect(globalWrapper.findComponent(BoIcon)).toBeTruthy()
+ })
+ })
+
+ suite('button variants', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ variant: BoButtonVariant.primary,
+ },
+ })
+ })
+
+ test('primary button should have the correct color | background | focus classes', () => {
+ expect(wrapper.classes()).toContain('bg-blue-600')
+ expect(wrapper.classes()).toContain('hover:bg-blue-700')
+ expect(wrapper.classes()).toContain('focus:ring-blue-600')
+ expect(wrapper.classes()).toContain('text-white')
+ })
+
+ test('secondary button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.secondary })
+ expect(wrapper.classes()).toContain('bg-gray-400')
+ expect(wrapper.classes()).toContain('hover:bg-gray-700')
+ expect(wrapper.classes()).toContain('focus:ring-gray-400')
+ expect(wrapper.classes()).toContain('text-white')
+ })
+
+ test('danger button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.danger })
+ expect(wrapper.classes()).toContain('bg-red-600')
+ expect(wrapper.classes()).toContain('hover:bg-red-700')
+ expect(wrapper.classes()).toContain('focus:ring-red-600')
+ expect(wrapper.classes()).toContain('text-white')
+ })
+
+ test('warning button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.warning })
+ expect(wrapper.classes()).toContain('bg-yellow-500')
+ expect(wrapper.classes()).toContain('hover:bg-yellow-700')
+ expect(wrapper.classes()).toContain('focus:ring-yellow-500')
+ expect(wrapper.classes()).toContain('text-white')
+ })
+
+ test('success button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.success })
+ expect(wrapper.classes()).toContain('bg-green-600')
+ expect(wrapper.classes()).toContain('hover:bg-green-700')
+ expect(wrapper.classes()).toContain('focus:ring-green-600')
+ expect(wrapper.classes()).toContain('text-white')
+ })
+
+ test('dark button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.dark })
+ expect(wrapper.classes()).toContain('bg-black')
+ expect(wrapper.classes()).toContain('hover:bg-black/50')
+ expect(wrapper.classes()).toContain('focus:ring-black')
+ expect(wrapper.classes()).toContain('text-white')
+ })
+
+ test('link button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.link })
+ expect(wrapper.classes()).toContain('bg-transparent')
+ expect(wrapper.classes()).toContain('hover:bg-transparent')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ expect(wrapper.classes()).toContain('text-blue-600')
+ expect(wrapper.classes()).toContain('hover:text-blue-700')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ })
+
+ test('link-secondary button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.link_secondary })
+ expect(wrapper.classes()).toContain('bg-transparent')
+ expect(wrapper.classes()).toContain('hover:bg-transparent')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ expect(wrapper.classes()).toContain('text-gray-600')
+ expect(wrapper.classes()).toContain('hover:text-gray-700')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ })
+
+ test('link-danger button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.link_danger })
+ expect(wrapper.classes()).toContain('bg-transparent')
+ expect(wrapper.classes()).toContain('hover:bg-transparent')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ expect(wrapper.classes()).toContain('text-red-600')
+ expect(wrapper.classes()).toContain('hover:text-red-700')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ })
+
+ test('link-warning button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.link_warning })
+ expect(wrapper.classes()).toContain('bg-transparent')
+ expect(wrapper.classes()).toContain('hover:bg-transparent')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ expect(wrapper.classes()).toContain('text-yellow-500')
+ expect(wrapper.classes()).toContain('hover:text-yellow-700')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ })
+
+ test('link-success button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.link_success })
+ expect(wrapper.classes()).toContain('bg-transparent')
+ expect(wrapper.classes()).toContain('hover:bg-transparent')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ expect(wrapper.classes()).toContain('text-green-600')
+ expect(wrapper.classes()).toContain('hover:text-green-700')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ })
+
+ test('link-dark button should have the correct color | background | focus classes', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.link_dark })
+ expect(wrapper.classes()).toContain('bg-transparent')
+ expect(wrapper.classes()).toContain('hover:bg-transparent')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ expect(wrapper.classes()).toContain('text-black')
+ expect(wrapper.classes()).toContain('hover:text-black/50')
+ expect(wrapper.classes()).toContain('focus:ring-transparent')
+ })
+ })
+
+ suite('button sizes', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ variant: BoButtonVariant.primary,
+ },
+ })
+ })
+
+ test('the button should have the correct default size classes', () => {
+ expect(wrapper.classes()).toContain('h-[40px]')
+ expect(wrapper.classes()).toContain('px-[24px]')
+ })
+
+ test('the button should have the correct size classes if a the size is extra small', async () => {
+ await wrapper.setProps({ size: BoSize.extra_small })
+ expect(wrapper.classes()).toContain('h-[24px]')
+ expect(wrapper.classes()).toContain('px-[8px]')
+ })
+
+ test('the button should have the correct size classes if a the size is small', async () => {
+ await wrapper.setProps({ size: BoSize.small })
+ expect(wrapper.classes()).toContain('h-[32px]')
+ expect(wrapper.classes()).toContain('px-[16px]')
+ })
+
+ test('the button should have the correct size classes if a the size is default', async () => {
+ await wrapper.setProps({ size: BoSize.default })
+ expect(wrapper.classes()).toContain('h-[40px]')
+ expect(wrapper.classes()).toContain('px-[24px]')
+ })
+
+ test('the button should have the correct size classes if a the size is large', async () => {
+ await wrapper.setProps({ size: BoSize.large })
+ expect(wrapper.classes()).toContain('h-[48px]')
+ expect(wrapper.classes()).toContain('px-[32px]')
+ })
+
+ test('the button should have the correct size classes if a the size is extra large', async () => {
+ await wrapper.setProps({ size: BoSize.extra_large })
+ expect(wrapper.classes()).toContain('h-[56px]')
+ expect(wrapper.classes()).toContain('px-[40px]')
+ })
+ })
+
+ suite('button shapes', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ shape: BoButtonShape.default,
+ variant: BoButtonVariant.primary,
+ },
+ })
+ })
+
+ test('default button should have the correct border radius classes', () => {
+ expect(wrapper.classes()).toContain('rounded-lg')
+ })
+
+ test('pill button should have the correct border radius classes', async () => {
+ await wrapper.setProps({ shape: BoButtonShape.pill })
+ expect(wrapper.classes()).toContain('rounded-full')
+ })
+
+ test('outline button should have the correct border radius classes', async () => {
+ await wrapper.setProps({ shape: BoButtonShape.outline })
+ expect(wrapper.classes()).toContain('rounded-lg')
+ })
+ })
+
+ suite('button shadows', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ variant: BoButtonVariant.primary,
+ },
+ })
+ })
+
+ test('default button should have the correct shadow classes', () => {
+ expect(wrapper.classes()).toContain('shadow-md')
+ })
+
+ test('the button should have the correct shadow classes', () => {
+ expect(wrapper.classes()).toContain('shadow-md')
+ })
+
+ test('by default the link types buttton should not have a shadow', async () => {
+ await wrapper.setProps({ variant: BoButtonVariant.link })
+ expect(wrapper.classes()).toContain('shadow-none')
+ })
+
+ test('if the prop is set to true the link types buttton should have a shadow', async () => {
+ await wrapper.setProps({ linkVariantWithShadow: true })
+ expect(wrapper.classes()).toContain('shadow-md')
+ })
+ })
+
+ suite('button loader variants', () => {
+ suite('outline button', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ isLoading: true,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ shape: BoButtonShape.outline,
+ variant: BoButtonVariant.primary,
+ },
+ })
+ })
+
+ test('the button should have the correct default loader if no other loader is provided', () => {
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.primary)
+ })
+
+ test('the button should have the correct loader if a different loader is provided', () => {
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.primary)
+ })
+
+ test('the button should be able to render a blue primary loader', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.primary })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.primary)
+ })
+
+ test('the button should be able to render a gray secondary loader', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.secondary })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.secondary)
+ })
+
+ test('the button should be able to render a red danger loader', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.danger })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.danger)
+ })
+
+ test('the button should be able to render a yellow warning loader', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.warning })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.warning)
+ })
+
+ test('the button should be able to render a green success loader', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.success })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.success)
+ })
+
+ test('the button should be able to render a dark dark loader', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.dark })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.dark)
+ })
+ })
+
+ suite('pill button', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ isLoading: true,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ shape: BoButtonShape.pill,
+ variant: BoButtonVariant.primary,
+ },
+ })
+ })
+
+ test('the button should render a white loader with the default button variant', () => {
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.white)
+ })
+
+ test('the button should render a white loader with the primary button variant', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.primary })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.white)
+ })
+
+ test('the button should render a white loader with the secondary button variant', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.secondary })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.white)
+ })
+
+ test('the button should render a white loader with the danger button variant', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.danger })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.white)
+ })
+
+ test('the button should render a white loader with the warning button variant', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.warning })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.white)
+ })
+
+ test('the button should render a white loader with the success button variant', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.success })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.white)
+ })
+
+ test('the button should render a white loader with the dark button variant', async () => {
+ await wrapper.setProps({ variant: BoLoaderVariant.dark })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('variant')).toBe(BoLoaderVariant.white)
+ })
+ })
+ })
+
+ suite('loader size', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoButton, {
+ props: {
+ label: 'Label',
+ disabled: false,
+ isLoading: true,
+ size: BoSize.default,
+ type: HtmlButtonType.button,
+ shape: BoButtonShape.outline,
+ variant: BoButtonVariant.primary,
+ },
+ })
+ })
+
+ test('the button should have the correct default loader size', () => {
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('size')).toBe(BoSize.default)
+ })
+
+ test('the button should have the correct loader size if a different size is provided', async () => {
+ await wrapper.setProps({ size: BoSize.small })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('size')).toBe(BoSize.small)
+ })
+
+ test('the button should be able to render a large loader', async () => {
+ await wrapper.setProps({ size: BoSize.large })
+ const loader = wrapper.findComponent(BoLoadingSpinner)
+ expect(loader.props('size')).toBe(BoSize.default)
+ })
+ })
+})
diff --git a/src/components/bo_button/__tests__/__snapshots__/bo_button.test.ts.snap b/src/components/bo_button/__tests__/__snapshots__/bo_button.test.ts.snap
deleted file mode 100644
index 1d8c5057..00000000
--- a/src/components/bo_button/__tests__/__snapshots__/bo_button.test.ts.snap
+++ /dev/null
@@ -1,8 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`bo_button.vue > should match snapshot 1`] = `
-""
-`;
diff --git a/src/components/bo_button/__tests__/bo_button.test.ts b/src/components/bo_button/__tests__/bo_button.test.ts
deleted file mode 100644
index f993aca0..00000000
--- a/src/components/bo_button/__tests__/bo_button.test.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Icon } from '@/components/bo_icon';
-import { BoSize } from '@/global';
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, test } from 'vitest';
-import {
- BoButton,
- BoButtonBorderRadiusClasses,
- BoButtonFilledColorClasses,
- BoButtonType,
- BoButtonVariant,
-} from '..';
-
-let wrapper: ReturnType;
-
-beforeEach(() => {
- wrapper = mount(BoButton, {
- props: {
- label: 'Label',
- variant: BoButtonVariant.primary,
- type: BoButtonType.default,
- disabled: false,
- size: BoSize.default,
- },
- });
-});
-
-describe('bo_button.vue', () => {
- test('should match snapshot', () => {
- expect(wrapper.html()).toMatchSnapshot();
- });
-
- test('should render the button', () => {
- expect(wrapper.find('button')).toBeTruthy();
- });
-
- test('should have the default size', () => {
- expect(wrapper.find('w-6')).toBeTruthy();
- expect(wrapper.find('h-6')).toBeTruthy();
- });
-
- test('should have the default type', () => {
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the size', async () => {
- await wrapper.setProps({ size: BoSize.large });
- expect(wrapper.find('w-8')).toBeTruthy();
- expect(wrapper.find('h-8')).toBeTruthy();
- });
-
- test('should be able to change the type', async () => {
- await wrapper.setProps({ type: BoSize.large });
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the color', async () => {
- await wrapper.setProps({ color: '#000000' });
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the variant', async () => {
- await wrapper.setProps({ variant: BoButtonVariant.secondary });
- expect(wrapper.find('bg-gray-600')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the type', async () => {
- await wrapper.setProps({ type: BoButtonType.pill });
- expect(wrapper.find('bg-blue-600')).toBeTruthy();
- expect(wrapper.find('rounded-full')).toBeTruthy();
- });
-
- test('should be able to change the disabled', async () => {
- await wrapper.setProps({ disabled: true });
- expect(wrapper.find('disabled')).toBeTruthy();
- });
-
- test('should be able to change the prefix icon', async () => {
- await wrapper.setProps({ prefixIcon: Icon.alert_circle });
- expect(wrapper.find('svg')).toBeTruthy();
- });
-
- test('should be able to change the suffix icon', async () => {
- await wrapper.setProps({ suffixIcon: Icon.alert_circle });
- expect(wrapper.find('svg')).toBeTruthy();
- });
-
- test('should be able to change the border radius', async () => {
- await wrapper.setProps({ borderRadius: BoButtonBorderRadiusClasses.pill });
- expect(wrapper.find('rounded-full')).toBeTruthy();
- });
-
- test('should be able to change the fill color', async () => {
- await wrapper.setProps({ fillColor: BoButtonFilledColorClasses.primary });
- expect(wrapper.classes().join(' ')).includes(
- 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-600 text-white',
- );
- });
-});
diff --git a/src/components/bo_button/bo_button.ts b/src/components/bo_button/bo_button.ts
deleted file mode 100644
index 9ae48e7d..00000000
--- a/src/components/bo_button/bo_button.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-export enum BoButtonType {
- default = 'default',
- pill = 'pill',
- outline = 'outline',
-}
-
-export enum BoButtonVariant {
- primary = 'primary',
- secondary = 'secondary',
- danger = 'danger',
- warning = 'warning',
- success = 'success',
- dark = 'dark',
- purple = 'purple',
- teal = 'teal',
- link = 'link',
-}
-
-export enum BoButtonBorderRadiusClasses {
- pill = /*tw*/ 'rounded-full',
- default = /*tw*/ 'rounded-lg',
- outline = /*tw*/ 'rounded-lg',
-}
-
-export enum BoButtonPaddingClasses {
- small = /*tw*/ 'px-2.5',
- default = /*tw*/ 'px-3',
- large = /*tw*/ 'px-3.5',
-}
-
-export enum BoButtonTextSizeClasses {
- small = /*tw*/ 'text-small leading-small',
- default = /*tw*/ 'text-default leading-default',
- large = /*tw*/ 'text-large leading-large',
-}
-
-export enum BoButtonHeightClasses {
- small = /*tw*/ 'h-6',
- default = /*tw*/ 'h-8',
- large = /*tw*/ 'h-10',
-}
-
-export enum BoButtonShadowClasses {
- primary = /*tw*/ 'shadow-sm shadow-blue-500/50 dark:shadow-sm dark:shadow-blue-800/80',
- secondary = /*tw*/ 'shadow-sm shadow-gray-500/50 dark:shadow-sm dark:shadow-gray-800/80',
- danger = /*tw*/ 'shadow-sm shadow-red-500/50 dark:shadow-sm dark:shadow-red-800/80',
- warning = /*tw*/ 'shadow-sm shadow-yellow-500/50 dark:shadow-sm dark:shadow-yellow-800/80',
- success = /*tw*/ 'shadow-sm shadow-green-500/50 dark:shadow-sm dark:shadow-green-800/80',
- dark = /*tw*/ 'shadow-sm shadow-black-500/50 dark:shadow-sm dark:shadow-black-800/80',
- purple = /*tw*/ 'shadow-sm shadow-purple-500/50 dark:shadow-sm dark:shadow-purple-800/80',
- teal = /*tw*/ 'shadow-sm shadow-teal-500/50 dark:shadow-sm dark:shadow-teal-800/80',
- link = /*tw*/ 'shadow-none',
-}
-
-export enum BoButtonFilledColorClasses {
- primary = /*tw*/ 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-600 text-white',
- secondary = /*tw*/ 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-600 text-white',
- danger = /*tw*/ 'bg-red-600 hover:bg-red-700 focus:ring-red-600 text-white',
- warning = /*tw*/ 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-600 text-white',
- success = /*tw*/ 'bg-green-600 hover:bg-green-700 focus:ring-green-600 text-white',
- dark = /*tw*/ 'bg-black hover:bg-black/50 focus:ring-black text-white',
- purple = /*tw*/ 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-600 text-white',
- teal = /*tw*/ 'bg-teal-600 hover:bg-teal-700 focus:ring-teal-600 text-white',
- link = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
-}
-
-export enum BoButtonFilledDarkColorClasses {
- primary = /*tw*/ 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-600 text-white',
- secondary = /*tw*/ 'bg-gray-600 hover:bg-gray-700 focus:ring-gray-600 text-white',
- danger = /*tw*/ 'bg-red-600 hover:bg-red-700 focus:ring-red-600 text-white',
- warning = /*tw*/ 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-600 text-white',
- success = /*tw*/ 'bg-green-600 hover:bg-green-700 focus:ring-green-600 text-white',
- dark = /*tw*/ 'bg-black hover:bg-black/50 focus:ring-black text-white',
- purple = /*tw*/ 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-600 text-white',
- teal = /*tw*/ 'bg-teal-600 hover:bg-teal-700 focus:ring-teal-600 text-white',
- link = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
-}
-
-export enum BoButtonOutlineColorClasses {
- primary = /*tw*/ 'border border-blue-600 hover:bg-blue-600 focus:ring-blue-600 text-blue-600 hover:text-white',
- secondary = /*tw*/ 'border border-gray-600 hover:bg-gray-600 focus:ring-gray-600 text-gray-600 hover:text-white',
- danger = /*tw*/ 'border border-red-600 hover:bg-red-600 focus:ring-red-600 text-red-600 hover:text-white',
- warning = /*tw*/ 'border border-yellow-600 hover:bg-yellow-600 focus:ring-yellow-600 text-yellow-600 hover:text-white',
- success = /*tw*/ 'border border-green-600 hover:bg-green-600 focus:ring-green-600 text-green-600 hover:text-white',
- dark = /*tw*/ 'border border-black hover:bg-black focus:ring-black text-black hover:text-white',
- purple = /*tw*/ 'border border-purple-600 hover:bg-purple-600 focus:ring-purple-600 text-purple-600 hover:text-white',
- teal = /*tw*/ 'border border-teal-600 hover:bg-teal-600 focus:ring-teal-600 text-teal-600 hover:text-white',
- link = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
-}
-
-export enum BoButtonOutlineDarkColorClasses {
- primary = /*tw*/ 'border border-blue-600 hover:bg-blue-600 focus:ring-blue-600 text-blue-600 hover:text-white',
- secondary = /*tw*/ 'border border-gray-600 hover:bg-gray-600 focus:ring-gray-600 text-gray-600 hover:text-white',
- danger = /*tw*/ 'border border-red-600 hover:bg-red-600 focus:ring-red-600 text-red-600 hover:text-white',
- warning = /*tw*/ 'border border-yellow-600 hover:bg-yellow-600 focus:ring-yellow-600 text-yellow-600 hover:text-white',
- success = /*tw*/ 'border border-green-600 hover:bg-green-600 focus:ring-green-600 text-green-600 hover:text-white',
- dark = /*tw*/ 'border border-black hover:bg-black focus:ring-black text-black hover:text-white',
- purple = /*tw*/ 'border border-purple-600 hover:bg-purple-600 focus:ring-purple-600 text-purple-600 hover:text-white',
- teal = /*tw*/ 'border border-teal-600 hover:bg-teal-600 focus:ring-teal-600 text-teal-600 hover:text-white',
- link = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
-}
diff --git a/src/components/bo_button/constants.ts b/src/components/bo_button/constants.ts
new file mode 100644
index 00000000..dad7c15d
--- /dev/null
+++ b/src/components/bo_button/constants.ts
@@ -0,0 +1,20 @@
+export enum BoButtonVariant {
+ primary = 'primary',
+ secondary = 'secondary',
+ danger = 'danger',
+ warning = 'warning',
+ success = 'success',
+ dark = 'dark',
+ link = 'link',
+ link_secondary = 'link_secondary',
+ link_danger = 'link_danger',
+ link_warning = 'link_warning',
+ link_success = 'link_success',
+ link_dark = 'link_dark',
+}
+
+export enum BoButtonShape {
+ default = 'default',
+ pill = 'pill',
+ outline = 'outline',
+}
diff --git a/src/components/bo_button/index.ts b/src/components/bo_button/index.ts
index 3c363f63..ee10bc50 100644
--- a/src/components/bo_button/index.ts
+++ b/src/components/bo_button/index.ts
@@ -1,14 +1,3 @@
-export { default as BoButton } from './BoButton.vue';
-export {
- BoButtonBorderRadiusClasses,
- BoButtonFilledColorClasses,
- BoButtonFilledDarkColorClasses,
- BoButtonHeightClasses,
- BoButtonOutlineColorClasses,
- BoButtonOutlineDarkColorClasses,
- BoButtonPaddingClasses,
- BoButtonShadowClasses,
- BoButtonTextSizeClasses,
- BoButtonType,
- BoButtonVariant,
-} from './bo_button';
+export { default as BoButton } from './BoButton.vue'
+export * from './constants'
+export * from './types'
diff --git a/src/components/bo_button/types.ts b/src/components/bo_button/types.ts
new file mode 100644
index 00000000..04f46f83
--- /dev/null
+++ b/src/components/bo_button/types.ts
@@ -0,0 +1,17 @@
+import type { Icon } from '@/components/bo_icon'
+import type { BoSize } from '@/data/bo_size.constant'
+import type { HtmlButtonType } from '@/global/html_button'
+import type { BoButtonShape, BoButtonVariant } from './constants'
+
+export type BoButtonProps = {
+ label?: string
+ variant?: BoButtonVariant
+ shape?: BoButtonShape
+ type?: HtmlButtonType
+ disabled?: boolean
+ isLoading?: boolean
+ size?: BoSize
+ prefixIcon?: Icon
+ suffixIcon?: Icon
+ linkVariantWithShadow?: boolean
+}
diff --git a/src/components/bo_card/BoCard.vue b/src/components/bo_card/BoCard.vue
new file mode 100644
index 00000000..8528f8e0
--- /dev/null
+++ b/src/components/bo_card/BoCard.vue
@@ -0,0 +1,127 @@
+
+
+
+
+```
+
+## Props
+
+- `title` - The title of the card (optional)
+ - default: `undefined`
+- `description` - The description of the card (optional)
+ - default: `undefined`
+- `clickable` - Whether the card is clickable (optional)
+ - default: `false`
+- `widthInPx` - The width of the card in pixels (optional)
+ - default: `undefined`
+- `widthInPercent` - The width of the card in percent (optional)
+ - default: `undefined`
+- `widthAsTailwindClass` - The width of the card as a tailwind class (optional)
+ - default: `undefined`
+
+## Examples
+
+
+
+
+export default meta
+type Story = StoryObj
+
+export const Example: Story = {
+ render: () => ({
+ components: { BoCard, BoBadge },
+ template: `
+
+
+
+ `,
+ }),
+}
+
+export const TitleAndDescription: Story = {
+ render: () => ({
+ components: { BoCard },
+ template: `
+
+
+
+ `,
+ }),
+}
+
+export const WidthInPx: Story = {
+ render: () => ({
+ components: { BoCard },
+ template: `
+
+ + + diff --git a/src/components/bo_divider/__stories__/bo_divider.mdx b/src/components/bo_divider/__stories__/bo_divider.mdx new file mode 100644 index 00000000..b8d5a9b2 --- /dev/null +++ b/src/components/bo_divider/__stories__/bo_divider.mdx @@ -0,0 +1,54 @@ +import { Canvas, Meta, Controls } from '@storybook/blocks' +import * as BoDividerStories from './bo_divider.stories' + + + +# bo-divider + +A divider is a thin line that groups content in a list or separates sections. + +## Basic usage + +The component to use is called `bo-divider`. + +```html +
+
+export default meta
+type Story = StoryObj
+
+export const Example: Story = {
+ render: (args) => ({
+ components: { BoDivider },
+ setup() {
+ return { args }
+ },
+ template: `
+ ;
+} satisfies Meta
-export default meta;
+export default meta
-type Story = StoryObj;
+type Story = StoryObj
export const Example: Story = {
args: {
icon: Icon.airplay,
size: BoSize.default,
},
-};
+}
export const Sizes: Story = {
render: (args) => ({
components: { BoIcon },
setup() {
- const sizes = Object.values(BoSize);
- return { sizes, ...args };
+ const sizes = Object.values(BoSize)
+ return { sizes, ...args }
},
template: `
Default
-
-
- Pill
-
-
- Outline
-
-
+
+
+
+
`,
}),
args: {
label: 'Label',
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
},
-};
+}
export const WithPrefixIcon: Story = {
+ render: (args) => ({
+ components: { BoButton },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
args: {
label: 'Label',
prefixIcon: Icon.alert_circle,
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
},
-};
+}
export const WithSuffixIcon: Story = {
+ render: (args) => ({
+ components: { BoButton },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
args: {
label: 'Label',
suffixIcon: Icon.alert_circle,
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
},
-};
+}
-export const WithPrefixAndSuffixIcon: Story = {
+export const IconOnlyButton: Story = {
+ render: (args) => ({
+ components: { BoButton },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
args: {
- label: 'Label',
prefixIcon: Icon.alert_circle,
- suffixIcon: Icon.alert_circle,
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
+ },
+}
+
+export const IconOnlySizes: Story = {
+ render: (args) => ({
+ components: { BoButton },
+ setup() {
+ const sizes = Object.values(BoSize)
+ return { sizes, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ prefixIcon: Icon.alert_circle,
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
+ },
+}
+
+export const IconOnlyVariants: Story = {
+ render: (args) => ({
+ components: { BoButton },
+ setup() {
+ const variants = Object.values(BoButtonVariant)
+ return { variants, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ prefixIcon: Icon.alert_circle,
+ variant: BoButtonVariant.primary,
+ type: HtmlButtonType.button,
+ },
+}
+
+export const LinkVariantWithShadow: Story = {
+ render: (args) => ({
+ components: { BoButton },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ label: 'Label',
+ linkVariantWithShadow: true,
+ variant: BoButtonVariant.link,
+ type: HtmlButtonType.button,
},
-};
+}
diff --git a/src/components/bo_button/__test__/bo_button.test.ts b/src/components/bo_button/__test__/bo_button.test.ts
new file mode 100644
index 00000000..7535fcb6
--- /dev/null
+++ b/src/components/bo_button/__test__/bo_button.test.ts
@@ -0,0 +1,515 @@
+import {
+ BoButton,
+ BoButtonShape,
+ BoButtonVariant,
+} from '@/components/bo_button'
+import { Icon } from '@/components/bo_icon'
+import BoIcon from '@/components/bo_icon/BoIcon.vue'
+import BoLoadingSpinner from '@/components/bo_loading_spinner/BoLoadingSpinner.vue'
+import { BoText } from '@/components/bo_text'
+import { BoSize } from '@/data/bo_size.constant'
+import { BoLoaderVariant } from '@/data/loader.constant'
+import { HtmlButtonType } from '@/global'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, suite, test } from 'vitest'
+
+let globalWrapper: ReturnType
+
+
+
+
diff --git a/src/components/bo_card/__stories__/bo_card.mdx b/src/components/bo_card/__stories__/bo_card.mdx
new file mode 100644
index 00000000..72801592
--- /dev/null
+++ b/src/components/bo_card/__stories__/bo_card.mdx
@@ -0,0 +1,90 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoCardStories from './bo_card.stories'
+
+
+
+# bo-card
+
+A card is a container that holds related content and actions. The `bo-card` component is a component that can be used to display a card in various ways.
+
+## Basic usage
+
+The component to use is called `bo-card`.
+
+```html
+
+
+
+
+ // some content
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/src/components/bo_divider/__stories__/bo_divider.mdx b/src/components/bo_divider/__stories__/bo_divider.mdx new file mode 100644 index 00000000..b8d5a9b2 --- /dev/null +++ b/src/components/bo_divider/__stories__/bo_divider.mdx @@ -0,0 +1,54 @@ +import { Canvas, Meta, Controls } from '@storybook/blocks' +import * as BoDividerStories from './bo_divider.stories' + + + +# bo-divider + +A divider is a thin line that groups content in a list or separates sections. + +## Basic usage + +The component to use is called `bo-divider`. + +```html +
+
+ `,
+ }),
+ args: {
+ variant: BoDividerVariant.primary,
+ type: BoDividerType.default,
+ },
+}
+
+export const Variants: Story = {
+ render: (args) => ({
+ components: { BoDivider },
+ setup() {
+ const variants = Object.values(BoDividerVariant)
+ return { variants, args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ variant: BoDividerVariant.primary,
+ type: BoDividerType.default,
+ },
+}
+
+export const Types: Story = {
+ render: (args) => ({
+ components: { BoDivider, BoText },
+ setup() {
+ const types = Object.values(BoDividerType)
+ return { types, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {},
+}
diff --git a/src/components/bo_divider/constants.ts b/src/components/bo_divider/constants.ts
new file mode 100644
index 00000000..f2a713cb
--- /dev/null
+++ b/src/components/bo_divider/constants.ts
@@ -0,0 +1,14 @@
+export enum BoDividerVariant {
+ primary = 'primary',
+ secondary = 'secondary',
+ danger = 'danger',
+ warning = 'warning',
+ success = 'success',
+ dark = 'dark',
+}
+
+export enum BoDividerType {
+ default = 'default',
+ dotted = 'dotted',
+ dashed = 'dashed',
+}
diff --git a/src/components/bo_divider/index.ts b/src/components/bo_divider/index.ts
new file mode 100644
index 00000000..12b80ab9
--- /dev/null
+++ b/src/components/bo_divider/index.ts
@@ -0,0 +1,3 @@
+export { default as BoDivider } from './BoDivider.vue'
+export * from './constants'
+export * from './types'
diff --git a/src/components/bo_divider/types.ts b/src/components/bo_divider/types.ts
new file mode 100644
index 00000000..6e794d02
--- /dev/null
+++ b/src/components/bo_divider/types.ts
@@ -0,0 +1,6 @@
+import type { BoDividerType, BoDividerVariant } from './constants'
+
+export type BoDividerProps = {
+ variant?: BoDividerVariant
+ type?: BoDividerType
+}
diff --git a/src/components/bo_icon/BoIcon.vue b/src/components/bo_icon/BoIcon.vue
index ca75b329..1e574c40 100644
--- a/src/components/bo_icon/BoIcon.vue
+++ b/src/components/bo_icon/BoIcon.vue
@@ -1,84 +1,105 @@
-
-
+ type="image/svg+xml"
+ :class="tailwindCssSizeClasses"
+ />
diff --git a/src/components/bo_icon/__stories__/bo_icon.mdx b/src/components/bo_icon/__stories__/bo_icon.mdx
index 33e2d782..86e97d5e 100644
--- a/src/components/bo_icon/__stories__/bo_icon.mdx
+++ b/src/components/bo_icon/__stories__/bo_icon.mdx
@@ -1,9 +1,9 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as BoIconStories from './bo_icon.stories';
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoIconStories from './bo_icon.stories'
# bo-icon
@@ -34,9 +34,11 @@ An icon is a graphical representation of an object or action. The `bo-icon` comp
The `size` prop can be used to change the size of the icon. The `size` prop should be a member of the `BoSize` enum.
-- `small`
-- `default`
-- `large`
+- `extra_small - 12px`
+- `small - 14px`
+- `default - 16px (default)`
+- `large - 20px`
+- `extra_large - 24px`
diff --git a/src/components/bo_icon/__stories__/bo_icon.stories.ts b/src/components/bo_icon/__stories__/bo_icon.stories.ts
index 129335ec..fe95ca22 100644
--- a/src/components/bo_icon/__stories__/bo_icon.stories.ts
+++ b/src/components/bo_icon/__stories__/bo_icon.stories.ts
@@ -1,7 +1,8 @@
-import { BoIcon, Icon } from '@/components/bo_icon';
-import { BoColor, BoSize } from '@/global';
-import { StorybookUtils } from '@/utils';
-import type { Meta, StoryObj } from '@storybook/vue3';
+import { BoIcon, Icon } from '@/components/bo_icon'
+import { BoColor } from '@/data'
+import { BoSize } from '@/data/bo_size.constant'
+import { StorybookUtils } from '@/utils'
+import type { Meta, StoryObj } from '@storybook/vue3'
const meta = {
title: 'Components/bo-icon',
@@ -52,32 +53,32 @@ const meta = {
control: { type: 'color' },
},
},
-} satisfies Meta
-
`,
@@ -85,30 +86,30 @@ export const Sizes: Story = {
args: {
icon: Icon.activity,
},
-};
+}
export const Colors: Story = {
render: (args) => ({
components: { BoIcon },
setup() {
- const colors = [];
+ const colors = []
const getRandomColor = (): BoColor => {
- const colors = Object.values(BoColor);
- return colors[Math.floor(Math.random() * colors.length)];
- };
+ const colors = Object.values(BoColor)
+ return colors[Math.floor(Math.random() * colors.length)]
+ }
for (let i = 0; i < 10; i++) {
- colors.push(getRandomColor());
+ colors.push(getRandomColor())
}
- return { colors, ...args };
+ return { colors, ...args }
},
template: `
-
`,
@@ -116,20 +117,20 @@ export const Colors: Story = {
args: {
icon: Icon.activity,
},
-};
+}
export const AllIcons: Story = {
render: () => ({
components: { BoIcon },
setup() {
- const icons = Object.values(Icon);
- return { icons, Icon };
+ const icons = Object.values(Icon)
+ return { icons, Icon }
},
template: `
-
+ ;
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, test } from 'vitest'
+
+let wrapper: ReturnType
beforeEach(() => {
wrapper = mount(BoIcon, {
@@ -12,43 +13,39 @@ beforeEach(() => {
size: BoSize.default,
color: '#123456',
},
- });
-});
+ })
+})
describe('bo_icon.vue', () => {
- test('should match snapshot', () => {
- expect(wrapper.html()).toMatchSnapshot();
- });
-
test('should render the icon', () => {
- expect(wrapper.find('activity')).toBeTruthy();
- });
+ expect(wrapper.find('activity')).toBeTruthy()
+ })
test('should have the default size', () => {
- expect(wrapper.find('w-6')).toBeTruthy();
- expect(wrapper.find('h-6')).toBeTruthy();
- });
+ expect(wrapper.find('w-6')).toBeTruthy()
+ expect(wrapper.find('h-6')).toBeTruthy()
+ })
test('should have the default type', () => {
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
+ expect(wrapper.find('bg-blue-500')).toBeTruthy()
+ expect(wrapper.find('rounded-lg')).toBeTruthy()
+ })
test('should be able to change the size', async () => {
- await wrapper.setProps({ size: BoSize.large });
- expect(wrapper.find('w-8')).toBeTruthy();
- expect(wrapper.find('h-8')).toBeTruthy();
- });
+ await wrapper.setProps({ size: BoSize.large })
+ expect(wrapper.find('w-8')).toBeTruthy()
+ expect(wrapper.find('h-8')).toBeTruthy()
+ })
test('should be able to change the type', async () => {
- await wrapper.setProps({ type: BoSize.large });
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
+ await wrapper.setProps({ type: BoSize.large })
+ expect(wrapper.find('bg-blue-500')).toBeTruthy()
+ expect(wrapper.find('rounded-lg')).toBeTruthy()
+ })
test('should be able to change the color', async () => {
- await wrapper.setProps({ color: '#000000' });
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-});
+ await wrapper.setProps({ color: '#000000' })
+ expect(wrapper.find('bg-blue-500')).toBeTruthy()
+ expect(wrapper.find('rounded-lg')).toBeTruthy()
+ })
+})
diff --git a/src/components/bo_icon/bo_icon.ts b/src/components/bo_icon/constant.ts
similarity index 97%
rename from src/components/bo_icon/bo_icon.ts
rename to src/components/bo_icon/constant.ts
index ac285350..d09f3fcc 100644
--- a/src/components/bo_icon/bo_icon.ts
+++ b/src/components/bo_icon/constant.ts
@@ -284,12 +284,6 @@ export enum Icon {
}
export const icons = import.meta.glob('@/assets/icons/**/*.svg', {
- query: '?raw',
+ query: '?component',
import: 'default',
-}) as Record Promise>;
-
-export enum IconSizeClasses {
- small = /*tw*/ 'w-2.5 h-2.5',
- default = /*tw*/ 'w-3.5 h-3.5',
- large = /*tw*/ 'w-5 h-5',
-}
+}) as Record Promise>
diff --git a/src/components/bo_icon/index.ts b/src/components/bo_icon/index.ts
index 955ec181..291da3ad 100644
--- a/src/components/bo_icon/index.ts
+++ b/src/components/bo_icon/index.ts
@@ -1,2 +1,3 @@
-export { default as BoIcon } from './BoIcon.vue';
-export { Icon, IconSizeClasses, icons } from './bo_icon';
+export { default as BoIcon } from './BoIcon.vue'
+export * from './constant'
+export * from './types'
diff --git a/src/components/bo_icon/types.ts b/src/components/bo_icon/types.ts
new file mode 100644
index 00000000..608ffeda
--- /dev/null
+++ b/src/components/bo_icon/types.ts
@@ -0,0 +1,8 @@
+import type { BoSize } from '@/data/bo_size.constant'
+import type { Icon } from './constant'
+
+export type BoIconProps = {
+ icon: Icon
+ size?: BoSize
+ color?: string
+}
diff --git a/src/components/bo_icon_button/BoIconButton.vue b/src/components/bo_icon_button/BoIconButton.vue
deleted file mode 100644
index 764367e3..00000000
--- a/src/components/bo_icon_button/BoIconButton.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-
-
-
-
-
diff --git a/src/components/bo_icon_button/__storybook__/bo_icon_button.mdx b/src/components/bo_icon_button/__storybook__/bo_icon_button.mdx
deleted file mode 100644
index c1508d56..00000000
--- a/src/components/bo_icon_button/__storybook__/bo_icon_button.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as BoIconButtonStories from './bo_icon_button.stories';
-
-
-
-# bo-icon-button
-
-An icon only button is a control that allows the user to perform an action.
-
-## Basic usage
-
-```html
-;
-
-export default meta;
-type Story = StoryObj;
-
-export const Example: Story = {
- args: {
- icon: Icon.activity,
- size: BoSize.default,
- variant: BoIconButtonVariant.primary,
- shape: BoIconButtonShape.default,
- style: BoIconButtonStyle.default,
- disabled: false,
- isLoading: false,
- },
-};
-
-export const Sizes: Story = {
- render: (args) => ({
- components: { BoIconButton },
- setup() {
- const sizes = Object.values(BoSize);
- return { sizes, ...args };
- },
- template: `
- ;
-
-beforeEach(() => {
- wrapper = mount(BoIconButton, {
- props: {
- icon: Icon.activity,
- size: BoSize.default,
- color: '#123456',
- },
- });
-});
-
-describe('bo_icon_button.vue', () => {
- test('should match snapshot', () => {
- expect(true).toBeTruthy();
- });
-
- test('should render the button', () => {
- expect(wrapper.find('button')).toBeTruthy();
- });
-
- test('should have the default size', () => {
- expect(wrapper.find('w-6')).toBeTruthy();
- expect(wrapper.find('h-6')).toBeTruthy();
- });
-
- test('should have the default type', () => {
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the size', async () => {
- await wrapper.setProps({ size: BoSize.large });
- expect(wrapper.find('w-8')).toBeTruthy();
- expect(wrapper.find('h-8')).toBeTruthy();
- });
-
- test('should be able to change the type', async () => {
- await wrapper.setProps({ type: BoSize.large });
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the color', async () => {
- await wrapper.setProps({ color: '#000000' });
- expect(wrapper.find('bg-blue-500')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-
- test('should be able to change the variant', async () => {
- await wrapper.setProps({ variant: BoIconButtonVariant.secondary });
- expect(wrapper.find('bg-gray-600')).toBeTruthy();
- expect(wrapper.find('rounded-lg')).toBeTruthy();
- });
-});
diff --git a/src/components/bo_icon_button/bo_icon_button.ts b/src/components/bo_icon_button/bo_icon_button.ts
deleted file mode 100644
index c4651c2a..00000000
--- a/src/components/bo_icon_button/bo_icon_button.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-export enum BoIconButtonStyle {
- default = 'default',
- outline = 'outline',
-}
-
-export enum BoIconButtonVariant {
- primary = 'primary',
- secondary = 'secondary',
- danger = 'danger',
- warning = 'warning',
- success = 'success',
- dark = 'dark',
- purple = 'purple',
- teal = 'teal',
- link = 'link',
- link_secondary = 'link_secondary',
- link_danger = 'link_danger',
- link_warning = 'link_warning',
- link_success = 'link_success',
- link_dark = 'link_dark',
- link_purple = 'link_purple',
- link_teal = 'link_teal',
-}
-
-export enum BoIconButtonShape {
- default = 'default',
- flat = 'flat',
- circle = 'circle',
-}
-
-export enum BoIconButtonSizeClasses {
- small = /*tw*/ 'h-6 w-6',
- default = /*tw*/ 'h-8 w-8',
- large = /*tw*/ 'h-10 w-10',
-}
-
-export enum BoIconButtonBorderRadiusClasses {
- default = /*tw*/ 'rounded-lg',
- flat = /*tw*/ 'rounded-none',
- circle = /*tw*/ 'rounded-full',
-}
-
-export enum BoIconButtonShadowClasses {
- primary = /*tw*/ 'shadow-sm shadow-blue-500/50 dark:shadow-sm dark:shadow-blue-800/80',
- secondary = /*tw*/ 'shadow-sm shadow-gray-500/50 dark:shadow-sm dark:shadow-gray-800/80',
- danger = /*tw*/ 'shadow-sm shadow-red-500/50 dark:shadow-sm dark:shadow-red-800/80',
- warning = /*tw*/ 'shadow-sm shadow-yellow-500/50 dark:shadow-sm dark:shadow-yellow-800/80',
- success = /*tw*/ 'shadow-sm shadow-green-500/50 dark:shadow-sm dark:shadow-green-800/80',
- dark = /*tw*/ 'shadow-sm shadow-black-500/50 dark:shadow-sm dark:shadow-black-800/80',
- purple = /*tw*/ 'shadow-sm shadow-purple-500/50 dark:shadow-sm dark:shadow-purple-800/80',
- teal = /*tw*/ 'shadow-sm shadow-teal-500/50 dark:shadow-sm dark:shadow-teal-800/80',
- link = /*tw*/ 'shadow-none',
- link_secondary = /*tw*/ 'shadow-none',
- link_danger = /*tw*/ 'shadow-none',
- link_warning = /*tw*/ 'shadow-none',
- link_success = /*tw*/ 'shadow-none',
- link_dark = /*tw*/ 'shadow-none',
- link_purple = /*tw*/ 'shadow-none',
- link_teal = /*tw*/ 'shadow-none',
-}
-
-export enum BoIconButtonColorClasses {
- primary = /*tw*/ 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-600 text-white',
- secondary = /*tw*/ 'bg-neutral-300 hover:bg-neutral-400 focus:ring-neutral-300 text-neutral-800',
- danger = /*tw*/ 'bg-red-600 hover:bg-red-700 focus:ring-red-600 text-white',
- warning = /*tw*/ 'bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-600 text-white',
- success = /*tw*/ 'bg-green-600 hover:bg-green-700 focus:ring-green-600 text-white',
- dark = /*tw*/ 'bg-black hover:bg-black/50 focus:ring-black text-white',
- purple = /*tw*/ 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-600 text-white',
- teal = /*tw*/ 'bg-teal-600 hover:bg-teal-700 focus:ring-teal-600 text-white',
- link = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
- link_secondary = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
- link_danger = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-red-600 hover:text-red-700 focus:ring-red-600',
- link_warning = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-yellow-600 hover:text-yellow-700 focus:ring-yellow-600',
- link_success = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-green-600 hover:text-green-700 focus:ring-green-600',
- link_dark = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-black hover:text-black/50 focus:ring-black',
- link_purple = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-purple-600 hover:text-purple-700 focus:ring-purple-600',
- link_teal = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-teal-600 hover:text-teal-700 focus:ring-teal-600',
-}
-
-export enum BoIconButtonOutlineColorClasses {
- primary = /*tw*/ 'border border-blue-600 hover:bg-blue-600 focus:ring-blue-600 text-blue-600 hover:text-white',
- secondary = /*tw*/ 'border border-neutral-600 hover:bg-neutral-300 focus:ring-neutral-600 text-neutral-800 hover:text-white',
- danger = /*tw*/ 'border border-red-600 hover:bg-red-600 focus:ring-red-600 text-red-600 hover:text-white',
- warning = /*tw*/ 'border border-yellow-600 hover:bg-yellow-600 focus:ring-yellow-600 text-yellow-600 hover:text-white',
- success = /*tw*/ 'border border-green-600 hover:bg-green-600 focus:ring-green-600 text-green-600 hover:text-white',
- dark = /*tw*/ 'border border-black hover:bg-black focus:ring-black text-black hover:text-white',
- purple = /*tw*/ 'border border-purple-600 hover:bg-purple-600 focus:ring-purple-600 text-purple-600 hover:text-white',
- teal = /*tw*/ 'border border-teal-600 hover:bg-teal-600 focus:ring-teal-600 text-teal-600 hover:text-white',
- link = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
- link_secondary = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-blue-600 hover:text-blue-700 focus:ring-blue-600',
- link_danger = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-red-600 hover:text-red-700 focus:ring-red-600',
- link_warning = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-yellow-600 hover:text-yellow-700 focus:ring-yellow-600',
- link_success = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-green-600 hover:text-green-700 focus:ring-green-600',
- link_dark = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-black hover:text-black/50 focus:ring-black',
- link_purple = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-purple-600 hover:text-purple-700 focus:ring-purple-600',
- link_teal = /*tw*/ 'bg-transparent hover:bg-transparent focus:ring-transparent text-teal-600 hover:text-teal-700 focus:ring-teal-600',
-}
diff --git a/src/components/bo_icon_button/index.ts b/src/components/bo_icon_button/index.ts
deleted file mode 100644
index d14a2f06..00000000
--- a/src/components/bo_icon_button/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export { default as BoIconButton } from './BoIconButton.vue';
-export {
- BoIconButtonBorderRadiusClasses,
- BoIconButtonColorClasses,
- BoIconButtonOutlineColorClasses,
- BoIconButtonShadowClasses,
- BoIconButtonShape,
- BoIconButtonSizeClasses,
- BoIconButtonStyle,
- BoIconButtonVariant,
-} from './bo_icon_button';
diff --git a/src/components/bo_input/BoInput.vue b/src/components/bo_input/BoInput.vue
new file mode 100644
index 00000000..180dfb2f
--- /dev/null
+++ b/src/components/bo_input/BoInput.vue
@@ -0,0 +1,338 @@
+
+
+
+export default meta
+type Story = StoryObj
+
+function generateRandomId(): string {
+ return Symbol(
+ Math.random().toString(36).substring(2, 15) + Date.now(),
+ ).toString()
+}
+
+export const Example: Story = {
+ args: {
+ modelValue: 'Hello world!',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ size: BoInputSize.default,
+ state: BoInputState.none,
+ disabled: false,
+ isLoading: false,
+ readonly: false,
+ placeholder: 'Enter your name',
+ type: HtmlInputType.text,
+ },
+}
+
+export const Sizes: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ const sizes = Object.values(BoInputSize)
+ return { sizes, ...args, generateRandomId }
+ },
+ template: `
+
+
+export default meta
+type Story = StoryObj
+
+export const Example: Story = {
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+}
+
+export const Variants: Story = {
+ render: (args) => ({
+ components: { BoLoadingPulse },
+ setup() {
+ const variants = Object.values(BoLoaderVariant)
+ return { variants, ...args }
+ },
+ template: `
+
+
+beforeEach(() => {
+ globalWrapper = mount(BoLoadingPulse, {
+ props: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+ })
+})
+
+describe('bo_loading_pulse.vue', () => {
+ test('loading pulse should render properly', () => {
+ expect(globalWrapper).toBeDefined()
+ })
+
+ test('loading pulse should have the default classes', () => {
+ expect(globalWrapper.classes()).toContain('bo-loading-pulse__container')
+ expect(globalWrapper.classes()).toContain('flex')
+ expect(globalWrapper.classes()).toContain('h-full')
+ expect(globalWrapper.classes()).toContain('w-full')
+ expect(globalWrapper.classes()).toContain('content-center')
+ expect(globalWrapper.classes()).toContain('items-center')
+ expect(globalWrapper.classes()).toContain('justify-center')
+ expect(globalWrapper.classes()).toContain('gap-2')
+ })
+
+ test('absolute outer pulse should have the default classes', () => {
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('absolute')
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('inline-flex')
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('h-full')
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('w-full')
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('animate-ping')
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('rounded-full')
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('opacity-75')
+ })
+
+ test('relative inner pulse should have the default classes', () => {
+ expect(
+ globalWrapper.find('.bo-loading-pulse__inner-pulse-relative').classes(),
+ ).toContain('relative')
+ expect(
+ globalWrapper.find('.bo-loading-pulse__inner-pulse-relative').classes(),
+ ).toContain('flex')
+ })
+
+ suite('loader variant', () => {
+ test('should be ablte to render a default variant', () => {
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-blue-600')
+ })
+
+ test('should be ablte to render a primary variant', async () => {
+ await globalWrapper.setProps({ variant: BoLoaderVariant.primary })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-blue-600')
+ })
+
+ test('should be ablte to render a secondary variant', async () => {
+ await globalWrapper.setProps({ variant: BoLoaderVariant.secondary })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-gray-600')
+ })
+
+ test('should be ablte to render a danger variant', async () => {
+ await globalWrapper.setProps({ variant: BoLoaderVariant.danger })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-red-600')
+ })
+
+ test('should be ablte to render a warning variant', async () => {
+ await globalWrapper.setProps({ variant: BoLoaderVariant.warning })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-yellow-600')
+ })
+
+ test('should be ablte to render a success variant', async () => {
+ await globalWrapper.setProps({ variant: BoLoaderVariant.success })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-green-600')
+ })
+
+ test('should be ablte to render a dark variant', async () => {
+ await globalWrapper.setProps({ variant: BoLoaderVariant.dark })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-black')
+ })
+
+ test('should be ablte to render a white variant', async () => {
+ await globalWrapper.setProps({ variant: BoLoaderVariant.white })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__outer-pulse-absolute').classes(),
+ ).toContain('bg-white')
+ })
+ })
+
+ suite('loader text', () => {
+ test('should be ablte to render text', async () => {
+ await globalWrapper.setProps({ loaderText: 'Loading...' })
+ expect(globalWrapper.findComponent(BoText).props('text')).toBe(
+ 'Loading...',
+ )
+ })
+
+ test('by default the text should positioned under the text', async () => {
+ await globalWrapper.setProps({ loaderText: 'Loading...' })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__container').classes(),
+ ).toContain('flex-col')
+ })
+
+ test('the loader text should be positioned on the side', async () => {
+ await globalWrapper.setProps({ textPosition: BoLoaderTextPosition.side })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__container').classes(),
+ ).toContain('flex-row')
+ })
+
+ test('the loader text should be positioned on the bottom', async () => {
+ await globalWrapper.setProps({
+ textPosition: BoLoaderTextPosition.bottom,
+ })
+ expect(
+ globalWrapper.find('.bo-loading-pulse__container').classes(),
+ ).toContain('flex-col')
+ })
+ })
+})
diff --git a/src/components/bo_loading_pulse/index.ts b/src/components/bo_loading_pulse/index.ts
new file mode 100644
index 00000000..827ae4ed
--- /dev/null
+++ b/src/components/bo_loading_pulse/index.ts
@@ -0,0 +1,2 @@
+export { default as BoLoadingPulse } from './BoLoadingPulse.vue'
+export * from './types'
diff --git a/src/components/bo_loading_pulse/types.ts b/src/components/bo_loading_pulse/types.ts
new file mode 100644
index 00000000..9b3a8839
--- /dev/null
+++ b/src/components/bo_loading_pulse/types.ts
@@ -0,0 +1,13 @@
+import type { BoSize } from '@/data/bo_size.constant'
+import type {
+ BoLoaderTextPosition,
+ BoLoaderVariant,
+} from '@/data/loader.constant'
+
+export type BoLoadingPulseProps = {
+ size?: BoSize
+ variant?: BoLoaderVariant
+ customColor?: string
+ loaderText?: string
+ textPosition?: BoLoaderTextPosition
+}
diff --git a/src/components/bo_loading_spinner/BoLoadingSpinner.vue b/src/components/bo_loading_spinner/BoLoadingSpinner.vue
new file mode 100644
index 00000000..61a67f6e
--- /dev/null
+++ b/src/components/bo_loading_spinner/BoLoadingSpinner.vue
@@ -0,0 +1,109 @@
+
+
+
+export default meta
+type Story = StoryObj
+
+export const Example: Story = {
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+}
+
+export const Variants: Story = {
+ render: (args) => ({
+ components: { BoLoadingSpinner },
+ setup() {
+ const variants = Object.values(BoLoaderVariant)
+ return { variants, ...args }
+ },
+ template: `
+
+
+beforeEach(() => {
+ globalWrapper = mount(BoLoadingSpinner, {
+ props: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+ })
+})
+
+describe('bo_loading_spinner.vue', () => {
+ test('teh spinner should be rendered', () => {
+ expect(globalWrapper).toBeTruthy()
+ })
+
+ test('the spinner container should have the default classes', () => {
+ expect(globalWrapper.classes()).toContain('flex')
+ expect(globalWrapper.classes()).toContain('h-full')
+ expect(globalWrapper.classes()).toContain('w-full')
+ expect(globalWrapper.classes()).toContain('content-center')
+ expect(globalWrapper.classes()).toContain('items-center')
+ expect(globalWrapper.classes()).toContain('justify-center')
+ expect(globalWrapper.classes()).toContain('gap-2')
+ })
+
+ test('the spinner animation should have the default classes', () => {
+ expect(
+ globalWrapper.find('.bo-loading-spinner__animation').classes(),
+ ).toContain('inline-flex')
+ expect(
+ globalWrapper.find('.bo-loading-spinner__animation').classes(),
+ ).toContain('animate-spin')
+ expect(
+ globalWrapper.find('.bo-loading-spinner__animation').classes(),
+ ).toContain('rounded-full')
+ expect(
+ globalWrapper.find('.bo-loading-spinner__animation').classes(),
+ ).toContain('border-[2px]')
+ expect(
+ globalWrapper.find('.bo-loading-spinner__animation').classes(),
+ ).toContain('border-current')
+ expect(
+ globalWrapper.find('.bo-loading-spinner__animation').classes(),
+ ).toContain('border-t-transparent')
+ })
+
+ suite('spinner variants', () => {
+ test('the spinner should have the default variant', () => {
+ expect(globalWrapper.find('text-blue-600')).toBeTruthy()
+ })
+
+ test('the spinner should support primary variant', () => {
+ expect(globalWrapper.find('text-blue-600')).toBeTruthy()
+ })
+
+ test('the spinner should support secondary variant', () => {
+ expect(globalWrapper.find('text-gray-600')).toBeTruthy()
+ })
+
+ test('the spinner should support danger variant', () => {
+ expect(globalWrapper.find('text-red-600')).toBeTruthy()
+ })
+
+ test('the spinner should support warning variant', () => {
+ expect(globalWrapper.find('text-yellow-600')).toBeTruthy()
+ })
+
+ test('the spinner should support success variant', () => {
+ expect(globalWrapper.find('text-green-600')).toBeTruthy()
+ })
+
+ test('the spinner should support dark variant', () => {
+ expect(globalWrapper.find('text-black')).toBeTruthy()
+ })
+
+ test('the spinner should support white variant', () => {
+ expect(globalWrapper.find('text-white')).toBeTruthy()
+ })
+ })
+
+ suite('loading spinner with text', () => {
+ let wrapper: ReturnType
+
+ beforeEach(() => {
+ wrapper = mount(BoLoadingSpinner, {
+ props: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ loaderText: 'Loading...',
+ },
+ })
+ })
+
+ test('spinner should render the text', () => {
+ expect(wrapper.findComponent(BoText).exists()).toBe(true)
+ })
+
+ test('the default text position should be under the spinner', () => {
+ expect(
+ wrapper.find('.bo-loading-spinner__container').classes(),
+ ).toContain('flex-col')
+ })
+
+ test('should support text under the loader', async () => {
+ await wrapper.setProps({ textPosition: BoLoaderTextPosition.bottom })
+ expect(
+ wrapper.find('.bo-loading-spinner__container').classes(),
+ ).toContain('flex-col')
+ })
+
+ test('should support text side the loader', async () => {
+ await wrapper.setProps({ textPosition: BoLoaderTextPosition.side })
+ expect(
+ wrapper.find('.bo-loading-spinner__container').classes(),
+ ).toContain('flex-row')
+ })
+ })
+
+ suite('spinner should support custom color', () => {
+ test('the spinner should support custom color', async () => {
+ const element = globalWrapper.find('.bo-loading-spinner__animation')
+
+ await globalWrapper.setProps({ customColor: 'red' })
+ const attributes = element.attributes()
+ expect(attributes['style']).toContain('color: red')
+
+ await globalWrapper.setProps({ customColor: '#000000' })
+ const attribute2 = element.attributes()
+ expect(attribute2['style']).toContain('color: rgb(0, 0, 0);')
+
+ await globalWrapper.setProps({ customColor: '#432121' })
+ const attribute3 = element.attributes()
+ expect(attribute3['style']).toContain('color: rgb(67, 33, 33);')
+ })
+ })
+})
diff --git a/src/components/bo_loading_spinner/index.ts b/src/components/bo_loading_spinner/index.ts
new file mode 100644
index 00000000..02a4f28c
--- /dev/null
+++ b/src/components/bo_loading_spinner/index.ts
@@ -0,0 +1,2 @@
+export { default as BoLoadingSpinner } from './BoLoadingSpinner.vue'
+export * from './types'
diff --git a/src/components/bo_loading_spinner/types.ts b/src/components/bo_loading_spinner/types.ts
new file mode 100644
index 00000000..aa374a3d
--- /dev/null
+++ b/src/components/bo_loading_spinner/types.ts
@@ -0,0 +1,13 @@
+import type { BoSize } from '@/data/bo_size.constant'
+import type {
+ BoLoaderTextPosition,
+ BoLoaderVariant,
+} from '@/data/loader.constant'
+
+export type BoLoadingSpinnerProps = {
+ size?: BoSize
+ variant?: BoLoaderVariant
+ customColor?: string
+ loaderText?: string
+ textPosition?: BoLoaderTextPosition
+}
diff --git a/src/components/bo_modal/BoAlertModal.vue b/src/components/bo_modal/BoAlertModal.vue
new file mode 100644
index 00000000..59a02fc8
--- /dev/null
+++ b/src/components/bo_modal/BoAlertModal.vue
@@ -0,0 +1,151 @@
+
+
+
+
+
+
+
diff --git a/src/components/bo_modal/BoSlotModal.vue b/src/components/bo_modal/BoSlotModal.vue
new file mode 100644
index 00000000..ab0a14a8
--- /dev/null
+++ b/src/components/bo_modal/BoSlotModal.vue
@@ -0,0 +1,161 @@
+
+
+
+export default meta
+type Story = StoryObj
+
+export const Example: Story = {
+ render: (args) => ({
+ components: { BoAlertModal },
+ setup: () => {
+ return { args }
+ },
+ template: `
+
+ //
+ //
+ //
+
+```
+
+## Props
+
+- `show-close-button` - Whether to show the close button (optional)
+ - default: `true`
+- `bordered-header` - Whether to show a bordered header (optional)
+ - default: `true`
+- `bordered-footer` - Whether to show a bordered footer (optional)
+ - default: `true`
+- `width-in-px` - The width of the modal in pixels (optional)
+- `width-in-percent` - The width of the modal in percent (optional)
+- `width-as-tailwind-class` - The width of the modal as a tailwind class (optional)
+
+## Slots
+
+- `header` - The header slot of the modal
+- `body` - The body slot of the modal
+- `footer` - The footer slot of the modal
+
+## Events
+
+- `update:show` - The event is emitted on the `@click` event of the close button
+ or when the `ESC` key is pressed
diff --git a/src/components/bo_modal/__stories__/bo_slot_modal.stories.ts b/src/components/bo_modal/__stories__/bo_slot_modal.stories.ts
new file mode 100644
index 00000000..344ce90a
--- /dev/null
+++ b/src/components/bo_modal/__stories__/bo_slot_modal.stories.ts
@@ -0,0 +1,306 @@
+import { BoButton } from '@/components/bo_button'
+import { BoSlotModal } from '@/components/bo_modal'
+import { BoFontSize, BoFontWeight, BoTextColor } from '@/components/bo_text'
+import BoText from '@/components/bo_text/BoText.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta = {
+ title: 'Components/bo-slot-modal',
+ component: BoSlotModal,
+ argTypes: {
+ showCloseButton: {
+ description: 'Whether to show the close button',
+ control: { type: 'boolean' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: true,
+ },
+ borderedHeader: {
+ description: 'Whether to show a bordered header',
+ control: { type: 'boolean' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: true,
+ },
+ borderedFooter: {
+ description: 'Whether to show a bordered footer',
+ control: { type: 'boolean' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: true,
+ },
+ widthInPx: {
+ description: 'The width of the modal in pixels',
+ control: { type: 'number' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: 0,
+ },
+ widthInPercent: {
+ description: 'The width of the modal in percent',
+ control: { type: 'number' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: 0,
+ },
+ widthAsTailwindClass: {
+ description: 'The width of the modal as a tailwind class',
+ control: { type: 'text' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: '',
+ },
+ header: {
+ description: 'The header of the modal',
+ control: { type: 'text' },
+ table: {
+ category: 'slots',
+ subcategory: 'optional',
+ },
+ defaultValue: '',
+ },
+ body: {
+ description: 'The body of the modal',
+ control: { type: 'text' },
+ table: {
+ category: 'slots',
+ subcategory: 'optional',
+ },
+ defaultValue: '',
+ },
+ footer: {
+ description: 'The footer of the modal',
+ control: { type: 'text' },
+ table: {
+ category: 'slots',
+ subcategory: 'optional',
+ },
+ defaultValue: '',
+ },
+ 'onUpdate:show': {
+ description: 'The event to be emitted when the modal is shown',
+ control: { type: 'text' },
+ table: {
+ category: 'events',
+ subcategory: 'optional',
+ },
+ defaultValue: '',
+ },
+ },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Example: Story = {
+ render: (args) => ({
+ components: { BoSlotModal, BoButton, BoText },
+
+ setup() {
+ return { args, BoFontSize, BoTextColor, BoFontWeight }
+ },
+ template: `
+
+
+
+ 
+
+
+
+ `,
+ }),
+}
+
+export const WithoutCloseButton: Story = {
+ render: (args) => ({
+ components: { BoSlotModal, BoButton, BoText },
+
+ setup() {
+ return { args, BoFontSize, BoTextColor, BoFontWeight }
+ },
+ template: `
+
+
+
+
+ `,
+ }),
+ args: {
+ showCloseButton: false,
+ },
+}
+
+export const BorderedSlots: Story = {
+ render: (args) => ({
+ components: { BoSlotModal, BoButton, BoText },
+
+ setup() {
+ return { args, BoFontSize, BoTextColor, BoFontWeight }
+ },
+ template: `
+
+
+
+
+ `,
+ }),
+ args: {
+ showCloseButton: false,
+ borderedHeader: true,
+ borderedFooter: true,
+ },
+}
+
+export const CustomWidthPx: Story = {
+ render: (args) => ({
+ components: { BoSlotModal, BoButton, BoText },
+
+ setup() {
+ return { args, BoFontSize, BoTextColor, BoFontWeight }
+ },
+ template: `
+
+
+
+
+ `,
+ }),
+ args: {
+ widthInPx: 200,
+ },
+}
+
+export const CustomWidthPercent: Story = {
+ render: (args) => ({
+ components: { BoSlotModal, BoButton, BoText },
+
+ setup() {
+ return { args, BoFontSize, BoTextColor, BoFontWeight }
+ },
+ template: `
+
+
+
+
+ `,
+ }),
+ args: {
+ widthInPercent: 50,
+ },
+}
+
+export const CustomWidthAsTailwindClass: Story = {
+ render: (args) => ({
+ components: { BoSlotModal, BoButton, BoText },
+
+ setup() {
+ return { args, BoFontSize, BoTextColor, BoFontWeight }
+ },
+ template: `
+
+
+
+
+ `,
+ }),
+ args: {
+ widthAsTailwindClass: /*tw*/ 'w-6/12',
+ },
+}
+
+export const TabIndexTest: Story = {
+ render: (args) => ({
+ components: { BoSlotModal, BoButton, BoText },
+
+ setup() {
+ return { args, BoFontSize, BoTextColor, BoFontWeight }
+ },
+ template: `
+
+
+
+
+ `,
+ }),
+ args: {
+ showCloseButton: false,
+ },
+}
diff --git a/src/components/bo_modal/constants.ts b/src/components/bo_modal/constants.ts
new file mode 100644
index 00000000..f3082ba9
--- /dev/null
+++ b/src/components/bo_modal/constants.ts
@@ -0,0 +1,11 @@
+export enum BoAlertModalVariant {
+ info = 'info',
+ success = 'success',
+ warning = 'warning',
+ error = 'error',
+}
+
+export enum BoAlertModalAlignment {
+ default = 'default',
+ centered = 'centered',
+}
diff --git a/src/components/bo_modal/index.ts b/src/components/bo_modal/index.ts
new file mode 100644
index 00000000..6631fdfb
--- /dev/null
+++ b/src/components/bo_modal/index.ts
@@ -0,0 +1,4 @@
+export { default as BoAlertModal } from './BoAlertModal.vue'
+export { default as BoSlotModal } from './BoSlotModal.vue'
+export * from './constants'
+export * from './types'
diff --git a/src/components/bo_modal/types.ts b/src/components/bo_modal/types.ts
new file mode 100644
index 00000000..ee227f07
--- /dev/null
+++ b/src/components/bo_modal/types.ts
@@ -0,0 +1,35 @@
+import type { BoButtonProps } from '@/components/bo_button'
+import type { StyleValue } from 'vue'
+import type { BoAlertModalAlignment, BoAlertModalVariant } from './constants'
+
+export type BoAlertModalProps = {
+ title?: string
+ content?: string
+ showCloseButton?: boolean
+ showCancelButton?: boolean
+ confirmButtonProps?: {
+ onCLick: () => void
+ props: Partial
+ }
+ cancelButtonProps?: {
+ onCLick: () => void
+ props: Partial
+ }
+ variant?: BoAlertModalVariant
+ alignment?: BoAlertModalAlignment
+ withIcon?: boolean
+}
+
+export type BoSlotModalProps = {
+ showCloseButton?: boolean
+ borderedHeader?: boolean
+ borderedFooter?: boolean
+ widthInPx?: number
+ widthInPercent?: number
+ widthAsTailwindClass?: string
+}
+
+export type BoSlotModalStyleConstruct = {
+ style: StyleValue
+ class: string
+}
diff --git a/src/components/bo_spinner/BoSpinner.vue b/src/components/bo_spinner/BoSpinner.vue
deleted file mode 100644
index 4a2236ce..00000000
--- a/src/components/bo_spinner/BoSpinner.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-
- ;
-
-export default meta;
-type Story = StoryObj;
-
-export const Example: Story = {
- args: {
- size: BoSize.default,
- variant: BoSpinnerVariant.primary,
- },
-};
-
-export const Sizes: Story = {
- render: () => ({
- components: { BoSpinner },
- template: `
- ;
-
-beforeEach(() => {
- wrapper = mount(BoSpinner, {
- props: {
- size: BoSize.default,
- variant: BoSpinnerVariant.primary,
- },
- });
-});
-
-describe('bo_spinner.vue', () => {
- test('should match snapshot', () => {
- expect(true).toBeTruthy();
- });
-
- test('should render the spinner', () => {
- expect(wrapper.find('svg')).toBeTruthy();
- });
-
- test('should have the default size', () => {
- expect(wrapper.find('w-4')).toBeTruthy();
- expect(wrapper.find('h-4')).toBeTruthy();
- });
-
- test('should have the default type', () => {
- expect(wrapper.find('fill-blue-600')).toBeTruthy();
- expect(wrapper.find('text-gray-200')).toBeTruthy();
- });
-
- test('should be able to change the size', async () => {
- await wrapper.setProps({ size: BoSize.large });
- expect(wrapper.find('w-6')).toBeTruthy();
- expect(wrapper.find('h-6')).toBeTruthy();
- });
-
- test('should be able to change the variant', async () => {
- await wrapper.setProps({ variant: BoSpinnerVariant.secondary });
- expect(wrapper.find('fill-gray-600')).toBeTruthy();
- expect(wrapper.find('text-gray-200')).toBeTruthy();
- });
-});
diff --git a/src/components/bo_spinner/bo_spinner.ts b/src/components/bo_spinner/bo_spinner.ts
deleted file mode 100644
index 432d11dc..00000000
--- a/src/components/bo_spinner/bo_spinner.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export enum BoSpinnerVariant {
- primary = 'primary',
- secondary = 'secondary',
- danger = 'danger',
- warning = 'warning',
- success = 'success',
- dark = 'dark',
- purple = 'purple',
- teal = 'teal',
- white = 'white',
-}
-
-export enum BoSpinnerSizeClasses {
- small = /*tw*/ 'w-3 h-3',
- default = /*tw*/ 'w-4 h-4',
- large = /*tw*/ 'w-6 h-6',
-}
-
-export enum BoSpinnerVariantClasses {
- primary = /*tw*/ 'text-blue-800',
- secondary = /*tw*/ 'text-gray-800',
- danger = /*tw*/ 'text-red-800',
- warning = /*tw*/ 'text-yellow-800',
- success = /*tw*/ 'text-green-800',
- dark = /*tw*/ 'text-black',
- purple = /*tw*/ 'text-purple-800',
- teal = /*tw*/ 'text-teal-800',
- white = /*tw*/ 'text-white',
-}
diff --git a/src/components/bo_spinner/index.ts b/src/components/bo_spinner/index.ts
deleted file mode 100644
index c4b48b27..00000000
--- a/src/components/bo_spinner/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as BoSpinner } from './BoSpinner.vue';
-export {
- BoSpinnerSizeClasses,
- BoSpinnerVariant,
- BoSpinnerVariantClasses,
-} from './bo_spinner';
diff --git a/src/components/bo_text/BoText.vue b/src/components/bo_text/BoText.vue
index 7864c71a..0fd337c2 100644
--- a/src/components/bo_text/BoText.vue
+++ b/src/components/bo_text/BoText.vue
@@ -1,56 +1,192 @@
{{ text }}
diff --git a/src/components/bo_text/__stories__/bo_text.mdx b/src/components/bo_text/__stories__/bo_text.mdx
index d6575366..683a401c 100644
--- a/src/components/bo_text/__stories__/bo_text.mdx
+++ b/src/components/bo_text/__stories__/bo_text.mdx
@@ -1,9 +1,9 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as BoTextStories from './bo_text.stories';
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoTextStories from './bo_text.stories'
# bo-text
@@ -19,11 +19,16 @@ A label is a small piece of text that is used to display information.
## Props
- `text` - The text to be displayed (required)
- - default: `''`
- `size` - The size of the text (optional)
- default: `BoFontSize.default`
- `weight` - The weight of the text (optional)
- default: `BoFontWeight.regular`
+- `fontFamily` - The font family of the text (optional)
+ - default: `BoFontFamily.sans`
+- `whiteSpace` - The white space of the text (optional)
+ - default: `BoTextWhiteSpace.nowrap`
+- `cssClass` - The CSS class to be applied to the text (optional)
+ - default: `undefined`
## Examples
@@ -34,16 +39,19 @@ A label is a small piece of text that is used to display information.
The `size` prop can be used to change the size of the text. The `size` prop should be a member of the `BoFontSize` enum.
-- `overline`
-- `caption`
-- `default`
-- `body`
-- `h6`
-- `h5`
-- `h4`
-- `h3`
-- `h2`
-- `h1`
+- `xs`
+- `sm`
+- `base`
+- `lg`
+- `xl`
+- `2xl`
+- `3xl`
+- `4xl`
+- `5xl`
+- `6xl`
+- `7xl`
+- `8xl`
+- `9xl`
@@ -54,6 +62,58 @@ The `weight` prop can be used to change the weight of the text. The `weight` pro
- `light`
- `regular`
- `medium`
+- `semibold`
- `bold`
+
+## Font family
+
+The `fontFamily` prop can be used to change the font family of the text. The `fontFamily` prop should be a member of the `BoFontFamily` enum.
+
+- `sans`
+- `mono`
+- `serif`
+
+
+
+# White space
+
+The `whiteSpace` prop can be used to change the white space of the text. The `whiteSpace` prop should be a member of the `BoTextWhiteSpace` enum.
+
+- `normal`
+- `nowrap`
+- `pre`
+- `pre-line`
+- `pre-wrap`
+- `break-spaces`
+
+
+
+## Colors
+
+The `color` prop can be used to change the color of the text. The `color` prop should be a member of the `BoTextColor` enum.
+
+- `inherit`
+- `current` (default)
+- `success`
+- `warning`
+- `danger`
+- `disabled`
+- `info`
+
+
+
+## Custom color
+
+The `customColor` prop can be used to change the custom color of the text.
+The `customColor` prop should be a string that represents the color in `hex` format.
+
+
+
+## Clickable
+
+To encapsulate the text in a clickable element, the `clickable` prop can be used.
+This will add a `cursor-pointer` class to the text.
+
+
diff --git a/src/components/bo_text/__stories__/bo_text.stories.ts b/src/components/bo_text/__stories__/bo_text.stories.ts
index 9a6bcd76..bc11ec12 100644
--- a/src/components/bo_text/__stories__/bo_text.stories.ts
+++ b/src/components/bo_text/__stories__/bo_text.stories.ts
@@ -1,11 +1,28 @@
-import { BoFontSize, BoFontWeight, BoText } from '@/components/bo_text';
-import { StorybookUtils } from '@/utils';
-import type { Meta, StoryObj } from '@storybook/vue3';
+import {
+ BoFontFamily,
+ BoFontSize,
+ BoFontWeight,
+ BoText,
+ BoTextAlign,
+ BoTextColor,
+ BoTextWhiteSpace,
+} from '@/components/bo_text'
+import { BoColor } from '@/data'
+import { StorybookUtils } from '@/utils'
+import type { Meta, StoryObj } from '@storybook/vue3'
const meta = {
title: 'Components/bo-text',
component: BoText,
argTypes: {
+ id: {
+ description: 'The id of the text',
+ control: { type: 'text' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ },
text: {
description: 'The text to be displayed',
control: { type: 'text' },
@@ -14,6 +31,23 @@ const meta = {
subcategory: 'required',
},
},
+ textAlign: {
+ description: 'The text align of the text',
+ control: { type: 'select' },
+ options: Object.values(BoTextAlign),
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ type: {
+ summary: 'BoTextAlign',
+ detail: StorybookUtils.stringEnumFormatter(
+ BoTextAlign,
+ 'BoTextAlign',
+ ),
+ },
+ },
+ defaultValue: BoTextAlign.left,
+ },
size: {
description: 'The size of the text',
control: { type: 'select' },
@@ -26,7 +60,7 @@ const meta = {
detail: StorybookUtils.stringEnumFormatter(BoFontSize, 'BoFontSize'),
},
},
- defaultValue: BoFontSize.default,
+ defaultValue: BoFontSize.base,
},
weight: {
description: 'The weight of the text',
@@ -45,52 +79,119 @@ const meta = {
},
defaultValue: BoFontWeight.regular,
},
+ cssClass: {
+ description: 'The CSS class to be applied to the text',
+ control: { type: 'text' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: '',
+ },
+ fontFamily: {
+ description: 'The font family of the text',
+ control: { type: 'select' },
+ options: Object.values(BoFontFamily),
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ type: {
+ summary: 'BoFontFamily',
+ detail: StorybookUtils.stringEnumFormatter(
+ BoFontFamily,
+ 'BoFontFamily',
+ ),
+ },
+ },
+ defaultValue: BoFontFamily.sans,
+ },
+ whiteSpace: {
+ description: 'The white space of the text',
+ control: { type: 'select' },
+ options: Object.values(BoTextWhiteSpace),
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ type: {
+ summary: 'BoTextWhiteSpace',
+ detail: StorybookUtils.stringEnumFormatter(
+ BoTextWhiteSpace,
+ 'BoTextWhiteSpace',
+ ),
+ },
+ },
+ defaultValue: BoTextWhiteSpace.nowrap,
+ },
+ color: {
+ description: 'The color of the text',
+ control: { type: 'select' },
+ options: Object.values(BoTextColor),
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ type: {
+ summary: 'BoTextColor',
+ detail: StorybookUtils.stringEnumFormatter(
+ BoTextColor,
+ 'BoTextColor',
+ ),
+ },
+ },
+ defaultValue: BoTextColor.current,
+ },
+ customColor: {
+ description: 'The custom color of the text',
+ control: { type: 'color' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ },
+ clickable: {
+ description: 'Whether the text is clickable',
+ control: { type: 'boolean' },
+ table: {
+ category: 'props',
+ subcategory: 'optional',
+ },
+ defaultValue: false,
+ },
},
-} satisfies Meta;
+} satisfies Meta
-export default meta;
-type Story = StoryObj;
+export default meta
+type Story = StoryObj
export const Example: Story = {
args: {
- text: 'Text',
- size: BoFontSize.default,
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ size: BoFontSize.base,
weight: BoFontWeight.regular,
},
-};
+}
export const Sizes: Story = {
render: (args) => ({
components: { BoText },
setup() {
- const sizes = [
- [BoFontSize.overline, '12px'],
- [BoFontSize.caption, '16px'],
- [BoFontSize.default, '20px'],
- [BoFontSize.body, '24px'],
- [BoFontSize.h6, '32px'],
- [BoFontSize.h5, '40px'],
- [BoFontSize.h4, '48px'],
- [BoFontSize.h3, '56px'],
- [BoFontSize.h2, '64px'],
- [BoFontSize.h1, '96px'],
- ];
+ const sizes = Object.values(BoFontSize)
+ const sizeNames = Object.keys(BoFontSize)
- return { sizes, ...args };
+ return { sizes, sizeNames, ...args }
},
template: `
+
+beforeEach(() => {
+ wrapper = mount(BoText, {
+ props: {
+ id: 'test-id',
+ text: 'Hello World!',
+ size: BoFontSize.base,
+ weight: BoFontWeight.regular,
+ fontFamily: BoFontFamily.sans,
+ whiteSpace: BoTextWhiteSpace.normal,
+ },
+ })
+})
+
+describe('bo_text.vue', () => {
+ test('the text shoudl render properly', () => {
+ expect(wrapper.find('#test-id')).toBeTruthy()
+ })
+
+ test('the text container should have the correct default classes', () => {
+ expect(wrapper.find('#test-id').classes()).toContain('bo-text')
+ expect(wrapper.find('#test-id').classes()).toContain('inline-flex')
+ expect(wrapper.find('#test-id').classes()).toContain('items-center')
+ expect(wrapper.find('#test-id').classes()).toContain('shrink')
+ })
+
+ suite('text sizes', () => {
+ test('the text should have the correct extra small size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize.xs })
+ expect(wrapper.find('#test-id').classes()).toContain('text-xs')
+ })
+
+ test('the text should have the correct small size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize.sm })
+ expect(wrapper.find('#test-id').classes()).toContain('text-sm')
+ })
+
+ test('the text should have the correct base size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize.base })
+ expect(wrapper.find('#test-id').classes()).toContain('text-base')
+ })
+
+ test('the text should have the correct large size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize.lg })
+ expect(wrapper.find('#test-id').classes()).toContain('text-lg')
+ })
+
+ test('the text should have the correct extra large size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize.xl })
+ expect(wrapper.find('#test-id').classes()).toContain('text-xl')
+ })
+
+ test('the text should have the correct 2xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['2xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-2xl')
+ })
+
+ test('the text should have the correct 3xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['3xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-3xl')
+ })
+
+ test('the text should have the correct 4xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['4xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-4xl')
+ })
+
+ test('the text should have the correct 5xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['5xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-5xl')
+ })
+
+ test('the text should have the correct 6xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['6xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-6xl')
+ })
+
+ test('the text should have the correct 7xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['7xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-7xl')
+ })
+
+ test('the text should have the correct 8xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['8xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-8xl')
+ })
+
+ test('the text should have the correct 9xl size classes', async () => {
+ await wrapper.setProps({ size: BoFontSize['9xl'] })
+ expect(wrapper.find('#test-id').classes()).toContain('text-9xl')
+ })
+ })
+
+ suite('text-cursor', () => {
+ test('the text should have the correct default cursor classes', () => {
+ expect(wrapper.find('#test-id').classes()).toContain('cursor-default')
+ })
+
+ test('the text should have the correct pointer cursor classes', async () => {
+ await wrapper.setProps({ clickable: true })
+ expect(wrapper.find('#test-id').classes()).toContain('cursor-pointer')
+ })
+ })
+
+ suite('font-weight', () => {
+ test('the text should have the correct default font weight classes', () => {
+ expect(wrapper.find('#test-id').classes()).toContain('font-normal')
+ })
+
+ test('the text should have the correct light font weight classes', async () => {
+ await wrapper.setProps({ weight: BoFontWeight.light })
+ expect(wrapper.find('#test-id').classes()).toContain('font-light')
+ })
+
+ test('the text should have the correct regular font weight classes', async () => {
+ await wrapper.setProps({ weight: BoFontWeight.regular })
+ expect(wrapper.find('#test-id').classes()).toContain('font-normal')
+ })
+
+ test('the text should have the correct medium font weight classes', async () => {
+ await wrapper.setProps({ weight: BoFontWeight.medium })
+ expect(wrapper.find('#test-id').classes()).toContain('font-medium')
+ })
+
+ test('the text should have the correct semibold font weight classes', async () => {
+ await wrapper.setProps({ weight: BoFontWeight.semibold })
+ expect(wrapper.find('#test-id').classes()).toContain('font-semibold')
+ })
+
+ test('the text should have the correct bold font weight classes', async () => {
+ await wrapper.setProps({ weight: BoFontWeight.bold })
+ expect(wrapper.find('#test-id').classes()).toContain('font-bold')
+ })
+ })
+
+ suite('font-family', () => {
+ test('the text should have the correct default font family classes', () => {
+ expect(wrapper.find('#test-id').classes()).toContain('font-sans')
+ })
+
+ test('the text should have the correct sans font family classes', async () => {
+ await wrapper.setProps({ fontFamily: BoFontFamily.sans })
+ expect(wrapper.find('#test-id').classes()).toContain('font-sans')
+ })
+
+ test('the text should have the correct mono font family classes', async () => {
+ await wrapper.setProps({ fontFamily: BoFontFamily.mono })
+ expect(wrapper.find('#test-id').classes()).toContain('font-mono')
+ })
+
+ test('the text should have the correct serif font family classes', async () => {
+ await wrapper.setProps({ fontFamily: BoFontFamily.serif })
+ expect(wrapper.find('#test-id').classes()).toContain('font-serif')
+ })
+ })
+
+ suite('white-space', () => {
+ test('the text should have the correct default white space classes', () => {
+ expect(wrapper.find('#test-id').classes()).toContain('whitespace-normal')
+ expect(wrapper.find('#test-id').classes()).toContain('text-clip')
+ })
+
+ test('the text should have the correct nowrap white space classes', async () => {
+ await wrapper.setProps({ whiteSpace: BoTextWhiteSpace.nowrap })
+ expect(wrapper.find('#test-id').classes()).toContain('truncate')
+ })
+
+ test('the text should have the correct normal white space classes', async () => {
+ await wrapper.setProps({ whiteSpace: BoTextWhiteSpace.normal })
+ expect(wrapper.find('#test-id').classes()).toContain('whitespace-normal')
+ expect(wrapper.find('#test-id').classes()).toContain('text-clip')
+ })
+
+ test('the text should have the correct pre white space classes', async () => {
+ await wrapper.setProps({ whiteSpace: BoTextWhiteSpace.pre })
+ expect(wrapper.find('#test-id').classes()).toContain('whitespace-pre')
+ expect(wrapper.find('#test-id').classes()).toContain('text-clip')
+ })
+
+ test('the text should have the correct pre-line white space classes', async () => {
+ await wrapper.setProps({ whiteSpace: BoTextWhiteSpace.pre_line })
+ expect(wrapper.find('#test-id').classes()).toContain(
+ 'whitespace-pre-line',
+ )
+ expect(wrapper.find('#test-id').classes()).toContain('text-clip')
+ })
+
+ test('the text should have the correct pre-wrap white space classes', async () => {
+ await wrapper.setProps({ whiteSpace: BoTextWhiteSpace.pre_wrap })
+ expect(wrapper.find('#test-id').classes()).toContain(
+ 'whitespace-pre-wrap',
+ )
+ expect(wrapper.find('#test-id').classes()).toContain('text-clip')
+ })
+
+ test('the text should have the correct break-spaces white space classes', async () => {
+ await wrapper.setProps({ whiteSpace: BoTextWhiteSpace.break_spaces })
+ expect(wrapper.find('#test-id').classes()).toContain('break-spaces')
+ expect(wrapper.find('#test-id').classes()).toContain('text-clip')
+ })
+ })
+
+ suite('text-color', () => {
+ test('the text should have the correct default color classes without text color', () => {
+ expect(wrapper.find('#test-id').classes()).toContain('text-current')
+ })
+
+ test('the text should have the correct default color classes with text color', async () => {
+ await wrapper.setProps({ color: BoTextColor.default })
+ expect(wrapper.find('#test-id').classes()).toContain('text-gray-900')
+ })
+
+ test('the text should have the correct current color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.current })
+ expect(wrapper.find('#test-id').classes()).toContain('text-current')
+ })
+
+ test('the text should have the correct inherit color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.inherit })
+ expect(wrapper.find('#test-id').classes()).toContain('text-inherit')
+ })
+
+ test('the text should have the correct success color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.success })
+ expect(wrapper.find('#test-id').classes()).toContain('text-green-600')
+ })
+
+ test('the text should have the correct warning color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.warning })
+ expect(wrapper.find('#test-id').classes()).toContain('text-yellow-600')
+ })
+
+ test('the text should have the correct danger color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.danger })
+ expect(wrapper.find('#test-id').classes()).toContain('text-red-600')
+ })
+
+ test('the text should have the correct secondary color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.secondary })
+ expect(wrapper.find('#test-id').classes()).toContain('text-gray-500')
+ })
+
+ test('the text should have the correct disabled color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.disabled })
+ expect(wrapper.find('#test-id').classes()).toContain('text-gray-400')
+ })
+
+ test('the text should have the correct info color classes', async () => {
+ await wrapper.setProps({ color: BoTextColor.info })
+ expect(wrapper.find('#test-id').classes()).toContain('text-blue-600')
+ })
+ })
+
+ suite('text-align', () => {
+ test('the text should have the correct default text align classes', () => {
+ expect(wrapper.find('#test-id').classes()).toContain('text-justify')
+ })
+
+ test('the text should have the correct left text align classes', async () => {
+ await wrapper.setProps({ textAlign: BoTextAlign.left })
+ expect(wrapper.find('#test-id').classes()).toContain('text-left')
+ })
+
+ test('the text should have the correct center text align classes', async () => {
+ await wrapper.setProps({ textAlign: BoTextAlign.center })
+ expect(wrapper.find('#test-id').classes()).toContain('text-center')
+ })
+
+ test('the text should have the correct right text align classes', async () => {
+ await wrapper.setProps({ textAlign: BoTextAlign.right })
+ expect(wrapper.find('#test-id').classes()).toContain('text-right')
+ })
+
+ test('the text should have the correct justify text align classes', async () => {
+ await wrapper.setProps({ textAlign: BoTextAlign.justify })
+ expect(wrapper.find('#test-id').classes()).toContain('text-justify')
+ })
+ })
+
+ suite('custom color style', () => {
+ test('the container should have the correct custom color style', async () => {
+ await wrapper.setProps({ customColor: 'red' })
+
+ const element = wrapper.find('#test-id')
+
+ const style = element.attributes('style')
+ expect(style).toBe('color: red;')
+ })
+ })
+})
diff --git a/src/components/bo_text/bo_text.ts b/src/components/bo_text/bo_text.ts
deleted file mode 100644
index 7c361539..00000000
--- a/src/components/bo_text/bo_text.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export enum BoFontWeight {
- light = 'light',
- regular = 'regular',
- medium = 'medium',
- bold = 'bold',
-}
-
-export enum BoFontSize {
- overline = 'overline',
- caption = 'caption',
- default = 'default',
- body = 'body',
- h6 = 'h6',
- h5 = 'h5',
- h4 = 'h4',
- h3 = 'h3',
- h2 = 'h2',
- h1 = 'h1',
-}
-
-export enum BoFontSizeClasses {
- overline = /*tw*/ 'text-overline leading-overline',
- caption = /*tw*/ 'text-caption leading-caption',
- default = /*tw*/ 'text-default leading-default',
- body = /*tw*/ 'text-body leading-body',
- h1 = /*tw*/ 'text-h1 leading-h1',
- h2 = /*tw*/ 'text-h2 leading-h2',
- h3 = /*tw*/ 'text-h3 leading-h3',
- h4 = /*tw*/ 'text-h4 leading-h4',
- h5 = /*tw*/ 'text-h5 leading-h5',
- h6 = /*tw*/ 'text-h6 leading-h6',
-}
-
-export enum BoTextFontWeightClasses {
- light = /*tw*/ 'font-light',
- regular = /*tw*/ 'font-normal',
- medium = /*tw*/ 'font-medium',
- bold = /*tw*/ 'font-bold',
-}
diff --git a/src/components/bo_text/constants.ts b/src/components/bo_text/constants.ts
new file mode 100644
index 00000000..7cdd6093
--- /dev/null
+++ b/src/components/bo_text/constants.ts
@@ -0,0 +1,57 @@
+export enum BoFontWeight {
+ light = 'light',
+ regular = 'regular',
+ medium = 'medium',
+ semibold = 'semibold',
+ bold = 'bold',
+}
+
+export enum BoFontSize {
+ xs = 'xs',
+ sm = 'sm',
+ base = 'base',
+ lg = 'lg',
+ xl = 'xl',
+ '2xl' = '2xl',
+ '3xl' = '3xl',
+ '4xl' = '4xl',
+ '5xl' = '5xl',
+ '6xl' = '6xl',
+ '7xl' = '7xl',
+ '8xl' = '8xl',
+ '9xl' = '9xl',
+}
+
+export enum BoFontFamily {
+ sans = 'sans',
+ mono = 'mono',
+ serif = 'serif',
+}
+
+export enum BoTextWhiteSpace {
+ normal = 'normal',
+ nowrap = 'nowrap',
+ pre = 'pre',
+ pre_line = 'pre-line',
+ pre_wrap = 'pre-wrap',
+ break_spaces = 'break-spaces',
+}
+
+export enum BoTextColor {
+ default = 'default',
+ secondary = 'secondary',
+ inherit = 'inherit',
+ current = 'currentColor',
+ success = 'success',
+ warning = 'warning',
+ danger = 'danger',
+ disabled = 'disabled',
+ info = 'info',
+}
+
+export enum BoTextAlign {
+ left = 'left',
+ center = 'center',
+ right = 'right',
+ justify = 'justify',
+}
diff --git a/src/components/bo_text/index.ts b/src/components/bo_text/index.ts
index 1658ffbb..56989dd8 100644
--- a/src/components/bo_text/index.ts
+++ b/src/components/bo_text/index.ts
@@ -1,7 +1,3 @@
-export { default as BoText } from './BoText.vue';
-export {
- BoFontSize,
- BoFontSizeClasses,
- BoFontWeight,
- BoTextFontWeightClasses,
-} from './bo_text';
+export { default as BoText } from './BoText.vue'
+export * from './constants'
+export * from './types'
diff --git a/src/components/bo_text/types.ts b/src/components/bo_text/types.ts
new file mode 100644
index 00000000..52742147
--- /dev/null
+++ b/src/components/bo_text/types.ts
@@ -0,0 +1,22 @@
+import type {
+ BoFontFamily,
+ BoFontSize,
+ BoFontWeight,
+ BoTextAlign,
+ BoTextColor,
+ BoTextWhiteSpace,
+} from './constants'
+
+export type BoTextProps = {
+ id?: string
+ text: string
+ size?: BoFontSize
+ weight?: BoFontWeight
+ fontFamily?: BoFontFamily
+ whiteSpace?: BoTextWhiteSpace
+ color?: BoTextColor
+ customColor?: string
+ cssClass?: string
+ clickable?: boolean
+ textAlign?: BoTextAlign
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 4aec7fa8..b8925e28 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,10 @@
-export * from '@/components/bo_badge';
-export * from '@/components/bo_button';
-export * from '@/components/bo_icon';
-export * from '@/components/bo_icon_button';
-export * from '@/components/bo_spinner';
-export * from '@/components/bo_text';
+export * from '@/components/bo_avatar'
+export * from '@/components/bo_badge'
+export * from '@/components/bo_button'
+export * from '@/components/bo_divider'
+export * from '@/components/bo_icon'
+export * from '@/components/bo_input'
+export * from '@/components/bo_loading_pulse'
+export * from '@/components/bo_loading_spinner'
+export * from '@/components/bo_modal'
+export * from '@/components/bo_text'
diff --git a/src/global/bo_color.ts b/src/data/bo_color.constant.ts
similarity index 100%
rename from src/global/bo_color.ts
rename to src/data/bo_color.constant.ts
diff --git a/src/global/bo_size.ts b/src/data/bo_size.constant.ts
similarity index 57%
rename from src/global/bo_size.ts
rename to src/data/bo_size.constant.ts
index 5eb9a3d3..a2711037 100644
--- a/src/global/bo_size.ts
+++ b/src/data/bo_size.constant.ts
@@ -1,5 +1,7 @@
export enum BoSize {
+ extra_small = 'extra-small',
small = 'small',
default = 'default',
large = 'large',
+ extra_large = 'extra-large',
}
diff --git a/src/data/index.ts b/src/data/index.ts
new file mode 100644
index 00000000..ed83804b
--- /dev/null
+++ b/src/data/index.ts
@@ -0,0 +1 @@
+export * from './bo_color.constant'
diff --git a/src/data/loader.constant.ts b/src/data/loader.constant.ts
new file mode 100644
index 00000000..d4133d01
--- /dev/null
+++ b/src/data/loader.constant.ts
@@ -0,0 +1,14 @@
+export enum BoLoaderVariant {
+ primary = 'primary',
+ secondary = 'secondary',
+ danger = 'danger',
+ warning = 'warning',
+ success = 'success',
+ dark = 'dark',
+ white = 'white',
+}
+
+export enum BoLoaderTextPosition {
+ side = 'side',
+ bottom = 'bottom',
+}
diff --git a/src/docs/bamboo.mdx b/src/docs/bamboo.mdx
index 7bb3af5b..7330e1ed 100644
--- a/src/docs/bamboo.mdx
+++ b/src/docs/bamboo.mdx
@@ -1,70 +1,6 @@
-import Readme from '../../README.md?raw';
-import { Meta, Markdown } from '@storybook/blocks';
+import Readme from '../../README.md?raw'
+import { Meta, Markdown } from '@storybook/blocks'
-Lightweight and flexible (hence the name) UI Library built with [Vite](https://vitejs.dev/) and [Vue 3](https://vuejs.org/). The documentation is created with [Storybook](https://storybook.js.org/).
-
-### Project setup
-
-You need to have node and npm installed on your machine as a prerequisite. You can download and install them from [here](https://nodejs.org/en/).
-
-### Install dependencies
-
-To install the dependencies, run the following command:
-
-```bash
-npm install
-```
-
-### Run documentation
-
-To start the development server, run the following command:
-
-```bash
-npm run storybook
-```
-
-This will start the Storybook server and open the browser at [http://localhost:6006](http://localhost:6006).
-Here you can see the documentation for the components and play around with them.
-
-### Build for production
-
-To build the components for production, run the following command:
-
-```bash
-npm run build
-```
-
-This will build the components and generate the static files in the `dist` folder.
-
-### Build storybook for production
-
-To build the Storybook documentation for production, run the following command:
-
-```bash
-npm run build-storybook
-```
-
-This will build the Storybook documentation and generate the static files in the `static` folder.
-GitHub Pages uses the directory to host the documentation.
-
-### Run your unit tests
-
-The project uses [Vitest](https://vitest.dev) for unit and snapshot testing. To run the tests, run the following command:
-
-```bash
-npm run test
-```
-
-### Lints and fixes files
-
-The project uses [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) for linting and formatting. To run the linter, run the following command:
-
-```bash
-npm run lint
-```
-
-### License
-
-[MIT](../../LICENSE)
+{Readme}
diff --git a/src/docs/colors.mdx b/src/docs/colors.mdx
index 5cdfb15d..0acbf52e 100644
--- a/src/docs/colors.mdx
+++ b/src/docs/colors.mdx
@@ -1,523 +1,523 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks'
-
diff --git a/src/docs/license/bamboo_license.mdx b/src/docs/license/bamboo_license.mdx
index 0e0d841d..f97f031a 100644
--- a/src/docs/license/bamboo_license.mdx
+++ b/src/docs/license/bamboo_license.mdx
@@ -1,5 +1,5 @@
-import License from '../../../LICENSE?raw';
-import { Meta, Markdown } from '@storybook/blocks';
+import License from '../../../LICENSE?raw'
+import { Meta, Markdown } from '@storybook/blocks'
diff --git a/src/docs/license/feather_license.mdx b/src/docs/license/feather_license.mdx
deleted file mode 100644
index ddf17b03..00000000
--- a/src/docs/license/feather_license.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import License from '../../../vendor/feather_license.md?raw';
-import { Meta, Markdown } from '@storybook/blocks';
-
-
-
-{License}
diff --git a/src/global/html_button.ts b/src/global/html_button.ts
new file mode 100644
index 00000000..8d98aa63
--- /dev/null
+++ b/src/global/html_button.ts
@@ -0,0 +1,5 @@
+export enum HtmlButtonType {
+ button = 'button',
+ submit = 'submit',
+ reset = 'reset',
+}
diff --git a/src/global/html_input.ts b/src/global/html_input.ts
new file mode 100644
index 00000000..814fed23
--- /dev/null
+++ b/src/global/html_input.ts
@@ -0,0 +1,24 @@
+export enum HtmlInputType {
+ button = 'button',
+ checkbox = 'checkbox',
+ color = 'color',
+ date = 'date',
+ datetime_local = 'datetime-local',
+ email = 'email',
+ file = 'file',
+ hidden = 'hidden',
+ image = 'image',
+ month = 'month',
+ number = 'number',
+ password = 'password',
+ radio = 'radio',
+ range = 'range',
+ reset = 'reset',
+ search = 'search',
+ submit = 'submit',
+ tel = 'tel',
+ text = 'text',
+ time = 'time',
+ url = 'url',
+ week = 'week',
+}
diff --git a/src/global/index.ts b/src/global/index.ts
index 8e9d494b..289229ec 100644
--- a/src/global/index.ts
+++ b/src/global/index.ts
@@ -1,2 +1,2 @@
-export { BoColor } from './bo_color';
-export { BoSize } from './bo_size';
+export * from './html_button'
+export * from './html_input'
diff --git a/src/index.ts b/src/index.ts
index e56abfc9..71215f08 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
-export * from './components';
-export * from './global';
-export * from './utils';
+export * from './components'
+export * from './data'
+export * from './global'
+export * from './utils'
diff --git a/src/index.css b/src/lib.css
similarity index 100%
rename from src/index.css
rename to src/lib.css
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 00000000..57fe34e6
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1 @@
+export * from './style'
diff --git a/src/types/style.ts b/src/types/style.ts
new file mode 100644
index 00000000..3a504f04
--- /dev/null
+++ b/src/types/style.ts
@@ -0,0 +1,6 @@
+import type { StyleValue } from 'vue'
+
+export type StyleConstruct = {
+ style: StyleValue
+ class: string
+}
diff --git a/src/utils/__stories__/identity_utils.mdx b/src/utils/__stories__/identity_utils.mdx
new file mode 100644
index 00000000..8d022765
--- /dev/null
+++ b/src/utils/__stories__/identity_utils.mdx
@@ -0,0 +1,43 @@
+import { Meta, Story } from '@storybook/blocks'
+import { IdentityUtils } from '@/utils'
+
+
+
+# IdentityUtils
+
+The `IdentityUtils` class is a utility class that provides a collection of
+`static` methods to make identity management easier.
+
+## Methods
+
+## generateRandomId
+
+```ts
+generateRandomId(): string
+```
+
+The `generateRandomId` method is used to generate a new random identity.
+
+- Returns: A random id as a `string`.
+
+```ts
+IdentityUtils.instance.generateRandomId() // "lqjxigk"
+```
+
+## generateRandomIdWithPrefix
+
+```ts
+generateRandomIdWithPrefix(prefix: string): string
+```
+
+The `generateRandomIdWithPrefix` method is used to generate a new random identity with the specified prefix.
+
+- Parameters:
+
+ - `prefix`: The prefix to be added to the random id.
+
+- Returns: A random id with the specified prefix as a `string`.
+
+```ts
+IdentityUtils.instance.generateRandomIdWithPrefix('my-prefix') // "my-prefix-lqjxigk"
+```
diff --git a/src/utils/__stories__/keyboard_utils.mdx b/src/utils/__stories__/keyboard_utils.mdx
new file mode 100644
index 00000000..69035c44
--- /dev/null
+++ b/src/utils/__stories__/keyboard_utils.mdx
@@ -0,0 +1,60 @@
+import { Meta, Story } from '@storybook/blocks'
+import { KeyboardUtils } from '@/utils'
+
+
+
+# KeyboardUtils
+
+The `KeyboardUtils` class is a utility class that provides a collection of
+`static` methods to support keyboard related interactions.
+
+## Methods
+
+## trapTabKey
+
+```ts
+trapTabKey(e: KeyboardEvent, id: string): void
+```
+
+The `trapTabKey` method is used to trap the tab key within an element with the specified id.
+
+- Parameters:
+
+ - `e`: The `KeyboardEvent` object.
+ - `id`: The id of the element where the tab key should be trapped.
+
+- Returns: `void`
+
+```html
+ | undefined = document
+ ?.querySelector(`#${id}`)
+ ?.querySelectorAll('[tabindex]')
+
+ if (!focusable?.length) {
+ return
+ }
+
+ const sorted = [...focusable].sort((a, b) => {
+ return (
+ parseInt(a.getAttribute('tabindex') ?? '0') -
+ parseInt(b.getAttribute('tabindex') ?? '0')
+ )
+ })
+
+ const shift = e.shiftKey
+ const first = sorted[0]
+ const last = sorted[sorted.length - 1]
+
+ const firstHtmlElement = first as HTMLElement
+ const lastHtmlElement = last as HTMLElement
+
+ if (shift) {
+ if (e.target === first) {
+ lastHtmlElement.focus()
+ e.preventDefault()
+ }
+ } else {
+ if (e.target === last) {
+ firstHtmlElement.focus()
+ e.preventDefault()
+ }
+ }
+ }
+ }
+
+ static registerEnterKeyHandler(e: KeyboardEvent, handler: () => void): void {
+ e.preventDefault()
+
+ const isEnter = e.key === 'Enter' || e.keyCode === 13
+
+ if (!isEnter) {
+ return
+ }
+
+ handler()
+ }
+}
diff --git a/src/utils/storybook_utils.ts b/src/utils/storybook_utils.ts
index d3490eaa..24937ff6 100644
--- a/src/utils/storybook_utils.ts
+++ b/src/utils/storybook_utils.ts
@@ -1,4 +1,9 @@
export class StorybookUtils {
+ /**
+ * @description
+ * This method generates a string representation of an enum in
+ * a readable format.
+ */
static stringEnumFormatter(
stringEnum: { [key: string]: string },
name: string,
@@ -10,10 +15,14 @@ export class StorybookUtils {
` ${m} = "${stringEnum[m as keyof typeof stringEnum]}",`,
)
.join('\r\n') + '\r\n}'
- }`;
+ }`
}
-
+ /**
+ * @description
+ * This method generates a string representation of an array in
+ * a readable format.
+ */
static arrayFormatter(array: string[], name: string): string {
- return `array ${name} {\n${array.map((m: string) => ` ${m},`).join('\r\n')}\r\n}`;
+ return `array ${name} {\n${array.map((m: string) => ` ${m},`).join('\r\n')}\r\n}`
}
}
diff --git a/src/utils/string_utils.ts b/src/utils/string_utils.ts
index c548bc4d..93503af5 100644
--- a/src/utils/string_utils.ts
+++ b/src/utils/string_utils.ts
@@ -1,15 +1,53 @@
export class StringUtils {
+ /**
+ * @description
+ * This method capitalizes the first letter of a string.
+ *
+ * @example
+ * capitalize('hello world'); // Hello world
+ */
static capitalize(str: string): string {
- return str.charAt(0).toUpperCase() + str.slice(1);
+ return str.charAt(0).toUpperCase() + str.slice(1)
}
-
+ /**
+ * @description
+ * This method converts a string to title case.
+ *
+ * @example
+ * camelCaseToTitleCase('helloWorld'); // Hello World
+ */
static camelCaseToTitleCase(str: string): string {
- return str.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase());
+ return str
+ .replace(/([A-Z])/g, ' $1')
+ .replace(/^./, (s) => s.toUpperCase())
+ .trim()
}
-
- static isEmpty(str: string): boolean {
+ /**
+ * @description
+ * This method checks if a string is empty, null, or undefined.
+ *
+ * @example
+ * isEmptyStr(''); // true
+ * isEmptyStr('hello world'); // false
+ * isEmptyStr(null); // true
+ */
+ static isEmptyStr(str: unknown): boolean {
return (
- typeof str === 'string' && str.length === 0 && str.trim().length === 0
- );
+ (typeof str === 'string' && str.trim().length === 0) ||
+ str === null ||
+ str === undefined
+ )
+ }
+ /**
+ * @description
+ * This method returns an empty string if the input is empty or null, otherwise it returns the input as a string.
+ *
+ * @example
+ * safeString(''); // ''
+ * safeString('hello world'); // 'hello world'
+ * safeString(null); // ''
+ */
+ static safeString(str: unknown): string {
+ return StringUtils.isEmptyStr(str) ? '' : String(str)
}
}
diff --git a/src/utils/tailwind_utils.ts b/src/utils/tailwind_utils.ts
index f908c245..db8a16db 100644
--- a/src/utils/tailwind_utils.ts
+++ b/src/utils/tailwind_utils.ts
@@ -1,14 +1,26 @@
export class TailwindUtils {
+ /**
+ * @description
+ * This method merges multiple classes into a single class that can later
+ * directly be applied to an element.
+ *
+ * @example
+ * merge('bg-blue-500', 'text-white', 'rounded-lg'); // bg-blue-500 text-white rounded-lg
+ *
+ * In case a null or undefined value is passed, it will be ignored.
+ *
+ * merge('bg-blue-500', null, 'text-white', 'rounded-lg'); // bg-blue-500 text-white rounded-lg
+ */
static merge(...classes: (string | null | undefined)[]): string {
return Array.from(
- new Set([
- ...classes
- .filter(Boolean)
+ new Set(
+ classes
+ .filter((f) => f !== null && f !== undefined)
.map((c) => {
- return c?.split(' ');
+ return c.split(' ')
})
.flat(),
- ]),
- ).join(' ');
+ ),
+ ).join(' ')
}
}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index c715d8d9..00000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
- darkMode: 'class',
- content: ['./src/**/*.{vue,ts}'],
- theme: {
- extend: {
- width: {
- small: '12px',
- default: '14px',
- large: '18px',
- },
- height: {
- small: '12px',
- default: '14px',
- large: '18px',
- },
- fontSize: {
- overline: '10px',
- caption: '12px',
- default: '14px',
- body: '16px',
- h6: '20px',
- h5: '24px',
- h4: '34px',
- h3: '48px',
- h2: '60px',
- h1: '96px',
- },
- lineHeight: {
- overline: '12px',
- caption: '16px',
- default: '20px',
- body: '24px',
- h6: '32px',
- h5: '40px',
- h4: '48px',
- h3: '56px',
- h2: '64px',
- h1: '96px',
- },
- },
- },
- plugins: [['postcss-import', {}], 'tailwindcss', ['postcss-preset-env', {}]],
-};
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
new file mode 100644
index 00000000..8e97f927
--- /dev/null
+++ b/tailwind.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ['./src/**/*.{js,ts,vue}'],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 00000000..913b8f27
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+ "extends": "@vue/tsconfig/tsconfig.dom.json",
+ "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+ "exclude": ["src/**/__tests__/*"],
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ }
+}
diff --git a/tsconfig.json b/tsconfig.json
index f2a1c535..100cf6a8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,14 @@
{
- "extends": "@vue/tsconfig/tsconfig.dom.json",
- "compilerOptions": {
- "allowJs": true,
- "target": "ESNext",
- "module": "ESNext",
- "alwaysStrict": true,
- "lib": ["ESNext", "DOM"],
- "types": ["node", "jsdom"],
- "moduleResolution": "Bundler",
- "baseUrl": ".",
- "paths": {
- "@/*": ["./src/*"]
- }
- },
- "include": ["env.d.ts", "src/**/*.ts", "src/**/*.vue", "*.config.*"],
- "exclude": ["node_modules", "dist", "docs"]
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.vitest.json"
+ }
+ ]
}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..4c399c2c
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,18 @@
+{
+ "extends": "@tsconfig/node22/tsconfig.json",
+ "include": [
+ "vite.config.*",
+ "vitest.config.*",
+ "cypress.config.*",
+ "nightwatch.conf.*",
+ "playwright.config.*"
+ ],
+ "compilerOptions": {
+ "noEmit": true,
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "types": ["node"]
+ }
+}
diff --git a/tsconfig.vitest.json b/tsconfig.vitest.json
new file mode 100644
index 00000000..7d1d8cef
--- /dev/null
+++ b/tsconfig.vitest.json
@@ -0,0 +1,11 @@
+{
+ "extends": "./tsconfig.app.json",
+ "include": ["src/**/__tests__/*", "env.d.ts"],
+ "exclude": [],
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+ "lib": [],
+ "types": ["node", "jsdom"]
+ }
+}
diff --git a/vendor/feather_license.md b/vendor/feather_license.md
deleted file mode 100644
index 1f4f4336..00000000
--- a/vendor/feather_license.md
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2013-2023 Cole Bemis
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/vite.config.ts b/vite.config.ts
index d39c43d9..9e38d63b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,45 +1,26 @@
-import vue from '@vitejs/plugin-vue';
-import { fileURLToPath, URL } from 'node:url';
-import viteCompression from 'vite-plugin-compression';
-import dts from 'vite-plugin-dts';
-import svgLoader from 'vite-svg-loader';
-import { defineConfig, type UserConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import vueDevTools from 'vite-plugin-vue-devtools'
+import svgLoader from 'vite-svg-loader'
-/**
- * @see https://vitejs.dev/config/
- */
-const bambooLibConfig: UserConfig = defineConfig({
+// https://vite.dev/config/
+export default defineConfig({
plugins: [
vue(),
- dts(),
+ dts({
+ rollupTypes: true,
+ tsconfigPath: './tsconfig.app.json',
+ }),
svgLoader(),
- viteCompression({ algorithm: 'gzip', ext: '.gz' }),
- viteCompression({ algorithm: 'brotliCompress', ext: '.br' }),
+ vueDevTools(),
],
build: {
- minify: true,
- emptyOutDir: true,
- cssMinify: true,
- cssCodeSplit: true,
lib: {
+ entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
name: 'bamboo',
- formats: ['es', 'cjs'],
- entry: ['src/index.ts'],
- fileName: (format, entry) => {
- if (entry === 'main') return `index.${format}.js`;
- return `${entry}.${format}.js`;
- },
- },
- rollupOptions: {
- treeshake: true,
- external: ['vue'],
- output: {
- exports: 'named',
- globals: { vue: 'Vue' },
- },
- input: {
- main: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
- },
+ fileName: 'bamboo',
},
},
resolve: {
@@ -47,6 +28,4 @@ const bambooLibConfig: UserConfig = defineConfig({
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
-});
-
-export default bambooLibConfig;
+})
diff --git a/vitest.config.ts b/vitest.config.ts
index fccdd304..2b69a8c5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,21 +1,14 @@
-import { configDefaults, defineConfig, mergeConfig } from 'vitest/config';
-import viteConfig from './vite.config';
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
-const bambooTestConfig = mergeConfig(
+export default mergeConfig(
viteConfig,
defineConfig({
test: {
- alias: {
- '@/': new URL('./src/', import.meta.url).pathname,
- },
- coverage: {
- provider: 'v8',
- reporter: ['text', 'json-summary', 'json'],
- },
environment: 'jsdom',
- exclude: [...configDefaults.exclude],
+ exclude: [...configDefaults.exclude, 'e2e/**'],
+ root: fileURLToPath(new URL('./', import.meta.url)),
},
}),
-);
-
-export default bambooTestConfig;
+)
-
`,
@@ -137,4 +138,4 @@ export const AllIcons: Story = {
args: {
icon: Icon.activity,
},
-};
+}
diff --git a/src/components/bo_icon/__tests__/__snapshots__/bo_icon.test.ts.snap b/src/components/bo_icon/__tests__/__snapshots__/bo_icon.test.ts.snap
deleted file mode 100644
index c845290a..00000000
--- a/src/components/bo_icon/__tests__/__snapshots__/bo_icon.test.ts.snap
+++ /dev/null
@@ -1,6 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`bo_icon.vue > should match snapshot 1`] = `
-"
-"
-`;
diff --git a/src/components/bo_icon/__tests__/bo_icon.test.ts b/src/components/bo_icon/__tests__/bo_icon.test.ts
index 682fa908..274a0926 100644
--- a/src/components/bo_icon/__tests__/bo_icon.test.ts
+++ b/src/components/bo_icon/__tests__/bo_icon.test.ts
@@ -1,9 +1,10 @@
-import { BoIcon, Icon } from '@/components/bo_icon';
-import { BoSize } from '@/global';
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, test } from 'vitest';
+import { BoIcon, Icon } from '@/components/bo_icon'
+import { BoSize } from '@/data/bo_size.constant'
-let wrapper: ReturnType
-
-
- `,
- }),
- args: {
- icon: Icon.activity,
- },
-};
-
-export const Variants: Story = {
- render: (args) => ({
- components: { BoIconButton },
- setup() {
- const variants = Object.values(BoIconButtonVariant);
- return { variants, ...args };
- },
- template: `
-
-
-
- `,
- }),
- args: {
- icon: Icon.activity,
- },
-};
-
-export const Shapes: Story = {
- render: (args) => ({
- components: { BoIconButton },
- setup() {
- const shapes = Object.values(BoIconButtonShape);
- return { shapes, ...args };
- },
- template: `
-
-
-
- `,
- }),
- args: {
- icon: Icon.activity,
- },
-};
-
-export const Styles: Story = {
- render: (args) => ({
- components: { BoIconButton },
- setup() {
- const styles = Object.values(BoIconButtonStyle);
- return { styles, ...args };
- },
- template: `
-
-
-
- `,
- }),
- args: {
- icon: Icon.activity,
- },
-};
-
-export const Disabled: Story = {
- render: (args) => {
- const disabled = true;
- return {
- components: { BoIconButton },
- setup() {
- return { disabled, ...args };
- },
- template: `
-
-
-
- `,
- };
- },
- args: {
- disabled: true,
- icon: Icon.activity,
- },
-};
-
-export const IsLoading: Story = {
- render: (args) => ({
- components: { BoIconButton },
- setup() {
- const isLoading = true;
- return { isLoading, ...args };
- },
- template: `
-
-
-
- `,
- }),
- args: {
- icon: Icon.activity,
- },
-};
-
-export const AllVariantAndShapes: Story = {
- render: (args) => ({
- components: { BoIconButton },
- setup() {
- const variants = Object.values(BoIconButtonVariant);
- const shapes = Object.values(BoIconButtonShape);
- return { variants, shapes, ...args };
- },
- template: `
- All variants and shapes
-
-
-
-
- All variants and shapes with loading
-
-
-
-
- All variants and shapes with loading
-
-
-
-
- All variants and shapes with disabled
-
-
-
-
- `,
- }),
- args: {
- icon: Icon.activity,
- },
-};
-
-export const Links: Story = {
- render: (args) => ({
- components: { BoIconButton },
- setup() {
- const variants = Object.values(BoIconButtonVariant).filter((v) =>
- v.includes('link'),
- );
-
- return { variants, ...args };
- },
- template: `
- Links
-
-
-
- `,
- }),
- args: {
- icon: Icon.activity,
- },
-};
diff --git a/src/components/bo_icon_button/__tests__/bo_icon_button.test.ts b/src/components/bo_icon_button/__tests__/bo_icon_button.test.ts
deleted file mode 100644
index b15f5c00..00000000
--- a/src/components/bo_icon_button/__tests__/bo_icon_button.test.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Icon } from '@/components/bo_icon';
-import { BoSize } from '@/global';
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, test } from 'vitest';
-import { BoIconButton, BoIconButtonVariant } from '..';
-
-let wrapper: ReturnType
+
+
+
+
+
diff --git a/src/components/bo_input/__stories__/bo_input.mdx b/src/components/bo_input/__stories__/bo_input.mdx
new file mode 100644
index 00000000..6958ef86
--- /dev/null
+++ b/src/components/bo_input/__stories__/bo_input.mdx
@@ -0,0 +1,126 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoInputStories from './bo_input.stories'
+
+
+
+# bo-input
+
+A input is a control that allows the user to enter and edit text in a single line.
+
+## Basic usage
+
+The component to use is called `bo-input`.
+
+```html
+
+
+
+
+
+
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ },
+}
+
+export const Disabled: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ modelValue: 'Hello world!',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ disabled: true,
+ },
+}
+
+export const Readonly: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ modelValue: 'Hello world!',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ readonly: true,
+ },
+}
+
+export const States: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ const states = Object.values(BoInputState)
+ return { states, ...args, generateRandomId }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ },
+}
+
+export const Loading: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ isLoading: true,
+ },
+}
+
+export const WithLoaderVariantSpinner: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ return { args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ isLoading: true,
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ },
+}
+
+export const Required: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+
+
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ state: BoInputState.invalid,
+ required: true,
+ },
+}
+
+export const Error: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ state: BoInputState.invalid,
+ errorMessage: 'This field is required',
+ },
+}
+
+export const Icons: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ const sizes = Object.values(BoInputSize)
+
+ return { sizes, ...args, generateRandomId }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ prefixIcon: Icon.alert_circle,
+ suffixIcon: Icon.alert_circle,
+ isLoading: true,
+ },
+}
+
+export const IconsWithLoader: Story = {
+ render: (args) => ({
+ components: { BoInput },
+ setup() {
+ const sizes = Object.values(BoInputSize)
+
+ return { sizes, ...args, generateRandomId }
+ },
+ template: `
+
+
+
+
+
+
+ `,
+ }),
+ args: {
+ modelValue: '',
+ label: 'Name',
+ description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ prefixIcon: Icon.alert_circle,
+ suffixIcon: Icon.alert_circle,
+ isLoading: true,
+ },
+}
diff --git a/src/components/bo_input/constants.ts b/src/components/bo_input/constants.ts
new file mode 100644
index 00000000..674da6ae
--- /dev/null
+++ b/src/components/bo_input/constants.ts
@@ -0,0 +1,11 @@
+export enum BoInputSize {
+ small = 'small',
+ default = 'default',
+ large = 'large',
+}
+
+export enum BoInputState {
+ none = 'none',
+ valid = 'valid',
+ invalid = 'invalid',
+}
diff --git a/src/components/bo_input/index.ts b/src/components/bo_input/index.ts
new file mode 100644
index 00000000..4a425ce1
--- /dev/null
+++ b/src/components/bo_input/index.ts
@@ -0,0 +1,3 @@
+export { default as BoInput } from './BoInput.vue'
+export * from './constants'
+export * from './types'
diff --git a/src/components/bo_input/types.ts b/src/components/bo_input/types.ts
new file mode 100644
index 00000000..8918243a
--- /dev/null
+++ b/src/components/bo_input/types.ts
@@ -0,0 +1,33 @@
+import type { Icon } from '@/components/bo_icon'
+import type { HtmlInputType } from '@/global'
+import type { BoInputSize, BoInputState } from './constants'
+
+export type BoInputProps = {
+ modelValue?: string
+ id?: string
+ label?: string
+ description?: string
+ type?:
+ | HtmlInputType.text
+ | HtmlInputType.number
+ | HtmlInputType.email
+ | HtmlInputType.password
+ | HtmlInputType.tel
+ | HtmlInputType.url
+ | HtmlInputType.date
+ | HtmlInputType.time
+ | HtmlInputType.week
+ | HtmlInputType.month
+ | HtmlInputType.datetime_local
+ size?: BoInputSize
+ state?: BoInputState
+ disabled?: boolean
+ isLoading?: boolean
+ placeholder?: string
+ required?: boolean
+ readonly?: boolean
+ prefixIcon?: Icon | null
+ suffixIcon?: Icon | null
+ errorMessage?: string | null
+ loaderVariant?: 'spinner' | 'pulse'
+}
diff --git a/src/components/bo_loading_pulse/BoLoadingPulse.vue b/src/components/bo_loading_pulse/BoLoadingPulse.vue
new file mode 100644
index 00000000..8e527f01
--- /dev/null
+++ b/src/components/bo_loading_pulse/BoLoadingPulse.vue
@@ -0,0 +1,138 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/bo_loading_pulse/__stories__/bo_loading_pulse.mdx b/src/components/bo_loading_pulse/__stories__/bo_loading_pulse.mdx
new file mode 100644
index 00000000..abde58e8
--- /dev/null
+++ b/src/components/bo_loading_pulse/__stories__/bo_loading_pulse.mdx
@@ -0,0 +1,84 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoLoadingPulseStories from './bo_loading_pulse.stories'
+
+
+
+# bo-loading-pulse
+
+A loading pulse is a graphical representation of an object or action that is being processed.
+
+## Basic usage
+
+```html
+
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+}
+
+export const Sizes: Story = {
+ render: (args) => ({
+ components: { BoLoadingPulse },
+ setup() {
+ const sizes = Object.values(BoSize)
+ return { sizes, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+}
+
+export const CustomColor: Story = {
+ render: (args) => ({
+ components: { BoLoadingPulse },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ customColor: BoColor.purple_400,
+ },
+}
+
+export const WithLoaderText: Story = {
+ render: (args) => ({
+ components: { BoLoadingPulse },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ loaderText: 'Loading...',
+ },
+}
+
+export const TextPosition: Story = {
+ render: (args) => ({
+ components: { BoLoadingPulse },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ loaderText: 'Loading...',
+ textPosition: BoLoaderTextPosition.side,
+ },
+}
diff --git a/src/components/bo_loading_pulse/__test__/bo_loading_pulse.test.ts b/src/components/bo_loading_pulse/__test__/bo_loading_pulse.test.ts
new file mode 100644
index 00000000..777de152
--- /dev/null
+++ b/src/components/bo_loading_pulse/__test__/bo_loading_pulse.test.ts
@@ -0,0 +1,156 @@
+import { BoLoadingPulse } from '@/components/bo_loading_pulse'
+import { BoText } from '@/components/bo_text'
+import { BoSize } from '@/data/bo_size.constant'
+import { BoLoaderTextPosition, BoLoaderVariant } from '@/data/loader.constant'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, suite, test } from 'vitest'
+
+let globalWrapper: ReturnType
+
+
+
+
+
+
diff --git a/src/components/bo_loading_spinner/__stories__/bo_loading_spinner.mdx b/src/components/bo_loading_spinner/__stories__/bo_loading_spinner.mdx
new file mode 100644
index 00000000..1d2ea9c9
--- /dev/null
+++ b/src/components/bo_loading_spinner/__stories__/bo_loading_spinner.mdx
@@ -0,0 +1,84 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoLoadingSpinnerStories from './bo_loading_spinner.stories'
+
+
+
+# bo-loading-spinner
+
+A loading spinner is a graphical representation of an object or action that is being processed.
+
+## Basic usage
+
+```html
+
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+}
+
+export const Sizes: Story = {
+ render: (args) => ({
+ components: { BoLoadingSpinner },
+ setup() {
+ const sizes = Object.values(BoSize)
+ return { sizes, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ },
+}
+
+export const WithLoaderText: Story = {
+ render: (args) => ({
+ components: { BoLoadingSpinner },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ loaderText: 'Loading...',
+ },
+}
+
+export const CustomColor: Story = {
+ render: (args) => ({
+ components: { BoLoadingSpinner },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ customColor: BoColor.purple_400,
+ },
+}
+
+export const TextPosition: Story = {
+ render: (args) => ({
+ components: { BoLoadingSpinner },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ size: BoSize.default,
+ variant: BoLoaderVariant.primary,
+ loaderText: 'Loading...',
+ textPosition: BoLoaderTextPosition.side,
+ },
+}
diff --git a/src/components/bo_loading_spinner/__tests__/bo_loading_spinner.test.ts b/src/components/bo_loading_spinner/__tests__/bo_loading_spinner.test.ts
new file mode 100644
index 00000000..a16fb9ea
--- /dev/null
+++ b/src/components/bo_loading_spinner/__tests__/bo_loading_spinner.test.ts
@@ -0,0 +1,144 @@
+import { BoLoadingSpinner } from '@/components/bo_loading_spinner'
+import BoText from '@/components/bo_text/BoText.vue'
+import { BoSize } from '@/data/bo_size.constant'
+import { BoLoaderTextPosition, BoLoaderVariant } from '@/data/loader.constant'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, suite, test } from 'vitest'
+
+let globalWrapper: ReturnType
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/bo_modal/__stories__/bo_alert_modal.mdx b/src/components/bo_modal/__stories__/bo_alert_modal.mdx
new file mode 100644
index 00000000..ac45e6a7
--- /dev/null
+++ b/src/components/bo_modal/__stories__/bo_alert_modal.mdx
@@ -0,0 +1,72 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import * as BoAlertModalStories from './bo_alert_modal.stories'
+
+
+
+# bo-alert-modal
+
+An alert modal is a component that can be used to display an alert dialog. It supports
+different variants (info, warning, error, success) and alignments (centered, default).
+
+## Basic usage
+
+The component to use is called `bo-alert-modal`.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- {{ loaderText }}
-
-
-
-
-
diff --git a/src/components/bo_spinner/__stories__/bo_spinner.mdx b/src/components/bo_spinner/__stories__/bo_spinner.mdx
deleted file mode 100644
index 27ec97ea..00000000
--- a/src/components/bo_spinner/__stories__/bo_spinner.mdx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as BoSpinnerStories from './bo_spinner.stories';
-
-
-
-# bo-spinner
-
-A spinner is a graphical representation of an object or action that is being processed.
-
-## Basic usage
-
-```html
-
-
- `,
- }),
- args: {
- size: BoSize.default,
- variant: BoSpinnerVariant.primary,
- },
-};
-
-export const Variants: Story = {
- render: () => ({
- components: { BoSpinner },
- template: `
-
-
- `,
- }),
- args: {
- size: BoSize.default,
- variant: BoSpinnerVariant.primary,
- },
-};
-
-export const WithLoaderText: Story = {
- render: () => ({
- components: { BoSpinner },
- template: `
-
-
- `,
- }),
- args: {
- size: BoSize.default,
- variant: BoSpinnerVariant.primary,
- },
-};
-
-export const SizesWithLoaderText: Story = {
- render: () => ({
- components: { BoSpinner },
- template: `
-
-
- `,
- }),
- args: {
- size: BoSize.default,
- variant: BoSpinnerVariant.primary,
- },
-};
diff --git a/src/components/bo_spinner/__tests__/bo_spinner.test.ts b/src/components/bo_spinner/__tests__/bo_spinner.test.ts
deleted file mode 100644
index 900ee261..00000000
--- a/src/components/bo_spinner/__tests__/bo_spinner.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { BoSize } from '@/global';
-import { mount } from '@vue/test-utils';
-import { beforeEach, describe, expect, test } from 'vitest';
-import { BoSpinner, BoSpinnerVariant } from '..';
-
-let wrapper: ReturnType
-
-
`,
}),
args: {
- text: 'Text',
+ text: 'Lorem ipsum',
},
-};
+}
export const Weights: Story = {
render: (args) => ({
@@ -100,21 +201,145 @@ export const Weights: Story = {
[BoFontWeight.light, 'light'],
[BoFontWeight.regular, 'regular'],
[BoFontWeight.medium, 'medium'],
+ [BoFontWeight.semibold, 'semibold'],
[BoFontWeight.bold, 'bold'],
- ];
+ ]
- return { weights, ...args };
+ return { weights, ...args }
},
template: `
-
+ `,
+ }),
+ args: {
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ },
+}
+
+export const FontFamilies: Story = {
+ render: (args) => ({
+ components: { BoText },
+ setup() {
+ const fontFamilies = [
+ [BoFontFamily.sans, 'Sans'],
+ [BoFontFamily.mono, 'Mono'],
+ [BoFontFamily.serif, 'Serif'],
+ ]
+
+ return { fontFamilies, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ },
+}
+
+export const WhiteSpace: Story = {
+ render: (args) => ({
+ components: { BoText },
+ setup() {
+ const whiteSpaces = [
+ [BoTextWhiteSpace.normal, 'normal'],
+ [BoTextWhiteSpace.nowrap, 'nowrap'],
+ [BoTextWhiteSpace.pre, 'pre'],
+ [BoTextWhiteSpace.pre_line, 'pre-line'],
+ [BoTextWhiteSpace.pre_wrap, 'pre-wrap'],
+ [BoTextWhiteSpace.break_spaces, 'break-spaces'],
+ ]
+
+ return { whiteSpaces, ...args }
+ },
+ template: `
+
+
+
+ `,
+ }),
+ args: {
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ },
+}
+
+export const Colors: Story = {
+ render: (args) => ({
+ components: { BoText },
+ setup() {
+ const colors = [
+ [BoTextColor.default, 'default'],
+ [BoTextColor.current, 'current'],
+ [BoTextColor.inherit, 'inherit'],
+ [BoTextColor.secondary, 'secondary'],
+ [BoTextColor.success, 'success'],
+ [BoTextColor.warning, 'warning'],
+ [BoTextColor.danger, 'danger'],
+ [BoTextColor.disabled, 'disabled'],
+ [BoTextColor.info, 'info'],
+ ]
+
+ return { colors, ...args }
+ },
+ template: `
+
+
+
`,
}),
args: {
- text: 'Text',
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ },
+}
+
+export const CustomColor: Story = {
+ render: (args) => ({
+ components: { BoText },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ customColor: BoColor.purple_400,
+ },
+}
+
+export const Clickable: Story = {
+ render: (args) => ({
+ components: { BoText },
+ setup() {
+ return { ...args }
+ },
+ template: `
+
+
+ `,
+ }),
+ args: {
+ text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ clickable: true,
},
-};
+}
diff --git a/src/components/bo_text/__tests__/bo_text.test.ts b/src/components/bo_text/__tests__/bo_text.test.ts
new file mode 100644
index 00000000..7e997e09
--- /dev/null
+++ b/src/components/bo_text/__tests__/bo_text.test.ts
@@ -0,0 +1,303 @@
+import {
+ BoFontFamily,
+ BoFontSize,
+ BoFontWeight,
+ BoText,
+ BoTextAlign,
+ BoTextColor,
+ BoTextWhiteSpace,
+} from '@/components/bo_text'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, suite, test } from 'vitest'
+
+let wrapper: ReturnType
+
+
+```
+
+## registerEnterKeyHandler
+
+```ts
+registerEnterKeyHandler(e: KeyboardEvent, handler: () => void): void
+```
+
+The `registerEnterKeyHandler` method is used to trigger a handler when the enter key is pressed
+without the need to implement the required checks manually.
+
+- Parameters:
+
+ - `e`: The `KeyboardEvent` object.
+ - `handler`: The handler function that will be called when the enter key is pressed.
+
+- Returns: `void`
+
+```html
+
+
+
+```
diff --git a/src/utils/__stories__/storybook_utils.mdx b/src/utils/__stories__/storybook_utils.mdx
new file mode 100644
index 00000000..64e9249f
--- /dev/null
+++ b/src/utils/__stories__/storybook_utils.mdx
@@ -0,0 +1,65 @@
+import { Meta, Story } from '@storybook/blocks'
+import { StorybookUtils } from '@/utils'
+
+
+
+# StorybookUtils
+
+The `StorybookUtils` class is a utility class that provides a collection of
+`static` methods to make Storybook related tasks easier.
+
+## Methods
+
+## stringEnumFormatter
+
+```ts
+stringEnumFormatter(stringEnum: { [key: string]: string }, name: string): string
+```
+
+The `stringEnumFormatter` method is used to generate a string representation of an enum in
+a readable format.
+
+- Parameters:
+
+ - `stringEnum`: The enum to be formatted.
+ - `name`: The name of the enum.
+
+- Returns: The formatted `string`.
+
+```ts
+StorybookUtils.stringEnumFormatter(BoColor, 'BoColor')
+/*
+ * enum BoColor {
+ * inherit = 'inherit',
+ * current = 'currentColor',
+ * transparent = 'transparent',
+ * black = '#000',
+ * ...
+ * }
+ */
+```
+
+## arrayFormatter
+
+```ts
+arrayFormatter(array: string[], name: string): string
+```
+
+The `arrayFormatter` method is used to generate a string representation of an array in
+a readable format.
+
+- Parameters:
+
+ - `array`: The array to be formatted.
+ - `name`: The name of the array.
+
+- Returns: The formatted `string`.
+
+```ts
+StorybookUtils.arrayFormatter(['hello', 'world'], 'array');
+/*
+ * array [
+ * 'hello',
+ * 'world',
+ * ]
+```
diff --git a/src/utils/__stories__/string_utils.mdx b/src/utils/__stories__/string_utils.mdx
new file mode 100644
index 00000000..cff21ec3
--- /dev/null
+++ b/src/utils/__stories__/string_utils.mdx
@@ -0,0 +1,67 @@
+import { Meta, Story } from '@storybook/blocks'
+import { StringUtils } from '@/utils'
+
+
+
+# StringUtils
+
+The `StringUtils` class is a utility class that provides a collection of
+`static` methods to make `string` checking and manipulation easier.
+
+## Methods
+
+## capitalize
+
+```ts
+capitalize(str: string): string
+```
+
+The `capitalize` method is used to capitalize the first letter of a string.
+
+- Parameters:
+
+ - `str`: The string to be capitalized.
+
+- Returns: The capitalized `string`.
+
+```ts
+StringUtils.capitalize('hello world') // Hello world
+```
+
+## camelCaseToTitleCase
+
+```ts
+camelCaseToTitleCase(str: string): string
+```
+
+The `camelCaseToTitleCase` method is used to convert a string from camel case to title case.
+
+- Parameters:
+
+ - `str`: The string to be converted.
+
+- Returns: The converted `string`.
+
+```ts
+StringUtils.camelCaseToTitleCase('helloWorld') // Hello World
+```
+
+## isEmptyStr
+
+```ts
+isEmptyStr(str: unknown): boolean
+```
+
+The `isEmptyStr` method is used to check if a `string` is `empty`, `null`, or `undefined`.
+
+- Parameters:
+
+ - `str`: The string to be checked.
+
+ - Returns: A `boolean` value indicating the result of the check.
+
+```ts
+StringUtils.isEmptyStr('') // true
+StringUtils.isEmptyStr('hello world') // false
+StringUtils.isEmptyStr(null) // true
+```
diff --git a/src/utils/__stories__/tailwind_utils.mdx b/src/utils/__stories__/tailwind_utils.mdx
new file mode 100644
index 00000000..ce8d9140
--- /dev/null
+++ b/src/utils/__stories__/tailwind_utils.mdx
@@ -0,0 +1,37 @@
+import { Meta, Story } from '@storybook/blocks'
+import { TailwindUtils } from '@/utils'
+
+
+
+# TailwindUtils
+
+The `TailwindUtils` class is a utility class that provides a collection of
+`static` methods to make working with Tailwind CSS easier.
+
+## Methods
+
+## merge
+
+```ts
+merge(...classes: (string | null | undefined)[]): string
+```
+
+The `merge` method is used to merge multiple classes into a single `string` that can later
+be applied to an element.
+If any of the argument values equals to `null` or `undefined` the corresponding argument will be ignored.
+
+- Example:
+
+```ts
+TailwindUtils.merge('bg-blue-500', 'text-white', 'rounded-lg') // bg-blue-500 text-white rounded-lg
+```
+
+- Parameters:
+
+ - `classes`: An array of classes to be merged.
+
+- Returns: The merged classes as a `string`.
+
+```ts
+TailwindUtils.merge('bg-blue-500', null, 'text-white', 'rounded-lg') // bg-blue-500 text-white rounded-lg
+```
diff --git a/src/utils/__test__/identity_utils.test.ts b/src/utils/__test__/identity_utils.test.ts
new file mode 100644
index 00000000..a1c6c2bd
--- /dev/null
+++ b/src/utils/__test__/identity_utils.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, suite, test } from 'vitest'
+import { IdentityUtils } from '../identity_utils'
+
+describe('IdentityUtils', () => {
+ suite('generateRandomId', () => {
+ test('should generate a random id', () => {
+ const id = IdentityUtils.generateRandomId()
+ expect(id).toBeTruthy()
+ expect(id.length).toBeGreaterThan(0)
+ })
+
+ test('the returned id should be a string', () => {
+ const id = IdentityUtils.generateRandomId()
+ expect(typeof id).toBe('string')
+ })
+ })
+
+ suite('generateRandomIdWithPrefix', () => {
+ test('should generate a random id with a prefix', () => {
+ const id = IdentityUtils.generateRandomIdWithPrefix('test')
+ expect(id).toBeTruthy()
+ expect(id.length).toBeGreaterThan(0)
+ expect(id).toContain('test')
+ })
+
+ test('the returned id should be a string', () => {
+ const id = IdentityUtils.generateRandomIdWithPrefix('test')
+ expect(typeof id).toBe('string')
+ })
+ })
+})
diff --git a/src/utils/__test__/keyboard_utils.test.ts b/src/utils/__test__/keyboard_utils.test.ts
new file mode 100644
index 00000000..4ea67fc1
--- /dev/null
+++ b/src/utils/__test__/keyboard_utils.test.ts
@@ -0,0 +1,24 @@
+import { KeyboardUtils } from '@/utils'
+import { describe, expect, suite, test, vi } from 'vitest'
+
+describe('KeyboardUtils', () => {
+ suite('registerEnterKeyHandler', () => {
+ test('should register a handler for the enter key', () => {
+ const handler = vi.fn()
+ KeyboardUtils.registerEnterKeyHandler(
+ new KeyboardEvent('keydown', { key: 'Enter' }),
+ handler,
+ )
+ expect(handler).toHaveBeenCalled()
+ })
+
+ test('should not register a handler for a non-enter key', () => {
+ const handler = vi.fn()
+ KeyboardUtils.registerEnterKeyHandler(
+ new KeyboardEvent('keydown', { key: 'Tab' }),
+ handler,
+ )
+ expect(handler).not.toHaveBeenCalled()
+ })
+ })
+})
diff --git a/src/utils/__test__/storybook_utils.test.ts b/src/utils/__test__/storybook_utils.test.ts
new file mode 100644
index 00000000..2cf8460a
--- /dev/null
+++ b/src/utils/__test__/storybook_utils.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, suite, test } from 'vitest'
+import { StorybookUtils } from '../storybook_utils'
+
+const control = (stringEnum: { [key: string]: string }, name: string) => {
+ return `enum ${name} {\n${
+ Object.keys(stringEnum)
+ .map(
+ (m: string) =>
+ ` ${m} = "${stringEnum[m as keyof typeof stringEnum]}",`,
+ )
+ .join('\r\n') + '\r\n}'
+ }`
+}
+
+const controlArray = (array: string[], name: string) => {
+ return `array ${name} {\n${array.map((m: string) => ` ${m},`).join('\r\n')}\r\n}`
+}
+
+describe('StorybookUtils', () => {
+ suite('stringEnumFormatter', () => {
+ test('should format a string enum', () => {
+ const enumObj = {
+ hello: 'Hello',
+ world: 'World',
+ }
+ const formattedEnum = StorybookUtils.stringEnumFormatter(
+ enumObj,
+ 'string',
+ )
+
+ const compareValue = control(enumObj, 'string')
+
+ expect(formattedEnum).toBeTruthy()
+ expect(typeof formattedEnum).toBe('string')
+ expect(formattedEnum).toBe(compareValue)
+ })
+ })
+
+ suite('arrayFormatter', () => {
+ test('should format an array', () => {
+ const array = ['hello', 'world']
+ const formattedArray = StorybookUtils.arrayFormatter(array, 'array')
+
+ const compareValue = controlArray(array, 'array')
+
+ expect(formattedArray).toBeTruthy()
+ expect(typeof formattedArray).toBe('string')
+ expect(formattedArray).toBe(compareValue)
+ })
+ })
+})
diff --git a/src/utils/__test__/string_utils.test.ts b/src/utils/__test__/string_utils.test.ts
new file mode 100644
index 00000000..70d03bcc
--- /dev/null
+++ b/src/utils/__test__/string_utils.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, suite, test } from 'vitest'
+import { StringUtils } from '../string_utils'
+
+describe('StringUtils', () => {
+ suite('capitalize', () => {
+ test('should capitalize a string', () => {
+ const str = 'hello world'
+ const capitalizedStr = StringUtils.capitalize(str)
+ expect(capitalizedStr).toBe('Hello world')
+ })
+
+ test('should return the original string if it is already capitalized', () => {
+ const str = 'Hello world'
+ const capitalizedStr = StringUtils.capitalize(str)
+ expect(capitalizedStr).toBe('Hello world')
+ })
+
+ test('the returned value should be a string', () => {
+ const str = 'hello world'
+ const capitalizedStr = StringUtils.capitalize(str)
+ expect(typeof capitalizedStr).toBe('string')
+ })
+ })
+
+ suite('camelCaseToTitleCase', () => {
+ test('should convert a camel case string to title case', () => {
+ const str = 'helloWorld'
+ const titleCaseStr = StringUtils.camelCaseToTitleCase(str)
+ expect(titleCaseStr).toBe('Hello World')
+ })
+
+ test('should return the original string if it is already in title case', () => {
+ const str = 'Hello World'
+ const titleCaseStr = StringUtils.camelCaseToTitleCase(str)
+ expect(titleCaseStr).toBe('Hello World')
+ })
+
+ test('the returned value should be a string', () => {
+ const str = 'helloWorld'
+ const titleCaseStr = StringUtils.camelCaseToTitleCase(str)
+ expect(typeof titleCaseStr).toBe('string')
+ })
+ })
+
+ suite('isEmptyStr', () => {
+ test('should return true for an empty string', () => {
+ const str = ''
+ const isEmpty = StringUtils.isEmptyStr(str)
+ expect(isEmpty).toBeTruthy()
+ })
+
+ test('should return true for a string with only whitespace', () => {
+ const str = ' '
+ const isEmpty = StringUtils.isEmptyStr(str)
+ expect(isEmpty).toBeTruthy()
+ })
+
+ test('should return false for a non-empty string', () => {
+ const str = 'hello world'
+ const isEmpty = StringUtils.isEmptyStr(str)
+ expect(isEmpty).toBeFalsy()
+ })
+
+ test('should return true for a null or undefined value', () => {
+ const str = null
+ const isEmpty = StringUtils.isEmptyStr(str)
+ expect(isEmpty).toBeTruthy()
+
+ const str2 = undefined
+ const isEmpty2 = StringUtils.isEmptyStr(str2)
+ expect(isEmpty2).toBeTruthy()
+ })
+ })
+})
diff --git a/src/utils/__test__/tailwind_utils.test.ts b/src/utils/__test__/tailwind_utils.test.ts
new file mode 100644
index 00000000..c0ae8618
--- /dev/null
+++ b/src/utils/__test__/tailwind_utils.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, suite, test } from 'vitest'
+import { TailwindUtils } from '../tailwind_utils'
+
+describe('TailwindUtils', () => {
+ suite('merge', () => {
+ test('should merge two classes', () => {
+ const class1 = 'bg-blue-500'
+ const class2 = 'text-white'
+ const mergedClass = TailwindUtils.merge(class1, class2)
+ expect(mergedClass).toBe('bg-blue-500 text-white')
+ })
+
+ test('should merge multiple classes', () => {
+ const class1 = 'bg-blue-500'
+ const class2 = 'text-white'
+ const class3 = 'rounded-lg'
+ const mergedClass = TailwindUtils.merge(class1, class2, class3)
+ expect(mergedClass).toBe('bg-blue-500 text-white rounded-lg')
+ })
+
+ test('should merge classes with null or undefined values', () => {
+ const class1 = 'bg-blue-500'
+ const class2 = 'text-white'
+ const class3 = null
+ const class4 = undefined
+ const mergedClass = TailwindUtils.merge(class1, class2, class3, class4)
+ expect(mergedClass).toBe('bg-blue-500 text-white')
+ })
+
+ test('the returned value should only contain unique classes', () => {
+ const class1 = 'bg-blue-500'
+ const class2 = 'text-white'
+ const class3 = 'rounded-lg'
+ const class4 = 'bg-blue-500'
+ const mergedClass = TailwindUtils.merge(class1, class2, class3, class4)
+ expect(mergedClass).toBe('bg-blue-500 text-white rounded-lg')
+ })
+ })
+})
diff --git a/src/utils/identity_utils.ts b/src/utils/identity_utils.ts
new file mode 100644
index 00000000..be4ede12
--- /dev/null
+++ b/src/utils/identity_utils.ts
@@ -0,0 +1,22 @@
+export class IdentityUtils {
+ /**
+ * @description Generated a new random id.
+ *
+ * @returns A random id.
+ */
+ static generateRandomId(): string {
+ return Math.random()
+ .toString(36)
+ .replace(/[^a-z]+/g, '')
+ .slice(0, 10)
+ }
+ /**
+ * @description Generated a new random id with the specified prefix.
+ *
+ * @param prefix - The prefix to be added to the random id.
+ * @returns A random id with the specified prefix.
+ */
+ static generateRandomIdWithPrefix(prefix: string): string {
+ return [prefix, IdentityUtils.generateRandomId()].join('-')
+ }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 87aa0fc4..14e47f4a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,3 +1,5 @@
-export { StorybookUtils } from './storybook_utils';
-export { StringUtils } from './string_utils';
-export { TailwindUtils } from './tailwind_utils';
+export { IdentityUtils } from './identity_utils'
+export { KeyboardUtils } from './keyboard_utils'
+export { StorybookUtils } from './storybook_utils'
+export { StringUtils } from './string_utils'
+export { TailwindUtils } from './tailwind_utils'
diff --git a/src/utils/keyboard_utils.ts b/src/utils/keyboard_utils.ts
new file mode 100644
index 00000000..1d7a716d
--- /dev/null
+++ b/src/utils/keyboard_utils.ts
@@ -0,0 +1,53 @@
+export class KeyboardUtils {
+ static trapTabKey(e: KeyboardEvent, id: string): void {
+ const isTab = e.key === 'Tab' || e.keyCode === 9
+
+ if (isTab) {
+ const focusable: NodeListOf