slick-table 0.0.1

package/src/shared/lib/stringCalculator/stringCalculator.spec.ts

@@ -0,0 +1,16 @@
+//@ts-nocheck
+import { stringCalculator } from "./stringCalculator";
+
+describe("stringCalculator", () => {
+	test("must return correct value", () => {
+		expect(stringCalculator.parse("0")).toBe(0);
+		expect(stringCalculator.parse("1 +3/2*3")).toBe(5.5);
+		expect(stringCalculator.parse("1--3")).toBe(4);
+		expect(stringCalculator.parse("-1*-3")).toBe(3);
+		expect(stringCalculator.parse("-1*3")).toBe(-3);
+		expect(stringCalculator.parse("-1/0")).toBe(-Infinity);
+		expect(stringCalculator.parse("-1/0")).toBe(-Infinity);
+		expect(stringCalculator.parse("-0/2")).toBe(-0);
+		expect(stringCalculator.parse("0/2")).toBe(0);
+	});
+});

package/src/shared/lib/strings/deleteDoubleQuotes.spec.ts

@@ -0,0 +1,11 @@
+import { deleteDoubleQuotes } from "./deleteDoubleQuotes";
+
+test("Return expected values", () => {
+	expect(deleteDoubleQuotes('"50000"')).toBe("50000");
+	expect(deleteDoubleQuotes(50000)).toBe("50000");
+	expect(deleteDoubleQuotes(0)).toBe("0");
+	expect(deleteDoubleQuotes(null)).toBe("");
+	expect(deleteDoubleQuotes(undefined)).toBe("");
+	expect(deleteDoubleQuotes("")).toBe("");
+	expect(deleteDoubleQuotes(NaN)).toBe("");
+});

package/src/shared/lib/strings/deleteDoubleQuotes.ts

@@ -0,0 +1,5 @@
+export const deleteDoubleQuotes = (value?: string | number | null): string => {
+	if (value !== value) return ""; // if value is NaN
+	const str = String(value ?? "");
+	return str.replace(/(^")|("$)/g, "");
+};

package/src/shared/lib/strings/index.ts

@@ -0,0 +1,3 @@
+export { deleteDoubleQuotes } from "./deleteDoubleQuotes";
+export { removeHtml } from "./removeHtml";
+export { toStringWithCommas } from "./toStringWithCommas";

package/src/shared/lib/strings/removeHtml.spec.ts

@@ -0,0 +1,29 @@
+import { removeHtml } from "./removeHtml";
+
+describe("removeHtml", () => {
+	it("should remove HTML tags from a string", () => {
+		const input = "<div>Hello <strong>World</strong></div>";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should return an empty string if input is an empty string", () => {
+		const input = "";
+		const output = "";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should handle strings without HTML tags", () => {
+		const input = "Hello World";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should handle nested HTML tags", () => {
+		const input = "<div><p>Hello <span>World</span></p></div>";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+	it("should handle self-closing tags", () => {
+		const input = "<div>Hello <br/>World</div>";
+		const output = "Hello World";
+		expect(removeHtml(input)).toBe(output);
+	});
+});

package/src/shared/lib/strings/removeHtml.ts

@@ -0,0 +1,5 @@
+export function removeHtml(str: string): string {
+	const tmp = document.createElement("div");
+	tmp.innerHTML = str;
+	return tmp.textContent || tmp.innerText || "";
+}

package/src/shared/lib/strings/toStringWithCommas.spec.ts

@@ -0,0 +1,16 @@
+import { toStringWithCommas } from "./toStringWithCommas";
+
+test("Return expected values", () => {
+	expect(toStringWithCommas("50000")).toBe("50,000");
+	expect(toStringWithCommas("-50000")).toBe("-50,000");
+	expect(toStringWithCommas("5.0002")).toBe("5.0002");
+	expect(toStringWithCommas(1005.0002)).toBe("1,005.0002");
+	expect(toStringWithCommas(-1005.0002)).toBe("-1,005.0002");
+	expect(toStringWithCommas("1,000.123")).toBe("1,000.123");
+	expect(toStringWithCommas("")).toBe("");
+	expect(toStringWithCommas(0)).toBe("0");
+	expect(toStringWithCommas("0")).toBe("0");
+	expect(toStringWithCommas(".")).toBe("0");
+	expect(toStringWithCommas("0.00")).toBe("0.00");
+	expect(toStringWithCommas("sdfg")).toBe("0");
+});

package/src/shared/lib/strings/toStringWithCommas.ts

@@ -0,0 +1,15 @@
+export const toStringWithCommas = (value: string | number): string => {
+	const valueWithoutCommas =
+		typeof value === "number" ? value : value.replace(/,/g, "");
+	if (isNaN(+valueWithoutCommas)) return "0";
+	const stringValue = String(valueWithoutCommas);
+	const [integerPart, fractionalPart] = stringValue.split(".");
+	const integerPartWithCommas = integerPart.replace(
+		/\B(?=(\d{3})+(?!\d))/g,
+		",",
+	);
+	const fractionalPartWithoutCommas = fractionalPart
+		? `.${fractionalPart}`
+		: "";
+	return `${integerPartWithCommas}${fractionalPartWithoutCommas}`;
+};

package/src/shared/model/consts/columnId.ts

@@ -0,0 +1 @@
+export const CHECKBOX_SELECTOR = "checkboxSelector";

package/src/shared/model/consts/dateFormats.ts

@@ -0,0 +1,5 @@
+import moment from "moment";
+
+import { EDateFormat } from "shared/model/enums";
+
+export const dateFormats = [moment.ISO_8601, EDateFormat.ui, EDateFormat.db];

package/src/shared/model/consts/index.ts

@@ -0,0 +1,4 @@
+export { CHECKBOX_SELECTOR } from "./columnId";
+export { dateFormats } from "./dateFormats";
+export { INVALID_DATE } from "./invalidDate";
+export { NO_PRIVILEGES_MESSAGE } from "./noPrivilegesMessage";

package/src/shared/model/consts/invalidDate.ts

@@ -0,0 +1 @@
+export const INVALID_DATE = "Invalid date";

package/src/shared/model/consts/noPrivilegesMessage.ts

@@ -0,0 +1 @@
+export const NO_PRIVILEGES_MESSAGE = "You do not have sufficient privileges";

package/src/shared/model/enums/EColumnFilter.ts

@@ -0,0 +1,16 @@
+export enum EColumnFilter {
+	"Boolean" = 1,
+	"DateBetween",
+	"DateEqual",
+	"DateFrom",
+	"DateTo",
+	"MultipleSelect",
+	"NumberBetween",
+	"NumberEqual",
+	"NumberFrom",
+	"NumberTo",
+	"TextContain",
+	"TextEqual",
+	"TextNotContain",
+	"TextNotEqual",
+}

package/src/shared/model/enums/EColumnFiltersGroup.ts

@@ -0,0 +1,10 @@
+export enum EColumnFiltersGroup {
+	Boolean = "Boolean",
+	Date = "Date",
+	MultipleSelect = "MultipleSelect",
+	/** Don't take into account column formatter while filtering */
+	Number = "Number",
+	/** Take into account column formatter while filtering */
+	NumberFormatted = "NumberFormatted",
+	Text = "Text",
+}

package/src/shared/model/enums/EDateFormat.ts

@@ -0,0 +1,11 @@
+/**
+ * Enum for date format.
+ * @readonly
+ * @enum {string}
+ * */
+export enum EDateFormat {
+	/** In this format dates are stored in database. */
+	db = "YYYY-MM-DD",
+	/** In this format dates are displayed for user. */
+	ui = "MM/DD/YY",
+}

package/src/shared/model/enums/EKey.ts

@@ -0,0 +1,8 @@
+export enum EKey {
+	ArrowDown = "ArrowDown",
+	ArrowLeft = "ArrowLeft",
+	ArrowRight = "ArrowRight",
+	ArrowUp = "ArrowUp",
+	Control = "Control",
+	Enter = "Enter",
+}

package/src/shared/model/enums/EKeyCode.ts

@@ -0,0 +1,8 @@
+export enum EKeyCode {
+	"KeyB" = 66,
+	"KeyDel" = 46,
+	"KeyEnter" = 13,
+	"KeyR" = 82,
+	"KeyY" = 89,
+	"KeyZ" = 90,
+}

package/src/shared/model/enums/ESortType.ts

@@ -0,0 +1,6 @@
+export enum ESortType {
+	DATE = 1,
+	NUMBER,
+	NUMBER_FORMATTED,
+	TEXT,
+}

package/src/shared/model/enums/index.ts

@@ -0,0 +1,6 @@
+export { EColumnFilter } from "./EColumnFilter";
+export { EColumnFiltersGroup } from "./EColumnFiltersGroup";
+export { EDateFormat } from "./EDateFormat";
+export { EKey } from "./EKey";
+export { EKeyCode } from "./EKeyCode";
+export { ESortType } from "./ESortType";

package/src/shared/model/types/index.ts

@@ -0,0 +1 @@
+export type { IEditedRow, TGridRow } from "./slickgrid";

package/src/shared/model/types/slickgrid/IEditedRow.ts

@@ -0,0 +1,5 @@
+export interface IEditedRow {
+	isEdited?: boolean;
+	isNew?: boolean;
+	isDeleted?: boolean;
+}

package/src/shared/model/types/slickgrid/TGridRow.ts

@@ -0,0 +1,6 @@
+export type TGridRow = {
+	id: number;
+	isDeleted?: boolean;
+	isEdited?: boolean;
+	isNew?: boolean;
+};

package/src/shared/model/types/slickgrid/index.ts

@@ -0,0 +1,2 @@
+export type { IEditedRow } from "./IEditedRow";
+export type { TGridRow } from "./TGridRow";

package/src/shared/ui/ContextSelect/ContextSelect.style.ts

@@ -0,0 +1,9 @@
+import { MenuItem, styled } from "@mui/material";
+
+const StyledMenuItem = styled(MenuItem)({
+	fontSize: "12px",
+});
+
+export default {
+	MenuItem: StyledMenuItem,
+};

package/src/shared/ui/ContextSelect/ContextSelect.tsx

@@ -0,0 +1,87 @@
+import {
+	FormControl,
+	InputLabel,
+	Select,
+	SelectChangeEvent,
+} from "@mui/material";
+import { FC } from "react";
+
+import Styled from "./ContextSelect.style";
+
+export const ContextSelect: FC<IProps> = ({
+	name,
+	list,
+	onChange,
+	defaultValue,
+	value,
+	showSelect = true,
+	dataTestId,
+	width = "12.8em",
+	height,
+	disabled = false,
+}) => {
+	return (
+		<FormControl variant="outlined" size={"small"}>
+			<InputLabel id="reportType">{name}</InputLabel>
+			<Select
+				labelId="reportType"
+				id={name}
+				label={name}
+				autoWidth={true}
+				value={`${value ?? (defaultValue || 0)}`}
+				defaultValue={`${defaultValue || 0}`}
+				onChange={onChange}
+				disabled={disabled}
+				data-testid={dataTestId}
+				MenuProps={{
+					anchorOrigin: {
+						vertical: "bottom",
+						horizontal: "left",
+					},
+					transformOrigin: {
+						vertical: "top",
+						horizontal: "left",
+					},
+					disableScrollLock: true,
+				}}
+				sx={{ height, width }}
+			>
+				{showSelect && (
+					<Styled.MenuItem value={0} id="Select">
+						Select
+					</Styled.MenuItem>
+				)}
+				{list.map((el, index: number) => (
+					<Styled.MenuItem
+						value={el.id}
+						key={index}
+						id="selectedReport"
+						disabled={el.isDisabled}
+					>
+						{el.labelForSelect || el.name}
+					</Styled.MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
+};
+
+interface IProps {
+	onChange: (event: SelectChangeEvent<string | number>) => void;
+	dataTestId?: string;
+	defaultValue?: number;
+	disabled?: boolean;
+	height?: string;
+	list: IContextSelectValue[];
+	name: string;
+	showSelect?: boolean;
+	value?: number | string;
+	width?: string;
+}
+
+export interface IContextSelectValue {
+	id: number | string;
+	name: string;
+	labelForSelect?: string;
+	isDisabled?: boolean;
+}

package/src/shared/ui/ContextSelect/index.ts

@@ -0,0 +1,2 @@
+export { ContextSelect } from "./ContextSelect";
+export type { IContextSelectValue } from "./ContextSelect";

package/src/shared/ui/notification/index.ts

@@ -0,0 +1 @@
+export { Notification, showNotification } from "./ui";

package/src/shared/ui/notification/model/index.ts

@@ -0,0 +1 @@
+export type ISeverity = "success" | "info" | "warning" | "error";

package/src/shared/ui/notification/ui/index.style.ts

@@ -0,0 +1,13 @@
+import { Alert, styled } from "@mui/material";
+
+const StyledAlert = styled(Alert)({
+	width: "100%",
+	"& .MuiAlert-message": {
+		fontSize: "0.8rem",
+	},
+	" [data-testid=CloseIcon]": {
+		fill: "white",
+	},
+});
+
+export default { Alert: StyledAlert };

package/src/shared/ui/notification/ui/index.tsx

@@ -0,0 +1,41 @@
+import Snackbar, { SnackbarCloseReason } from "@mui/material/Snackbar";
+import { SyntheticEvent, useState } from "react";
+
+import { ISeverity } from "../model";
+
+import Styled from "./index.style";
+
+export let showNotification = (
+	_message: string,
+	_severity: ISeverity,
+): void => {};
+
+export function Notification() {
+	const [open, setOpen] = useState(false);
+	const [message, setMessage] = useState("");
+	const [severity, setSeverity] = useState<ISeverity>("success");
+
+	showNotification = (message: string, type: ISeverity): void => {
+		setMessage(message);
+		setSeverity(type);
+		setOpen(true);
+	};
+
+	function handleClose(
+		_event?: SyntheticEvent | Event,
+		reason?: SnackbarCloseReason,
+	) {
+		if (reason === "clickaway") {
+			return;
+		}
+		setOpen(false);
+	}
+
+	return (
+		<Snackbar open={open} autoHideDuration={5000} onClose={handleClose}>
+			<Styled.Alert onClose={handleClose} severity={severity} variant="filled">
+				{message}
+			</Styled.Alert>
+		</Snackbar>
+	);
+}

package/src/shared/ui/styles/WithDatePickerStyles.ts

@@ -0,0 +1,11 @@
+import { Box, styled } from "@mui/material";
+
+export const WithDatePickerStyles = styled(Box)({
+	"& label[data-shrink=false]": {
+		top: "-5px",
+		fontSize: "14px",
+	},
+	"& .MuiOutlinedInput-root": {
+		height: "40px",
+	},
+});

package/src/shared/ui/styles/index.ts

@@ -0,0 +1 @@
+export { WithDatePickerStyles } from "./WithDatePickerStyles";

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.build.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [
+    "dist",
+    "src/pages",
+    "src/App.tsx",
+    "src/index.scss",
+    "src/main.tsx",
+    "src/setupTests.ts",
+    "src/vite-env.d.ts",
+    "public",
+    "node_modules",
+    "test",
+    "**/*.spec.ts",
+    "**/*.test.tsx"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "app/*": ["src/app/*"],
+      "entities/*": ["src/entities/*"],
+      "features/*": ["src/features/*"],
+      "pages/*": ["src/pages/*"],
+      "shared/*": ["src/shared/*"]
+    },
+    "target": "es2021",
+    "module": "esnext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": [".vscode", ".idea", "dist", "node_modules"]
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from "node:path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+	resolve: {
+		alias: {
+			app: path.resolve(__dirname, "src/app"),
+			pages: path.resolve(__dirname, "src/pages"),
+			widgets: path.resolve(__dirname, "src/widgets"),
+			features: path.resolve(__dirname, "src/features"),
+			entities: path.resolve(__dirname, "src/entities"),
+			shared: path.resolve(__dirname, "src/shared"),
+		},
+	},
+})