@sorocraft/ui 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Avatar/Avatar.d.ts +17 -0
- package/dist/components/Avatar/index.d.ts +1 -0
- package/dist/components/Button/Button.d.ts +16 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/DropDown/DropDown.d.ts +12 -0
- package/dist/components/DropDown/DropDown.types.d.ts +3 -0
- package/dist/components/DropDown/index.d.ts +1 -0
- package/dist/components/IconButton/IconButton.d.ts +14 -0
- package/dist/components/IconButton/index.d.ts +1 -0
- package/dist/components/Input/Input.d.ts +43 -0
- package/dist/components/Input/Input.types.d.ts +19 -0
- package/dist/components/Input/index.d.ts +1 -0
- package/dist/components/Link/Link.d.ts +12 -0
- package/dist/components/Link/index.d.ts +1 -0
- package/dist/components/ListItem/ListItem.d.ts +13 -0
- package/dist/components/ListItem/index.d.ts +1 -0
- package/dist/components/LoadingItem/LoadingItem.d.ts +9 -0
- package/dist/components/LoadingItem/index.d.ts +1 -0
- package/dist/components/Portal/PortalAround.d.ts +17 -0
- package/dist/components/Portal/index.d.ts +1 -0
- package/dist/components/SVGIcon/SVGIcon.d.ts +10 -0
- package/dist/components/SVGIcon/SVGIcon.types.d.ts +9 -0
- package/dist/components/SVGIcon/index.d.ts +2 -0
- package/dist/icons/AlertCircle.d.ts +3 -0
- package/dist/icons/AlignLeft.d.ts +3 -0
- package/dist/icons/Award.d.ts +3 -0
- package/dist/icons/BarChart.d.ts +3 -0
- package/dist/icons/Bell.d.ts +3 -0
- package/dist/icons/Bookmark.d.ts +3 -0
- package/dist/icons/Branch.d.ts +3 -0
- package/dist/icons/Calendar.d.ts +3 -0
- package/dist/icons/CalendarPlus.d.ts +3 -0
- package/dist/icons/Camera.d.ts +3 -0
- package/dist/icons/Check.d.ts +3 -0
- package/dist/icons/ChevronDown.d.ts +3 -0
- package/dist/icons/ChevronLeft.d.ts +3 -0
- package/dist/icons/ChevronRight.d.ts +3 -0
- package/dist/icons/ChevronUp.d.ts +3 -0
- package/dist/icons/Circle.d.ts +3 -0
- package/dist/icons/Close.d.ts +3 -0
- package/dist/icons/CloudLightning.d.ts +3 -0
- package/dist/icons/Columns.d.ts +3 -0
- package/dist/icons/ColumnsThree.d.ts +3 -0
- package/dist/icons/CornerDownLeft.d.ts +3 -0
- package/dist/icons/Dataflow.d.ts +3 -0
- package/dist/icons/DotsDrag.d.ts +3 -0
- package/dist/icons/DotsGrid.d.ts +3 -0
- package/dist/icons/DotsHorizontal.d.ts +3 -0
- package/dist/icons/DotsVertical.d.ts +3 -0
- package/dist/icons/Download.d.ts +3 -0
- package/dist/icons/Edit.d.ts +3 -0
- package/dist/icons/Eye.d.ts +3 -0
- package/dist/icons/EyeOff.d.ts +3 -0
- package/dist/icons/Facebook.d.ts +3 -0
- package/dist/icons/File.d.ts +3 -0
- package/dist/icons/Folder.d.ts +3 -0
- package/dist/icons/FolderPlus.d.ts +3 -0
- package/dist/icons/Grid.d.ts +3 -0
- package/dist/icons/Home.d.ts +3 -0
- package/dist/icons/HourglassHalf.d.ts +3 -0
- package/dist/icons/Image.d.ts +3 -0
- package/dist/icons/Instagram.d.ts +3 -0
- package/dist/icons/Link.d.ts +3 -0
- package/dist/icons/LinkHorizontal.d.ts +3 -0
- package/dist/icons/Linkedin.d.ts +3 -0
- package/dist/icons/Lock.d.ts +3 -0
- package/dist/icons/LogOut.d.ts +3 -0
- package/dist/icons/Mail.d.ts +3 -0
- package/dist/icons/MarkerPin.d.ts +3 -0
- package/dist/icons/Menu.d.ts +3 -0
- package/dist/icons/MessageChatCircle.d.ts +3 -0
- package/dist/icons/MessageCircle.d.ts +3 -0
- package/dist/icons/MessageTextCircle.d.ts +3 -0
- package/dist/icons/NoImage.d.ts +3 -0
- package/dist/icons/Paperclip.d.ts +3 -0
- package/dist/icons/Plus.d.ts +3 -0
- package/dist/icons/Refresh.d.ts +3 -0
- package/dist/icons/Save.d.ts +3 -0
- package/dist/icons/Search.d.ts +3 -0
- package/dist/icons/Send.d.ts +3 -0
- package/dist/icons/Shield.d.ts +3 -0
- package/dist/icons/Target.d.ts +3 -0
- package/dist/icons/ThumbsUp.d.ts +3 -0
- package/dist/icons/Trash.d.ts +3 -0
- package/dist/icons/UploadCloud.d.ts +3 -0
- package/dist/icons/User.d.ts +3 -0
- package/dist/icons/UserCheck.d.ts +3 -0
- package/dist/icons/UserCircle.d.ts +3 -0
- package/dist/icons/UserPlus.d.ts +3 -0
- package/dist/icons/UserX.d.ts +3 -0
- package/dist/icons/Users.d.ts +3 -0
- package/dist/icons/Xcom.d.ts +3 -0
- package/dist/icons/Youtube.d.ts +3 -0
- package/dist/icons/index.d.ts +70 -0
- package/dist/icons/index.esm.js +2 -0
- package/dist/icons/index.esm.js.map +1 -0
- package/dist/icons/index.js +2 -0
- package/dist/icons/index.js.map +1 -0
- package/dist/index.d.ts +16 -0
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/models/ui.d.ts +22 -0
- package/dist/styles/scss/animations.scss +30 -0
- package/dist/styles/scss/colors.scss +131 -0
- package/dist/styles/scss/functions/toRem.scss +12 -0
- package/dist/styles/scss/mixins.scss +180 -0
- package/dist/styles/scss/utils.scss +1 -0
- package/dist/styles/scss/variables.scss +208 -0
- package/dist/styles/ui.css +2 -0
- package/dist/styles/ui.css.map +1 -0
- package/dist/utils/common.d.ts +1 -0
- package/dist/utils/icon.d.ts +2 -0
- package/dist/utils/styling.d.ts +2 -0
- package/dist/utils/styling.types.d.ts +6 -0
- package/dist/utils/view.d.ts +1 -0
- package/package.json +64 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { MouseEventHandler } from "react";
|
|
2
|
+
import { SIZE } from "src/models/ui";
|
|
3
|
+
import { IconType } from "../SVGIcon";
|
|
4
|
+
interface Props {
|
|
5
|
+
source?: string | null;
|
|
6
|
+
alt?: string;
|
|
7
|
+
size?: SIZE;
|
|
8
|
+
onClick?: MouseEventHandler<HTMLDivElement> | undefined;
|
|
9
|
+
className?: string;
|
|
10
|
+
isEditable?: boolean;
|
|
11
|
+
overlayIcon?: IconType | null;
|
|
12
|
+
inline?: boolean;
|
|
13
|
+
overlayText?: string;
|
|
14
|
+
isLoading?: boolean;
|
|
15
|
+
}
|
|
16
|
+
declare const Avatar: ({ source, alt, size, onClick, className, isEditable, overlayIcon, inline, isLoading, overlayText, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export default Avatar;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Avatar';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { UIElementType } from "src/models/ui";
|
|
2
|
+
import { IconType } from "../SVGIcon";
|
|
3
|
+
interface Props {
|
|
4
|
+
type?: UIElementType;
|
|
5
|
+
onClick: (e?: any) => void;
|
|
6
|
+
label: string;
|
|
7
|
+
icon?: IconType;
|
|
8
|
+
fullWidth?: boolean;
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
className?: string;
|
|
12
|
+
needConfirm?: boolean;
|
|
13
|
+
size?: "standard" | "small" | "xsmall";
|
|
14
|
+
}
|
|
15
|
+
declare const Button: ({ type, onClick, label, icon, fullWidth, isLoading, disabled, className, needConfirm, size, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export default Button;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from "react";
|
|
2
|
+
import { UIElementType } from "src/models/ui";
|
|
3
|
+
import { CloseDropdownRef } from "./DropDown.types";
|
|
4
|
+
interface Props {
|
|
5
|
+
action: ReactNode;
|
|
6
|
+
menu: ReactNode;
|
|
7
|
+
type?: UIElementType;
|
|
8
|
+
closeRef?: RefObject<CloseDropdownRef>;
|
|
9
|
+
actionSize?: "medium" | "small" | "xsmall" | "large";
|
|
10
|
+
}
|
|
11
|
+
declare const DropDown: ({ action, menu, type, closeRef, actionSize, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default DropDown;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './DropDown';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { SIZE, UIElementType } from "src/models/ui";
|
|
2
|
+
import { IconType } from "../SVGIcon";
|
|
3
|
+
interface Props {
|
|
4
|
+
icon: IconType;
|
|
5
|
+
onClick: () => void;
|
|
6
|
+
type?: UIElementType;
|
|
7
|
+
needConfirm?: boolean;
|
|
8
|
+
noPadding?: boolean;
|
|
9
|
+
isLoading?: boolean;
|
|
10
|
+
size?: SIZE;
|
|
11
|
+
confirmPosition?: "top" | "bottom";
|
|
12
|
+
}
|
|
13
|
+
declare const IconButton: ({ icon, onClick, type, needConfirm, noPadding, isLoading, size, confirmPosition, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default IconButton;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './IconButton';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { FC, ReactElement } from "react";
|
|
2
|
+
import { SIZE } from "src/models/ui";
|
|
3
|
+
import { IconType } from "../SVGIcon";
|
|
4
|
+
import { onChangeEventType, onFocusEventType } from "./Input.types";
|
|
5
|
+
interface SelectOption {
|
|
6
|
+
label: string;
|
|
7
|
+
value: string | number;
|
|
8
|
+
}
|
|
9
|
+
interface Props {
|
|
10
|
+
label?: string;
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
type?: string;
|
|
13
|
+
value?: string;
|
|
14
|
+
addonIcon?: IconType | null;
|
|
15
|
+
required?: boolean;
|
|
16
|
+
name?: string;
|
|
17
|
+
errorMessage?: string;
|
|
18
|
+
options?: SelectOption[];
|
|
19
|
+
fullWidth?: boolean;
|
|
20
|
+
source?: string | null;
|
|
21
|
+
avatarSize?: SIZE;
|
|
22
|
+
labelAddon?: ReactElement;
|
|
23
|
+
autoCompleteContent?: ReactElement | null;
|
|
24
|
+
autoCompleteReverse?: boolean;
|
|
25
|
+
noMargin?: boolean;
|
|
26
|
+
isDisabled?: boolean;
|
|
27
|
+
isLoading?: boolean;
|
|
28
|
+
isMultiUpload?: boolean;
|
|
29
|
+
autoFocus?: boolean;
|
|
30
|
+
theme?: "oval" | "transparent";
|
|
31
|
+
size?: "xsmall" | "small" | "medium" | "large";
|
|
32
|
+
onChange?: (e: onChangeEventType) => void;
|
|
33
|
+
onBlur?: (e: onFocusEventType) => void;
|
|
34
|
+
onFocus?: (e: onFocusEventType) => void;
|
|
35
|
+
addonAction?: () => void;
|
|
36
|
+
onEnter?: () => void;
|
|
37
|
+
onEsc?: () => void;
|
|
38
|
+
onFileSelect?: (file: File, url?: string) => void;
|
|
39
|
+
onFilesSelect?: (files: FileList | null) => void;
|
|
40
|
+
[key: string]: any;
|
|
41
|
+
}
|
|
42
|
+
declare const Input: FC<Props>;
|
|
43
|
+
export default Input;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ChangeEvent, FocusEvent, KeyboardEvent } from "react";
|
|
2
|
+
export declare enum InputType {
|
|
3
|
+
TEXT = "text",
|
|
4
|
+
PASSWORD = "password",
|
|
5
|
+
EMAIL = "email",
|
|
6
|
+
NUMBER = "number",
|
|
7
|
+
URL = "url",
|
|
8
|
+
TEL = "tel",
|
|
9
|
+
DATE = "date",
|
|
10
|
+
DATETIME = "datetime",
|
|
11
|
+
SELECT = "select",
|
|
12
|
+
COLOR_PICKER = "color-picker",
|
|
13
|
+
TEXT_AREA = "text-area",
|
|
14
|
+
AVATAR_UPLOAD = "avatar-upload",
|
|
15
|
+
UPLOAD_IMAGE_ICON = "upload-image-icon"
|
|
16
|
+
}
|
|
17
|
+
export type onChangeEventType = ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
|
|
18
|
+
export type onFocusEventType = FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
|
|
19
|
+
export type onEnterEventType = KeyboardEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./Input";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { SIZE, UIElementType } from "src/models/ui";
|
|
2
|
+
interface Props {
|
|
3
|
+
href: string;
|
|
4
|
+
title: string;
|
|
5
|
+
target?: "_blank" | "_self" | "_parent" | "_top" | "framename";
|
|
6
|
+
type?: UIElementType;
|
|
7
|
+
padding?: "zero" | SIZE;
|
|
8
|
+
hasChevron?: boolean;
|
|
9
|
+
fullWidth?: boolean;
|
|
10
|
+
}
|
|
11
|
+
declare const Link: ({ href, title, target, type, padding, hasChevron, fullWidth, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default Link;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Link';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
title: string;
|
|
3
|
+
subtitle?: string;
|
|
4
|
+
actionTitle?: string;
|
|
5
|
+
action?: () => void;
|
|
6
|
+
completed?: boolean;
|
|
7
|
+
indicator?: "primary" | "success" | "danger" | "warning" | "info";
|
|
8
|
+
hasSeparator?: boolean;
|
|
9
|
+
hasDashedSeparator?: boolean;
|
|
10
|
+
isActionPending?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const ListItem: ({ title, subtitle, actionTitle, action, completed, indicator, hasSeparator, hasDashedSeparator, isActionPending, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default ListItem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './ListItem';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { SIZE } from "src/models/ui";
|
|
2
|
+
interface Props {
|
|
3
|
+
shape?: "square";
|
|
4
|
+
size: SIZE;
|
|
5
|
+
width?: string;
|
|
6
|
+
height?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const LoadingItem: ({ shape, size, width, height }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default LoadingItem;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "./LoadingItem";
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode, RefObject } from "react";
|
|
2
|
+
interface PortalParams {
|
|
3
|
+
isOpen: boolean;
|
|
4
|
+
top: number | string;
|
|
5
|
+
left: number | string;
|
|
6
|
+
bottom: number | string;
|
|
7
|
+
right: number | string;
|
|
8
|
+
}
|
|
9
|
+
interface Props {
|
|
10
|
+
containerRef: RefObject<HTMLDivElement>;
|
|
11
|
+
contentRef: RefObject<HTMLDivElement>;
|
|
12
|
+
isOpen: boolean;
|
|
13
|
+
renderChild: (params: PortalParams) => ReactNode;
|
|
14
|
+
onClose: () => void;
|
|
15
|
+
}
|
|
16
|
+
declare const PortalAround: ({ containerRef, contentRef, isOpen, renderChild, onClose, }: Props) => import("react").ReactPortal;
|
|
17
|
+
export default PortalAround;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './PortalAround';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { SIZE } from "src/models/ui";
|
|
2
|
+
import { IconType } from "./SVGIcon.types";
|
|
3
|
+
interface Props {
|
|
4
|
+
icon?: IconType;
|
|
5
|
+
size?: SIZE;
|
|
6
|
+
className?: string;
|
|
7
|
+
isLoading?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const SVGIcon: ({ icon: IconComponent, size, className, isLoading }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default SVGIcon;
|