@lark-apaas/client-toolkit 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/lib/apis/hooks/useTheme.d.ts +1 -0
- package/lib/apis/hooks/useTheme.js +1 -0
- package/lib/components/AppContainer/api-proxy/core.d.ts +182 -0
- package/lib/components/AppContainer/api-proxy/core.js +294 -0
- package/lib/components/AppContainer/index.js +2 -0
- package/lib/components/AppContainer/utils/api-panel.d.ts +29 -0
- package/lib/components/AppContainer/utils/api-panel.js +66 -0
- package/lib/components/AppContainer/utils/childApi.js +11 -1
- package/lib/components/ErrorRender/index.js +21 -17
- package/lib/components/User/UserDisplay.d.ts +1 -1
- package/lib/components/User/UserDisplay.js +101 -25
- package/lib/components/User/UserProfile/UserProfile.css +1 -1
- package/lib/components/User/UserProfile/UserProfileContainer.d.ts +1 -1
- package/lib/components/User/UserProfile/UserProfileSkeleton.d.ts +0 -1
- package/lib/components/User/UserProfile/UserProfileSkeleton.js +21 -29
- package/lib/components/User/UserProfile/UserProfileUI.d.ts +1 -2
- package/lib/components/User/UserProfile/UserProfileUI.js +106 -92
- package/lib/components/User/UserSelect.d.ts +1 -1
- package/lib/components/User/UserSelect.js +17 -143
- package/lib/components/User/UserSelectUI/ActionButtons.d.ts +11 -0
- package/lib/components/User/UserSelectUI/ActionButtons.js +44 -0
- package/lib/components/User/UserSelectUI/Dropdown.d.ts +12 -0
- package/lib/components/User/UserSelectUI/Dropdown.js +66 -0
- package/lib/components/User/UserSelectUI/MultipleSelectionTags.d.ts +14 -0
- package/lib/components/User/UserSelectUI/MultipleSelectionTags.js +48 -0
- package/lib/components/User/UserSelectUI/SingleSelectionPreview.d.ts +9 -0
- package/lib/components/User/UserSelectUI/SingleSelectionPreview.js +37 -0
- package/lib/components/User/UserSelectUI/Spinner.d.ts +2 -0
- package/lib/components/User/UserSelectUI/Spinner.js +13 -0
- package/lib/components/User/UserSelectUI/UserSelectUI.d.ts +5 -0
- package/lib/components/User/UserSelectUI/UserSelectUI.js +230 -0
- package/lib/components/User/UserSelectUI/index.d.ts +2 -0
- package/lib/components/User/UserSelectUI/index.js +2 -0
- package/lib/components/User/UserSelectUI/types.d.ts +14 -0
- package/lib/components/User/UserSelectUI/types.js +0 -0
- package/lib/components/User/UserWithAvatar.js +38 -21
- package/lib/components/index.d.ts +2 -5
- package/lib/components/index.js +2 -3
- package/lib/components/ui/avatar.d.ts +6 -0
- package/lib/components/ui/avatar.js +27 -0
- package/lib/components/ui/badge.d.ts +9 -0
- package/lib/components/ui/badge.js +29 -0
- package/lib/components/ui/button.d.ts +10 -0
- package/lib/components/ui/button.js +42 -0
- package/lib/components/ui/input.d.ts +3 -0
- package/lib/components/ui/input.js +12 -0
- package/lib/components/ui/overflow-tooltip-text.d.ts +8 -0
- package/lib/components/ui/overflow-tooltip-text.js +66 -0
- package/lib/components/ui/popover.d.ts +7 -0
- package/lib/components/ui/popover.js +35 -0
- package/lib/components/ui/skeleton.d.ts +7 -0
- package/lib/components/ui/skeleton.js +10 -0
- package/lib/components/ui/tooltip.d.ts +7 -0
- package/lib/components/ui/tooltip.js +24 -0
- package/lib/override.css +0 -16
- package/lib/types/iframe-events.d.ts +9 -0
- package/lib/types/index.d.ts +0 -29
- package/lib/utils/axiosConfig.js +18 -22
- package/package.json +8 -1
- package/lib/apis/components/SidebarNav.d.ts +0 -1
- package/lib/apis/components/SidebarNav.js +0 -2
- package/lib/components/SidebarNav/DrawerNav.d.ts +0 -3
- package/lib/components/SidebarNav/DrawerNav.js +0 -64
- package/lib/components/SidebarNav/DropdownNav.d.ts +0 -3
- package/lib/components/SidebarNav/DropdownNav.js +0 -40
- package/lib/components/SidebarNav/Sidebar.d.ts +0 -3
- package/lib/components/SidebarNav/Sidebar.js +0 -33
- package/lib/components/SidebarNav/index.d.ts +0 -5
- package/lib/components/SidebarNav/index.js +0 -61
- package/lib/components/User/UserSelect.css +0 -11
- package/lib/components/common/LogoInfo.d.ts +0 -5
- package/lib/components/common/LogoInfo.js +0 -30
- package/lib/components/common/NavItem.d.ts +0 -20
- package/lib/components/common/NavItem.js +0 -112
- package/lib/components/common/NavMenu.d.ts +0 -9
- package/lib/components/common/NavMenu.js +0 -50
- package/lib/components/common/UserAvatarLayout.d.ts +0 -4
- package/lib/components/common/UserAvatarLayout.js +0 -41
- package/lib/components/common/UserAvatarMenu.d.ts +0 -4
- package/lib/components/common/UserAvatarMenu.js +0 -58
- package/lib/components/common/index.d.ts +0 -9
- package/lib/components/common/index.js +0 -10
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const badgeVariants: (props?: {
|
|
4
|
+
variant?: "default" | "secondary" | "destructive" | "outline";
|
|
5
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
6
|
+
declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
|
|
7
|
+
asChild?: boolean;
|
|
8
|
+
}): React.JSX.Element;
|
|
9
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
+
const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
|
|
10
|
+
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
11
|
+
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
12
|
+
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
defaultVariants: {
|
|
16
|
+
variant: "default"
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
function Badge({ className, variant, asChild = false, ...props }) {
|
|
20
|
+
const Comp = asChild ? Slot : "span";
|
|
21
|
+
return /*#__PURE__*/ jsx(Comp, {
|
|
22
|
+
"data-slot": "badge",
|
|
23
|
+
className: clsxWithTw(badgeVariants({
|
|
24
|
+
variant
|
|
25
|
+
}), className),
|
|
26
|
+
...props
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { type VariantProps } from "class-variance-authority";
|
|
3
|
+
declare const buttonVariants: (props?: {
|
|
4
|
+
variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost";
|
|
5
|
+
size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg";
|
|
6
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
7
|
+
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
8
|
+
asChild?: boolean;
|
|
9
|
+
}): React.JSX.Element;
|
|
10
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import "react";
|
|
3
|
+
import { Slot } from "@radix-ui/react-slot";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
+
const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
|
|
7
|
+
variants: {
|
|
8
|
+
variant: {
|
|
9
|
+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
10
|
+
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
11
|
+
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
|
12
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
13
|
+
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
|
14
|
+
link: "text-primary underline-offset-4 hover:underline"
|
|
15
|
+
},
|
|
16
|
+
size: {
|
|
17
|
+
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
|
18
|
+
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
|
19
|
+
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
|
20
|
+
icon: "size-9",
|
|
21
|
+
"icon-sm": "size-8",
|
|
22
|
+
"icon-lg": "size-10"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
variant: "default",
|
|
27
|
+
size: "default"
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
function Button({ className, variant, size, asChild = false, ...props }) {
|
|
31
|
+
const Comp = asChild ? Slot : "button";
|
|
32
|
+
return /*#__PURE__*/ jsx(Comp, {
|
|
33
|
+
"data-slot": "button",
|
|
34
|
+
className: clsxWithTw(buttonVariants({
|
|
35
|
+
variant,
|
|
36
|
+
size,
|
|
37
|
+
className
|
|
38
|
+
})),
|
|
39
|
+
...props
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
export { Button, buttonVariants };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
4
|
+
const Input = /*#__PURE__*/ forwardRef(({ className, type, ...props }, ref)=>/*#__PURE__*/ jsx("input", {
|
|
5
|
+
ref: ref,
|
|
6
|
+
type: type,
|
|
7
|
+
"data-slot": "input",
|
|
8
|
+
className: clsxWithTw("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className),
|
|
9
|
+
...props
|
|
10
|
+
}));
|
|
11
|
+
Input.displayName = "Input";
|
|
12
|
+
export { Input };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface OverflowTooltipTextProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
text: string;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Displays truncated inline text and shows a tooltip with the full content when overflowed.
|
|
7
|
+
*/
|
|
8
|
+
export declare function OverflowTooltipText({ text, className, ...props }: OverflowTooltipTextProps): React.JSX.Element;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
|
|
3
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";
|
|
4
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
5
|
+
function OverflowTooltipText({ text, className, ...props }) {
|
|
6
|
+
const textRef = useRef(null);
|
|
7
|
+
const [isOverflowing, setIsOverflowing] = useState(false);
|
|
8
|
+
const checkOverflow = useCallback(()=>{
|
|
9
|
+
const el = textRef.current;
|
|
10
|
+
if (!el) return;
|
|
11
|
+
setIsOverflowing(el.scrollWidth > el.clientWidth + 1);
|
|
12
|
+
}, []);
|
|
13
|
+
useLayoutEffect(()=>{
|
|
14
|
+
checkOverflow();
|
|
15
|
+
}, [
|
|
16
|
+
checkOverflow
|
|
17
|
+
]);
|
|
18
|
+
useEffect(()=>{
|
|
19
|
+
const el = textRef.current;
|
|
20
|
+
if (!el) return;
|
|
21
|
+
const observer = new ResizeObserver(()=>{
|
|
22
|
+
checkOverflow();
|
|
23
|
+
});
|
|
24
|
+
observer.observe(el);
|
|
25
|
+
return ()=>{
|
|
26
|
+
observer.disconnect();
|
|
27
|
+
};
|
|
28
|
+
}, [
|
|
29
|
+
checkOverflow
|
|
30
|
+
]);
|
|
31
|
+
useEffect(()=>{
|
|
32
|
+
const handleResize = ()=>{
|
|
33
|
+
checkOverflow();
|
|
34
|
+
};
|
|
35
|
+
window.addEventListener('resize', handleResize);
|
|
36
|
+
return ()=>{
|
|
37
|
+
window.removeEventListener('resize', handleResize);
|
|
38
|
+
};
|
|
39
|
+
}, [
|
|
40
|
+
checkOverflow
|
|
41
|
+
]);
|
|
42
|
+
const textNode = /*#__PURE__*/ jsx("span", {
|
|
43
|
+
ref: textRef,
|
|
44
|
+
className: clsxWithTw('inline-block truncate', className),
|
|
45
|
+
...props,
|
|
46
|
+
children: text
|
|
47
|
+
});
|
|
48
|
+
if (!isOverflowing) return textNode;
|
|
49
|
+
return /*#__PURE__*/ jsx(TooltipProvider, {
|
|
50
|
+
children: /*#__PURE__*/ jsxs(Tooltip, {
|
|
51
|
+
delayDuration: 80,
|
|
52
|
+
children: [
|
|
53
|
+
/*#__PURE__*/ jsx(TooltipTrigger, {
|
|
54
|
+
asChild: true,
|
|
55
|
+
children: textNode
|
|
56
|
+
}),
|
|
57
|
+
/*#__PURE__*/ jsx(TooltipContent, {
|
|
58
|
+
sideOffset: 4,
|
|
59
|
+
className: "bg-[rgb(31,35,41)] text-white ring-0",
|
|
60
|
+
children: text
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
})
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
export { OverflowTooltipText };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
3
|
+
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
|
|
4
|
+
declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
|
|
5
|
+
declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;
|
|
6
|
+
declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
|
|
7
|
+
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import "react";
|
|
4
|
+
import { Anchor, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
|
|
5
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
+
function Popover({ ...props }) {
|
|
7
|
+
return /*#__PURE__*/ jsx(Root, {
|
|
8
|
+
"data-slot": "popover",
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function PopoverTrigger({ ...props }) {
|
|
13
|
+
return /*#__PURE__*/ jsx(Trigger, {
|
|
14
|
+
"data-slot": "popover-trigger",
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
|
|
19
|
+
return /*#__PURE__*/ jsx(Portal, {
|
|
20
|
+
children: /*#__PURE__*/ jsx(Content, {
|
|
21
|
+
"data-slot": "popover-content",
|
|
22
|
+
align: align,
|
|
23
|
+
sideOffset: sideOffset,
|
|
24
|
+
className: clsxWithTw("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
|
|
25
|
+
...props
|
|
26
|
+
})
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
function PopoverAnchor({ ...props }) {
|
|
30
|
+
return /*#__PURE__*/ jsx(Anchor, {
|
|
31
|
+
"data-slot": "popover-anchor",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
|
|
3
|
+
/**
|
|
4
|
+
* Minimal shadcn/ui-compatible Skeleton primitive.
|
|
5
|
+
* Mirrors the upstream API so that downstream components can swap in seamlessly.
|
|
6
|
+
*/
|
|
7
|
+
export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
4
|
+
const Skeleton = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
|
|
5
|
+
ref: ref,
|
|
6
|
+
className: clsxWithTw('animate-pulse rounded-md bg-accent', className),
|
|
7
|
+
...props
|
|
8
|
+
}));
|
|
9
|
+
Skeleton.displayName = 'Skeleton';
|
|
10
|
+
export { Skeleton };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
3
|
+
declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
4
|
+
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
5
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { Arrow, Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
|
|
5
|
+
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
+
const TooltipProvider = Provider;
|
|
7
|
+
const Tooltip = Root;
|
|
8
|
+
const TooltipTrigger = Trigger;
|
|
9
|
+
const TooltipContent = /*#__PURE__*/ forwardRef(({ className, sideOffset = 4, children, ...props }, ref)=>/*#__PURE__*/ jsx(Portal, {
|
|
10
|
+
children: /*#__PURE__*/ jsxs(Content, {
|
|
11
|
+
ref: ref,
|
|
12
|
+
sideOffset: sideOffset,
|
|
13
|
+
className: clsxWithTw('z-50 w-fit rounded-md bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-lg ring-1 ring-border data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 animate-in fade-in-0 zoom-in-95', className),
|
|
14
|
+
...props,
|
|
15
|
+
children: [
|
|
16
|
+
children,
|
|
17
|
+
/*#__PURE__*/ jsx(Arrow, {
|
|
18
|
+
className: "fill-[rgb(31,35,41)] stroke-[rgb(31,35,41)]"
|
|
19
|
+
})
|
|
20
|
+
]
|
|
21
|
+
})
|
|
22
|
+
}));
|
|
23
|
+
TooltipContent.displayName = Content.displayName;
|
|
24
|
+
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
package/lib/override.css
CHANGED
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
.miao-top-nav {
|
|
2
|
-
& .ant-menu-overflow.ant-menu-horizontal > .ant-menu-item:after, & .ant-menu-overflow > .ant-menu.ant-menu-horizontal > .ant-menu-item:after, & .ant-menu-overflow.ant-menu-horizontal > .ant-menu-submenu:after, & .ant-menu-overflow > .ant-menu.ant-menu-horizontal > .ant-menu-submenu:after {
|
|
3
|
-
bottom: 1px !important;
|
|
4
|
-
}
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.miao-nav {
|
|
8
|
-
& .ant-drawer-content-wrapper {
|
|
9
|
-
width: inherit !important;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
&.ant-btn-color-default.ant-btn-variant-link:not(:disabled):not(.ant-btn-disabled):hover {
|
|
13
|
-
color: inherit;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
1
|
.ant-btn .ant-btn-icon {
|
|
18
2
|
align-items: center;
|
|
19
3
|
display: inline-flex;
|
|
@@ -48,4 +48,13 @@ export interface ParentApi {
|
|
|
48
48
|
export interface ChildApi {
|
|
49
49
|
getRoutes: () => Promise<any[]>;
|
|
50
50
|
getSourceMap: () => Promise<string>;
|
|
51
|
+
apiProxy: {
|
|
52
|
+
api_get: (url: string, config?: any) => Promise<any>;
|
|
53
|
+
api_post: (url: string, data?: any, config?: any) => Promise<any>;
|
|
54
|
+
api_put: (url: string, data?: any, config?: any) => Promise<any>;
|
|
55
|
+
api_delete: (url: string, config?: any) => Promise<any>;
|
|
56
|
+
api_patch: (url: string, data?: any, config?: any) => Promise<any>;
|
|
57
|
+
api_head: (url: string, config?: any) => Promise<any>;
|
|
58
|
+
api_options: (url: string, config?: any) => Promise<any>;
|
|
59
|
+
};
|
|
51
60
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,33 +1,4 @@
|
|
|
1
|
-
import { type ComponentType } from 'react';
|
|
2
1
|
export type ITheme = 'dark' | 'light' | 'system';
|
|
3
|
-
export interface NavItemProps {
|
|
4
|
-
name: string;
|
|
5
|
-
to: string;
|
|
6
|
-
icon?: ComponentType<{
|
|
7
|
-
className?: string;
|
|
8
|
-
}>;
|
|
9
|
-
children?: NavItemProps[];
|
|
10
|
-
className?: string;
|
|
11
|
-
hasBadge?: boolean;
|
|
12
|
-
direction?: 'horizontal' | 'vertical';
|
|
13
|
-
onClick?: () => void;
|
|
14
|
-
hideActive?: boolean;
|
|
15
|
-
}
|
|
16
|
-
export interface BaseNavProps {
|
|
17
|
-
navList?: NavItemProps[];
|
|
18
|
-
className?: string;
|
|
19
|
-
activeClassName?: string;
|
|
20
|
-
}
|
|
21
|
-
export interface NavProps extends BaseNavProps {
|
|
22
|
-
/** 亮色主题下的主色 */
|
|
23
|
-
lightColorPrimary?: string;
|
|
24
|
-
/** 暗色主题下的主色 */
|
|
25
|
-
darkColorPrimary?: string;
|
|
26
|
-
/**
|
|
27
|
-
* 移动端导航栏 变体
|
|
28
|
-
*/
|
|
29
|
-
mobileVariant?: 'normal' | 'dropdown';
|
|
30
|
-
}
|
|
31
2
|
declare global {
|
|
32
3
|
interface Window {
|
|
33
4
|
token?: string;
|
package/lib/utils/axiosConfig.js
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
import axios from "axios";
|
|
2
2
|
import { logger } from "../apis/logger.js";
|
|
3
|
+
function getRequestLogInfo(config) {
|
|
4
|
+
return {
|
|
5
|
+
url: config?.url,
|
|
6
|
+
method: config?.method?.toUpperCase(),
|
|
7
|
+
params: config?.params,
|
|
8
|
+
data: config?.data,
|
|
9
|
+
headers: {
|
|
10
|
+
...config?.headers,
|
|
11
|
+
'X-Suda-Csrf-Token': config?.headers['X-Suda-Csrf-Token'] ? '[REDACTED]' : void 0,
|
|
12
|
+
Authorization: config?.headers.Authorization ? '[REDACTED]' : void 0
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
}
|
|
3
16
|
function initAxiosConfig(axiosInstance) {
|
|
4
17
|
if (!axiosInstance) axiosInstance = axios;
|
|
5
18
|
axiosInstance.defaults.timeout = 10000;
|
|
@@ -9,30 +22,14 @@ function initAxiosConfig(axiosInstance) {
|
|
|
9
22
|
if (csrfToken) config.headers['X-Suda-Csrf-Token'] = csrfToken;
|
|
10
23
|
logger.info({
|
|
11
24
|
type: 'HTTP Request',
|
|
12
|
-
|
|
13
|
-
method: config.method?.toUpperCase(),
|
|
14
|
-
params: config.params,
|
|
15
|
-
data: config.data,
|
|
16
|
-
headers: {
|
|
17
|
-
...config.headers,
|
|
18
|
-
'X-Suda-Csrf-Token': config.headers['X-Suda-Csrf-Token'] ? '[REDACTED]' : void 0,
|
|
19
|
-
Authorization: config.headers.Authorization ? '[REDACTED]' : void 0
|
|
20
|
-
}
|
|
25
|
+
...getRequestLogInfo(config)
|
|
21
26
|
});
|
|
22
27
|
return config;
|
|
23
28
|
}, (error)=>{
|
|
24
29
|
logger.error({
|
|
25
30
|
type: 'HTTP Request',
|
|
31
|
+
...getRequestLogInfo(error.config),
|
|
26
32
|
message: error.message,
|
|
27
|
-
url: error.config?.url,
|
|
28
|
-
method: error.config?.method?.toUpperCase(),
|
|
29
|
-
params: error.config?.params,
|
|
30
|
-
data: error.config?.data,
|
|
31
|
-
headers: {
|
|
32
|
-
...error.config?.headers,
|
|
33
|
-
'X-Suda-Csrf-Token': error.config?.headers['X-Suda-Csrf-Token'] ? '[REDACTED]' : void 0,
|
|
34
|
-
Authorization: error.config?.headers.Authorization ? '[REDACTED]' : void 0
|
|
35
|
-
},
|
|
36
33
|
stack: error.stack
|
|
37
34
|
});
|
|
38
35
|
return Promise.reject(error);
|
|
@@ -40,18 +37,17 @@ function initAxiosConfig(axiosInstance) {
|
|
|
40
37
|
axiosInstance.interceptors.response.use((response)=>{
|
|
41
38
|
logger.info({
|
|
42
39
|
type: 'HTTP Response',
|
|
43
|
-
|
|
44
|
-
method: response.config.method?.toUpperCase(),
|
|
40
|
+
...getRequestLogInfo(response.config),
|
|
45
41
|
status: response.status,
|
|
46
42
|
statusText: response.statusText,
|
|
43
|
+
responseData: response.data,
|
|
47
44
|
responseTime: Date.now() - response.config._startTime
|
|
48
45
|
});
|
|
49
46
|
return response;
|
|
50
47
|
}, (error)=>{
|
|
51
48
|
logger.error({
|
|
52
49
|
type: 'HTTP Response',
|
|
53
|
-
|
|
54
|
-
method: error.config?.method?.toUpperCase(),
|
|
50
|
+
...getRequestLogInfo(error.config),
|
|
55
51
|
status: error.response?.status,
|
|
56
52
|
statusText: error.response?.statusText,
|
|
57
53
|
message: error.message,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lark-apaas/client-toolkit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"types": "./lib/index.d.ts",
|
|
5
5
|
"main": "./lib/index.js",
|
|
6
6
|
"files": [
|
|
@@ -77,7 +77,13 @@
|
|
|
77
77
|
"@ant-design/cssinjs": "^1.24.0",
|
|
78
78
|
"@data-loom/js": "0.3.1",
|
|
79
79
|
"@lark-apaas/miaoda-inspector": "^1.0.0",
|
|
80
|
+
"@radix-ui/react-avatar": "^1.1.10",
|
|
81
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
82
|
+
"@radix-ui/react-slot": "^1.2.3",
|
|
83
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
80
84
|
"@zumer/snapdom": "^1.9.14",
|
|
85
|
+
"axios": "^1.12.2",
|
|
86
|
+
"class-variance-authority": "^0.7.1",
|
|
81
87
|
"clsx": "~2.0.1",
|
|
82
88
|
"dayjs": "^1.11.13",
|
|
83
89
|
"echarts": "^6.0.0",
|
|
@@ -102,6 +108,7 @@
|
|
|
102
108
|
"@storybook/blocks": "^8.6.14",
|
|
103
109
|
"@storybook/react": "^8.6.14",
|
|
104
110
|
"@storybook/test": "^8.6.14",
|
|
111
|
+
"@tailwindcss/postcss": "^4.1.0",
|
|
105
112
|
"@testing-library/jest-dom": "^6.6.4",
|
|
106
113
|
"@testing-library/react": "^16.3.0",
|
|
107
114
|
"@types/lodash": "^4.17.20",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as SidebarNav } from '../../components/SidebarNav';
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { Button, Drawer } from "antd";
|
|
4
|
-
import { Menu } from "lucide-react";
|
|
5
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
6
|
-
import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
|
|
7
|
-
function DrawerNav({ navList, className, activeClassName }) {
|
|
8
|
-
const [open, setOpen] = useState(false);
|
|
9
|
-
const showDrawer = ()=>{
|
|
10
|
-
setOpen(true);
|
|
11
|
-
};
|
|
12
|
-
const onClose = ()=>{
|
|
13
|
-
setOpen(false);
|
|
14
|
-
};
|
|
15
|
-
return /*#__PURE__*/ jsxs("div", {
|
|
16
|
-
className: clsxWithTw('w-full sticky top-0 z-50 flex flex-row h-14 px-3 items-center', TopHeaderThemeClass, className),
|
|
17
|
-
children: [
|
|
18
|
-
/*#__PURE__*/ jsx(Button, {
|
|
19
|
-
type: "text",
|
|
20
|
-
onClick: showDrawer,
|
|
21
|
-
className: "md:hidden px-0 text-inherit border-0",
|
|
22
|
-
children: /*#__PURE__*/ jsx(Menu, {
|
|
23
|
-
className: "h-6 w-6"
|
|
24
|
-
})
|
|
25
|
-
}),
|
|
26
|
-
/*#__PURE__*/ jsx(LogoInfo, {
|
|
27
|
-
className: "ml-[6px] pl-3"
|
|
28
|
-
}),
|
|
29
|
-
/*#__PURE__*/ jsxs(Drawer, {
|
|
30
|
-
placement: "left",
|
|
31
|
-
rootClassName: "miao-nav",
|
|
32
|
-
closeIcon: null,
|
|
33
|
-
classNames: {
|
|
34
|
-
body: clsxWithTw('w-full h-full flex flex-col p-0', className),
|
|
35
|
-
content: 'w-[320px]'
|
|
36
|
-
},
|
|
37
|
-
onClose: onClose,
|
|
38
|
-
open: open,
|
|
39
|
-
children: [
|
|
40
|
-
/*#__PURE__*/ jsx("div", {
|
|
41
|
-
className: "w-full h-14",
|
|
42
|
-
children: /*#__PURE__*/ jsx(LogoInfo, {
|
|
43
|
-
className: "pl-5 pr-3 h-full flex items-center"
|
|
44
|
-
})
|
|
45
|
-
}),
|
|
46
|
-
/*#__PURE__*/ jsx("div", {
|
|
47
|
-
className: "flex-1 overflow-auto min-h-0",
|
|
48
|
-
children: /*#__PURE__*/ jsx(NavMenu, {
|
|
49
|
-
navList: navList,
|
|
50
|
-
className: clsxWithTw('border-0', className),
|
|
51
|
-
activeClassName: activeClassName,
|
|
52
|
-
mode: "vertical",
|
|
53
|
-
onClick: onClose
|
|
54
|
-
})
|
|
55
|
-
}),
|
|
56
|
-
/*#__PURE__*/ jsx(UserAvatarLayout, {
|
|
57
|
-
className: "mt-2"
|
|
58
|
-
})
|
|
59
|
-
]
|
|
60
|
-
})
|
|
61
|
-
]
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
export { DrawerNav as default };
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
|
-
import { Menu, X } from "lucide-react";
|
|
4
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
5
|
-
import { DropdownThemeClass, LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarMenu } from "../common/index.js";
|
|
6
|
-
function DropdownNav({ navList = [], className, activeClassName }) {
|
|
7
|
-
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
8
|
-
const MenuDropdownIcon = isMenuOpen ? X : Menu;
|
|
9
|
-
return /*#__PURE__*/ jsxs("header", {
|
|
10
|
-
className: clsxWithTw('w-full flex sticky top-0 z-50 h-14 px-3 gap-1.5 items-center', TopHeaderThemeClass, isMenuOpen ? 'border-transparent' : '', className),
|
|
11
|
-
children: [
|
|
12
|
-
navList.length > 0 ? /*#__PURE__*/ jsx("div", {
|
|
13
|
-
className: "md:hidden flex mr-3",
|
|
14
|
-
children: /*#__PURE__*/ jsx(MenuDropdownIcon, {
|
|
15
|
-
className: "h-6 w-6 cursor-pointer",
|
|
16
|
-
onClick: ()=>setIsMenuOpen(!isMenuOpen)
|
|
17
|
-
})
|
|
18
|
-
}) : null,
|
|
19
|
-
/*#__PURE__*/ jsx(LogoInfo, {
|
|
20
|
-
className: "flex-1"
|
|
21
|
-
}),
|
|
22
|
-
/*#__PURE__*/ jsx(UserAvatarMenu, {
|
|
23
|
-
className: className
|
|
24
|
-
}),
|
|
25
|
-
isMenuOpen && navList.length > 0 ? /*#__PURE__*/ jsx("div", {
|
|
26
|
-
className: clsxWithTw('overflow-y-auto max-h-[482px] px-2 pb-2 absolute top-14 left-0 right-0 shadow-lg', DropdownThemeClass, className),
|
|
27
|
-
children: /*#__PURE__*/ jsx(NavMenu, {
|
|
28
|
-
navList: navList,
|
|
29
|
-
className: className,
|
|
30
|
-
activeClassName: activeClassName,
|
|
31
|
-
onClick: (_key)=>{
|
|
32
|
-
setIsMenuOpen(false);
|
|
33
|
-
},
|
|
34
|
-
mode: "vertical"
|
|
35
|
-
})
|
|
36
|
-
}) : null
|
|
37
|
-
]
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
export { DropdownNav as default };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
|
-
import { clsxWithTw } from "../../utils/utils.js";
|
|
4
|
-
import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
|
|
5
|
-
function SidebarNav({ activeClassName, className, navList }) {
|
|
6
|
-
return /*#__PURE__*/ jsx("div", {
|
|
7
|
-
className: clsxWithTw('h-full overflow-y-auto scrollbar-none w-[260px] dark:border-gray-800', className),
|
|
8
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
9
|
-
className: clsxWithTw('fixed top-0 bottom-0 left-0 w-[260px] flex flex-col border-r', TopHeaderThemeClass, className),
|
|
10
|
-
children: [
|
|
11
|
-
/*#__PURE__*/ jsx("div", {
|
|
12
|
-
className: "w-full px-2 pt-2 h-12 mb-3",
|
|
13
|
-
children: /*#__PURE__*/ jsx(LogoInfo, {
|
|
14
|
-
className: "px-2 pt-[9px] pb-[15px]"
|
|
15
|
-
})
|
|
16
|
-
}),
|
|
17
|
-
/*#__PURE__*/ jsx("div", {
|
|
18
|
-
className: "flex-1 overflow-auto min-h-0",
|
|
19
|
-
children: /*#__PURE__*/ jsx(NavMenu, {
|
|
20
|
-
navList: navList,
|
|
21
|
-
className: clsxWithTw('border-0', className),
|
|
22
|
-
activeClassName: activeClassName,
|
|
23
|
-
mode: "vertical"
|
|
24
|
-
})
|
|
25
|
-
}),
|
|
26
|
-
/*#__PURE__*/ jsx(UserAvatarLayout, {
|
|
27
|
-
className: "mt-2"
|
|
28
|
-
})
|
|
29
|
-
]
|
|
30
|
-
})
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
export { SidebarNav as default };
|