NextJS 13 App router / RSC support (themesberg#994)

* feat: nextJS 13 RSC support; initial approach - ditch `useTheme` react context, use polymorphic singleton (cross env: client/server)

BETA IDEA

* add missing `'use client';`

* add more missing `'use client';`

* refactor: remove `ThemeContext`; create `useThemeMode` hook and persist in LS; polymorphic custom theme init (server/client)

* refactor: `useThemeMode` - cleanup; change LS key name to be specific

* simplify theme init

* fix: `Flowbite` test

* remove redundant TS HTMLDivElement types to `Flowbite` component

* fix: build failure due to variable not being used

* update: RSC demo page

* fix: import types

* fix: SSR error

* feat: sync all tabs with the latest theme mode value

* abstract away hook

* refactor: import/export hierarchy; simplify package dependency graph, avoid circular imports errors

* keep `useThemeMode` state in sync inbetween instances

* update demo RSC page

* fix: conflicts after merge with main

* refactor: `Flowbite` exports

* fix: `FloatingLabel` export

* fix: `FloatingLabel` imports + use new `getTheme` function

* refactor: allow mutation of `getTheme` return object; abstract `cloneDeep` and `isObject`

* refactor: theme init; theme mode hook: add `auto` mode as well + extend API

* fix: performance improvements: improve for loops, lower garbage collector size; add some tests

* fix: `use-client` spacing

* refactor: inline fallback return

* fix: strict type imports

* fix: build - add `ts-expect-error` description

* refactor: embed `mode` into theme init flow

* remove demo page

* fix `FloatingLabel` imports/exports

* fix: flowbite test

* fix: `blockquote` imports

* fix: export `Blockquote`

* fix: import type

* refactor: rename `useWatchLSValue` to be more explicit: `useWatchLocalStorageValue`

---------

Co-authored-by: Sebastian Sutu <sebastian.sutu@sensidev.com>

Author: 2 people

app/docs/forms/floating-label/floating-label.mdx

@@ -1,6 +1,5 @@
-import { FloatingLabel } from '~/src/components/FloatingLabel/FloatingLabel';
-import { theme } from '~/src';
 import { CodePreview } from '~/app/components/code-preview';
+import { theme, FloatingLabel } from '~/src';
 
 ## Table of Contents
 

src/components/Accordion/Accordion.spec.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import type { FC } from 'react';
 import { HiOutlineArrowCircleDown } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
-import { Flowbite } from '../../';
+import { Flowbite } from '../Flowbite';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 

src/components/Accordion/Accordion.tsx

@@ -1,10 +1,13 @@
+'use client';
+
 import type { ComponentProps, FC, PropsWithChildren, ReactElement } from 'react';
 import { Children, cloneElement, useMemo, useState } from 'react';
 import { HiChevronDown } from 'react-icons/hi';
 import { twMerge } from 'tailwind-merge';
-import type { DeepPartial, FlowbiteBoolean } from '../../';
-import { useTheme } from '../../';
-import { mergeDeep } from '../../helpers/merge-deep';
+import { mergeDeep } from '~/src/helpers/merge-deep';
+import { getTheme } from '~/src/theme-store';
+import type { DeepPartial } from '~/src/types';
+import type { FlowbiteBoolean } from '../Flowbite';
 import type { FlowbiteAccordionComponentTheme } from './AccordionContent';
 import { AccordionContent } from './AccordionContent';
 import type { AccordionPanelProps } from './AccordionPanel';
@@ -58,7 +61,7 @@ const AccordionComponent: FC<AccordionProps> = ({
     [alwaysOpen, arrowIcon, children, flush, isOpen],
   );
 
-  const theme = mergeDeep(useTheme().theme.accordion.root, customTheme);
+  const theme = mergeDeep(getTheme().accordion.root, customTheme);
 
   return (
     <div

src/components/Accordion/AccordionContent.tsx

@@ -1,8 +1,10 @@
+'use client';
+
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { DeepPartial } from '../../';
-import { useTheme } from '../../';
-import { mergeDeep } from '../../helpers/merge-deep';
+import { mergeDeep } from '~/src/helpers/merge-deep';
+import { getTheme } from '~/src/theme-store';
+import type { DeepPartial } from '~/src/types';
 import { useAccordionContext } from './AccordionPanelContext';
 
 export interface FlowbiteAccordionComponentTheme {
@@ -21,7 +23,7 @@ export const AccordionContent: FC<AccordionContentProps> = ({
 }) => {
   const { isOpen } = useAccordionContext();
 
-  const theme = mergeDeep(useTheme().theme.accordion.content, customTheme);
+  const theme = mergeDeep(getTheme().accordion.content, customTheme);
 
   return (
     <div

src/components/Accordion/AccordionPanel.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import type { FC, PropsWithChildren } from 'react';
 import { useState } from 'react';
 import type { AccordionProps } from './Accordion';

src/components/Accordion/AccordionPanelContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import type { AccordionPanelProps } from './AccordionPanel';
 

src/components/Accordion/AccordionTitle.tsx

@@ -1,8 +1,11 @@
+'use client';
+
 import type { ComponentProps, FC } from 'react';
 import { twMerge } from 'tailwind-merge';
-import type { DeepPartial, FlowbiteBoolean, FlowbiteHeadingLevel } from '../../';
-import { useTheme } from '../../';
-import { mergeDeep } from '../../helpers/merge-deep';
+import { mergeDeep } from '~/src/helpers/merge-deep';
+import { getTheme } from '~/src/theme-store';
+import type { DeepPartial } from '~/src/types';
+import type { FlowbiteBoolean, FlowbiteHeadingLevel } from '../Flowbite';
 import { useAccordionContext } from './AccordionPanelContext';
 
 export interface FlowbiteAccordionTitleTheme {
@@ -32,7 +35,7 @@ export const AccordionTitle: FC<AccordionTitleProps> = ({
   const { arrowIcon: ArrowIcon, flush, isOpen, setOpen } = useAccordionContext();
   const onClick = () => typeof setOpen !== 'undefined' && setOpen();
 
-  const theme = mergeDeep(useTheme().theme.accordion.title, customTheme);
+  const theme = mergeDeep(getTheme().accordion.title, customTheme);
 
   return (
     <button

src/components/Alert/Alert.spec.tsx

@@ -4,7 +4,7 @@ import type { FC } from 'react';
 import { useState } from 'react';
 import { HiEye, HiHeart, HiInformationCircle } from 'react-icons/hi';
 import { describe, expect, it, vi } from 'vitest';
-import { Flowbite } from '../../';
+import { Flowbite } from '../Flowbite';
 
 import type { AlertProps } from './Alert';
 import { Alert } from './Alert';

src/components/Alert/Alert.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react';
 import { HiEye, HiInformationCircle } from 'react-icons/hi';
-import { theme } from '../../';
+import { theme } from '~/src/theme';
 import type { AlertProps } from './Alert';
 import { Alert } from './Alert';
 

src/components/Alert/Alert.tsx

@@ -1,9 +1,10 @@
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
 import { HiX } from 'react-icons/hi';
 import { twMerge } from 'tailwind-merge';
-import type { DeepPartial, FlowbiteColors } from '../../';
-import { useTheme } from '../../';
-import { mergeDeep } from '../../helpers/merge-deep';
+import { mergeDeep } from '~/src/helpers/merge-deep';
+import { getTheme } from '~/src/theme-store';
+import type { DeepPartial } from '~/src/types';
+import type { FlowbiteColors } from '../Flowbite';
 
 export interface FlowbiteAlertTheme {
   base: string;
@@ -43,7 +44,7 @@ export const Alert: FC<AlertProps> = ({
   withBorderAccent,
   ...props
 }) => {
-  const theme = mergeDeep(useTheme().theme.alert, customTheme);
+  const theme = mergeDeep(getTheme().alert, customTheme);
 
   return (
     <div