@itilite/lumina-ui 0.0.31 → 0.0.322

package/src/components/Button/Button.test.tsx

@@ -1,90 +0,0 @@
-import { render, screen, fireEvent } from "@testing-library/react";
-import Button from "./Button";
-
-describe("Button component", () => {
-	it("should render the button with the provided label", () => {
-		render(<Button>{"Click me"}</Button>);
-
-		const buttonElement = screen.getByText(/click me/i);
-		expect(buttonElement).toBeInTheDocument();
-	});
-
-	it("should call onClick handler when clicked", () => {
-		const handleClick = jest.fn();
-		render(<Button onClick={handleClick}>{"Click me"}</Button>);
-
-		const buttonElement = screen.getByTestId("lumina-button");
-		fireEvent.click(buttonElement);
-
-		expect(handleClick).toHaveBeenCalledTimes(1);
-	});
-
-	it("should apply the correct size class", () => {
-		render(
-			<Button onClick={() => {}} size='large'>
-				{"Large button"}
-			</Button>
-		);
-
-		const buttonElement = screen.getByTestId("lumina-button");
-		expect(buttonElement).toHaveClass("size_large");
-	});
-
-	it("should apply the correct type class", () => {
-		render(
-			<Button onClick={() => {}} type='critical'>
-				{"Critical Button"}
-			</Button>
-		);
-
-		const buttonElement = screen.getByTestId("lumina-button");
-		expect(buttonElement).toHaveClass("type_critical");
-	});
-
-	it("should be disabled when the disabled prop is passed", () => {
-		render(
-			<Button onClick={() => {}} disabled={true}>
-				{"Disabled Button"}
-			</Button>
-		);
-
-		const buttonElement = screen.getByTestId("lumina-button");
-		expect(buttonElement).toBeDisabled();
-	});
-
-	it("should not call onClick when disabled", () => {
-		const handleClick = jest.fn();
-		render(
-			<Button onClick={handleClick} disabled={true}>
-				{"Disabled Button"}
-			</Button>
-		);
-
-		const buttonElement = screen.getByTestId("lumina-button");
-		fireEvent.click(buttonElement);
-
-		expect(handleClick).not.toHaveBeenCalled();
-	});
-
-	it("should render with the correct shape class", () => {
-		render(
-			<Button onClick={() => {}} size='large' shape='circle'>
-				{"Circle Button"}
-			</Button>
-		);
-
-		const buttonElement = screen.getByTestId("lumina-button");
-		expect(buttonElement).toHaveClass("shape_circle");
-	});
-
-	it("should render with the correct variant class", () => {
-		render(
-			<Button onClick={() => {}} variant='link'>
-				{"Link Button"}
-			</Button>
-		);
-
-		const buttonElement = screen.getByTestId("lumina-button");
-		expect(buttonElement).toHaveClass("variant_link");
-	});
-});

package/src/components/Button/Button.tsx

@@ -1,91 +0,0 @@
-import * as React from "react";
-import { Button as AntButton } from "antd";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-
-import classes from "./Button.module.scss";
-import { ButtonProps } from "./types";
-
-const Button: React.FC<ButtonProps> = (props) => {
-	const {
-		type = "primary",
-		variant = "default",
-		size = "normal",
-		shape = "default",
-		className = "",
-		icon = null,
-		iconPosition = "start",
-		children,
-		onClick = () => {},
-		href = "",
-		disabled = false,
-		loading = false,
-		onHoverUnderline = false,
-	} = props;
-
-	const buttonMap: Record<string, "primary" | "default" | "text" | "link"> = {
-		default: "primary",
-		subtle: "default",
-		text: "text",
-		link: "link",
-	};
-	// Map your sizes to Ant Design's sizes
-	const sizeMap: Record<string, "small" | "middle" | "large"> = {
-		small: "small",
-		normal: "middle", // Map "default" to "middle"
-		large: "large",
-	};
-
-	return (
-		<AntButton
-			className={clsx(
-				classes.button,
-				classes[`size_${size}`],
-				classes[`variant_${variant}`],
-				classes[`shape_${shape}`],
-				classes[`type_${type}`],
-				`size_${size}`,
-				`variant_${variant}`,
-				`shape_${shape}`,
-				`type_${type}`,
-				className,
-				{
-					"tw-cursor-not-allowed": disabled,
-					"tw-opacity-40": disabled,
-				},
-				disabled && classes.disabled,
-				onHoverUnderline && classes.onHoverUnderline
-			)}
-			icon={icon}
-			iconPosition={iconPosition}
-			onClick={onClick}
-			size={sizeMap[size]}
-			shape={shape}
-			type={buttonMap[variant]}
-			disabled={disabled}
-			loading={loading}
-			href={href || undefined}
-			data-testid='lumina-button'
-		>
-			{children}
-		</AntButton>
-	);
-};
-export default Button;
-
-Button.propTypes = {
-	type: PropTypes.oneOf(["primary", "secondary", "critical"]),
-	variant: PropTypes.oneOf(["subtle", "text", "link"]),
-	size: PropTypes.oneOf(["large", "small"]),
-	shape: PropTypes.oneOf(["circle", "default", "round"]),
-	icon: PropTypes.element,
-	iconPosition: PropTypes.oneOf(["start", "end"]),
-	className: PropTypes.string,
-	onClick: PropTypes.func,
-	disabled: PropTypes.bool,
-	loading: PropTypes.bool,
-	href: PropTypes.string,
-	onHoverUnderline: PropTypes.bool,
-};
-
-Button.displayName = "Button";

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export { default as Button } from "./Button";

package/src/components/Button/types.ts

@@ -1,16 +0,0 @@
-export interface ButtonProps {
-	type?: "primary" | "secondary" | "critical" | undefined;
-	variant?: "subtle" | "text" | "link";
-	size?: "large" | "small";
-	shape?: "circle" | "default" | "round";
-	icon?: React.ReactNode;
-	iconPosition?: "start" | "end";
-	className?: string;
-	children?: React.ReactNode;
-	onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-	href?: string;
-	disabled?: boolean;
-	loading?: boolean;
-	onHoverUnderline?: boolean;
-	analytics?: Record<string, unknown>;
-}

package/src/components/Checkbox/Checkbox.module.scss

@@ -1,141 +0,0 @@
-.checkbox {
-	display: flex;
-	align-items: center;
-	&.size_small {
-		:global(.ant-checkbox) {
-			:global(.ant-checkbox-inner) {
-				height: 16px;
-				width: 16px;
-			}
-		}
-	}
-	&.size_medium {
-		:global(.ant-checkbox) {
-			:global(.ant-checkbox-inner) {
-				height: 20px;
-				width: 20px;
-				&::after {
-					inset-inline-start: 27%;
-				}
-			}
-		}
-	}
-	&.size_large {
-		:global(.ant-checkbox) {
-			:global(.ant-checkbox-inner) {
-				height: 24px;
-				width: 24px;
-				&::after {
-					inset-inline-start: 33%;
-				}
-			}
-		}
-	}
-
-	&.type_checked {
-		:global(.ant-checkbox-checked) {
-			:global(.ant-checkbox-inner) {
-				border-color: #ec5d25;
-				background-color: #ec5d25;
-			}
-		}
-		&:global(
-				.ant-checkbox-wrapper:hover
-					.ant-checkbox-checked:not(.ant-checkbox-disabled)
-					.ant-checkbox-inner
-			) {
-			@apply tw-bg-color-text-primary-hover;
-		}
-
-		:global(.ant-checkbox-checked):focus-visible {
-			outline: 2px solid #0a65e7;
-		}
-
-		&.disabled {
-			@apply tw-cursor-not-allowed;
-
-			:global(.ant-checkbox-checked) {
-				:global(.ant-checkbox-inner) {
-					opacity: 0.5;
-					border-color: #ec5d25;
-					background-color: #ec5d25;
-				}
-				:global(.ant-checkbox-inner)::after {
-					border-color: #ffffff;
-				}
-			}
-		}
-	}
-
-	&.type_unchecked {
-		:global(.ant-checkbox) {
-			:global(.ant-checkbox-inner) {
-				border-color: #b6bac3;
-			}
-		}
-
-		:global(.ant-checkbox):hover {
-			:global(.ant-checkbox-inner) {
-				border-color: #6b7280;
-			}
-		}
-		:global(.ant-checkbox):focus-visible {
-			outline: 2px solid #0a65e7;
-		}
-
-		&.disabled {
-			@apply tw-cursor-not-allowed;
-
-			:global(.ant-checkbox) {
-				:global(.ant-checkbox-inner) {
-					border-color: #b6bac3;
-					background-color: #f9fafb;
-				}
-			}
-		}
-	}
-
-	:global(.ant-checkbox-disabled + span) {
-		color: #363e4f;
-	}
-
-	&.variant_normal {
-		color: #363e4f;
-		font-weight: 400;
-		font-size: 0.875rem /* 14px */;
-		line-height: 20px;
-	}
-	&.variant_emphasized {
-		color: #363e4f;
-		font-weight: 500;
-		font-size: 0.875rem /* 14px */;
-		line-height: 20px;
-	}
-	&.variant_indeterminate {
-		&.disabled {
-			:global(.ant-checkbox-indeterminate) {
-				:global(.ant-checkbox-inner) {
-					opacity: 0.5;
-					border-color: #ec5d25;
-					background-color: #ec5d25;
-				}
-				:global(.ant-checkbox-inner)::after {
-					border-color: #ffffff;
-				}
-			}
-		}
-		:global(.ant-checkbox-indeterminate) {	
-			:global(.ant-checkbox-inner) {
-				border-color: #ec5d25 !important;
-				background-color: #ec5d25 !important;
-			}
-			:global(.ant-checkbox-inner)::after {
-				inset-inline-start: 50%;
-				width: 60%;
-				height: 3px;
-				border-radius: 4px;
-				background: white;
-			}
-		}
-	}
-}

package/src/components/Checkbox/Checkbox.tsx

@@ -1,56 +0,0 @@
-import * as React from "react";
-import { Checkbox as AntCheckbox } from "antd";
-import clsx from "clsx";
-import PropTypes from "prop-types";
-
-import classes from "./Checkbox.module.scss";
-import { CheckboxProps } from "./types";
-
-const Checkbox: React.FC<CheckboxProps> = (props) => {
-	const {
-		className = "",
-		children = null,
-		onChange = () => {},
-		checked = false,
-		disabled = false,
-		size = "small",
-		variant = "normal",
-		indeterminate = false,
-		...rest
-	} = props;
-	return (
-		<AntCheckbox
-			className={clsx(
-				classes.checkbox,
-				classes[`size_${size}`],
-				classes[`variant_${variant}`],
-				checked ? classes.type_checked : classes.type_unchecked,
-				disabled && classes.disabled,
-				indeterminate && classes[`variant_indeterminate`],
-				className
-			)}
-			onChange={onChange}
-			checked={checked}
-			disabled={disabled}
-			indeterminate={indeterminate}
-			{...rest}
-		>
-			{children}
-		</AntCheckbox>
-	);
-};
-``;
-Checkbox.propTypes = {
-	checked: PropTypes.bool,
-	className: PropTypes.string,
-	size: PropTypes.oneOf(["large", "small", "medium"]),
-	variant: PropTypes.oneOf(["normal", "emphasized"]),
-	onChange: PropTypes.func,
-	children: PropTypes.element,
-	disabled: PropTypes.bool,
-	indeterminate: PropTypes.bool,
-};
-
-Checkbox.displayName = "Checkbox";
-
-export default Checkbox;

package/src/components/Checkbox/index.ts

@@ -1 +0,0 @@
-export { default as Checkbox } from "./Checkbox";

package/src/components/Checkbox/types.ts

@@ -1,12 +0,0 @@
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
-
-export interface CheckboxProps {
-    checked?: boolean;
-    className?: string;
-    onChange?: (e: CheckboxChangeEvent) => void;
-    children?: React.ReactNode;
-    size?: "large" | "small" | "medium",
-    variant?: "normal" | "emphasized",
-    disabled?: boolean,
-    indeterminate?: boolean,
-}

package/src/components/Modal/Modal.module.scss

@@ -1,61 +0,0 @@
-.modal {
-	&.footerMargintopDisable {
-		.ant-modal-footer {
-			margin-top: 0;
-			@apply tw-mt-0;
-		}
-	}
-	:global(.ant-modal-footer) {
-		:global(.primaryFooter) {
-			padding: 24px;
-			@apply tw-p-6;
-			@apply tw-flex tw-justify-end;
-			.okBtn,
-			.cancelBtn {
-				min-width: 92px;
-			}
-		}
-		:global(.secondaryFooter) {
-			padding: 24px;
-			@apply tw-p-6;
-			@apply tw-pt-0;
-			@apply tw-flex tw-justify-end;
-			.okBtn,
-			.cancelBtn {
-				width: 50%;
-			}
-		}
-	}
-	:global(.ant-modal-content) {
-		padding: 0;
-		@apply tw-rounded-xl;
-		@apply tw-p-0;
-		:global(.ant-modal-header) {
-			@apply tw-p-4 sm:tw-p-6 tw-mb-0;
-			:global(.ant-modal-title) {
-				justify-content: flex-start;
-				@apply tw-font-medium tw-text-font-size-50 tw-leading-7 tw-text-color-surface-dark tw-pr-5;
-			}
-		}
-		:global(.ant-modal-close) {
-			display: flex;
-			@apply tw-flex tw-items-end tw-justify-center;
-			:global(.ant-modal-close-x) {
-				display: flex;
-				@apply tw-flex tw-items-center tw-justify-center;
-			}
-		}
-		:global(.ant-modal-body) {
-			padding: 0 1.5rem 1.5rem;
-			max-height: 80vh;
-			overflow: auto;
-		}
-		:global(.ant-modal-close) {
-			@apply tw-top-6 tw-right-6 tw-pb-1;
-		}
-	}
-	:global(.ant-btn-primary) {
-		margin-inline-start: 0.5rem;
-		@apply tw-ms-2;
-	}
-}

package/src/components/Modal/Modal.tsx

@@ -1,103 +0,0 @@
-import { Modal as AntModal } from "antd";
-import clsx from "clsx";
-import classes from "./Modal.module.scss";
-import { Button } from "../Button";
-import { ModalProps } from "./types";
-
-const Close = ({ size = 14, color = "#B6BAC3", ...rest }) => {
-	return (
-		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 14 14"
-			fill="none"
-			xmlns="http://www.w3.org/2000/svg"
-			{...rest}
-		>
-			<path
-				d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z"
-				fill={color}
-			/>
-		</svg>
-	);
-};
-
-const Modal: React.FC<ModalProps> = ({
-	className = "",
-	title = "",
-	children,
-	open = false,
-	handleOk,
-	handleCancel,
-	okText = "",
-	cancelText = "",
-	closeIcon = <Close color="#6B7280" />,
-	bodyClassName = "modalBody",
-	outsideClickDisable = false,
-	hideCross = false,
-	okButtonLoading = false,
-	okButtonDisabled = false,
-	variant = "primary",
-	okBtnClasses = "",
-	cancelButtonAnalytics = {},
-	okButtonAnalytics = {},
-	footerMargintopDisable = true,
-	...rest
-}) => {
-	return (
-		<div onClick={(e) => e.stopPropagation()}>
-			<AntModal
-				title={title}
-				open={open}
-				onOk={handleOk}
-				onCancel={handleCancel}
-				className={clsx(classes.modal, className, {
-					footerMargintopDisable: footerMargintopDisable,
-				})}
-				okText={okText}
-				cancelText={cancelText}
-				closeIcon={closeIcon}
-				closable={!hideCross}
-				maskClosable={!outsideClickDisable}
-				footer={
-					okText || cancelText ? (
-						<div
-							className={clsx({
-								primaryFooter: variant === "primary",
-								secondaryFooter: variant === "secondary",
-							})}
-						>
-							{cancelText && (
-								<Button
-									onClick={handleCancel as React.MouseEventHandler<HTMLElement>}
-									type="secondary"
-									className="cancelBtn"
-									variant='subtle'
-									{...cancelButtonAnalytics}
-								>
-									{cancelText}
-								</Button>
-							)}
-							{okText && (
-								<Button
-									onClick={handleOk as React.MouseEventHandler<HTMLElement>}
-									className={clsx(okBtnClasses, "okBtn")}
-									loading={okButtonLoading}
-									disabled={okButtonDisabled}
-									{...okButtonAnalytics}
-								>
-									{okText}
-								</Button>
-							)}
-						</div>
-					) : null
-				}
-				{...rest}
-			>
-				<div className={bodyClassName}>{children}</div>
-			</AntModal>
-		</div>
-	);
-};
-
-export default Modal;

package/src/components/Modal/index.ts

@@ -1 +0,0 @@
-export { default as Modal } from "./Modal";

package/src/components/Modal/types.ts

@@ -1,21 +0,0 @@
-export interface ModalProps {
-	className?: string | undefined;
-	title?: string | undefined;
-	children?: React.ReactNode;
-	open?: boolean;
-	handleOk?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
-	handleCancel?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined;
-	okText?: string | undefined;
-	cancelText?: string | undefined;
-	closeIcon?: React.ReactNode;
-	bodyClassName?: string | undefined;
-	outsideClickDisable?: boolean;
-	hideCross?: boolean;
-	okButtonLoading?: boolean;
-	okButtonDisabled?: boolean;
-	variant?: "primary" | "secondary";
-	okBtnClasses?: string | undefined;
-	cancelButtonAnalytics?: object | undefined;
-	okButtonAnalytics?: object | undefined;
-	footerMargintopDisable?: boolean;
-}

package/src/components/Radio/Radio.module.scss

@@ -1,103 +0,0 @@
-.radio {
-	display: flex;
-	align-items: center;
-	&.size_small {
-		:global(.ant-radio) {
-			:global(.ant-radio-inner) {
-				height: 16px;;
-				width: 16px;;
-			}
-		}
-	}
-	&.size_medium {
-		:global(.ant-radio) {
-			:global(.ant-radio-inner) {
-				height: 20px;;
-				width: 20px;;
-			}
-		}
-	}
-	&.size_large {
-		:global(.ant-radio) {
-			:global(.ant-radio-inner) {
-				height: 24px;;
-				width: 24px;;
-			}
-		}
-	}
-
-	&.type_checked {
-		:global(.ant-radio-checked) {
-			:global(.ant-radio-inner) {
-				border-color: #EC5D25 ;
-				background-color: #EC5D25;
-			}
-		}
-
-		:global(.ant-radio-checked):hover  {
-			:global(.ant-radio-inner){
-				border-color: #B94710 ;
-				background-color: #B94710 ;
-			  }
-		}
-		:global(.ant-radio-checked):focus-visible {
-			outline: 2px solid #0A65E7;
-		}
-		
-		&.disabled {
-			@apply tw-cursor-not-allowed;
-
-			:global(.ant-radio-checked) {
-				:global(.ant-radio-inner){
-					border-color: #B6BAC3 ;
-					background-color: #B6BAC3 ;
-				  }
-				:global(.ant-radio-inner)::after {
-					transform: scale(0.375);
-					background-color: #FFFFFF;
-				}
-			}
-		}
-	}
-
-	&.type_unchecked {
-		:global(.ant-radio) {
-			:global(.ant-radio-inner) {
-				border-color: #B6BAC3 ;
-			}
-		}
-
-		:global(.ant-radio):hover  {
-			:global(.ant-radio-inner){
-				border-color: #6B7280 ;
-			  }
-		}
-		:global(.ant-radio):focus-visible {
-			outline: 2px solid #0A65E7;
-		}
-		
-		&.disabled {
-			@apply tw-cursor-not-allowed;
-
-			:global(.ant-radio) {
-				:global(.ant-radio-inner){
-					border-color: #B6BAC3 ;
-					background-color: #F9FAFB;
-				  }
-			}
-		}	
-	}
-
-	&.variant_normal {
-		color: #363E4F;
-		font-weight: 400;
-		font-size: 0.875rem /* 14px */;
-		line-height: 20px;
-	}
-	&.variant_emphasized {
-		color: #363E4F;
-		font-weight: 500;
-		font-size: 0.875rem /* 14px */;
-		line-height: 20px;
-	}
-}