DS-173 Part 1, Update to documentation site (#306)

gsoft-inc · Jun 21, 2024 · 2290b8e · 2290b8e
2 parents 9610aed + f32d63f
commit 2290b8e
Show file tree

Hide file tree

Showing 60 changed files with 743 additions and 318 deletions.
diff --git a/apps/docs/.browserslistrc b/apps/docs/.browserslistrc
@@ -0,0 +1 @@
+extends @workleap/browserslist-config
diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json
@@ -2,13 +2,11 @@
     "$schema": "https://json.schemastore.org/eslintrc",
     "root": true,
     "extends": [
-        "next",
-        "plugin:@workleap/web-application"
+        "plugin:@workleap/web-application",
+        "next"
     ],
-    "settings": {
-        "next": {
-            "rootDir": "apps/docs"
-        }
+    "rules": {
+        "@next/next/no-html-link-for-pages": "off"
     },
     "globals": {
         "Card": true,
@@ -31,10 +29,19 @@
         "Example": true
     },
     "overrides": [
+        {
+            "files": "*.mdx",
+            "extends": "plugin:@workleap/mdx"
+        },
+        {
+            "files": "package.json",
+            "extends": "plugin:@workleap/package-json"
+        },
         {
             "files": [
                 "*.{js,jsx,ts,tsx}"
             ],
+            "excludedFiles": "scripts/**",
             "rules": {
                 "no-console": [
                     "warn",
@@ -46,7 +53,22 @@
                     }
                 ],
                 "react/destructuring-assignment": "off",
-                "no-param-reassign": "off"
+                "no-param-reassign": "off",
+                "no-restricted-imports": ["error", {
+                    "patterns": [
+                        {
+                            "group": ["../../index.ts", "../index.ts", "../../../index.ts", "./index.ts"],
+                            "message": "Avoid importing from index.ts files directly next or above the current file"
+                        }
+                    ],
+                    "paths": [
+                        {
+                            "name": "react",
+                            "importNames": ["default"],
+                            "message": "import React from \"react\" is no longer necessary and should be avoided. "
+                        }
+                    ]
+                }]
             }
         }
     ]

diff --git a/apps/docs/.storybook/main.ts b/apps/docs/.storybook/main.ts
@@ -47,8 +47,14 @@ export default {
 
         // This modifies the existing image rule to exclude .svg files
         // since you want to handle those files with @svgr/webpack
+        // disable ts since we know the concrete type of rule.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         const imageRule = config.module.rules.find(rule => rule?.["test"]?.test(".svg"));
         if (imageRule) {
+            // disable ts since we know the concrete type of imageRule.
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             imageRule["exclude"] = /\.svg$/;
         }
 

diff --git a/apps/docs/.storybook/preview.tsx b/apps/docs/.storybook/preview.tsx
@@ -1,12 +1,12 @@
 import type { Preview } from "@storybook/react";
-import React from "react";
+import type { ReactNode } from "react";
 
 import "../app/globals.css";
 
 // Storybook styles
 import "./global.css";
 
-const Container = ({ children, theme }: { children: React.ReactNode; theme: "light" | "dark" }) => (
+const Container = ({ children, theme }: { children: ReactNode; theme: "light" | "dark" }) => (
     <div className="shd-container" data-theme={theme}>{children}</div>
 );
 

diff --git a/apps/docs/app/components/[...slug]/page.tsx b/apps/docs/app/components/[...slug]/page.tsx
@@ -16,8 +16,8 @@ interface PageProps {
 export async function generateStaticParams(): Promise<PageProps["params"][]> {
     const componentsDetails = await getComponentDetails();
 
-    return componentsDetails.map(({ slug }) => {
-        const [section, type] = slug.split("/");
+    return componentsDetails.map(({ slugs }) => {
+        const [section, type] = slugs;
 
         return ({
             slug: [section, type]
@@ -29,7 +29,7 @@ export default async function ComponentPage({ params }: PageProps) {
     const [section, type] = params.slug;
 
     const component = (await getComponentDetails()).find(componentDetail => {
-        const [componentSlugSection, componentSlugType] = componentDetail.slug.split("/");
+        const [componentSlugSection, componentSlugType] = componentDetail.slugs;
 
         return componentSlugType === type && componentSlugSection === section;
     });

diff --git a/apps/docs/app/components/layout.tsx b/apps/docs/app/components/layout.tsx
@@ -2,20 +2,21 @@ import type { ReactNode } from "react";
 import Sidebar from "@/app/ui/layout/sidebar/Sidebar";
 import { SidebarProvider } from "@/context/sidebar/SidebarProvider";
 import { type ComponentData, getComponentDetails } from "@/app/lib/getComponentDetails.ts";
+import path from "path";
 
 interface Data {
     frontmatter: ComponentData;
-    slug: string;
+    slugs: string[];
     content: ReactNode;
 }
 
 function formatComponentData(data: Data[]) {
     return data.map((component, index) => {
-        const { slug, frontmatter: { title, order } } = component;
+        const { slugs, frontmatter: { title, order } } = component;
         let section = "";
 
-        if (slug.split("/").length > 1) {
-            section = slug.split("/")[0];
+        if (slugs.length > 1) {
+            section = slugs[0];
         }
 
         return {
@@ -24,7 +25,7 @@ function formatComponentData(data: Data[]) {
             order,
             section: section,
             _raw: {
-                flattenedPath: `components/${slug}`
+                flattenedPath: `components/${path.join(...slugs)}`
             }
         };
     });

diff --git a/apps/docs/app/home.css b/apps/docs/app/home.css
@@ -62,7 +62,7 @@
     }
 
     .hd-home__feature-item {
-        align-items: start;
+        align-items: flex-start;
     }
 }
 
@@ -421,7 +421,7 @@ a.hd-home-sample__item:hover::after {
 .hd-home-sample__text-styles-controls {
     --background: var(--hd-white);
 
-    align-items: start;
+    align-items: flex-start;
     background-image: linear-gradient(180deg, var(--background) 0%, var(--background) 75%, rgba(255 255 255 / 0%) 100%);
     border-bottom: 0;
     border-image: linear-gradient(0deg, rgba(0 0 0 / 0%), rgb(186 188 192)) 1;

diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -1,5 +1,6 @@
 import Header from "@/app/ui/layout/header/Header";
 import { ThemeProvider } from "@/context/theme/ThemeProvider";
+import type { ReactNode } from "react";
 
 import "./globals.css";
 import "./layout.css";
@@ -10,7 +11,7 @@ export const metadata = {
 };
 
 export default function RootLayout({ children }: {
-    children: React.ReactNode;
+    children: ReactNode;
 }) {
     const setInitialTheme = `
     function getUserPreference() {

diff --git a/apps/docs/app/lib/getComponentDetails.ts b/apps/docs/app/lib/getComponentDetails.ts
@@ -2,7 +2,7 @@ import path from "path";
 import fs from "fs";
 import { compileMDX } from "next-mdx-remote/rsc";
 import { components } from "@/components/mdx/components.tsx";
-import { rehypePluginOptions } from "@/app/lib/rehypeConfig";
+import { rehypePluginOptions } from "@/app/lib/rehypeConfig.ts";
 import { data } from "@/app/lib/contentConfig.ts";
 
 export const COMPONENT_PATH = path.join(process.cwd(), "content", "components");
@@ -57,9 +57,10 @@ function getMDXData(dir: string) {
         const { frontmatter, content, raw } = await readMDXFile(file);
         const startIndex = file.indexOf(COMPONENT_PATH) + COMPONENT_PATH.length + 1;
         const slug = file.substring(startIndex, file.length - ".mdx".length);
+        const slugs = slug.split(path.sep);
 
         return {
-            slug,
+            slugs,
             frontmatter,
             content,
             raw

diff --git a/apps/docs/app/lib/getComponentProps.ts b/apps/docs/app/lib/getComponentProps.ts
@@ -1,6 +1,6 @@
 import { promises as fs } from "fs";
 import path from "path";
-import type { ComponentDocWithGroups } from "@/scripts/generateComponentData.mjs";
+import type { ComponentDocWithGroups } from "@/scripts/generateComponentData.ts";
 import type { PropItem } from "react-docgen-typescript/lib/parser";
 import { getType } from "@/app/lib/gePropsType.ts";
 import { formatCode } from "@/app/lib/formatingCode.ts";
@@ -40,7 +40,7 @@ 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 });

diff --git a/apps/docs/app/lib/rehypeConfig.js → apps/docs/app/lib/rehypeConfig.ts b/apps/docs/app/lib/rehypeConfig.js → apps/docs/app/lib/rehypeConfig.ts
@@ -1,12 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// this file is hard to type, since the unified version used between frontmatter and contentlayer are different and expecting different types.
+
 import { visit } from "unist-util-visit";
-import rehypePrettyCode from "rehype-pretty-code";
+import rehypePrettyCode, { type Options } from "rehype-pretty-code";
+import type { BuiltinTheme } from "shiki";
 
-/** @type {import('rehype-pretty-code').Options } */
-export const rehypeOptions = {
+export const rehypeOptions: Options = {
     // Use one of Shiki's packaged themes
     theme: {
-        light: "one-dark-pro",
-        dark: "one-dark-pro"
+        light: "one-dark-pro" satisfies BuiltinTheme,
+        dark: "one-dark-pro" satisfies BuiltinTheme
     },
     keepBackground: false,
     onVisitLine(node) {
@@ -22,12 +25,12 @@ export const rehypeOptions = {
     onVisitHighlightedLine(node) {
         const nodeClass = node.properties.className;
         if (nodeClass && nodeClass.length > 0) {
-            node.properties.className.push("highlighted");
+            node.properties.className?.push("highlighted");
         } else {
             node.properties.className = ["highlighted"];
         }
     },
-    onVisitHighlightedWord(node, id) {
+    onVisitHighlightedChars(node, id) {
         // Each word node has no className by default.
         node.properties.className = ["word"];
 
@@ -36,7 +39,9 @@ export const rehypeOptions = {
             // colors from the child nodes.
             if (node.properties["data-rehype-pretty-code-wrapper"]) {
                 node.children.forEach(childNode => {
-                    childNode.properties.style = "";
+                    if (childNode.type === "element") {
+                        childNode.properties.style = "";
+                    }
                 });
             }
 
@@ -46,8 +51,8 @@ export const rehypeOptions = {
     }
 };
 
-export const rehypePluginOptions = [
-    () => tree => {
+export const rehypePluginOptions: any[] = [
+    () => (tree: any) => {
         visit(tree, node => {
             if (node?.type === "element" && node?.tagName === "pre") {
                 const [codeEl] = node.children;
@@ -60,10 +65,10 @@ export const rehypePluginOptions = [
         });
     },
     [rehypePrettyCode, rehypeOptions],
-    () => tree => {
+    () => (tree: any) => {
         visit(tree, node => {
             if (node?.type === "element" && node?.tagName === "figure") {
-                const titleChild = node.children.find(child => {
+                const titleChild = node.children.find((child: any) => {
                     return (
                         child.properties &&
                         "data-rehype-pretty-code-title" in child.properties

diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -2,7 +2,7 @@ export default function Home() {
     return (
         <div className="hd-wrapper hd-flex">
             <main className="hd-home">
-                <h1 className="hd-display">Welcome to Workleap's <strong className="hd-text--strong">Hopper</strong> Design System.</h1>
+                <h1 className="hd-display">Welcome to Workleap&apos;s <strong className="hd-text--strong">Hopper</strong> Design System.</h1>
                 <p className="hd-display__subtitle">The documentation is currently in <strong className="hd-text--strong">beta</strong>.</p>
             </main>
         </div>

diff --git a/apps/docs/app/pages/landing/page.tsx b/apps/docs/app/pages/landing/page.tsx
@@ -13,6 +13,7 @@ import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon,
 
 import "@hopper-ui/tokens/fonts.css";
 import "../../home.css";
+import Link from "next/link";
 
 export default function Home() {
     const { colorMode } = useContext(ThemeContext);
@@ -52,15 +53,15 @@ export default function Home() {
                     <div className="hd-home__feature-item">
                         <h2 className="hd-home__feature-title"><DarkModeIcon className="hd-home-feature-title__icon" />Dark mode</h2>
                         <p className="hd-home__feature-copy">
-                            Switching from light to dark mode couldn't be easier.
+                            Switching from light to dark mode couldn&apos;t be easier.
                         </p>
                     </div>
                 </div>
                 <div className="hd-home-samples">
                     <div className="hd-home-samples__col hd-home-samples__main-wrapper">
                         <div className="hd-home-samples__row">
                             <div className="hd-home-samples__col">
-                                <a className="hd-home-sample__item hd-home-sample__item-colors" href="/tokens/semantic/color">
+                                <Link className="hd-home-sample__item hd-home-sample__item-colors" href="/tokens/semantic/color">
                                     <h3 className="hd-home-sample__title">Colors <ArrowIcon className="hd-home-sample__title-icon" /></h3>
                                     <div className="hd-home-sample__colors">
                                         <div className="hd-home-sample__colors-row">
@@ -76,8 +77,8 @@ export default function Home() {
                                             <span className="hd-home-sample__color hd-home-sample__color-sapphire-500"></span>
                                         </div>
                                     </div>
-                                </a>
-                                <a className="hd-home-sample__item hd-home-sample__item-sizes" href="/tokens/semantic/space">
+                                </Link>
+                                <Link className="hd-home-sample__item hd-home-sample__item-sizes" href="/tokens/semantic/space">
                                     <h3 className="hd-home-sample__title">Sizes <ArrowIcon className="hd-home-sample__title-icon" /></h3>
                                     <div className="hd-home-sample__sizes">
                                         <div className="hd-home-sample__size hd-home-sample__size-16">
@@ -97,10 +98,10 @@ export default function Home() {
                                             <div className="hd-home-sample__size-bar"></div>
                                         </div>
                                     </div>
-                                </a>
+                                </Link>
                             </div>
                             <div className="hd-home-samples__col">
-                                <a className="hd-home-sample__item hd-home-sample__item-text-styles" href="/tokens/semantic/typography">
+                                <Link className="hd-home-sample__item hd-home-sample__item-text-styles" href="/tokens/semantic/typography">
                                     <h3 className="hd-home-sample__title">Text Styles <ArrowIcon className="hd-home-sample__title-icon" /></h3>
                                     <div className="hd-home-sample__text-styles">
                                         <div className="hd-home-sample__text-styles-col">
@@ -125,10 +126,10 @@ export default function Home() {
                                             </div>
                                         </div>
                                     </div>
-                                </a>
+                                </Link>
                             </div>
                         </div>
-                        <a className="hd-home-sample__item hd-home-sample__item-icons" href="/icons/getting-started/introduction">
+                        <Link className="hd-home-sample__item hd-home-sample__item-icons" href="/icons/getting-started/introduction">
                             <h3 className="hd-home-sample__title">Icons <ArrowIcon className="hd-home-sample__title-icon" /></h3>
                             <p className="hd-home-sample__tagline">A set of commonly used interface icons.</p>
                             <HopperProvider colorScheme={theme} className="hd-home-sample__icons">
@@ -166,7 +167,7 @@ export default function Home() {
                                     <RecurringIcon className="hd-home-sample__icons-icon" size="sm" />
                                 </div>
                             </HopperProvider>
-                        </a>
+                        </Link>
                     </div>
                     <div className="hd-home-sample__item hd-home-sample__item-components">
                         <div className="hd-home-sample__item-upcoming"></div>

diff --git a/apps/docs/app/playground/codeblock/page.tsx b/apps/docs/app/playground/codeblock/page.tsx
@@ -6,7 +6,7 @@ export default function CodeBlockPage() {
         {allPages
             .filter(page => page._id === "pages/playground-codeblock.mdx")
             .map(page => (
-                <div className="hd-wrapper hd-flex">
+                <div key={page._id} className="hd-wrapper hd-flex">
                     <article className="hd-content" key={page._id}>
                         {page.body && <Mdx code={page.body.code} />}
                     </article>

diff --git a/apps/docs/app/ui/components/componentExample/ComponentExample.tsx b/apps/docs/app/ui/components/componentExample/ComponentExample.tsx
@@ -113,4 +113,6 @@ const ComponentExample = memo(({
     );
 });
 
+ComponentExample.displayName = "ComponentExample";
+
 export default ComponentExample;
diff --git a/apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx b/apps/docs/app/ui/components/componentExample/ComponentPreviewWrapper.tsx
@@ -48,4 +48,6 @@ const ComponentPreviewWrapper = memo(({ preview, toggleButton, height = "13rem"
     );
 });
 
+ComponentPreviewWrapper.displayName = "ComponentPreviewWrapper";
+
 export default ComponentPreviewWrapper;