From 7ae3f815609150565f933205eff009fb16eda10f Mon Sep 17 00:00:00 2001 From: FajarFE <105129023+FajarFE@users.noreply.github.com> Date: Fri, 26 Apr 2024 15:33:06 +0700 Subject: [PATCH] fixed:iframe,dynamic import and; improvement:created jsonDataDirectory script --- app/(components)/[componentName]/page.tsx | 65 +++++++++++----------- components/Iframe/index.tsx | 45 ++++++++++++++++ components/highlighter/highlighter.tsx | 66 ++++------------------- components/sections/list-components.tsx | 8 ++- constant/jsonDataDirectory.tsx | 52 ++++++++++++++++++ next.config.js | 4 +- package-lock.json | 21 +++++++- package.json | 4 +- tailwind.config.ts | 1 + utils/getComponentCode.tsx | 2 +- utils/getDirectoryComponents.ts | 58 ++++++++++++++++++++ 11 files changed, 233 insertions(+), 93 deletions(-) create mode 100644 components/Iframe/index.tsx create mode 100644 constant/jsonDataDirectory.tsx create mode 100644 utils/getDirectoryComponents.ts diff --git a/app/(components)/[componentName]/page.tsx b/app/(components)/[componentName]/page.tsx index ffc8c35..e517c0e 100644 --- a/app/(components)/[componentName]/page.tsx +++ b/app/(components)/[componentName]/page.tsx @@ -1,11 +1,14 @@ "use client"; -import React from "react"; +import React, { useEffect } from "react"; import components from "@/constant/components"; import ListComponents from "@/components/sections/list-components"; import { notFound } from "next/navigation"; import Link from "next/link"; +import jsonDataDirectory from "@/constant/jsonDataDirectory"; +import ReactDOMServer from "react-dom/server"; import { getComponentCode } from "@/utils/getComponentCode"; +import dynamic from "next/dynamic"; const Components = ({ params }: { params: { componentName: string } }) => { const filteredComponents = components.filter((component) => @@ -18,36 +21,36 @@ const Components = ({ params }: { params: { componentName: string } }) => { return notFound(); } - return ( -
- {filteredComponents.map((component, index) => ( -
- {component.style - .filter((style) => - style.name - .toLowerCase() - .includes(params.componentName.toLowerCase()), - ) - .map((style, index) => ( -
- -
- ))} -
- ))} - {filteredComponents.length === 0 && ( -

- Maybe you meant{" "} - - {params.componentName} - -

- )} -
- ); + const componentsDancok = []; + + if (jsonDataDirectory && Array.isArray(jsonDataDirectory)) { + const findIndexByName = jsonDataDirectory.findIndex( + (component) => component.name === params.componentName, + ); + console.log(findIndexByName); + console.log(findIndexByName); + const countComponents = jsonDataDirectory[findIndexByName].allComponents; + console.log(countComponents); + for (let i = 0; i < countComponents.length; i++) { + const file = jsonDataDirectory[findIndexByName].allComponents[i]; + const Component = dynamic( + () => import(`@/ui/${params.componentName}/${file}`), + { + ssr: false, + }, + ); + + componentsDancok.push( + } + />, + ); + } + } + + return
{componentsDancok}
; }; export default Components; diff --git a/components/Iframe/index.tsx b/components/Iframe/index.tsx new file mode 100644 index 0000000..8f5cbe5 --- /dev/null +++ b/components/Iframe/index.tsx @@ -0,0 +1,45 @@ +"use client"; +import "@/app/globals.css"; +import React, { FC, useEffect, useState } from "react"; +import { createPortal } from "react-dom"; + +interface IFrameProps { + children: React.ReactNode; + scripts?: string[] | undefined; + title?: string; + className?: any; +} + +export const IframeComp: FC = ({ + children, + className, + title, + scripts, + ...props +}) => { + const [contentRef, setContentRef] = useState(null); + const mountNode = contentRef?.contentWindow?.document.body; + useEffect(() => { + // Memasang skrip ke dalam iframe setelah komponen dimuat + if (mountNode && scripts.length > 0) { + scripts.forEach((scriptUrl) => { + const script = document.createElement("script"); + script.src = scriptUrl; + script.async = true; + mountNode.appendChild(script); + }); + } + }, [mountNode, scripts]); + return ( + + ); +}; diff --git a/components/highlighter/highlighter.tsx b/components/highlighter/highlighter.tsx index c212b9d..95fe3a8 100644 --- a/components/highlighter/highlighter.tsx +++ b/components/highlighter/highlighter.tsx @@ -1,18 +1,19 @@ import React, { Suspense, useEffect, useState } from "react"; -import Prism from "prismjs"; + import ButtonHighliter from "./button-highlighter"; -import "prismjs/components/prism-jsx"; + import "@/app/customprism.css"; +import { IframeComp } from "../Iframe"; interface HighlighterProps { - code?: string; language?: string; componentName?: string; + code: React.ReactNode; } type SizeKey = "mobile" | "sm" | "md" | "lg" | "full"; -const Highlighter = ({ code, language, componentName }: HighlighterProps) => { +const Highlighter = ({ language, componentName, code }: HighlighterProps) => { const [showPreview, setShowPreview] = useState(true); const [iframeWidth, setIframeWidth] = useState("100%"); const [loading, setLoading] = useState(true); @@ -32,14 +33,6 @@ const Highlighter = ({ code, language, componentName }: HighlighterProps) => { setIframeWidth(sizes[size] || "100%"); }; - useEffect(() => { - Prism.highlightAll(); - const iframe = document.querySelector("iframe"); - if (code) { - setLoading(false); - } - }, [code, language, showPreview]); - return (
@@ -53,7 +46,7 @@ const Highlighter = ({ code, language, componentName }: HighlighterProps) => { onToggle={togglePreview} isPreviewing={showPreview} /> - + {/* */}
{
{showPreview ? (
- {loading ? ( -
- Loading... -
- ) : ( -