design-react-kit 4.0.1 → 5.0.0-0

package/dist/types/transitions.d.ts

@@ -0,0 +1,15 @@
+export declare const TransitionTimeouts: {
+    Fade: number;
+    Collapse: number;
+    Modal: number;
+    Carousel: number;
+};
+export declare const TransitionsKeys: string[];
+declare const transitionStatus: {
+    entering: number;
+    entered: number;
+    exiting: number;
+    exited: number;
+};
+export declare type TransitionStates = keyof typeof transitionStatus;
+export {};

package/dist/types/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const noop: () => void;
+export declare const logError: (message: string) => void;
+export declare const flushMessageCache: () => void;
+export declare const notifyDeprecation: (message: string, options?: {
+    once: boolean;
+}) => void;
+export declare function mapToCssModules(className: string | null, cssModules?: Record<string, string>): string;
+declare type UnknownObject = Record<string, unknown>;
+export declare function pick<T extends UnknownObject>(obj: T, keys: keyof T | Array<keyof T>): Partial<T>;
+export declare function omit<T extends UnknownObject>(obj: T, keys: keyof T | Array<keyof T>): Partial<T>;
+export {};

package/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",
@@ -19,13 +19,13 @@
   "bugs": {
     "url": "https://github.com/italia/design-react-kit/issues"
   },
-  "version": "4.0.1",
+  "version": "5.0.0-0",
   "license": "BSD-3",
   "module": "dist/esm/index.js",
   "main": "./src/index.tsx",
   "typings": "dist/types/index.d.ts",
   "exports": {
-    "require": "./dist/index.js",
+    "require": "./dist/cjs/index.js",
     "import": "./dist/esm/index.js",
     "default": "./dist/esm/index.js"
   },
@@ -39,29 +39,34 @@
     "url": "git+https://github.com/italia/design-react-kit.git"
   },
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "scripts": {
     "start": "npm run storybook:serve",
-    "svg:import": "svgr -d src/Icon/assets node_modules/bootstrap-italia/src/svg && echo \"\" >> src/Icon/assets/index.tsx && npx eslint src/Icon/assets/index.tsx --fix",
+    "svg:import": "./scripts/import_svgs.sh",
     "prebuild": "npm run svg:import",
     "build": "tsdx build --format cjs,esm",
-    "test": "tsdx test --passWithNoTests --coverage",
-    "test:ci": "tsdx test --passWithNoTests --coverage --runInBand --ci",
+    "test": "tsdx test ./src ./test --passWithNoTests --coverage",
+    "test:ci": "tsdx test ./src ./test --passWithNoTests --coverage --runInBand --ci",
     "lint": "npx eslint src stories test --ext js,ts,tsx,jsx,mdx",
+    "lint:staged": "npx eslint --ext js,ts,tsx,jsx,mdx",
     "prepare": "tsdx build --format cjs,esm && husky install",
     "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:deploy": "npx gh-pages -d storybook-static -m 'Update GitHub Pages [ci skip]'"
+    "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": {
-    "react": ">=16.8.0",
-    "bootstrap-italia": "1.4.3"
+    "bootstrap-italia": "^2.3.4",
+    "react": ">=17.0.2"
   },
+  "browserslist": [
+    "extends browserslist-config-design-italia"
+  ],
   "size-limit": [
     {
       "path": "dist/cjs/index.js",
@@ -72,68 +77,77 @@
       "limit": "200 KB"
     }
   ],
+  "lint-staged": {
+    "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint:staged"
+  },
   "devDependencies": {
-    "@babel/core": "^7.13.15",
+    "@babel/core": "^7.21.0",
+    "@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",
-    "@svgr/cli": "^5.5.0",
-    "@svgr/rollup": "^5.5.0",
-    "@svgr/webpack": "^5.5.0",
-    "@testing-library/jest-dom": "^5.12.0",
+    "@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.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",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "bootstrap-italia": "^2.3.4",
+    "browserslist-config-design-italia": "^1.0.0",
+    "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": "^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": "^25.3.1",
+    "size-limit": "^8.0.1",
+    "ts-jest": "^26.5.6",
     "tsdx": "^0.14.1",
-    "tslib": "^2.2.0",
+    "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"
   },
-  "browserslist": [
-    "defaults",
-    "ie 11",
-    "not ie_mob 11",
-    "not op_mini all",
-    "edge >= 13",
-    "safari 11"
-  ],
   "jest": {
     "transform": {
       ".(ts|tsx)$": "ts-jest",
@@ -153,5 +167,10 @@
       "node",
       "mdx"
     ]
+  },
+  "resolutions": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2",
+    "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2"
   }
-}
+}

package/src/Accordion/Accordion.tsx

@@ -10,6 +10,7 @@ export interface AccordionProps {
   background?: 'active' | 'hover';
   /** Utilizzare questo attributo per mostrare, mediante un'icona a sinistra, lo stato di apertura */
   iconLeft?: boolean;
+  testId?: string;
 }
 
 export const Accordion: FC<AccordionProps> = ({
@@ -17,14 +18,15 @@ export const Accordion: FC<AccordionProps> = ({
   className,
   background,
   iconLeft = false,
+  testId,
   ...attributes
 }) => {
   const Tag = tag;
-  const classes = classNames('collapse-div', className, {
-    'collapse-background-active': background === 'active',
-    'collapse-background-hover': background === 'hover',
-    'collapse-left-icon': iconLeft
+  const classes = classNames('accordion', className, {
+    'accordion-background-active': background === 'active',
+    'accordion-background-hover': background === 'hover',
+    'accordion-left-icon': iconLeft
   });
 
-  return <Tag {...attributes} className={classes} />;
+  return <Tag {...attributes} className={classes} data-testid={testId} />;
 };

package/src/Accordion/AccordionBody.tsx

@@ -1,39 +1,28 @@
-import React, { Component, ElementType } from 'react';
+import React, { ElementType, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import { Transition } from 'react-transition-group';
 
-import { Util } from 'reactstrap';
+import { pick, omit } from '../utils';
+import { TransitionTimeouts, TransitionsKeys } from '../transitions';
 import type { TransitionProps } from 'react-transition-group/Transition';
-
-const {
-  // @ts-ignore
-  TransitionTimeouts,
-  // @ts-ignore
-  TransitionPropTypeKeys,
-  // @ts-ignore
-  TransitionStatuses,
-  // @ts-ignore
-  pick,
-  // @ts-ignore
-  omit
-} = Util;
+import type { TransitionStates } from '../transitions';
 
 export type AccordionBodyProps = Partial<TransitionProps> & {
   tag?: ElementType;
   className?: string;
+  listClassName?: string;
   active?: boolean;
   onToggle?: () => void;
 };
 
-const transitionStatusToClassHash = {
-  [TransitionStatuses.ENTERING]: 'collapsing',
-  [TransitionStatuses.ENTERED]: 'collapse show',
-  [TransitionStatuses.EXITING]: 'collapsing',
-  [TransitionStatuses.EXITED]: 'collapse'
+// hardcode these entries to avoid leaks
+const transitionStatusToClassHash: Record<TransitionStates, string> = {
+  entering: 'collapsing',
+  entered: 'collapse show',
+  exiting: 'collapsing',
+  exited: 'collapse'
 };
 
-type TransitionStates = keyof typeof transitionStatusToClassHash;
-
 function getTransitionClass(status: TransitionStates) {
   return transitionStatusToClassHash[status] || 'collapse';
 }
@@ -42,86 +31,89 @@ function getHeight(node: HTMLElement) {
   return node.scrollHeight;
 }
 
-export class AccordionBody extends Component<
-  AccordionBodyProps,
-  { height: null | number }
-> {
-  state = {
-    height: null
-  };
-
-  onEntering = (node: HTMLElement, isAppearing: boolean) => {
-    this.setState({ height: getHeight(node) });
-    this.props.onEntering?.(node, isAppearing);
-  };
-
-  onEntered = (node: HTMLElement, isAppearing: boolean) => {
-    this.setState({ height: null });
-    this.props.onEntered?.(node, isAppearing);
-  };
-
-  onExit = (node: HTMLElement) => {
-    this.setState({ height: getHeight(node) });
-    this.props.onExit?.(node);
-  };
-
-  onExiting = (node: HTMLElement) => {
-    // getting this variable triggers a reflow
-    // @ts-expect-error
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const _unused = node.offsetHeight;
-    this.setState({ height: 0 });
-    this.props.onExiting?.(node);
-  };
-
-  onExited = (node: HTMLElement) => {
-    this.setState({ height: null });
-    this.props.onExited?.(node);
-  };
-
-  render() {
-    const {
-      className,
-      tag = 'div',
-      active = false,
-      children,
-      timeout = TransitionTimeouts.Collapse,
-      ...attributes
-    } = this.props;
-    const Tag = tag;
-    const { height } = this.state;
-
-    const transitionProps = pick(attributes, TransitionPropTypeKeys);
-    const childProps = omit(attributes, TransitionPropTypeKeys);
-
-    return (
-      <Transition
-        {...transitionProps}
-        timeout={timeout}
-        in={active}
-        onEntering={this.onEntering}
-        onEntered={this.onEntered}
-        onExit={this.onExit}
-        onExiting={this.onExiting}
-        onExited={this.onExited}
-      >
-        {(status: TransitionStates) => {
-          const transitionClass = getTransitionClass(status);
-          const classes = classNames(className, transitionClass);
-
-          const style = height == null ? null : { height };
-
-          return (
-            <Tag
-              className={classes}
-              style={{ ...childProps.style, ...style }}
-              {...childProps}
-            >
-              <div className='collapse-body'>{children}</div>
-            </Tag>
-          );
-        }}
-      </Transition>
-    );
-  }
-}
+export const AccordionBody = ({
+  className,
+  listClassName,
+  tag = 'div',
+  active = false,
+  children,
+  timeout = TransitionTimeouts.Collapse,
+  ...attributes
+}: AccordionBodyProps) => {
+  const [height, setHeight] = useState<null | number>(null);
+
+  const onEntering = useCallback(
+    (node: HTMLElement, isAppearing: boolean) => {
+      setHeight(getHeight(node));
+      attributes.onEntering?.(node, isAppearing);
+    },
+    [attributes.onEntering]
+  );
+  const onEntered = useCallback(
+    (node: HTMLElement, isAppearing: boolean) => {
+      setHeight(null);
+      attributes.onEntered?.(node, isAppearing);
+    },
+    [attributes.onEntered]
+  );
+  const onExit = useCallback(
+    (node: HTMLElement) => {
+      setHeight(getHeight(node));
+      attributes.onExit?.(node);
+    },
+    [attributes.onExit]
+  );
+  const onExiting = useCallback(
+    (node: HTMLElement) => {
+      // getting this variable triggers a reflow
+      // @ts-expect-error
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const _unused = node.offsetHeight;
+      setHeight(0);
+      attributes.onExiting?.(node);
+    },
+    [attributes.onExiting]
+  );
+  const onExited = useCallback(
+    (node: HTMLElement) => {
+      setHeight(null);
+      attributes.onExited?.(node);
+    },
+    [attributes.onExited]
+  );
+  const Tag = tag;
+
+  const transitionProps = pick(attributes, TransitionsKeys);
+  const childProps = omit(attributes, TransitionsKeys);
+
+  return (
+    <Transition
+      {...transitionProps}
+      timeout={timeout}
+      in={active}
+      onEntering={onEntering}
+      onEntered={onEntered}
+      onExit={onExit}
+      onExiting={onExiting}
+      onExited={onExited}
+    >
+      {(status: TransitionStates) => {
+        const transitionClass = getTransitionClass(status);
+        const classes = classNames(className, transitionClass);
+        const listClasses = classNames(listClassName, 'accordion-body');
+        const style = height == null ? null : { height };
+
+        return (
+          <Tag
+            className={classes}
+            style={{ ...childProps.style, ...style }}
+            {...childProps}
+          >
+            <div className={listClasses}>{children}</div>
+          </Tag>
+        );
+      }}
+    </Transition>
+  );
+};
+// }

package/src/Accordion/AccordionHeader.tsx

@@ -12,6 +12,7 @@ export interface AccordionHeaderProps {
   onToggle?: () => void;
   /** Contenuto aggiuntivo all'interno del bottone dell'AccordionHeader */
   append?: ReactNode;
+  testId?: string;
 }
 
 export const AccordionHeader: FC<AccordionHeaderProps> = ({
@@ -20,22 +21,23 @@ export const AccordionHeader: FC<AccordionHeaderProps> = ({
   active = false,
   append,
   onToggle,
+  testId,
   ...attributes
 }) => {
   const Tag = tag;
-  const toggleClasses = classNames(className, {
+  const toggleClasses = classNames(className, 'accordion-button', {
     collapsed: active
   });
-
   return (
-    <div className='collapse-header'>
+    <div className='accordion-header' data-testid={testId}>
       <Tag
-        data-toggle='collapse'
+        data-bs-toggle='collapse'
         aria-expanded={active ? 'true' : 'false'}
         className={toggleClasses}
         onClick={onToggle}
         {...attributes}
-      />
+        {...(tag === 'button' && { type: 'button' })}
+      ></Tag>
       {append}
     </div>
   );

package/src/Accordion/AccordionItem.tsx

@@ -0,0 +1,20 @@
+import React, { ElementType, FC } from 'react';
+import classNames from 'classnames';
+
+export interface AccordionItemProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente */
+  className?: string;
+}
+
+export const AccordionItem: FC<AccordionItemProps> = ({
+  tag = 'div',
+  className,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames('accordion-item', className);
+
+  return <Tag {...attributes} className={classes} />;
+};

package/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> {
@@ -24,6 +25,7 @@ export interface AlertProps extends HTMLAttributes<HTMLElement> {
   innerRef?: Ref<HTMLElement>;
   isOpen?: boolean;
   toggle?: MouseEventHandler<any>;
+  testId?: string;
 }
 
 const defaultProps = {
@@ -32,8 +34,8 @@ const defaultProps = {
   fade: true
 };
 
-export const Alert: FC<AlertProps> = (props) => {
-  return <InnerAlert {...props} />;
+export const Alert: FC<AlertProps> = ({ testId, ...props }) => {
+  return <InnerAlert data-testid={testId} {...props} />;
 };
 
 Alert.defaultProps = defaultProps;

package/src/Avatar/AvatarContainer.tsx

@@ -6,11 +6,13 @@ export interface AvatarContainerProps extends HTMLAttributes<HTMLElement> {
   tag?: ElementType;
   /** Classi aggiuntive da usare per il componente AvatarContainer */
   className?: string;
+  testId?: string;
 }
 
 export const AvatarContainer: FC<AvatarContainerProps> = ({
   className,
   tag = 'div',
+  testId,
   ...attributes
 }) => {
   const Tag = tag;
@@ -18,5 +20,7 @@ export const AvatarContainer: FC<AvatarContainerProps> = ({
     'd-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap',
     className
   );
-  return <Tag {...attributes} className={wrapperClasses} />;
+  return (
+    <Tag {...attributes} className={wrapperClasses} data-testid={testId} />
+  );
 };

package/src/Avatar/AvatarExtraText.tsx

@@ -6,14 +6,16 @@ export interface AvatarExtraTextProps extends HTMLAttributes<HTMLElement> {
   tag?: ElementType;
   /** Classi aggiuntive da usare per il componente AvatarExtraText */
   className?: string;
+  testId?: string;
 }
 
 export const AvatarExtraText: FC<AvatarExtraTextProps> = ({
   className,
   tag = 'div',
+  testId,
   ...attributes
 }) => {
   const Tag = tag;
   const wrapperClass = classNames('extra-text', className);
-  return <Tag className={wrapperClass} {...attributes} />;
+  return <Tag className={wrapperClass} {...attributes} data-testid={testId} />;
 };

package/src/Avatar/AvatarGroupContainer.tsx

@@ -9,15 +9,19 @@ export interface AvatarGroupContainerProps
   className?: string;
   /** Classi aggiuntive da usare per il componente più esterno di AvatarGroupContainer */
   wrapperClassName?: string;
+  testId?: string;
 }
 
 export const AvatarGroupContainer: FC<AvatarGroupContainerProps> = ({
   className,
   tag = 'ul',
   wrapperClassName,
+  testId,
   ...attributes
 }) => {
   const Tag = tag;
   const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName);
-  return <Tag {...attributes} className={wrapperClasses}></Tag>;
+  return (
+    <Tag {...attributes} className={wrapperClasses} data-testid={testId} />
+  );
 };

package/src/Avatar/AvatarIcon.tsx

@@ -19,6 +19,7 @@ export interface AvatarIconProps extends HTMLAttributes<HTMLElement> {
   href?: string;
   /** Da utilizzare per impostare un riferimento all'elemento DOM */
   innerRef?: Ref<HTMLElement | HTMLAnchorElement>;
+  testId?: string;
 }
 
 export const AvatarIcon: FC<AvatarIconProps> = ({
@@ -28,6 +29,7 @@ export const AvatarIcon: FC<AvatarIconProps> = ({
   href,
   color,
   innerRef,
+  testId,
   children,
   ...attributes
 }) => {
@@ -43,6 +45,7 @@ export const AvatarIcon: FC<AvatarIconProps> = ({
         {...attributes}
         className={typeClass}
         ref={innerRef as Ref<HTMLAnchorElement>}
+        data-testid={testId}
       >
         {children}
       </a>
@@ -50,7 +53,7 @@ export const AvatarIcon: FC<AvatarIconProps> = ({
   }
 
   return (
-    <Tag {...attributes} className={typeClass}>
+    <Tag {...attributes} className={typeClass} data-testid={testId}>
       {children}
     </Tag>
   );