Props table

apps/docs/app/globals.css

@@ -2,19 +2,19 @@
 @import url("./rehype.css");
 
 @font-face {
-	font-family: "ABC Favorit Mono";
-	font-style: normal;
-	font-weight: 400;
-	src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/mono/alternative/ABCFavoritMono-Regular.woff2") format("woff2-variations");
-	font-display: fallback;
+    font-family: "ABC Favorit Mono";
+    font-style: normal;
+    font-weight: 400;
+    src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/mono/alternative/ABCFavoritMono-Regular.woff2") format("woff2-variations");
+    font-display: fallback;
 }
 
 @font-face {
-	font-family: "ABC Favorit";
-	font-style: normal;
-	font-weight: 100 900;
-	src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/alternative/ABCFavoritVariable.woff2") format("woff2-variations");
-	font-display: fallback;
+    font-family: "ABC Favorit";
+    font-style: normal;
+    font-weight: 100 900;
+    src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/alternative/ABCFavoritVariable.woff2") format("woff2-variations");
+    font-display: fallback;
 }
 
 * {

apps/docs/app/lib/capitalize.ts

@@ -0,0 +1,3 @@
+export const capitalize = (str: string): string => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};

apps/docs/app/lib/formatingCode.ts

@@ -0,0 +1,9 @@
+import { highlightCode } from "@/components/highlightCode";
+
+export async function formatCode(code: string, language: string) {
+    return await highlightCode(`
+\`\`\`${language}
+${code}
+\`\`\`
+`);
+}

apps/docs/app/lib/gePropsType.ts

@@ -0,0 +1,20 @@
+export interface PropItemTypeValue {
+    name: string;
+    value?: Array<{ value: string; name: string }>;
+    raw?: string;
+}
+
+export function getType(type: PropItemTypeValue) {
+    const handler: {
+        [key: string]: (type: PropItemTypeValue) => string;
+    } = {
+        enum: t =>
+            t.value ? t.value.map(item => item.value.replace(/'/g, "")).join(" \\| ") : "",
+        union: t => t.value ? t.value.map(item => item.name).join(" \\| ") : ""
+    };
+    if (typeof handler[type.name] === "function") {
+        return handler[type.name](type).replace(/\|/g, "");
+    }
+
+    return type.name;
+}

apps/docs/app/lib/generateUniqueKey.ts

@@ -0,0 +1,3 @@
+export function generateUniqueKey() {
+    return `${Date.now()}-${Math.random()}`;
+}

apps/docs/app/lib/getComponentProps.ts

@@ -0,0 +1,47 @@
+import { promises as fs } from "fs";
+import path from "path";
+import type { ComponentDocWithGroups } from "@/scripts/generateComponentData.mjs";
+import type { PropItem } from "react-docgen-typescript/lib/parser";
+import { getType } from "@/app/lib/gePropsType.ts";
+import { formatCode } from "@/app/lib/formatingCode.ts";
+import { generateUniqueKey } from "@/app/lib/generateUniqueKey.ts";
+
+const filePath = path.join(process.cwd(), "datas", "components");
+
+export const formatData = async (prop: PropItem) => {
+    const { name, type, defaultValue, description } = prop;
+    const formatType = getType(type);
+    const code = await formatCode(formatType, "tsx");
+    const formatedDescription = description.replace(/<form>/g, "");
+
+    return ({
+        id: generateUniqueKey(),
+        name,
+        type: code,
+        defaultValue: defaultValue ? defaultValue.value : "",
+        description: formatedDescription
+    });
+};
+
+async function formatPropTable(data: ComponentDocWithGroups[]) {
+    const result = [];
+    for (const item of data) {
+        const { groups } = item;
+        for (const group of Object.keys(groups)) {
+            const groupItems = await Promise.all(Object.keys(groups[group]).map(key => formatData(groups[group][key])));
+            result.push({ [group]: groupItems });
+        }
+    }
+
+    return result;
+}
+
+export async function getComponentProps(component: string) {
+    const file = await fs.readFile(filePath + `/${component}.json`, "utf8");
+    const data = JSON.parse(file);
+    const [item] = data;
+
+    const groups = await formatPropTable(data);
+
+    return ({ description: item.description, groups });
+}

apps/docs/app/lib/rehypeConfig.js

@@ -4,7 +4,10 @@ import rehypePrettyCode from "rehype-pretty-code";
 /** @type {import('rehype-pretty-code').Options } */
 export const rehypeOptions = {
     // Use one of Shiki's packaged themes
-    theme: "nord",
+    theme: {
+        light: "one-dark-pro",
+        dark: "one-dark-pro"
+    },
     keepBackground: false,
     onVisitLine(node) {
         // Prevent lines from collapsing in `display: grid` mode, and

apps/docs/app/rehype.css

@@ -4,27 +4,40 @@
     --hd-codeblock-border-radius: 0.5rem;
     --hd-codeblock-border-size: 0.125rem;
     --hd-codeblock-padding: var(--hd-space-2);
-}
-
-[data-rehype-pretty-code-figure] {
-    /* NORD */
-    --hd-codeblock-line-highlighted-border-color: #88C0D0;
+    --hd-codeblock-line-line-number-color: var(--hd-neutral-400);
     --hd-codeblock-line-highlighted-background-color: #434C5E;
-    --hd-codeblock-line-line-number-color: #4C566A;
-    --hd-codeblock-line-line-number-color-highlight: #D8DEE9;
+    --hd-codeblock-line-highlighted-border-color: #88C0D0;
     --hd-codeblock-word-selection-background-color: #4B586A;
-    --hd-codeblock-word-setter-background-color: #D0877080;
-    --hd-codeblock-word-setter-text-color: rgb(232 228 228);
-    --hd-codeblock-word-initial-value-background-color: #B48EAD80;
-    --hd-codeblock-word-initial-value-text-color: rgb(233 217 229);
-    --hd-codeblock-word-value-background-color: #BF616A80;
-    --hd-codeblock-word-value-text-color: rgb(239 194 198);
-    --hd-codeblock-title-background-color: rgb(59 66 82);
-    --hd-codeblock-title-text-color: rgb(216 222 233);
+    --hd-codeblock-word-color: #AF168D;
+}
+
+code[data-theme*=' '],
+code[data-theme*=' '] span {
+    color: var(--shiki-light);
+}
+
+[data-theme="dark"] {
+    code[data-theme*=' '],
+    code[data-theme*=' '] span {
+        color: var(--shiki-dark, var(--hd-color-neutral-text));
+    }
+}
+
+[style*="--shiki-light: #98C379"] {
+    --shiki-light: var(--hd-color-primary-text) !important
+}
+
+[style*="--shiki-light: #E06C75"],
+[style*="--shiki-light: #C678DD"] {
+    --shiki-light: var(--hd-codeblock-word-color) !important
 }
 
-[data-rehype-pretty-code-figure] *::selection {
-    background: rgb(67 76 94 / 80%);
+[style*="--shiki-light: #56B6C2"] {
+    --shiki-light: var(--hd-neutral-700) !important
+}
+
+[style*="--shiki-light: #E5C07B"] {
+    --shiki-light: var(--hd-color-accent-text) !important
 }
 
 [data-rehype-pretty-code-figure] pre {
@@ -71,46 +84,16 @@
     color: var(--hd-codeblock-line-line-number-color);
 }
 
-/* LINE NUMBERS HIGHLIGHT - NUMBER COLOR */
-[data-rehype-pretty-code-figure] code[data-line-numbers] > [data-line].highlighted::before {
-    color: var(--hd-codeblock-line-line-number-color-highlight);
-}
-
-/* Block Title */
+/* !* Block Title *! */
 [data-rehype-pretty-code-title] {
     display: none;
 }
 
-/* Block Caption */
+/* !* Block Caption *! */
 [data-rehype-pretty-code-caption] {
     margin-top: var(--hd-space-1);
     color: var(--hd-color-primary-text);
     border-radius: var(--hd-space-1);
     font-style: italic;
     font-size: .875rem;
 }
-
-/* Custom Word ID */
-[data-rehype-pretty-code-figure] [data-word-id] {
-    padding: var(--hd-space-05);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #000000), var(--tw-ring-shadow, 0 0 #000000), var(--tw-shadow);
-}
-
-/* v for value */
-[data-rehype-pretty-code-figure] [data-word-id="v"] {
-    background-color: var(--hd-codeblock-word-value-background-color);
-    color: var(--hd-codeblock-word-value-text-color);
-}
-
-/* s for setter */
-[data-rehype-pretty-code-figure] [data-word-id="s"] {
-    background-color: var(--hd-codeblock-word-setter-background-color);
-    color: var(--hd-codeblock-word-setter-text-color);
-}
-
-/* i for initial value */
-[data-rehype-pretty-code-figure] [data-word-id="i"] {
-    background-color: var(--hd-codeblock-word-initial-value-background-color);
-    color: var(--hd-codeblock-word-initial-value-text-color);
-    font-weight: 700;
-}

apps/docs/app/ui/components/heading/heading.css

@@ -9,6 +9,5 @@
 }
 
 .hd-heading__links {
-    display: flex;
-    gap: var(--hd-space-1);
+    margin-inline: calc(var(--hd-space-1) * -1);
 }

apps/docs/app/ui/components/linkList/LinkList.tsx

@@ -1,8 +1,11 @@
 "use client";
+
 import clsx from "clsx";
 import Button from "@/components/button/Button.tsx";
 import { Icon, GithubIcon, NpmIcon, ExternalLinkIcon, type IconProps } from "@/components/icon";
 
+import "./linkList.css";
+
 export interface Links {
     name: string;
     src: string;

apps/docs/app/ui/components/linkList/linkList.css

@@ -0,0 +1,13 @@
+.hd-link-list {
+    --hd-link-list-direction: column;
+
+    display: flex;
+    flex-direction: var(--hd-link-list-direction);
+    align-items: flex-start;
+    gap: var(--hd-space-1);
+
+    @media screen and (width >= 37.5rem) {
+        --hd-link-list-direction: row;
+    }
+}
+

apps/docs/app/ui/components/previewComponent/ComponentWrapper.tsx

@@ -20,7 +20,7 @@ const ComponentWrapper = ({ className, src }: ComponentWrapperProps) => {
         loading: () => <PreviewSkeleton overlay />
     }), [src]);
 
-    const [colorScheme, setColorScheme] = useState<"light" | "dark">("light");
+    const [colorScheme, setColorScheme] = useState<"light" | "dark">("dark");
 
     const toggleTheme = () => {
         const theme: ColorScheme = colorScheme === "dark"

apps/docs/app/ui/components/previewComponent/previewComponent.css

@@ -35,6 +35,7 @@
     --hd-color-neutral-icon: var(--hd-neutral-900);
 }
 
+
 [data-theme="dark"] .hd-component-wrapper--light .hd-component-wrapper__action:hover {
     --hd-color-neutral-icon: var(--hd-neutral-0);
 }
@@ -47,6 +48,7 @@
     --hd-color-neutral-icon: var(--hd-neutral-0);
 }
 
+[data-theme="dark"] .hd-component-wrapper--light .hd-preview-component__content,
 .hd-component-wrapper--light .hd-preview-component__content {
     --background: var(--hd-white);
     --color: var(--hd-neutral-50);