react-artasys-ui 0.1.20 → 0.1.22

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

@@ -1,119 +0,0 @@
-/* Input */
-
-.container {
-	display: flex;
-    align-items: center;
-	width: 100%;
-	position: relative;
-    border: 1px solid #CCCCCC;
-    border-radius: 3px;
-	z-index: 0;
-}
-
-.container.hidden {
-	border: 0;
-}
-
-.element {
-	align-self: stretch;
-	width: 100%;
-}
-
-.element > input, .element > textarea {
-	width: 100%;
-	height: 100%;
-	min-height: 45px;
-	max-height: 500px;
-	max-height: 50dvh;
-	margin: 0;
-	padding: 10px;
-    font-size: 20px;
-	border: 0;
-	box-sizing: border-box;
-	background-color: transparent;
-	outline: none;
-	resize: none;
-}
-
-.container.disabled {
-	background-color: #EFEFEF;
-}
-
-.element > input:-webkit-autofill,
-.element > input:-webkit-autofill:hover, 
-.element > input:-webkit-autofill:focus, 
-.element > input:-webkit-autofill:active{
-	-webkit-background-clip: text;
-}
-
-.element > input:focus {
-	outline: none;
-}
-
-.element > .placeholder {
-	position: absolute;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	top: 0;
-	margin-left: 5px;
-	height: 100%;
-	color: #7A7A73;
-	font-size: 1.2rem;
-	z-index: -1;
-	user-select: none;
-	transition: transform 0.3s;
-}
-
-.element > textarea ~ .placeholder {
-	max-height: 2em;
-}
-
-.element > .placeholder::before {
-	content: "";
-	position: absolute;
-	display: block;
-	width: 100%;
-	height: 5px;
-	background-color: #FFFFFF;
-	z-index: -1;
-}
-
-.element > input:required ~ .placeholder::after {
-	content: "*";
-}
-
-/* Date */
-.element > input[type="date"]::-webkit-calendar-picker-indicator {
-	cursor: pointer;
-	border-radius: 4px;
-	margin-right: 2px;
-	opacity: 0.7;
-	filter: invert(0.8);
-}
-
-.element > input[type="date"]::-webkit-calendar-picker-indicator:hover {
-	opacity: 1
-}
-
-.element > input[type="date"] ~ .placeholder,
-.element > input:focus ~ .placeholder,
-.element > textarea:focus ~ .placeholder,
-.element > input:not([value=""]) ~ .placeholder,
-.element > textarea:not(:empty) ~ .placeholder,
-.element > input:not(:empty) ~ .placeholder {
-	transform: translate(-10%, -50%) scale(0.8);
-	z-index: 0;
-}
-
-.container.error {
-	border-color: #FF6D6D;
-}
-
-.container.error .placeholder {
-	color: #FF6D6D;
-}
-
-.error {
-	color: #FF6D6D;
-}

package/src/Form/Form.tsx

@@ -1,40 +0,0 @@
-import { FormHTMLAttributes, ReactNode, FormEvent } from 'react';
-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, progress, progressRadius = true, className, spinnerColor, onSubmit, ...props}: IForm) => {
-
-	const submit = (e: FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		if (typeof onSubmit === 'function') {
-			onSubmit(e);
-		}
-	};
-
-	const classes = [];
-
-	classes.push(styles['container']);
-	if (wait) classes.push(styles['wait']);
-	if (className) classes.push(className);
-
-	return(<form {...props} onSubmit={submit} className={classes.join(' ')}>
-		{children}
-		<div className={styles['wait-indicator']}>
-			{typeof progress === 'number' ? <Progress radius={progressRadius} value={progress}/> : <Spinner color={spinnerColor}/>}
-		</div>
-	</form>);
-};
-
-export default Form;

package/src/Form/style.module.css

@@ -1,30 +0,0 @@
-/* Form */
-
-.container {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 10px;
-}
-
-.container > .wait-indicator {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: #FFFFFF9F;
-	backdrop-filter: blur(2px);
-	z-index: -1;
-	opacity: 0;
-	transition: opacity 0.3s;
-}
-
-.container.wait > .wait-indicator {
-	z-index: 1;
-	opacity: 1;
-}

package/src/Form/useForm.tsx

@@ -1,76 +0,0 @@
-import { useState, FunctionComponent } from "react";
-import type { TError, TUseFormRegisterReturn } from "./types";
-import styles from "./style.module.css";
-
-import {
-	useForm as useHookForm,
-	UseFormReturn,
-	RegisterOptions,
-	UseFormRegisterReturn,
-	FieldValues,
-	SetValueConfig,
-	FieldPathValue,
-	FieldPath
-} from "react-hook-form";
-
-type TuseErrors<TFieldValues extends FieldValues = FieldValues> = UseFormReturn<TFieldValues> & {
-	GlobalError: FunctionComponent;
-	setErrors: (e: TError<TFieldValues>) => void;
-};
-
-const useForm = <TFieldValues extends FieldValues = FieldValues>(): TuseErrors<TFieldValues> => {
-	const [globalError, setGlobalError] = useState<TError<TFieldValues> | null>();
-
-	const form = useHookForm<TFieldValues>({
-		reValidateMode: 'onChange'
-	});
-
-	const register = <TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(name: TFieldName, options?: RegisterOptions<TFieldValues, TFieldName>): TUseFormRegisterReturn<TFieldValues, TFieldName> => {
-		const inputRegister = form.register<TFieldName>(name, options);
-		const onChange = (e: {
-			target: any;
-			type?: any;
-		}) => {
-			setGlobalError(null);
-			form.clearErrors(name);
-			return inputRegister.onChange(e);
-		};
-		const formValue = form.watch(name);
-		const errors = form?.formState.errors;
-
-		return {
-			...inputRegister,
-			onChange,
-			formValue,
-			error: errors?.[name]?.message?.toString()
-		};
-	};
-
-	const setErrors = (e: TError<TFieldValues>) => {
-		if (e.errors) {
-			Object.keys(e.errors).forEach((field) => form.setError(field as FieldPath<TFieldValues>, {message: e.errors?.[field]?.[0]}));
-		}else{
-			setGlobalError(e);
-		}
-	};
-
-	const GlobalError = () => (<>{(globalError && !globalError.errors) && <div className={styles['global-error']}>{globalError.message}</div>}</>);
-
-	return {
-		...form,
-		register,
-		GlobalError,
-		setErrors
-	};
-};
-
-export const validate = {
-	email: {
-		pattern: {
-			value: /\S+@\S+\.\S+/,
-			message: "Неверный адрес электронной почты",
-		}
-	}
-};
-
-export default useForm;

package/src/Input/Input.tsx

@@ -1,49 +0,0 @@
-import {
-	forwardRef,
-	useState,
-	ChangeEvent,
-	useEffect,
-	type HTMLInputTypeAttribute
-} from "react";
-import Element,{
-	IElement
-} from "../Form/Element";
-
-
-interface IInput extends IElement<HTMLInputElement> {
-	onChangeText?: (text: string) => void;
-	type?: HTMLInputTypeAttribute;
-}
-
-const Input = forwardRef<HTMLInputElement, IInput>(({onChange, onInput, onChangeText, formValue, ...props}, ref) => {
-	const [currentValue, setCurrentValue] = useState('');
-
-	const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-		if (typeof onChange === 'function') {
-			onChange(e);
-		}
-
-		if (typeof onChangeText === 'function') {
-			onChangeText(e.target.value);
-		}
-	};
-
-	const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
-		if (props.disabled) return;
-		if (typeof onInput === 'function') {
-			onInput(e);
-		}
-		setCurrentValue(e.target.value);
-	};
-
-	useEffect(() => {
-		const value = props.value ?? formValue;
-		setCurrentValue(value ? String(value) : '');
-	}, [props.value, formValue]);
-
-	return(<Element {...props}>
-		{ (props) => <input {...props} placeholder="" onChange={handleChange} value={currentValue} onInput={handleInput} ref={ref}/> }
-	</Element>);
-});
-
-export default Input;

package/src/Input/style.module.css

@@ -1,16 +0,0 @@
-.container > input {
-	width: calc(100% - 10px);
-    margin: 15px 0 15px 0;
-    font-size: 18px;
-    padding: 10px 0 10px 15px;
-    border: 2px solid #E2E8F2;
-    resize: none;
-    outline: none;
-    transition: 0.2s;
-    -webkit-transition: 0.2s;
-}
-
-.container > input[type="text"]:focus {
-	border: 2px solid #FBA31D;
-	border-bottom: 2px solid #000;
-}

package/src/Progress/Progress.tsx

@@ -1,28 +0,0 @@
-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/style.module.css

@@ -1,72 +0,0 @@
-/* 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/Optgroup.tsx

@@ -1,19 +0,0 @@
-import styles from "./style.module.css";
-import type { TOptionElement } from "./Select";
-
-export interface IOptgroup {
-	children?: TOptionElement;
-	label?: string | React.ReactElement;
-};
-
-const Optgroup = ({children, label}: IOptgroup) => {
-
-	return(<li>
-		<ul className={styles['optgpoup']}>
-			{label && <li className={styles['label']}>{label}</li>}
-			{children}
-		</ul>
-	</li>);
-};
-
-export default Optgroup;

package/src/Select/Option.tsx

@@ -1,47 +0,0 @@
-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;
-	disabled?: boolean;
-	children?: string | React.ReactElement;
-};
-
-const Option = ({children, value, disabled, hidden, onClick, ...props}: IOption) => {
-	const context = useContext(Context);
-
-	const handleClick = (e: MouseEvent<HTMLLIElement>) => {
-		if (typeof value === 'undefined' || disabled) return;
-		context.setSelect(value);
-		if (typeof onClick === 'function') {
-			onClick(e);
-		}
-	};
-
-	useEffect(() => {
-		if (children && (value === context.selected || !context.emptyValue.current)) {
-			context.setTitle(children);
-			if (!context.emptyValue.current && value) {
-				context.setSelected(value);
-			}
-			context.emptyValue.current = true;
-		}
-	}, [context.selected]);
-	
-	if (hidden) return(null);
-
-	const classes = ['ui-select-option'];
-	classes.push(styles['option']);
-	if (context.selected === value) classes.push(styles['active'], 'active');
-	if (disabled) classes.push(styles['disabled'], 'disabled');
-	
-	return(<li {...props} onClick={handleClick} className={classes.join(' ')}>{children}</li>);
-};
-
-export default Option;

package/src/Select/Select.tsx

@@ -1,143 +0,0 @@
-import {
-	forwardRef,
-	createContext,
-	useState,
-	useEffect,
-	useRef,
-	ChangeEvent,
-	useImperativeHandle,
-	FunctionComponentElement,
-	ReactNode
-} from "react";
-import Element,{
-	IElement
-} from "../Form/Element";
-import type { IOptgroup } from "./Optgroup";
-import type { IOption } from "./Option";
-import Arrow from "../Components/Arrow";
-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: IOption['children']) => {},
-});
-
-export type TOptionElement = FunctionComponentElement<IOption> | FunctionComponentElement<IOption>[] | ReactNode;
-
-export interface ISelect extends Omit<IElement, 'children'> {
-	children?: TOptionElement | FunctionComponentElement<IOptgroup> | FunctionComponentElement<IOptgroup>[];
-	onChangeSelect?: (value: string) => void;
-};
-
-const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChangeSelect, value, formValue, ...props}, ref) => {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const inputRef = useRef<HTMLInputElement>(null);
-	const emptyValue = useRef(false);
-
-	const [isOpen, setOpen] = useState(false);
-	const [selected, setSelected] = useState('');
-	const [title, setTitle] = useState<IOption['children']>();
-
-	const open = () => {
-		if (props.disabled) return;
-		setOpen(true);
-	};
-
-	const close = () => {
-		setOpen(false);
-	};
-
-	const handleClick = () => {
-		isOpen ? close() : open();
-	};
-
-	const triggerNativeEvent = (value: string) => {
-		const nativeInputValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
-		nativeInputValueSetter?.call(inputRef.current, value);
-
-		const event = new Event('input', { bubbles: true});
-		inputRef.current!.dispatchEvent(event);
-	};
-
-	const setSelect = (val: string) => {
-		if (typeof onChangeSelect === 'function') {
-			onChangeSelect(val);
-		}
-		if (typeof value === 'undefined') {
-			setSelected(val);
-		}
-		close();
-	};
-
-	const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
-		if (props.disabled) return;
-		if (typeof props.onInput === 'function') {
-			props.onInput(e);
-		}
-
-		if (typeof props.onChange === 'function') {
-			props.onChange(e);
-		}
-		setSelected(e.target.value);
-	};
-
-	useEffect(() => {
-		if (!selected) return;
-		triggerNativeEvent(selected);
-	}, [selected]);
-	
-	useEffect(() => {
-		setSelected(String(value ?? formValue));
-	}, [value, formValue]);
-
-	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]);
-
-	useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);
-
-	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} onInput={handleInput} ref={inputRef}/>
-			<div className={classes.join(' ')} ref={containerRef} tabIndex={1} onBlur={close}>
-				<div className={styles['select']} onClick={handleClick}>
-					<span className={styles['title']}>{title}</span>
-					<Arrow className={styles['arrow']}/>
-				</div>
-				<ul className={styles['select-list']}>
-					{children}
-				</ul>
-			</div>
-		</Context.Provider> }
-	</Element>);
-});
-
-export default Select;

package/src/Select/index.tsx

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