@itilite/lumina-ui 0.0.1 → 0.0.3

package/src/components/Checkbox/Checkbox.tsx

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

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

package/src/components/Checkbox/types.ts

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

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

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

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

package/src/components/Modal/types.ts

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

@@ -0,0 +1,103 @@
+.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;
+	}
+}

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Radio as AntRadio } from "antd";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+import classes from "./Radio.module.scss";
+import { RadioProps } from "./types";
+
+const Radio: React.FC<RadioProps> = ({
+	checked = true,
+	className = "",
+	size = "small",
+	variant = "normal",
+	children,
+	onChange = () => {},
+	disabled = false,
+	extra = null,
+	...rest
+}) => (
+	<>
+		<AntRadio
+			className={clsx(
+				classes.radio,
+				classes[`size_${size}`],
+				classes[`variant_${variant}`],
+				checked ? classes.type_checked : classes.type_unchecked,
+				disabled && classes.disabled,
+				className
+			)}
+			onChange={onChange}
+			checked={checked}
+			disabled={disabled}
+			{...rest}
+		>
+			{children}
+		</AntRadio>
+		{checked && extra}
+	</>
+);
+
+Radio.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,
+	extra: PropTypes.element,
+};
+
+Radio.displayName = "Radio";
+
+export default Radio;

package/src/components/Radio/index.ts

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

package/src/components/Radio/types.ts

@@ -0,0 +1,12 @@
+import { RadioChangeEvent } from "antd/lib/radio";
+
+export interface RadioProps {
+	checked?: boolean;
+	className?: string;
+	onChange?: (event: RadioChangeEvent) => void;
+	children?: React.ReactNode;
+	size?: "large" | "small" | "medium";
+	variant?: "normal" | "emphasized";
+	disabled?: boolean;
+	extra?: React.ReactNode;
+}

package/src/components/Switch/Switch.module.scss

@@ -0,0 +1,17 @@
+.switch {
+	&:global(.ant-switch.ant-switch-small) {
+		@apply tw-h-3 tw-min-w-6;
+		:global(.ant-switch-handle) {
+			@apply tw-h-2 tw-w-2;
+		}
+	}
+	&:global(.ant-switch) {
+		&:global(.ant-switch-checked) {
+			@apply tw-bg-color-action-primary;
+			
+		}
+		&:global(.ant-switch-checked):hover{
+			@apply tw-bg-color-action-primary;
+		}
+	}
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { Switch as AntSwitch } from "antd";
+import clsx from "clsx";
+import PropTypes from "prop-types";
+
+import classes from "./Switch.module.scss";
+import { SwitchProps } from "./types";
+
+const Switch: React.FC<SwitchProps> = ({
+	className,
+	onChange = () => {},
+	size = "default",
+	disabled = false,
+	checked = false,
+	...rest
+}) => {
+	return (
+		<AntSwitch
+			className={clsx(className, classes.switch, classes[size])}
+			onChange={onChange}
+			size={size}
+			disabled={disabled}
+			checked={checked}
+			{...rest}
+		/>
+	);
+};
+
+Switch.propTypes = {
+	onChange: PropTypes.func,
+	size: PropTypes.oneOf(["small", "default"]),
+	disabled: PropTypes.bool,
+	checked: PropTypes.bool,
+};
+
+export default Switch;
+Switch.displayName = "Switch";

package/src/components/Switch/index.ts

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

package/src/components/Switch/types.ts

@@ -0,0 +1,12 @@
+export interface SwitchProps {
+	size?: "default" | "small";
+	className?: string | undefined;
+	onChange?: (
+		checked: boolean,
+		event:
+			| React.MouseEvent<HTMLButtonElement>
+			| React.KeyboardEvent<HTMLButtonElement>
+	) => void;
+	disabled?: boolean;
+	checked?: boolean;
+}

package/src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,12 @@
+.light {
+	:global(.ant-tooltip-content) {
+		:global(.ant-tooltip-inner) {
+			background-color: white !important;
+			color: #111827;
+			@apply tw-text-color-border-dark-subtle tw-rounded-lg tw-p-2.5;
+		}
+	}
+	:global(.ant-tooltip-arrow:before) {
+		background-color: white !important;
+	}
+}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,29 @@
+import { Tooltip as AntTooltip } from "antd";
+
+import classes from "./Tooltip.module.scss";
+import { TooltipProps } from "./types";
+
+const Tooltip: React.FC<TooltipProps> = ({
+	children,
+	title = "",
+	placement = "top",
+	color = "#1F2937",
+	className,
+	mode = "dark",
+	...rest
+}) => {
+	return (
+		<AntTooltip
+			className={className}
+			color={color}
+			title={title}
+			placement={placement}
+			overlayClassName={mode === "light" ? classes.light : ""}
+			{...rest}
+		>
+			{children}
+		</AntTooltip>
+	);
+};
+
+export default Tooltip;

package/src/components/Tooltip/index.ts

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

package/src/components/Tooltip/types.ts

@@ -0,0 +1,21 @@
+export interface TooltipProps {
+	children?: React.ReactNode;
+	title?: string | undefined;
+	placement?:
+		| "top"
+		| "left"
+		| "right"
+		| "bottom"
+		| "topLeft"
+		| "topRight"
+		| "bottomLeft"
+		| "bottomRight"
+		| "leftTop"
+		| "leftBottom"
+		| "rightTop"
+		| "rightBottom"
+		| undefined;
+	color?: string | undefined;
+	className?: string | undefined;
+	mode?: "light" | "dark";
+}

package/src/components/index.ts

@@ -1 +1,7 @@
-export * from './Button';
+export * from "./Button";
+export * from "./Switch";
+export * from "./Modal";
+export * from "./Tooltip";
+
+export * from './Checkbox'
+export * from './Radio';

package/src/types/jest.d.ts

@@ -0,0 +1,10 @@
+// src/types/jest.d.ts
+import '@testing-library/jest-dom';
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toBeInTheDocument(): R;
+    }
+  }
+}

package/tsconfig.json

@@ -1,39 +1,41 @@
 {
 	"compilerOptions": {
-	  /* Language and Environment */
-	  "target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
-	  "jsx": "react-jsx" /* Specify what JSX code is generated. */,
-  
-	  /* Modules */
-	  "module": "ESNext" /* Specify what module code is generated. */,
-	  "moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
-  
-	  /* JavaScript Support */
-	  "allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
-	  "maxNodeModuleJsDepth": 1 /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */,
-  
-	  /* Emit */
-	  "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
-	  "emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
-	  "sourceMap": true /* Create source map files for emitted JavaScript files. */,
-	  "outDir": "dist" /* Specify an output folder for all emitted files. */,
-	  "declarationDir": "types" /* Specify the output directory for generated declaration files. */,
-  
-	  /* Interop Constraints */
-	  "allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
-	  "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
-	  "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
-  
-	  /* Type Checking */
-	  "strict": true /* Enable all strict type-checking options. */,
-	  "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
-	  "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
-	  "noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
-	  "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
-	  "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
-	  "allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
-  
-	  /* Completeness */
-	  "skipLibCheck": true /* Skip type checking all .d.ts files. */
-	}
-  }
+		/* Language and Environment */
+		"target": "esnext" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
+
+		/* Modules */
+		"module": "ESNext" /* Specify what module code is generated. */,
+		"moduleResolution": "Node" /* Specify how TypeScript looks up a file from a given module specifier. */,
+
+		/* JavaScript Support */
+		"allowJs": false /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */,
+		"maxNodeModuleJsDepth": 1 /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */,
+
+		/* Emit */
+		"declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
+		"emitDeclarationOnly": true /* Only output d.ts files and not JavaScript files. */,
+		"sourceMap": true /* Create source map files for emitted JavaScript files. */,
+		"outDir": "dist" /* Specify an output folder for all emitted files. */,
+		"declarationDir": "dist/types" /* Specify the output directory for generated declaration files. */,
+
+		/* Interop Constraints */
+		"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
+		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+
+		/* Type Checking */
+		"strict": true /* Enable all strict type-checking options. */,
+		"noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+		"noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+		"noImplicitReturns": true /* Enable error reporting for codepaths that do not explicitly return in a function. */,
+		"noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+		"noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+		"allowUnreachableCode": false /* Disable error reporting for unreachable code. */,
+
+		/* Completeness */
+		"skipLibCheck": true /* Skip type checking all .d.ts files. */,
+		// "types": ["@testing-library/jest-dom", "jest"]
+	},
+	"include": ["src", "src/types"]
+}