diff --git a/apps/website/__mocks__/globals-mocks.ts b/apps/website/__mocks__/globals-mocks.ts index 99b014bb..c7c95d2c 100644 --- a/apps/website/__mocks__/globals-mocks.ts +++ b/apps/website/__mocks__/globals-mocks.ts @@ -4,9 +4,9 @@ import { vi } from "vitest"; // Mock implementation of ResizeObserver const ResizeObserverMock = vi.fn(() => ({ - observe: vi.fn(), - unobserve: vi.fn(), - disconnect: vi.fn(), + observe: vi.fn(), + unobserve: vi.fn(), + disconnect: vi.fn(), })); // Stub the global ResizeObserver with the mock @@ -14,24 +14,24 @@ vi.stubGlobal("ResizeObserver", ResizeObserverMock); // Example: Mock implementation of window.fetch const fetchMock = vi.fn(() => - Promise.resolve({ - json: () => Promise.resolve({}), - }), + Promise.resolve({ + json: () => Promise.resolve({}), + }), ); // Stub the global fetch with the mock vi.stubGlobal("fetch", fetchMock); Object.defineProperty(window, "matchMedia", { - writable: true, - value: vi.fn().mockImplementation((query: string) => ({ - matches: false, - media: query, - onchange: null, - addListener: vi.fn(), // Deprecated - removeListener: vi.fn(), // Deprecated - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - dispatchEvent: vi.fn(), - })), + writable: true, + value: vi.fn().mockImplementation((query: string) => ({ + matches: false, + media: query, + onchange: null, + addListener: vi.fn(), // Deprecated + removeListener: vi.fn(), // Deprecated + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + })), }); diff --git a/apps/website/__tests__/components/component-categories.test.tsx b/apps/website/__tests__/components/component-categories.test.tsx index e92277eb..ee492a7a 100644 --- a/apps/website/__tests__/components/component-categories.test.tsx +++ b/apps/website/__tests__/components/component-categories.test.tsx @@ -3,99 +3,99 @@ import { SectionsList } from "@cuicui/ui"; import { getFileContentAsString } from "#/src/utils/get-file-content-as-string"; describe("SectionsList", () => { - it("should have the correct number of sections", () => { - expect(SectionsList).toHaveLength(7); - }); + it("should have the correct number of sections", () => { + expect(SectionsList).toHaveLength(7); + }); - it("should have the correct section slugs in the good order", () => { - const sectionSlugs = SectionsList.map((section) => section.slug); - expect(sectionSlugs).toEqual([ - "common-ui", - "application-ui", - "marketing-ui", - "other", - "hooks", - "utils", - "tools", - ]); - }); + it("should have the correct section slugs in the good order", () => { + const sectionSlugs = SectionsList.map((section) => section.slug); + expect(sectionSlugs).toEqual([ + "common-ui", + "application-ui", + "marketing-ui", + "other", + "hooks", + "utils", + "tools", + ]); + }); - it("category should have componentList === null if comingSoonCategory === true", () => { - for (const section of SectionsList) { - if (section.type !== "multiple-component") { - continue; - } - //TODO: Handle the single-component test - for (const category of section.categoriesList) { - if (category.comingSoonCategory) { - expect(category.componentList).toBeNull(); - expect(category.componentList).not.toBeUndefined(); - } - } - } - }); + it("category should have componentList === null if comingSoonCategory === true", () => { + for (const section of SectionsList) { + if (section.type !== "multiple-component") { + continue; + } + //TODO: Handle the single-component test + for (const category of section.categoriesList) { + if (category.comingSoonCategory) { + expect(category.componentList).toBeNull(); + expect(category.componentList).not.toBeUndefined(); + } + } + } + }); - it("should not return error when reading the file code", async () => { - const testComponentCode = async ( - slug: string, - variantName: string, - shouldError: boolean, - ) => { - const code = await getFileContentAsString({ - componentSlug: slug, - variantName, - }); - const errorMessage = `Failed for component slug: ${slug}, variant: ${variantName}`; - // Get first 2 words of the code - const firstTwoWords = code.split(" ").slice(0, 2).join(" "); - if (shouldError) { - expect(firstTwoWords, errorMessage).toEqual("An error"); - } else { - expect(firstTwoWords, errorMessage).not.toEqual("An error"); - } - }; + it("should not return error when reading the file code", async () => { + const testComponentCode = async ( + slug: string, + variantName: string, + shouldError: boolean, + ) => { + const code = await getFileContentAsString({ + componentSlug: slug, + variantName, + }); + const errorMessage = `Failed for component slug: ${slug}, variant: ${variantName}`; + // Get first 2 words of the code + const firstTwoWords = code.split(" ").slice(0, 2).join(" "); + if (shouldError) { + expect(firstTwoWords, errorMessage).toEqual("An error"); + } else { + expect(firstTwoWords, errorMessage).not.toEqual("An error"); + } + }; - for (const section of SectionsList) { - if (section.type !== "multiple-component") { - continue; - } - for (const category of section.categoriesList) { - if (category.componentList) { - for (const component of category.componentList) { - for (const variant of component.variantList) { - // Test without error - await testComponentCode( - category.slug, - `${component.slug}/${variant.slugPreviewFile}`, - false, - ); + for (const section of SectionsList) { + if (section.type !== "multiple-component") { + continue; + } + for (const category of section.categoriesList) { + if (category.componentList) { + for (const component of category.componentList) { + for (const variant of component.variantList) { + // Test without error + await testComponentCode( + category.slug, + `${component.slug}/${variant.slugPreviewFile}`, + false, + ); - if (variant.slugComponentFile) { - await testComponentCode( - category.slug, - `${component.slug}/${variant.slugComponentFile}`, - false, - ); - } + if (variant.slugComponentFile) { + await testComponentCode( + category.slug, + `${component.slug}/${variant.slugComponentFile}`, + false, + ); + } - // Test with forced error - await testComponentCode( - category.slug, - `${component.slug}/${variant.slugPreviewFile}error`, - true, - ); + // Test with forced error + await testComponentCode( + category.slug, + `${component.slug}/${variant.slugPreviewFile}error`, + true, + ); - if (variant.slugComponentFile) { - await testComponentCode( - category.slug, - `${component.slug}/${variant.slugComponentFile}error`, - true, - ); - } - } - } - } - } - } - }); + if (variant.slugComponentFile) { + await testComponentCode( + category.slug, + `${component.slug}/${variant.slugComponentFile}error`, + true, + ); + } + } + } + } + } + } + }); }); diff --git a/apps/website/__tests__/components/get-file-content-as-string.test.tsx b/apps/website/__tests__/components/get-file-content-as-string.test.tsx index d3dc4db3..dd719d81 100644 --- a/apps/website/__tests__/components/get-file-content-as-string.test.tsx +++ b/apps/website/__tests__/components/get-file-content-as-string.test.tsx @@ -2,13 +2,13 @@ import { describe, expect, it } from "vitest"; import { getFileContentAsString } from "#/src/utils/get-file-content-as-string"; describe("getFileContentAsString", () => { - it("should return the content of the file", async () => { - const code = await getFileContentAsString({ - componentSlug: "badges", - variantName: "modern-simple-badges/variant1", - }); + it("should return the content of the file", async () => { + const code = await getFileContentAsString({ + componentSlug: "badges", + variantName: "modern-simple-badges/variant1", + }); - expect(code).toEqual(`export function BadgeSimpleVariantAmber() { + expect(code).toEqual(`export function BadgeSimpleVariantAmber() { return (
Amber badge @@ -16,5 +16,5 @@ describe("getFileContentAsString", () => { ); } `); - }); + }); }); diff --git a/apps/website/__tests__/sidemenu.test.tsx b/apps/website/__tests__/sidemenu.test.tsx index 6a9645d2..84582df8 100644 --- a/apps/website/__tests__/sidemenu.test.tsx +++ b/apps/website/__tests__/sidemenu.test.tsx @@ -6,33 +6,33 @@ import InfoMenuList from "#/src/components/navigation/info-menu-list"; const gettingStartedRegex = /getting-started$/; vi.mock("next/navigation", () => ({ - usePathname: () => { - return "/common-ui"; - }, - useSelectedLayoutSegments: () => [], + usePathname: () => { + return "/common-ui"; + }, + useSelectedLayoutSegments: () => [], })); describe("Sidemenu component", () => { - render( -
- - -
, - ); + render( +
+ + +
, + ); - it("should have href attribute of the 'Contribute' element set to https://github.com/damien-schneider/cuicui", () => { - const contributeElement = screen.getByTestId("navigation-link-Contribute"); + it("should have href attribute of the 'Contribute' element set to https://github.com/damien-schneider/cuicui", () => { + const contributeElement = screen.getByTestId("navigation-link-Contribute"); - const hrefValue = contributeElement.getAttribute("href"); - expect(hrefValue).toBe("https://github.com/damien-schneider/cuicui"); - }); - it("should have href attribute of the 'Getting started' element to finish by getting-started", () => { - const contributeElement = screen.getByTestId( - "navigation-link-Getting Started", - ); + const hrefValue = contributeElement.getAttribute("href"); + expect(hrefValue).toBe("https://github.com/damien-schneider/cuicui"); + }); + it("should have href attribute of the 'Getting started' element to finish by getting-started", () => { + const contributeElement = screen.getByTestId( + "navigation-link-Getting Started", + ); - // Check if the href attribute of the 'Getting started' element finishes by getting-started - const hrefValue = contributeElement.getAttribute("href"); - expect(hrefValue).toMatch(gettingStartedRegex); - }); + // Check if the href attribute of the 'Getting started' element finishes by getting-started + const hrefValue = contributeElement.getAttribute("href"); + expect(hrefValue).toMatch(gettingStartedRegex); + }); }); diff --git a/apps/website/next.config.js b/apps/website/next.config.js index 28a7c44a..c04dba92 100755 --- a/apps/website/next.config.js +++ b/apps/website/next.config.js @@ -1,17 +1,17 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - // experimental: { - // serverComponentsExternalPackages: ["shiki", "vscode-oniguruma"], - // }, - transpilePackages: ["shiki", "next-mdx-remote"], - images: { - remotePatterns: [ - { - protocol: "https", - hostname: "**", - }, - ], - }, + // experimental: { + // serverComponentsExternalPackages: ["shiki", "vscode-oniguruma"], + // }, + transpilePackages: ["shiki", "next-mdx-remote"], + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "**", + }, + ], + }, }; module.exports = nextConfig; diff --git a/apps/website/package.json b/apps/website/package.json index f33970bd..d1d31224 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -37,7 +37,6 @@ }, "description": "An open-source all-in-one library for building an advanced SaaS application, a personal website, or anything else with micro-interactions, advanced user experiences, and a focus on performance and code quality.", "devDependencies": { - "@biomejs/biome": "1.9.2", "@tailwindcss/forms": "0.5.7", "@tailwindcss/typography": "0.5.12", "@testing-library/dom": "10.4.0", @@ -81,18 +80,14 @@ "build": "next build", "dev": "next dev --turbo", "start": "next start", - "format:check": "biome format --check ./src", - "format:write": "biome format --write ./src", "generate-package-list-check": "node scripts/generate-package-list-check.js", "lint": "next lint", "lint-format:check": "pnpm format:check && pnpm lint", "lint-staged": "lint-staged", - "lint:apply": "biome check --apply ./src", - "lint:check": "biome check ./src", "lint:write-unsafe": "biome check --write --unsafe ./src", "test": "vitest", "test:watch": "vitest --watch", "type-check": "tsc --noEmit" }, "version": "0.1.2" -} \ No newline at end of file +} diff --git a/apps/website/scripts/generate-package-list-check.js b/apps/website/scripts/generate-package-list-check.js index 94caaa01..45cee130 100755 --- a/apps/website/scripts/generate-package-list-check.js +++ b/apps/website/scripts/generate-package-list-check.js @@ -10,13 +10,13 @@ const packageJsonPath = path.resolve(process.cwd(), "package.json"); // Define the output TypeScript file path inside ./src/lib/ const outputDirectory = path.resolve(process.cwd(), "src", "lib"); const outputTsPath = path.join( - outputDirectory, - "generated-package-check-list-to-install.ts", + outputDirectory, + "generated-package-check-list-to-install.ts", ); const importStatement = `import type { PackageToInstallType } from "#/src/components/steps-to-install/packages";\n`; const commentStatement = - "// This is an automated generated file with the ./scripts/generate-package-list-check.ts script\n"; + "// This is an automated generated file with the ./scripts/generate-package-list-check.ts script\n"; // biome-ignore lint/style/noUnusedTemplateLiteral: const exportStatementStart = `export const packageCheckListToInstall: PackageToInstallType[] = [`; @@ -28,44 +28,44 @@ const exportStatementEnd = `];\n`; const escapeDoubleQuotes = (str) => str.replace(/"/g, '\\"'); try { - // Ensure the output directory exists; if not, create it - if (!fs.existsSync(outputDirectory)) { - fs.mkdirSync(outputDirectory, { recursive: true }); - } + // Ensure the output directory exists; if not, create it + if (!fs.existsSync(outputDirectory)) { + fs.mkdirSync(outputDirectory, { recursive: true }); + } - // Read and parse package.json - const packageJsonData = fs.readFileSync(packageJsonPath, "utf-8"); - const packageJson = JSON.parse(packageJsonData); + // Read and parse package.json + const packageJsonData = fs.readFileSync(packageJsonPath, "utf-8"); + const packageJson = JSON.parse(packageJsonData); - // Extract dependencies and devDependencies - const dependencies = packageJson.dependencies || {}; - const devDependencies = packageJson.devDependencies || {}; + // Extract dependencies and devDependencies + const dependencies = packageJson.dependencies || {}; + const devDependencies = packageJson.devDependencies || {}; - // Combine both dependencies and devDependencies - const allPackages = { ...dependencies, ...devDependencies }; + // Combine both dependencies and devDependencies + const allPackages = { ...dependencies, ...devDependencies }; - // Optionally, you can categorize packages or add comments - // For simplicity, we'll just list all packages together + // Optionally, you can categorize packages or add comments + // For simplicity, we'll just list all packages together - // Generate the checklist array as TypeScript objects - const packageCheckListToInstall = Object.keys(allPackages).map((pkg) => { - return ` { + // Generate the checklist array as TypeScript objects + const packageCheckListToInstall = Object.keys(allPackages).map((pkg) => { + return ` { find: [\`from "${escapeDoubleQuotes(pkg)}"\`], packageName: "${pkg}", },`; - }); + }); - // Combine all parts to form the complete TypeScript file content - const tsFileContent = [ - commentStatement, - importStatement, - exportStatementStart, - ...packageCheckListToInstall, - exportStatementEnd, - ].join("\n"); + // Combine all parts to form the complete TypeScript file content + const tsFileContent = [ + commentStatement, + importStatement, + exportStatementStart, + ...packageCheckListToInstall, + exportStatementEnd, + ].join("\n"); - // Write the TypeScript file - fs.writeFileSync(outputTsPath, tsFileContent, "utf-8"); + // Write the TypeScript file + fs.writeFileSync(outputTsPath, tsFileContent, "utf-8"); } catch (_error) { - process.exit(1); + process.exit(1); } diff --git a/apps/website/src/app/(site)/[section]/[category]/layout.tsx b/apps/website/src/app/(site)/[section]/[category]/layout.tsx index 3bacf0d4..6954ce9f 100644 --- a/apps/website/src/app/(site)/[section]/[category]/layout.tsx +++ b/apps/website/src/app/(site)/[section]/[category]/layout.tsx @@ -8,79 +8,79 @@ import { findCategoryBySlug } from "#/src/utils/section-category-components-util import { findSectionBySlug } from "#/src/utils/section-category-components-utils/find-section-by-slug"; type Props = { - children: ReactNode; - params: { - section: string; - category: string; - }; + children: ReactNode; + params: { + section: string; + category: string; + }; }; export function generateMetadata({ params }: Props): Metadata { - const section = findSectionBySlug(params.section); - if (!section) { - return {}; - } + const section = findSectionBySlug(params.section); + if (!section) { + return {}; + } - if (section.type === "page") { - const page = section.pageList.find((page) => page.slug === params.category); - if (page) { - return { - title: page.name, - description: page.description, - openGraph: { - title: page.name, - description: page.description, - }, - alternates: { - canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}/${page.slug}`, - }, - robots: "all", - }; - } - return {}; - } + if (section.type === "page") { + const page = section.pageList.find((page) => page.slug === params.category); + if (page) { + return { + title: page.name, + description: page.description, + openGraph: { + title: page.name, + description: page.description, + }, + alternates: { + canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}/${page.slug}`, + }, + robots: "all", + }; + } + return {}; + } - const category = findCategoryBySlug(section, params.category); - if (category) { - return { - title: `${category.name} React Components`, - description: `${category.description}. Advanced ${category.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`, - openGraph: { - title: `${category.name} React Components`, - description: `${category.description}. Advanced ${category.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`, - }, - alternates: { - canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}/${category.slug}`, - }, - robots: "all", - }; - } - return {}; + const category = findCategoryBySlug(section, params.category); + if (category) { + return { + title: `${category.name} React Components`, + description: `${category.description}. Advanced ${category.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`, + openGraph: { + title: `${category.name} React Components`, + description: `${category.description}. Advanced ${category.name} React components using tailwind CSS. Just copy paste amazing UI and UX.`, + }, + alternates: { + canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}/${category.slug}`, + }, + robots: "all", + }; + } + return {}; } export default function CategoryLayout({ children, params }: Props) { - const section = findSectionBySlug(params.section); - if (!section) { - return notFound(); - } - const category = findCategoryBySlug(section, params.category); - if (!category) { - return notFound(); - } - return ( - <> - - - - -

- {category.name} components -

- {children} - - ); + const section = findSectionBySlug(params.section); + if (!section) { + return notFound(); + } + const category = findCategoryBySlug(section, params.category); + if (!category) { + return notFound(); + } + return ( + <> + + + + +

+ {category.name} components +

+ {children} + + ); } diff --git a/apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx b/apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx index 86993cae..96e1d9f4 100644 --- a/apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx +++ b/apps/website/src/app/(site)/[section]/[category]/multiple-component-section.tsx @@ -8,62 +8,62 @@ 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({ - category, - sectionSlug, + category, + sectionSlug, }: Readonly<{ category: CategoryType; sectionSlug: SectionType["slug"] }>) { - if (category.comingSoonCategory) { - return ; - } + if (category.comingSoonCategory) { + return ; + } - if (!category.componentList) { - return notFound(); - } + if (!category.componentList) { + return notFound(); + } - // If the componentList is not an array, we convert it to an array - const componentArray = Array.isArray(category.componentList) - ? category.componentList - : [category.componentList]; + // If the componentList is not an array, we convert it to an array + const componentArray = Array.isArray(category.componentList) + ? category.componentList + : [category.componentList]; - const componentList = await fetchMultipleComponentData({ - categorySlug: category.slug, - componentList: componentArray, - }); + const componentList = await fetchMultipleComponentData({ + categorySlug: category.slug, + componentList: componentArray, + }); - return ( -
- {componentList.map((component) => ( -
-
- -
- - - -
- ))} -
- ); + return ( +
+ {componentList.map((component) => ( +
+
+ +
+ + + +
+ ))} +
+ ); } diff --git a/apps/website/src/app/(site)/[section]/[category]/page.tsx b/apps/website/src/app/(site)/[section]/[category]/page.tsx index 217c63e0..3721cbaa 100644 --- a/apps/website/src/app/(site)/[section]/[category]/page.tsx +++ b/apps/website/src/app/(site)/[section]/[category]/page.tsx @@ -3,81 +3,81 @@ import MultipleComponentCategory from "#/src/app/(site)/[section]/[category]/mul import SingleComponentCategory from "#/src/app/(site)/[section]/[category]/single-component-section"; import { SectionsList } from "@cuicui/ui"; import type { - CategoryType, - SingleComponentCategoryType, + CategoryType, + SingleComponentCategoryType, } from "@cuicui/ui/lib/types/component"; import { findCategoryBySlug } from "#/src/utils/section-category-components-utils/find-category-by-slug"; type Props = { - params: { - section: string; - category: string; - }; + params: { + section: string; + category: string; + }; }; export async function generateStaticParams() { - const params = SectionsList.flatMap((section) => { - if ( - section.type === "multiple-component" || - section.type === "single-component" - ) { - return section.categoriesList.map((category) => ({ - section: section.slug, - category: category.slug, - })); - } - if (section.type === "page") { - return section.pageList.map((page) => ({ - section: section.slug, - category: page.slug, - })); - } - }); + const params = SectionsList.flatMap((section) => { + if ( + section.type === "multiple-component" || + section.type === "single-component" + ) { + return section.categoriesList.map((category) => ({ + section: section.slug, + category: category.slug, + })); + } + if (section.type === "page") { + return section.pageList.map((page) => ({ + section: section.slug, + category: page.slug, + })); + } + }); - // Return the generated params array - return params; + // Return the generated params array + return params; } export default async function Page({ params }: Readonly) { - const section = SectionsList.find( - (section) => section.slug === params.section, - ); - if (!section) { - return notFound(); - } - if (section?.type === "page") { - const page = section.pageList.find((page) => page.slug === params.category); - if (!page) { - return notFound(); - } - return page.component; - } + const section = SectionsList.find( + (section) => section.slug === params.section, + ); + if (!section) { + return notFound(); + } + if (section?.type === "page") { + const page = section.pageList.find((page) => page.slug === params.category); + if (!page) { + return notFound(); + } + return page.component; + } - if (section?.type === "single-component") { - const category = findCategoryBySlug( - section, - params.category, - ) as SingleComponentCategoryType | null; - if (!category) { - return notFound(); - } - return ( - - ); - } + if (section?.type === "single-component") { + const category = findCategoryBySlug( + section, + params.category, + ) as SingleComponentCategoryType | null; + if (!category) { + return notFound(); + } + return ( + + ); + } - if (section?.type === "multiple-component") { - const category = findCategoryBySlug( - section, - params.category, - ) as CategoryType | null; - if (!category) { - return notFound(); - } - return ( - - ); - } + if (section?.type === "multiple-component") { + const category = findCategoryBySlug( + section, + params.category, + ) as CategoryType | null; + if (!category) { + return notFound(); + } + return ( + + ); + } } diff --git a/apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts b/apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts index 330bb977..1c5c55b6 100644 --- a/apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts +++ b/apps/website/src/app/(site)/[section]/[category]/process-variant-data.ts @@ -1,110 +1,110 @@ import type { - ComponentType, - ProcessedVariantType, - SingleComponentType, - VariantType, + ComponentType, + ProcessedVariantType, + SingleComponentType, + VariantType, } from "@cuicui/ui/lib/types/component"; import { getFileContentAsString } from "#/src/utils/get-file-content-as-string"; interface ProcessedComponent extends ComponentType { - componentList: ProcessedVariantType[]; + componentList: ProcessedVariantType[]; } export async function fetchVariantData({ - categorySlug, - componentSlug, - variant, + categorySlug, + componentSlug, + variant, }: { - categorySlug: string; - componentSlug?: string; - variant: VariantType; + categorySlug: string; + componentSlug?: string; + variant: VariantType; }) { - const variantName = variant.name; - const variantSlugPreviewFile = variant.slugPreviewFile ?? variantName; - const variantSlugComponentFile = variant.slugComponentFile ?? variantName; + const variantName = variant.name; + const variantSlugPreviewFile = variant.slugPreviewFile ?? variantName; + const variantSlugComponentFile = variant.slugComponentFile ?? variantName; - let previewCode: string | null = null; - let componentCode: string | undefined; - if (componentSlug) { - previewCode = await getFileContentAsString({ - componentSlug: categorySlug, - variantName: `${componentSlug}/${variantSlugPreviewFile}`, - }); + let previewCode: string | null = null; + let componentCode: string | undefined; + if (componentSlug) { + previewCode = await getFileContentAsString({ + componentSlug: categorySlug, + variantName: `${componentSlug}/${variantSlugPreviewFile}`, + }); - componentCode = variant.slugComponentFile - ? await getFileContentAsString({ - componentSlug: categorySlug, - variantName: `${componentSlug}/${variantSlugComponentFile}`, - }) - : undefined; - } else { - previewCode = await getFileContentAsString({ - componentSlug: categorySlug, - variantName: variantSlugPreviewFile, - }); + componentCode = variant.slugComponentFile + ? await getFileContentAsString({ + componentSlug: categorySlug, + variantName: `${componentSlug}/${variantSlugComponentFile}`, + }) + : undefined; + } else { + previewCode = await getFileContentAsString({ + componentSlug: categorySlug, + variantName: variantSlugPreviewFile, + }); - componentCode = variant.slugComponentFile - ? await getFileContentAsString({ - componentSlug: categorySlug, - variantName: variantSlugComponentFile, - }) - : undefined; - } - return { - ...variant, - previewCode, - componentCode, - }; + componentCode = variant.slugComponentFile + ? await getFileContentAsString({ + componentSlug: categorySlug, + variantName: variantSlugComponentFile, + }) + : undefined; + } + return { + ...variant, + previewCode, + componentCode, + }; } export async function fetchMultipleComponentData({ - componentList, - categorySlug, + componentList, + categorySlug, }: { - componentList: ComponentType[]; - categorySlug: string; + componentList: ComponentType[]; + categorySlug: string; }) { - const processedComponents: ProcessedComponent[] = []; + const processedComponents: ProcessedComponent[] = []; - for (const component of componentList) { - const processedVariants: ProcessedVariantType[] = []; + for (const component of componentList) { + const processedVariants: ProcessedVariantType[] = []; - for (const variant of component.variantList) { - const processedVariant = await fetchVariantData({ - categorySlug, - componentSlug: component.slug, - variant, - }); - processedVariants.push(processedVariant); - } + for (const variant of component.variantList) { + const processedVariant = await fetchVariantData({ + categorySlug, + componentSlug: component.slug, + variant, + }); + processedVariants.push(processedVariant); + } - processedComponents.push({ - ...component, - sizePreview: component.sizePreview, - componentList: processedVariants, - isIframed: component.isIframed ?? false, - }); - } + processedComponents.push({ + ...component, + sizePreview: component.sizePreview, + componentList: processedVariants, + isIframed: component.isIframed ?? false, + }); + } - return processedComponents; + return processedComponents; } export async function fetchSingleComponentData({ - categorySlug, - component, + categorySlug, + component, }: { - categorySlug: string; - component: SingleComponentType; + categorySlug: string; + component: SingleComponentType; }) { - const processedVariants: ProcessedVariantType[] = []; + const processedVariants: ProcessedVariantType[] = []; - for (const variant of component.variantList) { - const processedVariant = await fetchVariantData({ categorySlug, variant }); - processedVariants.push(processedVariant); - } + for (const variant of component.variantList) { + const processedVariant = await fetchVariantData({ categorySlug, variant }); + processedVariants.push(processedVariant); + } - return { - ...component, - componentList: processedVariants, - }; + return { + ...component, + componentList: processedVariants, + }; } diff --git a/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx b/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx index e9a2e02a..51bc9831 100644 --- a/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx +++ b/apps/website/src/app/(site)/[section]/[category]/single-component-section.tsx @@ -5,61 +5,61 @@ 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, + SectionType, + SingleComponentCategoryType, } from "@cuicui/ui/lib/types/component"; import GithubEditButton from "#/src/components/component-wrapper/github-edit-button"; export default async function SingleComponentCategory({ - category, - sectionSlug, + category, + sectionSlug, }: Readonly<{ - category: SingleComponentCategoryType; - sectionSlug: SectionType["slug"]; + category: SingleComponentCategoryType; + sectionSlug: SectionType["slug"]; }>) { - if (category.comingSoonCategory) { - return ; - } + if (category.comingSoonCategory) { + return ; + } - if (!category.component) { - return notFound(); - } + if (!category.component) { + return notFound(); + } - const component = await fetchSingleComponentData({ - categorySlug: category.slug, - component: { ...category.component }, - }); + const component = await fetchSingleComponentData({ + categorySlug: category.slug, + component: { ...category.component }, + }); - return ( -
-
-
- -
- - - -
-
- ); + return ( +
+
+
+ +
+ + + +
+
+ ); } diff --git a/apps/website/src/app/(site)/[section]/layout.tsx b/apps/website/src/app/(site)/[section]/layout.tsx index 7a3d81a0..982fbba3 100644 --- a/apps/website/src/app/(site)/[section]/layout.tsx +++ b/apps/website/src/app/(site)/[section]/layout.tsx @@ -7,49 +7,49 @@ import { NEXT_PUBLIC_SITE_URL } from "#/src/lib/site.const"; import { findSectionBySlug } from "#/src/utils/section-category-components-utils/find-section-by-slug"; type Props = { - children: ReactNode; - params: { - section: string; - category: string; - }; + children: ReactNode; + params: { + section: string; + category: string; + }; }; export function generateMetadata({ params }: Props): Metadata { - const section = findSectionBySlug(params.section); + const section = findSectionBySlug(params.section); - // optionally access and extend (rather than replace) parent metadata + // optionally access and extend (rather than replace) parent metadata - if (!section) { - return {}; - } - return { - title: section.name, - description: section.description, - openGraph: { - title: section.name, - description: section.description, - }, - alternates: { - canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}`, - }, - }; + if (!section) { + return {}; + } + return { + title: section.name, + description: section.description, + openGraph: { + title: section.name, + description: section.description, + }, + alternates: { + canonical: `${NEXT_PUBLIC_SITE_URL}/${section.slug}`, + }, + }; } export default function SectionLayout({ children, params }: Props) { - const section = findSectionBySlug(params.section); - if (!section) { - return notFound(); - } - return ( - <> - - - - {children} - - ); + const section = findSectionBySlug(params.section); + if (!section) { + return notFound(); + } + return ( + <> + + + + {children} + + ); } diff --git a/apps/website/src/app/(site)/[section]/page.tsx b/apps/website/src/app/(site)/[section]/page.tsx index 189e2f1e..cf5bdfb3 100644 --- a/apps/website/src/app/(site)/[section]/page.tsx +++ b/apps/website/src/app/(site)/[section]/page.tsx @@ -6,66 +6,66 @@ import { MainMenusGradientCard } from "@cuicui/ui/cuicui/other/cursors/dynamic-c import { findSectionBySlug } from "#/src/utils/section-category-components-utils/find-section-by-slug"; type Props = { - params: { section: string }; + params: { section: string }; }; export default function Page({ params }: Readonly) { - const section = findSectionBySlug(params.section); - if (!section) { - return notFound(); - } - if (section.slug !== params.section) { - return notFound(); - } - if (section.type === "page") { - return ( - <> -

{section.name} category

-

{section.description}

- - {section.pageList.map((category) => { - return ( - - - - ); - })} - - - ); - } - return ( - <> -

{section.name} category

-

{section.description}

- - {section.categoriesList.map((category) => { - return ( - - - - - - ); - })} - - - ); + const section = findSectionBySlug(params.section); + if (!section) { + return notFound(); + } + if (section.slug !== params.section) { + return notFound(); + } + if (section.type === "page") { + return ( + <> +

{section.name} category

+

{section.description}

+ + {section.pageList.map((category) => { + return ( + + + + ); + })} + + + ); + } + return ( + <> +

{section.name} category

+

{section.description}

+ + {section.categoriesList.map((category) => { + return ( + + + + + + ); + })} + + + ); - // return notFound(); + // return notFound(); } diff --git a/apps/website/src/app/(site)/about/page.tsx b/apps/website/src/app/(site)/about/page.tsx index e89794f9..75b63297 100644 --- a/apps/website/src/app/(site)/about/page.tsx +++ b/apps/website/src/app/(site)/about/page.tsx @@ -3,110 +3,110 @@ import type { Metadata } from "next"; const { NEXT_PUBLIC_SITE_URL } = process.env; export const metadata: Metadata = { - title: "About Us - CuiCui", - description: - "Discover our library focused on copy-paste simplicity, enabling easy code changes, good practices, and diverse artistic styles.", - keywords: [ - "copy-paste library", - "code simplicity", - "easy customization", - "good coding practices", - "diverse styles", - "glasmorphism", - "flat UI", - "skeuomorphism", - "neomorphism", - ], - openGraph: { - title: "About Us - CuiCui", - description: - "Learn more about the only UI library you need, simply copy-paste, use best React tools, best practices, and more creative components.", - url: `${NEXT_PUBLIC_SITE_URL}/about`, - type: "website", - siteName: "CuiCui", - }, + title: "About Us - CuiCui", + description: + "Discover our library focused on copy-paste simplicity, enabling easy code changes, good practices, and diverse artistic styles.", + keywords: [ + "copy-paste library", + "code simplicity", + "easy customization", + "good coding practices", + "diverse styles", + "glasmorphism", + "flat UI", + "skeuomorphism", + "neomorphism", + ], + openGraph: { + title: "About Us - CuiCui", + description: + "Learn more about the only UI library you need, simply copy-paste, use best React tools, best practices, and more creative components.", + url: `${NEXT_PUBLIC_SITE_URL}/about`, + type: "website", + siteName: "CuiCui", + }, }; const aboutContent = { - libraryIntroduction: { - title: "Why this Library?", - text: `Welcome to "CuiCui" library, where simplicity meets creativity! I believe in the power of copy-paste for learning and implementing code. By providing easy-to-use, clean, and well-documented components, I empower developers to quickly integrate and modify code to suit their needs.`, - subSection: { - title: "And Why CuiCui?", - text: `The name "CuiCui" is can't be more explicit with its repetition of "UI". I believe that a good UI is the key to a delightful and efficient user experience. Additionally, "CuiCui" phonetically resembles "quick UI," emphasizing how easy it is to use.`, - finalNote: `In French, "cui-cui" is an onomatopoeia for bird sounds, and... well, I think it sounds cute!`, - }, - }, - sections: [ - { - title: "Copy-Paste simplicity", - text: "Our library is designed to be as straightforward as possible. No hidden complexities, no unnecessary dependencies. Just pure, clean code that you can copy directly into your project. This approach not only saves time but also helps you understand what’s happening under the hood.", - }, - { - title: "Easy customization", - text: "Customization is at the heart of our library. I make it incredibly simple to tweak and adjust our components. Whether you want to change a color, adjust spacing, or even overhaul the entire look, our code is structured to make these changes easy and intuitive.", - }, - { - title: "Promoting good practices", - text: "I are committed to promoting good coding practices. Our components are built with clean, efficient, and optimized code. I avoid bloat and focus on delivering quality over quantity. Each component is a showcase of how to write effective and maintainable code.", - }, - { - title: "Diverse artistic directions", - text: "Uniformity can be boring. That’s why I offer a variety of artistic styles, from glasmorphism and flat UI to skeuomorphism and neomorphism. Our library is a playground of visual design, allowing you to choose and combine styles to create something truly unique.", - }, - { - title: "Dark & Light Mode", - text: "This high-quality component library supports both dark and light mode, ensuring that your components look great no matter the user’s preference. With a simple toggle, you can switch between modes and see your components adapt seamlessly to the new color scheme.", - }, - { - title: "Micro interactions", - text: "Micro interactions are the small animations and effects that bring a website to life. Our library includes a range of micro interactions that add polish and sophistication to your components. From hover effects to loading animations, these subtle details make a big difference in the overall user experience. This is rarely seen in other libraries, but I believe it’s an essential part of creating a truly engaging UI.", - }, - { - title: "Learning how the components work under the hood", - text: `I believe that understanding how a component works is essential for any developer. That’s why I provide detailed documentation for each component, explaining how it’s built and how you can customize it. By diving into the code, you can learn new techniques, improve your skills, and gain a deeper understanding of front-end development. + libraryIntroduction: { + title: "Why this Library?", + text: `Welcome to "CuiCui" library, where simplicity meets creativity! I believe in the power of copy-paste for learning and implementing code. By providing easy-to-use, clean, and well-documented components, I empower developers to quickly integrate and modify code to suit their needs.`, + subSection: { + title: "And Why CuiCui?", + text: `The name "CuiCui" is can't be more explicit with its repetition of "UI". I believe that a good UI is the key to a delightful and efficient user experience. Additionally, "CuiCui" phonetically resembles "quick UI," emphasizing how easy it is to use.`, + finalNote: `In French, "cui-cui" is an onomatopoeia for bird sounds, and... well, I think it sounds cute!`, + }, + }, + sections: [ + { + title: "Copy-Paste simplicity", + text: "Our library is designed to be as straightforward as possible. No hidden complexities, no unnecessary dependencies. Just pure, clean code that you can copy directly into your project. This approach not only saves time but also helps you understand what’s happening under the hood.", + }, + { + title: "Easy customization", + text: "Customization is at the heart of our library. I make it incredibly simple to tweak and adjust our components. Whether you want to change a color, adjust spacing, or even overhaul the entire look, our code is structured to make these changes easy and intuitive.", + }, + { + title: "Promoting good practices", + text: "I are committed to promoting good coding practices. Our components are built with clean, efficient, and optimized code. I avoid bloat and focus on delivering quality over quantity. Each component is a showcase of how to write effective and maintainable code.", + }, + { + title: "Diverse artistic directions", + text: "Uniformity can be boring. That’s why I offer a variety of artistic styles, from glasmorphism and flat UI to skeuomorphism and neomorphism. Our library is a playground of visual design, allowing you to choose and combine styles to create something truly unique.", + }, + { + title: "Dark & Light Mode", + text: "This high-quality component library supports both dark and light mode, ensuring that your components look great no matter the user’s preference. With a simple toggle, you can switch between modes and see your components adapt seamlessly to the new color scheme.", + }, + { + title: "Micro interactions", + text: "Micro interactions are the small animations and effects that bring a website to life. Our library includes a range of micro interactions that add polish and sophistication to your components. From hover effects to loading animations, these subtle details make a big difference in the overall user experience. This is rarely seen in other libraries, but I believe it’s an essential part of creating a truly engaging UI.", + }, + { + title: "Learning how the components work under the hood", + text: `I believe that understanding how a component works is essential for any developer. That’s why I provide detailed documentation for each component, explaining how it’s built and how you can customize it. By diving into the code, you can learn new techniques, improve your skills, and gain a deeper understanding of front-end development. And this is also the reason why I don't create a library but only provide copy paste code. I want developers to understand what you are using and how it works.`, - }, - ], - footer: { - text: "© 2024 CuiCui. All rights reserved. (on the site, I mean of course there is no right on copy pasted code)", - }, + }, + ], + footer: { + text: "© 2024 CuiCui. All rights reserved. (on the site, I mean of course there is no right on copy pasted code)", + }, }; export default function AboutPage() { - return ( - <> -
-
-

{aboutContent.libraryIntroduction.title}

-

{aboutContent.libraryIntroduction.text}

-
-

- {aboutContent.libraryIntroduction.subSection.title} -

-

- {aboutContent.libraryIntroduction.subSection.text} -

-
And most of all
-

- {aboutContent.libraryIntroduction.subSection.finalNote} -

-
-
+ return ( + <> +
+
+

{aboutContent.libraryIntroduction.title}

+

{aboutContent.libraryIntroduction.text}

+
+

+ {aboutContent.libraryIntroduction.subSection.title} +

+

+ {aboutContent.libraryIntroduction.subSection.text} +

+
And most of all
+

+ {aboutContent.libraryIntroduction.subSection.finalNote} +

+
+
- {aboutContent.sections.map((section, _index) => ( -
-

{section.title}

-
-

{section.text}

-
- ))} -
-
-
-

{aboutContent.footer.text}

-
- - ); + {aboutContent.sections.map((section, _index) => ( +
+

{section.title}

+
+

{section.text}

+
+ ))} +
+
+
+

{aboutContent.footer.text}

+
+ + ); } diff --git a/apps/website/src/app/(site)/getting-started/page.tsx b/apps/website/src/app/(site)/getting-started/page.tsx index 38b7cc93..dd4f8047 100644 --- a/apps/website/src/app/(site)/getting-started/page.tsx +++ b/apps/website/src/app/(site)/getting-started/page.tsx @@ -5,81 +5,81 @@ import { StaticStep } from "#/src/ui/stepper"; import type { Metadata } from "next"; export const metadata: Metadata = { - title: "Getting Started - CuiCui", - description: - "Learn how to use the only UI library you need, simply copy-paste, use best React tools, best practices, and more creative components.", - keywords: [ - "copy-paste library", - "code simplicity", - "easy customization", - "good coding practices", - "diverse styles", - "glasmorphism", - "flat UI", - "skeuomorphism", - "neomorphism", - ], - openGraph: { - title: "Getting Started - CuiCui", - description: - "Learn how to use the only UI library you need, simply copy-paste, use best React tools, best practices, and more creative components.", - url: `${NEXT_PUBLIC_SITE_URL}/about`, - type: "website", - siteName: "CuiCui", - }, + title: "Getting Started - CuiCui", + description: + "Learn how to use the only UI library you need, simply copy-paste, use best React tools, best practices, and more creative components.", + keywords: [ + "copy-paste library", + "code simplicity", + "easy customization", + "good coding practices", + "diverse styles", + "glasmorphism", + "flat UI", + "skeuomorphism", + "neomorphism", + ], + openGraph: { + title: "Getting Started - CuiCui", + description: + "Learn how to use the only UI library you need, simply copy-paste, use best React tools, best practices, and more creative components.", + url: `${NEXT_PUBLIC_SITE_URL}/about`, + type: "website", + siteName: "CuiCui", + }, }; export default function Page() { - return ( -
-
-

Getting Started with Cuicui

-

- This library is designed for use in a React TypeScript environment. - Before integrating Cuicui components, ensure that your project is set - up with basic React tooling. -

-
+ return ( +
+
+

Getting Started with Cuicui

+

+ This library is designed for use in a React TypeScript environment. + Before integrating Cuicui components, ensure that your project is set + up with basic React tooling. +

+
-
-

The "cn" function

-

- The cn function is a utility for generating{" "} - className strings compatible with TailwindCSS utility - classes. Many Cuicui components rely on this function, making it an - essential part of your toolkit. -

-

- Benefits of Using the cn function -

-
    -
  • - Readable and maintainable className strings, with easy inline - comments for styles. -
    • -
  • - Supports conditional styles with TailwindCSS, enhancing flexibility. -
    • -
  • Simplifies maintenance by consolidating class name logic.
    • -
+
+

The "cn" function

+

+ The cn function is a utility for generating{" "} + className strings compatible with TailwindCSS utility + classes. Many Cuicui components rely on this function, making it an + essential part of your toolkit. +

+

+ Benefits of Using the cn function +

+
    +
  • + Readable and maintainable className strings, with easy inline + comments for styles. +
    • +
  • + Supports conditional styles with TailwindCSS, enhancing flexibility. +
    • +
  • Simplifies maintenance by consolidating class name logic.
    • +
-

How to Install the cn Function

-
- - tailwind-merge - +

How to Install the cn Function

+
+ + tailwind-merge + - - clsx - + + clsx + - -

- Create a cn.ts file in your project's{" "} - utils folder and add the following code: -

- - {`// ./src/utils/cn.ts + +

+ Create a cn.ts file in your project's{" "} + utils folder and add the following code: +

+ + {`// ./src/utils/cn.ts import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; @@ -87,10 +87,10 @@ export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `} - - -
-
-
- ); + + +
+ +
+ ); } diff --git a/apps/website/src/app/(site)/layout.tsx b/apps/website/src/app/(site)/layout.tsx index b0a40258..ea4a6cf5 100644 --- a/apps/website/src/app/(site)/layout.tsx +++ b/apps/website/src/app/(site)/layout.tsx @@ -7,33 +7,33 @@ import { StaticNoise } from "@/cuicui/other/creative-effects/animated-noise/stat import type React from "react"; export default function ComponentsLayout({ - children, + children, }: Readonly<{ children: React.ReactNode }>) { - return ( - <> -
- {/* Note: The noise effect is experimental and may affect the design. Consider its impact before using it officialy. */} - - + 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 */} +
+ {/* Add overflow-auto if layout width problems */} - + -
-
{children}
-
+
+
{children}
+
-
- -
-
-
- - - ); +
+ +
+
+
+ + + ); } 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 9d404d8d..9b2d5800 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 @@ -2,131 +2,131 @@ import type { FileSystemNode } from "#/src/app/api/get-components/route"; // Helper function to extract categories from the tree export function extractCategories(node: FileSystemNode): CategoryType[] { - const categories: CategoryType[] = []; - - if ( - node.type === "directory" && - node.config && - node.config.type === "category" - ) { - const category: CategoryType = { - slug: node.config.slug, - name: node.config.name, - description: node.config.description, - releaseDateCategory: node.config.releaseDateCategory - ? new Date(node.config.releaseDateCategory) - : undefined, - icon: node.config.icon, - previewCategory: node.config.previewCategory, - componentList: [], - }; - - if (node.children) { - for (const child of node.children) { - const components = extractComponents(child); - category.componentList.push(...components); - } - } - - categories.push(category); - } else if (node.children) { - for (const child of node.children) { - categories.push(...extractCategories(child)); - } - } - - return categories; + const categories: CategoryType[] = []; + + if ( + node.type === "directory" && + node.config && + node.config.type === "category" + ) { + const category: CategoryType = { + slug: node.config.slug, + name: node.config.name, + description: node.config.description, + releaseDateCategory: node.config.releaseDateCategory + ? new Date(node.config.releaseDateCategory) + : undefined, + icon: node.config.icon, + previewCategory: node.config.previewCategory, + componentList: [], + }; + + if (node.children) { + for (const child of node.children) { + const components = extractComponents(child); + category.componentList.push(...components); + } + } + + categories.push(category); + } else if (node.children) { + for (const child of node.children) { + categories.push(...extractCategories(child)); + } + } + + return categories; } // Helper function to extract components from the tree export function extractComponents(node: FileSystemNode): ComponentType[] { - const components: ComponentType[] = []; - - if ( - node.type === "directory" && - node.config && - node.config.type === "component" - ) { - const component: ComponentType = { - title: node.config.title, - description: node.config.description, - sizePreview: node.config.sizePreview, - slug: node.config.slug, - isIframed: node.config.isIframed, - variantList: [], - inspiration: node.config.inspiration, - inspirationLink: node.config.inspirationLink, - }; - - if (node.children) { - for (const child of node.children) { - const variants = extractVariants(child); - component.variantList.push(...variants); - } - } - - components.push(component); - } else if (node.children) { - for (const child of node.children) { - components.push(...extractComponents(child)); - } - } - - return components; + const components: ComponentType[] = []; + + if ( + node.type === "directory" && + node.config && + node.config.type === "component" + ) { + const component: ComponentType = { + title: node.config.title, + description: node.config.description, + sizePreview: node.config.sizePreview, + slug: node.config.slug, + isIframed: node.config.isIframed, + variantList: [], + inspiration: node.config.inspiration, + inspirationLink: node.config.inspirationLink, + }; + + if (node.children) { + for (const child of node.children) { + const variants = extractVariants(child); + component.variantList.push(...variants); + } + } + + components.push(component); + } else if (node.children) { + for (const child of node.children) { + components.push(...extractComponents(child)); + } + } + + return components; } // Helper function to extract variants from the tree export function extractVariants(node: FileSystemNode): VariantType[] { - const variants: VariantType[] = []; - - if ( - node.type === "directory" && - node.config && - node.config.type === "variant" - ) { - const variant: VariantType = { - name: node.config.name, - slugPreviewFile: node.config.slugPreviewFile, - slugComponentFile: node.config.slugComponentFile, - }; - - variants.push(variant); - } else if (node.children) { - for (const child of node.children) { - variants.push(...extractVariants(child)); - } - } - - return variants; + const variants: VariantType[] = []; + + if ( + node.type === "directory" && + node.config && + node.config.type === "variant" + ) { + const variant: VariantType = { + name: node.config.name, + slugPreviewFile: node.config.slugPreviewFile, + slugComponentFile: node.config.slugComponentFile, + }; + + variants.push(variant); + } else if (node.children) { + for (const child of node.children) { + variants.push(...extractVariants(child)); + } + } + + return variants; } export type VariantType = { - name: string; - slugPreviewFile: string; - slugComponentFile?: string; + name: string; + slugPreviewFile: string; + slugComponentFile?: string; }; export type ComponentType = { - title: string; - description: string; - sizePreview: string; - slug: string; - isIframed?: boolean; - variantList: VariantType[]; - inspiration?: string; - inspirationLink?: string; + title: string; + description: string; + sizePreview: string; + slug: string; + isIframed?: boolean; + variantList: VariantType[]; + inspiration?: string; + inspirationLink?: string; }; export type CategoryType = { - slug: string; - name: string; - description: string; - releaseDateCategory?: Date; - icon?: string; // Adjusted to string for simplicity - previewCategory?: { - component?: string; // Adjusted to string for simplicity - previewImage?: string; - previewScale?: number; - }; - componentList: ComponentType[]; + slug: string; + name: string; + description: string; + releaseDateCategory?: Date; + icon?: string; // Adjusted to string for simplicity + previewCategory?: { + component?: string; // Adjusted to string for simplicity + previewImage?: string; + previewScale?: number; + }; + componentList: ComponentType[]; }; diff --git a/apps/website/src/app/api/get-components/route.ts b/apps/website/src/app/api/get-components/route.ts index 4c1df413..d83cabf1 100644 --- a/apps/website/src/app/api/get-components/route.ts +++ b/apps/website/src/app/api/get-components/route.ts @@ -3,59 +3,59 @@ import { existsSync, readFileSync, readdirSync, statSync } from "node:fs"; import { join } from "node:path"; import { - extractCategories, - extractComponents, - extractVariants, + extractCategories, + extractComponents, + extractVariants, } from "#/src/app/api/get-components/get-components.utils"; export type FileSystemNode = { - name: string; - path: string; - type: "file" | "directory"; - // biome-ignore lint/suspicious/noExplicitAny: - config?: any; - children?: FileSystemNode[]; + name: string; + path: string; + type: "file" | "directory"; + // biome-ignore lint/suspicious/noExplicitAny: + config?: any; + children?: FileSystemNode[]; }; function getDirectoryTree(dirPath: string): FileSystemNode { - const stats = statSync(dirPath); - const name = dirPath.split("/").pop() ?? dirPath; - const node: FileSystemNode = { - name, - path: dirPath, - type: stats.isDirectory() ? "directory" : "file", - }; - - if (stats.isDirectory()) { - // Check for config.json in the directory - const configPath = join(dirPath, "config.json"); - if (existsSync(configPath)) { - const configContent = readFileSync(configPath, "utf-8"); - try { - node.config = JSON.parse(configContent); - } catch (_error) { - // Ignore invalid JSON - } - } - - // Recursively read children - node.children = readdirSync(dirPath) - .filter((childName) => childName !== "config.json") // Exclude config.json from children - .map((childName) => { - return getDirectoryTree(join(dirPath, childName)); - }); - } - - return node; + const stats = statSync(dirPath); + const name = dirPath.split("/").pop() ?? dirPath; + const node: FileSystemNode = { + name, + path: dirPath, + type: stats.isDirectory() ? "directory" : "file", + }; + + if (stats.isDirectory()) { + // Check for config.json in the directory + const configPath = join(dirPath, "config.json"); + if (existsSync(configPath)) { + const configContent = readFileSync(configPath, "utf-8"); + try { + node.config = JSON.parse(configContent); + } catch (_error) { + // Ignore invalid JSON + } + } + + // Recursively read children + node.children = readdirSync(dirPath) + .filter((childName) => childName !== "config.json") // Exclude config.json from children + .map((childName) => { + return getDirectoryTree(join(dirPath, childName)); + }); + } + + return node; } export function GET() { - const basePath = join(process.cwd(), "../../packages/ui/cuicui/"); - const tree = getDirectoryTree(basePath); - - // Optionally, you can process the tree to extract categories, components, and variants - const categories = extractCategories(tree); - const components = extractComponents(tree); - const variants = extractVariants(tree); - return Response.json({ categories, components, variants, tree }); + const basePath = join(process.cwd(), "../../packages/ui/cuicui/"); + const tree = getDirectoryTree(basePath); + + // Optionally, you can process the tree to extract categories, components, and variants + const categories = extractCategories(tree); + const components = extractComponents(tree); + const variants = extractVariants(tree); + return Response.json({ categories, components, variants, tree }); } diff --git a/apps/website/src/app/card.tsx b/apps/website/src/app/card.tsx index 0393ac46..80b5aab8 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, + 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/generate-preview-images.tsx b/apps/website/src/app/dev/generate-preview-images/generate-preview-images.tsx index ffc6dbc7..e7919cf4 100644 --- a/apps/website/src/app/dev/generate-preview-images/generate-preview-images.tsx +++ b/apps/website/src/app/dev/generate-preview-images/generate-preview-images.tsx @@ -11,123 +11,123 @@ const HEIGHT_SCREENSHOT = 500; const THEMES_ARRAY = ["light", "dark"]; export default function GeneratePreviewImages() { - const [currentComponent, setCurrentComponent] = useState(null); - const [isProcessing, setIsProcessing] = useState(false); - const { setTheme } = useTheme(); - useEffect(() => { - if (!isProcessing) { - processComponents(); - } + const [currentComponent, setCurrentComponent] = useState(null); + const [isProcessing, setIsProcessing] = useState(false); + const { setTheme } = useTheme(); + useEffect(() => { + if (!isProcessing) { + processComponents(); + } - async function processComponents() { - const sections = SectionsList.filter( - (section) => - section.type === "multiple-component" || - section.type === "single-component", - ); - for (const theme of THEMES_ARRAY) { - setTheme(theme); - for (const section of sections) { - // @ts-ignore - for (const category of section.categoriesList) { - setCurrentComponent( - - {category.previewCategory?.component} - , - ); + async function processComponents() { + const sections = SectionsList.filter( + (section) => + section.type === "multiple-component" || + section.type === "single-component", + ); + for (const theme of THEMES_ARRAY) { + setTheme(theme); + for (const section of sections) { + // @ts-ignore + for (const category of section.categoriesList) { + setCurrentComponent( + + {category.previewCategory?.component} + , + ); - // Wait for the component to render and capture the screenshot - await new Promise((resolve) => setTimeout(resolve, 1500)); // Adjust delay as needed - } - } - } + // Wait for the component to render and capture the screenshot + await new Promise((resolve) => setTimeout(resolve, 1500)); // Adjust delay as needed + } + } + } - // All components have been processed - setIsProcessing(false); - setCurrentComponent(null); - } - }, [isProcessing, setTheme]); - if (isProcessing) { - return <>{currentComponent}; - } - return ( - - ); + // All components have been processed + setIsProcessing(false); + setCurrentComponent(null); + } + }, [isProcessing, setTheme]); + if (isProcessing) { + return <>{currentComponent}; + } + return ( + + ); } const ComponentToRender = ({ - fileName, - children, - scale, + fileName, + children, + scale, }: { - fileName: string; - children: ReactNode; - scale?: number; + fileName: string; + children: ReactNode; + scale?: number; }) => { - const ref = useRef(null); - const hasCaptured = useRef(false); + const ref = useRef(null); + const hasCaptured = useRef(false); - useEffect(() => { - if (hasCaptured.current) { - return; - } - hasCaptured.current = true; - const captureComponent = async () => { - // Wait for the component to fully render - await new Promise((resolve) => setTimeout(resolve, 1000)); // Adjust delay as needed + useEffect(() => { + if (hasCaptured.current) { + return; + } + hasCaptured.current = true; + const captureComponent = async () => { + // Wait for the component to fully render + await new Promise((resolve) => setTimeout(resolve, 1000)); // Adjust delay as needed - if (ref.current) { - domtoimage - .toPng(ref.current, { - copyDefaultStyles: false, - width: WIDTH_SCREENSHOT, - height: HEIGHT_SCREENSHOT, - scale: 1, - }) - .then((dataUrl: string) => { - const link = document.createElement("a"); - link.download = `${fileName}.png`; - link.href = dataUrl; - link.click(); - }) - .catch((error: unknown) => { - console.error("Oops, something went wrong!", error); - }); - } - }; + if (ref.current) { + domtoimage + .toPng(ref.current, { + copyDefaultStyles: false, + width: WIDTH_SCREENSHOT, + height: HEIGHT_SCREENSHOT, + scale: 1, + }) + .then((dataUrl: string) => { + const link = document.createElement("a"); + link.download = `${fileName}.png`; + link.href = dataUrl; + link.click(); + }) + .catch((error: unknown) => { + console.error("Oops, something went wrong!", error); + }); + } + }; - captureComponent(); - }, [fileName]); + captureComponent(); + }, [fileName]); - return ( - <> - -
- {children} -
- - ); + +
+ {children} +
+ + ); }; 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 8cf959db..d976d658 100644 --- a/apps/website/src/app/dev/generate-preview-images/page.tsx +++ b/apps/website/src/app/dev/generate-preview-images/page.tsx @@ -2,14 +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() { - if (process.env.NODE_ENV === "production") { - return null; - } + if (process.env.NODE_ENV === "production") { + return null; + } - return ; + return ; } diff --git a/apps/website/src/app/dev/page.tsx b/apps/website/src/app/dev/page.tsx index 02330c93..84a2db66 100644 --- a/apps/website/src/app/dev/page.tsx +++ b/apps/website/src/app/dev/page.tsx @@ -2,5 +2,5 @@ import Modern3dKbdVariant1 from "@/cuicui/application-ui/kbd/modern-3d-kbd/varia import React from "react"; export default function Page() { - return ; + return ; } diff --git a/apps/website/src/app/dev/playground-component/page.tsx b/apps/website/src/app/dev/playground-component/page.tsx index 7c9ca61c..eb7e0ea0 100644 --- a/apps/website/src/app/dev/playground-component/page.tsx +++ b/apps/website/src/app/dev/playground-component/page.tsx @@ -2,14 +2,14 @@ import Playground from "#/src/app/dev/playground-component/playground"; 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() { - if (process.env.NODE_ENV === "production") { - return null; - } + if (process.env.NODE_ENV === "production") { + return null; + } - return ; + return ; } diff --git a/apps/website/src/app/dev/playground-component/playground.tsx b/apps/website/src/app/dev/playground-component/playground.tsx index 253babd6..291b1faa 100644 --- a/apps/website/src/app/dev/playground-component/playground.tsx +++ b/apps/website/src/app/dev/playground-component/playground.tsx @@ -1,15 +1,15 @@ import React from "react"; export default function Playground() { - return ( -
- -
- ); + return ( +
+ +
+ ); } diff --git a/apps/website/src/app/dev/playground-component/test.tsx b/apps/website/src/app/dev/playground-component/test.tsx index 203f468f..510a2e90 100644 --- a/apps/website/src/app/dev/playground-component/test.tsx +++ b/apps/website/src/app/dev/playground-component/test.tsx @@ -2,5 +2,5 @@ import Modern3dKbdVariant1 from "@/cuicui/application-ui/kbd/modern-3d-kbd/varia import React from "react"; export default function test() { - return ; + return ; } diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx index d761d779..1a2be539 100644 --- a/apps/website/src/app/layout.tsx +++ b/apps/website/src/app/layout.tsx @@ -7,64 +7,64 @@ import type { ReactNode } from "react"; import Providers from "#/src/app/providers"; import PlausibleScripts from "#/src/components/analytics/plausible-scripts"; const font = DM_Sans({ - subsets: ["latin"], - display: "swap", - variable: "--font-dm-sans", + subsets: ["latin"], + display: "swap", + variable: "--font-dm-sans", }); const { NEXT_PUBLIC_SITE_URL } = process.env; export const metadata: Metadata = { - metadataBase: new URL(NEXT_PUBLIC_SITE_URL ?? "https://www.cuicui.day"), - title: { - default: - "CuiCui | High-Quality React and Tailwind Components for Copy-Paste", - template: "%s | CuiCui", - }, - description: - "CuiCui is a modern UI copy paste library that helps you build beautiful websites and applications.", - keywords: - "UI library, UI components, copy paste UI, web design, front-end development, modern UI, React, Tailwind CSS, TypeScript, JavaScript, Framer Motion", - authors: { - name: "Damien Schneider", - url: "https://github.com/damien-schneider", - }, - publisher: "Cuicui - Damien Schneider", - openGraph: { - title: "CuiCui | High-Quality React and Tailwind Components for Copy-Paste", - description: - "CuiCui is a modern UI copy paste library using React that helps you build beautiful websites and applications with customizable, and modern components.", - url: "https://www.cuicui.day", - type: "website", - locale: "en", - siteName: "CuiCui", - }, - twitter: { - card: "summary_large_image", - site: "@damien_schneid", - creator: "@damien_schneid", - title: "CuiCui | High-Quality React and Tailwind Components for Copy-Paste", - description: - "CuiCui is a modern UI copy paste library that helps you build beautiful websites and applications as easy as copy paste.", - }, + metadataBase: new URL(NEXT_PUBLIC_SITE_URL ?? "https://www.cuicui.day"), + title: { + default: + "CuiCui | High-Quality React and Tailwind Components for Copy-Paste", + template: "%s | CuiCui", + }, + description: + "CuiCui is a modern UI copy paste library that helps you build beautiful websites and applications.", + keywords: + "UI library, UI components, copy paste UI, web design, front-end development, modern UI, React, Tailwind CSS, TypeScript, JavaScript, Framer Motion", + authors: { + name: "Damien Schneider", + url: "https://github.com/damien-schneider", + }, + publisher: "Cuicui - Damien Schneider", + openGraph: { + title: "CuiCui | High-Quality React and Tailwind Components for Copy-Paste", + description: + "CuiCui is a modern UI copy paste library using React that helps you build beautiful websites and applications with customizable, and modern components.", + url: "https://www.cuicui.day", + type: "website", + locale: "en", + siteName: "CuiCui", + }, + twitter: { + card: "summary_large_image", + site: "@damien_schneid", + creator: "@damien_schneid", + title: "CuiCui | High-Quality React and Tailwind Components for Copy-Paste", + description: + "CuiCui is a modern UI copy paste library that helps you build beautiful websites and applications as easy as copy paste.", + }, }; export default function RootLayout({ - children, + children, }: Readonly<{ - children: ReactNode; + children: ReactNode; }>) { - return ( - - - - {/* */} - - + return ( + + + + {/* */} + + - {children} - - - - ); + {children} + + + + ); } diff --git a/apps/website/src/app/not-found.tsx b/apps/website/src/app/not-found.tsx index 718f49a6..43a3b6c3 100644 --- a/apps/website/src/app/not-found.tsx +++ b/apps/website/src/app/not-found.tsx @@ -1,5 +1,5 @@ import NotFoundCard from "#/src/components/not-found-card"; export default function NotFound() { - return ; + return ; } diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx index 85dab1d6..e4ed2353 100644 --- a/apps/website/src/app/page.tsx +++ b/apps/website/src/app/page.tsx @@ -10,41 +10,41 @@ import { DotsPattern } from "@/cuicui/other/patterns/dots-pattern/dots-pattern"; import { PreviewUseMeasure } from "@/cuicui/hooks/use-measure/preview.use-measure"; export default function HomePage() { - return ( -
- -
- -
-
- -
+ return ( +
+ +
+ +
+
+ +
-
-
Cuicui
-

- Every UI components, hooks, tools, ... you need -

-

- More than 100 variants of Open-Source components, hooks and tools made - for React. Just Copy Paste. -

- - Start Copy Pasting - -
-
- -
-
- -
-
- ); +
+
Cuicui
+

+ Every UI components, hooks, tools, ... you need +

+

+ More than 100 variants of Open-Source components, hooks and tools made + for React. Just Copy Paste. +

+ + Start Copy Pasting + +
+
+ +
+
+ +
+
+ ); } diff --git a/apps/website/src/app/sitemap.ts b/apps/website/src/app/sitemap.ts index fc655788..a5c52bdf 100644 --- a/apps/website/src/app/sitemap.ts +++ b/apps/website/src/app/sitemap.ts @@ -4,55 +4,55 @@ import { SectionsList } from "@cuicui/ui"; export const port = process.env.PORT ?? 3000; export const HOST = - process.env.NEXT_PUBLIC_SITE_URL ?? `http://localhost:${port}`; + process.env.NEXT_PUBLIC_SITE_URL ?? `http://localhost:${port}`; export default function sitemap(): MetadataRoute.Sitemap { - // Google's limit is 50,000 URLs per sitemap + // Google's limit is 50,000 URLs per sitemap - return [...staticSitemap, ...getComponentsSitemap()]; + return [...staticSitemap, ...getComponentsSitemap()]; } const staticSitemap: MetadataRoute.Sitemap = [ - { - url: HOST, - lastModified: new Date("2024-08-14"), - changeFrequency: "monthly", - priority: 1, - }, - { - url: `${HOST}/about`, - lastModified: new Date("2024-08-14"), - changeFrequency: "monthly", - priority: 0.9, - }, - { - url: `${HOST}/getting-started`, - lastModified: new Date("2024-08-14"), - changeFrequency: "monthly", - priority: 0.9, - }, + { + url: HOST, + lastModified: new Date("2024-08-14"), + changeFrequency: "monthly", + priority: 1, + }, + { + url: `${HOST}/about`, + lastModified: new Date("2024-08-14"), + changeFrequency: "monthly", + priority: 0.9, + }, + { + url: `${HOST}/getting-started`, + lastModified: new Date("2024-08-14"), + changeFrequency: "monthly", + priority: 0.9, + }, ]; function getComponentsSitemap(): MetadataRoute.Sitemap { - const componentSitemap: MetadataRoute.Sitemap = []; - SectionsList.flatMap((section) => { - if ( - section.type === "multiple-component" || - section.type === "single-component" - ) { - for (const category of section.categoriesList) { - if (category.comingSoonCategory) { - return; - } - if (section.slug && category.slug) { - componentSitemap.push({ - url: `${HOST}/${section.slug}/${category.slug}`, - lastModified: category.releaseDateCategory, - changeFrequency: "monthly", - priority: 0.9, - }); - } - } - } - }); - return componentSitemap; + const componentSitemap: MetadataRoute.Sitemap = []; + SectionsList.flatMap((section) => { + if ( + section.type === "multiple-component" || + section.type === "single-component" + ) { + for (const category of section.categoriesList) { + if (category.comingSoonCategory) { + return; + } + if (section.slug && category.slug) { + componentSitemap.push({ + url: `${HOST}/${section.slug}/${category.slug}`, + lastModified: category.releaseDateCategory, + changeFrequency: "monthly", + priority: 0.9, + }); + } + } + } + }); + return componentSitemap; } diff --git a/apps/website/src/components/analytics/plausible-scripts.tsx b/apps/website/src/components/analytics/plausible-scripts.tsx index bb197ab4..b62c0cf0 100644 --- a/apps/website/src/components/analytics/plausible-scripts.tsx +++ b/apps/website/src/components/analytics/plausible-scripts.tsx @@ -2,21 +2,21 @@ import { IS_PRODUCTION, PLAUSIBLE_DOMAIN } from "#/src/lib/site.const"; import Script from "next/script"; export default function PlausibleScripts() { - if (!(IS_PRODUCTION && PLAUSIBLE_DOMAIN)) { - return null; - } - return ( - <> - - - ); + if (!(IS_PRODUCTION && PLAUSIBLE_DOMAIN)) { + return null; + } + return ( + <> + + + ); } diff --git a/apps/website/src/components/component-wrapper/animated-tab-motion-div.tsx b/apps/website/src/components/component-wrapper/animated-tab-motion-div.tsx index f653eeaa..9ad11ae9 100644 --- a/apps/website/src/components/component-wrapper/animated-tab-motion-div.tsx +++ b/apps/website/src/components/component-wrapper/animated-tab-motion-div.tsx @@ -3,18 +3,18 @@ import { type MotionProps, motion } from "framer-motion"; import type React from "react"; import { cn } from "#/src/utils/cn"; export default function AnimatedTabMotionDiv({ - className, - ...props + className, + ...props }: React.HTMLProps & MotionProps) { - return ( - - ); + return ( + + ); } 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 2f349140..9a257701 100644 --- a/apps/website/src/components/component-wrapper/component-tab-renderer.tsx +++ b/apps/website/src/components/component-wrapper/component-tab-renderer.tsx @@ -5,106 +5,106 @@ import "./full-component.css"; import { ComponentWrapper } from "#/src/components/component-wrapper/component-wrapper"; import StepToInstall from "#/src/components/steps-to-install/step-to-install"; import type { - ComponentHeightType, - ProcessedVariantType, + ComponentHeightType, + ProcessedVariantType, } from "@cuicui/ui/lib/types/component"; import CodeHighlighter from "#/src/ui/code-highlighter"; import { - ResizableHandle, - ResizablePanel, - ResizablePanelGroup, + ResizableHandle, + ResizablePanel, + ResizablePanelGroup, } from "#/src/ui/shadcn/resizable"; import { - ScrollArea, - ScrollAreaViewport, - ScrollBar, + ScrollArea, + ScrollAreaViewport, + ScrollBar, } from "#/src/ui/shadcn/scrollarea"; import { cn } from "#/src/utils/cn"; import { getContainerHeightClass } from "#/src/components/component-wrapper/get-container-height-class"; const tabs = [ - { - name: "Preview", - value: "preview", - }, - { - name: "Preview Code", - value: "code-preview", - }, - { - name: "Component Code", - value: "code-component", - }, + { + name: "Preview", + value: "preview", + }, + { + name: "Preview Code", + value: "code-preview", + }, + { + name: "Component Code", + value: "code-component", + }, ]; export default function ComponentTabRenderer({ - // name, - component, - previewCode, - componentCode, - isResizable, - rerenderButton, - isIframed = false, - size, - componentParams, + // name, + component, + previewCode, + componentCode, + isResizable, + rerenderButton, + isIframed = false, + size, + componentParams, }: { - isResizable?: boolean; - rerenderButton?: boolean; - isIframed?: boolean; - size: ComponentHeightType; - componentParams: { - sectionSlug: string; - categorySlug: string; - componentSlug: string; - variantSlug: string; - }; + isResizable?: boolean; + rerenderButton?: boolean; + isIframed?: boolean; + size: ComponentHeightType; + componentParams: { + sectionSlug: string; + categorySlug: string; + componentSlug: string; + variantSlug: string; + }; } & ProcessedVariantType) { - return ( - - - {tabs.map((tab) => { - if ( - (tab.value === "code-preview" && previewCode) || - (tab.value === "code-component" && componentCode) || - tab.value === "preview" - ) { - return ( - - - {tab.name} - - - ); - } - })} - - - {isResizable ? ( - - - {/* {rerenderButton && } */} - {/*

+ return ( + + + {tabs.map((tab) => { + if ( + (tab.value === "code-preview" && previewCode) || + (tab.value === "code-component" && componentCode) || + tab.value === "preview" + ) { + return ( + + + {tab.name} + + + ); + } + })} + + + {isResizable ? ( + + + {/* {rerenderButton && } */} + {/*

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