react-artasys-ui 0.0.1 → 0.0.2

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,7 @@
+import { TFileData } from "../File";
+import { TUploadImageData } from "./UploadImages";
+export type TImageData = TFileData & {
+    setWait: (status: boolean) => void;
+};
+declare const Image: ({ onChange, onClick, ...props }: TUploadImageData) => JSX.Element;
+export default Image;

package/lib/UploadImages/UploadImages.d.ts

@@ -0,0 +1,9 @@
+import { TFileData } from "../File";
+import { TImageData } from "./Image";
+export interface IUploadImages {
+    onChange?: (data: TImageData) => void;
+    onClick?: (data: TImageData) => void;
+}
+export type TUploadImageData = TFileData & IUploadImages & {};
+declare const UploadImages: ({ onChange, onClick }: IUploadImages) => JSX.Element;
+export default UploadImages;

package/lib/UploadImages/index.d.ts

@@ -0,0 +1,4 @@
+import UploadImages, { TUploadImageData, IUploadImages } from "./UploadImages";
+import { TImageData } from "./Image";
+export type { TUploadImageData, IUploadImages, TImageData };
+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, { TUploadImageData, IUploadImages, TImageData } 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, TUploadImageData, IUploadImages, TImageData, IElement };
 export default UI;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-artasys-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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="middle"/>
+		</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,41 @@
+import { useEffect, useState } from "react";
+import Spinner from "../Spinner";
+import { TFileData } from "../File";
+import styles from "./style.module.css";
+
+import { TUploadImageData } from "./UploadImages";
+
+export type TImageData = TFileData & {
+	setWait: (status: boolean) => void;
+};
+
+const Image = ({onChange, onClick, ...props}: TUploadImageData) => {
+	const { base64 } = props;
+	const [wait, setWait] = useState(true);
+
+	const handleClick = () => {
+		if (typeof onClick === 'function') {
+			onClick({
+				...props,
+				setWait
+			});
+		}
+	};
+
+	useEffect(() => {
+		if (typeof onChange !== 'function') return;
+		onChange({
+			...props,
+			setWait
+		});
+	}, []);
+
+	return(<span className={styles['image']} onClick={handleClick}>
+		<img src={base64 as string}/>
+		{wait && <span className={styles['wait']}>
+			<Spinner size="small" color="contrast"/>
+		</span>}
+	</span>);
+};
+
+export default Image;

package/src/UploadImages/UploadImages.tsx

@@ -0,0 +1,31 @@
+import { useState } from "react";
+import File,{
+	TFileData
+} from "../File";
+import styles from "./style.module.css";
+
+import Image,{
+	TImageData
+} from "./Image";
+
+export interface IUploadImages {
+	onChange?: (data: TImageData) => void;
+	onClick?: (data: TImageData) => void;
+};
+
+export type TUploadImageData = TFileData & IUploadImages & {};
+
+const UploadImages = ({onChange, onClick}: IUploadImages) => {
+	const [images, setImages] = useState<TUploadImageData[]>([]);
+
+	const handleChange = (image: TFileData) => {
+		setImages((images) => [...images, {...image, onChange, onClick}]);
+	};
+	
+	return(<div className={styles['container']}>
+		{images.map((image, index) => <Image key={(image.name + index)} {...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,{
+	TUploadImageData,
+	IUploadImages
+} from "./UploadImages";
+import {
+	TImageData
+} from "./Image";
+export type {
+	TUploadImageData,
+	IUploadImages,
+	TImageData
+};
+export default UploadImages;

package/src/UploadImages/style.module.css

@@ -0,0 +1,65 @@
+/* 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;
+}
+
+.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,{
+	TUploadImageData,
+	IUploadImages,
+	TImageData
+} 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,
+	TUploadImageData,
+	IUploadImages,
+	TImageData,
+	IElement
 };
 export default UI;