Feat/theming (#450)

* refactor(flowbitetheme.ts): decomposits FlofbiteTheme interface to component pieces

* refactor: moves components theme interfaces from Flowbyte.ts to their main files

* test(flowbite): adds test cases for the flowbite theme provider and useTheme hook

#443

* feat(helpers/mergedeep): updates the mergeDeep logic to make deep copy as well

#443

Author: yurisldk

src/lib/components/Accordion/Accordion.tsx

@@ -2,12 +2,34 @@ import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react';
 import { Children, cloneElement, useMemo, useState } from 'react';
 import { HiChevronDown } from 'react-icons/hi';
+import { FlowbiteBoolean } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import { AccordionContent } from './AccordionContent';
 import type { AccordionPanelProps } from './AccordionPanel';
 import { AccordionPanel } from './AccordionPanel';
 import { AccordionTitle } from './AccordionTitle';
 
+export interface FlowbiteAccordionTheme {
+  base: string;
+  content: {
+    base: string;
+  };
+  flush: FlowbiteBoolean;
+  title: {
+    arrow: {
+      base: string;
+      open: {
+        off: string;
+        on: string;
+      };
+    };
+    base: string;
+    flush: FlowbiteBoolean;
+    heading: string;
+    open: FlowbiteBoolean;
+  };
+}
+
 export interface AccordionProps extends PropsWithChildren<ComponentProps<'div'>> {
   alwaysOpen?: boolean;
   arrowIcon?: FC<ComponentProps<'svg'>>;

src/lib/components/Alert/Alert.tsx

@@ -4,6 +4,24 @@ import { HiX } from 'react-icons/hi';
 import type { FlowbiteColors } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
+export interface FlowbiteAlertTheme {
+  base: string;
+  borderAccent: string;
+  wrapper: string;
+  closeButton: {
+    base: string;
+    icon: string;
+    color: AlertColors;
+  };
+  color: AlertColors;
+  icon: string;
+  rounded: string;
+}
+
+export interface AlertColors extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'success' | 'warning'> {
+  [key: string]: string;
+}
+
 export interface AlertProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'color'>> {
   additionalContent?: ReactNode;
   color?: keyof AlertColors;
@@ -13,10 +31,6 @@ export interface AlertProps extends PropsWithChildren<Omit<ComponentProps<'div'>
   withBorderAccent?: boolean;
 }
 
-export interface AlertColors extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'success' | 'warning'> {
-  [key: string]: string;
-}
-
 export const Alert: FC<AlertProps> = ({
   additionalContent,
   children,

src/lib/components/Avatar/Avatar.tsx

@@ -5,6 +5,41 @@ import { useTheme } from '../Flowbite/ThemeContext';
 import AvatarGroup from './AvatarGroup';
 import AvatarGroupCounter from './AvatarGroupCounter';
 
+export interface FlowbiteAvatarTheme {
+  base: string;
+  bordered: string;
+  img: {
+    off: string;
+    on: string;
+    placeholder: string;
+  };
+  color: AvatarColors;
+  rounded: string;
+  size: AvatarSizes;
+  stacked: string;
+  status: {
+    away: string;
+    base: string;
+    busy: string;
+    offline: string;
+    online: string;
+  };
+  statusPosition: FlowbitePositions;
+  initials: {
+    base: string;
+    text: string;
+  };
+}
+
+export interface AvatarColors
+  extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'pink' | 'purple' | 'success' | 'warning'> {
+  [key: string]: string;
+}
+
+export interface AvatarSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'> {
+  [key: string]: string;
+}
+
 export interface AvatarProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'color'>> {
   alt?: string;
   bordered?: boolean;
@@ -18,15 +53,6 @@ export interface AvatarProps extends PropsWithChildren<Omit<ComponentProps<'div'
   placeholderInitials?: string;
 }
 
-export interface AvatarColors
-  extends Pick<FlowbiteColors, 'failure' | 'gray' | 'info' | 'pink' | 'purple' | 'success' | 'warning'> {
-  [key: string]: string;
-}
-
-export interface AvatarSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'md' | 'lg' | 'xl'> {
-  [key: string]: string;
-}
-
 const AvatarComponent: FC<AvatarProps> = ({
   alt = '',
   bordered = false,

src/lib/components/Avatar/AvatarGroup.tsx

@@ -3,6 +3,10 @@ import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
 import { useTheme } from '../Flowbite';
 
+export interface FlowbiteAvatarGroupTheme {
+  base: string;
+}
+
 export type AvatarGroupProps = PropsWithChildren<ComponentProps<'div'>>;
 
 const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className }) => {

src/lib/components/Avatar/AvatarGroupCounter.tsx

@@ -3,6 +3,10 @@ import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
 import { useTheme } from '../Flowbite';
 
+export interface FlowbiteAvatarGroupCounterTheme {
+  base: string;
+}
+
 export interface AvatarGroupdCounterProps extends PropsWithChildren<ComponentProps<'a'>> {
   total?: number;
 }

src/lib/components/Avatar/index.ts

@@ -1,3 +1,3 @@
 export * from './Avatar';
-export type { AvatarGroupProps } from './AvatarGroup';
-export type { AvatarGroupdCounterProps } from './AvatarGroupCounter';
+export type { AvatarGroupProps, FlowbiteAvatarGroupTheme } from './AvatarGroup';
+export type { AvatarGroupdCounterProps, FlowbiteAvatarGroupCounterTheme } from './AvatarGroupCounter';

src/lib/components/Badge/Badge.tsx

@@ -3,11 +3,16 @@ import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import type { FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export interface BadgeProps extends PropsWithChildren<Omit<ComponentProps<'span'>, 'color'>> {
-  color?: keyof BadgeColors;
-  href?: string;
-  icon?: FC<ComponentProps<'svg'>>;
-  size?: keyof BadgeSizes;
+export interface FlowbiteBadgeTheme {
+  base: string;
+  color: BadgeColors;
+  href: string;
+  icon: {
+    off: string;
+    on: string;
+    size: BadgeSizes;
+  };
+  size: BadgeSizes;
 }
 
 export interface BadgeColors
@@ -19,6 +24,13 @@ export interface BadgeSizes extends Pick<FlowbiteSizes, 'xs' | 'sm'> {
   [key: string]: string;
 }
 
+export interface BadgeProps extends PropsWithChildren<Omit<ComponentProps<'span'>, 'color'>> {
+  color?: keyof BadgeColors;
+  href?: string;
+  icon?: FC<ComponentProps<'svg'>>;
+  size?: keyof BadgeSizes;
+}
+
 export const Badge: FC<BadgeProps> = ({
   children,
   color = 'info',

src/lib/components/Breadcrumb/Breadcrumb.tsx

@@ -2,6 +2,19 @@ import type { ComponentProps, FC } from 'react';
 import { useTheme } from '../Flowbite/ThemeContext';
 import BreadcrumbItem from './BreadcrumbItem';
 
+export interface FlowbiteBreadcrumbTheme {
+  item: {
+    base: string;
+    chevron: string;
+    href: {
+      off: string;
+      on: string;
+    };
+    icon: string;
+  };
+  list: string;
+}
+
 const BreadcrumbComponent: FC<ComponentProps<'nav'>> = ({ children, ...props }) => {
   const theme = useTheme().theme.breadcrumb;
 

src/lib/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { forwardRef, type ComponentProps, type ReactNode } from 'react';
 import type {
+  FlowbiteBoolean,
   FlowbiteColors,
   FlowbiteGradientColors,
   FlowbiteGradientDuoToneColors,
@@ -10,17 +11,25 @@ import { useTheme } from '../Flowbite/ThemeContext';
 import type { PositionInButtonGroup } from './ButtonGroup';
 import ButtonGroup from './ButtonGroup';
 
-export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'ref'> {
-  color?: keyof ButtonColors;
-  gradientDuoTone?: keyof ButtonGradientDuoToneColors;
-  gradientMonochrome?: keyof ButtonGradientColors;
-  href?: string;
-  label?: ReactNode;
-  outline?: boolean;
-  fullSized?: boolean;
-  pill?: boolean;
-  positionInGroup?: keyof PositionInButtonGroup;
-  size?: keyof ButtonSizes;
+export interface FlowbiteButtonTheme {
+  base: string;
+  fullSized: string;
+  color: ButtonColors;
+  disabled: string;
+  gradient: ButtonGradientColors;
+  gradientDuoTone: ButtonGradientDuoToneColors;
+  inner: {
+    base: string;
+    position: PositionInButtonGroup;
+    outline: string;
+  };
+  label: string;
+  outline: FlowbiteBoolean & {
+    color: ButtonOutlineColors;
+    pill: FlowbiteBoolean;
+  };
+  pill: FlowbiteBoolean;
+  size: ButtonSizes;
 }
 
 export interface ButtonColors
@@ -44,6 +53,19 @@ export interface ButtonSizes extends Pick<FlowbiteSizes, 'xs' | 'sm' | 'lg' | 'x
   [key: string]: string;
 }
 
+export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'ref'> {
+  color?: keyof ButtonColors;
+  gradientDuoTone?: keyof ButtonGradientDuoToneColors;
+  gradientMonochrome?: keyof ButtonGradientColors;
+  href?: string;
+  label?: ReactNode;
+  outline?: boolean;
+  fullSized?: boolean;
+  pill?: boolean;
+  positionInGroup?: keyof PositionInButtonGroup;
+  size?: keyof ButtonSizes;
+}
+
 const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
   (
     {

src/lib/components/Button/ButtonGroup.tsx

@@ -4,7 +4,10 @@ import { Children, cloneElement, useMemo } from 'react';
 import type { ButtonProps } from '../Button';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export type ButtonGroupProps = PropsWithChildren<ComponentProps<'div'> & Pick<ButtonProps, 'outline' | 'pill'>>;
+export interface FlowbiteButtonGroupTheme {
+  base: string;
+  position: PositionInButtonGroup;
+}
 
 export interface PositionInButtonGroup {
   none: string;
@@ -13,6 +16,8 @@ export interface PositionInButtonGroup {
   end: string;
 }
 
+export type ButtonGroupProps = PropsWithChildren<ComponentProps<'div'> & Pick<ButtonProps, 'outline' | 'pill'>>;
+
 const ButtonGroup: FC<ButtonGroupProps> = ({
   children,
   outline,