docs: project configuration (#712)

# Summary

- wired up ESLint and TS, as we now have interactive examples' code
visible directly in the docs.
- `react-native-enriched-html` is now linked locally.
- as the library is resolved locally, the CI build scripts need its
dependencies installed,so the root `node_modules` has become available
now in the CI scripts.

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Kacper Żółkiewski <74975508+kacperzolkiewski@users.noreply.github.com>
Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>

Author: 4 people

.github/workflows/docs-build.yml

@@ -22,10 +22,20 @@ jobs:
         with:
           node-version: 22
           cache: yarn
-          cache-dependency-path: docs/yarn.lock
+          cache-dependency-path: |
+            yarn.lock
+            docs/yarn.lock
+
+      - name: Install library dependencies (local source)
+        working-directory: ${{ github.workspace }}
+        run: yarn install --immutable
 
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Typecheck docs
+        working-directory: ${{ github.workspace }}
+        run: yarn typecheck:docs
+
       - name: Build docs
         run: yarn build

.github/workflows/docs-publish.yml

@@ -27,11 +27,21 @@ jobs:
         with:
           node-version: 22
           cache: yarn
-          cache-dependency-path: docs/yarn.lock
+          cache-dependency-path: |
+            yarn.lock
+            docs/yarn.lock
+
+      - name: Install library dependencies (local source)
+        working-directory: ${{ github.workspace }}
+        run: yarn install --immutable
 
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Typecheck docs
+        working-directory: ${{ github.workspace }}
+        run: yarn typecheck:docs
+
       - name: Build docs
         run: yarn build
 

docs/docusaurus.config.js

@@ -1,8 +1,10 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-import { topbarBannerReservationScript } from '@swmansion/t-rex-ui/topbar-banner'; 
-import { TOP_BAR_BANNER } from './src/components/topbarBanner.config.ts'; 
+import { topbarBannerReservationScript } from '@swmansion/t-rex-ui/topbar-banner';
+import { TOP_BAR_BANNER } from './src/components/topbarBanner.config.ts';
+
+const path = require('path');
 
 const lightCodeTheme = require('./src/theme/CodeBlock/highlighting-light.js');
 const darkCodeTheme = require('./src/theme/CodeBlock/highlighting-dark.js');
@@ -22,6 +24,38 @@ function reactNativeWebPlugin() {
   };
 }
 
+function enrichedHtmlLocalSourcePlugin() {
+  const librarySource = path.resolve(__dirname, '../src');
+  return {
+    name: 'enriched-html-local-source',
+    configureWebpack(_config, isServer, utils) {
+      return {
+        module: {
+          rules: [
+            {
+              test: /\.tsx?$/,
+              include: librarySource,
+              use: [utils.getJSLoader({ isServer })],
+            },
+          ],
+        },
+        resolve: {
+          alias: {
+            'react-native-enriched-html$': path.resolve(
+              librarySource,
+              'index.tsx'
+            ),
+            // The react-native-enriched-html has separate react and react-dom dependencies in node_modules,
+            // so React would otherwise be resolved from the repo root and bundled twice.
+            'react': path.resolve(__dirname, 'node_modules/react'),
+            'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+          },
+        },
+      };
+    },
+  };
+}
+
 const firstBannerZone = TOP_BAR_BANNER.zones[0];
 const bannerReservationHeadTags = firstBannerZone
   ? [
@@ -31,7 +65,7 @@ const bannerReservationHeadTags = firstBannerZone
         innerHTML: topbarBannerReservationScript(
           firstBannerZone.zoneId,
           firstBannerZone.contentId,
-          TOP_BAR_BANNER.hiddenPaths,
+          TOP_BAR_BANNER.hiddenPaths
         ),
       },
     ]
@@ -99,10 +133,13 @@ const config = {
 
   headTags: bannerReservationHeadTags,
 
-  clientModules: [require.resolve('./src/clientModules/topbarBannerRefresh.ts')],
+  clientModules: [
+    require.resolve('./src/clientModules/topbarBannerRefresh.ts'),
+  ],
 
   plugins: [
     reactNativeWebPlugin,
+    enrichedHtmlLocalSourcePlugin,
     function transpileTRexUiTheme() {
       return {
         name: 'transpile-t-rex-ui-theme',
@@ -160,9 +197,10 @@ const config = {
             dropdownActiveClassDisabled: true,
           },
           {
-            href: 'https://github.com/software-mansion/react-native-enriched-html/',
-            position: 'right',
-            className: 'header-github',
+            'href':
+              'https://github.com/software-mansion/react-native-enriched-html/',
+            'position': 'right',
+            'className': 'header-github',
             'aria-label': 'GitHub repository',
           },
         ],

docs/package.json

@@ -35,7 +35,6 @@
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "react-native": "0.86.0",
-    "react-native-enriched-html": "1.1.0",
     "react-native-web": "0.21.2"
   },
   "resolutions": {

docs/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@site/*": ["./*"],
+      "react-native-enriched-html": ["../src/index.tsx"],
+    },
+  },
+  "exclude": [".docusaurus", "build"],
+  "include": ["src/examples"],
+}