Feat: added html components

apps/site/next.config.js

@@ -16,7 +16,7 @@ const nextConfig = {
     ignoreBuildErrors: true,
   },
   transpilePackages: ["next-mdx-remote"],
-  assetPrefix: process.env.NEXT_PUBLIC_SITE_URL,
+  assetPrefix:  process.env.NEXT_PUBLIC_SITE_URL,
   async redirects() {
     return [
       {
@@ -86,6 +86,29 @@ const nextConfig = {
       },
     ];
   },
+  webpack: {
+    configure: (webpackConfig) => {
+      // webpackConfig.module.rules.push({
+      //   test: /\.(ts|tsx|html|mdx|md|js|jsx)$/,
+      //   loader: 'raw-loader',
+      //   options: { transpileOnly: true },
+      // });
+
+      webpackConfig.module.rules.push({
+        test: /\.html$/,
+        use: 'raw-loader',
+      });
+
+      // For .tsx files imported with ?raw
+      webpackConfig.module.rules.push({
+        test: /\.tsx$/,
+        resourceQuery: /raw/, // applies only when '?raw' is present
+        use: 'raw-loader',
+      });
+
+      return webpackConfig;
+    },
+  },
 };
 
 module.exports = nextConfig;

apps/site/package.json

@@ -36,11 +36,14 @@
     "next-mdx-remote": "5.0.0",
     "next-nprogress-bar": "2.3.13",
     "next-themes": "0.2.1",
+    "prettier": "3.3.3",
+    "raw-loader": "4.0.2",
     "react": "18.2.0",
     "react-apexcharts": "1.4.1",
     "react-day-picker": "8.10.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.51.2",
+    "react-syntax-highlighter": "15.6.1",
     "rehype-autolink-headings": "7.0.0",
     "rehype-pretty-code": "0.3.2",
     "rehype-slug": "6.0.0",

apps/site/src/app/docs/[...slug]/page.tsx

@@ -3,7 +3,7 @@ import {
   CodePreview,
   ColorPalette,
   FrameworkCard,
-  ComponentPreview,
+  OldComponentPreview,
 } from "@components";
 import Link from "next/link";
 import { Code } from "bright";
@@ -103,9 +103,15 @@ import * as HTMLVideo from "@components/docs-html/video";
 import * as HTMLCheckbox from "@components/docs-html/checkbox";
 import * as HTMLRadio from "@components/docs-html/radio";
 import * as HTMLSwitch from "@components/docs-html/switch";
-import * as HTMLBadge from "@components/docs-html/badge";
+// import * as HTMLBadge from "@components/docs-html/badge";
 import * as HTMLAccordion from "@components/docs-html/accordion";
 
+
+
+import CodeSnippet from '@components/CodeSnippet';
+import ComponentPreview from '@components/ComponentPreview';
+import PreviewWithCode from '@components/PreviewWithCode';
+
 async function readDocsContentFn(pathUrl: string) {
   const fullPath = `${path.join(
     process.cwd(),
@@ -202,7 +208,10 @@ export default async function Docs({ params: { slug } }) {
           CodePreview,
           ColorPalette,
           FrameworkCard,
+          OldComponentPreview,
           ComponentPreview,
+          PreviewWithCode,
+          CodeSnippet,
 
           // default-components
           pre: Code,
@@ -361,7 +370,7 @@ export default async function Docs({ params: { slug } }) {
           HTMLCheckbox,
           HTMLRadio,
           HTMLSwitch,
-          HTMLBadge,
+          // HTMLBadge,
           HTMLAccordion,
         }}
       />

apps/site/src/app/docs/content/html/accordion.mdx

@@ -21,180 +21,27 @@ We created a series of accordion examples to help you build easier your applicat
 
 Here's how to implement a simple and responsive `Accordion` component. It can be used for FAQs in your website.
 
-<ComponentPreview demo={<HTMLAccordion.AccordionDemo />}>
-```html
-<div class="w-full">
-  <div
-    data-open="true"
-    class="items-center justify-between block w-full border-b cursor-pointer group border-surface"
-  >
-    <button
-      data-open="true"
-      class="flex items-center justify-between w-full py-3 font-medium text-left text-black dark:text-white"
-    >
-      Material Tailwind React
-      <svg
-        width="1.5em"
-        height="1.5em"
-        stroke-width="1.5"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        color="currentColor"
-        class="h-4 w-4 group-data-[open=true]:rotate-180"
-      >
-        <path
-          d="M6 9L12 15L18 9"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></path>
-      </svg>
-    </button>
-    <div
-      class="block h-auto pb-3 text-foreground"
-      data-content
-      data-open="true"
-    >
-      Material Tailwind is an open-source crafted in Tailwind CSS. Get
-      Material Tailwind and take advantage of its free components and
-      features that will help you set up your web project quickly.
-    </div>
-  </div>
-  <div
-    data-open="false"
-    class="items-center justify-between block w-full border-b cursor-pointer group border-surface"
-  >
-    <button
-      data-open="false"
-      class="flex items-center justify-between w-full py-3 font-medium text-left text-black dark:text-white"
-    >
-      Material Tailwind HTML
-      <svg
-        width="1.5em"
-        height="1.5em"
-        stroke-width="1.5"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        color="currentColor"
-        class="h-4 w-4 group-data-[open=true]:rotate-180"
-      >
-        <path
-          d="M6 9L12 15L18 9"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></path>
-      </svg>
-    </button>
-    <div
-      class="hidden h-0 pb-3 text-foreground"
-      data-content
-      data-open="false"
-    >
-      Material Tailwind is an open-source crafted in Tailwind CSS. Get
-      Material Tailwind and take advantage of its free components and
-      features that will help you set up your web project quickly.
-    </div>
-  </div>
-
-  <div
-    data-open="false"
-    class="items-center justify-between block w-full border-b cursor-pointer group border-surface"
-  >
-    <button
-      data-open="false"
-      class="flex items-center justify-between w-full py-3 font-medium text-left text-black dark:text-white"
-    >
-      Material Tailwind Vue
-      <svg
-        width="1.5em"
-        height="1.5em"
-        stroke-width="1.5"
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        color="currentColor"
-        class="h-4 w-4 group-data-[open=true]:rotate-180"
-      >
-        <path
-          d="M6 9L12 15L18 9"
-          stroke="currentColor"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></path>
-      </svg>
-    </button>
-    <div
-      class="hidden h-0 pb-3 text-foreground"
-      data-content
-      data-open="false"
-    >
-      Material Tailwind is an open-source crafted in Tailwind CSS. Get
-      Material Tailwind and take advantage of its free components and
-      features that will help you set up your web project quickly.
-    </div>
-  </div>
-</div>
-
-<!-- script for the accordion items functionality -->
-<script>
-const accordionItems = document.querySelectorAll("[data-open]");
-
-const setAccordionState = (item, isOpen) => {
-  const content = item.querySelector("div[data-content]");
-  const button = item.querySelector("button");
-
-  item.setAttribute("data-open", isOpen ? "true" : "false");
-  content?.setAttribute("data-open", isOpen ? "true" : "false");
-  button?.setAttribute("data-open", isOpen ? "true" : "false");
-
-  if (content) {
-    content.classList.toggle("hidden", !isOpen);
-    content.classList.toggle("h-0", !isOpen);
-    content.classList.toggle("block", isOpen);
-    content.classList.toggle("h-auto", isOpen);
-  }
-};
-
-const toggleAccordion = (clickedItem) => {
-  const isCurrentlyOpen = clickedItem.getAttribute("data-open") === "true";
-  accordionItems.forEach((item) =>
-    setAccordionState(item, item === clickedItem && !isCurrentlyOpen),
-  );
-};
-
- <!-- Add event listeners for each accordion item -->
-accordionItems.forEach((item) => {
-  const button = item.querySelector("button");
-  if (button) {
-    button.addEventListener("click", () => toggleAccordion(item));
-  }
-});
-</script>
-```
-</ComponentPreview>
+<PreviewWithCode relativePath="accordion/accordion-demo.tsx" language="html" />
 
 ---
 
 ## Accordion All Open
 
 You can set all the `Accordion` items to be open by default by passing an array of values to the `defaultValue` prop.
 
-<ComponentPreview demo={<HTMLAccordion.AccordionAllOpen />}>
+<OldComponentPreview demo={<HTMLAccordion.AccordionAllOpen />}>
 ```html
 <div></div>
 ```
-</ComponentPreview>
+</OldComponentPreview>
 
 ---
 
 ## Controlled Accordion
 
 The `Accordion` component could be either controlled or uncontrolled. In the controlled mode, you can manage the state of the `Accordion` component by yourself. You can use the `value` and `onValueChange` props to control the state of the `Accordion` component.
 
-<ComponentPreview demo={<Accordion.ControlledAccordion />}>
+<OldComponentPreview demo={<Accordion.ControlledAccordion />}>
 ```tsx
 import * as React from "react";
 import { Accordion, Button } from "@material-tailwind/react";
@@ -267,7 +114,7 @@ export function ControlledAccordion() {
   );
 }
 ```
-</ComponentPreview>
+</OldComponentPreview>
 
 ---
 
@@ -276,7 +123,7 @@ export function ControlledAccordion() {
 You can customize the `Accordion` trigger icon by using the `Accordion.Trigger` component. To make it work, you need to use `group-data-[open=true]` for the icons to show/hide based on the `Accordion` state.
 
 
-<ComponentPreview demo={<Accordion.AccordionCustomIcon />}>
+<OldComponentPreview demo={<Accordion.AccordionCustomIcon />}>
 ```tsx
 import { Accordion } from "@material-tailwind/react";
 import { Minus, Plus } from "iconoir-react";
@@ -324,15 +171,15 @@ export function AccordionCustomIcon() {
   );
 }
 ```
-</ComponentPreview>
+</OldComponentPreview>
 
 ---
 
 ## Accordion Custom Styles
 
 You can customize the `Accordion` component by using the `className` prop. In the example below, we've showcased how to create a custom style for the `Accordion` component.
 
-<ComponentPreview demo={<Accordion.AccordionCustomStyles />}>
+<OldComponentPreview demo={<Accordion.AccordionCustomStyles />}>
 ```tsx
 import { Accordion } from "@material-tailwind/react";
 import { NavArrowDown } from "iconoir-react";
@@ -386,15 +233,15 @@ export function AccordionCustomStyles() {
   );
 }
 ```
-</ComponentPreview>
+</OldComponentPreview>
 
 ---
 
 ## Accordion Disabled
 
 You can disable the `Accordion` item by adding the `disabled` prop. This will prevent the user from interacting with the `Accordion` item.
 
-<ComponentPreview demo={<Accordion.AccordionDisabled />}>
+<OldComponentPreview demo={<Accordion.AccordionDisabled />}>
 ```tsx
 import { Accordion } from "@material-tailwind/react";
 import { NavArrowDown } from "iconoir-react";
@@ -439,4 +286,4 @@ export function AccordionDisabled() {
   );
 }
 ```
-</ComponentPreview>
+</OldComponentPreview>