react-artasys-ui 0.0.1

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "react-artasys-ui",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "test": "jest",
+    "build": "webpack",
+    "copy-css": "copyfiles -u 1 src/**/*.module.css lib/"
+  },
+  "jest": {
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SergoMorello/react.artasys.ui.git"
+  },
+  "keywords": [],
+  "author": "Sergey Serov",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/SergoMorello/react.artasys.ui/issues"
+  },
+  "homepage": "https://github.com/SergoMorello/react.artasys.ui#readme",
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.20",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.16",
+    "babel-jest": "^29.5.0",
+    "copyfiles": "^2.4.1",
+    "css-loader": "^6.8.1",
+    "jest": "^29.5.0",
+    "postcss-loader": "^7.3.3",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.5.0",
+    "typescript": "^5.2.2",
+    "typescript-plugin-css-modules": "^5.0.1",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "react-hook-form": "^7.47.0"
+  },
+  "peerDependencies": {
+	"react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/src/File/File.tsx

@@ -0,0 +1,84 @@
+import {
+	useEffect,
+	useRef,
+	MouseEvent,
+	AllHTMLAttributes
+} from "react";
+
+export type TFileMime = 'image/png' | 'image/jpg' | 'image/jpeg' | 'image/gif';
+
+export type TFileData = {
+	name: string;
+	type: TFileMime;
+	size: number;
+	mime: TFileMime;
+	data: string;
+	base64?: string | null | ArrayBuffer;
+};
+
+interface TFile<T = any> extends Omit<AllHTMLAttributes<T>, 'onChange' | 'accept'> {
+	onChange?: (data: TFileData) => void;
+	multiple?: boolean;
+	accept?: TFileMime[];
+};
+
+const File = ({onChange, children, multiple, accept, ...props}: TFile) => {
+	const selector = useRef<HTMLInputElement>();
+
+	const handleChange = (e: Event) => {
+		const target = e.target as HTMLInputElement
+		if (target.files) {
+			for(const file of target.files) {
+				const reader = new FileReader();
+				reader.onload = (evt) => {
+					const data = evt.target?.result?.toString().split(';base64,');
+					const mime = (data?.[0].replace('data:', '') ?? '') as TFileMime;
+					const contentData = data?.[1] ?? '';
+					if (typeof onChange === 'function') {
+						selector.current!.value = '';
+						onChange({
+							name: file.name,
+							type: file.type as TFileMime,
+							size: file.size,
+							mime: mime,
+							data: contentData,
+							base64: evt.target?.result
+						})
+					}
+				};
+				reader.readAsDataURL(file);
+			}
+		}
+	};
+
+	const handleDialog = (e: MouseEvent<HTMLDivElement>) => {
+		selector.current!.click();
+		e.preventDefault();
+	};
+
+	const mount = () => {
+		const fileSelector = document.createElement('input');
+		fileSelector.setAttribute('type', 'file');
+		fileSelector.onchange = handleChange;
+		if (accept && accept.length > 0) {
+			fileSelector.setAttribute('accept', accept.join(','));
+		}
+		
+		if (multiple) {
+			fileSelector.setAttribute('multiple', 'multiple');
+		}
+		return fileSelector;
+	};
+
+	useEffect(() => {
+		selector.current = mount();
+		return () => {
+			selector.current?.remove();
+		}
+	}, []);
+	return(<div {...props} onClick={handleDialog}>
+		{children}
+	</div>)
+};
+
+export default File;

package/src/File/index.tsx

@@ -0,0 +1,9 @@
+import File,{
+	TFileData,
+	TFileMime
+} from "./File";
+export type {
+	TFileData,
+	TFileMime
+};
+export default File;

package/src/Form/Element/Element.tsx

@@ -0,0 +1,42 @@
+import {
+	useState,
+	useEffect,
+	AllHTMLAttributes,
+	ReactElement
+} from "react";
+import styles from "./style.module.css";
+
+export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'> {
+	children?: ((props: AllHTMLAttributes<T>) => ReactElement) | AllHTMLAttributes<T>["children"];
+	error?: string;
+	disabled?: boolean;
+	placeholder?: string;
+	styleContainer?: React.HTMLAttributes<T>["style"];
+	classNameContainer?: string;
+	beforeElement?: React.ReactElement;
+	afterElement?: React.ReactElement;
+}
+
+const Element = ({children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, ...props}: IElement) => {
+	const [currentError, setCurrentError] = useState('');
+
+	useEffect(() => {
+		setCurrentError(error ?? '');
+	},[error]);
+
+	return(<>
+		<label
+			className={
+				styles['container'] + (currentError ? ' ' + styles['error'] : '') + (disabled ? ' ' + styles['disabled'] : '') + (classNameContainer ? ' ' + classNameContainer : '')}
+			style={styleContainer}
+		>
+			{beforeElement}
+			{typeof children === 'function' ? children(props) : null}
+			{afterElement}
+			{placeholder && <span className={styles['placeholder']}>{placeholder}</span>}
+		</label>
+		{currentError && <div className={styles['error']}>{currentError}</div>}
+	</>);
+}
+
+export default Element;

package/src/Form/Element/index.tsx

@@ -0,0 +1,7 @@
+import Element,{
+	IElement
+} from "./Element";
+export type {
+	IElement
+}
+export default Element;

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

@@ -0,0 +1,91 @@
+/* Input */
+
+.container {
+	display: flex;
+    align-items: center;
+	width: 100%;
+	min-height: 50px;
+	position: relative;
+    border: 1px solid #CCCCCC;
+    border-radius: 3px;
+	z-index: 0;
+}
+
+.container > input, .container > textarea {
+	width: 100% !important;
+	min-height: 100% !important;
+	max-height: 500px !important;
+	max-height: 50dvh !important;
+	padding: 10px 5px !important;
+	margin: 0 !important;
+    font-size: 1.3em !important;
+	border: 0 !important;
+	box-sizing: border-box !important;
+	background-color: transparent !important;
+	outline: none;
+	resize: none;
+}
+
+.container.disabled {
+	background-color: #EFEFEF;
+}
+
+.container > input:-webkit-autofill,
+.container > input:-webkit-autofill:hover, 
+.container > input:-webkit-autofill:focus, 
+.container > input:-webkit-autofill:active{
+	-webkit-background-clip: text;
+}
+
+.container > input:focus {
+	outline: none;
+}
+
+.container > .placeholder {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	top: 0;
+	left: 5px;
+	color: #7A7A73;
+	font-size: 1.2em;
+	z-index: -1;
+	user-select: none;
+	transition: transform 0.3s;
+}
+
+.container > .placeholder::before {
+	content: "";
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 5px;
+	background-color: #FFFFFF;
+	z-index: -1;
+}
+
+.container > input:required ~ .placeholder::after {
+	content: "*";
+}
+
+.container > input:focus ~ .placeholder,
+.container > textarea:focus ~ .placeholder,
+.container > input:not([value=""]) ~ .placeholder,
+.container > textarea:not(:empty) ~ .placeholder,
+.container > input:not(:empty) ~ .placeholder {
+	transform: translate(-10%, -55%) scale(0.8);
+	z-index: 0;
+}
+
+.container.error {
+	border-color: #FF6D6D;
+}
+
+.container.error > .placeholder {
+	color: #FF6D6D;
+}
+
+.error {
+	color: #FF6D6D;
+}

package/src/Form/Form.tsx

@@ -0,0 +1,28 @@
+import { FormHTMLAttributes, ReactNode, FormEvent } from 'react';
+import styles from './style.module.css';
+
+import Spinner from '../Spinner';
+
+interface IForm extends FormHTMLAttributes<HTMLFormElement> {
+	children: ReactNode;
+	wait?: boolean;
+}
+
+const Form = ({children, wait, className, onSubmit, ...props}: IForm) => {
+
+	const submit = (e: FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		if (typeof onSubmit === 'function') {
+			onSubmit(e);
+		}
+	};
+
+	return(<form {...props} onSubmit={submit} className={styles['container'] + (wait ? ' ' + styles['wait'] : '') + (className ? ' ' + className : '')}>
+		{children}
+		<div className={styles['wait-indicator']}>
+			<Spinner size="large" color="contrast"/>
+		</div>
+	</form>);
+};
+
+export default Form;

package/src/Form/index.tsx

@@ -0,0 +1,8 @@
+import Form from "./Form";
+import useForm from "./useForm";
+import Element from "./Element";
+export {
+	useForm,
+	Element as FormElement
+};
+export default Form;

package/src/Form/style.module.css

@@ -0,0 +1,30 @@
+/* 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/types.ts

@@ -0,0 +1,10 @@
+import type {
+	FieldValues,
+} from "react-hook-form";
+
+export type TError<TFieldValues extends FieldValues> = {
+	errors?: {
+		[key in keyof TFieldValues]: string[];
+	};
+	message: string;
+}

package/src/Form/useForm.tsx

@@ -0,0 +1,68 @@
+import { useState, FunctionComponent } from "react";
+import type { TError } from "./types";
+import styles from "./style.module.css";
+
+import {
+	useForm as useHookForm,
+	UseFormReturn,
+	RegisterOptions,
+	UseFormRegisterReturn,
+	FieldValues,
+	UseFormRegister,
+	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>): UseFormRegisterReturn<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 errors = form?.formState.errors;
+		return {...inputRegister, onChange, error: errors?.[name]?.message?.toString()} as UseFormRegisterReturn<TFieldName>;
+	};
+
+	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

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

package/src/Input/index.tsx

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

package/src/Input/style.module.css

@@ -0,0 +1,16 @@
+.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/Spinner/Spinner.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./style.module.css";
+
+type TSpinner = {
+	size?: 'small' | 'middle' | 'large';
+	color?: 'default' | 'contrast';
+}
+
+const Spinner = ({size, color = 'default'}: TSpinner) => {
+	return(<div className={styles['spinner'] + (size ? ' ' + styles[size] : '') + (color ? ' ' + styles[color] : '') + ' ' + styles['animate']}></div>);
+};
+
+export default Spinner;

package/src/Spinner/index.tsx

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

package/src/Spinner/style.module.css

@@ -0,0 +1,74 @@
+.spinner {
+	padding-left: calc(-0.5rem / 2);
+	padding-right: calc(-0.5rem / 2);
+}
+
+.spinner::before {
+	content: '';
+	display: inline-block;
+    width: 1rem;
+    height: 1rem;
+	--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)
+	);
+	mask: var(--mask);
+	background: linear-gradient(to top, rgba(251, 163, 29, 1), rgba(251, 163, 29, 0.5)) 100% 0/50% 100% no-repeat,
+			linear-gradient(rgba(251, 163, 29, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
+}
+
+.spinner.default::before {
+	border-color: #FFFFFF;
+}
+
+.spinner.contrast::before {
+	background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)) 100% 0/50% 100% no-repeat,
+			linear-gradient(rgba(255, 255, 255, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
+}
+
+.spinner.small::before {
+	width: 1rem;
+    height: 1rem;
+}
+
+.spinner.middle::before {
+	width: 4rem;
+    height: 4rem;
+}
+
+.spinner.large::before {
+	width: 8rem;
+    height: 8rem;
+}
+
+.spinner.big::before {
+	width: 2rem;
+    height: 2rem;
+}
+
+.spinner.full {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.spinner.full::before {
+	width: 80%;
+	height: 80%;
+}
+
+.spinner.animate::before {
+    animation: button-spinner-border .85s linear infinite;
+}
+
+@keyframes button-spinner-border {
+	to{
+		transform:rotate(360deg)
+	}
+}

package/src/TextArea/TextArea.tsx

@@ -0,0 +1,57 @@
+import {
+	forwardRef,
+	useRef,
+	useEffect,
+	useState,
+	ChangeEvent,
+	useImperativeHandle
+} from "react";
+import Element,{
+	IElement
+} from "../Form/Element";
+
+interface ITextArea extends IElement<HTMLTextAreaElement> {
+	onChangeText?: (text: string) => void;
+}
+
+const TextArea = forwardRef<HTMLTextAreaElement, ITextArea>(({onChange, onInput, onChangeText, ...props}, ref) => {
+	const textareaRef = useRef<HTMLTextAreaElement>(null);
+	const [currentValue, setCurrentValue] = useState(props.value);
+
+	const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+		if (typeof onChange === 'function') {
+			onChange(e);
+		}
+
+		if (typeof onChangeText === 'function') {
+			onChangeText(e.target.value);
+		}
+	};
+
+	const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
+		if (typeof onInput === 'function') {
+			onInput(e);
+		}
+		setCurrentValue(e.target.value);
+	};
+
+	useEffect(() => {
+		if (!textareaRef.current) return;
+		
+		textareaRef.current.style.height = '0';
+		const height = textareaRef.current.scrollHeight;
+		textareaRef.current.style.height = height + 'px';
+	},[currentValue]);
+
+	useEffect(() => {
+		setCurrentValue(props.value);
+	}, [props.value]);
+
+	useImperativeHandle(ref, () => textareaRef.current as HTMLTextAreaElement);
+
+	return(<Element {...props}>
+		{ (props) => <textarea {...props} placeholder="" value={currentValue} onChange={handleChange} onInput={handleInput} ref={textareaRef}/> }
+	</Element>);
+});
+
+export default TextArea;

package/src/TextArea/index.tsx

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

package/src/index.ts

@@ -0,0 +1,28 @@
+import Form,{
+	useForm
+} from "./Form";
+import Input from "./Input";
+import TextArea from "./TextArea";
+import Spinner from "./Spinner";
+import File,{
+	TFileData,
+	TFileMime
+} from "./File";
+
+const UI = {
+	
+};
+
+export {
+	Form,
+	useForm,
+	Input,
+	TextArea,
+	Spinner,
+	File
+};
+export type {
+	TFileData,
+	TFileMime
+};
+export default UI;