docs: setup nextra with react-live, add draft content (#4367)

* docs: setup nextra with react-live, add draft content
* fix(BaseDropdown): fix document reference errors in ssr
* fix: replace useLayoutEffect with useEnhancedEffect util for SSR compatibility
* chore: allow tailwind colors on uno preset
* chore: re-enable nextra deployment

---------

Co-authored-by: Bruno Henriques <[email protected]>

.github/workflows/documentation.yml

@@ -14,7 +14,7 @@ env:
   PUBLISH_FOLDER: ${{ inputs.publish-folder || github.ref_name }}
   PUBLISH_STORYBOOK: ${{ inputs.publish-storybook }}
   PUBLISH_APP: ${{ github.ref == 'refs/heads/master' }}
-  PUBLISH_DOCS: false
+  PUBLISH_DOCS: true
 
 jobs:
   build-artifacts:
@@ -59,14 +59,14 @@ jobs:
         if: ${{ env.PUBLISH_DOCS == 'true' }}
         env:
           NEXTRA_BASE_PATH: /uikit-docs/${{ env.PUBLISH_FOLDER }}
-        run: npm run build:nextra && touch ${{ github.workspace }}/apps/docs/out/.nojekyll
+        run: npm run build:nextra && touch ${{ github.workspace }}/apps/docs/dist/.nojekyll
 
       - name: Archive Nextra Docs
         if: ${{ env.PUBLISH_DOCS == 'true' }}
         uses: actions/upload-artifact@v4
         with:
           name: nextra-docs
-          path: ${{ github.workspace }}/apps/docs/out
+          path: ${{ github.workspace }}/apps/docs/dist
           retention-days: 2
 
   deploy-artifacts:

apps/docs/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/docs/next.config.js → apps/docs/next.config.mjs

@@ -1,13 +1,19 @@
-const withNextra = require("nextra")({
+import UnoCSS from "@unocss/webpack";
+import nextra from "nextra";
+import rehypeMdxCodeProps from "rehype-mdx-code-props";
+
+const withNextra = nextra({
   theme: "nextra-theme-docs",
-  themeConfig: "./theme.config.tsx",
+  themeConfig: "./src/theme.config.tsx",
   defaultShowCopyCode: true,
+  mdxOptions: {
+    rehypePlugins: [rehypeMdxCodeProps],
+  },
 });
 
-// If you have other Next.js configurations, you can pass them as the parameter:
-// module.exports = withNextra({ /* other next.js config */ })
-module.exports = withNextra({
+export default withNextra({
   output: "export",
+  distDir: "dist",
   images: { unoptimized: true },
   basePath: process.env.NEXTRA_BASE_PATH || "",
   transpilePackages: [
@@ -20,7 +26,10 @@ module.exports = withNextra({
     "@hitachivantara/uikit-react-viz",
     "@hitachivantara/uikit-react-pentaho",
   ],
-  webpack: (config) => {
+  webpack: (config, { isServer }) => {
+    config.cache = false; // https://github.com/unocss/unocss/pull/1198
+    config.plugins.push(UnoCSS());
+
     config.module.rules.push({
       test: /\.(tsx|ts)$/,
       use: [

apps/docs/package.json

@@ -3,9 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next",
+    "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "npx serve dist"
   },
   "dependencies": {
     "@emotion/css": "^11.11.0",
@@ -16,16 +16,25 @@
     "@hitachivantara/uikit-react-pentaho": "*",
     "@hitachivantara/uikit-react-viz": "*",
     "@hitachivantara/uikit-styles": "*",
-    "next": "^14.0.4",
-    "nextra": "^2.13.2",
-    "nextra-theme-docs": "^2.13.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@hitachivantara/uikit-uno-preset": "*",
+    "@unocss/reset": "^0.62.4",
+    "next": "^14.2.7",
+    "nextra": "3.0.0-alpha.22",
+    "nextra-theme-docs": "3.0.0-alpha.22",
+    "prism-react-renderer": "^2.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-live-runner": "^1.0.7",
+    "react-runner": "^1.0.5",
+    "rehype-mdx-code-props": "^3.0.1",
+    "unocss": "^0.62.4"
   },
   "devDependencies": {
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/node": "22.5.2",
+    "@types/react": "^18.3.5",
+    "@unocss/webpack": "^0.62.4",
+    "autoprefixer": "^10.4.20",
     "string-replace-loader": "^3.1.0",
-    "typescript": "^5.4.2"
+    "typescript": "^5.5.4"
   }
 }