From 828d3fee3274cbe60966567e3208dd76706f54c8 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 12 Oct 2023 23:11:27 +0200 Subject: [PATCH 1/7] fix: storybook unable to load @ imports --- tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 47358755e834c..c680e67fd4e80 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,8 @@ "jsx": "preserve", "incremental": true, "paths": { "@/*": ["./*"] }, - "plugins": [{ "name": "next" }] + "plugins": [{ "name": "next" }], + "baseUrl": "." }, "include": [ "next-env.d.ts", From 6c76cd577c7d98a1ed0fab950c55b8dd52b606be Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 12 Oct 2023 23:11:39 +0200 Subject: [PATCH 2/7] chore: simplify storybook config --- .storybook/main.ts | 34 +++++++--------------------------- .storybook/preview-body.html | 3 --- 2 files changed, 7 insertions(+), 30 deletions(-) delete mode 100644 .storybook/preview-body.html diff --git a/.storybook/main.ts b/.storybook/main.ts index d02deb7de6f94..720b59649070b 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,4 +1,3 @@ -import { resolve } from 'node:path'; import type { StorybookConfig } from '@storybook/nextjs'; const config: StorybookConfig = { @@ -11,33 +10,14 @@ const config: StorybookConfig = { ], logLevel: 'error', staticDirs: ['../public'], - core: { - disableTelemetry: true, - builder: { - name: '@storybook/builder-webpack5', - options: { lazyCompilation: true }, - }, - }, - framework: { name: '@storybook/nextjs', options: {} }, - webpackFinal: async config => { - // This allows us to resolve node_modules and everything from the Application source - config.resolve!.modules = [resolve(__dirname, '..'), 'node_modules']; - - config.resolve!.alias = { - ...config.resolve!.alias, - // Allows us to use `@` imports with TypeScript - '@': resolve(__dirname, '../'), - }; - - // We want to disable the annoying performance hints - // as we know that Storybook has big bundles - config.performance = { - ...config.performance, - hints: false, - }; - - return config; + previewBody: + '', + core: { disableTelemetry: true, disableWhatsNewNotifications: true }, + framework: { + name: '@storybook/nextjs', + options: { builder: { lazyCompilation: true } }, }, + webpack: async config => ({ ...config, performance: { hints: false } }), }; export default config; diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html deleted file mode 100644 index 8c2cc49cc35f9..0000000000000 --- a/.storybook/preview-body.html +++ /dev/null @@ -1,3 +0,0 @@ - From 1428349cba5a3d35e903850989e70552eb7ff28d Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 12 Oct 2023 23:11:49 +0200 Subject: [PATCH 3/7] chore: tailwind compile main.ts --- tailwind.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 1a0167b8a63e6..b07380d091e06 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -7,7 +7,7 @@ export default { './providers/**/*.tsx', './layouts/**/*.tsx', './.storybook/preview.tsx', - './.storybook/preview-body.html', + './.storybook/main.ts', ], theme: { colors: { From 035388774f2e00fbaef790dce262467d239b91ae Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 12 Oct 2023 23:12:00 +0200 Subject: [PATCH 4/7] chore: color-scheme dark --- styles/new/base.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/new/base.css b/styles/new/base.css index 89c5546e99cd0..ba244fc8563d7 100644 --- a/styles/new/base.css +++ b/styles/new/base.css @@ -1,3 +1,7 @@ +html[data-theme='dark'] { + color-scheme: dark; +} + * { @apply subpixel-antialiased; } From df7975f3095e95c61057407373c2f243d413c1ff Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 12 Oct 2023 23:18:17 +0200 Subject: [PATCH 5/7] chore: theme on storybook --- .storybook/main.ts | 5 +++++ styles/new/base.css | 4 ---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 720b59649070b..4c0b79022b407 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -11,6 +11,11 @@ const config: StorybookConfig = { logLevel: 'error', staticDirs: ['../public'], previewBody: + // This `' + + // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style '', core: { disableTelemetry: true, disableWhatsNewNotifications: true }, framework: { diff --git a/styles/new/base.css b/styles/new/base.css index ba244fc8563d7..89c5546e99cd0 100644 --- a/styles/new/base.css +++ b/styles/new/base.css @@ -1,7 +1,3 @@ -html[data-theme='dark'] { - color-scheme: dark; -} - * { @apply subpixel-antialiased; } From fcc551dbc09c750584da04c3f91bd84c68593e82 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 12 Oct 2023 23:21:27 +0200 Subject: [PATCH 6/7] chore: ensure that light mode has light color scheme --- .storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 4c0b79022b407..717d090569e70 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -14,7 +14,7 @@ const config: StorybookConfig = { // This `' + + '' + // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style '', core: { disableTelemetry: true, disableWhatsNewNotifications: true }, From 86e02c6990e01ca5ba0b2275c7c5cc7399daee64 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Thu, 12 Oct 2023 23:24:55 +0200 Subject: [PATCH 7/7] chore: no need of lazy compilation --- .storybook/main.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 717d090569e70..418c9570a65a6 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -18,10 +18,7 @@ const config: StorybookConfig = { // This adds the base styling for dark/light themes within Storybook. This is a Storybook-only style '', core: { disableTelemetry: true, disableWhatsNewNotifications: true }, - framework: { - name: '@storybook/nextjs', - options: { builder: { lazyCompilation: true } }, - }, + framework: { name: '@storybook/nextjs', options: {} }, webpack: async config => ({ ...config, performance: { hints: false } }), };