@itilite/lumina-ui 0.0.1 → 0.0.3

package/dist/esm/types/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/components/Switch/index.d.ts

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

package/dist/esm/types/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/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/components/Tooltip/index.d.ts

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

package/dist/esm/types/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/components/index.d.ts

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

package/dist/types/components/Button/Button.d.ts

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

package/dist/types/components/Button/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Button/index.d.ts

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

package/dist/{index.d.ts → types/components/Button/types.d.ts}

@@ -1,6 +1,4 @@
-import * as React$1 from 'react';
-
-interface ButtonProps {
+export interface ButtonProps {
     type?: "primary" | "secondary" | "critical" | undefined;
     variant?: "subtle" | "text" | "link";
     size?: "large" | "small";
@@ -16,7 +14,3 @@ interface ButtonProps {
     onHoverUnderline?: boolean;
     analytics?: Record<string, unknown>;
 }
-
-declare const Button: React$1.FC<ButtonProps>;
-
-export { Button };

package/dist/types/components/Checkbox/Checkbox.d.ts

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

package/dist/types/components/Checkbox/index.d.ts

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

package/dist/types/components/Checkbox/types.d.ts

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

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

package/dist/types/components/Modal/index.d.ts

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

package/dist/types/components/Modal/types.d.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/dist/types/components/Radio/Radio.d.ts

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

package/dist/types/components/Radio/index.d.ts

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

package/dist/types/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/types/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/types/components/Switch/index.d.ts

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

package/dist/types/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/types/components/Tooltip/Tooltip.d.ts

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

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

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

package/dist/types/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/types/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/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+	preset: "ts-jest",
+	setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+	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,89 @@
 {
-  "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.3",
+	"description": "Design system",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"types": "dist/types/index.d.ts",
+	"scripts": {
+		"build:types": "tsc --emitDeclarationOnly",
+		"build": "rollup -c",
+		"build:all": "rollup -c && tsc --emitDeclarationOnly",
+		"dev": "rollup -c -w",
+		"lint": "eslint ",
+		"lint:fix": "eslint ./src --ext .ts,.tsx --fix",
+		"test": "jest",
+		"publish": "npm init --scope=itilite && npm publish"
+	},
+	"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"
+	},
+	"jest": {
+		"setupFilesAfterEnv": [
+			"<rootDir>/src/setupTests.ts"
+		],
+		"testEnvironment": "jsdom"
+	},
+	"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/rollup.config.mjs

@@ -49,10 +49,10 @@ export default [
 		],
 		external: id => /^react|react-dom/.test(id), // Ignore react and react-dom from node_modules
 	},
-	{
-		input: "dist/esm/types/index.d.ts",
-		output: [{ file: "dist/index.d.ts", format: "esm" }],
-		plugins: [dts()],
-		external: [/\.css$/],
-	},
+	// {
+	// 	input: "dist/esm/types/src/index.d.ts",
+	// 	output: [{ file: "dist/index.d.ts", format: "esm" }],
+	// 	plugins: [dts()],
+	// 	external: [/\.css$/],
+	// },
 ];

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