@7pmlabs/design-system 0.5.10 → 0.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7pmlabs/design-system",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "homepage": "https://github.com/ngphanducthinh/design-system",
   "sideEffects": [
     "style.css"
@@ -30,10 +30,12 @@
     "publish-package:public": "npm run test:e2e:local && npm run build && npm publish --access public",
     "build": "run-p lint build:lib",
     "build:lib": "vite build && npm run build:types",
-    "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types ",
-    "test:unit": "vitest --environment jsdom --root src/",
-    "test:e2e:local": "BASE_URL=http://127.0.0.1:6006/ WEBSERVER=true bunx playwright test",
+    "build:types": "vue-tsc --project tsconfig.build-types.json --declaration --emitDeclarationOnly --outDir dist/types",
+    "test:unit": "vitest --environment jsdom --root src/tests",
+    "test:e2e:local": "BASE_URL=http://127.0.0.1:6006/ WEBSERVER=true bunx playwright test --ui",
+    "test:e2e:local:specific-test": "BASE_URL=http://127.0.0.1:6006/ WEBSERVER=true bunx playwright test --headed ./src/e2e/tests/Carousel.spec.ts",
     "test:e2e:prod": "BASE_URL=https://ngphanducthinh.github.io/7pmlabs-design-system/ bunx playwright test --ui",
+    "test:e2e:ci": "BASE_URL=http://127.0.0.1:6006/ WEBSERVER=true bunx playwright test",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "lint": "run-s eslint type-check",
@@ -45,6 +47,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.20.5",
+    "@storybook/test": "^8.0.8",
     "@vueuse/core": "^9.12.0",
     "air-datepicker": "3.3.0",
     "lodash-es": "^4.17.21",
@@ -54,20 +57,21 @@
     "vue-i18n": "^9.2.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.41.2",
+    "@chromatic-com/storybook": "^1.3.3",
+    "@playwright/test": "^1.43.1",
     "@rushstack/eslint-patch": "^1.3.3",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/manager-api": "^7.6.10",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.10",
-    "@storybook/vue3": "^7.6.10",
-    "@storybook/vue3-vite": "^7.6.10",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/addon-mdx-gfm": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/manager-api": "^8.0.8",
+    "@storybook/theming": "^8.0.8",
+    "@storybook/vue3": "^8.0.8",
+    "@storybook/vue3-vite": "^8.0.8",
     "@types/jsdom": "^20.0.0",
     "@types/lodash-es": "^4.17.7",
-    "@types/node": "^16.18.4",
+    "@types/node": "^20.12.7",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
@@ -80,23 +84,21 @@
     "autoprefixer": "^10.4.13",
     "eslint": "^8.48.0",
     "eslint-plugin-cypress": "^2.14.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^20.0.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.19",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "sass": "^1.56.0",
-    "storybook": "^7.6.10",
+    "storybook": "^8.0.8",
     "tailwindcss": "^3.3.1",
     "typescript": "~4.7.4",
     "vite": "^4.3.5",
     "vitest": "^0.31.1",
     "vue-eslint-parser": "^9.1.0",
-    "vue-tsc": "^1.6.4"
+    "vue-tsc": "^2.0.13"
   },
   "repository": {
     "type": "git",

package/dist/types/components/BBreadcrumb/BBreadcrumb.vue.d.ts

@@ -1,65 +0,0 @@
-import type { BBreadcrumbItem } from '@/types';
-export interface BBreadcrumbProps {
-    /**
-     * Array of breadcrumb items.
-     */
-    items?: BBreadcrumbItem[];
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BBreadcrumbProps>, {
-    items: () => any[];
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BBreadcrumbProps>, {
-    items: () => any[];
-}>>>, {
-    items: BBreadcrumbItem[];
-}, {}>, Partial<Record<"item-0", (_: {
-    item: {
-        hidden: boolean;
-        width: number;
-        text: string;
-        href?: string;
-    };
-}) => any>> & Partial<Record<"separator-0", (_: {
-    item: {
-        hidden: boolean;
-        width: number;
-        text: string;
-        href?: string;
-    };
-}) => any>> & Partial<Record<`item-${number}`, (_: {
-    item: {
-        hidden: boolean;
-        width: number;
-        text: string;
-        href?: string;
-    };
-}) => any>> & Partial<Record<`separator-${number}`, (_: {
-    item: {
-        hidden: boolean;
-        width: number;
-        text: string;
-        href?: string;
-    };
-}) => any>>>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/BBreadcrumb/BBreadcrumbSeparator.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _default;

package/dist/types/components/BButton.vue.d.ts

@@ -1,52 +0,0 @@
-import { BButtonSize, BButtonType } from '@/constants/Enums';
-export interface BButtonProps {
-    /**
-     * Button type.
-     */
-    type?: `${BButtonType}`;
-    /**
-     * Button size.
-     */
-    size?: `${BButtonSize}`;
-    disabled?: boolean;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BButtonProps>, {
-    type: BButtonType;
-    size: BButtonSize;
-    disabled: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BButtonProps>, {
-    type: BButtonType;
-    size: BButtonSize;
-    disabled: boolean;
-}>>>, {
-    type: "clear" | "icon" | "primary" | "secondary" | "additional";
-    disabled: boolean;
-    size: "sm" | "md";
-}, {}>, {
-    prependIcon?(_: {}): any;
-    default?(_: {}): any;
-    appendIcon?(_: {}): any;
-}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/BCarousel/BCarousel.vue.d.ts

@@ -1,77 +0,0 @@
-interface BCarouselProps {
-    /**
-     * Index of slide.
-     */
-    modelValue?: number;
-    /**
-     * Automatically go to the next slide every 5s (default).
-     */
-    autoplay?: boolean;
-    /**
-     * Waiting time before going to the next slide.
-     */
-    duration?: number;
-    /**
-     * Show navigation controls.
-     */
-    navigation?: boolean;
-    /**
-     * Show bottom controls.
-     */
-    pagination?: boolean;
-    /**
-     * Return to the first slide after reaching the end.
-     */
-    continuous?: boolean;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BCarouselProps>, {
-    modelValue: any;
-    autoplay: boolean;
-    duration: number;
-    navigation: boolean;
-    pagination: boolean;
-    continuous: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BCarouselProps>, {
-    modelValue: any;
-    autoplay: boolean;
-    duration: number;
-    navigation: boolean;
-    pagination: boolean;
-    continuous: boolean;
-}>>> & {
-    "onUpdate:modelValue"?: (value: number) => any;
-}, {
-    duration: number;
-    autoplay: boolean;
-    modelValue: number;
-    navigation: boolean;
-    pagination: boolean;
-    continuous: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/BCarousel/BCarouselItem.vue.d.ts

@@ -1,9 +0,0 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/BCheckbox.vue.d.ts

@@ -1,63 +0,0 @@
-import { BCheckboxSize } from '@/constants/Enums';
-export interface BCheckboxProps {
-    inputId?: string;
-    modelValue: boolean | Array<string | number>;
-    label?: string;
-    /**
-     * Clicking on label will not check on checkbox.
-     */
-    labelOrphan?: boolean;
-    disabled?: boolean;
-    size?: `${BCheckboxSize}`;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BCheckboxProps>, {
-    inputId: string;
-    modelValue: boolean;
-    label: string;
-    labelOrphan: boolean;
-    disabled: boolean;
-    size: BCheckboxSize;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean | (string | number)[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BCheckboxProps>, {
-    inputId: string;
-    modelValue: boolean;
-    label: string;
-    labelOrphan: boolean;
-    disabled: boolean;
-    size: BCheckboxSize;
-}>>> & {
-    "onUpdate:modelValue"?: (value: boolean | (string | number)[]) => any;
-}, {
-    label: string;
-    disabled: boolean;
-    size: "sm" | "md";
-    inputId: string;
-    modelValue: boolean | (string | number)[];
-    labelOrphan: boolean;
-}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/BCollapse.vue.d.ts

@@ -1,25 +0,0 @@
-export interface BCollapseProps {
-    modelValue: boolean;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<BCollapseProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BCollapseProps>>> & {
-    "onUpdate:modelValue"?: (value: boolean) => any;
-}, {}, {}>, {
-    default?(_: {}): any;
-}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/BCurrencyField.vue.d.ts

@@ -1,101 +0,0 @@
-import type { ValidationRule } from '@/composables/Validation';
-import { SupportedLocale } from '@/constants/Enums';
-export interface BCurrencyFieldProps {
-    inputId?: string;
-    inputCssClass?: string;
-    /**
-     * Value can be number or string
-     */
-    modelValue: number | string;
-    label?: string;
-    validationRules?: ValidationRule[];
-    placeholder?: string;
-    autocomplete?: boolean;
-    /**
-     * Validate if the field is left empty.
-     */
-    required?: boolean;
-    requiredErrorMessage?: string;
-    disabled?: boolean;
-    readonly?: boolean;
-    /**
-     * Hide the validation error message.
-     */
-    hideDetails?: boolean;
-    /**
-     * Locale of the currency
-     */
-    locale?: `${SupportedLocale}`;
-}
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BCurrencyFieldProps>, {
-    inputId: string;
-    inputCssClass: string;
-    label: string;
-    validationRules: any;
-    placeholder: string;
-    autocomplete: boolean;
-    required: boolean;
-    requiredErrorMessage: string;
-    disabled: boolean;
-    readonly: boolean;
-    hideDetails: boolean;
-    locale: SupportedLocale;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "press:enter": () => void;
-    "update:modelValue": (value: string | number) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BCurrencyFieldProps>, {
-    inputId: string;
-    inputCssClass: string;
-    label: string;
-    validationRules: any;
-    placeholder: string;
-    autocomplete: boolean;
-    required: boolean;
-    requiredErrorMessage: string;
-    disabled: boolean;
-    readonly: boolean;
-    hideDetails: boolean;
-    locale: SupportedLocale;
-}>>> & {
-    "onUpdate:modelValue"?: (value: string | number) => any;
-    "onPress:enter"?: () => any;
-}, {
-    required: boolean;
-    label: string;
-    autocomplete: boolean;
-    disabled: boolean;
-    readonly: boolean;
-    placeholder: string;
-    inputId: string;
-    locale: "en-US" | "vi-VN";
-    inputCssClass: string;
-    validationRules: ValidationRule[];
-    requiredErrorMessage: string;
-    hideDetails: boolean;
-}, {}>, {
-    prependIcon?(_: {}): any;
-    appendIcon?(_: {}): any;
-}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-declare type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/types/components/BDatePicker.vue.d.ts

@@ -1,111 +0,0 @@
-import { type ValidationRule } from '@/composables/Validation';
-import { BDatePickerView } from '@/constants/Enums';
-export interface BDatePickerProps {
-    inputId?: string;
-    modelValue: any;
-    label?: string;
-    /**
-     * Array of custom validation rules.
-     */
-    validationRules?: ValidationRule[];
-    placeholder?: string;
-    /**
-     * Validate if the field is left empty.
-     */
-    required?: boolean;
-    requiredErrorMessage?: string;
-    disabled?: boolean;
-    inputCssClass?: string;
-    /**
-     * Minimum selectable date
-     */
-    minDate?: any;
-    /**
-     * Maximum selectable date
-     */
-    maxDate?: any;
-    /**
-     * Show "Today" text if selected date is the current date
-     */
-    showHintToday?: boolean;
-    /**
-     * Default view mode when open picker dropdown
-     */
-    view?: BDatePickerView;
-    /**
-     * Hide the validation error message.
-     */
-    hideDetails?: boolean;
-    /**
-     * Position of picker dropdown when it's showed up
-     */
-    position?: string;
-}
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BDatePickerProps>, {
-    inputId: string;
-    label: string;
-    validationRules: any;
-    placeholder: string;
-    required: boolean;
-    requiredErrorMessage: string;
-    disabled: boolean;
-    inputCssClass: string;
-    minDate: string;
-    maxDate: string;
-    showHintToday: boolean;
-    view: BDatePickerView;
-    hideDetails: boolean;
-    position: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BDatePickerProps>, {
-    inputId: string;
-    label: string;
-    validationRules: any;
-    placeholder: string;
-    required: boolean;
-    requiredErrorMessage: string;
-    disabled: boolean;
-    inputCssClass: string;
-    minDate: string;
-    maxDate: string;
-    showHintToday: boolean;
-    view: BDatePickerView;
-    hideDetails: boolean;
-    position: string;
-}>>> & {
-    "onUpdate:modelValue"?: (value: any) => any;
-}, {
-    required: boolean;
-    view: BDatePickerView;
-    position: string;
-    label: string;
-    disabled: boolean;
-    placeholder: string;
-    inputId: string;
-    inputCssClass: string;
-    validationRules: ValidationRule[];
-    requiredErrorMessage: string;
-    hideDetails: boolean;
-    minDate: any;
-    maxDate: any;
-    showHintToday: boolean;
-}, {}>;
-export default _default;
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};