rework theming system and add prefix on-the-fly -- [UNSTABLE]

themesberg · Oct 25, 2024 · c41ea1e · c41ea1e
1 parent 297e064
commit c41ea1e
Show file tree

Hide file tree

Showing 161 changed files with 963 additions and 1,148 deletions.
diff --git a/apps/storybook/tailwind.config.cjs b/apps/storybook/tailwind.config.cjs
@@ -1,8 +1,11 @@
+const flowbite = require("../../packages/ui/src/tailwind");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
   content: ["../../packages/ui/src/**/*.{ts,tsx}"],
   theme: {
     extend: {},
   },
+  plugins: [flowbite],
 };
diff --git a/apps/web/content/docs/customize/theme.mdx b/apps/web/content/docs/customize/theme.mdx
@@ -43,7 +43,7 @@ const customTheme: CustomFlowbiteTheme = {
 
 export default function MyPage() {
   return (
-    <Flowbite theme={{ theme: customTheme }}>
+    <Flowbite theme={customTheme}>
       <Button color="primary">Click me</Button>
     </Flowbite>
   );

diff --git a/bun.lockb b/bun.lockb
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -82,6 +82,16 @@
         "default": "./dist/cjs/tailwind/index.cjs"
       }
     },
+    "./theme": {
+      "import": {
+        "types": "./dist/types/theme/index.d.mts",
+        "default": "./dist/esm/theme/index.mjs"
+      },
+      "require": {
+        "types": "./dist/types/theme/index.d.ts",
+        "default": "./dist/cjs/theme/index.cjs"
+      }
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/cjs/index.cjs",
@@ -111,6 +121,7 @@
     "@floating-ui/react": "0.26.21",
     "classnames": "2.5.1",
     "debounce": "2.1.0",
+    "deepmerge-ts": "7.1.3",
     "react-icons": "5.2.1",
     "tailwind-merge": "2.5.4"
   },

diff --git a/packages/ui/src/components/Accordion/Accordion.spec.tsx b/packages/ui/src/components/Accordion/Accordion.spec.tsx
@@ -135,7 +135,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion />
           </Flowbite>,
         );
@@ -156,7 +156,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion />
             <TestAccordion flush />
           </Flowbite>,
@@ -182,7 +182,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion />
           </Flowbite>,
         );
@@ -219,7 +219,7 @@ describe("Components / Accordion", () => {
         };
 
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAccordion alwaysOpen />
             <TestAccordion alwaysOpen flush />
           </Flowbite>,

diff --git a/packages/ui/src/components/Accordion/Accordion.tsx b/packages/ui/src/components/Accordion/Accordion.tsx
@@ -4,16 +4,17 @@ import type { ComponentProps, FC, ReactElement } from "react";
 import { Children, cloneElement, useMemo, useState } from "react";
 import { HiChevronDown } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean } from "../Flowbite";
+import type { FlowbiteBoolean } from "../Flowbite/FlowbiteTheme";
 import type { FlowbiteAccordionComponentTheme } from "./AccordionContent";
 import { AccordionContent } from "./AccordionContent";
 import type { AccordionPanelProps } from "./AccordionPanel";
 import { AccordionPanel } from "./AccordionPanel";
 import type { FlowbiteAccordionTitleTheme } from "./AccordionTitle";
 import { AccordionTitle } from "./AccordionTitle";
+import { accordionTheme } from "./theme";
 
 export interface FlowbiteAccordionTheme {
   root: FlowbiteAccordionRootTheme;
@@ -42,7 +43,7 @@ const AccordionComponent: FC<AccordionProps> = ({
   flush = false,
   collapseAll = false,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const [isOpen, setOpen] = useState(collapseAll ? -1 : 0);
@@ -61,7 +62,7 @@ const AccordionComponent: FC<AccordionProps> = ({
     [alwaysOpen, arrowIcon, children, flush, isOpen],
   );
 
-  const theme = mergeDeep(getTheme().accordion.root, customTheme);
+  const theme = resolveTheme([accordionTheme.root, getStore().theme?.accordion?.root, customTheme]);
 
   return (
     <div

diff --git a/packages/ui/src/components/Accordion/AccordionContent.tsx b/packages/ui/src/components/Accordion/AccordionContent.tsx
@@ -2,10 +2,11 @@
 
 import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
 import { useAccordionContext } from "./AccordionPanelContext";
+import { accordionTheme } from "./theme";
 
 export interface FlowbiteAccordionComponentTheme {
   base: string;
@@ -15,15 +16,10 @@ export interface AccordionContentProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteAccordionComponentTheme>;
 }
 
-export const AccordionContent: FC<AccordionContentProps> = ({
-  children,
-  className,
-  theme: customTheme = {},
-  ...props
-}) => {
+export const AccordionContent: FC<AccordionContentProps> = ({ children, className, theme: customTheme, ...props }) => {
   const { isOpen } = useAccordionContext();
 
-  const theme = mergeDeep(getTheme().accordion.content, customTheme);
+  const theme = resolveTheme([accordionTheme.content, getStore().theme?.accordion?.content, customTheme]);
 
   return (
     <div

diff --git a/packages/ui/src/components/Accordion/AccordionTitle.tsx b/packages/ui/src/components/Accordion/AccordionTitle.tsx
@@ -2,11 +2,12 @@
 
 import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
-import type { FlowbiteBoolean, FlowbiteHeadingLevel } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteHeadingLevel } from "../Flowbite/FlowbiteTheme";
 import { useAccordionContext } from "./AccordionPanelContext";
+import { accordionTheme } from "./theme";
 
 export interface FlowbiteAccordionTitleTheme {
   arrow: {
@@ -29,13 +30,13 @@ export const AccordionTitle: FC<AccordionTitleProps> = ({
   as: Heading = "h2",
   children,
   className,
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
   const { arrowIcon: ArrowIcon, flush, isOpen, setOpen } = useAccordionContext();
   const onClick = () => typeof setOpen !== "undefined" && setOpen();
 
-  const theme = mergeDeep(getTheme().accordion.title, customTheme);
+  const theme = resolveTheme([accordionTheme.title, getStore().theme?.accordion?.title, customTheme]);
 
   return (
     <button

diff --git a/packages/ui/src/components/Alert/Alert.spec.tsx b/packages/ui/src/components/Alert/Alert.spec.tsx
@@ -26,7 +26,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );
@@ -41,7 +41,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert withBorderAccent />
           </Flowbite>,
         );
@@ -56,7 +56,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );
@@ -78,7 +78,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );
@@ -98,7 +98,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert icon={HiHeart} />
           </Flowbite>,
         );
@@ -113,7 +113,7 @@ describe("Components / Alert", () => {
           },
         };
         render(
-          <Flowbite theme={{ theme }}>
+          <Flowbite theme={theme}>
             <TestAlert />
           </Flowbite>,
         );

diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
@@ -1,10 +1,11 @@
 import type { ComponentProps, FC, ReactNode } from "react";
 import { HiX } from "react-icons/hi";
 import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteColors } from "../Flowbite";
+import type { FlowbiteColors } from "../Flowbite/FlowbiteTheme";
+import { alertTheme } from "./theme";
 
 export interface FlowbiteAlertTheme {
   base: string;
@@ -40,11 +41,11 @@ export const Alert: FC<AlertProps> = ({
   icon: Icon,
   onDismiss,
   rounded = true,
-  theme: customTheme = {},
+  theme: customTheme,
   withBorderAccent,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().alert, customTheme);
+  const theme = resolveTheme([alertTheme, getStore().theme?.alert, customTheme]);
 
   return (
     <div

diff --git a/packages/ui/src/components/Avatar/Avatar.spec.tsx b/packages/ui/src/components/Avatar/Avatar.spec.tsx
@@ -16,7 +16,7 @@ describe("Components / Avatar", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Avatar size="xxl" />
         </Flowbite>,
       );
@@ -35,7 +35,7 @@ describe("Components / Avatar", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Avatar
             bordered
             color="rose"

diff --git a/packages/ui/src/components/Avatar/Avatar.tsx b/packages/ui/src/components/Avatar/Avatar.tsx
@@ -1,13 +1,14 @@
 import type { ComponentProps, FC, ReactElement } from "react";
 import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial, DynamicStringEnumKeysOf } from "../../types";
-import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from "../Flowbite";
+import type { FlowbiteBoolean, FlowbiteColors, FlowbitePositions, FlowbiteSizes } from "../Flowbite/FlowbiteTheme";
 import type { FlowbiteAvatarGroupTheme } from "./AvatarGroup";
 import { AvatarGroup } from "./AvatarGroup";
 import type { FlowbiteAvatarGroupCounterTheme } from "./AvatarGroupCounter";
 import { AvatarGroupCounter } from "./AvatarGroupCounter";
+import { avatarTheme } from "./theme";
 
 export interface FlowbiteAvatarTheme {
   root: FlowbiteAvatarRootTheme;
@@ -88,10 +89,10 @@ const AvatarComponent: FC<AvatarProps> = ({
   stacked = false,
   status,
   statusPosition = "top-left",
-  theme: customTheme = {},
+  theme: customTheme,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().avatar, customTheme);
+  const theme = resolveTheme([avatarTheme, getStore().theme?.avatar, customTheme]);
 
   const imgClassName = twMerge(
     theme.root.img.base,

diff --git a/packages/ui/src/components/Avatar/AvatarGroup.tsx b/packages/ui/src/components/Avatar/AvatarGroup.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps } from "react";
 import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { avatarTheme } from "./theme";
 
 export interface FlowbiteAvatarGroupTheme {
   base: string;
@@ -12,8 +13,8 @@ export interface AvatarGroupProps extends ComponentProps<"div"> {
   theme?: DeepPartial<FlowbiteAvatarGroupTheme>;
 }
 
-export const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
-  const theme = mergeDeep(getTheme().avatar.group, customTheme);
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className, theme: customTheme, ...props }) => {
+  const theme = resolveTheme([avatarTheme.group, getStore().theme?.avatar?.group, customTheme]);
 
   return (
     <div data-testid="avatar-group-element" className={twMerge(theme.base, className)} {...props}>

diff --git a/packages/ui/src/components/Avatar/AvatarGroupCounter.tsx b/packages/ui/src/components/Avatar/AvatarGroupCounter.tsx
@@ -1,8 +1,9 @@
 import type { ComponentProps, FC } from "react";
 import { twMerge } from "tailwind-merge";
-import { mergeDeep } from "../../helpers/merge-deep";
-import { getTheme } from "../../theme-store";
+import { resolveTheme } from "../../helpers/resolve-theme";
+import { getStore } from "../../store";
 import type { DeepPartial } from "../../types";
+import { avatarTheme } from "./theme";
 
 export interface FlowbiteAvatarGroupCounterTheme {
   base: string;
@@ -16,11 +17,11 @@ export interface AvatarGroupCounterProps extends ComponentProps<"a"> {
 export const AvatarGroupCounter: FC<AvatarGroupCounterProps> = ({
   className,
   href,
-  theme: customTheme = {},
+  theme: customTheme,
   total,
   ...props
 }) => {
-  const theme = mergeDeep(getTheme().avatar.groupCounter, customTheme);
+  const theme = resolveTheme([avatarTheme.groupCounter, getStore().theme?.avatar?.groupCounter, customTheme]);
 
   return (
     <a href={href} className={twMerge(theme.base, className)} {...props}>

diff --git a/packages/ui/src/components/Badge/Badge.spec.tsx b/packages/ui/src/components/Badge/Badge.spec.tsx
@@ -41,7 +41,7 @@ describe("Components / Badge", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Badge color="primary" href="/" icon={HiCheck}>
             A badge
           </Badge>
@@ -71,7 +71,7 @@ describe("Components / Badge", () => {
         },
       };
       render(
-        <Flowbite theme={{ theme }}>
+        <Flowbite theme={theme}>
           <Badge size="xxl">A badge</Badge>
           <Badge icon={HiCheck} size="xxl" />
         </Flowbite>,