Design React Kit - Next version based on Bootstrap Italia 2

.storybook/main.js

@@ -1,13 +1,17 @@
 const CircularDependencyPlugin = require('circular-dependency-plugin')
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
   addons: [
     '@storybook/addon-postcss',
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y'
   ],
+  reactOptions: { legacyRootApi: true },
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
     check: true, // type-check stories during Storybook build
@@ -44,4 +48,8 @@ module.exports = {
 
     return config;
   },
+  staticDirs: [
+    '../static',
+    { from: '../assets', to: '/' },
+  ],
 };

.storybook/manager.js

@@ -3,4 +3,4 @@ import {theme} from './theme';
 
 addons.setConfig({
   theme
-})
+})

.storybook/preview.tsx

@@ -38,7 +38,7 @@ export const parameters = {
 
       const aFullStoryName = `${aSubSections.join('-')}-${aStory}`
       const bFullStoryName = `${bSubSections.join('-')}-${bStory}`
-      // Sort by Section 
+      // Sort by Section
       const groupScore = (order[aSection as MainSection] - order[bSection as MainSection]);
 
 
@@ -78,4 +78,4 @@ export const parameters = {
 
 export const decorators = [
   (Story: Function) => <div style={customStyle}><FontLoader /><Story/></div>
-]
+]

example/footer.tsx

@@ -210,7 +210,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Designers Italia</span>
+                    <span className='visually-hidden'>Designers Italia</span>
                   </a>
                 </li>
                 <li className='list-inline-item'>
@@ -221,7 +221,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Twitter</span>
+                    <span className='visually-hidden'>Twitter</span>
                   </a>
                 </li>
                 <li className='list-inline-item'>
@@ -232,7 +232,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Medium</span>
+                    <span className='visually-hidden'>Medium</span>
                   </a>
                 </li>
                 <li className='list-inline-item'>
@@ -243,7 +243,7 @@ export default ({ townName, townTagLine }) => (
                       size='sm'
                       className='align-top'
                     />
-                    <span className='sr-only'>Behance</span>
+                    <span className='visually-hidden'>Behance</span>
                   </a>
                 </li>
               </ul>
@@ -254,7 +254,7 @@ export default ({ townName, townTagLine }) => (
     </div>
     <div className='it-footer-small-prints clearfix'>
       <Container>
-        <h3 className='sr-only'>Sezione Link Utili</h3>
+        <h3 className='visually-hidden'>Sezione Link Utili</h3>
         <ul className='it-footer-small-prints-list list-inline mb-0 d-flex flex-column flex-md-row'>
           <li className='list-inline-item'>
             <a href='#' title='Note Legali'>

example/header.tsx

@@ -186,7 +186,7 @@ export class NavHeader extends React.Component<
                     <NavItem active={isActive} key={label}>
                       <NavLink href='#' active={isActive}>
                         <span>{label}</span>
-                        {isActive && <span className='sr-only'>current</span>}
+                        {isActive && <span className='visually-hidden'>current</span>}
                       </NavLink>
                     </NavItem>
                   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-react-kit",
-  "description": "Componenti React per Bootstrap 4",
+  "description": "Componenti React per Bootstrap 5",
   "keywords": [
     "react",
     "bootstrap",
@@ -39,7 +39,7 @@
     "url": "git+https://github.com/italia/design-react-kit.git"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "scripts": {
     "start": "npm run storybook:serve",
@@ -54,15 +54,15 @@
     "size": "size-limit",
     "analyze": "size-limit --why",
     "prestorybook": "npm run svg:import",
-    "storybook:serve": "start-storybook -p 9001 -c .storybook -s ./static",
+    "storybook:serve": "start-storybook -p 9001 -c .storybook",
     "storybook:build": "npm run storybook:build:base --docs",
-    "storybook:build:base": "build-storybook -c .storybook -s ./static",
+    "storybook:build:base": "build-storybook -c .storybook",
     "storybook:deploy": "npx gh-pages -d storybook-static -m 'Update GitHub Pages [ci skip]'",
     "chromatic": "npx chromatic"
   },
   "peerDependencies": {
-    "bootstrap-italia": "^1.4.3",
-    "react": ">=16.8.0"
+    "bootstrap-italia": "^2.0.3",
+    "react": ">=17.0.2"
   },
   "browserslist": [
     "extends browserslist-config-design-italia"
@@ -81,61 +81,69 @@
     "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint:staged"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.15",
+    "@babel/core": "^7.20.2",
+    "@babel/helper-remap-async-to-generator": "^7.18.9",
     "@rollup/plugin-url": "^6.0.0",
-    "@size-limit/preset-small-lib": "^4.10.2",
+    "@size-limit/preset-small-lib": "^8.0.1",
     "@skypack/package-check": "^0.2.2",
-    "@storybook/addon-a11y": "^6.3.9",
-    "@storybook/addon-essentials": "^6.3.9",
-    "@storybook/addon-links": "^6.3.9",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-storyshots": "^6.3.9",
-    "@storybook/addons": "^6.3.9",
-    "@storybook/react": "^6.3.9",
+    "@storybook/addon-storyshots": "^6.5.10",
+    "@storybook/addons": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/components": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
     "@svgr/cli": "^6.4.0",
     "@svgr/rollup": "^6.4.0",
     "@svgr/webpack": "^6.4.0",
-    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.6",
-    "@types/is-number": "^7.0.1",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/is-number": "^7.0.3",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/react-select": "^4.0.15",
-    "@types/react-transition-group": "^4.4.1",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.2.2",
-    "bootstrap-italia": "^1.4.3",
+    "@types/react-transition-group": "^4.4.5",
+    "autoprefixer": "^9.8.8",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.5",
+    "bootstrap-italia": "^2.0.3",
     "browserslist-config-design-italia": "^1.0.0",
-    "chromatic": "^6.3.4",
+    "chromatic": "^6.8.0",
     "circular-dependency-plugin": "^5.2.2",
     "eslint-plugin-mdx": "^1.13.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "husky": "^7.0.4",
+    "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26",
     "jest-transform-stub": "^2.0.0",
-    "lint-staged": "^12.1.7",
+    "lint-staged": "^13.0.3",
+    "postcss": "^7.0.39",
     "postcss-flexbugs-fixes": "^4.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
-    "size-limit": "^4.10.2",
-    "ts-jest": "^26.4.4",
+    "size-limit": "^8.0.1",
+    "ts-jest": "^26.5.6",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typeface-lora": "^1.1.13",
     "typeface-roboto-mono": "^1.1.13",
-    "typescript": "^4.2.4"
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0"
   },
   "dependencies": {
     "classnames": "^2.3.1",
     "is-number": "^7.0.0",
     "react-select": "^4.3.0",
-    "react-stickup": "^1.12.0",
+    "react-stickup": "^1.12.1",
     "react-toastify": "^7.0.4",
-    "react-transition-group": "^4.4.1",
+    "react-transition-group": "^4.4.5",
     "react-use-navscroll": "0.2.0",
-    "reactstrap": "^8.9.0",
+    "reactstrap": "^9.1.4",
     "webfontloader": "^1.6.28"
   },
   "jest": {
@@ -157,5 +165,9 @@
       "node",
       "mdx"
     ]
+  },
+  "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2"
   }
-}
+}

src/Accordion/AccordionHeader.tsx

@@ -37,7 +37,7 @@ export const AccordionHeader: FC<AccordionHeaderProps> = ({
         className={toggleClasses}
         onClick={onToggle}
         {...attributes}
-      />
+      ></Tag>
       {append}
     </div>
   );

src/Alert/Alert.tsx

@@ -5,7 +5,8 @@ import React, {
   ElementType,
   Ref
 } from 'react';
-import { Alert as InnerAlert, FadeProps, CSSModule } from 'reactstrap';
+import { Alert as InnerAlert, FadeProps } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 
 // Copy over from reactstrap and add new ones
 export interface AlertProps extends HTMLAttributes<HTMLElement> {

src/Badge/Badge.tsx

@@ -6,7 +6,8 @@ import React, {
   ReactChild,
   AnchorHTMLAttributes
 } from 'react';
-import { Badge as BadgeReact, CSSModule } from 'reactstrap';
+import { Badge as BadgeReact } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 
 export type BadgeProps = {
   /** Le varianti di colore definite in Bootstrap Italia */

src/BottomNav/BottomNavItem.tsx

@@ -69,7 +69,7 @@ export const BottomNavItem: FC<BottomNavItemProps> = ({
         <Icon icon={iconName} />
         <span className='bottom-nav-label'>
           {label}
-          {srText ? <span className='sr-only'>{srText}</span> : null}
+          {srText ? <span className='visually-hidden'>{srText}</span> : null}
         </span>
       </Tag>
     </li>

src/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,7 @@
 import React, { ElementType, FC, HTMLAttributes } from 'react';
-import { Breadcrumb as BreadcrumbBase, CSSModule } from 'reactstrap';
+import { Breadcrumb as BreadcrumbBase } from 'reactstrap';
 import classNames from 'classnames';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 
 export interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */

src/Button/Button.tsx

@@ -2,7 +2,7 @@ import React, { FC, ButtonHTMLAttributes, ElementType, Ref } from 'react';
 import classNames from 'classnames';
 
 import { Button as ButtonBase } from 'reactstrap';
-import type { CSSModule } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 
 // reactstrap wrapper
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

src/Card/Card.tsx

@@ -1,6 +1,7 @@
 import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
 import classNames from 'classnames';
-import { Card as CardBase, CSSModule } from 'reactstrap';
+import { Card as CardBase } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 
 export interface CardProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */

src/Card/CardBody.tsx

@@ -1,6 +1,6 @@
 import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
-import { CardBody as InnerCardBody, CSSModule } from 'reactstrap';
-
+import { CardBody as InnerCardBody } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 // Note: this is a wrapper class around a reactstrap component.
 // TODO: remove this class and restore the direct import when
 // https://github.com/storybookjs/storybook/issues/10536 gets resolved

src/Card/CardText.tsx

@@ -1,6 +1,6 @@
 import React, { FC, HTMLAttributes, ElementType } from 'react';
-import { CardText as InnerCardText, CSSModule } from 'reactstrap';
-
+import { CardText as InnerCardText } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 // Note: this is a wrapper class around a reactstrap component.
 // TODO: remove this class and restore the direct import when
 // https://github.com/storybookjs/storybook/issues/10536 gets resolved

src/Collapse/Collapse.tsx

@@ -1,7 +1,8 @@
 import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';
 import classNames from 'classnames';
 
-import { Collapse as CollapseBase, CSSModule } from 'reactstrap';
+import { Collapse as CollapseBase } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 
 // Copy over from reactstrap and add new ones
 export interface CollapseProps extends HTMLAttributes<HTMLElement> {
@@ -72,7 +73,7 @@ export const Collapse: FC<CollapseProps> = ({
         {...attributes}
       >
         <div className='overlay' style={style} onClick={onOverlayClick}></div>
-        <div className='close-div sr-only'>
+        <div className='close-div visually-hidden'>
           <button className='btn close-menu' type='button'>
             <span className='it-close'></span>close
           </button>

src/Header/HeaderBrand.tsx

@@ -1,6 +1,7 @@
 import React, { AnchorHTMLAttributes, ElementType, ReactChild } from 'react';
 import classNames from 'classnames';
-import { CSSModule, NavbarBrand } from 'reactstrap';
+import { NavbarBrand } from 'reactstrap';
+import { CSSModule } from 'reactstrap/types/lib/utils';
 import { CENTER, useHeaderContext } from './HeaderContext';
 import { Icon } from '../Icon/Icon';
 

src/Icon/Icon.tsx

@@ -23,7 +23,7 @@ export function preloadIcons(icons: IconName[]) {
   return Promise.all(icons.map((icon) => loadIcon(icon))).then(
     (preloadedIcons) => {
       preloadedIcons.forEach(({ component }, i) => {
-        iconsCache[icons[i]] = ((() => component) as unknown) as FC<
+        iconsCache[icons[i]] = (() => component) as unknown as FC<
           SVGProps<SVGSVGElement>
         >;
       });
@@ -100,7 +100,7 @@ export const Icon: FC<IconProps> = ({
   useEffect(() => {
     if (isBundledIcon(icon) && !iconsCache[icon]) {
       loadIcon(icon).then(({ component }) => {
-        iconsCache[icon] = ((() => component) as unknown) as FC<
+        iconsCache[icon] = (() => component) as unknown as FC<
           SVGProps<SVGSVGElement> & SVGRProps
         >;
         setCurrentIcon(iconsCache[icon]);