@lark-apaas/client-toolkit 1.1.3-alpha.1 → 1.1.4

package/lib/logger/intercept-global-error.js

@@ -1,10 +1,10 @@
 import { logger } from "./logger.js";
 function interceptGlobalError() {
     window.addEventListener('error', (event)=>{
-        logger.error(event.error);
+        logger.error('global error', event);
     });
     window.addEventListener('unhandledrejection', (event)=>{
-        logger.error(event.reason);
+        logger.error('global unhandledrejection', event);
     });
 }
 export { interceptGlobalError };

package/lib/logger/log-types.d.ts

@@ -20,73 +20,94 @@ export declare const noCategoryLogSchema: z.ZodObject<{
     message: z.ZodUnknown;
     args: z.ZodArray<z.ZodUnknown>;
 }, z.core.$strip>;
-export declare const logStackFrameSchema: z.ZodObject<{
-    functionName: z.ZodString;
-    fileName: z.ZodString;
-    lineNumber: z.ZodNumber;
-    columnNumber: z.ZodNumber;
-}, z.core.$strip>;
 export declare const levelSchema: z.ZodEnum<{
-    success: "success";
     info: "info";
     warn: "warn";
     error: "error";
     debug: "debug";
 }>;
-export declare const logMeta: z.ZodObject<{
-    stacktrace: z.ZodOptional<z.ZodArray<z.ZodObject<{
-        functionName: z.ZodString;
-        fileName: z.ZodString;
-        lineNumber: z.ZodNumber;
-        columnNumber: z.ZodNumber;
-    }, z.core.$strip>>>;
-    logTraceID: z.ZodOptional<z.ZodString>;
-    skipFrame: z.ZodOptional<z.ZodNumber>;
-}, z.core.$strip>;
 export declare const selectedLogSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
-    type: z.ZodLiteral<"typedLogV2">;
+    type: z.ZodLiteral<"networkRequest">;
     level: z.ZodEnum<{
-        success: "success";
         info: "info";
         warn: "warn";
         error: "error";
         debug: "debug";
     }>;
     id: z.ZodString;
-    args: z.ZodArray<z.ZodUnknown>;
-    meta: z.ZodObject<{
-        stacktrace: z.ZodOptional<z.ZodArray<z.ZodObject<{
-            functionName: z.ZodString;
-            fileName: z.ZodString;
-            lineNumber: z.ZodNumber;
-            columnNumber: z.ZodNumber;
-        }, z.core.$strip>>>;
-        logTraceID: z.ZodOptional<z.ZodString>;
-        skipFrame: z.ZodOptional<z.ZodNumber>;
+    data: z.ZodObject<{
+        method: z.ZodString;
+        status: z.ZodInt;
+        statusText: z.ZodString;
+        path: z.ZodString;
+        requestData: z.ZodOptional<z.ZodUnknown>;
+        requestParams: z.ZodOptional<z.ZodUnknown>;
+        responseData: z.ZodOptional<z.ZodUnknown>;
+        traceID: z.ZodString;
     }, z.core.$strip>;
-}, z.core.$strip>], "type">;
-export type LogLevel = 'debug' | 'info' | 'warn' | 'error' | 'success';
-export declare const logWithMetaSchema: z.ZodObject<{
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"routerError">;
     level: z.ZodEnum<{
-        success: "success";
         info: "info";
         warn: "warn";
         error: "error";
         debug: "debug";
     }>;
-    args: z.ZodArray<z.ZodUnknown>;
-    meta: z.ZodObject<{
-        stacktrace: z.ZodOptional<z.ZodArray<z.ZodObject<{
-            functionName: z.ZodString;
-            fileName: z.ZodString;
-            lineNumber: z.ZodNumber;
-            columnNumber: z.ZodNumber;
-        }, z.core.$strip>>>;
-        logTraceID: z.ZodOptional<z.ZodString>;
-        skipFrame: z.ZodOptional<z.ZodNumber>;
+    id: z.ZodString;
+    data: z.ZodObject<{
+        path: z.ZodString;
     }, z.core.$strip>;
-}, z.core.$strip>;
-export type LogStackFrame = z.infer<typeof logStackFrameSchema>;
-export type LogWithMeta = z.infer<typeof logWithMetaSchema>;
-export type LogMeta = z.infer<typeof logMeta>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"renderError">;
+    level: z.ZodEnum<{
+        info: "info";
+        warn: "warn";
+        error: "error";
+        debug: "debug";
+    }>;
+    id: z.ZodString;
+    data: z.ZodObject<{
+        message: z.ZodString;
+        stack: z.ZodString;
+    }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"globalError">;
+    level: z.ZodEnum<{
+        info: "info";
+        warn: "warn";
+        error: "error";
+        debug: "debug";
+    }>;
+    id: z.ZodString;
+    data: z.ZodObject<{
+        message: z.ZodString;
+        stack: z.ZodString;
+    }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"unhandledRejectionError">;
+    level: z.ZodEnum<{
+        info: "info";
+        warn: "warn";
+        error: "error";
+        debug: "debug";
+    }>;
+    id: z.ZodString;
+    data: z.ZodObject<{
+        message: z.ZodString;
+        stack: z.ZodString;
+    }, z.core.$strip>;
+}, z.core.$strip>, z.ZodObject<{
+    type: z.ZodLiteral<"noCategory">;
+    level: z.ZodEnum<{
+        info: "info";
+        warn: "warn";
+        error: "error";
+        debug: "debug";
+    }>;
+    id: z.ZodString;
+    data: z.ZodObject<{
+        message: z.ZodUnknown;
+        args: z.ZodArray<z.ZodUnknown>;
+    }, z.core.$strip>;
+}, z.core.$strip>], "type">;
 export type SelectedLog = z.infer<typeof selectedLogSchema>;

package/lib/logger/log-types.js

@@ -20,36 +20,48 @@ const noCategoryLogSchema = zod.object({
     message: zod.unknown(),
     args: zod.array(zod.unknown())
 });
-const logStackFrameSchema = zod.object({
-    functionName: zod.string(),
-    fileName: zod.string(),
-    lineNumber: zod.number(),
-    columnNumber: zod.number()
-});
 const levelSchema = zod["enum"]([
     'info',
     'warn',
     'error',
-    'debug',
-    'success'
+    'debug'
 ]);
-const logMeta = zod.object({
-    stacktrace: zod.optional(zod.array(logStackFrameSchema)),
-    logTraceID: zod.optional(zod.string()),
-    skipFrame: zod.optional(zod.number())
-});
 const selectedLogSchema = zod.discriminatedUnion('type', [
     zod.object({
-        type: zod.literal('typedLogV2'),
+        type: zod.literal('networkRequest'),
+        level: levelSchema,
+        id: zod.string(),
+        data: networkRequestLogSchema
+    }),
+    zod.object({
+        type: zod.literal('routerError'),
+        level: levelSchema,
+        id: zod.string(),
+        data: routerErrorSchema
+    }),
+    zod.object({
+        type: zod.literal('renderError'),
+        level: levelSchema,
+        id: zod.string(),
+        data: genericErrorSchema
+    }),
+    zod.object({
+        type: zod.literal('globalError'),
+        level: levelSchema,
+        id: zod.string(),
+        data: genericErrorSchema
+    }),
+    zod.object({
+        type: zod.literal('unhandledRejectionError'),
         level: levelSchema,
         id: zod.string(),
-        args: zod.array(zod.unknown()),
-        meta: logMeta
+        data: genericErrorSchema
+    }),
+    zod.object({
+        type: zod.literal('noCategory'),
+        level: levelSchema,
+        id: zod.string(),
+        data: noCategoryLogSchema
     })
 ]);
-const logWithMetaSchema = zod.object({
-    level: levelSchema,
-    args: zod.array(zod.unknown()),
-    meta: logMeta
-});
-export { genericErrorSchema, levelSchema, logMeta, logStackFrameSchema, logWithMetaSchema, networkRequestLogSchema, noCategoryLogSchema, routerErrorSchema, selectedLogSchema };
+export { genericErrorSchema, levelSchema, networkRequestLogSchema, noCategoryLogSchema, routerErrorSchema, selectedLogSchema };

package/lib/logger/logger.d.ts

@@ -1,10 +1,7 @@
-import { LogWithMeta } from './log-types';
 export type LogInterceptor = (originLogger: typeof logger) => typeof logger;
 export declare let logger: {
     debug(message: any, ...args: any[]): void;
     info(message: any, ...args: any[]): void;
     warn(message: any, ...args: any[]): void;
     error(message: any, ...args: any[]): void;
-    success(message: any, ...args: any[]): void;
-    log({ level, args }: LogWithMeta): void;
 };

package/lib/logger/logger.js

@@ -51,12 +51,6 @@ let logger = {
     },
     error (message, ...args) {
         if (shouldLog('error')) console.error(...getFormattedPrefix('error'), message, ...args);
-    },
-    success (message, ...args) {
-        if (shouldLog('success')) console.log(...getFormattedPrefix('success'), message, ...args);
-    },
-    log ({ level, args }) {
-        if (shouldLog(level)) console.log(...getFormattedPrefix(level), ...args);
     }
 };
 for (const interceptor of interceptors)logger = interceptor(logger);

package/lib/logger/selected-logs.d.ts

@@ -1,5 +1,2 @@
 import { type LogInterceptor } from './logger';
-import { logStackFrameSchema } from './log-types';
-import z from 'zod';
-export declare function getStacktrace(): Promise<z.infer<typeof logStackFrameSchema>[]>;
 export declare const interceptors: LogInterceptor[];

package/lib/logger/selected-logs.js

@@ -1,8 +1,8 @@
 import { logger as external_logger_js_logger } from "./logger.js";
-import { SourceMapConsumer as external_source_map_SourceMapConsumer } from "source-map";
-import "../utils/utils.js";
+import { SourceMapConsumer } from "source-map";
+import { normalizeBasePath } from "../utils/utils.js";
 import { mappingText } from "./source-map-mappings-wasm.js";
-import stacktrace_js from "stacktrace-js";
+import { genericErrorSchema, networkRequestLogSchema, noCategoryLogSchema, routerErrorSchema } from "./log-types.js";
 function hexToBuffer(hexString) {
     const hex = hexString.replace(/\s/g, '').toUpperCase();
     if (!/^[0-9A-F]+$/.test(hex)) throw new Error('Invalid hex string');
@@ -15,39 +15,55 @@ function hexToBuffer(hexString) {
     }
     return buffer;
 }
-external_source_map_SourceMapConsumer.initialize({
+SourceMapConsumer.initialize({
     'lib/mappings.wasm': hexToBuffer(mappingText)
 });
-const mapStacktrace = (stacktrace)=>stacktrace.map((frame)=>({
-            functionName: frame.functionName || '',
-            fileName: frame.fileName || '',
-            lineNumber: frame.lineNumber || 0,
-            columnNumber: frame.columnNumber || 0
-        }));
-async function sendSelectedLog(logWithoutID) {
+async function getSourceMap() {
+    let sourceMapContent = '';
     try {
-        const log = {
-            ...logWithoutID,
-            id: crypto.randomUUID()
-        };
-        for(let i = 0; i < log.args.length; i++)if (log.args[i] instanceof Error) {
-            const error = log.args[i];
-            log.args[i] = {
-                message: error.message,
-                stack: error.stack
-            };
-            if (!log.meta.stacktrace) {
-                const stacktrace = await stacktrace_js.fromError(error);
-                log.meta.stacktrace = mapStacktrace(stacktrace);
+        const basePath = normalizeBasePath(process.env.CLIENT_BASE_PATH);
+        const res = await fetch(`${basePath}/main.js.map`);
+        sourceMapContent = await res.text();
+    } catch (e) {
+        external_logger_js_logger.warn('get main.js.map error', e);
+    }
+    return sourceMapContent;
+}
+async function parseSourceMap(stack) {
+    try {
+        const sourceMapContent = await getSourceMap();
+        if (!sourceMapContent) return stack;
+        const consumer = await new SourceMapConsumer(JSON.parse(sourceMapContent));
+        const lines = stack.split('\n');
+        for(let i = 0; i < lines.length; i++){
+            const line = lines[i];
+            const match = line.match(/\((.*main\.js):(\d+):(\d+)\)/);
+            if (match) {
+                const [fullMatch, , lineNum, colNum] = match;
+                const originalPosition = consumer.originalPositionFor({
+                    line: Number(lineNum),
+                    column: Number(colNum)
+                });
+                if (originalPosition.source) {
+                    let originalPositionStr = `(${originalPosition.source}:${originalPosition.line}:${originalPosition.column})`;
+                    originalPositionStr = originalPositionStr.replace('webpack://fullstack-nestjs-template/', '');
+                    lines[i] = line.replace(fullMatch, originalPositionStr);
+                }
             }
         }
-        if (!log.meta.stacktrace) {
-            const frames = await getStacktrace();
-            log.meta.stacktrace = frames;
-        }
-        if (void 0 === log.meta.skipFrame) log.meta.skipFrame = 2;
-        const logJSON = JSON.stringify(log);
-        console.log(JSON.parse(logJSON));
+        return lines.join('\n');
+    } catch (e) {
+        external_logger_js_logger.warn('recover code position error', e);
+        return stack;
+    }
+}
+function sendSelectedLog(log) {
+    const logWithID = {
+        ...log,
+        id: crypto.randomUUID()
+    };
+    try {
+        const logJSON = JSON.stringify(logWithID);
         console.log(logJSON);
         if (window.parent !== window) try {
             window.parent.postMessage({
@@ -61,48 +77,45 @@ async function sendSelectedLog(logWithoutID) {
         external_logger_js_logger.warn('send selected log error', e);
     }
 }
-async function getStacktrace() {
-    const stacktrace = await stacktrace_js.get();
-    const frames = mapStacktrace(stacktrace);
-    return frames;
-}
-async function sendTypedLogV2(logWithMeta) {
-    sendSelectedLog({
-        type: 'typedLogV2',
-        level: logWithMeta.level,
-        args: logWithMeta.args,
-        meta: logWithMeta.meta
-    });
-}
-const typedLogInterceptor = (logger)=>({
-        debug: (message, ...args)=>{
-            try {
-                logger.debug(message, ...args);
-            } catch (e) {
-                logger.warn('debug log error', e);
-            }
-            sendTypedLogV2({
-                level: 'debug',
-                args: [
-                    message,
-                    ...args
-                ],
-                meta: {}
-            });
-        },
+const comprehensiveInterceptor = (logger)=>({
         info: (message, ...args)=>{
             try {
                 logger.info(message, ...args);
             } catch (e) {
                 logger.warn('info log error', e);
             }
-            sendTypedLogV2({
+            if (message && 'object' == typeof message && 'HTTP Request' === message.type) return;
+            if (message && 'object' == typeof message && 'HTTP Response' === message.type) {
+                let requestData = message.data;
+                if ('string' == typeof requestData) try {
+                    requestData = JSON.parse(requestData);
+                } catch (e) {
+                    logger.warn('parse request data error', e);
+                }
+                const info = networkRequestLogSchema.safeParse({
+                    method: message.method || '',
+                    status: message.status || 0,
+                    statusText: message.statusText || '',
+                    path: message.url || '',
+                    requestData,
+                    requestParams: message.params,
+                    responseData: message.responseData,
+                    traceID: message.headers?.['X-Trace-ID'] || ''
+                });
+                if (info.success) sendSelectedLog({
+                    type: 'networkRequest',
+                    level: 'info',
+                    data: info.data
+                });
+                return;
+            }
+            sendSelectedLog({
+                type: 'noCategory',
                 level: 'info',
-                args: [
+                data: {
                     message,
-                    ...args
-                ],
-                meta: {}
+                    args
+                }
             });
         },
         error: (message, ...args)=>{
@@ -111,13 +124,103 @@ const typedLogInterceptor = (logger)=>({
             } catch (e) {
                 logger.warn('error log error', e);
             }
-            sendTypedLogV2({
+            if (message && 'object' == typeof message && 'HTTP Request' === message.type) return;
+            if (message && 'object' == typeof message && 'HTTP Response' === message.type) {
+                let requestData = message.data;
+                if ('string' == typeof requestData) try {
+                    requestData = JSON.parse(requestData);
+                } catch (e) {
+                    logger.warn('parse request data error', e);
+                }
+                const info = networkRequestLogSchema.safeParse({
+                    method: message.method || '',
+                    status: message.status || 0,
+                    statusText: message.statusText || '',
+                    path: message.url || '',
+                    requestData,
+                    requestParams: message.params,
+                    responseData: message.responseData,
+                    traceID: message.headers?.['X-Trace-ID'] || ''
+                });
+                if (info.success) sendSelectedLog({
+                    type: 'networkRequest',
+                    level: 'error',
+                    data: info.data
+                });
+                return;
+            }
+            if ('RenderError' === message) return void (async ()=>{
+                const error = args[0];
+                if (error && error instanceof Error) {
+                    const stack = await parseSourceMap(error.stack || '');
+                    sendSelectedLog({
+                        type: 'renderError',
+                        level: 'error',
+                        data: {
+                            message: error.message,
+                            stack
+                        }
+                    });
+                }
+            })();
+            if ('404 Error: User attempted to access non-existent route:' === message) {
+                const path = args[0] || '';
+                const data = routerErrorSchema.safeParse({
+                    path
+                });
+                if (data.success) return void sendSelectedLog({
+                    level: 'error',
+                    type: 'routerError',
+                    data: data.data
+                });
+            }
+            if ('global error' === message) {
+                const error = args[0];
+                if (error && error instanceof ErrorEvent) {
+                    const data = genericErrorSchema.safeParse({
+                        message: error?.error?.message || '',
+                        stack: error?.error?.stack || ''
+                    });
+                    if (data.success) return void (async ()=>{
+                        const stack = await parseSourceMap(data.data.stack || '');
+                        sendSelectedLog({
+                            type: 'globalError',
+                            level: 'error',
+                            data: {
+                                ...data.data,
+                                stack
+                            }
+                        });
+                    })();
+                }
+            }
+            if ('global unhandledrejection' === message) {
+                const error = args[0];
+                if (error && error instanceof PromiseRejectionEvent) {
+                    const data = genericErrorSchema.safeParse({
+                        message: error?.reason?.message || '',
+                        stack: error?.reason?.stack || ''
+                    });
+                    if (data.success) return void (async ()=>{
+                        const stack = await parseSourceMap(data.data.stack || '');
+                        sendSelectedLog({
+                            type: 'unhandledRejectionError',
+                            level: 'error',
+                            data: {
+                                ...data.data,
+                                stack
+                            }
+                        });
+                    })();
+                }
+            }
+            sendSelectedLog({
+                type: 'noCategory',
                 level: 'error',
-                args: [
+                data: noCategoryLogSchema.parse({
                     message,
-                    ...args
-                ],
-                meta: {}
+                    args
+                })
             });
         },
         warn: (message, ...args)=>{
@@ -126,48 +229,32 @@ const typedLogInterceptor = (logger)=>({
             } catch (e) {
                 logger.warn('warn log error', e);
             }
-            sendTypedLogV2({
+            sendSelectedLog({
+                type: 'noCategory',
                 level: 'warn',
-                args: [
+                data: {
                     message,
-                    ...args
-                ],
-                meta: {}
+                    args
+                }
             });
         },
-        success: (message, ...args)=>{
+        debug: (message, ...args)=>{
             try {
-                logger.success(message, ...args);
+                logger.debug(message, ...args);
             } catch (e) {
-                logger.warn('success log error', e);
+                logger.warn('debug log error', e);
             }
-            sendTypedLogV2({
-                level: 'success',
-                args: [
+            sendSelectedLog({
+                type: 'noCategory',
+                level: 'debug',
+                data: {
                     message,
-                    ...args
-                ],
-                meta: {}
-            });
-        },
-        log: ({ level, args, meta })=>{
-            try {
-                logger.log({
-                    level,
-                    args,
-                    meta
-                });
-            } catch (e) {
-                logger.warn('log log error', e);
-            }
-            sendTypedLogV2({
-                level,
-                args,
-                meta: meta || {}
+                    args
+                }
             });
         }
     });
-const interceptors = [
-    typedLogInterceptor
-];
-export { getStacktrace, interceptors };
+const interceptors = 'production' !== process.env.NODE_ENV ? [
+    comprehensiveInterceptor
+] : null;
+export { interceptors };

package/lib/utils/axiosConfig.d.ts

@@ -1,4 +1,4 @@
-import { AxiosInstance } from 'axios';
+import { type AxiosInstance } from 'axios';
 /**
  * axios配置内容：拦截器、日志等
  */

package/lib/utils/axiosConfig.js

@@ -1,66 +1,59 @@
 import axios from "axios";
 import { logger } from "../apis/logger.js";
-import { getStacktrace } from "../logger/selected-logs.js";
-async function logResponse(ok, response) {
-    const okToTextMap = {
-        success: 'API 请求成功：',
-        error: 'API 请求失败：'
-    };
-    const parts = [
-        okToTextMap[ok],
-        (response.config.url || '').split('?')[0],
-        ' - ',
-        Date.now() - response.config._startTime,
-        'ms'
-    ];
-    const logTraceID = response.headers['x-log-trace-id'];
-    const args = [
-        '请求参数：',
-        response.config.data,
-        '返回数据：',
-        response.data,
-        '请求摘要：',
-        {
-            TraceID: logTraceID,
-            状态: `${response.statusText}[状态码${response.status}]`,
-            时间: `${new Date().toLocaleString()}`
+function getRequestLogInfo(config) {
+    return {
+        url: config?.url,
+        method: config?.method?.toUpperCase(),
+        params: config?.params,
+        data: config?.data,
+        headers: {
+            ...config?.headers,
+            'X-Suda-Csrf-Token': config?.headers['X-Suda-Csrf-Token'] ? '[REDACTED]' : void 0,
+            Authorization: config?.headers.Authorization ? '[REDACTED]' : void 0
         }
-    ];
-    const requestUUID = response.config._requestUUID;
-    const stacktrace = await requestStacktraceMap.get(requestUUID);
-    const logMeta = {
-        logTraceID
     };
-    if (stacktrace) logMeta.stacktrace = stacktrace;
-    logger.log({
-        level: ok,
-        args: [
-            parts.join(''),
-            ...args
-        ],
-        meta: {
-            logTraceID
-        }
-    });
 }
-const requestStacktraceMap = new Map();
 function initAxiosConfig(axiosInstance) {
     if (!axiosInstance) axiosInstance = axios;
     axiosInstance.interceptors.request.use((config)=>{
-        const requestUUID = crypto.randomUUID();
-        const stacktrace = getStacktrace();
-        requestStacktraceMap.set(requestUUID, stacktrace);
-        config._requestUUID = requestUUID;
         config._startTime = Date.now();
         const csrfToken = window.csrfToken;
         if (csrfToken) config.headers['X-Suda-Csrf-Token'] = csrfToken;
+        config.headers['X-Trace-ID'] = crypto.randomUUID();
+        logger.info({
+            type: 'HTTP Request',
+            ...getRequestLogInfo(config)
+        });
         return config;
-    }, (error)=>Promise.reject(error));
+    }, (error)=>{
+        logger.error({
+            type: 'HTTP Request',
+            ...getRequestLogInfo(error.config),
+            message: error.message,
+            stack: error.stack
+        });
+        return Promise.reject(error);
+    });
     axiosInstance.interceptors.response.use((response)=>{
-        logResponse('success', response);
+        logger.info({
+            type: 'HTTP Response',
+            ...getRequestLogInfo(response.config),
+            status: response.status,
+            statusText: response.statusText,
+            responseData: response.data,
+            responseTime: Date.now() - response.config._startTime
+        });
         return response;
     }, (error)=>{
-        logResponse('error', error.response);
+        logger.error({
+            type: 'HTTP Response',
+            ...getRequestLogInfo(error.config),
+            status: error.response?.status,
+            statusText: error.response?.statusText,
+            message: error.message,
+            responseData: error.response?.data,
+            responseTime: Date.now() - error.config._startTime
+        });
         return Promise.reject(error);
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/client-toolkit",
-  "version": "1.1.3-alpha.01",
+  "version": "1.1.4",
   "types": "./lib/index.d.ts",
   "main": "./lib/index.js",
   "files": [
@@ -92,7 +92,6 @@
     "sockjs-client": "^1.6.1",
     "sonner": "~2.0.0",
     "source-map": "^0.7.6",
-    "stacktrace-js": "^2.0.2",
     "tailwind-merge": "~2.0.0",
     "tailwind-variants": "0.3.1",
     "tailwindcss-animate": "^1.0.7",