react-artasys-ui 0.1.21 → 0.1.22

package/src/Select/style.module.css

@@ -1,117 +0,0 @@
-/* Select */
-
-.container-element {
-	z-index: 1;
-}
-
-.container {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	min-height: 25px;
-	outline: none;
-	cursor: pointer;
-}
-
-.select {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	min-height: 45px;
-	box-sizing: border-box;
-	padding: 10px;
-}
-
-.container-element:has(input[type="hidden"]:disabled) .arrow::after {
-	border-top-color: #CCCCCC;
-}
-
-.container.opened > .select > .arrow::after {
-	rotate: 180deg;
-}
-
-.select-list {
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-	min-width: 100%;
-	max-height: 40vh;
-	max-height: 40dvh;
-	top: calc(100% - 1px);
-	right: -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;
-	opacity: 0;
-	visibility: hidden;
-	transform: translateY(-10%);
-	transition: transform 0.3s ease-in-out, opacity 0.3s, visibility 0.3s;
-}
-
-.container.left > .select-list {
-	left: -1px;
-}
-
-.container.right > .select-list {
-	right: -1px;
-}
-
-.container.hidden > .select-list {
-	display: none;
-}
-
-.container.opened > .select-list {
-	opacity: 1;
-	transform: translateY(0);
-	visibility: visible;
-}
-
-.optgpoup {
-	padding: 0;
-	margin: 0;
-	list-style-type: none;
-}
-
-.optgpoup > li.label {
-	padding: 10px;
-	font-weight: bold;
-	cursor: default;
-}
-
-.optgpoup > li.option {
-	padding-left: 5% !important;
-}
-
-.title, .select-list li {
-	font-size: 20px;
-	color: #1D1D1B;
-	user-select: none;
-}
-
-.title {
-	flex: 1;
-}
-
-.select-list li.option {
-	display: flex;
-	justify-content: flex-start;
-	align-items: center;
-	min-height: 25px;
-	padding: 5px;
-	cursor: pointer;
-}
-
-.select-list li.option:hover, .select-list li.option.active {
-	background-color: #BED4DB;
-}
-
-.select-list li.option.disabled {
-	background-color: #EFEFEF;
-	color: #CCCCCC;
-	cursor: default;
-}

package/src/Spinner/Spinner.tsx

@@ -1,21 +0,0 @@
-import { AllHTMLAttributes } from "react";
-import styles from "./style.module.css";
-
-export type TSpinner = Omit<AllHTMLAttributes<HTMLDivElement>, 'size' | 'color'> & {
-	size?: 'small' | 'middle' | 'large';
-	color?: 'contrast' | 'orange';
-}
-
-const Spinner = ({size, color, ...props}: TSpinner) => {
-
-	const classes = ['ui-spinner'];
-
-	classes.push(styles['spinner']);
-	if (size) classes.push(styles[size], 'ui-spinner-' + size);
-	if (color) classes.push(styles[color], 'ui-spinner-' + color);
-	if (props.className) classes.push(props.className);
-
-	return(<div {...props} className={classes.join(' ')}></div>);
-};
-
-export default Spinner;

package/src/Spinner/index.tsx

@@ -1,8 +0,0 @@
-import Spinner,{
-	TSpinner
-} from "./Spinner";
-
-export type {
-	TSpinner
-};
-export default Spinner;

package/src/Spinner/style.module.css

@@ -1,65 +0,0 @@
-/* Spinner */
-
-.spinner {
-	--color-rgb: 94, 190, 214;
-	display: flex;
-    justify-content: center;
-    align-items: center;
-	width: 100%;
-    height: 100%;
-    max-width: 100px;
-    max-height: 100px;
-    aspect-ratio: 1/1;
-	padding-left: calc(-0.5rem / 2);
-	padding-right: calc(-0.5rem / 2);
-	overflow: hidden;
-}
-
-.spinner::before {
-	content: "";
-	display: inline-block;
-	width: 100%;
-	max-width: 90%;
-    max-height: 90%;
-	--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(var(--color-rgb), 1), rgba(var(--color-rgb), 0.5)) 100% 0/50% 100% no-repeat,
-			linear-gradient(rgba(var(--color-rgb), 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
-	animation: button-spinner-border .85s linear infinite;
-}
-
-.spinner.contrast {
-	--color-rgb: 255, 255, 255;
-}
-
-.spinner.orange {
-	--color-rgb: 251, 163, 29;
-}
-
-.spinner.small {
-	width: 1rem;
-    height: 1rem;
-}
-
-.spinner.middle {
-	width: 4rem;
-    height: 4rem;
-}
-
-.spinner.large {
-	width: 8rem;
-    height: 8rem;
-}
-
-@keyframes button-spinner-border {
-	to{
-		transform:rotate(360deg)
-	}
-}

package/src/TextArea/TextArea.tsx

@@ -1,57 +0,0 @@
-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, formValue, ...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 ?? formValue);
-	}, [props.value, formValue]);
-
-	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/UploadImages/Image.tsx

@@ -1,86 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import Spinner from "../Spinner";
-import type { TFileData } from "../File";
-import styles from "./style.module.css";
-
-export type TImageData = TFileData & {
-	id?: string | number;
-	setWait: (status: boolean) => void;
-	setId: (id: string | number) => void;
-};
-
-export interface IImage extends TFileData {
-	onChange?: (data: TImageData) => void;
-	onId?: (id: string | number) => void;
-	onRemove?: () => void;
-	onClick?: (data: TImageData) => void;
-	id?: string | number;
-	src?: string;
-};
-
-const Image = ({onChange, onClick, onId, onRemove, ...props}: IImage) => {
-	const { base64, src } = props;
-	const [wait, setWait] = useState(true);
-	const confirmRemove = useRef(false);
-	const currentId = useRef<string | number | undefined>();
-	const setId = (id: string | number) => {
-		currentId.current = id;
-		if (typeof onId !== 'function') return;
-		onId(id);
-	};
-
-	const handleClick = () => {
-		if (typeof onClick === 'function') {
-			onClick({
-				...props,
-				setWait,
-				setId,
-				id: currentId.current
-			});
-		}
-	};
-
-	const handleLoad = () => {
-		setWait(false);
-	};
-
-	const handleRemove = (e: React.MouseEvent<HTMLSpanElement>) => {
-		if (!e.target) return;
-		const element = (e.target as HTMLSpanElement);
-		
-		const remove = () => {
-			if (!confirmRemove.current) return;
-			confirmRemove.current = false;
-			element.blur();
-			if (typeof onRemove === 'function') {
-				onRemove();
-			}
-		};
-		remove();
-		confirmRemove.current = true;
-	};
-
-	const handleCancelRemove = () => {
-		confirmRemove.current = false;
-	};
-
-	useEffect(() => {
-		if (typeof onChange !== 'function' || src) return;
-		onChange({
-			...props,
-			setWait,
-			setId,
-			id: currentId.current
-		});
-	}, []);
-
-	return(<span className={styles['image']} onClick={handleClick}>
-		<span className={styles['close']} onClick={handleRemove} onBlur={handleCancelRemove} tabIndex={1}/>
-		<img src={src ?? base64?.toString()} onLoad={handleLoad}/>
-		{wait && <span className={styles['wait']}>
-			<Spinner/>
-		</span>}
-	</span>);
-};
-
-export default Image;

package/src/UploadImages/UploadImages.tsx

@@ -1,57 +0,0 @@
-import { useEffect, useState } from "react";
-import File,{
-	TFileData
-} from "../File";
-import styles from "./style.module.css";
-
-import Image,{
-	TImageData,
-	IImage
-} from "./Image";
-
-export interface IUploadImages {
-	onChange?: (data: TImageData) => void;
-	onChangeArray?: (data: IImage[]) => void;
-	onClick?: (data: TImageData) => void;
-	imagesArray?: TImageData[];
-};
-
-const UploadImages = ({imagesArray, onChange, onChangeArray, onClick}: IUploadImages) => {
-	const [images, setImages] = useState<IImage[]>([]);
-
-	const handleChange = (image: TFileData) => {
-		setImages((images) => [...images, {...image}]);
-	};
-
-	const handleChangeId = (image: IImage) => {
-		return (id: string | number) => {
-			setImages((images) => images.map((currentImage) => {
-				if (image === currentImage) {
-					currentImage.id = id;
-				}
-				return currentImage;
-			}));
-		}
-	};
-
-	const handleRemove = (image: IImage) => {
-		return () => setImages((images) => images.filter((currentImage) => currentImage !== image));
-	};
-
-	useEffect(() => {
-		if (typeof onChangeArray !== 'function') return;
-		onChangeArray(images);
-	}, [images]);
-
-	useEffect(() => {
-		if (!imagesArray) return;
-		setImages(imagesArray);
-	}, [imagesArray]);
-	
-	return(<div className={styles['container']}>
-		{images.map((image, index) => <Image key={(image.name + index)} {...image} onChange={onChange} onClick={onClick} onRemove={handleRemove(image)} onId={handleChangeId(image)}/>)}
-		<File onChange={handleChange} accept={['image/png']} className={styles['new']} multiple/>
-	</div>);
-};
-
-export default UploadImages;

package/src/UploadImages/index.tsx

@@ -1,13 +0,0 @@
-import UploadImages,{
-	IUploadImages
-} from "./UploadImages";
-import type { IImage } from "./Image";
-import {
-	TImageData
-} from "./Image";
-export type {
-	IUploadImages,
-	TImageData,
-	IImage
-};
-export default UploadImages;

package/src/UploadImages/style.module.css

@@ -1,108 +0,0 @@
-/* UploadImages */
-
-.container {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	flex-wrap: wrap;
-	width: 100%;
-	gap: 10px;
-}
-
-.image, .new {
-	position: relative;
-	display: flex;
-    justify-content: center;
-    align-items: center;
-	width: 80px;
-	height: 80px;
-	border: 1px solid #b1b0b0;
-	background-color: #BED4DB;
-	border-radius: 3px;
-	cursor: pointer;
-	transition: scale 0.3s, box-shadow 0.3s;
-}
-
-.image:hover, .new:hover {
-	scale: 1.03;
-	box-shadow: 0px 0px 6px 2px rgb(0 0 0 / 10%);
-}
-
-.image:active, .new:active {
-	scale: 0.99;
-	box-shadow: unset
-}
-
-.image > img {
-	width: 100%;
-	object-fit: cover;
-}
-
-/* Close */
-.image .close {
-	display: flex;
-	position: absolute;
-	top: 0;
-	right: 0;
-	justify-content: center;
-	align-items: center;
-	width: 20px;
-	height: 20px;
-	cursor: pointer;
-	opacity: 0.7;
-	transition: transform 0.3s, opacity 0.3s;
-}
-
-.image .close::before, .image .close::after {
-	content: "";
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 3px;
-    background-color: #1D1D1B;
-}
-
-.image .close::before {
-	transform: rotate(45deg);
-}
-
-.image .close::after {
-	transform: rotate(-45deg);
-}
-
-.image .close:focus {
-	background-color: red;
-	width: 100%;
-	height: 100%;
-	transition: width 0.1s, height 0.3s;
-}
-
-.image .close:focus::before, .image .close:focus::after {
-	background-color: #FFFFFF;
-}
-
-.new {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.new::after {
-	content: "+";
-	font-size: 1.9em;
-	color: #777777;
-}
-
-.wait {
-	display: flex;
-	position: absolute;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-	top: 0;
-	left: 0;
-	backdrop-filter: blur(2px);
-	background-color: #BED4DB9F;
-	z-index: 1;
-}

package/src/index.ts

@@ -1,62 +0,0 @@
-import Form,{
-	useForm,
-	FormElement
-} from "./Form";
-import Element,{
-	IElement
-} from "./Form/Element";
-import Input from "./Input";
-import TextArea from "./TextArea";
-import Spinner from "./Spinner";
-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,
-	SelectOptgroup
-} from "./Select";
-import Dropdown,{
-	DropdownItem
-} from "./Dropdown";
-
-const UI = {
-	
-};
-
-export {
-	Form,
-	FormElement,
-	Element,
-	useForm,
-	Input,
-	TextArea,
-	Spinner,
-	File,
-	Button,
-	UploadImages,
-	Checkbox,
-	Progress,
-	Select,
-	SelectOption,
-	SelectOptgroup,
-	Dropdown,
-	DropdownItem
-};
-export type {
-	TFileData,
-	TFileMime,
-	IUploadImages,
-	IImage,
-	TImageData,
-	IElement
-};
-export default UI;