design-react-kit 3.3.2 → 4.0.2

package/dist/types/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const noop: () => void;
+export declare const logError: (message: string) => void;
+export declare const notifyDeprecation: (message: string, options?: {
+    once: boolean;
+}) => void;

package/package.json

@@ -1,133 +1,157 @@
 {
-    "name": "design-react-kit",
-    "version": "3.3.2",
-    "description": "Componenti React per Bootstrap 4",
-    "author": "Presidenza del Consiglio dei Ministri",
-    "homepage": "https://github.com/italia/design-react-kit#README",
-    "license": "BSD-3-Clause",
-    "sideEffects": false,
-    "main": "dist/design-react-kit.js",
-    "module": "dist/design-react-kit.es.js",
-    "typings": "dist/design-react-kit.d.ts",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/italia/design-react-kit.git"
+  "name": "design-react-kit",
+  "description": "Componenti React per Bootstrap 4",
+  "keywords": [
+    "react",
+    "bootstrap",
+    "bootstrap-italia"
+  ],
+  "author": "Presidenza del Consiglio dei Ministri",
+  "contributors": [
+    "Gianluca Esposito",
+    "Matteo Manchi",
+    "Paolo Mariotti",
+    "Marco Liberati",
+    "Francesco Zaia",
+    "Sanyam Dogra",
+    "Silvio Relli"
+  ],
+  "bugs": {
+    "url": "https://github.com/italia/design-react-kit/issues"
+  },
+  "version": "4.0.2",
+  "license": "BSD-3",
+  "module": "dist/esm/index.js",
+  "main": "./src/index.tsx",
+  "typings": "dist/types/index.d.ts",
+  "exports": {
+    "require": "./dist/index.js",
+    "import": "./dist/esm/index.js",
+    "default": "./dist/esm/index.js"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/italia/design-react-kit.git"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "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",
+    "prebuild": "npm run svg:import",
+    "build": "tsdx build --format cjs,esm",
+    "test": "tsdx test --passWithNoTests --coverage",
+    "test:ci": "tsdx test --passWithNoTests --coverage --runInBand --ci",
+    "lint": "npx eslint src stories test --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: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]'"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "bootstrap-italia": "1.4.3"
+  },
+  "size-limit": [
+    {
+      "path": "dist/cjs/index.js",
+      "limit": "200 KB"
     },
-    "contributors": [
-        "Gianluca Esposito",
-        "Matteo Manchi",
-        "Paolo Mariotti",
-        "Marco Liberati",
-        "Francesco Zaia",
-        "Sanyam Dogra",
-        "Silvio Relli"
-    ],
-    "bugs": {
-        "url": "https://github.com/italia/design-react-kit/issues"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.6.4",
-        "@babel/plugin-proposal-class-properties": "^7.5.5",
-        "@babel/plugin-proposal-export-default-from": "^7.5.2",
-        "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
-        "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
-        "@babel/preset-env": "^7.6.3",
-        "@babel/preset-react": "^7.6.3",
-        "@sambego/storybook-state": "^1.3.3",
-        "@storybook/addon-a11y": "^5.3.21",
-        "@storybook/addon-actions": "^5.3.21",
-        "@storybook/addon-console": "^1.2.0",
-        "@storybook/addon-info": "^5.3.21",
-        "@storybook/addon-knobs": "^5.3.21",
-        "@storybook/addon-links": "^5.3.21",
-        "@storybook/addon-notes": "^5.3.21",
-        "@storybook/addon-storyshots": "^5.3.21",
-        "@storybook/addon-storysource": "^5.3.21",
-        "@storybook/addon-viewport": "^5.3.19",
-        "@storybook/addons": "^5.3.21",
-        "@storybook/react": "^5.3.21",
-        "@svgr/cli": "^5.5.0",
-        "@svgr/core": "^5.5.0",
-        "@svgr/rollup": "^5.5.0",
-        "@typescript-eslint/eslint-plugin": "^2.3.3",
-        "@typescript-eslint/parser": "^2.3.3",
-        "babel-eslint": "^10.0.3",
-        "babel-loader": "^8.0.6",
-        "bootstrap-italia": "1.4.1",
-        "classnames": "^2.2.6",
-        "eslint": "^6.8.0",
-        "eslint-config-prettier": "^6.3.0",
-        "eslint-config-standard": "^14.1.0",
-        "eslint-plugin-babel": "^5.3.0",
-        "eslint-plugin-import": "^2.18.2",
-        "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-node": "^10.0.0",
-        "eslint-plugin-prettier": "^3.1.1",
-        "eslint-plugin-promise": "^4.2.1",
-        "eslint-plugin-react": "^7.15.1",
-        "eslint-plugin-standard": "^4.0.1",
-        "glob": "^7.1.4",
-        "husky": "^3.0.9",
-        "react-scripts": "^3.1.2",
-        "react-test-renderer": "^16.10.1",
-        "react-to-typescript-definitions": "^2.0.0",
-        "rollup": "^1.26.0",
-        "rollup-plugin-babel": "^4.3.3",
-        "rollup-plugin-babel-minify": "^9.1.0",
-        "rollup-plugin-commonjs": "^10.1.0",
-        "rollup-plugin-node-resolve": "^5.2.0",
-        "rollup-plugin-replace": "^2.2.0",
-        "rollup-plugin-svg": "^2.0.0",
-        "run-script-os": "^1.0.7",
-        "typeface-lora": "^0.0.72",
-        "typeface-roboto-mono": "^0.0.75",
-        "typeface-titillium-web": "^0.0.72"
-    },
-    "peerDependencies": {
-        "react": "^16.8.3",
-        "react-dom": "^16.8.3"
-    },
-    "scripts": {
-        "install-dependencies": "yarn install --peers",
-        "prebuild": "yarn install-dependencies && yarn build:svg",
-        "build": "rollup -c scripts/rollup.config.js",
-        "build:svg": "svgr -d src/components/Icon/assets node_modules/bootstrap-italia/src/svg && echo \"\" >> src/components/Icon/assets/index.js",
-        "prestorybook": "yarn install-dependencies && yarn build:svg",
-        "storybook:build": "build-storybook -c .storybook -s ./static",
-        "storybook:serve": "start-storybook -p 9001 -c .storybook -s ./static",
-        "storybook:deploy": "npx gh-pages -d storybook-static -m 'Update GitHub Pages [ci skip]'",
-        "lint": "eslint src/ stories/",
-        "lint:fix": "eslint --fix src/",
-        "test": "export SKIP_PREFLIGHT_CHECK=true && react-scripts test --env=jsdom",
-        "test:ci": "CI=true react-scripts test --env=jsdom",
-        "start": "yarn run storybook:serve",
-        "typescript:dts": "node scripts/dts.js"
-    },
-    "husky": {
-        "hooks": {
-            "pre-push": "yarn run lint"
-        }
+    {
+      "path": "dist/esm/index.js",
+      "limit": "200 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.13.15",
+    "@rollup/plugin-url": "^6.0.0",
+    "@size-limit/preset-small-lib": "^4.10.2",
+    "@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-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",
+    "@testing-library/react": "^11.2.6",
+    "@types/is-number": "^7.0.1",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@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",
+    "circular-dependency-plugin": "^5.2.2",
+    "eslint-plugin-mdx": "^1.13.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "husky": "^7.0.4",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-transform-stub": "^2.0.0",
+    "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",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.2.0",
+    "typeface-lora": "^1.1.13",
+    "typeface-roboto-mono": "^1.1.13",
+    "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "is-number": "^7.0.0",
+    "react-select": "^4.3.0",
+    "react-stickup": "^1.12.0",
+    "react-toastify": "^7.0.4",
+    "react-transition-group": "^4.4.1",
+    "react-use-navscroll": "0.2.0",
+    "reactstrap": "^8.9.0",
+    "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",
+      ".(js|jsx)$": "./jest-transformer.js",
+      "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
     },
-    "dependencies": {
-        "prop-types": "^15.7.2",
-        "react-scrollspy": "^3.3.5",
-        "react-select": "^3.0.8",
-        "react-stickup": "^1.11.0",
-        "react-transition-group": "^2.3.1",
-        "reactstrap": "^8.0.0",
-        "webfontloader": "^1.6.28"
+    "moduleNameMapper": {
+      "^.+.(svg|png|jpg)$": "jest-transform-stub",
+      "^.+\\.css$": "identity-obj-proxy"
     },
-    "browserslist": [
-        "defaults",
-        "ie 11",
-        "not ie_mob 11",
-        "not op_mini all",
-        "edge >= 13",
-        "safari 11"
-    ],
-    "svgr": {
-        "dimensions": false,
-        "prettier": true,
-        "ignoreExisting": true
-    }
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node",
+      "mdx"
+    ]
+  }
 }

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,30 @@
+import React, { ElementType, FC } from 'react';
+import classNames from 'classnames';
+
+export interface AccordionProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Utilizzare questo attributo per ottenere header con sfondo di colore primario quando questi è attivo o all’hover. */
+  background?: 'active' | 'hover';
+  /** Utilizzare questo attributo per mostrare, mediante un'icona a sinistra, lo stato di apertura */
+  iconLeft?: boolean;
+}
+
+export const Accordion: FC<AccordionProps> = ({
+  tag = 'div',
+  className,
+  background,
+  iconLeft = false,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames('collapse-div', className, {
+    'collapse-background-active': background === 'active',
+    'collapse-background-hover': background === 'hover',
+    'collapse-left-icon': iconLeft
+  });
+
+  return <Tag {...attributes} className={classes} />;
+};

package/src/Accordion/AccordionBody.tsx

@@ -0,0 +1,127 @@
+import React, { Component, ElementType } from 'react';
+import classNames from 'classnames';
+import { Transition } from 'react-transition-group';
+
+import { Util } from 'reactstrap';
+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;
+
+export type AccordionBodyProps = Partial<TransitionProps> & {
+  tag?: ElementType;
+  className?: string;
+  active?: boolean;
+  onToggle?: () => void;
+};
+
+const transitionStatusToClassHash = {
+  [TransitionStatuses.ENTERING]: 'collapsing',
+  [TransitionStatuses.ENTERED]: 'collapse show',
+  [TransitionStatuses.EXITING]: 'collapsing',
+  [TransitionStatuses.EXITED]: 'collapse'
+};
+
+type TransitionStates = keyof typeof transitionStatusToClassHash;
+
+function getTransitionClass(status: TransitionStates) {
+  return transitionStatusToClassHash[status] || 'collapse';
+}
+
+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>
+    );
+  }
+}

package/src/Accordion/AccordionHeader.tsx

@@ -0,0 +1,42 @@
+import React, { FC, ReactNode, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AccordionHeaderProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AccordionHeader */
+  className?: string;
+  /** Utilizzare questo attributo per indicare se l'elemento è attivo o no */
+  active?: boolean;
+  /** Questa funzione verrà chiamata quando avviene un click sul componente AccordionHeader */
+  onToggle?: () => void;
+  /** Contenuto aggiuntivo all'interno del bottone dell'AccordionHeader */
+  append?: ReactNode;
+}
+
+export const AccordionHeader: FC<AccordionHeaderProps> = ({
+  className,
+  tag = 'button',
+  active = false,
+  append,
+  onToggle,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const toggleClasses = classNames(className, {
+    collapsed: active
+  });
+
+  return (
+    <div className='collapse-header'>
+      <Tag
+        data-toggle='collapse'
+        aria-expanded={active ? 'true' : 'false'}
+        className={toggleClasses}
+        onClick={onToggle}
+        {...attributes}
+      />
+      {append}
+    </div>
+  );
+};

package/src/Alert/Alert.tsx

@@ -0,0 +1,39 @@
+import React, {
+  FC,
+  HTMLAttributes,
+  MouseEventHandler,
+  ElementType,
+  Ref
+} from 'react';
+import { Alert as InnerAlert, FadeProps, CSSModule } from 'reactstrap';
+
+// Copy over from reactstrap and add new ones
+export interface AlertProps extends HTMLAttributes<HTMLElement> {
+  closeClassName?: string;
+  closeAriaLabel?: string;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
+  /** Quando abilitato mostra un'animazione di entrata ed uscita del componente Alert. Valore di default: true. */
+  fade?: boolean;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  transition?: FadeProps;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement>;
+  isOpen?: boolean;
+  toggle?: MouseEventHandler<any>;
+}
+
+const defaultProps = {
+  color: 'success',
+  isOpen: true,
+  fade: true
+};
+
+export const Alert: FC<AlertProps> = (props) => {
+  return <InnerAlert {...props} />;
+};
+
+Alert.defaultProps = defaultProps;

package/src/Avatar/AvatarContainer.tsx

@@ -0,0 +1,22 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarContainerProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarContainer */
+  className?: string;
+}
+
+export const AvatarContainer: FC<AvatarContainerProps> = ({
+  className,
+  tag = 'div',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames(
+    'd-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap',
+    className
+  );
+  return <Tag {...attributes} className={wrapperClasses} />;
+};

package/src/Avatar/AvatarExtraText.tsx

@@ -0,0 +1,19 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarExtraTextProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarExtraText */
+  className?: string;
+}
+
+export const AvatarExtraText: FC<AvatarExtraTextProps> = ({
+  className,
+  tag = 'div',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClass = classNames('extra-text', className);
+  return <Tag className={wrapperClass} {...attributes} />;
+};

package/src/Avatar/AvatarGroupContainer.tsx

@@ -0,0 +1,23 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarGroupContainerProps
+  extends HTMLAttributes<HTMLUListElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente interno AvatarGroupContainer */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente più esterno di AvatarGroupContainer */
+  wrapperClassName?: string;
+}
+
+export const AvatarGroupContainer: FC<AvatarGroupContainerProps> = ({
+  className,
+  tag = 'ul',
+  wrapperClassName,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName);
+  return <Tag {...attributes} className={wrapperClasses}></Tag>;
+};

package/src/Avatar/AvatarIcon.tsx

@@ -0,0 +1,57 @@
+import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarIconProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Utilizzarlo in caso di utilizzo di componenti personalizzati, come ad esempio
+   * un link gestito da handler onClick.
+   * */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarIcon */
+  className?: string;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'primary' | 'secondary' | 'green' | 'orange' | 'red' | string;
+  /** Le dimensioni dell'icona definite in Bootstrap Italia */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /**
+   * Quando definito rende l'icona un link cliccabile. Nota: se definito ignora la prop Tag.
+   * */
+  href?: string;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement | HTMLAnchorElement>;
+}
+
+export const AvatarIcon: FC<AvatarIconProps> = ({
+  className,
+  tag = 'div',
+  size = 'md',
+  href,
+  color,
+  innerRef,
+  children,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const typeClass = classNames('avatar', {
+    [`size-${size}`]: size,
+    [`avatar-${color}`]: color
+  });
+  if (href) {
+    return (
+      <a
+        href={href}
+        {...attributes}
+        className={typeClass}
+        ref={innerRef as Ref<HTMLAnchorElement>}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Tag {...attributes} className={typeClass}>
+      {children}
+    </Tag>
+  );
+};