@js-empire/emperor-ui 1.2.2 → 1.2.4
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/.cursor/rules/code-conventions.mdc +50 -0
- package/README.md +0 -15
- package/dist/emperor-ui.js +119 -71
- package/dist/emperor-ui.umd.cjs +27 -13
- package/dist/globals.css +1 -1
- package/dist/index-BXtdEByK.js +5 -0
- package/dist/index-CDB93OLO.js +55965 -0
- package/dist/index-CYORMghp.js +290 -0
- package/dist/index.d.ts +338 -36
- package/dist/src-UW24ZMRV-C1Pn8-w8.js +5 -0
- package/package.json +32 -2
- package/src/animations/blink.ts +26 -0
- package/src/animations/floating.ts +12 -0
- package/src/animations/index.ts +2 -0
- package/src/components/atoms/brand/brand.tsx +1 -1
- package/src/components/atoms/color-picker/color-picker.tsx +13 -0
- package/src/components/atoms/color-picker/free-color-picker.tsx +60 -0
- package/src/components/atoms/color-picker/index.ts +3 -0
- package/src/components/atoms/color-picker/preset-color-picker.tsx +64 -0
- package/src/components/atoms/color-picker/stories/color-picker.stories.tsx +49 -0
- package/src/components/atoms/color-picker/styles/color-picker.css +23 -0
- package/src/components/atoms/copy-button/copy-button.tsx +73 -0
- package/src/components/atoms/copy-button/index.ts +1 -0
- package/src/components/atoms/copy-button/stories/copy-button.stories.tsx +21 -0
- package/src/components/atoms/field/field.stories.tsx +27 -0
- package/src/components/atoms/field/field.tsx +11 -0
- package/src/components/atoms/field/index.ts +1 -0
- package/src/components/atoms/field/styles/classes.ts +9 -0
- package/src/components/atoms/field/styles/index.ts +1 -0
- package/src/components/atoms/filter/filter.tsx +92 -0
- package/src/components/atoms/filter/index.ts +3 -0
- package/src/components/atoms/filter/stories/filter.stories.tsx +97 -0
- package/src/components/atoms/filter/styles/classes.ts +20 -0
- package/src/components/atoms/filter/styles/index.ts +1 -0
- package/src/components/atoms/filter/units/autocomplete-filter.tsx +39 -0
- package/src/components/atoms/filter/units/checkbox-filter.tsx +32 -0
- package/src/components/atoms/filter/units/checkbox-group-filter.tsx +37 -0
- package/src/components/atoms/filter/units/date-filter.tsx +50 -0
- package/src/components/atoms/filter/units/index.ts +9 -0
- package/src/components/atoms/filter/units/numeric-filter.tsx +36 -0
- package/src/components/atoms/filter/units/range-filter.tsx +36 -0
- package/src/components/atoms/filter/units/search-filter.tsx +52 -0
- package/src/components/atoms/filter/units/select-filter.tsx +49 -0
- package/src/components/atoms/filter/units/switch-filter.tsx +33 -0
- package/src/components/atoms/index.ts +5 -0
- package/src/components/atoms/theme-switch/index.ts +1 -0
- package/src/components/atoms/theme-switch/styles/classes.ts +16 -0
- package/src/components/atoms/theme-switch/styles/index.ts +1 -0
- package/src/components/atoms/theme-switch/theme-switch.stories.tsx +26 -0
- package/src/components/atoms/theme-switch/theme-switch.tsx +54 -0
- package/src/components/atoms/uploader/avatar-label.tsx +8 -1
- package/src/components/atoms/uploader/stories/uploader.stories.tsx +3 -3
- package/src/components/atoms/uploader/upload-file-error-box.tsx +1 -1
- package/src/components/atoms/uploader/upload-file-input.tsx +1 -1
- package/src/components/atoms/uploader/upload-file-label.tsx +8 -1
- package/src/components/atoms/uploader/upload-file-listing.tsx +46 -37
- package/src/components/atoms/uploader/view-image-modal.tsx +2 -1
- package/src/components/molecules/index.ts +0 -1
- package/src/components/molecules/item-card/index.ts +6 -0
- package/src/components/molecules/item-card/item-actions-dropdown.tsx +57 -0
- package/src/components/molecules/item-card/item-banner.tsx +22 -0
- package/src/components/molecules/item-card/item-card-body.tsx +68 -0
- package/src/components/molecules/item-card/item-card-footer.tsx +55 -0
- package/src/components/molecules/item-card/item-card-header.tsx +61 -0
- package/src/components/molecules/item-card/item-card.tsx +83 -3
- package/src/components/molecules/item-card/loading-item.tsx +88 -0
- package/src/components/molecules/item-card/stories/item-card.stories.tsx +182 -0
- package/src/components/molecules/item-card/styles/classes.ts +138 -0
- package/src/components/molecules/item-card/styles/index.ts +1 -0
- package/src/components/molecules/nav-bar/sub-items-box.tsx +2 -1
- package/src/components/molecules/scaffold/index.ts +1 -0
- package/src/components/molecules/scaffold/scaffold.tsx +4 -17
- package/src/components/molecules/scaffold/styles/index.ts +1 -0
- package/src/components/molecules/scaffold/styles/scaffold-classes.ts +10 -0
- package/src/components/molecules/side-bar/compact-side-bar.tsx +3 -1
- package/src/components/molecules/side-bar/side-bar-drawer.tsx +6 -17
- package/src/components/molecules/side-bar/side-bar.stories.tsx +1 -1
- package/src/components/organisms/filters/filters.stories.tsx +32 -0
- package/src/components/organisms/filters/filters.tsx +36 -0
- package/src/components/organisms/filters/index.ts +1 -0
- package/src/components/organisms/filters/styles/classes.ts +9 -0
- package/src/components/organisms/filters/styles/index.ts +1 -0
- package/src/components/organisms/footer/copy-rights-box.tsx +1 -1
- package/src/components/organisms/footer/footer.tsx +1 -1
- package/src/components/organisms/footer/policies-box.tsx +2 -1
- package/src/components/organisms/footer/quick-links-box.tsx +2 -1
- package/src/components/organisms/footer/social-links-box.tsx +2 -1
- package/src/components/organisms/footer/stories/footer.stories.tsx +1 -1
- package/src/components/organisms/header/header.tsx +1 -8
- package/src/components/organisms/index.ts +1 -0
- package/src/components/organisms/listings/empty-listings.tsx +80 -0
- package/src/components/organisms/listings/index.ts +2 -0
- package/src/components/organisms/listings/listings.tsx +90 -9
- package/src/components/organisms/listings/stories/grid-listings.stories.tsx +153 -0
- package/src/components/organisms/listings/stories/list-listings.stories.tsx +171 -0
- package/src/components/organisms/listings/styles/classes.ts +41 -3
- package/src/constants/animations.ts +14 -0
- package/src/constants/card.tsx +26 -0
- package/src/constants/defaults.ts +1 -16
- package/src/constants/index.ts +2 -0
- package/src/hooks/index.ts +3 -0
- package/src/hooks/use-filters.ts +20 -0
- package/src/hooks/use-search-params-handler.tsx +186 -0
- package/src/hooks/use-uploader.tsx +1 -1
- package/src/hooks/use-window-size.tsx +53 -0
- package/src/i18n/locales/atoms/ar.ts +3 -0
- package/src/i18n/locales/atoms/en.ts +3 -0
- package/src/i18n/locales/organisms/ar.ts +7 -1
- package/src/i18n/locales/organisms/en.ts +7 -1
- package/src/mocks/constants.ts +103 -0
- package/src/mocks/index.ts +2 -0
- package/src/mocks/listings.tsx +154 -0
- package/src/mocks/types.ts +64 -0
- package/src/providers/config-provider.tsx +0 -8
- package/src/providers/emperor-ui-provider.tsx +16 -5
- package/src/providers/index.ts +1 -0
- package/src/providers/theme-provider.tsx +16 -0
- package/src/providers/uploader-provider.tsx +1 -1
- package/src/styles/hero.ts +1 -1
- package/src/styles/index.css +23 -0
- package/src/types/components/atoms/color-picker/color-picker.ts +12 -0
- package/src/types/components/atoms/color-picker/index.ts +1 -0
- package/src/types/components/atoms/field/field.ts +9 -0
- package/src/types/components/atoms/field/index.ts +1 -0
- package/src/types/components/atoms/filter/filter.ts +43 -0
- package/src/types/components/atoms/filter/index.ts +2 -0
- package/src/types/components/atoms/filter/select-filter.ts +8 -0
- package/src/types/components/atoms/index.ts +3 -0
- package/src/types/components/atoms/uploader.ts +2 -1
- package/src/types/components/index.ts +1 -0
- package/src/types/components/molecules/index.ts +1 -1
- package/src/types/components/molecules/item-card/item-card.ts +50 -0
- package/src/types/components/molecules/listings/listings.ts +21 -5
- package/src/types/components/molecules/side-bar/side-bar.ts +1 -1
- package/src/types/components/molecules/theme-switch/index.ts +1 -0
- package/src/types/components/molecules/theme-switch/theme-switch.ts +9 -0
- package/src/types/components/organisms/filters/filters.ts +11 -0
- package/src/types/components/organisms/filters/index.ts +1 -0
- package/src/types/components/organisms/index.ts +1 -0
- package/src/types/context/config.ts +3 -4
- package/src/types/context/index.ts +0 -1
- package/src/types/context/localization.ts +1 -0
- package/src/types/shared/components.ts +3 -0
- package/src/utils/uploader.ts +1 -1
- package/dist/features-animation-uyo1KMg-.js +0 -1938
- package/dist/index-B3d8-vnJ.js +0 -1630
- package/dist/index-DOwkJus4.js +0 -26528
- package/dist/index-DrkA25TM.js +0 -5
- package/dist/src-UW24ZMRV-D6kiVea5.js +0 -5
- package/src/components/molecules/filter/filter.tsx +0 -6
- package/src/components/molecules/filter/index.ts +0 -1
- package/src/components/organisms/listings/stories/listings.stories.tsx +0 -30
- package/src/main.tsx +0 -3
- package/src/mocks/listings.ts +0 -200
- package/src/types/components/molecules/filter/filter.ts +0 -9
- package/src/types/components/molecules/filter/index.ts +0 -1
- package/src/types/context/theme.ts +0 -17
package/dist/index.d.ts
CHANGED
|
@@ -1,23 +1,36 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ButtonProps
|
|
1
|
+
import { AutocompleteProps } from '@heroui/autocomplete';
|
|
2
|
+
import { ButtonProps } from '@heroui/button';
|
|
3
|
+
import { CheckboxGroupProps } from '@heroui/checkbox';
|
|
4
|
+
import { CheckboxProps } from '@heroui/checkbox';
|
|
5
|
+
import { ChipProps } from '@heroui/chip';
|
|
3
6
|
import { ClassAttributes } from 'react';
|
|
4
7
|
import { ClassProp } from 'class-variance-authority/types';
|
|
5
8
|
import { ClassValue } from 'clsx';
|
|
6
9
|
import { ComponentProps } from 'react';
|
|
7
10
|
import { Context } from 'react';
|
|
11
|
+
import { CSSProperties } from 'react';
|
|
12
|
+
import { DatePickerProps } from '@heroui/date-picker';
|
|
8
13
|
import { Dispatch } from 'react';
|
|
14
|
+
import { DropdownItemProps } from '@heroui/dropdown';
|
|
9
15
|
import { ElementType } from 'react';
|
|
10
16
|
import { ForwardRefExoticComponent } from 'react';
|
|
11
|
-
import { HeroUIProviderProps } from '@heroui/react';
|
|
12
17
|
import { HTMLAttributes } from 'react';
|
|
18
|
+
import { InputProps } from '@heroui/input';
|
|
13
19
|
import { JSX } from 'react/jsx-runtime';
|
|
14
20
|
import { LiHTMLAttributes } from 'react';
|
|
15
|
-
import { ModalProps } from '@heroui/
|
|
21
|
+
import { ModalProps } from '@heroui/modal';
|
|
22
|
+
import { MotionProps } from 'framer-motion';
|
|
23
|
+
import { RadioProps } from '@heroui/radio';
|
|
16
24
|
import { ReactNode } from 'react';
|
|
17
25
|
import { ReactPortal } from 'react';
|
|
18
26
|
import { RefAttributes } from 'react';
|
|
27
|
+
import { SelectProps } from '@heroui/select';
|
|
19
28
|
import { SetStateAction } from 'react';
|
|
29
|
+
import { SliderProps } from '@heroui/slider';
|
|
30
|
+
import { SwitchProps } from '@heroui/switch';
|
|
31
|
+
import { ToastProps } from '@heroui/toast';
|
|
20
32
|
import { VariantProps } from 'class-variance-authority';
|
|
33
|
+
import { Variants } from 'framer-motion';
|
|
21
34
|
|
|
22
35
|
export declare type Address = {
|
|
23
36
|
country?: string;
|
|
@@ -39,6 +52,9 @@ declare const ar: {
|
|
|
39
52
|
common: {};
|
|
40
53
|
toasts: {};
|
|
41
54
|
atoms: {
|
|
55
|
+
colorPicker: {
|
|
56
|
+
invalidColorFormat: string;
|
|
57
|
+
};
|
|
42
58
|
uploader: {
|
|
43
59
|
dropHere: string;
|
|
44
60
|
selectFile: string;
|
|
@@ -52,11 +68,18 @@ declare const ar: {
|
|
|
52
68
|
};
|
|
53
69
|
};
|
|
54
70
|
molecules: {};
|
|
55
|
-
organisms: {
|
|
71
|
+
organisms: {
|
|
72
|
+
listings: {
|
|
73
|
+
emptyTitle: string;
|
|
74
|
+
emptyDescription: string;
|
|
75
|
+
};
|
|
76
|
+
};
|
|
56
77
|
templates: {};
|
|
57
78
|
};
|
|
58
79
|
|
|
59
|
-
export declare function
|
|
80
|
+
export declare function AutocompleteFilter({ classNames, autocompleteProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "autocompleteProps" | "paramKey">): JSX.Element;
|
|
81
|
+
|
|
82
|
+
export declare function AvatarLabel(): JSX.Element | null;
|
|
60
83
|
|
|
61
84
|
export declare const Brand: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
62
85
|
variant?: null | undefined;
|
|
@@ -84,19 +107,19 @@ export declare type BrandProps = SharedComponentProps & {
|
|
|
84
107
|
};
|
|
85
108
|
};
|
|
86
109
|
|
|
110
|
+
export declare function CheckboxFilter({ classNames, checkboxProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "checkboxProps" | "paramKey">): JSX.Element;
|
|
111
|
+
|
|
112
|
+
export declare function CheckboxGroupFilter({ classNames, checkboxGroupProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "checkboxGroupProps" | "paramKey">): JSX.Element;
|
|
113
|
+
|
|
87
114
|
export declare function cn(...classes: ClassValue[]): string;
|
|
88
115
|
|
|
89
|
-
export declare
|
|
116
|
+
export declare function ColorPicker({ ...props }: ColorPickerProps): JSX.Element;
|
|
90
117
|
|
|
91
|
-
export declare type
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
warning: string;
|
|
97
|
-
info: string;
|
|
98
|
-
background: string;
|
|
99
|
-
foreground: string;
|
|
118
|
+
export declare type ColorPickerInputType = "free" | "preset";
|
|
119
|
+
|
|
120
|
+
export declare type ColorPickerProps = Omit<InputProps & SelectProps, "onChange" | "children"> & {
|
|
121
|
+
inputType: ColorPickerInputType;
|
|
122
|
+
presets?: string[];
|
|
100
123
|
};
|
|
101
124
|
|
|
102
125
|
export declare const Column: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & VariantProps<(props?: ({} & ClassProp) | undefined) => string> & SharedComponentProps, "ref"> & RefAttributes<HTMLElement>>;
|
|
@@ -136,6 +159,10 @@ export declare const Container: ForwardRefExoticComponent<Omit<ClassAttributes<H
|
|
|
136
159
|
|
|
137
160
|
export declare type ContainerProps = SharedComponentProps & {};
|
|
138
161
|
|
|
162
|
+
export declare function CopyButton({ value }: {
|
|
163
|
+
value: string;
|
|
164
|
+
}): JSX.Element;
|
|
165
|
+
|
|
139
166
|
export declare type CopyRights = {
|
|
140
167
|
year: number;
|
|
141
168
|
text: string;
|
|
@@ -145,15 +172,14 @@ export declare const copyRights: CopyRights;
|
|
|
145
172
|
|
|
146
173
|
export declare function CopyRightsBox({ copyRights, classNames }: FooterProps): JSX.Element;
|
|
147
174
|
|
|
148
|
-
export declare
|
|
175
|
+
export declare function DateFilter({ classNames, dateProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "dateProps" | "paramKey">): JSX.Element;
|
|
149
176
|
|
|
150
177
|
export declare const defaultEmperorUIConfig: EmperorUIConfig;
|
|
151
178
|
|
|
152
179
|
export declare type EmperorUIConfig = {
|
|
153
|
-
theme?: Partial<EmperorUITheme>;
|
|
154
180
|
layout?: Partial<EmperorUILayout>;
|
|
155
181
|
interLocalization?: Partial<EmperorUIInterLocalization>;
|
|
156
|
-
toast?:
|
|
182
|
+
toast?: ToastProps;
|
|
157
183
|
};
|
|
158
184
|
|
|
159
185
|
export declare const EmperorUIContext: Context<ConfigContextState | undefined>;
|
|
@@ -176,6 +202,7 @@ export declare type EmperorUILayout = {
|
|
|
176
202
|
export declare type EmperorUILocales = Record<EmperorUILang, Partial<{
|
|
177
203
|
atoms?: {
|
|
178
204
|
uploader?: Partial<Locale["atoms"]["uploader"]>;
|
|
205
|
+
colorPicker?: Partial<Locale["atoms"]["colorPicker"]>;
|
|
179
206
|
};
|
|
180
207
|
}>>;
|
|
181
208
|
|
|
@@ -183,15 +210,25 @@ export declare function EmperorUIProvider({ children, ...props }: EmperorUIProvi
|
|
|
183
210
|
|
|
184
211
|
declare type EmperorUIProviderProps = ConfigProviderProps & {};
|
|
185
212
|
|
|
186
|
-
export declare
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
213
|
+
export declare function EmptyListings({ className, classNames, }: {
|
|
214
|
+
className?: string;
|
|
215
|
+
classNames?: {
|
|
216
|
+
wrapper?: string;
|
|
217
|
+
iconWrapper?: string;
|
|
218
|
+
title?: string;
|
|
219
|
+
description?: string;
|
|
220
|
+
};
|
|
221
|
+
}): JSX.Element;
|
|
222
|
+
|
|
223
|
+
export declare const emptyListingsClasses: (props?: ({} & ClassProp) | undefined) => string;
|
|
190
224
|
|
|
191
225
|
declare const en: {
|
|
192
226
|
common: {};
|
|
193
227
|
toasts: {};
|
|
194
228
|
atoms: {
|
|
229
|
+
colorPicker: {
|
|
230
|
+
invalidColorFormat: string;
|
|
231
|
+
};
|
|
195
232
|
uploader: {
|
|
196
233
|
dropHere: string;
|
|
197
234
|
selectFile: string;
|
|
@@ -205,7 +242,12 @@ declare const en: {
|
|
|
205
242
|
};
|
|
206
243
|
};
|
|
207
244
|
molecules: {};
|
|
208
|
-
organisms: {
|
|
245
|
+
organisms: {
|
|
246
|
+
listings: {
|
|
247
|
+
emptyTitle: string;
|
|
248
|
+
emptyDescription: string;
|
|
249
|
+
};
|
|
250
|
+
};
|
|
209
251
|
templates: {};
|
|
210
252
|
};
|
|
211
253
|
|
|
@@ -213,6 +255,16 @@ export declare const FAKE_PARAGRAPH = "Lorem ipsum dolor sit amet, consectetuer
|
|
|
213
255
|
|
|
214
256
|
export declare const FAKE_SENTENCE = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.";
|
|
215
257
|
|
|
258
|
+
export declare function Field({ className, classNames, ...props }: FieldProps): JSX.Element;
|
|
259
|
+
|
|
260
|
+
export declare type FieldClassnames = {
|
|
261
|
+
base?: string;
|
|
262
|
+
};
|
|
263
|
+
|
|
264
|
+
export declare type FieldProps = SharedComponentProps & {
|
|
265
|
+
classNames?: FieldClassnames;
|
|
266
|
+
};
|
|
267
|
+
|
|
216
268
|
export declare type FileObject = {
|
|
217
269
|
view?: string;
|
|
218
270
|
type?: FileType;
|
|
@@ -226,16 +278,46 @@ export declare const fileTypesMapping: {
|
|
|
226
278
|
[key: string]: string[];
|
|
227
279
|
};
|
|
228
280
|
|
|
229
|
-
export declare function Filter({ className }: FilterProps): JSX.Element;
|
|
281
|
+
export declare function Filter({ className, type, searchProps, selectProps, autocompleteProps, dateProps, numericProps, checkboxProps, checkboxGroupProps, radioProps, switchProps, rangeProps, paramKey, options, ...props }: FilterProps): JSX.Element;
|
|
282
|
+
|
|
283
|
+
export declare const filterClasses: (props?: ({
|
|
284
|
+
type?: "search" | "select" | "switch" | "checkbox" | "radio" | "date" | "autocomplete" | "numeric" | "checkboxGroup" | "range" | null | undefined;
|
|
285
|
+
} & ClassProp) | undefined) => string;
|
|
230
286
|
|
|
231
287
|
export declare type FilterClassnames = {
|
|
232
288
|
base?: string;
|
|
289
|
+
field?: string;
|
|
233
290
|
};
|
|
234
291
|
|
|
235
|
-
export declare type FilterProps = SharedComponentProps & {
|
|
292
|
+
export declare type FilterProps = SharedComponentProps & SelectFilterProps & {
|
|
236
293
|
classNames?: FilterClassnames;
|
|
294
|
+
type: FilterType;
|
|
295
|
+
paramKey: string;
|
|
296
|
+
searchProps?: InputProps;
|
|
297
|
+
selectProps?: Omit<SelectProps, "children">;
|
|
298
|
+
autocompleteProps?: AutocompleteProps;
|
|
299
|
+
dateProps?: DatePickerProps;
|
|
300
|
+
numericProps?: InputProps;
|
|
301
|
+
checkboxProps?: CheckboxProps;
|
|
302
|
+
checkboxGroupProps?: CheckboxGroupProps;
|
|
303
|
+
radioProps?: RadioProps;
|
|
304
|
+
switchProps?: SwitchProps;
|
|
305
|
+
rangeProps?: SliderProps;
|
|
306
|
+
};
|
|
307
|
+
|
|
308
|
+
export declare function Filters({ className, classNames, children, ...props }: FiltersProps): JSX.Element;
|
|
309
|
+
|
|
310
|
+
export declare type FiltersClassnames = {
|
|
311
|
+
base?: string;
|
|
312
|
+
};
|
|
313
|
+
|
|
314
|
+
export declare type FiltersProps = Omit<SharedComponentProps, "children"> & {
|
|
315
|
+
classNames?: FiltersClassnames;
|
|
316
|
+
children: ReactNode;
|
|
237
317
|
};
|
|
238
318
|
|
|
319
|
+
export declare type FilterType = "search" | "select" | "autocomplete" | "date" | "numeric" | "checkbox" | "checkboxGroup" | "switch" | "range";
|
|
320
|
+
|
|
239
321
|
export declare const Footer: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
|
|
240
322
|
variant?: "default" | null | undefined;
|
|
241
323
|
} & ClassProp) | undefined) => string> & SharedComponentProps & {
|
|
@@ -274,12 +356,24 @@ export declare type FooterProps = SharedComponentProps & {
|
|
|
274
356
|
contacts?: Contacts;
|
|
275
357
|
};
|
|
276
358
|
|
|
359
|
+
export declare function FreeColorPicker({ className, classNames, value, onValueChange, inputType, ...props }: ColorPickerProps): JSX.Element;
|
|
360
|
+
|
|
277
361
|
export declare const getAllowedTypes: (fileTypes: FileType[]) => string[];
|
|
278
362
|
|
|
363
|
+
export declare const getCardMotion: ({}: {
|
|
364
|
+
hoverEffect: ItemCardHoverEffect;
|
|
365
|
+
}) => MotionProps;
|
|
366
|
+
|
|
367
|
+
export declare const getListing: () => Promise<{
|
|
368
|
+
item?: MockItemType | null | undefined;
|
|
369
|
+
}>;
|
|
370
|
+
|
|
279
371
|
export declare const getListings: ({ page, pageSize, }: {
|
|
280
372
|
page?: number;
|
|
281
373
|
pageSize?: number;
|
|
282
|
-
}) =>
|
|
374
|
+
}) => Promise<{
|
|
375
|
+
items: MockItemType[];
|
|
376
|
+
}>;
|
|
283
377
|
|
|
284
378
|
export declare const getStorybookDecorators: ({ config, }: {
|
|
285
379
|
config?: EmperorUIConfig;
|
|
@@ -343,14 +437,59 @@ export declare const isMaxFileSizeExceeded: ({ fileSize, maxFileSize, }: {
|
|
|
343
437
|
maxFileSize: number;
|
|
344
438
|
}) => boolean;
|
|
345
439
|
|
|
346
|
-
export declare
|
|
440
|
+
export declare const ITEM_CARD_ACTIONS: ItemCardAction[];
|
|
441
|
+
|
|
442
|
+
export declare function ItemActionsDropdown({ actions, classNames, onActionClick, }: Pick<ItemCardProps, "actions" | "classNames" | "onActionClick">): JSX.Element | null;
|
|
443
|
+
|
|
444
|
+
export declare function ItemBanner({ item, orientation, classNames, }: Pick<ItemCardProps, "item" | "orientation" | "classNames">): JSX.Element | null;
|
|
445
|
+
|
|
446
|
+
export declare function ItemCard({ variants, isLoading, className, classNames, item, actions, hoverEffect, onActionClick, orientation: defaultOrientation, }: ItemCardProps): JSX.Element;
|
|
447
|
+
|
|
448
|
+
export declare type ItemCardAction = DropdownItemProps & {
|
|
449
|
+
key: string;
|
|
450
|
+
label: string;
|
|
451
|
+
};
|
|
452
|
+
|
|
453
|
+
export declare function ItemCardBody({ item, orientation, classNames, actions, onActionClick, }: Pick<ItemCardProps, "item" | "orientation" | "classNames" | "actions" | "onActionClick">): JSX.Element;
|
|
347
454
|
|
|
348
455
|
export declare type ItemCardClassnames = {
|
|
349
456
|
base?: string;
|
|
457
|
+
image?: string;
|
|
458
|
+
header?: string;
|
|
459
|
+
footer?: string;
|
|
460
|
+
imageWrapper?: string;
|
|
461
|
+
mainWrapper?: string;
|
|
462
|
+
banner?: string;
|
|
463
|
+
dropdown?: string;
|
|
464
|
+
body?: string;
|
|
465
|
+
title?: string;
|
|
466
|
+
price?: string;
|
|
467
|
+
description?: string;
|
|
468
|
+
chips?: string;
|
|
469
|
+
chip?: string;
|
|
350
470
|
};
|
|
351
471
|
|
|
472
|
+
export declare function ItemCardFooter({ item, orientation, classNames, }: Pick<ItemCardProps, "item" | "orientation" | "classNames">): JSX.Element;
|
|
473
|
+
|
|
474
|
+
export declare function ItemCardHeader({ item, orientation, classNames, actions, onActionClick, }: Pick<ItemCardProps, "item" | "orientation" | "classNames" | "actions" | "onActionClick">): JSX.Element;
|
|
475
|
+
|
|
476
|
+
export declare type ItemCardHoverEffect = "none" | "zoom" | "rotate";
|
|
477
|
+
|
|
478
|
+
export declare type ItemCardOrientation = "horizontal" | "vertical";
|
|
479
|
+
|
|
352
480
|
export declare type ItemCardProps = SharedComponentProps & {
|
|
481
|
+
variants?: Variants;
|
|
482
|
+
isLoading?: boolean;
|
|
483
|
+
hoverEffect?: ItemCardHoverEffect;
|
|
353
484
|
classNames?: ItemCardClassnames;
|
|
485
|
+
item: ItemProps;
|
|
486
|
+
actions?: ItemCardAction[];
|
|
487
|
+
onActionClick?: (key: string) => void;
|
|
488
|
+
orientation?: ItemCardOrientation;
|
|
489
|
+
};
|
|
490
|
+
|
|
491
|
+
export declare type ItemChipProps = ChipProps & {
|
|
492
|
+
label: string;
|
|
354
493
|
};
|
|
355
494
|
|
|
356
495
|
export declare function ItemDetails({ className }: ItemDetailsProps): JSX.Element;
|
|
@@ -363,6 +502,19 @@ export declare type ItemDetailsProps = SharedComponentProps & {
|
|
|
363
502
|
classNames?: ItemDetailsClassnames;
|
|
364
503
|
};
|
|
365
504
|
|
|
505
|
+
export declare type ItemProps = {
|
|
506
|
+
key: string;
|
|
507
|
+
title?: ReactNode;
|
|
508
|
+
description?: ReactNode;
|
|
509
|
+
image?: {
|
|
510
|
+
src: string;
|
|
511
|
+
alt: string;
|
|
512
|
+
};
|
|
513
|
+
chips?: ItemChipProps[];
|
|
514
|
+
banner?: ReactNode;
|
|
515
|
+
price?: ReactNode;
|
|
516
|
+
};
|
|
517
|
+
|
|
366
518
|
/**
|
|
367
519
|
* This component is not for general use nor it is reusable, it is intended to be used as a demo page.
|
|
368
520
|
*/
|
|
@@ -382,19 +534,47 @@ export declare type LandingPageProps = SharedComponentProps & {
|
|
|
382
534
|
variant?: "default";
|
|
383
535
|
};
|
|
384
536
|
|
|
385
|
-
export declare function Listings
|
|
537
|
+
export declare function Listings({ items, isLoading, className, classNames, layout, actions, onActionClick, pagination, }: ListingsProps): JSX.Element;
|
|
538
|
+
|
|
539
|
+
export declare const listingsClasses: (props?: ({
|
|
540
|
+
layout?: "grid" | "list" | "carousel" | null | undefined;
|
|
541
|
+
} & ClassProp) | undefined) => string;
|
|
386
542
|
|
|
387
543
|
export declare type ListingsClassnames = {
|
|
388
544
|
base?: string;
|
|
545
|
+
item?: string;
|
|
546
|
+
pagination?: string;
|
|
389
547
|
};
|
|
390
548
|
|
|
391
|
-
export declare
|
|
549
|
+
export declare const listingsItemClasses: (props?: ({
|
|
550
|
+
layout?: "grid" | "list" | "carousel" | null | undefined;
|
|
551
|
+
} & ClassProp) | undefined) => string;
|
|
552
|
+
|
|
553
|
+
export declare type ListingsLayout = "grid" | "list" | "carousel";
|
|
554
|
+
|
|
555
|
+
export declare const listingsPaginationClasses: (props?: ({
|
|
556
|
+
layout?: "grid" | "list" | "carousel" | null | undefined;
|
|
557
|
+
} & ClassProp) | undefined) => string;
|
|
558
|
+
|
|
559
|
+
export declare type ListingsProps = SharedComponentProps & {
|
|
392
560
|
classNames?: ListingsClassnames;
|
|
393
|
-
|
|
394
|
-
items:
|
|
561
|
+
layout?: ListingsLayout;
|
|
562
|
+
items: ItemCardProps[];
|
|
563
|
+
isLoading?: boolean;
|
|
564
|
+
actions?: ItemCardAction[];
|
|
565
|
+
onActionClick?: (key: string) => void;
|
|
566
|
+
pagination?: {
|
|
567
|
+
page: number;
|
|
568
|
+
setPage: (page: number) => void;
|
|
569
|
+
pageSize: number;
|
|
570
|
+
totalItemsCount: number;
|
|
571
|
+
pagesCount: number;
|
|
572
|
+
};
|
|
395
573
|
};
|
|
396
574
|
|
|
397
|
-
export declare
|
|
575
|
+
export declare const listingsStyles: ({}: {}) => CSSProperties;
|
|
576
|
+
|
|
577
|
+
export declare function LoadingItem({ className, classNames, hoverEffect, orientation, }: Pick<ItemCardProps, "className" | "classNames" | "hoverEffect" | "orientation">): JSX.Element;
|
|
398
578
|
|
|
399
579
|
declare type Locale = typeof ar | typeof en;
|
|
400
580
|
|
|
@@ -410,6 +590,10 @@ export declare const mergeLocales: ({ defaultLocales, configLocales, }: {
|
|
|
410
590
|
configLocales?: Partial<Locale>;
|
|
411
591
|
}) => Locale;
|
|
412
592
|
|
|
593
|
+
export declare const MOCK_BASE_DATE: Date;
|
|
594
|
+
|
|
595
|
+
export declare const MOCK_COLORS: MockColor[];
|
|
596
|
+
|
|
413
597
|
export declare const MOCK_HEADER_ACTIONS: SideBarAction[];
|
|
414
598
|
|
|
415
599
|
export declare const MOCK_HEADER_ITEMS: NavigationItem[];
|
|
@@ -418,13 +602,58 @@ export declare const MOCK_HEADER_ITEMS_WITH_SUB_ITEMS: NavigationItem[];
|
|
|
418
602
|
|
|
419
603
|
export declare const MOCK_HEADER_SUB_ITEMS: NavigationItem[];
|
|
420
604
|
|
|
605
|
+
export declare const MOCK_ITEM_BRANDS: MockItemBrand[];
|
|
606
|
+
|
|
607
|
+
export declare const MOCK_ITEM_CATEGORIES: MockItemCategory[];
|
|
608
|
+
|
|
609
|
+
export declare const MOCK_ITEM_REVIEWS_1: MockReview[];
|
|
610
|
+
|
|
611
|
+
export declare const MOCK_ITEM_REVIEWS_2: MockReview[];
|
|
612
|
+
|
|
613
|
+
export declare const MOCK_ITEM_REVIEWS_3: MockReview[];
|
|
614
|
+
|
|
615
|
+
export declare const MOCK_LISTING_DESCRIPTIONS: string[];
|
|
616
|
+
|
|
617
|
+
export declare const MOCK_LISTING_IMAGES: string[];
|
|
618
|
+
|
|
619
|
+
export declare const MOCK_LISTING_TITLES: string[];
|
|
620
|
+
|
|
421
621
|
export declare const MOCK_LISTINGS: MockItemType[];
|
|
422
622
|
|
|
623
|
+
export declare const MOCK_REVIEW_AUTHORS: string[];
|
|
624
|
+
|
|
625
|
+
export declare const MOCK_REVIEW_COMMENTS: readonly string[];
|
|
626
|
+
|
|
627
|
+
export declare type MockColor = "red" | "blue" | "green" | "yellow" | "purple" | "orange" | "pink" | "brown" | "gray" | "black" | "white";
|
|
628
|
+
|
|
629
|
+
export declare type MockItemBrand = "Apple" | "Dell" | "HP" | "Lenovo" | "Asus" | "Acer" | "MSI" | "Razer" | "Samsung" | "Microsoft";
|
|
630
|
+
|
|
631
|
+
export declare type MockItemCategory = "laptops" | "desktops" | "monitors" | "keyboards" | "mice" | "headsets" | "printers" | "storage" | "components" | "networking";
|
|
632
|
+
|
|
423
633
|
export declare type MockItemType = {
|
|
424
634
|
id: number;
|
|
425
635
|
title: string;
|
|
426
636
|
description: string;
|
|
427
637
|
image: string;
|
|
638
|
+
price: number;
|
|
639
|
+
categories: ItemChipProps[];
|
|
640
|
+
isAvailable: boolean;
|
|
641
|
+
isBestSeller: boolean;
|
|
642
|
+
averageRating: number;
|
|
643
|
+
reviews: MockReview[];
|
|
644
|
+
brand: MockItemBrand;
|
|
645
|
+
color: MockColor;
|
|
646
|
+
createdAt: Date;
|
|
647
|
+
updatedAt: Date;
|
|
648
|
+
};
|
|
649
|
+
|
|
650
|
+
export declare type MockReview = {
|
|
651
|
+
id: number;
|
|
652
|
+
rating: number;
|
|
653
|
+
comment: string;
|
|
654
|
+
author: string;
|
|
655
|
+
createdAt: Date;
|
|
656
|
+
updatedAt: Date;
|
|
428
657
|
};
|
|
429
658
|
|
|
430
659
|
export declare const NavBar: ForwardRefExoticComponent<Omit<ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & VariantProps<(props?: ({
|
|
@@ -513,6 +742,8 @@ export declare type NavigationProviderProps = {
|
|
|
513
742
|
children: ReactNode;
|
|
514
743
|
};
|
|
515
744
|
|
|
745
|
+
export declare function NumericFilter({ classNames, numericProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "numericProps" | "paramKey">): JSX.Element;
|
|
746
|
+
|
|
516
747
|
export declare const ONE_MEGABYTE = 1024;
|
|
517
748
|
|
|
518
749
|
export declare enum Placeholders {
|
|
@@ -535,6 +766,8 @@ export declare enum PreservedKeys {
|
|
|
535
766
|
COMPACT_SIDEBAR_ID = "emperor-compact-sidebar"
|
|
536
767
|
}
|
|
537
768
|
|
|
769
|
+
export declare function PresetColorPicker({ className, classNames, value, onSelectionChange, inputType, presets, ...props }: ColorPickerProps): JSX.Element;
|
|
770
|
+
|
|
538
771
|
export declare type QuickLink = {
|
|
539
772
|
label: string;
|
|
540
773
|
href: string;
|
|
@@ -550,6 +783,8 @@ export declare const quickLinks: QuickLinkCollection[];
|
|
|
550
783
|
|
|
551
784
|
export declare function QuickLinksBox({ quickLinks, classNames }: FooterProps): JSX.Element;
|
|
552
785
|
|
|
786
|
+
export declare function RangeFilter({ classNames, rangeProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "rangeProps" | "paramKey">): JSX.Element;
|
|
787
|
+
|
|
553
788
|
export declare function refineUploadedFiles({ uploadedFiles, locale, allowedTypes, isMulti, setFiles, }: {
|
|
554
789
|
uploadedFiles: (File | undefined)[];
|
|
555
790
|
locale?: Locale;
|
|
@@ -566,6 +801,8 @@ export declare const Scaffold: ForwardRefExoticComponent<SharedComponentProps &
|
|
|
566
801
|
classNames?: ScaffoldClassnames;
|
|
567
802
|
} & RefAttributes<HTMLDivElement>>;
|
|
568
803
|
|
|
804
|
+
export declare const scaffoldClasses: (props?: ({} & ClassProp) | undefined) => string;
|
|
805
|
+
|
|
569
806
|
export declare type ScaffoldClassnames = {
|
|
570
807
|
base?: string;
|
|
571
808
|
};
|
|
@@ -574,12 +811,28 @@ export declare type ScaffoldProps = SharedComponentProps & {
|
|
|
574
811
|
classNames?: ScaffoldClassnames;
|
|
575
812
|
};
|
|
576
813
|
|
|
814
|
+
export declare function SearchFilter({ classNames, searchProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "searchProps" | "paramKey">): JSX.Element;
|
|
815
|
+
|
|
577
816
|
export declare type SegmentedHeaderContentProps = SharedComponentProps & {
|
|
578
817
|
glassEffect?: HeaderGlassEffect;
|
|
579
818
|
};
|
|
580
819
|
|
|
820
|
+
export declare function SelectFilter({ classNames, selectProps, paramKey, options, ...props }: Pick<FilterProps, "classNames" | "selectProps" | "paramKey" | "options">): JSX.Element;
|
|
821
|
+
|
|
822
|
+
export declare type SelectFilterProps = {
|
|
823
|
+
options?: SelectOption[];
|
|
824
|
+
};
|
|
825
|
+
|
|
826
|
+
export declare type SelectOption = {
|
|
827
|
+
key: string;
|
|
828
|
+
label: string;
|
|
829
|
+
};
|
|
830
|
+
|
|
581
831
|
export declare type SharedComponentProps = {
|
|
582
832
|
className?: string;
|
|
833
|
+
classNames?: {
|
|
834
|
+
base?: string;
|
|
835
|
+
};
|
|
583
836
|
children?: ReactNode;
|
|
584
837
|
};
|
|
585
838
|
|
|
@@ -596,7 +849,7 @@ classNames?: SideBarClassnames;
|
|
|
596
849
|
variant?: SideBarVariant;
|
|
597
850
|
items: NavigationItem[];
|
|
598
851
|
actions?: SideBarAction[];
|
|
599
|
-
triggerProps?: Omit<
|
|
852
|
+
triggerProps?: Omit<ButtonProps, "content"> & {
|
|
600
853
|
content?: ReactNode;
|
|
601
854
|
};
|
|
602
855
|
isOpen?: boolean;
|
|
@@ -658,6 +911,24 @@ export declare type SubItemsBoxProps = {
|
|
|
658
911
|
subItemsColumns?: number;
|
|
659
912
|
};
|
|
660
913
|
|
|
914
|
+
export declare function SwitchFilter({ classNames, switchProps, paramKey, ...props }: Pick<FilterProps, "classNames" | "switchProps" | "paramKey">): JSX.Element;
|
|
915
|
+
|
|
916
|
+
export declare function ThemeProvider({ children }: ThemeProviderProps): JSX.Element;
|
|
917
|
+
|
|
918
|
+
export declare type ThemeProviderProps = {
|
|
919
|
+
children: ReactNode;
|
|
920
|
+
};
|
|
921
|
+
|
|
922
|
+
export declare function ThemeSwitch({ className, classNames, ...props }: ThemeSwitchProps): JSX.Element;
|
|
923
|
+
|
|
924
|
+
export declare type ThemeSwitchClassnames = {
|
|
925
|
+
base?: string;
|
|
926
|
+
};
|
|
927
|
+
|
|
928
|
+
export declare type ThemeSwitchProps = SharedComponentProps & {
|
|
929
|
+
classNames?: ThemeSwitchClassnames;
|
|
930
|
+
};
|
|
931
|
+
|
|
661
932
|
/**
|
|
662
933
|
* @usage
|
|
663
934
|
* ```
|
|
@@ -705,6 +976,7 @@ export declare type UploaderContextState = {
|
|
|
705
976
|
label?: string;
|
|
706
977
|
avatar?: string;
|
|
707
978
|
listing?: string;
|
|
979
|
+
listingItem?: string;
|
|
708
980
|
error?: string;
|
|
709
981
|
input?: string;
|
|
710
982
|
title?: string;
|
|
@@ -729,16 +1001,38 @@ export declare function UploadFileErrorBox(): JSX.Element | null;
|
|
|
729
1001
|
|
|
730
1002
|
export declare function UploadFileInput(): JSX.Element;
|
|
731
1003
|
|
|
732
|
-
export declare function UploadFileLabel(): JSX.Element;
|
|
1004
|
+
export declare function UploadFileLabel(): JSX.Element | null;
|
|
733
1005
|
|
|
734
|
-
export declare function UploadFileListing():
|
|
1006
|
+
export declare function UploadFileListing(): JSX.Element;
|
|
735
1007
|
|
|
736
1008
|
export declare function useEmperorUI(): ConfigContextState;
|
|
737
1009
|
|
|
1010
|
+
export declare function useFilters<FiltersType extends Record<string, string | number | boolean>>(): {
|
|
1011
|
+
filters: FiltersType | null;
|
|
1012
|
+
};
|
|
1013
|
+
|
|
738
1014
|
export declare function useNavigation(): NavigationContextState;
|
|
739
1015
|
|
|
740
1016
|
export declare type UserDropdownProps = SharedComponentProps & {};
|
|
741
1017
|
|
|
1018
|
+
export declare function useSearchParamsHandler(): {
|
|
1019
|
+
getParam: (name: string) => string | null;
|
|
1020
|
+
allParams: Record<string, string>;
|
|
1021
|
+
setParams: ({ params, options, }: {
|
|
1022
|
+
params: Record<string, string | number | boolean | undefined | null>;
|
|
1023
|
+
options?: {
|
|
1024
|
+
replace?: boolean;
|
|
1025
|
+
};
|
|
1026
|
+
}) => void;
|
|
1027
|
+
deleteParam: ({ key }: {
|
|
1028
|
+
key: string;
|
|
1029
|
+
}) => void;
|
|
1030
|
+
deleteParams: ({ keys }: {
|
|
1031
|
+
keys: string[];
|
|
1032
|
+
}) => void;
|
|
1033
|
+
clearParams: () => void;
|
|
1034
|
+
};
|
|
1035
|
+
|
|
742
1036
|
export declare const useUploader: ({ labelContent, labelId, fileTypes, isRequired, isDraggable, isMulti, preventDuplicates, maxCount, maxFileSize, compressFiles, onChange, }: UseUploadFileProps) => UseUploadFileReturn;
|
|
743
1037
|
|
|
744
1038
|
export declare function useUploaderContext(): UploaderContextState;
|
|
@@ -771,6 +1065,14 @@ export declare type UseUploadFileReturn = {
|
|
|
771
1065
|
onInputChange: SharedOnInputChangeType;
|
|
772
1066
|
};
|
|
773
1067
|
|
|
1068
|
+
export declare const useWindowSize: () => {
|
|
1069
|
+
viewportWidth: number;
|
|
1070
|
+
viewportHeight: number;
|
|
1071
|
+
currentScreen: "base" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
1072
|
+
isSmallDevice: boolean;
|
|
1073
|
+
isExtraSmallDevice: boolean;
|
|
1074
|
+
};
|
|
1075
|
+
|
|
774
1076
|
export declare function validateUploadedFiles({ uploadedFiles, maxFileSize, compressFiles, locale, preventDuplicates, files, }: {
|
|
775
1077
|
uploadedFiles: File[];
|
|
776
1078
|
maxFileSize?: number;
|