Design React Kit - Next version based on Bootstrap Italia 2

.storybook/main.js

@@ -1,28 +1,27 @@
 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
-    // allow react-select types to be imported for docgen
-    // allow also explicit types from other modules within the repo
+    reactDocgen: 'react-docgen-typescript',
     reactDocgenTypescriptOptions: {
-      shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => {
-        if(prop.parent){
-          return /src/.test(prop.parent.fileName) || (/node_modules/.test(prop.parent.fileName) && /react-select/.test(prop.parent.fileName));
-        }
-        return true;
-      }
-    },
-    reactDocgen: "react-docgen-typescript",
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
+    }
   },
   webpackFinal: async (config, { configType }) => {
     const assetRule = config.module.rules.find(({ test }) => test && test.test(".svg"));
@@ -44,4 +43,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

@@ -12,7 +12,7 @@ const order = {
   'componenti': 1000,
 };
 
-const prioritySections = ['welcome-page', 'organizzare', 'menu', 'componenti', 'form', 'utilities', 'domande-frequenti-page', 'changelog-page'];
+const prioritySections = ['welcome-page', 'organizzare', 'menu', 'componenti', 'form', 'utilities', 'domande-frequenti-page', 'changelog-page', 'migrazione-da-v1-page'];
 const priorityPages = ["introduzione"];
 
 const customStyle = {
@@ -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

@@ -177,7 +177,7 @@ export default ({ townName, townTagLine }) => (
               </h4>
               <Form action='#' className='form-newsletter' method='post'>
                 <Label
-                  className='text-white font-weight-semibold active'
+                  className='text-white fw-semibold active'
                   htmlFor='input-newsletter'
                   style={{ transition: 'none 0s ease 0s' }}
                 >
@@ -201,7 +201,7 @@ export default ({ townName, townTagLine }) => (
                   Seguici su
                 </a>
               </h4>
-              <ul className='list-inline text-left social'>
+              <ul className='list-inline text-start social'>
                 <li className='list-inline-item'>
                   <a className='p-2 text-white' href='#' target='_blank'>
                     <Icon
@@ -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>
                   );
@@ -201,7 +201,7 @@ export class NavHeader extends React.Component<
                   return (
                     <NavItem key={label}>
                       <NavLink href='#'>
-                        <span className={`${bold ? 'font-weight-bold' : ''}`}>
+                        <span className={`${bold ? 'fw-bold' : ''}`}>
                           {label}
                         </span>
                       </NavLink>

example/homepage.tsx

@@ -90,7 +90,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                         <Icon icon='it-pa' />
                         Giunta e consiglio
                       </CardCategory>
-                      <CardTitle className='font-weight-semibold'>
+                      <CardTitle className='fw-semibold'>
                         Mario Rossi
                       </CardTitle>
                       <CardText className='card-text'>
@@ -105,7 +105,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                     </div>
                   </div>
                   <CardReadMore
-                    className='pl-4'
+                    className='ps-4'
                     iconName='it-arrow-right'
                     text="Tutta l'amministrazione"
                     href='/design-comuni-prototipi/esempi/bootstrap-italia/template-amministrazione.html'
@@ -117,7 +117,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                       <Icon icon='it-pa' />
                       Pagamenti
                     </CardCategory>
-                    <CardTitle className='font-weight-semibold'>
+                    <CardTitle className='fw-semibold'>
                       TARI - Tassa dei rifiuti
                     </CardTitle>
                     <CardText>
@@ -138,7 +138,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                       <Icon icon='it-pa' />
                       Bandi
                     </CardCategory>
-                    <CardTitle className='font-weight-semibold'>
+                    <CardTitle className='fw-semibold'>
                       Come partecipare ad un bando
                     </CardTitle>
                     <CardText>
@@ -522,7 +522,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                         noWrapper
                         className='card-bg-primary no-after mt-0'
                       >
-                        <div className='avatar size-lg mr-3'>
+                        <div className='avatar size-lg me-3'>
                           <img
                             src='https://picsum.photos/200/200'
                             alt='Immagine'
@@ -690,7 +690,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
             <div className='py-4'>
               <div className='card-wrapper card-teaser-wrapper card-teaser-wrapper-equal card-teaser-block-3'>
                 <Card teaser noWrapper className='card-bg-primary rounded'>
-                  <div className='avatar size-lg mr-3'>
+                  <div className='avatar size-lg me-3'>
                     <img src='https://picsum.photos/200/200' alt='Immagine' />
                   </div>
                   <CardBody>
@@ -701,7 +701,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                   </CardBody>
                 </Card>
                 <Card teaser noWrapper className='card-bg-warning rounded'>
-                  <div className='avatar size-lg mr-3'>
+                  <div className='avatar size-lg me-3'>
                     <img src='https://picsum.photos/200/200' alt='Immagine' />
                   </div>
                   <CardBody>
@@ -713,7 +713,7 @@ export default ({ theme, townName, townTagLine, logo }) => {
                   </CardBody>
                 </Card>
                 <Card teaser noWrapper className='card-bg-dark rounded'>
-                  <div className='avatar size-lg mr-3'>
+                  <div className='avatar size-lg me-3'>
                     <img src='https://picsum.photos/200/200' alt='Immagine' />
                   </div>
                   <CardBody tag='h5'>

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.2.0",
+    "react": ">=17.0.2"
   },
   "browserslist": [
     "extends browserslist-config-design-italia"
@@ -81,61 +81,70 @@
     "./{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",
+    "@storybook/react-docgen-typescript-plugin": "^1.0.1",
     "@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",
     "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": {
+    "bootstrap-italia": "2.2.0",
     "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 +166,10 @@
       "node",
       "mdx"
     ]
+  },
+  "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
+    "@storybook/react-docgen-typescript-plugin": "npm:[email protected]"
   }
-}
+}

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> {