feat: add React 18 support

package.json

@@ -43,8 +43,8 @@
   },
   "peerDependencies": {
     "flowbite": "^1",
-    "react": "^17",
-    "react-dom": "^17",
+    "react": "^17 || ^18",
+    "react-dom": "^17 || ^18",
     "react-router-dom": "^6",
     "tailwindcss": "^3"
   },
@@ -56,8 +56,8 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
@@ -72,16 +72,16 @@
     "postcss": "^8.4.7",
     "prettier": "^2.5.1",
     "prettier-plugin-tailwindcss": "^0.1.8",
-    "react": "^17.0.2",
+    "react": "^18.0.0",
     "react-app-rewired": "^2.2.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.0.0",
     "react-element-to-jsx-string": "14.3.2",
-    "react-router-dom": "^6.2.2",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.0",
-    "react-syntax-highlighter": "^15.4.5",
+    "react-syntax-highlighter": "^15.5.0",
     "standard-version": "^9.3.2",
     "tailwindcss": "^3.0.23",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.3"
   },
   "browserslist": {
     "production": [

src/Root.tsx

@@ -143,7 +143,7 @@ export const Root: FC = () => {
 
   return (
     <div className="flex h-screen w-full flex-col overflow-hidden">
-      <Navbar>
+      <Navbar fluid>
         <div className="flex items-center">
           <HiMenuAlt1
             className="mr-6 h-6 w-6 cursor-pointer text-gray-600 dark:text-gray-400"

src/components/Alert.tsx

@@ -1,15 +1,15 @@
-import { ComponentProps, FC, ReactNode } from 'react';
+import { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
 import classNames from 'classnames';
 import { HiX } from 'react-icons/hi';
 
-export type AlertProps = {
+export type AlertProps = PropsWithChildren<{
   color?: 'blue' | 'red' | 'green' | 'yellow' | 'gray';
   Icon?: FC<ComponentProps<'svg'>>;
   rounded?: boolean;
   withBorderAccent?: boolean;
   additionalContent?: ReactNode;
   onDismiss?: () => void;
-};
+}>;
 
 const colorClasses: Record<AlertProps['color'] & string, string> = {
   blue: 'text-blue-700 bg-blue-100 border-blue-500 dark:bg-blue-200 dark:text-blue-800',

src/components/Badge.tsx

@@ -1,12 +1,12 @@
-import { ComponentProps, FC } from 'react';
+import { ComponentProps, FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
-export type BadgeProps = {
+export type BadgeProps = PropsWithChildren<{
   color?: 'blue' | 'red' | 'green' | 'yellow' | 'gray' | 'indigo' | 'purple' | 'pink';
   size?: 'xs' | 'sm';
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
-};
+}>;
 
 const colorClasses: Record<BadgeProps['color'] & string, string> = {
   blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800 group-hover:bg-blue-200 dark:group-hover:bg-blue-300',

src/components/ButtonGroup.tsx

@@ -1,11 +1,11 @@
-import { Children, cloneElement, FC, ReactElement, useMemo } from 'react';
+import { Children, cloneElement, FC, PropsWithChildren, ReactElement, useMemo } from 'react';
 
 import { ButtonProps } from './Button';
 
-export type ButtonGroupProps = {
+export type ButtonGroupProps = PropsWithChildren<{
   pill?: boolean;
   outline?: boolean;
-};
+}>;
 
 export const ButtonGroup: FC<ButtonGroupProps> = ({ children, pill, outline }) => {
   const items = useMemo(

src/components/Card.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
-export type CardProps = {
+export type CardProps = PropsWithChildren<{
   className?: string;
   horizontal?: boolean;
   imgSrc?: string;
-};
+}>;
 
 export const Card: FC<CardProps> = ({ children, className, horizontal, imgSrc }) => {
   return (

src/components/Carousel.tsx

@@ -3,6 +3,7 @@ import {
   cloneElement,
   ComponentProps,
   FC,
+  PropsWithChildren,
   ReactElement,
   ReactNode,
   useCallback,
@@ -13,13 +14,13 @@ import {
 import classNames from 'classnames';
 import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi';
 
-export type CarouselProps = {
+export type CarouselProps = PropsWithChildren<{
   slide?: boolean;
   slideInterval?: number;
   indicators?: boolean;
   leftControl?: ReactNode;
   rightControl?: ReactNode;
-};
+}>;
 
 export const Carousel: FC<CarouselProps> = ({
   children,

src/components/Tooltip.tsx

@@ -1,16 +1,16 @@
 import { createPopper, Instance, Placement } from '@popperjs/core';
-import { FC, ReactNode, useEffect, useRef, useState } from 'react';
+import { FC, PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 
-export type TooltipProps = {
+export type TooltipProps = PropsWithChildren<{
   className?: string;
   content: ReactNode;
   placement?: Placement;
   trigger?: 'hover' | 'click';
   style?: 'dark' | 'light' | 'auto';
   animation?: false | `duration-${number}`;
   arrow?: boolean;
-};
+}>;
 
 export const Tooltip: FC<TooltipProps> = ({
   children,

src/components/accordion/Accordion.tsx

@@ -1,12 +1,12 @@
-import { Children, cloneElement, FC, ReactElement, useMemo } from 'react';
+import { Children, cloneElement, FC, PropsWithChildren, ReactElement, useMemo } from 'react';
 import { AccordionPanel, AccordionPanelProps } from './AccordionPanel';
 import { AccordionTitle } from './AccordionTitle';
 import { AccordionContent } from './AccordionContent';
 import classNames from 'classnames';
 
-export type AccordionProps = {
+export type AccordionProps = PropsWithChildren<{
   flush?: boolean;
-};
+}>;
 
 const AccordionComponent: FC<AccordionProps> = ({ children, flush }) => {
   const panels = useMemo(

src/components/accordion/AccordionPanel.tsx

@@ -1,12 +1,12 @@
-import { Children, cloneElement, ComponentProps, FC, ReactElement, useMemo, useState } from 'react';
+import { Children, cloneElement, ComponentProps, FC, PropsWithChildren, ReactElement, useMemo, useState } from 'react';
 import classNames from 'classnames';
 
 import { AccordionPanelContext } from './AccordionPanelContext';
 
-export type AccordionPanelProps = {
+export type AccordionPanelProps = PropsWithChildren<{
   open?: boolean;
   flush?: boolean;
-};
+}>;
 
 export const AccordionPanel: FC<AccordionPanelProps> = ({ children, open, flush }) => {
   const [isOpen, setIsOpen] = useState(open);

src/components/dropdown/DropdownHeader.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { DropdownDivider } from './DropdownDivider';
 
-export const DropdownHeader: FC = ({ children }) => (
+export const DropdownHeader: FC<PropsWithChildren<any>> = ({ children }) => (
   <>
     <div className="block py-2 px-4 text-sm text-gray-700 dark:text-gray-200">{children}</div>
     <DropdownDivider />

src/components/dropdown/DropdownItem.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 
-export type DropdownItemProps = {
+export type DropdownItemProps = PropsWithChildren<{
   onClick?: () => void;
-};
+}>;
 
 export const DropdownItem: FC<DropdownItemProps> = ({ children, onClick }) => (
   <li

src/components/list-group/ListGroup.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
 import { ListGroupItem } from './ListGroupItem';
 
-export type ListGroupProps = {
+export type ListGroupProps = PropsWithChildren<{
   className?: string;
-};
+}>;
 
 const ListGroupComponent: FC<ListGroupProps> = ({ children, className }) => (
   <div

src/components/list-group/ListGroupItem.tsx

@@ -1,14 +1,14 @@
 import { ComponentProps, FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
-export type ListGroupItemProps = {
+export type ListGroupItemProps = PropsWithChildren<{
   className?: string;
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
   active?: boolean;
   onClick?: () => void;
   disabled?: boolean;
-};
+}>;
 
 export const ListGroupItem: FC<ListGroupItemProps> = ({ children, className, href, onClick, active, icon: Icon }) => {
   const Wrapper = ({ children, className }: PropsWithChildren<{ className?: string }>) =>

src/components/modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
 import { ModalHeader } from './ModalHeader';
@@ -9,13 +9,13 @@ import { ModalContext } from './ModalContext';
 type Size = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
 type Placement = `${'top' | 'bottom'}-${'left' | 'center' | 'right'}` | `center${'' | '-left' | '-right'}`;
 
-export type ModalProps = {
+export type ModalProps = PropsWithChildren<{
   show?: boolean;
   popup?: boolean;
   size?: Size;
   placement?: Placement;
   onClose?: () => void;
-};
+}>;
 
 const sizeClasses: Record<Size, string> = {
   sm: 'max-w-sm',

src/components/modal/ModalBody.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
 import { useModalContext } from './ModalContext';
 
-export type ModalBodyProps = {
+export type ModalBodyProps = PropsWithChildren<{
   className?: string;
-};
+}>;
 
 export const ModalBody: FC<ModalBodyProps> = ({ children, className }) => {
   const { popup } = useModalContext();

src/components/modal/ModalFooter.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
 import { useModalContext } from './ModalContext';
 
-export type ModalFooterProps = {
+export type ModalFooterProps = PropsWithChildren<{
   className?: string;
-};
+}>;
 
 export const ModalFooter: FC<ModalFooterProps> = ({ children, className }) => {
   const { popup } = useModalContext();

src/components/modal/ModalHeader.tsx

@@ -1,10 +1,10 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import { HiOutlineX } from 'react-icons/hi';
 
 import { useModalContext } from './ModalContext';
 
-export const ModalHeader: FC = ({ children }) => {
+export const ModalHeader: FC<PropsWithChildren<any>> = ({ children }) => {
   const { popup, onClose } = useModalContext();
 
   return (

src/components/navbar/Navbar.tsx

@@ -1,19 +1,19 @@
-import { FC, useState } from 'react';
+import { FC, PropsWithChildren, useState } from 'react';
 import classNames from 'classnames';
 import { NavbarBrand } from './NavbarBrand';
 import { NavbarCollapse } from './NavbarCollapse';
 import { NavbarContext } from './NavbarContext';
 import { NavbarLink } from './NavbarLink';
 import { NavbarToggle } from './NavbarToggle';
 
-export type NavbarCompnentProps = {
+export type NavbarComponentProps = PropsWithChildren<{
   menuOpen?: boolean;
   fluid?: boolean;
   rounded?: boolean;
   border?: boolean;
-};
+}>;
 
-const NavbarComponent: FC<NavbarCompnentProps> = ({ children, menuOpen, fluid, rounded, border }) => {
+const NavbarComponent: FC<NavbarComponentProps> = ({ children, menuOpen, fluid, rounded, border }) => {
   const [isOpen, setIsOpen] = useState(menuOpen);
 
   return (

src/components/navbar/NavbarCollapse.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 import { useNavbarContext } from './NavbarContext';
 
-export const NavbarCollapse: FC = ({ children }) => {
+export const NavbarCollapse: FC<PropsWithChildren<any>> = ({ children }) => {
   const { isOpen } = useNavbarContext();
   return (
     <div className={classNames('w-full md:block md:w-auto', { hidden: !isOpen })}>

src/components/navbar/NavbarLink.tsx

@@ -1,11 +1,11 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import classNames from 'classnames';
 
-export type NavbarLinkProps = {
+export type NavbarLinkProps = PropsWithChildren<{
   active?: boolean;
   disabled?: boolean;
   href?: string;
-};
+}>;
 
 export const NavbarLink: FC<NavbarLinkProps> = ({ active, disabled, href, children }) => {
   return (

src/pages/DemoPage.tsx

@@ -20,14 +20,16 @@ export type DemoPageProps = {
 };
 
 export const DemoPage: FC<DemoPageProps> = ({ examples }) => {
+  const SyntaxHighlighterFix = SyntaxHighlighter as any;
+
   return (
     <div className="mx-auto flex max-w-4xl flex-col gap-8 dark:text-white">
       {examples.map(({ title, code, codeClassName, codeStringifierOptions }, index) => (
         <div key={index} className="flex flex-col gap-2">
           <span className="text-2xl font-bold">{title}</span>
           <Card className={codeClassName}>
             {code}
-            <SyntaxHighlighter language="tsx" style={dracula}>
+            <SyntaxHighlighterFix language="tsx" style={dracula}>
               {reactElementToJSXString(code, {
                 showFunctions: true,
                 functionValue: (fn) => fn.name,
@@ -36,7 +38,7 @@ export const DemoPage: FC<DemoPageProps> = ({ examples }) => {
                 useFragmentShortSyntax: false,
                 ...codeStringifierOptions,
               })}
-            </SyntaxHighlighter>
+            </SyntaxHighlighterFix>
           </Card>
         </div>
       ))}