react-artasys-ui 0.1.21 → 0.1.23

package/src/Dropdown/Dropdown.tsx

@@ -1,114 +0,0 @@
-import {
-	AllHTMLAttributes,
-	useRef,
-	useState,
-	FunctionComponentElement,
-	useEffect,
-	createContext,
-	Children,
-	type FocusEvent
-} from "react";
-import styles from "./style.module.css";
-import Arrow from "../Components/Arrow";
-import type {
-	IItem,
-	TChildrenAction
-} from "./Item";
-import Items from "./Items";
-
-export const Context = createContext<TChildrenAction>({
-	close: () => {}
-});
-
-export interface IDropdown extends AllHTMLAttributes<HTMLDivElement> {
-	direction?: 'down' | 'up';
-	position?: 'left' | 'right';
-	split?: boolean;
-	hover?: boolean;
-	arrow?: boolean;
-	items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
-	disabled?: boolean;
-	enableRerenderItems?: boolean;
-	onShow?: () => void;
-	onHide?: () => void;
-};
-
-const Dropdown = ({children, className, items, arrow = true, direction = 'down', position = 'right', split = false, disabled, hover = false, enableRerenderItems = true, onShow, onHide, ...props}: IDropdown) => {
-	const containerRef = useRef<HTMLDivElement>(null);
-	const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();
-	const [isOpen, setOpen] = useState(false);
-
-	const close = () => {
-		setOpen(false);
-	};
-
-	const toggle = () => {
-		setOpen((isOpen) => {
-			if (disabled) return false;
-			return !isOpen;
-		});
-	};
-
-	const handleClickArrow = () => {
-		toggle();
-	};
-
-	const handleClick = () => {
-		if (hoverTimeout.current) return;
-		if (!split || hover) toggle();
-	};
-
-	const handleBlur = (e: FocusEvent) => {
-		if (e.currentTarget.contains(e.relatedTarget)) return;
-		close();
-	};
-
-	const handleMouseEnter = () => {
-		if (!hover || isOpen) return;
-		hoverTimeout.current = setTimeout(toggle, 50);
-	};
-
-	const handleMouseOut = () => {
-		if (hoverTimeout.current) {
-			clearTimeout(hoverTimeout.current);
-		}
-	};
-
-	useEffect(() => {
-		const element = containerRef.current;
-		const classList = element?.classList;
-		if (isOpen) {
-			classList?.add(styles['opened']);
-			element?.focus();
-			if (typeof onShow === 'function') {
-				onShow();
-			}
-		}else{
-			classList?.remove(styles['opened']);
-			if (typeof onHide === 'function') {
-				onHide();
-			}
-		}
-	}, [isOpen]);
-
-	const classes = ['ui-dropdown'];
-	classes.push(styles['container']);
-	if (className) classes.push(className);
-	if (direction) classes.push(styles[direction]);
-	if (position) classes.push(styles[position]);
-
-	return(<Context.Provider value={{
-		close
-	}}>
-		<div {...props} className={classes.join(' ')} ref={containerRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseOut} tabIndex={1} onBlur={handleBlur}>
-			{(position === 'left' && !disabled) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
-			<div onClick={handleClick} className={'ui-dropdown-block' + (isOpen ? ' ' + styles['hide'] : '')}>
-				{children}
-			</div>
-			{(position === 'right' && !disabled && arrow) && <Arrow className={styles['arrow']} onClick={handleClickArrow}/>}
-			<Items isOpen={isOpen} disabled={disabled} enableRerenderItems={enableRerenderItems} items={items}/>
-		</div>
-	</Context.Provider>);
-};
-
-export default Dropdown;

package/src/Dropdown/Item.tsx

@@ -1,42 +0,0 @@
-import {
-	useContext,
-	AllHTMLAttributes,
-	ReactElement,
-	MouseEvent
-} from "react";
-import styles from "./style.module.css";
-import { Context } from "./Dropdown";
-
-export type TChildrenAction = {
-	close: () => void;
-};
-
-export interface IItem extends Omit<AllHTMLAttributes<HTMLLIElement>, 'children'> {
-	children?: ((action: TChildrenAction) => ReactElement) | string | ReactElement;
-	autoClose?: boolean;
-	active?: boolean;
-};
-
-const Item = ({children, onClick, autoClose = true, active, className, ...props}: IItem) => {
-	const context = useContext(Context);
-
-	const handleClick = (e: MouseEvent<HTMLLIElement>) => {
-		if (typeof onClick === 'function') {
-			onClick(e);
-		}
-		if (autoClose) {
-			context.close();
-		}
-	};
-
-	const classes = ['ui-dropdown-item'];
-	classes.push(styles['item']);
-	if (active) classes.push(styles['active'], 'active');
-	if (className) classes.push(className);
-
-	return(<li {...props} onClick={handleClick} className={classes.join(' ')}>
-		{typeof children === 'function' ? children(context) : children}
-	</li>);
-};
-
-export default Item;

package/src/Dropdown/Items.tsx

@@ -1,38 +0,0 @@
-import styles from "./style.module.css";
-import type { IDropdown } from "./Dropdown";
-import { useEffect, useMemo, useRef, useState } from "react";
-
-interface IItems extends Pick<IDropdown, 'items' | 'disabled' | 'enableRerenderItems'> {
-	isOpen: boolean;
-};
-
-const Items = ({items, isOpen, enableRerenderItems, disabled}: IItems) => {
-	const listRef = useRef<HTMLUListElement>(null);
-
-	const renderItems = useMemo(() => {
-		if (enableRerenderItems) {
-			return isOpen ? items : null;
-		}
-		return items;
-	}, [enableRerenderItems, items, isOpen]);
-
-	useEffect(() => {
-
-		if (!listRef.current) return;
-		const screenWidth = window.innerWidth;
-		const element = listRef.current.getBoundingClientRect();
-		
-		
-		// console.log(element.left)
-		if (element.left <= 0) {
-			
-			// listRef.current.style.transform = 'translateX(' + Math.abs(element.left) + 'px)';
-		}
-	},[isOpen]);
-
-	if (disabled) return null;
-
-	return(<ul className={styles['dropdown-list']} children={renderItems} ref={listRef}/>);
-};
-
-export default Items;

package/src/Dropdown/index.tsx

@@ -1,28 +0,0 @@
-import {
-	forwardRef,
-	RefAttributes,
-	ForwardRefExoticComponent,
-	FC
-} from "react";
-import {
-	default as DropdownUI,
-	IDropdown
-} from "./Dropdown";
-import Item,{
-	IItem
-} from "./Item";
-
-interface StaticComponent extends ForwardRefExoticComponent<IDropdown & RefAttributes<HTMLInputElement>> {
-	Item: FC<IItem>;
-};
-
-const Dropdown: StaticComponent = {
-	...forwardRef<HTMLInputElement, IDropdown>(({...args}, ref): JSX.Element => <DropdownUI {...args}/>),
-	Item
-} as StaticComponent;
-
-export {
-	Item as DropdownItem
-};
-
-export default Dropdown;

package/src/Dropdown/style.module.css

@@ -1,89 +0,0 @@
-/* Dropdown */
-
-.container {
-	position: relative;
-	display: inline-flex;
-	flex-direction: row;
-	align-items: center;
-	outline: none;
-	cursor: pointer;
-}
-
-.container > :global(.ui-dropdown-block) {
-	position: relative;
-}
-
-.container > :global(.ui-dropdown-block)::after {
-	content: "";
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.container > :global(.ui-dropdown-block).hide::after {
-	display: none;
-}
-
-.arrow {
-	padding: 5px;
-}
-
-.dropdown-list {
-	display: flex;
-	position: absolute;
-	padding: 0;
-	margin: 0;
-	flex-direction: column;
-	background-color: #FFFFFF;
-	border-radius: 2px;
-	list-style-type: none;
-	box-shadow: 0px 0px 9px 2px rgb(0 0 0 / 10%);
-	opacity: 0;
-	transform: translateY(-10%);
-	visibility: hidden;
-	z-index: 1;
-	transition: opacity 0.3s, visibility 0.3s, transform 0.3s ease;
-}
-
-.container.down > .dropdown-list {
-	top: 100%;
-}
-
-.container.up > .dropdown-list {
-	bottom: 100%;
-}
-
-.container.left > .dropdown-list {
-	left: 0;
-}
-
-.container.right > .dropdown-list {
-	right: 0;
-}
-
-.dropdown-list > li.item {
-	padding: 7px;
-	font-size: 18px;
-	font-weight: normal;
-	color: #1D1D1B;
-	white-space: nowrap;
-    width: 100%;
-	box-sizing: border-box;
-}
-
-.container.opened > .dropdown-list {
-	opacity: 1;
-	visibility: visible;
-	transform: translateY(0);
-}
-
-.container.opened > .arrow::after {
-	rotate: 180deg;
-}
-
-.dropdown-list > li.item:hover, .dropdown-list > li.item:has(:global(a.active)) {
-	background-color: #BED4DB;
-	border-radius: inherit;
-}

package/src/File/File.tsx

@@ -1,85 +0,0 @@
-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>) => {
-		if (props.disabled) return;
-		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

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

package/src/Form/Element/Element.tsx

@@ -1,54 +0,0 @@
-import {
-	useState,
-	useEffect,
-	AllHTMLAttributes,
-	ReactElement,
-	cloneElement
-} 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;
-	formValue?: string | number;
-	disabled?: boolean;
-	placeholder?: string;
-	styleContainer?: React.HTMLAttributes<T>["style"];
-	classNameContainer?: string;
-	beforeElement?: React.ReactElement;
-	afterElement?: React.ReactElement;
-	hiddenContainer?: boolean;
-}
-
-const Element = ({children, beforeElement, afterElement, error, placeholder, styleContainer, classNameContainer, hiddenContainer, formValue, ...props}: IElement) => {
-	const [currentError, setCurrentError] = useState('');
-
-	useEffect(() => {
-		setCurrentError(error ?? '');
-	},[error]);
-
-	const classes = ['ui-form-element-container'];
-
-	classes.push(styles['container']);
-	if (currentError) classes.push(styles['error']);
-	if (props.disabled) classes.push(styles['disabled']);
-	if (hiddenContainer) classes.push(styles['hidden']);
-	if (classNameContainer) classes.push(classNameContainer);
-
-	return(<>
-		<label
-			className={classes.join(' ')}
-			style={styleContainer}
-		>
-			{beforeElement ? cloneElement(beforeElement, {key: 'ui-before-element'}) : null}
-			<div className={'ui-form-element ' + styles['element']}>
-				{typeof children === 'function' ? children(props) : null}
-				{placeholder && <span className={'ui-form-element-placeholder ' + styles['placeholder']}>{placeholder}</span>}
-			</div>
-			{afterElement ? cloneElement(afterElement, {key: 'ui-after-element'}) : null}
-		</label>
-		{currentError && <div className={'ui-form-error ' + styles['error']}>{currentError}</div>}
-	</>);
-}
-
-export default Element;

package/src/Form/Element/index.tsx

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

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/index.tsx

@@ -1,8 +0,0 @@
-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

@@ -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/types.ts

@@ -1,17 +0,0 @@
-import type {
-	FieldValues,
-	UseFormRegisterReturn,
-	FieldPath
-} from "react-hook-form";
-
-export type TUseFormRegisterReturn<TFieldValues extends FieldValues = FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = UseFormRegisterReturn<TFieldName> & {
-	error?: string;
-	formValue: TFieldValues;
-};
-
-export type TError<TFieldValues extends FieldValues> = {
-	errors?: {
-		[key in keyof TFieldValues]: string[];
-	};
-	message: string;
-}