chore: fix tests

SutuSebastian · SutuSebastian · commit 93ceddb531fd · 2025-04-19T13:30:47.000+03:00
- add `ThemeConfig` in apps/[storybook, web]
- enforce schema `version` to [3,4]
diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
@@ -1,5 +1,8 @@
 import { withThemeByClassName } from "@storybook/addon-themes";
-import type { Preview } from "@storybook/react";
+import type { Decorator, Preview } from "@storybook/react";
+import { ThemeConfig } from "flowbite-react";
+import React from "react";
+import config from "../.flowbite-react/config.json";
 
 import "./style.css";
 
@@ -17,7 +20,13 @@ const preview: Preview = {
   },
 };
 
-export const decorators = [
+export const decorators: Decorator[] = [
+  (Story) => (
+    <>
+      <ThemeConfig version={config.version as 3 | 4} />
+      <Story />
+    </>
+  ),
   withThemeByClassName({
     themes: {
       light: "light",
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,7 +1,8 @@
-import { ThemeModeScript } from "flowbite-react";
+import { ThemeConfig, ThemeModeScript } from "flowbite-react";
 import { Inter as InterFont } from "next/font/google";
 import type { Metadata, Viewport } from "next/types";
 import type { PropsWithChildren } from "react";
+import config from "~/.flowbite-react/config.json";
 import { FathomScript } from "~/components/fathom-script";
 
 import "~/styles/globals.css";
@@ -60,6 +61,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
         <ThemeModeScript />
       </head>
       <body className="bg-white text-gray-600 antialiased dark:bg-gray-900 dark:text-gray-400">
+        <ThemeConfig version={config.version as 3 | 4} />
         {children}
         <FathomScript />
       </body>
diff --git a/apps/web/content/docs/customize/config.mdx b/apps/web/content/docs/customize/config.mdx
@@ -40,7 +40,8 @@ The configuration file follows this JSON Schema:
     },
     "prefix": {
       "description": "Optional prefix to apply to all Tailwind CSS classes",
-      "type": "string"
+      "type": "string",
+      "default": ""
     },
     "rsc": {
       "description": "Whether to include the 'use client' directive for React Server Components",
@@ -55,6 +56,7 @@ The configuration file follows this JSON Schema:
     "version": {
       "description": "The version of Tailwind CSS to use",
       "type": "number",
+      "enum": [3, 4],
       "default": 4
     }
   },
@@ -109,6 +111,7 @@ For detailed instructions on configuring and using prefixes, see the [Prefix](/d
 #### `version`
 
 - Type: `number`
+- Options: `3`, `4`
 - Default: `4`
 - Description: The version of Tailwind CSS to use.
 
diff --git a/packages/ui/schema.json b/packages/ui/schema.json
@@ -128,7 +128,8 @@
     },
     "prefix": {
       "description": "Optional prefix to apply to all Tailwind CSS classes. \nSee https://flowbite-react.com/docs/customize/config#prefix for more details.",
-      "type": "string"
+      "type": "string",
+      "default": ""
     },
     "rsc": {
       "description": "Whether to include the 'use client' directive for React Server Components. \nSee https://flowbite-react.com/docs/customize/config#rsc for more details.",
@@ -143,6 +144,7 @@
     "version": {
       "description": "The version of Tailwind CSS to use. \nSee https://flowbite-react.com/docs/customize/config#version for more details.",
       "type": "number",
+      "enum": [3, 4],
       "default": 4
     }
   },
diff --git a/packages/ui/scripts/generate-metadata.ts b/packages/ui/scripts/generate-metadata.ts
@@ -235,6 +235,7 @@ async function generateSchema(components: string[]): Promise<void> {
           description:
             "Optional prefix to apply to all Tailwind CSS classes. \nSee https://flowbite-react.com/docs/customize/config#prefix for more details.",
           type: "string",
+          default: "",
         },
         rsc: {
           description:
@@ -252,6 +253,7 @@ async function generateSchema(components: string[]): Promise<void> {
           description:
             "The version of Tailwind CSS to use. \nSee https://flowbite-react.com/docs/customize/config#version for more details.",
           type: "number",
+          enum: [3, 4],
           default: 4,
         },
       },
diff --git a/packages/ui/src/helpers/resolve-theme.test.ts b/packages/ui/src/helpers/resolve-theme.test.ts
@@ -18,7 +18,7 @@ describe("resolveTheme", () => {
   });
 
   it("should apply prefix with version 3 format", () => {
-    setStore({ prefix: "tw-" });
+    setStore({ prefix: "tw-", version: 3 });
 
     const base = { color: "text-red-400" };
 
