From 1b94ce579ee680c8a64ef427ef6410f5326497b8 Mon Sep 17 00:00:00 2001
From: AlexMachin1997 <AlexMachin1997@gmail.com>
Date: Sun, 18 Aug 2024 20:20:24 +0100
Subject: [PATCH] fix: Switch over to the new storybook addon-themes to enable
 light/dark mode for later on

---
 .storybook/preview.tsx | 14 +++++++++++++-
 package.json           |  1 +
 postcss.config.cjs     |  2 ++
 tailwind.config.cjs    |  4 ----
 yarn.lock              | 27 ++++++++++++++++-----------
 5 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index ec4b51f..3bd915d 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,9 +1,21 @@
 import type { Preview } from '@storybook/react';
 
+import { withThemeByClassName } from '@storybook/addon-themes';
+
 import '../src/index.scss';
 
 const preview: Preview = {
-	decorators: [],
+	decorators: [
+		// Adds theme switching support.
+		// NOTE: requires setting "darkMode" to "class" in your tailwind config
+		withThemeByClassName({
+			themes: {
+				light: 'light',
+				dark: 'dark'
+			},
+			defaultTheme: 'light'
+		})
+	],
 
 	tags: ['autodocs', 'autodocs']
 };
diff --git a/package.json b/package.json
index a73f451..4cc0055 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@fortawesome/fontawesome-free": "^6.4.2",
     "@headlessui/react": "^1.7.16",
     "@storybook/addon-a11y": "^8.2.9",
+    "@storybook/addon-themes": "^8.2.9",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "@tippyjs/react": "^4.2.6",
     "@typescript-eslint/typescript-estree": "^5.61.0",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 054c147..7da612e 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,5 +1,7 @@
 module.exports = {
 	plugins: {
+		'postcss-import': {},
+		'tailwindcss/nesting': {},
 		tailwindcss: {},
 		autoprefixer: {}
 	}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index e5ee3c0..fed1923 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -48,10 +48,6 @@ module.exports = {
 			// Create new margin properties
 			spacing: {
 				'ml-auto': 'auto'
-			},
-
-			transitionProperty: {
-				'max-height': 'max-height'
 			}
 		}
 	}
diff --git a/yarn.lock b/yarn.lock
index 014ed76..f76dc64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2524,6 +2524,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-themes@npm:^8.2.9":
+  version: 8.2.9
+  resolution: "@storybook/addon-themes@npm:8.2.9"
+  dependencies:
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: ^8.2.9
+  checksum: 10c0/353b30190f91a2687206f3efb280feea571c4837e02b254201bb0fd36e58757dc12c30e9e1a12e486841583207739a677d5c9d0aa1e6f5fa43df68e48a3c88a0
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-toolbars@npm:8.2.9":
   version: 8.2.9
   resolution: "@storybook/addon-toolbars@npm:8.2.9"
@@ -4269,17 +4280,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001520":
-  version: 1.0.30001534
-  resolution: "caniuse-lite@npm:1.0.30001534"
-  checksum: 10c0/3d6b49f297755df373ec6a62a7c8cee614fd7b5a7f3b397cd80990c0de9ecb7147cbba0778ebf59979b7e2b9a99720c24151bc9082cdacd0696307e24a1a3d4d
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001646":
-  version: 1.0.30001647
-  resolution: "caniuse-lite@npm:1.0.30001647"
-  checksum: 10c0/54c07aabbe3915a67bac8015e8421aee59f2756f996fc70fc2a4743fec66e8684e620b45fb706e7e3d0fdd0b2f8dbab0309df90609ead5b45a9cd4318c8716c7
+"caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001520, caniuse-lite@npm:^1.0.30001646":
+  version: 1.0.30001651
+  resolution: "caniuse-lite@npm:1.0.30001651"
+  checksum: 10c0/7821278952a6dbd17358e5d08083d258f092e2a530f5bc1840657cb140fbbc5ec44293bc888258c44a18a9570cde149ed05819ac8320b9710cf22f699891e6ad
   languageName: node
   linkType: hard
 
@@ -9628,6 +9632,7 @@ __metadata:
     "@storybook/addon-essentials": "npm:^8.2.9"
     "@storybook/addon-interactions": "npm:^8.2.9"
     "@storybook/addon-links": "npm:^8.2.9"
+    "@storybook/addon-themes": "npm:^8.2.9"
     "@storybook/blocks": "npm:^8.2.9"
     "@storybook/react": "npm:^8.2.9"
     "@storybook/react-vite": "npm:^8.2.9"