Merge pull request #301 from ashik-75/work

Fix issue & refactor code

ui/TESTING.md

@@ -11,6 +11,7 @@
 | 7   | Avatar             | Yes    |
 | 8   | Sorting            | Yes    |
 | 9   | Text Editor        | Yes    |
+| 10  | News               | Yes    |
 
 | No  | Name                     | Status |
 | --- | ------------------------ | ------ |
@@ -28,6 +29,7 @@
 | 1   | Footer | Yes    |
 | 2   | Menu   | Yes    |
 
-| No  | Name   | Status |
-| --- | ------ | ------ |
-| 3   | Hedaer | No     |
+| No  | Name             | Status |
+| --- | ---------------- | ------ |
+| 3   | Hedaer           | No     |
+| 4   | ListSearchResult | Yes    |

ui/src/components/RenderProps/ListSearchResults/tests/ListSearchResult.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import ListSearchResults from "components/RenderProps/ListSearchResults";
+import { API_ERROR, API_LOADING, API_NO_DATA } from "lib/utils/constants";
+import { MemoryRouter } from "react-router-dom";
+
+describe("ListSearchResults Component", () => {
+	it("renders an error message when isError is true", () => {
+		render(
+			<MemoryRouter>
+				<ListSearchResults
+					items={[]}
+					resourceName="news"
+					itemComponent={() => <div>Item Component</div>}
+					isLoading={false}
+					isError={true}
+				/>
+			</MemoryRouter>
+		);
+
+		const errorMessage = screen.getByText(API_ERROR);
+		expect(errorMessage).toBeInTheDocument();
+	});
+
+	it("renders a 'No Data' message when there are no items and isError is false", () => {
+		render(
+			<MemoryRouter>
+				<ListSearchResults
+					items={[]}
+					resourceName="news"
+					itemComponent={() => <div>Item Component</div>}
+					isLoading={false}
+					isError={false}
+				/>
+			</MemoryRouter>
+		);
+
+		const noDataMessage = screen.getByText(API_NO_DATA);
+		expect(noDataMessage).toBeInTheDocument();
+	});
+
+	it("renders loading state when isLoading is true", () => {
+		render(
+			<MemoryRouter>
+				<ListSearchResults
+					items={[]}
+					resourceName="news"
+					itemComponent={() => <div>Item Component</div>}
+					isLoading={true}
+					isError={false}
+				/>
+			</MemoryRouter>
+		);
+
+		const loadingElement = screen.queryByDisplayValue(API_LOADING);
+		const noDataMessage = screen.queryByDisplayValue(API_NO_DATA);
+
+		expect(loadingElement).not.toBeInTheDocument();
+		expect(noDataMessage).not.toBeInTheDocument();
+	});
+});

ui/src/index.css

@@ -105,3 +105,7 @@ h5 {
 	/* can we do better? */
 	border-radius: 10px 10px 0px 0px !important;
 }
+
+.ant-select-selection-search-input {
+	font-size: 16px;
+}

ui/src/pages/About/utils/constants.tsx

@@ -182,6 +182,13 @@ const FEATURE_DATA: Feature[] = [
 		link: "/colors/shades",
 		library: [{ name: "values.js", url: LIBRARY_URLS["values.js"] }],
 	},
+	{
+		key: "15",
+		name: "Border Radius",
+		description: "Choose your desired border radius",
+		link: "/css/br",
+		library: [{ name: "faker.js", url: LIBRARY_URLS["faker-js"] }],
+	},
 	{
 		key: "3",
 		name: "Base 64 Converter",

ui/src/pages/CSS/BorderRadius/index.tsx

@@ -11,6 +11,7 @@ import {
 } from "components/General/FormComponents";
 import { BORDER_STYLES, SEGMENTED_OPTIONS } from "./utils/constants";
 import ColorPickerWithInput from "components/General/ColorPickerWithInput";
+import InputGrid from "components/Layouts/InputGrid";
 
 const PARAGRAPHS = faker.lorem.paragraph(7);
 
@@ -42,7 +43,7 @@ const BorderRadius = () => {
 		<PageGrid className={style.br}>
 			<Card>
 				<Form layout="vertical">
-					<PageGrid>
+					<InputGrid>
 						<ColorPickerWithInput
 							label="Color"
 							value={borderColor}
@@ -59,9 +60,10 @@ const BorderRadius = () => {
 								options={BORDER_STYLES}
 							/>
 						</Form.Item>
-					</PageGrid>
+					</InputGrid>
 
 					<ResponsiveSegementWithLabel
+						label="Radius type"
 						value={borderType}
 						onChange={(value: string | number) =>
 							setBorderType(value as string)

ui/src/pages/Data/Avatar/Avatar.module.scss

@@ -1,6 +1,6 @@
 .avatar {
 	&__output {
-		min-height: 330px;
+		min-height: 424px;
 		display: flex;
 		align-items: center;
 		justify-content: center;

ui/src/pages/Data/Avatar/index.tsx

@@ -9,16 +9,25 @@ import {
 } from "components/General/FormComponents";
 import PageGrid from "components/Layouts/PageGrid";
 import { useRef, useState } from "react";
-import { AVATAR_SHAPE_SEGMENTED_OPTIONS, AvatarShape } from "./utils/constants";
+import {
+	AVATAR_SHAPE_SEGMENTED_OPTIONS,
+	AvatarShape,
+	AvatarShapeType,
+} from "./utils/constants";
 import InputGrid from "components/Layouts/InputGrid";
 import style from "./Avatar.module.scss";
 
 const Avatar = () => {
 	const [text, setText] = useState<string>("AR");
-	const [textColor, setTextColor] = useState<string>("");
-	const [bgColor, setBgColor] = useState<string>("");
-	const [shapeType, setShapeType] = useState<AvatarShape>(AvatarShape.Circle);
-	const [size, setSize] = useState<number>(50);
+	const [textColor, setTextColor] = useState<string>(
+		"rgba(255, 255, 255, 1)"
+	);
+	const [bgColor, setBgColor] = useState<string>("rgba(0, 0, 0, 0.25)");
+	const [shapeType, setShapeType] = useState<AvatarShapeType>(
+		AvatarShape.Circle
+	);
+	const [avatarSize, setAvatarSize] = useState<number>(200);
+	const [fontSize, setFontSize] = useState<number>(50);
 	const [customBorderRadius, setCustomBorderRadius] = useState<number>(0);
 
 	const domEl = useRef<HTMLDivElement>(null);
@@ -60,26 +69,34 @@ const Avatar = () => {
 					</InputGrid>
 
 					<InputGrid>
-						<ResponsiveSegementWithLabel
-							value={shapeType}
-							label="Avatar shape"
-							options={AVATAR_SHAPE_SEGMENTED_OPTIONS}
-							onChange={(value) => {
-								if (value) {
-									setShapeType(value as AvatarShape);
-								}
-							}}
-						/>
-
 						<ResponsiveInputWithLabel
 							label="Avatar size"
 							placeholder="Enter avatar size"
-							value={size}
-							onChange={(val) => setSize(val || 0)}
+							value={avatarSize}
+							onChange={(val) => setAvatarSize(val || 0)}
+							type="number"
+						/>
+
+						<ResponsiveInputWithLabel
+							label="Font size"
+							placeholder="Enter font size"
+							value={fontSize}
+							onChange={(val) => setFontSize(val || 0)}
 							type="number"
 						/>
 					</InputGrid>
 
+					<ResponsiveSegementWithLabel
+						value={shapeType}
+						label="Avatar shape"
+						options={AVATAR_SHAPE_SEGMENTED_OPTIONS}
+						onChange={(value) => {
+							if (value) {
+								setShapeType(value as AvatarShapeType);
+							}
+						}}
+					/>
+
 					{shapeType === AvatarShape.Custom && (
 						<Form.Item label="Avatar border radius">
 							<Slider
@@ -99,17 +116,16 @@ const Avatar = () => {
 				<Space direction="vertical" align="center" size={"large"}>
 					<AntAvatar
 						ref={domEl}
-						size={size}
-						shape={
-							shapeType as AvatarShape.Circle | AvatarShape.Square
-						}
+						size={avatarSize}
+						shape={shapeType as "circle" | "square"}
 						style={{
 							backgroundColor: bgColor,
 							color: textColor,
 							borderRadius:
 								shapeType === "custom"
 									? `${customBorderRadius}px`
 									: "",
+							fontSize,
 						}}
 					>
 						{text}

ui/src/pages/Data/Avatar/utils/constants.ts

@@ -1,13 +1,17 @@
-enum AvatarShape {
-	Circle = "circle",
-	Square = "square",
-	Custom = "custom",
-}
+const AvatarShape = {
+	Circle: "circle",
+	Square: "square",
+	Custom: "custom",
+};
+
+type AvatarShapeType = (typeof AvatarShape)[keyof typeof AvatarShape];
 
 const AVATAR_SHAPE_SEGMENTED_OPTIONS = [
 	{ label: "Circle", value: AvatarShape.Circle },
 	{ label: "Square", value: AvatarShape.Square },
 	{ label: "Custom", value: AvatarShape.Custom },
 ];
 
+export type { AvatarShapeType };
+
 export { AVATAR_SHAPE_SEGMENTED_OPTIONS, AvatarShape };

ui/src/pages/Data/DataGenerator/DataGenerator.module.scss

@@ -26,5 +26,6 @@
 		display: grid;
 		row-gap: 10px;
 		grid-template-columns: 1fr;
+		overflow-x: auto;
 	}
 }

ui/src/pages/Markdown/TableOfContent/TableOfContent.module.scss

@@ -1,4 +1,7 @@
 .toc {
+	height: calc(100dvh - 70px);
+	overflow: hidden;
+
 	&__output {
 		display: grid;
 		gap: var(--bt-size-30);

ui/src/pages/Markdown/TableOfContent/index.tsx

@@ -94,7 +94,7 @@ const TableOfContent: React.FC = () => {
 	};
 
 	return (
-		<PageGrid>
+		<PageGrid className={style.toc}>
 			<Card>
 				<Form layout="vertical">
 					<CopyInput>
@@ -120,7 +120,7 @@ const TableOfContent: React.FC = () => {
 							onChange={(event) =>
 								onMarkdownChange(event.currentTarget.value)
 							}
-							rows={20}
+							rows={10}
 						/>
 					</Form.Item>
 				</Form>
@@ -134,7 +134,7 @@ const TableOfContent: React.FC = () => {
 					/>
 
 					<Form.Item label="Output">
-						<TextArea value={tableOfContents} rows={20} />
+						<TextArea value={tableOfContents} rows={10} />
 					</Form.Item>
 				</Form>
 			</Card>

ui/src/pages/News/tests/News.test.tsx

@@ -0,0 +1,9 @@
+import { render } from "@testing-library/react";
+import { News } from "pages/pages";
+import { describe, test } from "vitest";
+
+describe("test news component", () => {
+	test("render component withoud crash", () => {
+		render(<News />);
+	});
+});