diff --git a/apps/website/package.json b/apps/website/package.json index 72710af0..f33970bd 100644 --- a/apps/website/package.json +++ b/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" } \ No newline at end of file diff --git a/apps/website/src/app/(components)/layout.tsx b/apps/website/src/app/(components)/layout.tsx deleted file mode 100644 index 0315550a..00000000 --- a/apps/website/src/app/(components)/layout.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { DesktopSideMenu } from "#/src/components/navigation/desktop-menu"; - -import { AddressBar } from "#/src/ui/address-bar"; -import StarGithubProjectButton from "#/src/ui/star-github-project-button"; -import type React from "react"; - -export default function ComponentsLayout({ - children, -}: Readonly<{ children: React.ReactNode }>) { - return ( -
- - -
- {/* Add overflow-auto if layout width problems */} - - - -
-
{children}
-
- -
- -
-
-
- ); -} diff --git a/apps/website/src/app/(components)/[section]/[category]/layout.tsx b/apps/website/src/app/(site)/[section]/[category]/layout.tsx similarity index 100% rename from apps/website/src/app/(components)/[section]/[category]/layout.tsx rename to apps/website/src/app/(site)/[section]/[category]/layout.tsx diff --git a/apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx b/apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx similarity index 86% rename from apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx rename to apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx index 639bfd52..86993cae 100644 --- a/apps/website/src/app/(components)/[section]/[category]/multiple-component-section.tsx +++ b/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, + }} /> ))} diff --git a/apps/website/src/app/(components)/[section]/[category]/opengraph-image.alt.txt b/apps/website/src/app/(site)/[section]/[category]/opengraph-image.alt.txt similarity index 100% rename from apps/website/src/app/(components)/[section]/[category]/opengraph-image.alt.txt rename to apps/website/src/app/(site)/[section]/[category]/opengraph-image.alt.txt diff --git a/apps/website/src/app/(components)/[section]/[category]/opengraph-image.png b/apps/website/src/app/(site)/[section]/[category]/opengraph-image.png similarity index 100% rename from apps/website/src/app/(components)/[section]/[category]/opengraph-image.png rename to apps/website/src/app/(site)/[section]/[category]/opengraph-image.png diff --git a/apps/website/src/app/(components)/[section]/[category]/page.tsx b/apps/website/src/app/(site)/[section]/[category]/page.tsx similarity index 87% rename from apps/website/src/app/(components)/[section]/[category]/page.tsx rename to apps/website/src/app/(site)/[section]/[category]/page.tsx index 545a6b55..217c63e0 100644 --- a/apps/website/src/app/(components)/[section]/[category]/page.tsx +++ b/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: { diff --git a/apps/website/src/app/(components)/[section]/[category]/process-variant-data.ts b/apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts similarity index 89% rename from apps/website/src/app/(components)/[section]/[category]/process-variant-data.ts rename to apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts index 10e58a61..330bb977 100644 --- a/apps/website/src/app/(components)/[section]/[category]/process-variant-data.ts +++ b/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 }); diff --git a/apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx b/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx similarity index 85% rename from apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx rename to apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx index f7c73b20..e9a2e02a 100644 --- a/apps/website/src/app/(components)/[section]/[category]/single-component-section.tsx +++ b/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx @@ -1,5 +1,5 @@ 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"; @@ -7,7 +7,7 @@ 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, + }} /> b.date.getTime() - a.date.getTime(), + ); + return (

Changelog

-
- {changelogs.map(({ content, date, title }) => { +
+ {sortedChangelogs.map(({ content, date, title }, index) => { return (
-
{format(date, "do MMMM yyyy")}
+
{format(date, "do MMMM yyyy")}
+ {index === 0 && ( +

+ Latest Release +

+ )}

{formatDistanceToNow(date, { addSuffix: true })}

diff --git a/apps/website/src/app/(components)/getting-started/page.tsx b/apps/website/src/app/(site)/getting-started/page.tsx similarity index 100% rename from apps/website/src/app/(components)/getting-started/page.tsx rename to apps/website/src/app/(site)/getting-started/page.tsx diff --git a/apps/website/src/app/(site)/layout.tsx b/apps/website/src/app/(site)/layout.tsx new file mode 100644 index 00000000..b0a40258 --- /dev/null +++ b/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 ( + <> +
+ {/* Note: The noise effect is experimental and may affect the design. Consider its impact before using it officialy. */} + + + +
+ {/* Add overflow-auto if layout width problems */} + + + +
+
{children}
+
+ +
+ +
+
+
+ + + ); +} diff --git a/apps/website/src/app/(components)/opengraph-image.alt.txt b/apps/website/src/app/(site)/opengraph-image.alt.txt similarity index 100% rename from apps/website/src/app/(components)/opengraph-image.alt.txt rename to apps/website/src/app/(site)/opengraph-image.alt.txt diff --git a/apps/website/src/app/(components)/opengraph-image.png b/apps/website/src/app/(site)/opengraph-image.png similarity index 100% rename from apps/website/src/app/(components)/opengraph-image.png rename to apps/website/src/app/(site)/opengraph-image.png diff --git a/apps/website/src/app/api/get-components/get-components.utils.ts b/apps/website/src/app/api/get-components/get-components.utils.ts index 3425ec07..9d404d8d 100644 --- a/apps/website/src/app/api/get-components/get-components.utils.ts +++ b/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; diff --git a/apps/website/src/app/card.tsx b/apps/website/src/app/card.tsx index 03a131cf..0393ac46 100644 --- a/apps/website/src/app/card.tsx +++ b/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 ( -

- Coming Soon -

- ); - } + if (category?.comingSoonCategory) { + return ( +

+ Coming Soon +

+ ); + } - return ( - <> - {`${category.name} - {`${category.name} - - ); + return ( + <> + {`${category.name} + {`${category.name} + + ); }; diff --git a/apps/website/src/app/dev/generate-preview-images/page.tsx b/apps/website/src/app/dev/generate-preview-images/page.tsx index 2be4181a..8cf959db 100644 --- a/apps/website/src/app/dev/generate-preview-images/page.tsx +++ b/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 ; + if (process.env.NODE_ENV === "production") { + return null; + } + + return ; } diff --git a/apps/website/src/app/dev/page.tsx b/apps/website/src/app/dev/page.tsx new file mode 100644 index 00000000..02330c93 --- /dev/null +++ b/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 ; +} diff --git a/apps/website/src/app/dev/playground-component/page.tsx b/apps/website/src/app/dev/playground-component/page.tsx new file mode 100644 index 00000000..7c9ca61c --- /dev/null +++ b/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 ; +} diff --git a/apps/website/src/app/dev/playground-component/playground.tsx b/apps/website/src/app/dev/playground-component/playground.tsx new file mode 100644 index 00000000..253babd6 --- /dev/null +++ b/apps/website/src/app/dev/playground-component/playground.tsx @@ -0,0 +1,15 @@ +import React from "react"; + +export default function Playground() { + return ( +
+ +
+ ); +} diff --git a/apps/website/src/app/dev/playground-component/test.tsx b/apps/website/src/app/dev/playground-component/test.tsx new file mode 100644 index 00000000..203f468f --- /dev/null +++ b/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 ; +} diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx index 158c4f8f..d761d779 100644 --- a/apps/website/src/app/layout.tsx +++ b/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({ {children} - diff --git a/apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx b/apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx new file mode 100644 index 00000000..ea2f2645 --- /dev/null +++ b/apps/website/src/app/preview/[section]/[category]/[component]/[variant]/page.tsx @@ -0,0 +1,117 @@ +import { SectionsList } from "@cuicui/ui/lib/sections-list"; +import type { Metadata } from "next"; +import { notFound } from "next/navigation"; + +export const metadata: Metadata = { + referrer: "no-referrer", + robots: "noindex, nofollow", +}; + +export async function generateStaticParams() { + return SectionsList.map((section) => { + if (section.type === "multiple-component") { + return section.categoriesList.map((category) => { + return category.componentList?.map((component) => { + return component.variantList.map((variant) => { + return { + params: { + section: section.slug, + category: category.slug, + component: component.slug, + variant: variant.slugPreviewFile, + }, + }; + }); + }); + }); + } + }); +} + +export default function PagePreview({ + params: { section, category, component, variant }, +}: { + params: { + section: string; + category: string; + component: string; + variant: string; + }; +}) { + const variantFound = findCorrespondingComponent({ + section, + category, + component, + variant, + }); + + if (!variantFound) { + return notFound(); + } + + return ( +
+ {variantFound.component} +
+ ); +} + +export const findCorrespondingComponent = ({ + section, + category, + component, + variant, +}: { + section: string; + category: string; + component: string; + variant?: string; +}) => { + const sectionFound = SectionsList.find((s) => s.slug === section); + if (!sectionFound) { + return null; + } + console.log(sectionFound.slug); + if (sectionFound.type === "multiple-component") { + const categoryFound = sectionFound.categoriesList.find( + (c) => c.slug === category, + ); + if (!categoryFound) { + return null; + } + console.log(categoryFound.slug); + + const componentFound = categoryFound.componentList?.find( + (c) => c.slug === component, + ); + if (!componentFound) { + return null; + } + + console.log(componentFound.slug); + + const variantFound = componentFound.variantList.find( + (v) => v.slugPreviewFile === variant, + ); + + console.log(variantFound?.slugPreviewFile); + + return variantFound; + } + + if (sectionFound.type === "single-component") { + const categoryFound = sectionFound.categoriesList.find( + (c) => c.slug === category, + ); + if (!categoryFound) { + return null; + } + + const variantFound = categoryFound.component?.variantList.find( + // We use component instead of variant as it is a single-component + (v) => v.slugPreviewFile === component, + ); + + return variantFound; + } +}; diff --git a/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx b/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx new file mode 100644 index 00000000..ee309239 --- /dev/null +++ b/apps/website/src/app/preview/[section]/[category]/[component]/page.tsx @@ -0,0 +1,60 @@ +import { findCorrespondingComponent } from "#/src/app/preview/[section]/[category]/[component]/[variant]/page"; +import { SectionsList } from "@cuicui/ui/lib/sections-list"; +import type { Metadata } from "next"; +import { notFound } from "next/navigation"; + +export const metadata: Metadata = { + referrer: "no-referrer", + robots: "noindex, nofollow", +}; + +export async function generateStaticParams() { + return SectionsList.map((section) => { + if (section.type === "single-component") { + return section.categoriesList.map((category) => { + if (!category.component) { + return null; + } + return category.component.variantList.map((variant) => { + if (!category.component) { + return null; + } + + return { + params: { + section: section.slug, + category: category.slug, + component: variant.slugPreviewFile, + }, + }; + }); + }); + } + }); +} + +export default function PagePreview({ + params: { section, category, component }, +}: { + params: { + section: string; + category: string; + component: string; + }; +}) { + const variantFound = findCorrespondingComponent({ + section, + category, + component, + }); + + if (!variantFound) { + return notFound(); + } + + return ( +
+ {variantFound.component} +
+ ); +} diff --git a/apps/website/src/changelogs/2024-11-14.mdx b/apps/website/src/changelogs/2024-11-14.mdx new file mode 100644 index 00000000..b2776939 --- /dev/null +++ b/apps/website/src/changelogs/2024-11-14.mdx @@ -0,0 +1,17 @@ +--- +title: Waveline component, Noise & Layout fix +--- + +#### New component + +- A new creative effect : The waveline + +#### Updated components + +- The noise effect has been updated to be more responsive and the preview is cleaner. +- The static Noise has also been improve in light mode and is now used to style the website. +- Code component props improved to now accept a language prop. + +##### Website fix + +- Fix the overflow issue due to the adress bar. \ No newline at end of file diff --git a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx index 06482af2..05af2181 100644 --- a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx +++ b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx @@ -1,4 +1,3 @@ -// biome-ignore lint/style/noNamespaceImport: import * as Tabs from "@radix-ui/react-tabs"; import "./full-component.css"; @@ -7,8 +6,8 @@ import { ComponentWrapper } from "#/src/components/component-wrapper/component-w import StepToInstall from "#/src/components/steps-to-install/step-to-install"; import type { ComponentHeightType, - ProcessVariantType, -} from "#/src/lib/types/component"; + ProcessedVariantType, +} from "@cuicui/ui/lib/types/component"; import CodeHighlighter from "#/src/ui/code-highlighter"; import { ResizableHandle, @@ -45,12 +44,19 @@ export default function ComponentTabRenderer({ rerenderButton, isIframed = false, size, + componentParams, }: { isResizable?: boolean; rerenderButton?: boolean; isIframed?: boolean; size: ComponentHeightType; -} & ProcessVariantType) { + componentParams: { + sectionSlug: string; + categorySlug: string; + componentSlug: string; + variantSlug: string; + }; +} & ProcessedVariantType) { return ( {/* {rerenderButton && } */} + {/*

+ {`/preview/${componentParams.sectionSlug}/${componentParams.categorySlug}/${componentParams.componentSlug}/${componentParams.variantSlug}`} +

+