@itilite/lumina-ui 0.0.1 → 0.0.2

package/dist/esm/types/src/components/Radio/types.d.ts

@@ -0,0 +1,11 @@
+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/dist/esm/types/src/components/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { SwitchProps } from "./types";
+declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/esm/types/src/components/Switch/index.d.ts

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

package/dist/esm/types/src/components/Switch/types.d.ts

@@ -0,0 +1,7 @@
+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/dist/esm/types/src/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from "./types";
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

package/dist/esm/types/src/components/Tooltip/index.d.ts

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

package/dist/esm/types/src/components/Tooltip/types.d.ts

@@ -0,0 +1,8 @@
+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/dist/esm/types/src/components/index.d.ts

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

package/jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+	preset: "ts-jest",
+	testEnvironment: "jsdom",
+	transform: {
+		"^.+\\.tsx?$": "ts-jest",
+		// process `*.tsx` files with `ts-jest`
+	},
+	moduleNameMapper: {
+		".(css|less|scss)$": "identity-obj-proxy",
+	},
+};

package/package.json

@@ -1,54 +1,80 @@
 {
-  "name": "@itilite/lumina-ui",
-  "version": "0.0.1",
-  "description": "Design system",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/prop-types": "^15.7.12",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
-    "antd": "^5.20.1",
-    "autoprefixer": "^10.4.20",
-    "clsx": "^2.1.1",
-    "eslint": "^9.9.0",
-    "eslint-config-standard-with-typescript": "^43.0.1",
-    "eslint-define-config": "^2.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-unused-imports": "^4.1.3",
-    "postcss": "^8.4.41",
-    "postcss-scss": "^4.0.9",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup": "^4.21.0",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-scss": "^4.0.0",
-    "sass": "^1.77.8",
-    "tailwindcss": "^3.4.10",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.3"
-  },
-  "peerDependencies": {
-    "react": ">=18"
-  },
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "lint": "eslint ",
-    "lint:fix": "eslint ./src --ext .ts,.tsx --fix"
-  }
-}
+	"name": "@itilite/lumina-ui",
+	"version": "0.0.2",
+	"description": "Design system",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"types": "dist/index.d.ts",
+	"scripts": {
+		"build": "rollup -c",
+		"dev": "rollup -c -w",
+		"lint": "eslint ",
+		"lint:fix": "eslint ./src --ext .ts,.tsx --fix",
+		"test": "jest"
+	},
+	"author": "Itilite",
+	"license": "ISC",
+	"devDependencies": {
+		"@babel/core": "^7.25.9",
+		"@babel/preset-env": "^7.25.9",
+		"@babel/preset-react": "^7.25.9",
+		"@babel/preset-typescript": "^7.25.9",
+		"@rollup/plugin-commonjs": "^26.0.1",
+		"@rollup/plugin-node-resolve": "^15.2.3",
+		"@rollup/plugin-typescript": "^11.1.6",
+		"@testing-library/jest-dom": "^6.6.2",
+		"@testing-library/react": "^16.0.1",
+		"@types/jest": "^29.5.12",
+		"@types/prop-types": "^15.7.12",
+		"@types/react": "^18.3.12",
+		"@types/react-dom": "^18.3.0",
+		"@typescript-eslint/eslint-plugin": "^8.2.0",
+		"@typescript-eslint/parser": "^8.2.0",
+		"antd": "^5.20.1",
+		"autoprefixer": "^10.4.20",
+		"babel-jest": "^29.7.0",
+		"clsx": "^2.1.1",
+		"eslint": "^9.9.0",
+		"eslint-config-standard-with-typescript": "^43.0.1",
+		"eslint-define-config": "^2.1.0",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-react": "^7.35.0",
+		"eslint-plugin-react-hooks": "^5.1.0-rc.0",
+		"eslint-plugin-simple-import-sort": "^12.1.1",
+		"eslint-plugin-unused-imports": "^4.1.3",
+		"identity-obj-proxy": "^3.0.0",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"postcss": "^8.4.41",
+		"postcss-scss": "^4.0.9",
+		"prop-types": "^15.8.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"rollup": "^4.21.0",
+		"rollup-plugin-dts": "^6.1.1",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-scss": "^4.0.0",
+		"sass": "^1.77.8",
+		"tailwindcss": "^3.4.10",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.3"
+	},
+	"peerDependencies": {
+		"react": ">=18"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Itilite/design-system.git"
+	},
+	"keywords": [
+		"Design",
+		"system",
+		"LuminaUI",
+		"Frontend"
+	],
+	"bugs": {
+		"url": "https://github.com/Itilite/design-system/issues"
+	},
+	"homepage": "https://github.com/Itilite/design-system#readme"
+}

package/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

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

@@ -65,6 +65,7 @@ const Button: React.FC<ButtonProps> = (props) => {
 			disabled={disabled}
 			loading={loading}
 			href={href || undefined}
+			data-testid='lumina-button'
 		>
 			{children}
 		</AntButton>
@@ -77,7 +78,7 @@ Button.propTypes = {
 	variant: PropTypes.oneOf(["subtle", "text", "link"]),
 	size: PropTypes.oneOf(["large", "small"]),
 	shape: PropTypes.oneOf(["circle", "default", "round"]),
-	icon: PropTypes.node,
+	icon: PropTypes.element,
 	iconPosition: PropTypes.oneOf(["start", "end"]),
 	className: PropTypes.string,
 	onClick: PropTypes.func,

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

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

@@ -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;
+	}
+}