@xola/ui-kit 2.4.0 → 2.4.1-x2-14336.1
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 +7645 -11502
- package/build/ui-kit.umd.js +2 -32
- package/index.d.ts +122 -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 {
|
|
@@ -116,6 +236,8 @@ export {
|
|
|
116
236
|
EmailSendIcon,
|
|
117
237
|
EmptyChecklistIcon,
|
|
118
238
|
EquipmentIcon,
|
|
239
|
+
EquipmentCheckoutIcon,
|
|
240
|
+
EquipmentReturnIcon,
|
|
119
241
|
ExportIcon,
|
|
120
242
|
EyeClosedIcon,
|
|
121
243
|
EyeIcon,
|
|
@@ -232,7 +354,6 @@ export {
|
|
|
232
354
|
ShareIcon,
|
|
233
355
|
ShirtIcon,
|
|
234
356
|
ShoppingBagIcon,
|
|
235
|
-
Sidebar,
|
|
236
357
|
Skeleton,
|
|
237
358
|
SlideDown,
|
|
238
359
|
Spinner,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xola/ui-kit",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.1-x2-14336.1",
|
|
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.1",
|
|
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",
|