feat: Update TailwindCSS to v3 and React to v18

.storybook/preview.tsx

@@ -1,5 +1,7 @@
+import isPropValid from '@emotion/is-prop-valid';
 import type { Preview } from '@storybook/react';
 import React from 'react';
+import { StyleSheetManager } from 'styled-components';
 import '../index.css';
 
 const preview: Preview = {
@@ -14,9 +16,15 @@ const preview: Preview = {
     },
     decorators: [
         (Story) => (
-            <div className="flex">
-                <Story />
-            </div>
+            <StyleSheetManager
+                shouldForwardProp={(propName, elementToBeRendered) =>
+                    typeof elementToBeRendered === 'string' ? isPropValid(propName) : true
+                }
+            >
+                <div className="flex">
+                    <Story />
+                </div>
+            </StyleSheetManager>
         ),
     ],
 };

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   Update `TailwindCSS` dependencies to v3
+-   Update `React` dependencies to v18
+
 ## [0.2.19] - 2023-10-09
 
 ### Added

package.json

@@ -47,13 +47,13 @@
     "@tiptap/react": "^2.0.3",
     "@tiptap/starter-kit": "^2.0.3",
     "classnames": "^2.3.2",
-    "react": "^17.0.0",
+    "react": ">=18",
     "react-blockies": "^1.4.1",
-    "react-dom": "^17.0.0",
+    "react-dom": ">=18",
     "react-dropzone": "^11.5.1",
-    "styled-components": "^5.0.0",
-    "tailwindcss": "^2.0.0",
-    "tailwindcss-fluid-type": "^1.0.0"
+    "styled-components": ">=6",
+    "tailwindcss": ">=3",
+    "tailwindcss-fluid-type": ">=2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -74,8 +74,9 @@
     "@storybook/react-webpack5": "^7.0.26",
     "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/jest-dom": "^6.1.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
     "@types/react-blockies": "^1.4.1",
     "@types/styled-components": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
@@ -88,8 +89,8 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-tailwindcss": "^2.0.0",
-    "eslint-plugin-testing-library": "^5.11.0",
+    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-testing-library": "^6.0.2",
     "husky": "^8.0.3",
     "jest": "^29.6.0",
     "jest-environment-jsdom": "^29.6.0",

src/components/alerts/alertBanner.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export type AlertBannerProps = {
     /** type and severity of alert */
@@ -28,6 +28,6 @@ type ContainerProps = {
     mode: NonNullable<AlertBannerProps['mode']>;
 };
 
-const Container = styled.div.attrs(({ mode }: ContainerProps) => ({
+const Container = styled.div.attrs<ContainerProps>(({ mode }) => ({
     className: `ft-text-xs py-0.5 px-2 text-center font-bold ${styles[mode]}`,
 }))<ContainerProps>``;

src/components/alerts/alertCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { IconInfo, IconSuccess, IconWarning } from '../icons';
 
@@ -54,15 +54,15 @@ export const AlertCard: React.FC<AlertCardProps> = ({ mode = 'info', title, help
 type ContainerProps = {
     mode: NonNullable<AlertCardProps['mode']>;
 };
-const Container = styled.div.attrs(({ mode }: ContainerProps) => ({
+const Container = styled.div.attrs<ContainerProps>(({ mode }) => ({
     className: `flex gap-1.5 box-border px-2 py-1.5 border-2 rounded-xl ${styles[mode].bgColor} ${styles[mode].borderColor}`,
 }))<ContainerProps>``;
 
 const TextContainer = styled.div.attrs(() => ({
     className: 'flex flex-col gap-0.25 ',
 }))``;
 
-const Title = styled.div.attrs(({ mode }: ContainerProps) => ({
+const Title = styled.div.attrs<ContainerProps>(({ mode }) => ({
     className: `flex flex-col font-bold ft-text-base  ${styles[mode].color}`,
 }))<ContainerProps>``;
 

src/components/alerts/alertChip.tsx

@@ -1,5 +1,5 @@
 import React, { type ReactComponentElement } from 'react';
-import styled, { css } from 'styled-components';
+import { css, styled } from 'styled-components';
 
 import { IconCheckmark, type IconType } from '../icons';
 
@@ -37,8 +37,8 @@ export const AlertChip: React.FC<AlertChipProps> = ({
 
 type ContainerProps = Pick<AlertChipProps, 'isShown'>;
 
-const WrapperAnimationCSS = css`
-  animation: ${({ isShown }: ContainerProps) => (isShown ? 'fadein 0.3s' : 'fadeout 0.3s')};
+const WrapperAnimationCSS = css<ContainerProps>`
+  animation: ${({ isShown }) => (isShown ? 'fadein 0.3s' : 'fadeout 0.3s')};
 
   @-webkit-keyframes fadein {
     from {
@@ -93,7 +93,7 @@ const WrapperAnimationCSS = css`
   }
 `;
 
-const Wrapper = styled.div.attrs(({ isShown }: ContainerProps) => ({
+const Wrapper = styled.div.attrs<ContainerProps>(({ isShown }) => ({
     className: `fixed w-full flex items-center justify-center top-3 ${
         isShown ? 'opacity-100 fixed' : 'opacity-0 none'
     }`,