V0.3.2

apps/website/package.json

@@ -91,7 +91,8 @@
     "lint:check": "biome check ./src",
     "lint:write-unsafe": "biome check --write --unsafe ./src",
     "test": "vitest",
-    "test:watch": "vitest --watch"
+    "test:watch": "vitest --watch",
+    "type-check": "tsc --noEmit"
   },
   "version": "0.1.2"
 }

apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx → apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx

@@ -1,10 +1,10 @@
 import { notFound } from "next/navigation";
-import { fetchMultipleComponentData } from "#/src/app/(components)/[section]/[category]/process-variant-data";
+import { fetchMultipleComponentData } from "#/src/app/(site)/[section]/[category]/process-variant-data";
 import ComingSoonCard from "#/src/components/coming-soon";
 import HeaderComponent from "#/src/components/component-wrapper/header-component";
 import InspirationComponentFooter from "#/src/components/component-wrapper/inspiration-component-footer";
 import VariantTabs from "#/src/components/component-wrapper/variant-tabs";
-import type { CategoryType, SectionType } from "#/src/lib/types/component";
+import type { CategoryType, SectionType } from "@cuicui/ui/lib/types/component";
 import GithubEditButton from "#/src/components/component-wrapper/github-edit-button";
 
 export default async function MultipleComponentCategory({
@@ -56,6 +56,11 @@ export default async function MultipleComponentCategory({
 						rerenderButton={component.rerenderButton}
 						size={component.sizePreview}
 						variantList={component.componentList}
+						componentParams={{
+							sectionSlug,
+							categorySlug: category.slug,
+							componentSlug: component.slug,
+						}}
 					/>
 				</div>
 			))}

apps/website/src/app/(components)/[section]/[category]/page.tsx → apps/website/src/app/(site)/[section]/[category]/page.tsx

@@ -1,11 +1,11 @@
 import { notFound } from "next/navigation";
-import MultipleComponentCategory from "#/src/app/(components)/[section]/[category]/multiple-component-section";
-import SingleComponentCategory from "#/src/app/(components)/[section]/[category]/single-component-section";
+import MultipleComponentCategory from "#/src/app/(site)/[section]/[category]/multiple-component-section";
+import SingleComponentCategory from "#/src/app/(site)/[section]/[category]/single-component-section";
 import { SectionsList } from "@cuicui/ui";
 import type {
 	CategoryType,
 	SingleComponentCategoryType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import { findCategoryBySlug } from "#/src/utils/section-category-components-utils/find-category-by-slug";
 type Props = {
 	params: {

apps/website/src/app/(components)/[section]/[category]/process-variant-data.ts → apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts

@@ -1,17 +1,13 @@
 import type {
 	ComponentType,
+	ProcessedVariantType,
 	SingleComponentType,
 	VariantType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import { getFileContentAsString } from "#/src/utils/get-file-content-as-string";
 
-interface ProcessedVariant extends VariantType {
-	previewCode: string;
-	componentCode?: string;
-}
-
 interface ProcessedComponent extends ComponentType {
-	componentList: ProcessedVariant[];
+	componentList: ProcessedVariantType[];
 }
 
 export async function fetchVariantData({
@@ -71,7 +67,7 @@ export async function fetchMultipleComponentData({
 	const processedComponents: ProcessedComponent[] = [];
 
 	for (const component of componentList) {
-		const processedVariants: ProcessedVariant[] = [];
+		const processedVariants: ProcessedVariantType[] = [];
 
 		for (const variant of component.variantList) {
 			const processedVariant = await fetchVariantData({
@@ -100,7 +96,7 @@ export async function fetchSingleComponentData({
 	categorySlug: string;
 	component: SingleComponentType;
 }) {
-	const processedVariants: ProcessedVariant[] = [];
+	const processedVariants: ProcessedVariantType[] = [];
 
 	for (const variant of component.variantList) {
 		const processedVariant = await fetchVariantData({ categorySlug, variant });

apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx → apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx

@@ -1,13 +1,13 @@
 import { notFound } from "next/navigation";
-import { fetchSingleComponentData } from "#/src/app/(components)/[section]/[category]/process-variant-data";
+import { fetchSingleComponentData } from "#/src/app/(site)/[section]/[category]/process-variant-data";
 import ComingSoonCard from "#/src/components/coming-soon";
 import HeaderComponent from "#/src/components/component-wrapper/header-component";
 import InspirationComponentFooter from "#/src/components/component-wrapper/inspiration-component-footer";
 import VariantTabs from "#/src/components/component-wrapper/variant-tabs";
 import type {
 	SectionType,
 	SingleComponentCategoryType,
-} from "#/src/lib/types/component";
+} from "@cuicui/ui/lib/types/component";
 import GithubEditButton from "#/src/components/component-wrapper/github-edit-button";
 
 export default async function SingleComponentCategory({
@@ -27,7 +27,7 @@ export default async function SingleComponentCategory({
 
 	const component = await fetchSingleComponentData({
 		categorySlug: category.slug,
-		component: category.component,
+		component: { ...category.component },
 	});
 
 	return (
@@ -50,6 +50,10 @@ export default async function SingleComponentCategory({
 					rerenderButton={component.rerenderButton}
 					size={component.sizePreview}
 					variantList={component.componentList}
+					componentParams={{
+						sectionSlug,
+						categorySlug: category.slug,
+					}}
 				/>
 				<InspirationComponentFooter
 					inspiration={component.inspiration}

apps/website/src/app/(components)/changelog/page.tsx → apps/website/src/app/(site)/changelog/page.tsx

@@ -88,17 +88,26 @@ export default async function ProjectPage() {
 		}),
 	);
 
+	const sortedChangelogs = changelogs.sort(
+		(a, b) => b.date.getTime() - a.date.getTime(),
+	);
+
 	return (
 		<div className="cuicui-default-style">
 			<h1>Changelog</h1>
-			<section className="space-y-12">
-				{changelogs.map(({ content, date, title }) => {
+			<section className="space-y-20 m-4">
+				{sortedChangelogs.map(({ content, date, title }, index) => {
 					return (
 						<article
 							key={date.toISOString()}
 							className="[&_ul]:text-neutral-600 [&_ul]:dark:text-neutral-400"
 						>
-							<h5 className="m-0">{format(date, "do MMMM yyyy")}</h5>
+							<h5 className="m-0 inline">{format(date, "do MMMM yyyy")}</h5>
+							{index === 0 && (
+								<p className="border inline ml-4 rounded-full border-neutral-200 dark:border-neutral-800 text-xs px-2 py-0.5">
+									Latest Release
+								</p>
+							)}
 							<p className="text-neutral-500 tracking-tight text-sm">
 								{formatDistanceToNow(date, { addSuffix: true })}
 							</p>

apps/website/src/app/(site)/layout.tsx

@@ -0,0 +1,39 @@
+import { CuicuiFloatingDock } from "#/src/components/floating-dock-navigation/floating-dock";
+import { DesktopSideMenu } from "#/src/components/navigation/desktop-menu";
+
+import { AddressBar } from "#/src/ui/address-bar";
+import StarCuicuiGithubButton from "#/src/ui/star-github-project-button";
+import { StaticNoise } from "@/cuicui/other/creative-effects/animated-noise/static-noise";
+import type React from "react";
+
+export default function ComponentsLayout({
+	children,
+}: Readonly<{ children: React.ReactNode }>) {
+	return (
+		<>
+			<div className="mx-auto max-w-screen-2xl">
+				{/* Note: The noise effect is experimental and may affect the design. Consider its impact before using it officialy. */}
+				<StaticNoise
+					opacity={0.05}
+					className="z-[9999] fixed inset-0 pointer-events-none"
+				/>
+				<DesktopSideMenu />
+
+				<div className="lg:ml-80">
+					{/* Add overflow-auto if layout width problems */}
+
+					<AddressBar />
+
+					<main className=" p-4 pt-12 md:p-6">
+						<div className="space-y-10 pb-20">{children}</div>
+					</main>
+
+					<div className="flex sm:hidden fixed bottom-6 left-2">
+						<StarCuicuiGithubButton />
+					</div>
+				</div>
+			</div>
+			<CuicuiFloatingDock />
+		</>
+	);
+}

apps/website/src/app/api/get-components/get-components.utils.ts

@@ -52,9 +52,6 @@ export function extractComponents(node: FileSystemNode): ComponentType[] {
 			description: node.config.description,
 			sizePreview: node.config.sizePreview,
 			slug: node.config.slug,
-			lastUpdatedDateComponent: node.config.lastUpdatedDateComponent
-				? new Date(node.config.lastUpdatedDateComponent)
-				: undefined,
 			isIframed: node.config.isIframed,
 			variantList: [],
 			inspiration: node.config.inspiration,
@@ -114,7 +111,6 @@ export type ComponentType = {
 	description: string;
 	sizePreview: string;
 	slug: string;
-	lastUpdatedDateComponent?: Date;
 	isIframed?: boolean;
 	variantList: VariantType[];
 	inspiration?: string;

apps/website/src/app/card.tsx

@@ -1,40 +1,40 @@
 import Image from "next/image";
 import type {
-  CategoryType,
-  SingleComponentCategoryType,
-} from "../lib/types/component";
+	CategoryType,
+	SingleComponentCategoryType,
+} from "@cuicui/ui/lib/types/component";
 
 export const MainMenuCardContent = ({
-  category,
-  sectionSlug,
+	category,
+	sectionSlug,
 }: {
-  category: CategoryType | SingleComponentCategoryType;
-  sectionSlug: string;
+	category: CategoryType | SingleComponentCategoryType;
+	sectionSlug: string;
 }) => {
-  if (category?.comingSoonCategory) {
-    return (
-      <p className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 font-semibold text-2xl text-neutral-800 dark:text-neutral-300">
-        Coming Soon
-      </p>
-    );
-  }
+	if (category?.comingSoonCategory) {
+		return (
+			<p className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 font-semibold text-2xl text-neutral-800 dark:text-neutral-300">
+				Coming Soon
+			</p>
+		);
+	}
 
-  return (
-    <>
-      <Image
-        alt={`${category.name} preview`}
-        className="h-48 w-full object-cover hidden dark:block"
-        height={400}
-        src={`/preview-images/dark-${sectionSlug}-${category.slug}.png`}
-        width={600}
-      />
-      <Image
-        alt={`${category.name} preview`}
-        className="h-48 w-full object-cover dark:hidden"
-        height={400}
-        src={`/preview-images/light-${sectionSlug}-${category.slug}.png`}
-        width={600}
-      />
-    </>
-  );
+	return (
+		<>
+			<Image
+				alt={`${category.name} preview`}
+				className="h-48 w-full object-cover hidden dark:block"
+				height={400}
+				src={`/preview-images/dark-${sectionSlug}-${category.slug}.png`}
+				width={600}
+			/>
+			<Image
+				alt={`${category.name} preview`}
+				className="h-48 w-full object-cover dark:hidden"
+				height={400}
+				src={`/preview-images/light-${sectionSlug}-${category.slug}.png`}
+				width={600}
+			/>
+		</>
+	);
 };

apps/website/src/app/dev/generate-preview-images/page.tsx

@@ -2,10 +2,14 @@ import GeneratePreviewImages from "./generate-preview-images";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {
-  referrer: "no-referrer",
-  robots: "noindex, nofollow",
+	referrer: "no-referrer",
+	robots: "noindex, nofollow",
 };
 
 export default function PageGeneratePreviewImages() {
-  return <GeneratePreviewImages />;
+	if (process.env.NODE_ENV === "production") {
+		return null;
+	}
+
+	return <GeneratePreviewImages />;
 }

apps/website/src/app/dev/page.tsx

@@ -0,0 +1,6 @@
+import Modern3dKbdVariant1 from "@/cuicui/application-ui/kbd/modern-3d-kbd/variant1";
+import React from "react";
+
+export default function Page() {
+	return <Modern3dKbdVariant1 />;
+}

apps/website/src/app/dev/playground-component/page.tsx

@@ -0,0 +1,15 @@
+import Playground from "#/src/app/dev/playground-component/playground";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+	referrer: "no-referrer",
+	robots: "noindex, nofollow",
+};
+
+export default function PageGeneratePreviewImages() {
+	if (process.env.NODE_ENV === "production") {
+		return null;
+	}
+
+	return <Playground />;
+}

apps/website/src/app/dev/playground-component/playground.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function Playground() {
+	return (
+		<div className="h-screen w-full">
+			<iframe
+				className="w-full h-full flex items-center *:flex *:items-center"
+				src="/dev"
+				title="test"
+			>
+				test
+			</iframe>
+		</div>
+	);
+}

apps/website/src/app/dev/playground-component/test.tsx

@@ -0,0 +1,6 @@
+import Modern3dKbdVariant1 from "@/cuicui/application-ui/kbd/modern-3d-kbd/variant1";
+import React from "react";
+
+export default function test() {
+	return <Modern3dKbdVariant1 />;
+}

apps/website/src/app/layout.tsx

@@ -6,7 +6,6 @@ import { DM_Sans } from "next/font/google";
 import type { ReactNode } from "react";
 import Providers from "#/src/app/providers";
 import PlausibleScripts from "#/src/components/analytics/plausible-scripts";
-import { CuicuiFloatingDock } from "#/src/components/floating-dock-navigation/floating-dock";
 const font = DM_Sans({
 	subsets: ["latin"],
 	display: "swap",
@@ -64,7 +63,6 @@ export default function RootLayout({
 					<Toaster />
 
 					{children}
-					<CuicuiFloatingDock />
 				</body>
 			</Providers>
 		</html>