@xola/ui-kit 2.3.40 → 2.4.1-x2-14336.0
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 +159 -97
- package/build/style.css +1 -1
- package/build/ui-kit.mjs +7651 -11401
- package/build/ui-kit.umd.js +2 -32
- package/index.d.ts +124 -1
- package/package.json +62 -43
package/index.d.ts
CHANGED
|
@@ -1,3 +1,123 @@
|
|
|
1
|
+
import type * as React from "react";
|
|
2
|
+
import type { TippyProps } from "@tippyjs/react";
|
|
3
|
+
|
|
4
|
+
// The only three widths a sidebar can render at. Shared by the `variant` prop, `onVariantChange`,
|
|
5
|
+
// and `useSidebar()`'s return value so the three sites can't drift apart.
|
|
6
|
+
export type SidebarVariant = "icons" | "text" | "iconsAndText";
|
|
7
|
+
|
|
8
|
+
export interface SidebarNotificationSection {
|
|
9
|
+
count?: number;
|
|
10
|
+
content?: React.ReactNode;
|
|
11
|
+
title?: string;
|
|
12
|
+
onClose?: () => void;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export interface SidebarProps {
|
|
16
|
+
logo?: React.ReactNode;
|
|
17
|
+
children: React.ReactNode;
|
|
18
|
+
className?: string;
|
|
19
|
+
footer?: React.ReactElement;
|
|
20
|
+
isFixed?: boolean;
|
|
21
|
+
onLogoClick?: () => void;
|
|
22
|
+
isLeftDrawerOpen?: boolean;
|
|
23
|
+
isRightDrawerOpen?: boolean;
|
|
24
|
+
handleDrawerStateChange?: (side: "left" | "right") => void;
|
|
25
|
+
onSidebarResize?: (width: string) => void;
|
|
26
|
+
variant?: SidebarVariant;
|
|
27
|
+
minWidth?: number;
|
|
28
|
+
maxWidth?: number;
|
|
29
|
+
isCollapsed?: boolean;
|
|
30
|
+
onCollapsedChange?: (isCollapsed: boolean) => void;
|
|
31
|
+
onVariantChange?: (variant: SidebarVariant) => void;
|
|
32
|
+
autoCollapseBelow?: number | null;
|
|
33
|
+
storageKey?: string | null;
|
|
34
|
+
cssVariableTarget?: HTMLElement | null;
|
|
35
|
+
notifications?: {
|
|
36
|
+
announcements?: SidebarNotificationSection & { hide?: boolean };
|
|
37
|
+
notices?: SidebarNotificationSection;
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export interface SidebarAccountProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
42
|
+
name: string;
|
|
43
|
+
description?: string;
|
|
44
|
+
image?: React.ReactNode;
|
|
45
|
+
icon?: React.ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* @deprecated No-op. The sidebar's variant (see `useSidebar`) now drives this presentation.
|
|
48
|
+
* Kept only so consumers built against the pre-variant API still compile. Warns in development.
|
|
49
|
+
*/
|
|
50
|
+
isResponsive?: boolean;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export interface SidebarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
54
|
+
/** "solid" gives a filled, card-like button with a larger icon; defaults to "plain". */
|
|
55
|
+
appearance?: "plain" | "solid";
|
|
56
|
+
icon: React.ComponentType<{ className?: string }>;
|
|
57
|
+
label: string;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
61
|
+
children: React.ReactNode;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// A bare thunk is a real call shape (x2-seller AdminMenu.tsx:422 passes `() => Icon` for an
|
|
65
|
+
// already-built element, ignoring `className`), not just a `React.ComponentType`, and the runtime
|
|
66
|
+
// gate is `PropTypes.func`, which permits both.
|
|
67
|
+
export type SidebarLinkIcon = React.ComponentType<{ className?: string }> | (() => React.ReactElement | null);
|
|
68
|
+
|
|
69
|
+
export interface SidebarLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
70
|
+
align?: "center" | "left" | "right";
|
|
71
|
+
isActive?: boolean;
|
|
72
|
+
icon?: SidebarLinkIcon;
|
|
73
|
+
// A consumer-supplied trailing node. Rendered in every variant, unlike the default chevron.
|
|
74
|
+
info?: React.ReactNode;
|
|
75
|
+
children: React.ReactNode;
|
|
76
|
+
isSubMenuItem?: boolean;
|
|
77
|
+
classNames?: { text?: string };
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
export interface SidebarSeparatorProps {
|
|
81
|
+
className?: string;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
// Extends Tippy's own props, not just `{ children, content }`: Sidebar.Menu.jsx spreads
|
|
85
|
+
// `...rest` onto the underlying Tippy, so x2-seller's `visible`/`onMount`/`onHide` pass-through
|
|
86
|
+
// props need to type-check too.
|
|
87
|
+
export interface SidebarMenuProps extends Omit<TippyProps, "children" | "content"> {
|
|
88
|
+
children: React.ReactNode;
|
|
89
|
+
content: React.ReactNode;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export interface SidebarHeadingProps {
|
|
93
|
+
icon: React.ComponentType<{ className?: string }>;
|
|
94
|
+
label: string;
|
|
95
|
+
className?: string;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export declare const SIDEBAR_WIDTH: { MIN: number; MAX: number };
|
|
99
|
+
export declare const SIDEBAR_VARIANT: { ICONS: "icons"; TEXT: "text"; ICONS_AND_TEXT: "iconsAndText" };
|
|
100
|
+
export declare const SIDEBAR_VARIANT_WIDTH: { TEXT: number; ICONS_AND_TEXT: number };
|
|
101
|
+
|
|
102
|
+
export declare function useSidebar(): {
|
|
103
|
+
variant: SidebarVariant;
|
|
104
|
+
showIcons: boolean;
|
|
105
|
+
showText: boolean;
|
|
106
|
+
isCollapsed: boolean;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export declare function useSidebarWidth(): number;
|
|
110
|
+
|
|
111
|
+
export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>> & {
|
|
112
|
+
Account: React.ComponentType<SidebarAccountProps>;
|
|
113
|
+
Button: React.ComponentType<SidebarButtonProps>;
|
|
114
|
+
Footer: React.ComponentType<SidebarFooterProps>;
|
|
115
|
+
Link: React.ComponentType<SidebarLinkProps>;
|
|
116
|
+
Separator: React.ComponentType<SidebarSeparatorProps>;
|
|
117
|
+
Menu: React.ComponentType<SidebarMenuProps>;
|
|
118
|
+
Heading: React.ComponentType<SidebarHeadingProps>;
|
|
119
|
+
};
|
|
120
|
+
|
|
1
121
|
// This is just to make the auto-import work.
|
|
2
122
|
// Next step is to add types for the props.
|
|
3
123
|
export {
|
|
@@ -26,6 +146,7 @@ export {
|
|
|
26
146
|
BellIcon,
|
|
27
147
|
BookIcon,
|
|
28
148
|
BookmarkIcon,
|
|
149
|
+
BottomSheet,
|
|
29
150
|
BoxIcon,
|
|
30
151
|
BugIcon,
|
|
31
152
|
Breadcrumb,
|
|
@@ -115,6 +236,8 @@ export {
|
|
|
115
236
|
EmailSendIcon,
|
|
116
237
|
EmptyChecklistIcon,
|
|
117
238
|
EquipmentIcon,
|
|
239
|
+
EquipmentCheckoutIcon,
|
|
240
|
+
EquipmentReturnIcon,
|
|
118
241
|
ExportIcon,
|
|
119
242
|
EyeClosedIcon,
|
|
120
243
|
EyeIcon,
|
|
@@ -231,7 +354,6 @@ export {
|
|
|
231
354
|
ShareIcon,
|
|
232
355
|
ShirtIcon,
|
|
233
356
|
ShoppingBagIcon,
|
|
234
|
-
Sidebar,
|
|
235
357
|
Skeleton,
|
|
236
358
|
SlideDown,
|
|
237
359
|
Spinner,
|
|
@@ -265,6 +387,7 @@ export {
|
|
|
265
387
|
UnlinkIcon,
|
|
266
388
|
useId,
|
|
267
389
|
useIsClient,
|
|
390
|
+
useIsMobile,
|
|
268
391
|
useViewportHeight,
|
|
269
392
|
UserAddIcon,
|
|
270
393
|
UserChangedIcon,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xola/ui-kit",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.1-x2-14336.0",
|
|
4
4
|
"description": "Xola UI Kit",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -19,69 +19,88 @@
|
|
|
19
19
|
"types": "index.d.ts",
|
|
20
20
|
"scripts": {
|
|
21
21
|
"prepare": "node scripts/prepare && vite build",
|
|
22
|
-
"start": "npm run storybook
|
|
23
|
-
"dev": "npm run storybook -
|
|
24
|
-
"storybook": "npm run prepare &&
|
|
22
|
+
"start": "npm run storybook",
|
|
23
|
+
"dev": "npm run clean && npm run prepare && storybook dev -p 6006 --no-open",
|
|
24
|
+
"storybook": "npm run prepare && storybook dev -p 6006 --no-open",
|
|
25
25
|
"build": "npm run prepare && vite build",
|
|
26
|
-
"clean": "rm -rf node_modules/.vite",
|
|
27
|
-
"build:storybook": "npm run prepare &&
|
|
28
|
-
"lint": "
|
|
29
|
-
"lint:
|
|
30
|
-
"lint:report": "xola-lint src --ignore src/stories --reporter=json src > eslint_report.json",
|
|
26
|
+
"clean": "rm -rf node_modules/.vite node_modules/.cache",
|
|
27
|
+
"build:storybook": "npm run prepare && storybook build",
|
|
28
|
+
"lint": "eslint --cache --cache-strategy content --ext .js,.jsx --fix src",
|
|
29
|
+
"lint:report": "eslint --cache --cache-strategy content --ext .js,.jsx --output-file=eslint_report.json --format=json src",
|
|
31
30
|
"format": "prettier -l --write src",
|
|
32
|
-
"test": "jest"
|
|
33
|
-
"chromatic": "chromatic --exit-zero-on-changes --build-script-name build:storybook"
|
|
31
|
+
"test": "jest"
|
|
34
32
|
},
|
|
35
33
|
"dependencies": {
|
|
36
|
-
"@headlessui/react": "
|
|
37
|
-
"@tailwindcss/forms": "^0.5.
|
|
34
|
+
"@headlessui/react": "1.4.0",
|
|
35
|
+
"@tailwindcss/forms": "^0.5.11",
|
|
38
36
|
"@tailwindcss/line-clamp": "^0.3.1",
|
|
39
37
|
"@tippyjs/react": "^4.2.6",
|
|
40
|
-
"ahooks": "^3.9.
|
|
41
|
-
"axios": "^1.
|
|
42
|
-
"clsx": "^
|
|
43
|
-
"dayjs": "^1.11.
|
|
38
|
+
"ahooks": "^3.9.7",
|
|
39
|
+
"axios": "^1.19.0",
|
|
40
|
+
"clsx": "^2.1.1",
|
|
41
|
+
"dayjs": "^1.11.21",
|
|
44
42
|
"downshift": "^6.1.5",
|
|
45
43
|
"get-user-locale": "^1.4.0",
|
|
46
|
-
"
|
|
47
|
-
"nouislider-react": "^3.4.
|
|
44
|
+
"libphonenumber-js": "^1.13.11",
|
|
45
|
+
"nouislider-react": "^3.4.2",
|
|
48
46
|
"prop-types": "^15.7.2",
|
|
49
47
|
"react-day-picker": "^7.4.10",
|
|
50
|
-
"react-hot-toast": "^2.
|
|
48
|
+
"react-hot-toast": "^2.6.0",
|
|
51
49
|
"react-hotkeys-hook": "^3.4.0",
|
|
52
|
-
"react-
|
|
53
|
-
"react-
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"tippy.js": "^6.3.1",
|
|
57
|
-
"use-debounce": "^10.0.6"
|
|
50
|
+
"react-select": "5.7.0",
|
|
51
|
+
"react-textarea-autosize": "^8.5.9",
|
|
52
|
+
"tippy.js": "^6.3.7",
|
|
53
|
+
"use-debounce": "^10.1.1"
|
|
58
54
|
},
|
|
59
55
|
"devDependencies": {
|
|
60
56
|
"@babel/core": "^7.14.8",
|
|
61
57
|
"@babel/preset-env": "^7.15.6",
|
|
62
|
-
"@
|
|
63
|
-
"@storybook/addon-
|
|
64
|
-
"@storybook/addon-
|
|
65
|
-
"@storybook/addon-
|
|
66
|
-
"@storybook/
|
|
67
|
-
"@storybook/
|
|
68
|
-
"@storybook/
|
|
69
|
-
"@
|
|
58
|
+
"@babel/preset-react": "^7.29.7",
|
|
59
|
+
"@storybook/addon-actions": "^7.6.24",
|
|
60
|
+
"@storybook/addon-designs": "^7.0.9",
|
|
61
|
+
"@storybook/addon-essentials": "^7.6.24",
|
|
62
|
+
"@storybook/addon-links": "^7.6.24",
|
|
63
|
+
"@storybook/blocks": "^7.6.24",
|
|
64
|
+
"@storybook/manager-api": "^7.6.24",
|
|
65
|
+
"@storybook/react": "^7.6.24",
|
|
66
|
+
"@storybook/react-vite": "^7.6.24",
|
|
67
|
+
"@storybook/theming": "^7.6.24",
|
|
70
68
|
"autoprefixer": "^10.4.5",
|
|
71
|
-
"babel-jest": "^
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
69
|
+
"babel-jest": "^29.7.0",
|
|
70
|
+
"eslint": "^8.57.0",
|
|
71
|
+
"eslint-config-prettier": "^8.5.0",
|
|
72
|
+
"eslint-config-xo": "^0.41.0",
|
|
73
|
+
"eslint-config-xo-react": "^0.27.0",
|
|
74
|
+
"eslint-formatter-pretty": "^4.1.0",
|
|
75
|
+
"eslint-plugin-eslint-comments": "^3.2.0",
|
|
76
|
+
"eslint-plugin-import": "^2.26.0",
|
|
77
|
+
"eslint-plugin-n": "^15.2.2",
|
|
78
|
+
"eslint-plugin-no-use-extend-native": "^0.5.0",
|
|
79
|
+
"eslint-plugin-prettier": "^4.0.0",
|
|
80
|
+
"eslint-plugin-react": "^7.30.0",
|
|
81
|
+
"eslint-plugin-react-hooks": "^4.5.0",
|
|
82
|
+
"eslint-plugin-unicorn": "^42.0.0",
|
|
83
|
+
"jest": "^29.7.0",
|
|
84
|
+
"lodash": "^4.18.1",
|
|
76
85
|
"postcss": "^8.4.5",
|
|
77
86
|
"prettier": "^2.7.1",
|
|
78
87
|
"prettier-plugin-tailwindcss": "^0.1.13",
|
|
79
88
|
"react": "^17.0.2",
|
|
80
89
|
"react-dom": "^17.0.2",
|
|
81
|
-
"
|
|
82
|
-
"
|
|
83
|
-
"
|
|
84
|
-
"
|
|
90
|
+
"react-json-view": "^1.21.3",
|
|
91
|
+
"storybook": "^7.6.24",
|
|
92
|
+
"tailwindcss": "^3.4.19",
|
|
93
|
+
"typescript": "^5.9.3",
|
|
94
|
+
"vite": "^4.5.14",
|
|
95
|
+
"zx": "^8.8.5"
|
|
96
|
+
},
|
|
97
|
+
"overrides": {
|
|
98
|
+
"body-parser": "^1.20.3",
|
|
99
|
+
"braces": "^3.0.3",
|
|
100
|
+
"micromatch": "^4.0.8",
|
|
101
|
+
"node-releases": "2.0.44",
|
|
102
|
+
"flow-parser": "0.318.0",
|
|
103
|
+
"postcss-load-config": "^4.0.2"
|
|
85
104
|
},
|
|
86
105
|
"peerDependencies": {
|
|
87
106
|
"autoprefixer": "^10.3.1",
|