Upgrade proposition for v0.3 : enable classNames on components. (th…

…emesberg#401)

* ✨ upgrade proposition v0.3 : enable classNames for components

* 🚨 fix full size regression on button

* 🔨 speed up build and remove risks of circular deps by updating imports

* 🔨 add @vitest/coverage-c8 deps

* 🔨 change requests responses + fix CI storybook build issue

* 🔨 change requests responses: remove deprecated file

package.json

@@ -50,9 +50,9 @@
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
     "@floating-ui/react-dom-interactions": "^0.9.1",
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "commitizen": "^4.2.5",
-    "react-icons": "^4.4.0",
+    "react-icons": "^4.6.0",
     "react-indiana-drag-scroll": "^2.2.0"
   },
   "peerDependencies": {
@@ -88,13 +88,14 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.2",
-    "@types/node": "^18.6.5",
-    "@types/react": "^18.0.17",
+    "@types/node": "^18.11.3",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/react-syntax-highlighter": "^15.5.4",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "@vitejs/plugin-react": "^2.0.0",
+    "@vitest/coverage-c8": "^0.24.3",
     "@vitest/ui": "^0.21.0",
     "autoprefixer": "^10.4.8",
     "axe-core": "^4.4.3",
@@ -109,11 +110,11 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.4",
     "eslint-plugin-tailwindcss": "^3.6.0",
-    "flowbite": "^1.5.1",
+    "flowbite": "^1.5.3",
     "husky": "^8.0.1",
-    "jsdom": "^20.0.0",
+    "jsdom": "^20.0.1",
     "lint-staged": "^13.0.3",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.18",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.0.3",
     "react": "^18.2.0",
@@ -127,11 +128,11 @@
     "resize-observer-polyfill": "^1.5.1",
     "standard-version": "^9.5.0",
     "start-server-and-test": "^1.14.0",
-    "storybook-dark-mode": "^1.1.0",
-    "tailwindcss": "^3.1.8",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vitest": "^0.21.0",
+    "storybook-dark-mode": "^1.1.2",
+    "tailwindcss": "^3.2.1",
+    "typescript": "^4.8.0",
+    "vite": "^3.1.8",
+    "vitest": "^0.24.3",
     "webpack": "^5.74.0"
   },
   "browserslist": {

src/lib/components/Accordion/Accordion.spec.tsx

@@ -3,9 +3,9 @@ import userEvent from '@testing-library/user-event';
 import { FC } from 'react';
 import { HiOutlineArrowCircleDown } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
-import type { AccordionProps } from '.';
-import { Accordion } from '.';
 import { Flowbite } from '../Flowbite';
+import type { AccordionProps } from './Accordion';
+import { Accordion } from './Accordion';
 
 describe('Components / Accordion', () => {
   describe('A11y', () => {

src/lib/components/Accordion/Accordion.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import type { ComponentProps, FC } from 'react';
 import { HiChevronDown, HiOutlineArrowCircleDown } from 'react-icons/hi';
-import type { AccordionProps } from '.';
-import { Accordion } from '.';
+import type { AccordionProps } from './Accordion';
+import { Accordion } from './Accordion';
 
 export default {
   title: 'Components/Accordion',

src/lib/components/Accordion/index.tsx → src/lib/components/Accordion/Accordion.tsx

@@ -9,7 +9,7 @@ import type { AccordionPanelProps } from './AccordionPanel';
 import { AccordionPanel } from './AccordionPanel';
 import { AccordionTitle } from './AccordionTitle';
 
-export interface AccordionProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'className'>> {
+export interface AccordionProps extends PropsWithChildren<ComponentProps<'div'>> {
   alwaysOpen?: boolean;
   arrowIcon?: FC<ComponentProps<'svg'>>;
   children: ReactElement<AccordionPanelProps> | ReactElement<AccordionPanelProps>[];
@@ -21,6 +21,7 @@ const AccordionComponent: FC<AccordionProps> = ({
   arrowIcon = HiChevronDown,
   children,
   flush = false,
+  className,
   ...props
 }): JSX.Element => {
   const theirProps = excludeClassName(props);
@@ -37,7 +38,7 @@ const AccordionComponent: FC<AccordionProps> = ({
 
   return (
     <div
-      className={classNames(theme.base, theme.flush[flush ? 'on' : 'off'])}
+      className={classNames(theme.base, theme.flush[flush ? 'on' : 'off'], className)}
       data-testid="flowbite-accordion"
       {...theirProps}
     >

src/lib/components/Accordion/AccordionPanel.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from 'react';
 import { useState } from 'react';
-import type { AccordionProps } from '.';
+import type { AccordionProps } from './Accordion';
 import { AccordionPanelContext } from './AccordionPanelContext';
 
 export interface AccordionPanelProps extends PropsWithChildren<AccordionProps> {

src/lib/components/Accordion/index.ts

@@ -0,0 +1 @@
+export * from './Accordion';

src/lib/components/Alert/Alert.spec.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { FC, useState } from 'react';
 import { HiEye, HiInformationCircle } from 'react-icons/hi';
 import { describe, expect, it, vi } from 'vitest';
-import { Alert } from '.';
+import { Alert } from './Alert';
 
 describe.concurrent('Components / Alert', () => {
   describe.concurrent('A11y', () => {

src/lib/components/Alert/Alert.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import { HiEye, HiInformationCircle } from 'react-icons/hi';
-import type { AlertProps } from '.';
-import { Alert } from '.';
+import type { AlertProps } from './Alert';
+import { Alert } from './Alert';
 
 export default {
   title: 'Components/Alert',

src/lib/components/Alert/index.tsx → src/lib/components/Alert/Alert.tsx

@@ -25,6 +25,7 @@ export const Alert: FC<AlertProps> = ({
   onDismiss,
   rounded = true,
   withBorderAccent,
+  className,
 }) => {
   const theme = useTheme().theme.alert;
 
@@ -35,10 +36,11 @@ export const Alert: FC<AlertProps> = ({
         theme.color[color],
         rounded && theme.rounded,
         withBorderAccent && theme.borderAccent,
+        className,
       )}
       role="alert"
     >
-      <div className="flex items-center">
+      <div className={theme.wrapper}>
         {Icon && <Icon className={theme.icon} />}
         <div>{children}</div>
         {typeof onDismiss === 'function' && (
@@ -48,7 +50,7 @@ export const Alert: FC<AlertProps> = ({
             onClick={onDismiss}
             type="button"
           >
-            <HiX aria-hidden className="h-5 w-5" />
+            <HiX aria-hidden className={theme.closeButton.icon} />
           </button>
         )}
       </div>

src/lib/components/Alert/index.ts

@@ -0,0 +1 @@
+export * from './Alert';

src/lib/components/Avatar/Avatar.spec.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { Avatar } from '.';
 import { Flowbite } from '../Flowbite';
 import type { CustomFlowbiteTheme } from '../Flowbite/FlowbiteTheme';
+import { Avatar } from './Avatar';
 
 describe('Components / Avatar', () => {
   describe('Theme', () => {

src/lib/components/Avatar/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
-import type { AvatarProps } from '.';
-import { Avatar } from '.';
+import type { AvatarProps } from './Avatar';
+import { Avatar } from './Avatar';
 
 export default {
   title: 'Components/Avatar',

src/lib/components/Avatar/index.tsx → src/lib/components/Avatar/Avatar.tsx

@@ -1,12 +1,11 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import { excludeClassName } from '../../helpers/exclude';
 import type { FlowbitePositions, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 import AvatarGroup from './AvatarGroup';
 import AvatarGroupCounter from './AvatarGroupCounter';
 
-export interface AvatarProps extends PropsWithChildren<Omit<ComponentProps<'div'>, 'className'>> {
+export interface AvatarProps extends PropsWithChildren<ComponentProps<'div'>> {
   alt?: string;
   bordered?: boolean;
   img?: string;
@@ -33,24 +32,25 @@ const AvatarComponent: FC<AvatarProps> = ({
   status,
   statusPosition = 'top-left',
   placeholderInitials = '',
+  className,
   ...props
 }) => {
-  const theirProps = excludeClassName(props);
   const theme = useTheme().theme.avatar;
+  const imgClassName = classNames(
+    bordered && theme.bordered,
+    rounded && theme.rounded,
+    stacked && theme.stacked,
+    theme.img.on,
+    theme.size[size],
+  );
 
   return (
-    <div className={theme.base} data-testid="flowbite-avatar" {...theirProps}>
+    <div className={classNames(theme.base, className)} data-testid="flowbite-avatar" {...props}>
       <div className="relative">
         {img ? (
           <img
             alt={alt}
-            className={classNames(
-              bordered && theme.bordered,
-              rounded && theme.rounded,
-              stacked && theme.stacked,
-              theme.img.on,
-              theme.size[size],
-            )}
+            className={classNames(imgClassName, theme.img.on)}
             data-testid="flowbite-avatar-img"
             src={img}
           />
@@ -69,18 +69,9 @@ const AvatarComponent: FC<AvatarProps> = ({
             </span>
           </div>
         ) : (
-          <div
-            className={classNames(
-              bordered && theme.bordered,
-              rounded && theme.rounded,
-              stacked && theme.stacked,
-              theme.img.off,
-              theme.size[size],
-            )}
-            data-testid="flowbite-avatar-img"
-          >
+          <div className={classNames(imgClassName, theme.img.off)} data-testid="flowbite-avatar-img">
             <svg
-              className="absolute -bottom-1 h-auto w-auto text-gray-400"
+              className={theme.img.placeholder}
               fill="currentColor"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"

src/lib/components/Avatar/AvatarGroup.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
-import { Avatar } from '.';
+import { Avatar } from './Avatar';
 import type { AvatarGroupProps } from './AvatarGroup';
 
 export default {

src/lib/components/Avatar/AvatarGroup.tsx

@@ -1,13 +1,14 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import classNames from 'classnames';
+import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
+import { useTheme } from '../Flowbite';
 
-export type AvatarGroupProps = PropsWithChildren<{
-  children: ReactNode;
-}>;
+export type AvatarGroupProps = PropsWithChildren<ComponentProps<'div'>>;
 
-const AvatarGroup: React.FC<AvatarGroupProps> = ({ children }) => {
+const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, className }) => {
+  const theme = useTheme().theme.avatarGroup;
   return (
-    <div data-testid="avatar-group-element" className="mb-5 flex -space-x-4">
+    <div data-testid="avatar-group-element" className={classNames(theme.base, className)}>
       {children}
     </div>
   );

src/lib/components/Avatar/AvatarGroupCounter.tsx

@@ -1,17 +1,16 @@
-import type { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import type { ComponentProps, PropsWithChildren } from 'react';
 import React from 'react';
+import { useTheme } from '../Flowbite';
 
-export type AvatarGroupdCounterProps = PropsWithChildren<{
+export interface AvatarGroupdCounterProps extends PropsWithChildren<ComponentProps<'a'>> {
   total?: number;
-  href: string;
-}>;
+}
 
-const AvatarGroupCounter: React.FC<AvatarGroupdCounterProps> = ({ total, href }) => {
+const AvatarGroupCounter: React.FC<AvatarGroupdCounterProps> = ({ total, href, className }) => {
+  const theme = useTheme().theme.avatarGroupCounter;
   return (
-    <a
-      className="relative flex h-10 w-10 items-center justify-center rounded-full bg-gray-700 text-xs font-medium text-white ring-2 ring-gray-300 hover:bg-gray-600  dark:ring-gray-500 "
-      href={href}
-    >
+    <a className={classNames(theme.base, className)} href={href}>
       +{total}
     </a>
   );

src/lib/components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

src/lib/components/Badge/Badge.spec.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { HiCheck } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
-import { Badge } from '.';
 import { Flowbite } from '../Flowbite';
+import { Badge } from './Badge';
 
 describe('Components / Badge', () => {
   describe('Rendering', () => {

src/lib/components/Badge/Badge.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import { HiCheck } from 'react-icons/hi';
-import type { BadgeProps } from '.';
-import { Badge } from '.';
+import type { BadgeProps } from './Badge';
+import { Badge } from './Badge';
 
 export default {
   title: 'Components/Badge',

src/lib/components/Badge/index.tsx → src/lib/components/Badge/Badge.tsx

@@ -1,10 +1,9 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
-import { excludeClassName } from '../../helpers/exclude';
 import type { FlowbiteColors, FlowbiteSizes } from '../Flowbite/FlowbiteTheme';
 import { useTheme } from '../Flowbite/ThemeContext';
 
-export interface BadgeProps extends PropsWithChildren<Omit<ComponentProps<'span'>, 'className' | 'color'>> {
+export interface BadgeProps extends PropsWithChildren<Omit<ComponentProps<'span'>, 'color'>> {
   color?: keyof BadgeColors;
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
@@ -26,17 +25,22 @@ export const Badge: FC<BadgeProps> = ({
   href,
   icon: Icon,
   size = 'xs',
+  className,
   ...props
 }): JSX.Element => {
-  const theirProps = excludeClassName(props);
-
   const theme = useTheme().theme.badge;
 
   const Content = (): JSX.Element => (
     <span
-      className={classNames(theme.base, theme.color[color], theme.icon[Icon ? 'on' : 'off'], theme.size[size])}
+      className={classNames(
+        theme.base,
+        theme.color[color],
+        theme.icon[Icon ? 'on' : 'off'],
+        theme.size[size],
+        className,
+      )}
       data-testid="flowbite-badge"
-      {...theirProps}
+      {...props}
     >
       {Icon && <Icon aria-hidden className={theme.icon.size[size]} data-testid="flowbite-badge-icon" />}
       {children && <span>{children}</span>}

src/lib/components/Badge/index.ts

@@ -0,0 +1 @@
+export * from './Badge';

src/lib/components/Breadcrumb/Breadcrumb.spec.tsx

@@ -2,8 +2,8 @@ import { render, screen } from '@testing-library/react';
 import { FC } from 'react';
 import { HiHome } from 'react-icons/hi';
 import { describe, expect, it } from 'vitest';
-import { Breadcrumb } from '.';
 import { Flowbite } from '../Flowbite';
+import { Breadcrumb } from './Breadcrumb';
 
 describe('Components / Breadcrumb', () => {
   describe('A11y', () => {