react-artasys-ui 0.1.3 → 0.1.5

package/lib/Form/Form.d.ts

@@ -1,7 +1,11 @@
 import { FormHTMLAttributes, ReactNode } from 'react';
+import { TSpinner } from '../Spinner';
 interface IForm extends FormHTMLAttributes<HTMLFormElement> {
     children: ReactNode;
     wait?: boolean;
+    progress?: number;
+    progressRadius?: boolean;
+    spinnerColor?: TSpinner['color'];
 }
-declare const Form: ({ children, wait, className, onSubmit, ...props }: IForm) => JSX.Element;
+declare const Form: ({ children, wait, progress, progressRadius, className, spinnerColor, onSubmit, ...props }: IForm) => JSX.Element;
 export default Form;

package/lib/Progress/Progress.d.ts

@@ -0,0 +1,7 @@
+interface IProgress {
+    value?: number | string;
+    size?: 'small' | 'middle' | 'large';
+    radius?: boolean;
+}
+declare const Progress: ({ value, size, radius }: IProgress) => JSX.Element;
+export default Progress;

package/lib/Progress/index.d.ts

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

package/lib/Select/Option.d.ts

@@ -0,0 +1,7 @@
+import { LiHTMLAttributes } from "react";
+export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
+    value?: string;
+    children?: string | React.ReactElement;
+}
+declare const Option: ({ children, value, onClick, ...props }: IOption) => JSX.Element;
+export default Option;

package/lib/Select/Select.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { IElement } from "../Form/Element";
+import type { IOption } from "./Option";
+export declare const Context: import("react").Context<{
+    selected: string;
+    setSelect: (value: string) => void;
+    setTitle: (title: string) => void;
+}>;
+export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
+    children?: React.FunctionComponentElement<IOption>[];
+    onChange?: (value: string) => void;
+}
+declare const Select: import("react").ForwardRefExoticComponent<ISelect & import("react").RefAttributes<HTMLInputElement>>;
+export default Select;

package/lib/Select/index.d.ts

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, FC, RefAttributes } from "react";
+import { ISelect } from "./Select";
+import Option, { IOption } from "./Option";
+interface StaticComponent extends ForwardRefExoticComponent<ISelect & RefAttributes<HTMLInputElement>> {
+    Option: FC<IOption>;
+}
+declare const Select: StaticComponent;
+export { Option as SelectOption };
+export default Select;

package/lib/Spinner/Spinner.d.ts

@@ -1,6 +1,7 @@
-export type TSpinner = {
+import { AllHTMLAttributes } from "react";
+export type TSpinner = Omit<AllHTMLAttributes<HTMLDivElement>, 'size' | 'color'> & {
     size?: 'small' | 'middle' | 'large';
-    color?: 'default' | 'contrast';
+    color?: 'contrast' | 'orange';
 };
-declare const Spinner: ({ size, color }: TSpinner) => JSX.Element;
+declare const Spinner: ({ size, color, ...props }: TSpinner) => JSX.Element;
 export default Spinner;

package/lib/index.d.ts

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

package/package.json

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

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

@@ -59,7 +59,7 @@
 	margin-left: 5px;
 	height: 100%;
 	color: #7A7A73;
-	font-size: 1.2em;
+	font-size: 1.2rem;
 	z-index: -1;
 	user-select: none;
 	transition: transform 0.3s;

package/src/Form/Form.tsx

@@ -1,14 +1,20 @@
 import { FormHTMLAttributes, ReactNode, FormEvent } from 'react';
 import styles from './style.module.css';
 
-import Spinner from '../Spinner';
+import Spinner,{
+	TSpinner
+} from '../Spinner';
+import Progress from '../Progress';
 
 interface IForm extends FormHTMLAttributes<HTMLFormElement> {
 	children: ReactNode;
 	wait?: boolean;
+	progress?: number;
+	progressRadius?: boolean;
+	spinnerColor?: TSpinner['color'];
 }
 
-const Form = ({children, wait, className, onSubmit, ...props}: IForm) => {
+const Form = ({children, wait, progress, progressRadius = true, className, spinnerColor, onSubmit, ...props}: IForm) => {
 
 	const submit = (e: FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
@@ -26,7 +32,7 @@ const Form = ({children, wait, className, onSubmit, ...props}: IForm) => {
 	return(<form {...props} onSubmit={submit} className={classes.join(' ')}>
 		{children}
 		<div className={styles['wait-indicator']}>
-			<Spinner size="large" color="contrast"/>
+			{typeof progress === 'number' ? <Progress radius={progressRadius} value={progress}/> : <Spinner color={spinnerColor}/>}
 		</div>
 	</form>);
 };

package/src/Progress/Progress.tsx

@@ -0,0 +1,28 @@
+import styles from "./style.module.css";
+
+interface IProgress {
+	value?: number | string;
+	size?: 'small' | 'middle' | 'large';
+	radius?: boolean;
+};
+
+const Progress = ({value = 0, size, radius = false}: IProgress) => {
+	value = Math.ceil(Number(value) * 10) / 10;
+	if (value > 100) {
+		value = 100;
+	}
+	if (value < 0) {
+		value = 0;
+	}
+
+	const progress = radius ? (360 / 100 * value) + 'deg' : value + '%';
+
+	const classes = ['ui-progress'];
+	classes.push(styles['container']);
+	if (size) classes.push(styles[size]);
+	if (radius) classes.push(styles['radius']);
+
+	return(<div className={classes.join(' ')} data-progress={value} style={{'--progress': progress} as React.CSSProperties}/>);
+};
+
+export default Progress;

package/src/Progress/index.tsx

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

package/src/Progress/style.module.css

@@ -0,0 +1,72 @@
+/* Progress */
+
+.container {
+	--size: 150px;
+	--color-rgb: 94, 190, 214;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	min-width: var(--size);
+	max-width: var(--size);
+	box-sizing: content-box !important;
+	aspect-ratio: 10/1;
+	border-radius: 2px;
+	padding: 5px 0;
+	overflow: hidden;
+}
+
+.container::before {
+	content: "";
+	position: absolute;
+	display: block;
+	width: 100%;
+	height: 100%;
+	max-width: 100%;
+    max-height: 100%;
+	background: linear-gradient(to right, #5EBED6 var(--progress), #BED4DB 0);
+}
+
+.container.radius {
+	aspect-ratio: 1/1;
+	border-radius: 50%;
+	padding: unset;
+}
+
+.container.radius::before {
+	--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)
+	);
+	background: conic-gradient(#5EBED6 var(--progress), #BED4DB 0deg);
+}
+
+.container::after {
+	content: attr(data-progress) '%';
+	font-size: 1.5em;
+	color: #FFFFFF;
+	mix-blend-mode: lighten;
+	z-index: 1;
+}
+
+.container.radius::after {
+	mix-blend-mode: unset;
+	color: #1D1D1B;
+}
+
+.container.small {
+	--size: 30px;
+}
+
+.container.middle {
+	--size: 60px;
+}
+
+.container.large {
+	--size: 120px;
+}

package/src/Select/Option.tsx

@@ -0,0 +1,38 @@
+import {
+	LiHTMLAttributes,
+	MouseEvent,
+	useContext,
+	useEffect
+} from "react";
+import { Context } from "./Select";
+import styles from "./style.module.css";
+
+export interface IOption extends LiHTMLAttributes<HTMLLIElement> {
+	value?: string;
+	children?: string | React.ReactElement;
+};
+
+const Option = ({children, value, onClick, ...props}: IOption) => {
+	const context = useContext(Context);
+
+	const handleClick = (e: MouseEvent<HTMLLIElement>) => {
+		if (typeof value === 'undefined') return;
+		context.setSelect(value);
+		if (typeof onClick === 'function') {
+			onClick(e);
+		}
+	};
+
+	useEffect(() => {
+		if (value === context.selected && children) {
+			context.setTitle(children?.toString());
+		}
+	}, [context.selected]);
+
+	const classes = ['ui-select-option'];
+	if (context.selected === value) classes.push(styles['active'], 'active');
+
+	return(<li {...props} onClick={handleClick} className={classes.join(' ')}>{children}</li>);
+};
+
+export default Option;

package/src/Select/Select.tsx

@@ -0,0 +1,74 @@
+import {
+	forwardRef,
+	createContext,
+	useState,
+	useEffect,
+	useRef
+} from "react";
+import Element,{
+	IElement
+} from "../Form/Element";
+import type { IOption } from "./Option";
+import styles from "./style.module.css";
+
+export const Context = createContext({
+	selected: '',
+	setSelect: (value: string) => {},
+	setTitle: (title: string) => {}
+});
+
+export interface ISelect extends Omit<IElement, 'children' | 'onChange'> {
+	children?: React.FunctionComponentElement<IOption>[];
+	onChange?: (value: string) => void;
+};
+
+const Select = forwardRef<HTMLInputElement, ISelect>(({children, onChange, value, ...props}, ref) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+
+	const [selected, setSelected] = useState('');
+	const [title, setTitle] = useState<string>();
+
+	const open = () => {
+		const element = containerRef.current;
+		element?.classList.add(styles['opened']);
+		element?.focus();
+	};
+
+	const close = () => {
+		const element = containerRef.current;
+		element?.classList.remove(styles['opened']);
+	};
+
+	const setSelect = (value: string) => {
+		if (typeof onChange === 'function') {
+			onChange(value);
+		}
+		setSelected(value);
+		close();
+	};
+
+	useEffect(() => {
+		if (typeof value === 'undefined') return;
+		setSelected(String(value));
+	}, [value]);
+	
+	return(<Element {...props} styleContainer={{zIndex: 1}}>
+		{ (props) => <Context.Provider value={{
+			selected,
+			setSelect,
+			setTitle
+		}}>
+			<input {...props} type="hidden" value={selected} ref={ref}/>
+			<div className={styles['container']} ref={containerRef} tabIndex={1} onBlur={close}>
+				<div className={styles['select']} onClick={open}>
+					<span className={styles['title']}>{title}</span>
+				</div>
+				<ul className={styles['select-list']}>
+					{children}
+				</ul>
+			</div>
+		</Context.Provider> }
+	</Element>);
+});
+
+export default Select;

package/src/Select/index.tsx

@@ -0,0 +1,27 @@
+import {
+	forwardRef,
+	ForwardRefExoticComponent,
+	FC,
+	RefAttributes
+} from "react";
+import {
+	default as SelectUI,
+	ISelect
+} from "./Select";
+import Option,{
+	IOption
+} from "./Option";
+
+interface StaticComponent extends ForwardRefExoticComponent<ISelect & RefAttributes<HTMLInputElement>> {
+	Option: FC<IOption>;
+};
+
+const Select: StaticComponent = {
+	...forwardRef<HTMLInputElement, ISelect>(({...args}, ref): JSX.Element => <SelectUI {...args} ref={ref}/>),
+	Option
+} as StaticComponent;
+
+export {
+	Option as SelectOption
+};
+export default Select;

package/src/Select/style.module.css

@@ -0,0 +1,78 @@
+/* Select */
+
+.container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-height: 25px;
+	cursor: pointer;
+}
+
+.select {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	min-height: 20px;
+	padding: 10px;
+}
+
+.select::after {
+	content: "";
+	display: block;
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 10px solid #5EBED6;
+	transition: rotate 0.3s;
+}
+
+.container.opened > .select::after {
+	rotate: 180deg;
+}
+
+.select-list {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	top: calc(100% - 1px);
+	left: -1px;
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	background-color: #FFFFFF;
+	box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 10%);
+	box-shadow: 0px 4px 5px 0px rgb(0 0 0 / 10%);
+    border: 1px solid #CCCCCC;
+    border-top: 0;
+	opacity: 0;
+	visibility: hidden;
+	transform: translateY(-10%);
+	transition: transform 0.3s ease-in-out, opacity 0.3s, visibility 0.3s;
+}
+
+.container.opened > .select-list {
+	opacity: 1;
+	transform: translateY(0);
+	visibility: visible;
+}
+
+.title, .select-list > li {
+	font-size: 20px;
+	color: #1D1D1B;
+}
+
+.title {
+	flex: 1;
+}
+
+.select-list > li {
+	padding: 5px;
+	cursor: pointer;
+}
+
+.select-list > li:hover, .select-list > li.active {
+	background-color: #BED4DB;
+}

package/src/Spinner/Spinner.tsx

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

package/src/Spinner/style.module.css

@@ -1,13 +1,22 @@
+/* Spinner */
+
 .spinner {
+	--color-rgb: 94, 190, 214;
+	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);
 }
 
 .spinner::before {
-	content: '';
+	content: "";
 	display: inline-block;
-    width: 1rem;
-    height: 1rem;
+	width: 100%;
+	max-width: 90%;
+    max-height: 90%;
 	--border-width: clamp(0.2em, 10%, 0.5em);
 	border-radius: 50%;
 	aspect-ratio: 1/1;
@@ -17,56 +26,34 @@
 		#000 calc(100% - var(--border-width) + 0.5px)
 	);
 	mask: var(--mask);
-	background: linear-gradient(to top, rgba(251, 163, 29, 1), rgba(251, 163, 29, 0.5)) 100% 0/50% 100% no-repeat,
-			linear-gradient(rgba(251, 163, 29, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
+	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.default::before {
-	border-color: #FFFFFF;
+.spinner.contrast {
+	--color-rgb: 255, 255, 255;
 }
 
-.spinner.contrast::before {
-	background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5)) 100% 0/50% 100% no-repeat,
-			linear-gradient(rgba(255, 255, 255, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
+.spinner.orange {
+	--color-rgb: 251, 163, 29;
 }
 
-.spinner.small::before {
+.spinner.small {
 	width: 1rem;
     height: 1rem;
 }
 
-.spinner.middle::before {
+.spinner.middle {
 	width: 4rem;
     height: 4rem;
 }
 
-.spinner.large::before {
+.spinner.large {
 	width: 8rem;
     height: 8rem;
 }
 
-.spinner.big::before {
-	width: 2rem;
-    height: 2rem;
-}
-
-.spinner.full {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	width: 100%;
-	height: 100%;
-}
-
-.spinner.full::before {
-	width: 80%;
-	height: 80%;
-}
-
-.spinner.animate::before {
-    animation: button-spinner-border .85s linear infinite;
-}
-
 @keyframes button-spinner-border {
 	to{
 		transform:rotate(360deg)

package/src/UploadImages/Image.tsx

@@ -78,7 +78,7 @@ const Image = ({onChange, onClick, onId, onRemove, ...props}: IImage) => {
 		<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"/>
+			<Spinner/>
 		</span>}
 	</span>);
 };

package/src/index.ts

@@ -19,6 +19,10 @@ import UploadImages,{
 	IImage
 } from "./UploadImages";
 import Checkbox from "./Checkbox";
+import Progress from "./Progress";
+import Select,{
+	SelectOption
+} from "./Select";
 
 const UI = {
 	
@@ -35,7 +39,10 @@ export {
 	File,
 	Button,
 	UploadImages,
-	Checkbox
+	Checkbox,
+	Progress,
+	Select,
+	SelectOption
 };
 export type {
 	TFileData,