From d168a2129563cbaaf64101fad334e706cbe4ca4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filiph=20Siitam=20Sandstr=C3=B6m?= <filiph@nordcom.io>
Date: Sun, 29 Sep 2024 07:59:56 +0200
Subject: [PATCH] Storybook: Try to fix `react-docgen-typescript`.

---
 .changeset/flat-coins-breathe.md              |  5 +++++
 packages/storybook/.gitignore                 |  2 +-
 packages/storybook/.storybook/globals.css     |  4 ++--
 packages/storybook/.storybook/main.ts         |  6 ++----
 .../storybook/.storybook/manager-head.html    | 19 +++++++++++++++++++
 packages/storybook/.storybook/manager.ts      |  4 ++--
 packages/storybook/tsconfig.json              |  5 +++++
 7 files changed, 36 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/flat-coins-breathe.md
 create mode 100644 packages/storybook/tsconfig.json

diff --git a/.changeset/flat-coins-breathe.md b/.changeset/flat-coins-breathe.md
new file mode 100644
index 00000000..6747db3f
--- /dev/null
+++ b/.changeset/flat-coins-breathe.md
@@ -0,0 +1,5 @@
+---
+'@nordcom/nordstar-storybook': patch
+---
+
+-   Try to fix `react-docgen-typescript`.
diff --git a/packages/storybook/.gitignore b/packages/storybook/.gitignore
index 2ccce1d9..a0cfea55 100644
--- a/packages/storybook/.gitignore
+++ b/packages/storybook/.gitignore
@@ -1,2 +1,2 @@
 .vercel
-storybook-static
+storybook-static/
diff --git a/packages/storybook/.storybook/globals.css b/packages/storybook/.storybook/globals.css
index 10c43eb6..acb1bf6a 100644
--- a/packages/storybook/.storybook/globals.css
+++ b/packages/storybook/.storybook/globals.css
@@ -7,12 +7,11 @@
         --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell,
             'Helvetica Neue', sans-serif;
         --font-sans: 'Montserrat', sans-serif;
-
         --font-primary: 'Montserrat', sans-serif;
 
         background: var(--color-background);
         color: var(--color-foreground);
-        font-family: var(--font-heading);
+        font-family: 'Montserrat', sans-serif;
         font-size: 16px;
     }
 
@@ -21,6 +20,7 @@
     }
 
     body {
+        font-family: 'Montserrat', sans-serif;
         color: hsl(var(--color-foreground));
         background-color: hsl(var(--color-background));
     }
diff --git a/packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.ts
index a5606a1a..b469c9f8 100644
--- a/packages/storybook/.storybook/main.ts
+++ b/packages/storybook/.storybook/main.ts
@@ -1,5 +1,4 @@
 import { StorybookConfig } from '@storybook/react-vite';
-import path from 'node:path';
 
 const config: StorybookConfig = {
     stories: ['../../**/src/**/*.mdx', '../../**/src/**/*.stories.@(ts|tsx)'],
@@ -26,10 +25,9 @@ const config: StorybookConfig = {
     typescript: {
         reactDocgen: 'react-docgen-typescript',
         reactDocgenTypescriptOptions: {
-            shouldExtractLiteralValuesFromEnum: true,
-            tsconfigPath: path.resolve(path.join(process.cwd().split('/packages')[0], 'tsconfig.json'))
+            shouldExtractLiteralValuesFromEnum: true
         },
-        check: true
+        check: false
     },
     docs: {
         defaultName: 'Documentation',
diff --git a/packages/storybook/.storybook/manager-head.html b/packages/storybook/.storybook/manager-head.html
index f5105bd8..d1880e9f 100644
--- a/packages/storybook/.storybook/manager-head.html
+++ b/packages/storybook/.storybook/manager-head.html
@@ -1 +1,20 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+
 <meta name="robots" content="noindex" />
+
+<style>
+    :root {
+        --font-sans: Montserrat, sans-serif;
+        --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell,
+            'Helvetica Neue', sans-serif;
+    }
+
+    body {
+        font-family: 'Montserrat', sans-serif;
+        font-size: 16px;
+        font-optical-sizing: auto;
+    }
+</style>
diff --git a/packages/storybook/.storybook/manager.ts b/packages/storybook/.storybook/manager.ts
index 5d0950f7..3dc95324 100644
--- a/packages/storybook/.storybook/manager.ts
+++ b/packages/storybook/.storybook/manager.ts
@@ -28,7 +28,7 @@ export const darkTheme: Theme = create({
     buttonBorder: '#ed1e79',
     colorPrimary: '#ed1e79',
     colorSecondary: '#ed1e79',
-    fontBase: 'var(--font-sans, var(--font-fallback))',
+    fontBase: "'Montserrat', sans-serif",
     fontCode: 'var(--font-mono)',
     gridCellSize: 8,
     inputBg: '#000000',
@@ -62,7 +62,7 @@ export const lightTheme: Theme = create({
     buttonBorder: '#ed1e79',
     colorPrimary: '#ed1e79',
     colorSecondary: '#ed1e79',
-    fontBase: 'var(--font-sans, var(--font-fallback))',
+    fontBase: "'Montserrat', sans-serif",
     fontCode: 'var(--font-mono)',
     gridCellSize: 8,
     inputBg: '#fefefe',
diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
new file mode 100644
index 00000000..876714c8
--- /dev/null
+++ b/packages/storybook/tsconfig.json
@@ -0,0 +1,5 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig.json",
+    "extends": "../../tsconfig.json",
+    "references": [{ "path": "../../tsconfig.json" }]
+}