Storybook: Try to fix react-docgen-typescript.

NordcomInc · Sep 29, 2024 · d168a21 · d168a21
1 parent 3011ba6
commit d168a21
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 9 deletions.
diff --git a/.changeset/flat-coins-breathe.md 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
@@ -1,2 +1,2 @@
 .vercel
-storybook-static
+storybook-static/
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig.json",
+    "extends": "../../tsconfig.json",
+    "references": [{ "path": "../../tsconfig.json" }]
+}