feat: navigation for command palette (#150)

* feat: add dotenv to dev dep

* chore: jest use env

* feat

* feat: command palette navigation

web/lib/utils/htmlLikeElementUtil.test.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { HTMLLikeElement, renderHTMLLikeElement } from "./htmlLikeElementUtil"
+
+const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = ({ content }) => {
+	return <>{renderHTMLLikeElement(content)}</>
+}
+
+describe("HTML-like Element Utility", () => {
+	test("HTMLLikeRenderer renders simple string content", () => {
+		const { getByText } = render(<HTMLLikeRenderer content="Hello, World!" />)
+		expect(getByText("Hello, World!")).toBeTruthy()
+	})
+
+	test("HTMLLikeRenderer renders HTML-like structure", () => {
+		const content: HTMLLikeElement = {
+			tag: "div",
+			attributes: { className: "test-class" },
+			children: ["Hello, ", { tag: "strong", children: ["World"] }, "!"]
+		}
+		const { container, getByText } = render(<HTMLLikeRenderer content={content} />)
+		expect(container.firstChild).toHaveProperty("className", "test-class")
+		const strongElement = getByText("World")
+		expect(strongElement.tagName.toLowerCase()).toBe("strong")
+	})
+
+	test("HTMLLikeRenderer handles multiple attributes", () => {
+		const content: HTMLLikeElement = {
+			tag: "div",
+			attributes: {
+				className: "test-class",
+				id: "test-id",
+				"data-testid": "custom-element",
+				style: { color: "red", fontSize: "16px" }
+			},
+			children: ["Test Content"]
+		}
+		const { getByTestId } = render(<HTMLLikeRenderer content={content} />)
+		const element = getByTestId("custom-element")
+		expect(element.className).toBe("test-class")
+		expect(element.id).toBe("test-id")
+		expect(element.style.color).toBe("red")
+		expect(element.style.fontSize).toBe("16px")
+	})
+})

web/lib/utils/htmlLikeElementUtil.ts

@@ -0,0 +1,21 @@
+import React from "react"
+
+export type HTMLAttributes = React.HTMLAttributes<HTMLElement> & {
+	[key: string]: any
+}
+
+export type HTMLLikeElement = {
+	tag: keyof JSX.IntrinsicElements
+	attributes?: HTMLAttributes
+	children?: (HTMLLikeElement | string)[]
+}
+
+export const renderHTMLLikeElement = (element: HTMLLikeElement | string): React.ReactNode => {
+	if (typeof element === "string") {
+		return element
+	}
+
+	const { tag, attributes = {}, children = [] } = element
+
+	return React.createElement(tag, attributes, ...children.map(child => renderHTMLLikeElement(child)))
+}

web/lib/utils/index.ts

@@ -37,3 +37,4 @@ export function shuffleArray<T>(array: T[]): T[] {
 export * from "./urls"
 export * from "./slug"
 export * from "./keyboard"
+export * from "./htmlLikeElementUtil"