react-artasys-ui 0.1.20 → 0.1.22

package/src/Button/style.module.css

@@ -1,45 +0,0 @@
-/* Button */
-
-.container {
-	position: relative;
-	border: 1px solid #5EBED6;
-	background-color: #BED4DB;
-}
-
-.container button {
-	display: block;
-	width: 100%;
-    height: 100%;
-	border: 0;
-    padding: 5px 8px;
-    font-size: 1.1em;
-	color: #1D1D1B;
-	cursor: pointer;
-	border-radius: 0.1em;
-	transition: background-color 0.3s;
-}
-
-.container button:hover {
-	background-color: #ADCED8;
-	color: #1D1D1B;
-}
-
-.container > .wait-indicator {
-	position: absolute;
-	display: flex;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	justify-content: center;
-	align-items: center;
-	background-color: inherit;
-	z-index: -1;
-	opacity: 0;
-	transition: opacity 0.3s;
-}
-
-.container > .wait-indicator.active {
-	opacity: 1;
-	z-index: 1;
-}

package/src/Checkbox/Checkbox.tsx

@@ -1,22 +0,0 @@
-import { forwardRef } from "react";
-import Element,{
-	IElement
-} from "../Form/Element";
-import styles from "./style.module.css";
-
-interface ICheckbox extends IElement<HTMLInputElement> {
-	type?: 'checkbox' | 'radio';
-}
-
-const Checkbox = forwardRef<HTMLInputElement, ICheckbox>(({type = 'checkbox', hiddenContainer = true, placeholder, ...props}, ref) => {
-
-	return(<Element {...props} hiddenContainer={hiddenContainer}>
-		{(props) => <div className={'ui-checkbox-container ' + styles['container']}>
-				<input {...props} className={'ui-checkbox' + (props.className ? ' ' + props.className : '')} type={type} ref={ref}/>
-				<span className={'ui-checkbox-indicator ' + styles['indicator']}/>
-				<span className={'ui-checkbox-text ' + styles['text']}>{placeholder}</span>
-			</div>}
-	</Element>);
-});
-
-export default Checkbox;

package/src/Checkbox/style.module.css

@@ -1,74 +0,0 @@
-/* Checkbox */
-
-.container {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	align-items: center;
-	height: 100%;
-	cursor: pointer;
-	user-select: none;
-	gap: 10px;
-}
-
-.container > input {
-	display: none;
-}
-
-.text {
-	color: #1D1D1B;
-	font-size: 1.1em;
-}
-
-.indicator {
-	display: flex;
-	position: relative;
-	justify-content: center;
-	align-items: center;
-	border: 1px solid #5EBED6;
-	background-color: #BED4DB;
-	width: 20px;
-	height: 20px;
-	aspect-ratio: 1/1;
-}
-
-.container > input[type="radio"] ~ .indicator {
-	border-radius: 50%;
-}
-
-.container:hover > .indicator {
-	background-color: #5EBED65F;
-}
-
-.indicator::before {
-	content: "";
-	position: absolute;
-	top: 0;
-	width: 35%;
-    height: 70%;
-    border: solid #1D1D1B;
-    border-width: 0 2px 2px 0;
-    transform: rotate( 45deg);
-	scale: 0;
-	opacity: 0;
-	transition: scale 0.1s, opacity 0.1s;
-}
-
-.container > input[type="radio"] ~ .indicator::before {
-	border-width: 0;
-	border-radius: inherit;
-	top: unset;
-	transform: unset;
-	width: 70%;
-	height: 70%;
-	background-color: #1D1D1B;
-}
-
-.container > input:checked ~ .indicator {
-	background-color: #5EBED65F;
-}
-
-.container > input:checked ~ .indicator::before {
-	scale: 1;
-	opacity: 1;
-}

package/src/Components/Arrow/Arrow.tsx

@@ -1,18 +0,0 @@
-import { AllHTMLAttributes } from "react";
-import styles from "./style.module.css";
-
-interface IArrow extends AllHTMLAttributes<HTMLDivElement> {
-	direction?: 'up' | 'down' | 'left' | 'right';
-};
-
-const Arrow = ({className, direction = 'down', ...props}: IArrow) => {
-
-	const classes = ['ui-component-arrow'];
-	classes.push(styles['container']);
-	if (direction) classes.push(styles[direction]);
-	if (className) classes.push(className);
-
-	return(<div {...props} className={classes.join(' ')}/>);
-};
-
-export default Arrow;

package/src/Components/Arrow/style.module.css

@@ -1,40 +0,0 @@
-/* Arrow Component */
-
-.container {
-	--ui-arrow-size: 10px;
-	--ui-arrow-color: #5EBED6;
-	--ui-arrow-max: var(--ui-arrow-size) solid var(--ui-arrow-color);
-	--ui-arrow-min: calc(var(--ui-arrow-size) / 2) solid transparent;
-}
-
-.container::after {
-	content: "";
-	display: block;
-	width: 0;
-	height: 0;
-	transition: rotate 0.1s;
-}
-
-.container.down::after {
-	border-left: var(--ui-arrow-min);
-	border-right: var(--ui-arrow-min);
-	border-top: var(--ui-arrow-max);
-}
-
-.container.up::after {
-	border-left: var(--ui-arrow-min);
-	border-right: var(--ui-arrow-min);
-	border-bottom: var(--ui-arrow-max);
-}
-
-.container.left::after {
-	border-top: var(--ui-arrow-min);
-	border-right: var(--ui-arrow-max);
-	border-bottom: var(--ui-arrow-min);
-}
-
-.container.right::after {
-	border-top: var(--ui-arrow-min);
-	border-left: var(--ui-arrow-max);
-	border-bottom: var(--ui-arrow-min);
-}

package/src/Dropdown/Dropdown.tsx

@@ -1,113 +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;
-	items?: FunctionComponentElement<IItem> | FunctionComponentElement<IItem>[];
-	disabled?: boolean;
-	enableRerenderItems?: boolean;
-	onShow?: () => void;
-	onHide?: () => void;
-};
-
-const Dropdown = ({children, className, items, 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 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;