Fix container scroll height and use location (#51)

* 🎨 🐛 fix centering component & remove no more useful isChildrenUsingFullHeight * 🐛 remove transform-gpu which was causing animation issue * 🎨 remove useless isIframed: false & isChildUsingFullHeight * 🐛 remove ScrollAreaViewport asChild * ✨ add padding and exit rotation * ✨ add padding bottom to see content when scroll to bottom * ✨ Improve floating dock micro-interactions
damien-schneider · Oct 31, 2024 · 8e1b996 · 8e1b996
1 parent 3bc4536
commit 8e1b996
Show file tree

Hide file tree

Showing 67 changed files with 611 additions and 550 deletions.
diff --git a/apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx b/apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx
@@ -50,7 +50,6 @@ export default async function MultipleComponentCategory({
 						inspirationLink={component.inspirationLink}
 					/>
 					<VariantTabs
-						isChildUsingHeightFull={component.isChildUsingHeightFull}
 						isIframed={component.isIframed}
 						isResizable={component.isResizable}
 						key={component.name}

diff --git a/apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx b/apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx
@@ -45,7 +45,6 @@ export default async function SingleComponentCategory({
 					title={category.name}
 				/>
 				<VariantTabs
-					isChildUsingHeightFull={component.isChildUsingHeightFull}
 					isIframed={component.isIframed}
 					isResizable={component.isResizable}
 					rerenderButton={component.rerenderButton}

diff --git a/apps/website/src/app/(components)/layout.tsx b/apps/website/src/app/(components)/layout.tsx
@@ -16,8 +16,8 @@ export default function ComponentsLayout({
 
 				<AddressBar />
 
-				<main className=" p-4 pt-12 pb-20 md:p-6">
-					<div className="space-y-10">{children}</div>
+				<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">

diff --git a/apps/website/src/app/layout-floating-dock.tsx b/apps/website/src/app/layout-floating-dock.tsx
@@ -3,11 +3,18 @@
 import { SectionsList } from "@cuicui/ui";
 
 import { FloatingDock } from "#/src/app/floating-docks-component";
-import { HomeIcon, MoonIcon, SunIcon } from "lucide-react";
+import {
+	ArrowUpRightIcon,
+	GithubIcon,
+	HomeIcon,
+	MoonIcon,
+	SunIcon,
+} from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useTheme } from "next-themes";
 import { cn } from "#/src/utils/cn";
 import Link from "next/link";
+import { CUICUI_GITHUB_URL } from "@/lib/site.const";
 
 export function CuicuiFloatingDock() {
 	const pathName = usePathname();
@@ -22,54 +29,65 @@ export function CuicuiFloatingDock() {
 		}
 	};
 	return (
-		<div className="relative w-full h-full">
-			<div
+		<div
+			className={cn(
+				"flex items-center fixed gap-2 justify-center z-50 p-2",
+				"right-4 bottom-4",
+				"md:bottom-4  md:right-auto md:left-1/2 md:-translate-x-1/2",
+				"scale-90 hover:scale-100 transform-gpu transition duration-150",
+			)}
+		>
+			<Link
+				href={CUICUI_GITHUB_URL}
 				className={cn(
-					"flex items-center fixed gap-2 justify-center z-50 ",
-					"right-4 bottom-4",
-					"md:bottom-2  md:right-auto md:left-1/2 md:-translate-x-1/2",
+					"group relative h-14 w-10 ml-2 overflow-hidden rounded-full bg-neutral-50 dark:bg-neutral-900 p-2 border border-neutral-500/20",
+					"hover:scale-110 transform-gpu transition-transform duration-150",
 				)}
+				target="_blank"
 			>
-				<Link
-					href="/"
-					className="relative h-14 w-10 ml-2 overflow-hidden transition rounded-full bg-neutral-50 dark:bg-neutral-900 p-2 border border-neutral-500/20"
-				>
-					<HomeIcon
-						className={cn(
-							"size-5 text-neutral-600 transition dark:text-neutral-300 z-50 duration-500 absolute -translate-x-1/2 left-1/2 top-2 transform-gpu mr-2",
-						)}
-					/>
-				</Link>
-				<div className="order-3 md:order-none">
-					<FloatingDock
-						// mobileClassName="translate-y-20" // only for demo, remove for production
-						items={sectionLinks}
-					/>
-				</div>
-				<button
-					type="button"
-					onClick={handleSwitchTheme}
-					className="relative h-14 w-10 overflow-hidden transition rounded-full bg-neutral-50 dark:bg-neutral-900 p-2 border border-neutral-500/20"
-				>
-					<SunIcon
-						className={cn(
-							"size-5 text-neutral-600 transition dark:text-neutral-300 z-50 duration-500 absolute -translate-x-1/2 left-1/2 top-2 transform-gpu",
-							resolvedTheme === "light"
-								? "opacity-100 translate-y-0 scale-100"
-								: "opacity-50 -translate-y-8 scale-75",
-						)}
-					/>
-
-					<MoonIcon
-						className={cn(
-							"size-5 text-neutral-600 transition dark:text-neutral-300 z-50 duration-500 absolute -translate-x-1/2 left-1/2 bottom-2 transform-gpu",
-							resolvedTheme === "dark"
-								? "opacity-100 translate-y-0 scale-100"
-								: "opacity-50 translate-y-8 scale-75",
-						)}
-					/>
-				</button>
+				<GithubIcon
+					className={cn(
+						"size-5 text-neutral-600 transition dark:text-neutral-300 z-50 duration-500 absolute -translate-x-1/2 left-1/2 top-2 transform-gpu mr-2 group-hover:translate-y-5 group-hover:scale-90",
+					)}
+				/>
+				<ArrowUpRightIcon
+					className={cn(
+						"size-4 text-neutral-600 transition dark:text-neutral-300 z-50 duration-300 absolute  right-0 top-2 transform-gpu mr-2 group-hover:translate-y-0 group-hover:-translate-x-0 translate-x-8 -translate-y-5 ",
+					)}
+				/>
+			</Link>
+			<div className="order-3 md:order-none">
+				<FloatingDock
+					// mobileClassName="translate-y-20" // only for demo, remove for production
+					items={sectionLinks}
+				/>
 			</div>
+			<button
+				type="button"
+				onClick={handleSwitchTheme}
+				className={cn(
+					"group relative h-14 w-10 overflow-hidden transition rounded-full bg-neutral-50 dark:bg-neutral-900 p-2 border border-neutral-500/20",
+					"hover:scale-110 transform-gpu transition duration-150",
+				)}
+			>
+				<SunIcon
+					className={cn(
+						"size-5 text-neutral-600 transition-all dark:text-neutral-300 z-50 duration-300 absolute -translate-x-1/2 left-1/2 top-2 transform-gpu",
+						resolvedTheme === "light"
+							? "opacity-100 translate-y-0 scale-100 group-hover:scale-75 group-hover:opacity-90"
+							: "opacity-50 -translate-y-8 scale-90  group-hover:-translate-y-3",
+					)}
+				/>
+
+				<MoonIcon
+					className={cn(
+						"size-5 text-neutral-600 transition-all dark:text-neutral-300 z-50 duration-300 absolute -translate-x-1/2 left-1/2 bottom-2 transform-gpu",
+						resolvedTheme === "dark"
+							? "opacity-100 translate-y-0 scale-100 group-hover:scale-75 group-hover:opacity-90"
+							: "opacity-50 translate-y-8 scale-75 group-hover:translate-y-3",
+					)}
+				/>
+			</button>
 		</div>
 	);
 }

diff --git a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx
@@ -45,13 +45,11 @@ export default function ComponentTabRenderer({
 	rerenderButton,
 	isIframed = false,
 	size,
-	isChildUsingHeightFull,
 }: {
 	isResizable?: boolean;
 	rerenderButton?: boolean;
 	isIframed?: boolean;
 	size: ComponentHeightType;
-	isChildUsingHeightFull?: boolean;
 } & ProcessVariantType) {
 	return (
 		<Tabs.Root defaultValue="preview" id="variants-tabs" itemID="variants-tabs">
@@ -89,22 +87,18 @@ export default function ComponentTabRenderer({
 					}
 				})}
 			</Tabs.List>
-			<Tabs.Content value="preview">
+			<Tabs.Content value="preview" asChild>
 				{isResizable ? (
 					<ResizablePanelGroup
 						className={cn(
-							"flex h-full w-full items-center justify-center",
+							// "flex h-full w-full items-center justify-center",
 							// getContainerChildClassBasedOnSize(size),
 						)}
 						direction="horizontal"
 					>
-						<ResizablePanel
-							className="relative rounded-md border border-neutral-500/20 bg-neutral-50 dark:bg-[#101010]"
-							defaultSize={100}
-						>
+						<ResizablePanel defaultSize={100}>
 							{/* {rerenderButton && <RerenderButton setRender={setRender} />} */}
 							<ComponentWrapper
-								isChildUsingHeightFull={isChildUsingHeightFull}
 								isIframed={isIframed}
 								renderButton={rerenderButton}
 								size={size}
@@ -123,7 +117,6 @@ export default function ComponentTabRenderer({
 					</ResizablePanelGroup>
 				) : (
 					<ComponentWrapper
-						isChildUsingHeightFull={isChildUsingHeightFull}
 						isIframed={isIframed}
 						renderButton={rerenderButton}
 						size={size}

diff --git a/apps/website/src/components/component-wrapper/component-wrapper.tsx b/apps/website/src/components/component-wrapper/component-wrapper.tsx
@@ -5,19 +5,18 @@ import type { ComponentHeightType } from "#/src/lib/types/component";
 import { cn } from "#/src/utils/cn";
 import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class";
 import { RefreshCwIcon } from "lucide-react";
+import { ScrollArea, ScrollAreaViewport } from "#/src/ui/shadcn/scrollarea";
 
 export const ComponentWrapper = ({
 	isIframed = true,
 	size,
 	renderButton = false,
 	children,
-	isChildUsingHeightFull,
 }: {
 	renderButton?: boolean;
 	isIframed: boolean;
 	size: ComponentHeightType;
 	children: ReactNode;
-	isChildUsingHeightFull?: boolean;
 }) => {
 	const [reRender, setReRender] = useState(false);
 
@@ -29,23 +28,33 @@ export const ComponentWrapper = ({
 
 	if (!isIframed) {
 		return (
-			<div
-				className={cn(
-					"relative flex h-full w-full items-center justify-center overflow-hidden",
-					isChildUsingHeightFull && "flex-col *:flex-1",
-					getContainerHeightClass({ size }),
-				)}
-			>
-				{renderButton && <RerenderButton onClick={() => setReRender(true)} />}
+			<ScrollArea className={cn(getContainerHeightClass({ size }))}>
+				<ScrollAreaViewport
+					className={cn(
+						"*:h-full", // Mandatory for children to take full height
+						"relative",
+						"rounded-md border border-neutral-500/20 bg-neutral-50 dark:bg-[#101010]",
+					)}
+				>
+					{renderButton && <RerenderButton onClick={() => setReRender(true)} />}
 
-				{!reRender && children}
-			</div>
+					{/* For centering child */}
+					{/* Grid doesn't work here as the child isn't center even with place-content-center -> It create weird width behaviour */}
+					<div className="flex flex-col items-center justify-center h-full w-full">
+						{!reRender && children}
+					</div>
+				</ScrollAreaViewport>
+			</ScrollArea>
 		);
 	}
 
 	return (
 		<CustomIframe
-			className={cn("w-full", getContainerHeightClass({ size }))}
+			className={cn(
+				"w-full relative",
+				"rounded-md border border-neutral-500/20 bg-neutral-50 dark:bg-[#101010]",
+				getContainerHeightClass({ size }),
+			)}
 			size={size}
 		>
 			{renderButton && <RerenderButton onClick={() => setReRender(true)} />}

diff --git a/apps/website/src/components/component-wrapper/variant-tabs.tsx b/apps/website/src/components/component-wrapper/variant-tabs.tsx
@@ -1,4 +1,3 @@
-// biome-ignore lint/style/noNamespaceImport: <explanation>
 import * as Tabs from "@radix-ui/react-tabs";
 import ComponentTabRenderer from "#/src/components/component-wrapper/component-tab-renderer";
 
@@ -16,14 +15,12 @@ export default function VariantTabs({
 	isIframed = false,
 	isResizable = true,
 	rerenderButton = false,
-	isChildUsingHeightFull = false,
 }: Readonly<{
 	variantList: ProcessVariantType[];
 	size?: ComponentHeightType;
 	isIframed?: boolean;
 	isResizable?: boolean;
 	rerenderButton?: boolean;
-	isChildUsingHeightFull?: boolean;
 }>) {
 	return (
 		<div>
@@ -36,7 +33,6 @@ export default function VariantTabs({
 					<Tabs.Content key={variant.name} value={variant.name}>
 						<ComponentTabRenderer
 							{...variant}
-							isChildUsingHeightFull={isChildUsingHeightFull}
 							isIframed={isIframed}
 							isResizable={isResizable}
 							rerenderButton={rerenderButton}