@prokodo/ui 0.0.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/LICENSE +35 -0
- package/README.md +31 -0
- package/dist/index.cjs.js +46 -0
- package/dist/index.es.js +13840 -0
- package/dist/main.d.ts +3 -0
- package/dist/preview.d.ts +3 -0
- package/dist/prokodo-ui.css +1 -0
- package/dist/tsconfig.build.tsbuildinfo +1 -0
- package/dist/types/components/accordion/Accordion.d.ts +3 -0
- package/dist/types/components/accordion/Accordion.model.d.ts +28 -0
- package/dist/types/components/accordion/index.d.ts +2 -0
- package/dist/types/components/animated/Animated.d.ts +3 -0
- package/dist/types/components/animated/Animated.model.d.ts +12 -0
- package/dist/types/components/animated/index.d.ts +2 -0
- package/dist/types/components/animatedText/AnimatedText.d.ts +3 -0
- package/dist/types/components/animatedText/AnimatedText.model.d.ts +7 -0
- package/dist/types/components/animatedText/index.d.ts +2 -0
- package/dist/types/components/avatar/Avatar.d.ts +3 -0
- package/dist/types/components/avatar/Avatar.model.d.ts +11 -0
- package/dist/types/components/avatar/index.d.ts +2 -0
- package/dist/types/components/base-link/BaseLink.d.ts +3 -0
- package/dist/types/components/base-link/BaseLink.model.d.ts +7 -0
- package/dist/types/components/base-link/index.d.ts +2 -0
- package/dist/types/components/button/Button.d.ts +3 -0
- package/dist/types/components/button/Button.model.d.ts +26 -0
- package/dist/types/components/button/index.d.ts +2 -0
- package/dist/types/components/calendly/Calendly.d.ts +22 -0
- package/dist/types/components/calendly/Calendly.model.d.ts +27 -0
- package/dist/types/components/calendly/index.d.ts +2 -0
- package/dist/types/components/card/Card.d.ts +3 -0
- package/dist/types/components/card/Card.model.d.ts +35 -0
- package/dist/types/components/card/index.d.ts +2 -0
- package/dist/types/components/carousel/Carousel.d.ts +3 -0
- package/dist/types/components/carousel/Carousel.model.d.ts +24 -0
- package/dist/types/components/carousel/Carousel.services.d.ts +23 -0
- package/dist/types/components/carousel/index.d.ts +2 -0
- package/dist/types/components/chip/Chip.d.ts +3 -0
- package/dist/types/components/chip/Chip.model.d.ts +14 -0
- package/dist/types/components/chip/index.d.ts +2 -0
- package/dist/types/components/datePicker/DatePicker.d.ts +3 -0
- package/dist/types/components/datePicker/DatePicker.model.d.ts +21 -0
- package/dist/types/components/datePicker/index.d.ts +2 -0
- package/dist/types/components/dialog/Dialog.d.ts +3 -0
- package/dist/types/components/dialog/Dialog.model.d.ts +34 -0
- package/dist/types/components/dialog/index.d.ts +2 -0
- package/dist/types/components/drawer/Drawer.d.ts +5 -0
- package/dist/types/components/drawer/Drawer.model.d.ts +11 -0
- package/dist/types/components/drawer/index.d.ts +2 -0
- package/dist/types/components/form/Form.d.ts +3 -0
- package/dist/types/components/form/Form.model.d.ts +71 -0
- package/dist/types/components/form/FormField.d.ts +9 -0
- package/dist/types/components/form/FormResponse.d.ts +6 -0
- package/dist/types/components/form/index.d.ts +3 -0
- package/dist/types/components/grid/Grid.d.ts +7 -0
- package/dist/types/components/grid/GridRow.d.ts +13 -0
- package/dist/types/components/grid/index.d.ts +2 -0
- package/dist/types/components/headline/Headline.d.ts +4 -0
- package/dist/types/components/headline/Headline.model.d.ts +19 -0
- package/dist/types/components/headline/index.d.ts +2 -0
- package/dist/types/components/icon/Icon.d.ts +4 -0
- package/dist/types/components/icon/Icon.model.d.ts +15 -0
- package/dist/types/components/icon/Icon.utils.d.ts +79 -0
- package/dist/types/components/icon/iconsMap.d.ts +4128 -0
- package/dist/types/components/icon/index.d.ts +2 -0
- package/dist/types/components/image/Image.d.ts +3 -0
- package/dist/types/components/image/Image.model.d.ts +12 -0
- package/dist/types/components/image/index.d.ts +2 -0
- package/dist/types/components/image-text/ImageText.d.ts +3 -0
- package/dist/types/components/image-text/ImageText.model.d.ts +21 -0
- package/dist/types/components/image-text/index.d.ts +2 -0
- package/dist/types/components/input/Input.d.ts +3 -0
- package/dist/types/components/input/Input.model.d.ts +55 -0
- package/dist/types/components/input/InputValidation.d.ts +2 -0
- package/dist/types/components/input/index.d.ts +2 -0
- package/dist/types/components/inputOTP/InputOTP.d.ts +3 -0
- package/dist/types/components/inputOTP/InputOTP.model.d.ts +8 -0
- package/dist/types/components/inputOTP/index.d.ts +2 -0
- package/dist/types/components/label/Label.d.ts +3 -0
- package/dist/types/components/label/Label.model.d.ts +9 -0
- package/dist/types/components/label/index.d.ts +2 -0
- package/dist/types/components/link/Link.d.ts +3 -0
- package/dist/types/components/link/Link.model.d.ts +23 -0
- package/dist/types/components/link/index.d.ts +2 -0
- package/dist/types/components/list/List.d.ts +3 -0
- package/dist/types/components/list/List.model.d.ts +49 -0
- package/dist/types/components/list/index.d.ts +2 -0
- package/dist/types/components/loading/Loading.d.ts +3 -0
- package/dist/types/components/loading/Loading.model.d.ts +5 -0
- package/dist/types/components/loading/index.d.ts +2 -0
- package/dist/types/components/lottie/Lottie.d.ts +3 -0
- package/dist/types/components/lottie/Lottie.model.d.ts +8 -0
- package/dist/types/components/lottie/LottieAnimations.d.ts +32 -0
- package/dist/types/components/lottie/index.d.ts +2 -0
- package/dist/types/components/map/Map.d.ts +3 -0
- package/dist/types/components/map/Map.model.d.ts +20 -0
- package/dist/types/components/map/index.d.ts +2 -0
- package/dist/types/components/post-item/PostItem.d.ts +3 -0
- package/dist/types/components/post-item/PostItem.model.d.ts +21 -0
- package/dist/types/components/post-item/PostItemAuthor.d.ts +3 -0
- package/dist/types/components/post-item/PostItemAuthor.model.d.ts +14 -0
- package/dist/types/components/post-item/index.d.ts +3 -0
- package/dist/types/components/post-teaser/PostTeaser.d.ts +3 -0
- package/dist/types/components/post-teaser/PostTeaser.model.d.ts +25 -0
- package/dist/types/components/post-teaser/index.d.ts +2 -0
- package/dist/types/components/post-widget/PostWidget.d.ts +3 -0
- package/dist/types/components/post-widget/PostWidget.model.d.ts +25 -0
- package/dist/types/components/post-widget/index.d.ts +2 -0
- package/dist/types/components/post-widget-carousel/PostWidgetCarousel.d.ts +3 -0
- package/dist/types/components/post-widget-carousel/PostWidgetCarousel.model.d.ts +20 -0
- package/dist/types/components/post-widget-carousel/index.d.ts +2 -0
- package/dist/types/components/quote/Quote.d.ts +3 -0
- package/dist/types/components/quote/Quote.model.d.ts +19 -0
- package/dist/types/components/quote/index.d.ts +2 -0
- package/dist/types/components/rich-text/RichText.d.ts +3 -0
- package/dist/types/components/rich-text/RichText.model.d.ts +11 -0
- package/dist/types/components/rich-text/index.d.ts +2 -0
- package/dist/types/components/select/Select.d.ts +3 -0
- package/dist/types/components/select/Select.model.d.ts +30 -0
- package/dist/types/components/select/index.d.ts +2 -0
- package/dist/types/components/skeleton/Skeleton.d.ts +3 -0
- package/dist/types/components/skeleton/Skeleton.model.d.ts +7 -0
- package/dist/types/components/skeleton/index.d.ts +2 -0
- package/dist/types/components/slider/Slider.d.ts +3 -0
- package/dist/types/components/slider/Slider.model.d.ts +11 -0
- package/dist/types/components/slider/index.d.ts +2 -0
- package/dist/types/components/stepper/Stepper.d.ts +3 -0
- package/dist/types/components/stepper/Stepper.model.d.ts +24 -0
- package/dist/types/components/stepper/index.d.ts +2 -0
- package/dist/types/components/switch/Switch.d.ts +3 -0
- package/dist/types/components/switch/Switch.model.d.ts +18 -0
- package/dist/types/components/switch/index.d.ts +2 -0
- package/dist/types/components/table/Table.d.ts +3 -0
- package/dist/types/components/table/Table.model.d.ts +32 -0
- package/dist/types/components/table/index.d.ts +2 -0
- package/dist/types/components/teaser/Teaser.d.ts +3 -0
- package/dist/types/components/teaser/Teaser.model.d.ts +29 -0
- package/dist/types/components/teaser/index.d.ts +2 -0
- package/dist/types/helpers/bem.d.ts +7 -0
- package/dist/types/helpers/calculation.d.ts +2 -0
- package/dist/types/helpers/validations.d.ts +6 -0
- package/dist/types/hooks/useGoogleMaps.d.ts +1 -0
- package/dist/types/index.d.ts +80 -0
- package/dist/types/types/colors.d.ts +5 -0
- package/dist/types/types/schema.d.ts +7 -0
- package/dist/types/types/variants.d.ts +1 -0
- package/package.json +131 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ImageProps } from "../image";
|
|
2
|
+
import type { LinkProps } from "../link";
|
|
3
|
+
import type { Variants } from "@/types/variants";
|
|
4
|
+
import type { HTMLAttributes } from "react";
|
|
5
|
+
export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
6
|
+
export type AvatarProps = {
|
|
7
|
+
variant?: Variants;
|
|
8
|
+
size?: AvatarSize;
|
|
9
|
+
image?: ImageProps;
|
|
10
|
+
redirect?: LinkProps;
|
|
11
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { IconProps } from "../icon";
|
|
2
|
+
import type { LinkProps } from "../link";
|
|
3
|
+
import type { ButtonHTMLAttributes } from "react";
|
|
4
|
+
export type ButtonColor = "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
|
|
5
|
+
export type ButtonProperties = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
|
|
6
|
+
color?: ButtonColor;
|
|
7
|
+
fullWidth?: boolean;
|
|
8
|
+
contentClassName?: string;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
redirect?: LinkProps;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
variant?: "contained" | "outlined" | "text";
|
|
13
|
+
};
|
|
14
|
+
export type ButtonDefaultProps = Omit<ButtonProperties, "title"> & {
|
|
15
|
+
title: string;
|
|
16
|
+
iconProps?: IconProps;
|
|
17
|
+
"aria-label"?: string;
|
|
18
|
+
};
|
|
19
|
+
export type ButtonIconProps = (Omit<ButtonProperties, "title" | "aria-label"> & {
|
|
20
|
+
iconProps: IconProps;
|
|
21
|
+
"aria-label": string;
|
|
22
|
+
}) | (Omit<ButtonProperties, "title" | "aria-label"> & {
|
|
23
|
+
iconProps: IconProps;
|
|
24
|
+
inert: boolean;
|
|
25
|
+
});
|
|
26
|
+
export type ButtonProps = ButtonIconProps | ButtonDefaultProps;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type FC } from "react";
|
|
2
|
+
import type { CalendlyProps } from "./Calendly.model";
|
|
3
|
+
declare global {
|
|
4
|
+
interface Window {
|
|
5
|
+
Calendly?: {
|
|
6
|
+
initInlineWidget: (opts: {
|
|
7
|
+
url: string;
|
|
8
|
+
parentElement: HTMLElement;
|
|
9
|
+
prefill?: Record<string, string>;
|
|
10
|
+
utm?: Record<string, string>;
|
|
11
|
+
branding?: boolean;
|
|
12
|
+
hideEventTypeDetails?: boolean;
|
|
13
|
+
hideLandingPageDetails?: boolean;
|
|
14
|
+
hideGdprBanner?: boolean;
|
|
15
|
+
pageSettings?: Record<string, string>;
|
|
16
|
+
textColor?: string;
|
|
17
|
+
primaryColor?: string;
|
|
18
|
+
}) => void;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
export declare const Calendly: FC<CalendlyProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { AnimatedProps } from "../animated";
|
|
2
|
+
import type { HTMLAttributes } from "react";
|
|
3
|
+
export type CalendlyColorOptions = {
|
|
4
|
+
text?: string;
|
|
5
|
+
button?: string;
|
|
6
|
+
background?: string;
|
|
7
|
+
};
|
|
8
|
+
export type CalendlyDataCustomAnswers = {
|
|
9
|
+
[key: string]: string;
|
|
10
|
+
};
|
|
11
|
+
export type CalendlyData = {
|
|
12
|
+
utm_campaign?: string;
|
|
13
|
+
utm_source?: string;
|
|
14
|
+
name?: string;
|
|
15
|
+
email?: string;
|
|
16
|
+
location?: string;
|
|
17
|
+
customAnswers?: CalendlyDataCustomAnswers;
|
|
18
|
+
};
|
|
19
|
+
export type CalendlyProps = HTMLAttributes<HTMLDivElement> & {
|
|
20
|
+
calendlyId: string;
|
|
21
|
+
data?: CalendlyData;
|
|
22
|
+
animationProps?: AnimatedProps;
|
|
23
|
+
color?: CalendlyColorOptions;
|
|
24
|
+
hideCookieSettings?: boolean;
|
|
25
|
+
hideEventTypeDetails?: boolean;
|
|
26
|
+
hideDetails?: boolean;
|
|
27
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { ImageProps } from "../image";
|
|
2
|
+
import type { LinkProps } from "../link";
|
|
3
|
+
import type { SkeletonProps } from "../skeleton";
|
|
4
|
+
import type { Variants } from "@/types/variants";
|
|
5
|
+
import type { Ref, ReactNode, KeyboardEvent, ElementType } from "react";
|
|
6
|
+
export type CardVariant = Variants;
|
|
7
|
+
export type CardBackground = string | 1 | 2 | 3 | 4;
|
|
8
|
+
export type CardBackgroundProps = {
|
|
9
|
+
imageComponent: ElementType;
|
|
10
|
+
src?: string;
|
|
11
|
+
alt?: string;
|
|
12
|
+
} & Omit<ImageProps, "src" | "alt" | "imageComponent">;
|
|
13
|
+
export type CardProps = {
|
|
14
|
+
ref?: Ref<HTMLDivElement>;
|
|
15
|
+
variant?: CardVariant;
|
|
16
|
+
loading?: boolean;
|
|
17
|
+
skeletonProps?: SkeletonProps;
|
|
18
|
+
highlight?: boolean;
|
|
19
|
+
gradiant?: boolean;
|
|
20
|
+
gradiantClassName?: string;
|
|
21
|
+
enableShadow?: boolean;
|
|
22
|
+
animated?: boolean;
|
|
23
|
+
customAnimation?: "bottom-top" | "top-bottom" | "left-right" | "right-left";
|
|
24
|
+
className?: string;
|
|
25
|
+
contentClassName?: string;
|
|
26
|
+
background?: CardBackground;
|
|
27
|
+
backgroundProps?: CardBackgroundProps;
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
redirect?: LinkProps;
|
|
30
|
+
onClick?: () => void;
|
|
31
|
+
onKeyDown?: (e: KeyboardEvent) => void;
|
|
32
|
+
onMouseEnter?: () => void;
|
|
33
|
+
onMouseLeave?: () => void;
|
|
34
|
+
children: ReactNode;
|
|
35
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { PREV, NEXT } from "./Carousel.services";
|
|
2
|
+
import type { Ref, ReactNode, CSSProperties, HTMLAttributes } from "react";
|
|
3
|
+
export type CarouselRef = {
|
|
4
|
+
slidePrev: () => void;
|
|
5
|
+
slideNext: () => void;
|
|
6
|
+
carouselContainer: HTMLDivElement | null;
|
|
7
|
+
};
|
|
8
|
+
export type CarouselProps = HTMLAttributes<HTMLDivElement> & {
|
|
9
|
+
ref?: Ref<CarouselRef>;
|
|
10
|
+
autoplay?: number;
|
|
11
|
+
enableControl?: boolean;
|
|
12
|
+
translateX?: string;
|
|
13
|
+
itemStyle?: CSSProperties;
|
|
14
|
+
itemsToShow?: number;
|
|
15
|
+
className?: string;
|
|
16
|
+
classNameControls?: string;
|
|
17
|
+
classNameButtons?: string;
|
|
18
|
+
classNameWrapper?: string;
|
|
19
|
+
classNameItem?: string;
|
|
20
|
+
classNameDots?: string;
|
|
21
|
+
classNameDot?: string;
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
};
|
|
24
|
+
export type CarouselDirection = typeof PREV | typeof NEXT;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { CarouselDirection } from "./Carousel.model";
|
|
2
|
+
import type { TouchEvent, MouseEvent } from "react";
|
|
3
|
+
export declare const NEXT = "NEXT";
|
|
4
|
+
export declare const PREV = "PREV";
|
|
5
|
+
export declare const handleTouchStart: (e: TouchEvent<HTMLDivElement>, touchStartX: {
|
|
6
|
+
current: number;
|
|
7
|
+
}) => void;
|
|
8
|
+
export declare const handleTouchMove: (e: TouchEvent<HTMLDivElement>, touchEndX: {
|
|
9
|
+
current: number;
|
|
10
|
+
}) => void;
|
|
11
|
+
export declare const handleTouchEnd: (touchStartX: {
|
|
12
|
+
current: number;
|
|
13
|
+
}, touchEndX: {
|
|
14
|
+
current: number;
|
|
15
|
+
}, slide: (direction: CarouselDirection) => void) => void;
|
|
16
|
+
export declare const handleMouseDown: (e: MouseEvent<HTMLDivElement>, mouseStartX: {
|
|
17
|
+
current: number;
|
|
18
|
+
}) => void;
|
|
19
|
+
export declare const handleMouseUp: (e: MouseEvent<HTMLDivElement>, mouseStartX: {
|
|
20
|
+
current: number;
|
|
21
|
+
}, mouseEndX: {
|
|
22
|
+
current: number;
|
|
23
|
+
}, slide: (direction: CarouselDirection) => void) => void;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Variants } from "@/types/variants";
|
|
2
|
+
import type { MouseEventHandler, KeyboardEventHandler, ReactNode } from "react";
|
|
3
|
+
export type ChipVariant = "filled" | "outlined";
|
|
4
|
+
export type ChipColor = Variants;
|
|
5
|
+
export interface ChipProps {
|
|
6
|
+
icon?: ReactNode;
|
|
7
|
+
label: ReactNode;
|
|
8
|
+
variant?: ChipVariant;
|
|
9
|
+
color?: ChipColor;
|
|
10
|
+
className?: string;
|
|
11
|
+
onDelete?: MouseEventHandler<HTMLButtonElement>;
|
|
12
|
+
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
13
|
+
onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
|
|
14
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { InputProps } from "../input";
|
|
2
|
+
import type { Dayjs } from "dayjs";
|
|
3
|
+
export type DatePickerValue = Dayjs | null;
|
|
4
|
+
export type DatePickerErrorTranslations = {
|
|
5
|
+
required?: string;
|
|
6
|
+
minDate?: string;
|
|
7
|
+
maxDate?: string;
|
|
8
|
+
};
|
|
9
|
+
export interface DatePickerProps extends Omit<InputProps, "onChange" | "value" | "errorTranslations"> {
|
|
10
|
+
label: string;
|
|
11
|
+
name: string;
|
|
12
|
+
required?: boolean;
|
|
13
|
+
errorText?: string;
|
|
14
|
+
helperText?: string;
|
|
15
|
+
value?: DatePickerValue;
|
|
16
|
+
minDate?: DatePickerValue;
|
|
17
|
+
maxDate?: DatePickerValue;
|
|
18
|
+
onChange?: (value: DatePickerValue) => void;
|
|
19
|
+
errorTranslations?: DatePickerErrorTranslations;
|
|
20
|
+
format?: string;
|
|
21
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { ButtonProps } from "@/components/button";
|
|
2
|
+
import type { HeadlineProps } from "@/components/headline";
|
|
3
|
+
import type { ModalProps } from "@mui/base";
|
|
4
|
+
import type { Ref, ReactNode, HTMLAttributes } from "react";
|
|
5
|
+
export type DialogRef = {
|
|
6
|
+
openDialog: () => void;
|
|
7
|
+
closeDialog: () => void;
|
|
8
|
+
};
|
|
9
|
+
export type DialogAction = Omit<ButtonProps, "id"> & {
|
|
10
|
+
id: string;
|
|
11
|
+
};
|
|
12
|
+
export type DialogActions = DialogAction[];
|
|
13
|
+
export type DialogTranslations = {
|
|
14
|
+
cancel: string;
|
|
15
|
+
close: string;
|
|
16
|
+
};
|
|
17
|
+
export type DialogProps = Omit<ModalProps, "title" | "open" | "ref" | "children"> & {
|
|
18
|
+
ref?: Ref<DialogRef>;
|
|
19
|
+
contentRef?: Ref<HTMLDivElement>;
|
|
20
|
+
open?: boolean;
|
|
21
|
+
classNameHeader?: string;
|
|
22
|
+
scroll?: "paper" | "body";
|
|
23
|
+
fullScreen?: boolean;
|
|
24
|
+
showCloseButton?: boolean;
|
|
25
|
+
title: string;
|
|
26
|
+
titleProps?: HeadlineProps;
|
|
27
|
+
contentProps?: HTMLAttributes<HTMLDivElement>;
|
|
28
|
+
hideTitle?: boolean;
|
|
29
|
+
actions?: ButtonProps[];
|
|
30
|
+
renderHeader?: () => ReactNode;
|
|
31
|
+
translations: DialogTranslations;
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
containerChildren?: ReactNode;
|
|
34
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type FC, type SyntheticEvent, type ReactNode } from "react";
|
|
2
|
+
import type { DrawerProps } from "./Drawer.model";
|
|
3
|
+
export declare const renderDrawerTitle: (title?: string) => ReactNode | undefined;
|
|
4
|
+
export declare const renderDrawerCloseButton: (onClose?: (event: SyntheticEvent) => void) => ReactNode;
|
|
5
|
+
export declare const Drawer: FC<DrawerProps>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ModalProps } from "@mui/base";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
export type AnchorProps = "left" | "top" | "right" | "bottom";
|
|
4
|
+
export type DrawerProps = Omit<ModalProps, "children"> & {
|
|
5
|
+
anchor?: AnchorProps;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
fullscreen?: boolean;
|
|
8
|
+
containerClassName?: string;
|
|
9
|
+
renderHeader?: () => ReactNode;
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import type { ReactElement, FormHTMLAttributes } from "react";
|
|
2
|
+
import type { ButtonProps } from "../button";
|
|
3
|
+
import { DatePicker, type DatePickerProps, type DatePickerErrorTranslations } from "../datePicker";
|
|
4
|
+
import { Input, type InputProps, type InputErrorTranslations } from "../input";
|
|
5
|
+
import { InputOTP } from "../inputOTP";
|
|
6
|
+
import { Select, type SelectProps } from "../select";
|
|
7
|
+
import { Slider, type SliderProps } from "../slider";
|
|
8
|
+
import { Switch, type SwitchProps } from "../switch";
|
|
9
|
+
export type FormVariants = "primary" | "secondary" | "success" | "error" | "info" | "warning";
|
|
10
|
+
export type FormFieldValue = string | boolean | string[] | undefined;
|
|
11
|
+
export type FormFieldCondition = {
|
|
12
|
+
fieldId: string;
|
|
13
|
+
equalTo: boolean | string | string[];
|
|
14
|
+
updateProps: Partial<FormField>;
|
|
15
|
+
};
|
|
16
|
+
export type FormFieldOptionals = {
|
|
17
|
+
visible?: boolean;
|
|
18
|
+
conditions?: FormFieldCondition[];
|
|
19
|
+
value?: FormFieldValue;
|
|
20
|
+
};
|
|
21
|
+
export type FormFieldInput = FormFieldOptionals & {
|
|
22
|
+
fieldType: "input";
|
|
23
|
+
} & InputProps;
|
|
24
|
+
export type FormFieldSelect = FormFieldOptionals & {
|
|
25
|
+
fieldType: "select";
|
|
26
|
+
} & SelectProps;
|
|
27
|
+
export type FormFieldSwitch = FormFieldOptionals & {
|
|
28
|
+
fieldType: "switch";
|
|
29
|
+
} & SwitchProps;
|
|
30
|
+
export type FormFieldSlider = FormFieldOptionals & {
|
|
31
|
+
fieldType: "slider";
|
|
32
|
+
} & SliderProps;
|
|
33
|
+
export type FormFieldDate = FormFieldOptionals & {
|
|
34
|
+
fieldType: "date";
|
|
35
|
+
} & DatePickerProps;
|
|
36
|
+
export type FormField = FormFieldInput | FormFieldSelect | FormFieldSwitch | FormFieldSlider | FormFieldDate;
|
|
37
|
+
export type FormMessagesErrors = {
|
|
38
|
+
[key: string]: string[];
|
|
39
|
+
};
|
|
40
|
+
export type FormMessages = {
|
|
41
|
+
message?: string;
|
|
42
|
+
errors?: FormMessagesErrors;
|
|
43
|
+
};
|
|
44
|
+
export type FormFieldMessagesErrorsInput = InputErrorTranslations;
|
|
45
|
+
export type FormFieldMessagesErrorsDate = DatePickerErrorTranslations;
|
|
46
|
+
export type FormFieldMessagesErrors = {
|
|
47
|
+
required?: string;
|
|
48
|
+
input?: FormFieldMessagesErrorsInput;
|
|
49
|
+
date?: FormFieldMessagesErrorsDate;
|
|
50
|
+
};
|
|
51
|
+
export type FormFieldMessages = {
|
|
52
|
+
errors?: FormFieldMessagesErrors;
|
|
53
|
+
};
|
|
54
|
+
export type FormAllowedChildren = ReactElement<typeof DatePicker> | ReactElement<typeof Input> | ReactElement<typeof InputOTP> | ReactElement<typeof Select> | ReactElement<typeof Slider> | ReactElement<typeof Switch>;
|
|
55
|
+
export type ParentComponentProps = {
|
|
56
|
+
children: FormAllowedChildren | FormAllowedChildren[];
|
|
57
|
+
};
|
|
58
|
+
export type OnChangeFormHandler = (fields: FormField) => void;
|
|
59
|
+
export type FormProps = {
|
|
60
|
+
label: string;
|
|
61
|
+
disableFields?: boolean;
|
|
62
|
+
variant?: FormVariants;
|
|
63
|
+
hideResponse?: boolean;
|
|
64
|
+
fields?: FormField[];
|
|
65
|
+
defaultFields?: FormField[];
|
|
66
|
+
messages?: FormMessages;
|
|
67
|
+
messagesFields?: FormFieldMessages;
|
|
68
|
+
button: ButtonProps;
|
|
69
|
+
onSubmit?: (fields: FormField[]) => void;
|
|
70
|
+
onChangeForm?: OnChangeFormHandler;
|
|
71
|
+
} & FormHTMLAttributes<HTMLFormElement>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type FC } from "react";
|
|
2
|
+
import type { FormVariants, FormFieldMessages, FormField as FormFieldModel, FormFieldValue } from "./Form.model";
|
|
3
|
+
export type FormFieldProps = Omit<FormFieldModel, "onChange"> & {
|
|
4
|
+
variant?: FormVariants;
|
|
5
|
+
messagesFields?: FormFieldMessages;
|
|
6
|
+
onChange?: (field: FormFieldModel, value?: FormFieldValue) => void;
|
|
7
|
+
onValidate?: (field: FormFieldModel, err?: string) => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const FormField: FC<FormFieldProps>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type FC, type ReactNode, type HTMLAttributes } from "react";
|
|
2
|
+
export type GridRowProps = HTMLAttributes<HTMLDivElement> & {
|
|
3
|
+
spacing?: number;
|
|
4
|
+
align?: "left" | "center" | "right";
|
|
5
|
+
className?: string;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
xs?: number;
|
|
8
|
+
sm?: number;
|
|
9
|
+
md?: number;
|
|
10
|
+
lg?: number;
|
|
11
|
+
xl?: number;
|
|
12
|
+
};
|
|
13
|
+
export declare const GridRow: FC<GridRowProps>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { AnimatedTextProps } from "@/components/animatedText";
|
|
2
|
+
import type { Schema } from "@/types/schema";
|
|
3
|
+
import type { Variants } from "@/types/variants";
|
|
4
|
+
import type { ReactNode, HTMLProps } from "react";
|
|
5
|
+
export type HeadlineTypeProps = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
6
|
+
export type HeadlineSizeProps = "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
|
|
7
|
+
export type HeadlineVariant = Variants;
|
|
8
|
+
export type HeadlineProps = Omit<HTMLProps<HTMLHeadingElement>, "size"> & {
|
|
9
|
+
animated?: boolean;
|
|
10
|
+
animationProps?: Omit<AnimatedTextProps, "children">;
|
|
11
|
+
type?: HeadlineTypeProps;
|
|
12
|
+
size?: HeadlineSizeProps | number;
|
|
13
|
+
highlight?: boolean;
|
|
14
|
+
schema?: Schema;
|
|
15
|
+
align?: "left" | "center" | "right";
|
|
16
|
+
variant?: HeadlineVariant;
|
|
17
|
+
isRichtext?: boolean;
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ICON_MAP } from "./Icon.utils";
|
|
2
|
+
import type { Color } from "@/types/colors";
|
|
3
|
+
import type { Variants } from "@/types/variants";
|
|
4
|
+
import type { AriaAttributes, AriaRole } from "react";
|
|
5
|
+
export type IconName = keyof typeof ICON_MAP;
|
|
6
|
+
export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | number;
|
|
7
|
+
export type IconColor = Color | Variants;
|
|
8
|
+
export type IconProps = {
|
|
9
|
+
name?: IconName;
|
|
10
|
+
color?: IconColor;
|
|
11
|
+
size?: IconSize;
|
|
12
|
+
className?: string;
|
|
13
|
+
role?: AriaRole;
|
|
14
|
+
onClick?: () => void;
|
|
15
|
+
} & AriaAttributes;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
export declare const ICON_MAP: {
|
|
2
|
+
readonly AccessIcon: () => Promise<any>;
|
|
3
|
+
readonly AbsoluteIcon: () => Promise<any>;
|
|
4
|
+
readonly AbacusIcon: () => Promise<any>;
|
|
5
|
+
readonly AccidentIcon: () => Promise<any>;
|
|
6
|
+
readonly AccelerationIcon: () => Promise<any>;
|
|
7
|
+
readonly Agreement02Icon: () => Promise<any>;
|
|
8
|
+
readonly AiBrain03Icon: () => Promise<any>;
|
|
9
|
+
readonly ArrowLeft01Icon: () => Promise<any>;
|
|
10
|
+
readonly ApiIcon: () => Promise<any>;
|
|
11
|
+
readonly BrowserIcon: () => Promise<any>;
|
|
12
|
+
readonly Building03Icon: () => Promise<any>;
|
|
13
|
+
readonly CancelCircleIcon: () => Promise<any>;
|
|
14
|
+
readonly CapRoundIcon: () => Promise<any>;
|
|
15
|
+
readonly ChartLineData01Icon: () => Promise<any>;
|
|
16
|
+
readonly CheckmarkCircle03Icon: () => Promise<any>;
|
|
17
|
+
readonly CheckmarkBadge03Icon: () => Promise<any>;
|
|
18
|
+
readonly City01Icon: () => Promise<any>;
|
|
19
|
+
readonly City02Icon: () => Promise<any>;
|
|
20
|
+
readonly CloudIcon: () => Promise<any>;
|
|
21
|
+
readonly CloudServerIcon: () => Promise<any>;
|
|
22
|
+
readonly CodesandboxIcon: () => Promise<any>;
|
|
23
|
+
readonly CoinsEuroIcon: () => Promise<any>;
|
|
24
|
+
readonly CoinsDollarIcon: () => Promise<any>;
|
|
25
|
+
readonly Configuration01Icon: () => Promise<any>;
|
|
26
|
+
readonly CreditCardIcon: () => Promise<any>;
|
|
27
|
+
readonly CustomerService01Icon: () => Promise<any>;
|
|
28
|
+
readonly DashboardSpeed01Icon: () => Promise<any>;
|
|
29
|
+
readonly DatabaseIcon: () => Promise<any>;
|
|
30
|
+
readonly Database02Icon: () => Promise<any>;
|
|
31
|
+
readonly DocumentValidationIcon: () => Promise<any>;
|
|
32
|
+
readonly FireIcon: () => Promise<any>;
|
|
33
|
+
readonly Knowledge01Icon: () => Promise<any>;
|
|
34
|
+
readonly LaborIcon: () => Promise<any>;
|
|
35
|
+
readonly Loading01Icon: () => Promise<any>;
|
|
36
|
+
readonly Layout01Icon: () => Promise<any>;
|
|
37
|
+
readonly Location01Icon: () => Promise<any>;
|
|
38
|
+
readonly OfficeIcon: () => Promise<any>;
|
|
39
|
+
readonly StartUp02Icon: () => Promise<any>;
|
|
40
|
+
readonly StructureFolderCircleIcon: () => Promise<any>;
|
|
41
|
+
readonly Wrench01Icon: () => Promise<any>;
|
|
42
|
+
readonly Rocket02Icon: () => Promise<any>;
|
|
43
|
+
readonly ArrowDown01Icon: () => Promise<any>;
|
|
44
|
+
readonly BrushIcon: () => Promise<any>;
|
|
45
|
+
readonly CodeIcon: () => Promise<any>;
|
|
46
|
+
readonly MobileProgramming01Icon: () => Promise<any>;
|
|
47
|
+
readonly ArrowRight01Icon: () => Promise<any>;
|
|
48
|
+
readonly WebDesign01Icon: () => Promise<any>;
|
|
49
|
+
readonly WebDesign02Icon: () => Promise<any>;
|
|
50
|
+
readonly AnalyticsUpIcon: () => Promise<any>;
|
|
51
|
+
readonly Menu11Icon: () => Promise<any>;
|
|
52
|
+
readonly MarketAnalysisIcon: () => Promise<any>;
|
|
53
|
+
readonly Sun01Icon: () => Promise<any>;
|
|
54
|
+
readonly Cancel01Icon: () => Promise<any>;
|
|
55
|
+
readonly PlusSignIcon: () => Promise<any>;
|
|
56
|
+
readonly MinusSignIcon: () => Promise<any>;
|
|
57
|
+
readonly LinkBackwardIcon: () => Promise<any>;
|
|
58
|
+
readonly EyeIcon: () => Promise<any>;
|
|
59
|
+
readonly UserIcon: () => Promise<any>;
|
|
60
|
+
readonly Home01Icon: () => Promise<any>;
|
|
61
|
+
readonly Moon01Icon: () => Promise<any>;
|
|
62
|
+
readonly MoonSlowWindIcon: () => Promise<any>;
|
|
63
|
+
readonly InstagramIcon: () => Promise<any>;
|
|
64
|
+
readonly MetaIcon: () => Promise<any>;
|
|
65
|
+
readonly Activity02Icon: () => Promise<any>;
|
|
66
|
+
readonly PowerServiceIcon: () => Promise<any>;
|
|
67
|
+
readonly PackageIcon: () => Promise<any>;
|
|
68
|
+
readonly QuestionIcon: () => Promise<any>;
|
|
69
|
+
readonly PencilIcon: () => Promise<any>;
|
|
70
|
+
readonly ServiceIcon: () => Promise<any>;
|
|
71
|
+
readonly ShieldKeyIcon: () => Promise<any>;
|
|
72
|
+
readonly StrategyIcon: () => Promise<any>;
|
|
73
|
+
readonly UserCheck01Icon: () => Promise<any>;
|
|
74
|
+
readonly UserArrowLeftRightIcon: () => Promise<any>;
|
|
75
|
+
readonly Tick01Icon: () => Promise<any>;
|
|
76
|
+
readonly TaskDaily01Icon: () => Promise<any>;
|
|
77
|
+
readonly Linkedin02Icon: () => Promise<any>;
|
|
78
|
+
readonly VintageClockIcon: () => Promise<any>;
|
|
79
|
+
};
|