feat(flowbite): adds feature to use nested providers

#443

Author: yurisldk

src/lib/components/Flowbite/Flowbite.spec.tsx

@@ -1,4 +1,6 @@
-import { act, render } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import classNames from 'classnames';
+import { ComponentProps, FC } from 'react';
 import { afterEach, describe, expect, it } from 'vitest';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import defaultTheme from '../../theme/default';
@@ -83,19 +85,54 @@ describe('Components / Flowbite', () => {
       expect(mode2).toBe('dark');
       expect(documentEl()).toHaveClass('dark');
     });
+
+    it('should incapsulate nested themes', () => {
+      render(
+        <>
+          <Flowbite theme={{ theme: { avatar: { size: { md: 'w-1 h-1' } } } }}>
+            {/* should be w-1 h-1 */}
+            <TestComponent data-testid="first-lvl" />
+
+            <Flowbite theme={{ theme: { avatar: { size: { md: 'w-2 h-2' } } } }}>
+              {/* should be w-2 h-2 */}
+              <TestComponent data-testid="second-lvl" />
+
+              <Flowbite>
+                {/* should be w-2 h-2, closest provider return w-2 h-2 */}
+                <TestComponent data-testid="third-lvl" />
+              </Flowbite>
+            </Flowbite>
+          </Flowbite>
+          {/* should be w-10 h-10 default */}
+          <TestComponent data-testid="without-provider" />
+        </>,
+      );
+
+      const withoutProvider = screen.getByTestId('without-provider');
+      const firstLvlProvider = screen.getByTestId('first-lvl');
+      const secondLvlProvider = screen.getByTestId('second-lvl');
+      const thirdLvlProvider = screen.getByTestId('third-lvl');
+
+      expect(firstLvlProvider).toHaveClass('w-1 h-1');
+      expect(secondLvlProvider).toHaveClass('w-2 h-2');
+      expect(thirdLvlProvider).toHaveClass('w-2 h-2');
+      expect(withoutProvider).toHaveClass('w-10 h-10');
+    });
   });
 });
 
 let context: ThemeContextProps;
-const TestComponent = () => {
+const TestComponent: FC<ComponentProps<'div'>> = (props) => {
+  const { className, ...other } = props;
   context = useTheme();
-  return null;
+
+  return <div className={classNames(context.theme.avatar.size.md, className)} {...other} />;
 };
 
 const customTheme = {
   avatar: {
     size: {
-      xxl: 'h-64 w-64',
+      md: 'h-64 w-64',
     },
   },
 };

src/lib/components/Flowbite/Flowbite.tsx

@@ -1,9 +1,8 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC, HTMLAttributes, ReactNode } from 'react';
 import { useEffect, useMemo } from 'react';
 import type { DeepPartial } from '..';
 import { mergeDeep } from '../../helpers/mergeDeep';
 import windowExists from '../../helpers/window-exists';
-import defaultTheme from '../../theme/default';
 import type { FlowbiteTheme } from './FlowbiteTheme';
 import { ThemeContext, useTheme, useThemeMode } from './ThemeContext';
 
@@ -14,15 +13,17 @@ export interface ThemeProps {
 }
 
 interface FlowbiteProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
+  children: ReactNode;
   theme?: ThemeProps;
 }
 
 export const Flowbite: FC<FlowbiteProps> = ({ children, theme = {} }) => {
-  const { theme: customTheme = {}, dark, usePreferences = true } = theme;
+  const { theme: localTheme = {}, dark, usePreferences = true } = theme;
+
   const [mode, setMode, toggleMode] = useThemeMode(usePreferences);
+  const outerTheme = useTheme().theme;
 
-  const mergedTheme = mergeDeep<FlowbiteTheme>(defaultTheme, customTheme);
+  const mergedTheme = mergeDeep(outerTheme, localTheme);
 
   useEffect(() => {
     if (dark) {

src/lib/components/Flowbite/FlowbiteThemeProvider.tsx

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from 'react';
+import { DeepPartial } from '..';
+import { Flowbite, FlowbiteTheme } from './Flowbite';
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  theme: DeepPartial<FlowbiteTheme>;
+}
+
+export const FlowbiteThemeProvider: FC<ThemeProviderProps> = ({ children, theme }) => (
+  <Flowbite theme={{ theme }}>{children}</Flowbite>
+);