react-artasys-ui 0.0.1 → 0.0.3

package/lib/Button/Button.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    wait?: boolean;
+}
+declare const Button: ({ children, wait, ...props }: IButton) => JSX.Element;
+export default Button;

package/lib/Button/index.d.ts

@@ -0,0 +1,2 @@
+import Button from "./Button";
+export default Button;

package/lib/UploadImages/Image.d.ts

@@ -0,0 +1,16 @@
+import type { TFileData } from "../File";
+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;
+}
+declare const Image: ({ onChange, onClick, onId, onRemove, ...props }: IImage) => JSX.Element;
+export default Image;

package/lib/UploadImages/UploadImages.d.ts

@@ -0,0 +1,9 @@
+import { TImageData, IImage } from "./Image";
+export interface IUploadImages {
+    onChange?: (data: TImageData) => void;
+    onChangeArray?: (data: IImage[]) => void;
+    onClick?: (data: TImageData) => void;
+    imagesArray?: TImageData[];
+}
+declare const UploadImages: ({ imagesArray, onChange, onChangeArray, onClick }: IUploadImages) => JSX.Element;
+export default UploadImages;

package/lib/UploadImages/index.d.ts

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

package/lib/index.d.ts

@@ -1,9 +1,12 @@
-import Form, { useForm } from "./Form";
+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";
 declare const UI: {};
-export { Form, useForm, Input, TextArea, Spinner, File };
-export type { TFileData, TFileMime };
+export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages };
+export type { TFileData, TFileMime, IUploadImages, IImage, TImageData, IElement };
 export default UI;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Button/Button.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "./style.module.css";
+import Spinner from "../Spinner";
+
+interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	wait?: boolean
+}
+
+const Button = ({children, wait = false, ...props}: IButton) => {
+
+	return(<div className={styles['container']}>
+		<button {...props}>{children}</button>
+		<div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
+			<Spinner size="small" color="contrast"/>
+		</div>
+	</div>)
+};
+
+export default Button;

package/src/Button/index.tsx

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

package/src/Button/style.module.css

@@ -0,0 +1,45 @@
+/* Button */
+
+.container {
+	position: relative;
+	border: 1px solid #5EBED6;
+}
+
+.container button {
+	display: block;
+	width: 100%;
+    height: 100%;
+	background-color: #BED4DB;
+	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: #BED4DB;
+	z-index: -1;
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+.container > .wait-indicator.active {
+	opacity: 1;
+	z-index: 1;
+}

package/src/UploadImages/Image.tsx

@@ -0,0 +1,86 @@
+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 size="small" color="contrast"/>
+		</span>}
+	</span>);
+};
+
+export default Image;

package/src/UploadImages/UploadImages.tsx

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

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

@@ -0,0 +1,108 @@
+/* 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,6 +1,10 @@
 import Form,{
-	useForm
+	useForm,
+	FormElement
 } from "./Form";
+import Element,{
+	IElement
+} from "./Form/Element";
 import Input from "./Input";
 import TextArea from "./TextArea";
 import Spinner from "./Spinner";
@@ -8,6 +12,12 @@ import File,{
 	TFileData,
 	TFileMime
 } from "./File";
+import Button from "./Button";
+import UploadImages,{
+	IUploadImages,
+	TImageData,
+	IImage
+} from "./UploadImages";
 
 const UI = {
 	
@@ -15,14 +25,22 @@ const UI = {
 
 export {
 	Form,
+	FormElement,
+	Element,
 	useForm,
 	Input,
 	TextArea,
 	Spinner,
-	File
+	File,
+	Button,
+	UploadImages
 };
 export type {
 	TFileData,
-	TFileMime
+	TFileMime,
+	IUploadImages,
+	IImage,
+	TImageData,
+	IElement
 };
 export default UI;

package/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   entry: {
-	index: '/src/index.ts',
+	index: '/src/index.ts'
   },
   target: 'web',
   mode: 'production', //production | development
@@ -46,7 +46,6 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
 	library: 'UI',
 	libraryTarget: 'umd',
-	chunkFilename: '[name].chunk.js',
 	auxiliaryComment: 'Arta System UI'
   },
   externals: {