react-artasys-ui 0.1.4 → 0.1.6

package/lib/Form/Element/Element.d.ts

@@ -10,5 +10,5 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
     afterElement?: React.ReactElement;
     hiddenContainer?: boolean;
 }
-declare const Element: ({ children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
+declare const Element: ({ children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
 export default Element;

package/lib/Form/Form.d.ts

@@ -3,7 +3,9 @@ import { TSpinner } from '../Spinner';
 interface IForm extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     wait?: boolean;
+    progress?: number;
+    progressRadius?: boolean;
     spinnerColor?: TSpinner['color'];
 }
-declare const Form: ({ children, wait, className, spinnerColor, onSubmit, ...props }: IForm) => JSX.Element;
+declare const Form: ({ children, wait, progress, progressRadius, className, spinnerColor, onSubmit, ...props }: IForm) => JSX.Element;
 export default Form;

package/lib/Progress/Progress.d.ts

@@ -0,0 +1,7 @@
+interface IProgress {
+    value?: number | string;
+    size?: 'small' | 'middle' | 'large';
+    radius?: boolean;
+}
+declare const Progress: ({ value, size, radius }: IProgress) => JSX.Element;
+export default Progress;

package/lib/Progress/index.d.ts

@@ -0,0 +1,2 @@
+import Progress from "./Progress";
+export default Progress;

package/lib/Select/Option.d.ts

@@ -0,0 +1,7 @@
+import { LiHTMLAttributes } from "react";
+export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
+    value?: string;
+    children?: string | React.ReactElement;
+}
+declare const Option: ({ children, value, onClick, ...props }: IOption) => JSX.Element;
+export default Option;

package/lib/Select/Select.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IElement } from "../Form/Element";
+import type { IOption } from "./Option";
+export declare const Context: import("react").Context<{
+    selected: string;
+    emptyValue: import("react").MutableRefObject<boolean>;
+    setSelect: (value: string) => void;
+    setSelected: (value: string) => void;
+    setTitle: (title: string) => void;
+}>;
+export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
+    children?: React.FunctionComponentElement<IOption>[];
+    onChange?: (value: string) => void;
+}
+declare const Select: import("react").ForwardRefExoticComponent<ISelect & import("react").RefAttributes<HTMLInputElement>>;
+export default Select;

package/lib/Select/index.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, FC, RefAttributes } from "react";
+import { ISelect } from "./Select";
+import Option, { IOption } from "./Option";
+interface StaticComponent extends ForwardRefExoticComponent<ISelect & RefAttributes<HTMLInputElement>> {
+    Option: FC<IOption>;
+}
+declare const Select: StaticComponent;
+export { Option as SelectOption };
+export default Select;

package/lib/index.d.ts

@@ -7,7 +7,9 @@ import File, { TFileData, TFileMime } from "./File";
 import Button from "./Button";
 import UploadImages, { IUploadImages, TImageData, IImage } from "./UploadImages";
 import Checkbox from "./Checkbox";
+import Progress from "./Progress";
+import Select, { SelectOption } from "./Select";
 declare const UI: {};
-export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages, Checkbox };
+export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages, Checkbox, Progress, Select, SelectOption };
 export type { TFileData, TFileMime, IUploadImages, IImage, TImageData, IElement };
 export default UI;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Form/Element/Element.tsx

@@ -19,7 +19,7 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
 	hiddenContainer?: boolean;
 }
 
-const Element = ({children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
+const Element = ({children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
 	const [currentError, setCurrentError] = useState('');
 
 	useEffect(() => {
@@ -30,7 +30,7 @@ const Element = ({children, beforeElement, afterElement, error, placeholder, dis
 
 	classes.push(styles['container']);
 	if (currentError) classes.push(styles['error']);
-	if (disabled) classes.push(styles['disabled']);
+	if (props.disabled) classes.push(styles['disabled']);
 	if (hiddenContainer) classes.push(styles['hidden']);
 	if (classNameContainer) classes.push(classNameContainer);
 

package/src/Form/Element/style.module.css

@@ -59,7 +59,7 @@
 	margin-left: 5px;
 	height: 100%;
 	color: #7A7A73;
-	font-size: 1.2em;
+	font-size: 1.2rem;
 	z-index: -1;
 	user-select: none;
 	transition: transform 0.3s;

package/src/Form/Form.tsx

@@ -4,14 +4,17 @@ import styles from './style.module.css';
 import Spinner,{
 	TSpinner
 } from '../Spinner';
+import Progress from '../Progress';
 
 interface IForm extends FormHTMLAttributes<HTMLFormElement> {
 	children: ReactNode;
 	wait?: boolean;
+	progress?: number;
+	progressRadius?: boolean;
 	spinnerColor?: TSpinner['color'];
 }
 
-const Form = ({children, wait, className, spinnerColor, onSubmit, ...props}: IForm) => {
+const Form = ({children, wait, progress, progressRadius = true, className, spinnerColor, onSubmit, ...props}: IForm) => {
 
 	const submit = (e: FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
@@ -29,7 +32,7 @@ const Form = ({children, wait, className, spinnerColor, onSubmit, ...props}: IFo
 	return(<form {...props} onSubmit={submit} className={classes.join(' ')}>
 		{children}
 		<div className={styles['wait-indicator']}>
-			<Spinner color={spinnerColor}/>
+			{typeof progress === 'number' ? <Progress radius={progressRadius} value={progress}/> : <Spinner color={spinnerColor}/>}
 		</div>
 	</form>);
 };

package/src/Input/Input.tsx

@@ -27,6 +27,7 @@ const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChange
 	};
 
 	const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+		if (props.disabled) return;
 		if (typeof onInput === 'function') {
 			onInput(e);
 		}

package/src/Progress/Progress.tsx

@@ -0,0 +1,28 @@
+import styles from "./style.module.css";
+
+interface IProgress {
+	value?: number | string;
+	size?: 'small' | 'middle' | 'large';
+	radius?: boolean;
+};
+
+const Progress = ({value = 0, size, radius = false}: IProgress) => {
+	value = Math.ceil(Number(value) * 10) / 10;
+	if (value > 100) {
+		value = 100;
+	}
+	if (value < 0) {
+		value = 0;
+	}
+
+	const progress = radius ? (360 / 100 * value) + 'deg' : value + '%';
+
+	const classes = ['ui-progress'];
+	classes.push(styles['container']);
+	if (size) classes.push(styles[size]);
+	if (radius) classes.push(styles['radius']);
+
+	return(<div className={classes.join(' ')} data-progress={value} style={{'--progress': progress} as React.CSSProperties}/>);
+};
+
+export default Progress;

package/src/Progress/index.tsx

@@ -0,0 +1,3 @@
+import Progress from "./Progress";
+
+export default Progress;

package/src/Progress/style.module.css

@@ -0,0 +1,72 @@
+/* Progress */
+
+.container {
+	--size: 150px;
+	--color-rgb: 94, 190, 214;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	min-width: var(--size);
+	max-width: var(--size);
+	box-sizing: content-box !important;
+	aspect-ratio: 10/1;
+	border-radius: 2px;
+	padding: 5px 0;
+	overflow: hidden;
+}
+
+.container::before {
+	content: "";
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	max-width: 100%;
+    max-height: 100%;
+	background: linear-gradient(to right, #5EBED6 var(--progress), #BED4DB 0);
+}
+
+.container.radius {
+	aspect-ratio: 1/1;
+	border-radius: 50%;
+	padding: unset;
+}
+
+.container.radius::before {
+	--border-width: clamp(0.2em, 10%, 0.5em);
+	border-radius: 50%;
+	aspect-ratio: 1/1;
+	mask: radial-gradient(
+		farthest-side,
+		transparent calc(100% - var(--border-width) - 0.5px),
+		#000 calc(100% - var(--border-width) + 0.5px)
+	);
+	background: conic-gradient(#5EBED6 var(--progress), #BED4DB 0deg);
+}
+
+.container::after {
+	content: attr(data-progress) '%';
+	font-size: 1.5em;
+	color: #FFFFFF;
+	mix-blend-mode: lighten;
+	z-index: 1;
+}
+
+.container.radius::after {
+	mix-blend-mode: unset;
+	color: #1D1D1B;
+}
+
+.container.small {
+	--size: 30px;
+}
+
+.container.middle {
+	--size: 60px;
+}
+
+.container.large {
+	--size: 120px;
+}

package/src/Select/Option.tsx

@@ -0,0 +1,42 @@
+import {
+	LiHTMLAttributes,
+	MouseEvent,
+	useContext,
+	useEffect
+} from "react";
+import { Context } from "./Select";
+import styles from "./style.module.css";
+
+export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
+	value?: string;
+	children?: string | React.ReactElement;
+};
+
+const Option = ({children, value, onClick, ...props}: IOption) => {
+	const context = useContext(Context);
+
+	const handleClick = (e: MouseEvent<HTMLLIElement>) => {
+		if (typeof value === 'undefined') return;
+		context.setSelect(value);
+		if (typeof onClick === 'function') {
+			onClick(e);
+		}
+	};
+
+	useEffect(() => {
+		if (children && (value === context.selected || !context.emptyValue.current)) {
+			context.setTitle(children?.toString());
+			if (!context.emptyValue.current && value) {
+				context.setSelected(value);
+			}
+			context.emptyValue.current = true;
+		}
+	}, [context.selected]);
+
+	const classes = ['ui-select-option'];
+	if (context.selected === value) classes.push(styles['active'], 'active');
+
+	return(<li {...props} onClick={handleClick} className={classes.join(' ')}>{children}</li>);
+};
+
+export default Option;

package/src/Select/Select.tsx

@@ -0,0 +1,101 @@
+import {
+	forwardRef,
+	createContext,
+	useState,
+	useEffect,
+	useRef
+} from "react";
+import Element,{
+	IElement
+} from "../Form/Element";
+import type { IOption } from "./Option";
+import styles from "./style.module.css";
+
+export const Context = createContext({
+	selected: '',
+	emptyValue: {current:{}} as React.MutableRefObject<boolean>,
+	setSelect: (value: string) => {},
+	setSelected: (value: string) => {},
+	setTitle: (title: string) => {},
+});
+
+export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
+	children?: React.FunctionComponentElement<IOption>[];
+	onChange?: (value: string) => void;
+};
+
+const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value, ...props}, ref) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const emptyValue = useRef(false);
+
+	const [isOpen, setOpen] = useState(false);
+	const [selected, setSelected] = useState('');
+	const [title, setTitle] = useState<string>();
+
+	const open = () => {
+		if (props.disabled) return;
+		setOpen(true);
+	};
+
+	const close = () => {
+		setOpen(false);
+	};
+
+	const setSelect = (value: string) => {
+		if (typeof onChange === 'function') {
+			onChange(value);
+		}
+		setSelected(value);
+		close();
+	};
+
+	useEffect(() => {
+		if (typeof value === 'undefined') return;
+		setSelected(String(value));
+	}, [value]);
+
+	useEffect(() => {
+		const element = containerRef.current;
+		const classList = element!.classList;
+		if (isOpen) {
+			classList.remove(styles['hidden']);
+			requestAnimationFrame(() => {
+				classList.add(styles['opened']);
+				element?.focus();
+			});
+		}else{
+			if (classList.contains(styles['opened'])) {
+				element!.ontransitionend = () => {
+					classList.add(styles['hidden']);
+					element!.ontransitionend = null;
+				};
+			}
+			classList.remove(styles['opened']);
+		}
+	}, [isOpen]);
+
+	const classes = [''];
+	classes.push(styles['container'], styles['hidden']);
+	
+	return(<Element {...props} classNameContainer={styles['container-element']}>
+		{ (props) => <Context.Provider value={{
+			selected,
+			emptyValue: emptyValue,
+			setSelect,
+			setSelected,
+			setTitle
+		}}>
+			<input {...props} type="hidden" value={selected} ref={ref}/>
+			<div className={classes.join(' ')} ref={containerRef} tabIndex={1} onBlur={close}>
+				<div className={styles['select']} onClick={open}>
+					<span className={styles['title']}>{title}</span>
+				</div>
+				<ul className={styles['select-list']}>
+					{children}
+				</ul>
+			</div>
+		</Context.Provider> }
+	</Element>);
+});
+
+export default Select;

package/src/Select/index.tsx

@@ -0,0 +1,27 @@
+import {
+	forwardRef,
+	ForwardRefExoticComponent,
+	FC,
+	RefAttributes
+} from "react";
+import {
+	default as SelectUI,
+	ISelect
+} from "./Select";
+import Option,{
+	IOption
+} from "./Option";
+
+interface StaticComponent extends ForwardRefExoticComponent<ISelect & RefAttributes<HTMLInputElement>> {
+	Option: FC<IOption>;
+};
+
+const Select: StaticComponent = {
+	...forwardRef<HTMLInputElement, ISelect>(({...args}, ref): JSX.Element => <SelectUI {...args} ref={ref}/>),
+	Option
+} as StaticComponent;
+
+export {
+	Option as SelectOption
+};
+export default Select;

package/src/Select/style.module.css

@@ -0,0 +1,93 @@
+/* Select */
+
+.container-element {
+	z-index: 1;
+}
+
+.container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-height: 25px;
+	cursor: pointer;
+}
+
+.select {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-height: 45px;
+	box-sizing: border-box;
+	padding: 10px;
+}
+
+.select::after {
+	content: "";
+	display: block;
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 10px solid #5EBED6;
+	transition: rotate 0.3s;
+}
+
+.container-element:has(input[type="hidden"]:disabled) .select::after {
+	border-top-color: #CCCCCC;
+}
+
+.container.opened > .select::after {
+	rotate: 180deg;
+}
+
+.select-list {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	max-height: 40vh;
+    max-height: 40dvh;
+	top: calc(100% - 1px);
+	left: -1px;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	background-color: #FFFFFF;
+	box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 10%);
+    border: 1px solid #CCCCCC;
+	overflow: auto;
+    border-top: 0;
+	opacity: 0;
+	visibility: hidden;
+	transform: translateY(-10%);
+	transition: transform 0.3s ease-in-out, opacity 0.3s, visibility 0.3s;
+}
+
+.container.hidden > .select-list {
+	display: none;
+}
+
+.container.opened > .select-list {
+	opacity: 1;
+	transform: translateY(0);
+	visibility: visible;
+}
+
+.title, .select-list > li {
+	font-size: 20px;
+	color: #1D1D1B;
+}
+
+.title {
+	flex: 1;
+}
+
+.select-list > li {
+	padding: 5px;
+	cursor: pointer;
+}
+
+.select-list > li:hover, .select-list > li.active {
+	background-color: #BED4DB;
+}

package/src/Spinner/style.module.css

@@ -12,11 +12,11 @@
 }
 
 .spinner::before {
-	content: '';
+	content: "";
 	display: inline-block;
 	width: 100%;
-	max-width: 100%;
-    max-height: 100%;
+	max-width: 90%;
+    max-height: 90%;
 	--border-width: clamp(0.2em, 10%, 0.5em);
 	border-radius: 50%;
 	aspect-ratio: 1/1;

package/src/index.ts

@@ -19,6 +19,10 @@ import UploadImages,{
 	IImage
 } from "./UploadImages";
 import Checkbox from "./Checkbox";
+import Progress from "./Progress";
+import Select,{
+	SelectOption
+} from "./Select";
 
 const UI = {
 	
@@ -35,7 +39,10 @@ export {
 	File,
 	Button,
 	UploadImages,
-	Checkbox
+	Checkbox,
+	Progress,
+	Select,
+	SelectOption
 };
 export type {
 	TFileData,