react-artasys-ui 0.0.5 → 0.0.7

package/lib/Button/Button.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
+import { TSpinner } from "../Spinner";
 interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     wait?: boolean;
     classNameContainer?: string;
     styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
+    spinnerColor?: TSpinner['color'];
 }
-declare const Button: ({ children, className, classNameContainer, styleContainer, wait, ...props }: IButton) => JSX.Element;
+declare const Button: ({ children, className, classNameContainer, styleContainer, spinnerColor, wait, ...props }: IButton) => JSX.Element;
 export default Button;

package/lib/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IElement } from "../Form/Element";
+interface ICheckbox extends IElement<HTMLInputElement> {
+    type?: 'checkbox' | 'radio';
+}
+declare const Checkbox: import("react").ForwardRefExoticComponent<ICheckbox & import("react").RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/lib/Checkbox/index.d.ts

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

package/lib/Form/Element/Element.d.ts

@@ -8,6 +8,7 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
     classNameContainer?: string;
     beforeElement?: React.ReactElement;
     afterElement?: React.ReactElement;
+    hiddenContainer?: boolean;
 }
-declare const Element: ({ children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, ...props }: IElement) => JSX.Element;
+declare const Element: ({ children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props }: IElement) => JSX.Element;
 export default Element;

package/lib/index.d.ts

@@ -6,7 +6,8 @@ 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";
 declare const UI: {};
-export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages };
+export { Form, FormElement, Element, useForm, Input, TextArea, Spinner, File, Button, UploadImages, Checkbox };
 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.5",
+  "version": "0.0.7",
   "description": "",
   "main": "dist/index.js",
   "types": "lib/index.d.ts",

package/src/Button/Button.tsx

@@ -1,19 +1,27 @@
 import React from "react";
 import styles from "./style.module.css";
-import Spinner from "../Spinner";
+import Spinner,{
+	TSpinner
+} from "../Spinner";
 
 interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	wait?: boolean;
 	classNameContainer?: string;
 	styleContainer?: React.HTMLAttributes<HTMLDivElement>['style'];
+	spinnerColor?: TSpinner['color'];
 }
 
-const Button = ({children, className, classNameContainer, styleContainer, wait = false, ...props}: IButton) => {
+const Button = ({children, className, classNameContainer, styleContainer, spinnerColor = 'contrast', wait = false, ...props}: IButton) => {
 
-	return(<div className={styles['container'] + (classNameContainer ? ' ' + classNameContainer : '')} style={styleContainer}>
-		<button {...props} className={className}>{children}</button>
-		<div className={styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
-			<Spinner size="small" color="contrast"/>
+	const classes = ['ui-button-container'];
+
+	classes.push(styles['container']);
+	if (classNameContainer) classes.push(classNameContainer);
+
+	return(<div className={classes.join(' ')} style={styleContainer}>
+		<button {...props} className={'ui-button ' + className}>{children}</button>
+		<div className={'ui-button-spinner' + styles['wait-indicator'] + (wait ? ' ' + styles['active'] : '')}>
+			<Spinner size="small" color={spinnerColor}/>
 		</div>
 	</div>)
 };

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,22 @@
+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/index.tsx

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

package/src/Checkbox/style.module.css

@@ -0,0 +1,74 @@
+/* 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/Form/Element/Element.tsx

@@ -15,19 +15,27 @@ export interface IElement<T = any> extends Omit<AllHTMLAttributes<T>, 'children'
 	classNameContainer?: string;
 	beforeElement?: React.ReactElement;
 	afterElement?: React.ReactElement;
+	hiddenContainer?: boolean;
 }
 
-const Element = ({children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, ...props}: IElement) => {
+const Element = ({children, beforeElement, afterElement, error, placeholder, disabled, styleContainer, classNameContainer, hiddenContainer, ...props}: IElement) => {
 	const [currentError, setCurrentError] = useState('');
 
 	useEffect(() => {
 		setCurrentError(error ?? '');
 	},[error]);
 
+	const classes = ['ui-form-element'];
+
+	classes.push(styles['container']);
+	if (currentError) classes.push(styles['error']);
+	if (disabled) classes.push(styles['disabled']);
+	if (hiddenContainer) classes.push(styles['hidden']);
+	if (classNameContainer) classes.push(classNameContainer);
+
 	return(<>
 		<label
-			className={
-				styles['container'] + (currentError ? ' ' + styles['error'] : '') + (disabled ? ' ' + styles['disabled'] : '') + (classNameContainer ? ' ' + classNameContainer : '')}
+			className={classes.join(' ')}
 			style={styleContainer}
 		>
 			{beforeElement}

package/src/Form/Element/style.module.css

@@ -11,6 +11,10 @@
 	z-index: 0;
 }
 
+.container.hidden {
+	border: 0;
+}
+
 .element {
 	align-self: stretch;
 	width: 100%;

package/src/Form/Form.tsx

@@ -17,7 +17,13 @@ const Form = ({children, wait, className, onSubmit, ...props}: IForm) => {
 		}
 	};
 
-	return(<form {...props} onSubmit={submit} className={styles['container'] + (wait ? ' ' + styles['wait'] : '') + (className ? ' ' + className : '')}>
+	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']}>
 			<Spinner size="large" color="contrast"/>

package/src/Spinner/Spinner.tsx

@@ -7,7 +7,15 @@ export type TSpinner = {
 }
 
 const Spinner = ({size, color = 'default'}: TSpinner) => {
-	return(<div className={styles['spinner'] + (size ? ' ' + styles[size] : '') + (color ? ' ' + styles[color] : '') + ' ' + styles['animate']}></div>);
+
+	const classes = ['ui-spinner'];
+
+	classes.push(styles['spinner']);
+	if (size) classes.push(styles[size]);
+	if (color) classes.push(styles[color]);
+	classes.push(styles['animate']);
+
+	return(<div className={classes.join(' ')}></div>);
 };
 
 export default Spinner;

package/src/index.ts

@@ -18,6 +18,7 @@ import UploadImages,{
 	TImageData,
 	IImage
 } from "./UploadImages";
+import Checkbox from "./Checkbox";
 
 const UI = {
 	
@@ -33,7 +34,8 @@ export {
 	Spinner,
 	File,
 	Button,
-	UploadImages
+	UploadImages,
+	Checkbox
 };
 export type {
 	TFileData,