Merge remote-tracking branch 'upstream/main' into work

ui/src/components/General/Search/CategoryTags/utils/helper.ts

@@ -1,4 +1,4 @@
-import { QUERY_KEY_NEWS } from "pages/News";
+import { QUERY_KEY_NEWS } from "pages/Newsfeed";
 import { ResourceType } from "components/General/ListItems/Resource/utils/types";
 
 const getCategories = <T extends ResourceType>(

ui/src/components/General/Search/index.tsx

@@ -1,6 +1,6 @@
 import { Input } from "antd";
 import style from "./search.module.scss";
-import { QUERY_KEY_NEWS } from "pages/News";
+import { QUERY_KEY_NEWS } from "pages/Newsfeed";
 import { useSearchParams } from "react-router-dom";
 import CategoryTags from "./CategoryTags";
 import { useState, useEffect, ChangeEvent } from "react";

ui/src/components/Layouts/Menu/utils/constants.ts

@@ -5,6 +5,12 @@ import { getItem } from "components/Layouts/Menu/utils/helper";
 const IN_DEVELOPMENT = import.meta.env.DEV;
 
 export const MENU_ITEMS = [
+	{
+		name: "Newsfeed",
+		icon: "Newspaper",
+		show: true,
+		children: [],
+	},
 	{
 		name: "Colors",
 		icon: "Brush",
@@ -36,7 +42,7 @@ export const MENU_ITEMS = [
 				show: true,
 			},
 			{
-				name: "Border Shadow",
+				name: "Box Shadow",
 				url: "/css/bs",
 				icon: "Box",
 				show: IN_DEVELOPMENT,
@@ -255,15 +261,17 @@ const ITEMS: MenuProps["items"] = [
 			item.name,
 			item.name as React.Key,
 			item.icon as IconName,
-			item.children
-				.filter((item) => item.show)
-				.map((child) =>
-					getItem(
-						child.name,
-						child.url as React.Key,
-						child.icon as IconName
-					)
-				)
+			item.children.length > 0
+				? item.children
+						.filter((childItem) => childItem.show)
+						.map((child) =>
+							getItem(
+								child.name,
+								child.url as React.Key,
+								child.icon as IconName
+							)
+						)
+				: undefined
 		);
 	}),
 ];

ui/src/components/RenderProps/ListSearchResults/index.tsx

@@ -1,7 +1,7 @@
 import { useSearchParams } from "react-router-dom";
 import style from "./ListSearchResults.module.scss";
 import { ResourceType } from "components/General/ListItems/Resource/utils/types";
-import { QUERY_KEY_NEWS } from "pages/News";
+import { QUERY_KEY_NEWS } from "pages/Newsfeed";
 import Search from "components/General/Search";
 import { getCategories } from "components/General/Search/CategoryTags/utils/helper";
 import { ListSearchResultsProps } from "./utils/types";

ui/src/index.css

@@ -51,9 +51,10 @@ h5 {
 	padding-left: 20px !important;
 	padding-right: 20px !important;
 }
+
 .ant-menu-item {
 	/* can we do better? */
-	padding-left: 32px !important;
+	padding-left: 42px !important;
 }
 
 .ant-layout-content,

ui/src/lib/utils/hooks/useUrlParams.ts

@@ -27,13 +27,13 @@ const useUrlParams = (initialParams: Params) => {
 		}
 	}, [searchParams, initialParams, params]);
 
-	const updateUrlParam = (key: string, value: string | number) => {
+	const updateParams = (key: string, value: string | number) => {
 		searchParams.set(key, String(value));
 		setSearchParams(searchParams);
 		setParams((prevParams) => ({ ...prevParams, [key]: value }));
 	};
 
-	return [params, updateUrlParam, searchParams] as const;
+	return [params, updateParams, searchParams] as const;
 };
 
 export default useUrlParams;

ui/src/pages/Colors/ColorPicker/index.tsx

@@ -15,13 +15,14 @@ import useUrlParams from "lib/utils/hooks/useUrlParams";
 import { ResponsiveInputWithLabel } from "components/General/FormComponents";
 
 const ColorPicker: React.FC = () => {
-	const [params, updateUrlParam, searchParams] = useUrlParams({
+	const [params, updateParams, searchParams] = useUrlParams({
 		color: INITIAL_COLOR,
 	});
 
 	const [color, setColor] = useState(
 		searchParams.get("color") || (params.color as string)
 	);
+
 	const [format, setFormat] = useState<FormatType>(
 		determineFormat(color) || INITIAL_FORMAT
 	);
@@ -35,7 +36,7 @@ const ColorPicker: React.FC = () => {
 	};
 
 	useEffect(() => {
-		updateUrlParam("color", color);
+		updateParams("color", color);
 	}, [color]);
 
 	return (

ui/src/pages/Home/Home.module.scss

@@ -0,0 +1,6 @@
+.home {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: var(--bt-full-page-height);
+}

ui/src/pages/Home/index.tsx

@@ -0,0 +1,12 @@
+import Text from "components/General/Text/Text";
+import style from "./Home.module.scss";
+
+const Home = () => {
+	return (
+		<div className={style.home}>
+			<Text text="Next-generation developer tools" level={1} />
+		</div>
+	);
+};
+
+export default Home;

ui/src/pages/info/Mimetype/index.tsx → ui/src/pages/Info/Mimetype/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import useFetchList from "lib/utils/hooks/useFetchList";
-import MimeSearchResult from "./components/MimeSearchResult";
 import { MIME_KEY, MIME_URL } from "./utils/constants";
+import MimeSearchResult from "./components/MimeSearchResult";
 
 const Mimetype: React.FC = () => {
 	const { data, isError, isLoading } = useFetchList(MIME_KEY, MIME_URL);

ui/src/pages/info/Mimetype/utils/constants.tsx → ui/src/pages/Info/Mimetype/utils/constants.tsx

@@ -4,7 +4,7 @@ import { Tag } from "antd";
 import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
 const MIME_URL = "/mime/data.json";
 const MIME_KEY = "mimetype";
-// Column
+
 const MIME_COLUMNS: ColumnsType<MimeTableDataType> = [
 	{
 		title: "Name",
@@ -27,7 +27,7 @@ const MIME_COLUMNS: ColumnsType<MimeTableDataType> = [
 		},
 	},
 	{
-		title: "Code",
+		title: "JavaScript code",
 		dataIndex: "code",
 		key: "code",
 		width: 200,

ui/src/pages/News/index.tsx → ui/src/pages/Newsfeed/index.tsx

@@ -5,7 +5,7 @@ import ListSearchResults from "components/RenderProps/ListSearchResults";
 const URL = `https://raw.githubusercontent.com/lifeparticle/binarytree/main/api/news.json`;
 export const QUERY_KEY_NEWS = "news";
 
-const NewsPage = () => {
+const Newsfeed = () => {
 	const { data, isLoading, isError } = useFetchList(QUERY_KEY_NEWS, URL);
 
 	return (
@@ -19,4 +19,4 @@ const NewsPage = () => {
 	);
 };
 
-export default NewsPage;
+export default Newsfeed;

ui/src/pages/Routes/utils/constant.tsx

@@ -1,43 +1,49 @@
 import { Route } from "./types";
 import {
 	About,
+	Avatar,
 	Base64,
 	Blog,
 	Book,
 	BorderRadius,
 	BoxShadow,
 	ColorPicker,
 	Course,
-	DesignSystem,
 	DataGenerator,
+	DesignSystem,
 	Feedback,
 	Github,
+	Home,
 	Icon,
 	ImageGeneratorFromColors,
 	JsonToTypescript,
 	MarkdownEditor,
+	Mimetype,
 	Movie,
 	News,
+	PageNotFound,
 	Pixel,
 	Platform,
 	Plugin,
+	QRcode,
 	ShadesAndTints,
 	Sorting,
+	SvgFormatter,
 	TableGenerator,
 	TableOfContent,
 	TextEditor,
 	Tool,
 	TvSeries,
 	UiUx,
 	YouTube,
-	Avatar,
-	PageNotFound,
-	Mimetype,
-	QRcode,
-	SvgFormatter,
 } from "pages/pages";
 
 const routes: Route[] = [
+	{
+		path: "/newsfeed",
+		title: "Newsfeed",
+		component: News,
+	},
 	{
 		path: "/colors/cp",
 		title: "Color Picker",
@@ -55,7 +61,7 @@ const routes: Route[] = [
 	},
 	{
 		path: "/css/bs",
-		title: "Border Shadow",
+		title: "Box Shadow",
 		component: BoxShadow,
 	},
 	{
@@ -195,8 +201,8 @@ const routes: Route[] = [
 	},
 	{
 		path: "/",
-		title: "Dashboard",
-		component: News,
+		title: "",
+		component: Home,
 	},
 	{
 		path: "/about",

ui/src/pages/pages.ts

@@ -1,26 +1,29 @@
 import { lazy } from "react";
 
+const Home = lazy(() => import("pages/Home"));
+const News = lazy(() => import("pages/Newsfeed"));
 const About = lazy(() => import("pages/About"));
 const Feedback = lazy(() => import("pages/Feedback"));
+const PageNotFound = lazy(() => import("pages/PageNotFound"));
 
 const ColorPicker = lazy(() => import("pages/Colors/ColorPicker"));
 const ShadesAndTints = lazy(() => import("pages/Colors/ShadesAndTints"));
 
 const BorderRadius = lazy(() => import("pages/CSS/BorderRadius"));
 const BoxShadow = lazy(() => import("pages/CSS/BoxShadow"));
+const SvgFormatter = lazy(() => import("pages/CSS/SvgFormatter"));
 
 const Base64 = lazy(() => import("pages/Converter/Base64"));
 const Pixel = lazy(() => import("pages/Converter/Pixel"));
 const JsonToTypescript = lazy(() => import("pages/Converter/JsonToTypescript"));
 
 const DataGenerator = lazy(() => import("pages/Data/DataGenerator"));
-const Avatar = lazy(() => import("pages/Data/Avatar"));
 const ImageGeneratorFromColors = lazy(
 	() => import("pages/Data/ImageGeneratorFromColors")
 );
-const Sorting = lazy(() => import("pages/Data/Sorting"));
+const Avatar = lazy(() => import("pages/Data/Avatar"));
 const QRcode = lazy(() => import("pages/Data/QRcode"));
-const SvgFormatter = lazy(() => import("pages/CSS/SvgFormatter"));
+const Sorting = lazy(() => import("pages/Data/Sorting"));
 
 const Blog = lazy(() => import("pages/List/Blog"));
 const Book = lazy(() => import("pages/List/Book"));
@@ -42,46 +45,43 @@ const TableOfContent = lazy(() => import("pages/Markdown/TableOfContent"));
 
 const TextEditor = lazy(() => import("pages/Text/TextEditor"));
 
-const Mimetype = lazy(() => import("pages/info/Mimetype"));
-
-const News = lazy(() => import("pages/News"));
-
-const PageNotFound = lazy(() => import("pages/PageNotFound"));
+const Mimetype = lazy(() => import("pages/Info/Mimetype"));
 
 export {
 	About,
+	Avatar,
 	Base64,
 	Blog,
 	Book,
 	BorderRadius,
 	BoxShadow,
 	ColorPicker,
 	Course,
-	DesignSystem,
 	DataGenerator,
+	DesignSystem,
 	Feedback,
 	Github,
+	Home,
 	Icon,
 	ImageGeneratorFromColors,
-	Avatar,
-	QRcode,
 	JsonToTypescript,
 	MarkdownEditor,
+	Mimetype,
 	Movie,
 	News,
+	PageNotFound,
 	Pixel,
 	Platform,
 	Plugin,
+	QRcode,
 	ShadesAndTints,
 	Sorting,
+	SvgFormatter,
 	TableGenerator,
 	TableOfContent,
 	TextEditor,
 	Tool,
 	TvSeries,
 	UiUx,
 	YouTube,
-	Mimetype,
-	SvgFormatter,
-	PageNotFound,
 };