design-react-kit 5.0.0-2 → 5.0.0-4

package/src/utils.test.tsx

@@ -1,14 +1,7 @@
 jest.spyOn(console, 'error').mockImplementation();
 
 // eslint-disable-next-line import/first
-import {
-  flushMessageCache,
-  logError,
-  mapToCssModules,
-  notifyDeprecation,
-  omit,
-  pick
-} from './utils';
+import { flushMessageCache, logError, mapToCssModules, notifyDeprecation, omit, pick } from './utils';
 
 describe('Kit utils', () => {
   describe('mapToCssModules', () => {
@@ -22,21 +15,13 @@ describe('Kit utils', () => {
 
     it('should return passed classes without cssModules or without any matching mapping', () => {
       expect(mapToCssModules('myClass')).toBe('myClass');
-      expect(mapToCssModules('myClass myOtherClass')).toBe(
-        'myClass myOtherClass'
-      );
-      expect(mapToCssModules('myClass', { otherClass: 'myOtherClass' })).toBe(
-        'myClass'
-      );
+      expect(mapToCssModules('myClass myOtherClass')).toBe('myClass myOtherClass');
+      expect(mapToCssModules('myClass', { otherClass: 'myOtherClass' })).toBe('myClass');
     });
 
     it('should map passed classes with cssModules', () => {
-      expect(mapToCssModules('myClass', { myClass: 'otherClass' })).toBe(
-        'otherClass'
-      );
-      expect(
-        mapToCssModules('myClass myOtherClass', { myClass: 'otherClass' })
-      ).toBe('otherClass myOtherClass');
+      expect(mapToCssModules('myClass', { myClass: 'otherClass' })).toBe('otherClass');
+      expect(mapToCssModules('myClass myOtherClass', { myClass: 'otherClass' })).toBe('otherClass myOtherClass');
     });
 
     it('should make work the mapping also for empty string', () => {

package/src/utils.tsx

@@ -18,10 +18,7 @@ export const flushMessageCache = () => {
 };
 
 const messages: Record<string, 1> = {};
-export const notifyDeprecation = (
-  message: string,
-  options: { once: boolean } = { once: true }
-) => {
+export const notifyDeprecation = (message: string, options: { once: boolean } = { once: true }) => {
   if (!options.once) {
     logError(message);
   } else {
@@ -32,10 +29,7 @@ export const notifyDeprecation = (
   }
 };
 
-export function mapToCssModules(
-  className: string | null,
-  cssModules?: Record<string, string>
-) {
+export function mapToCssModules(className: string | null, cssModules?: Record<string, string>) {
   let finalClassNames = className == null ? '' : className;
   if (!cssModules) {
     return finalClassNames;
@@ -48,10 +42,7 @@ export function mapToCssModules(
 
 type UnknownObject = Record<string, unknown>;
 
-export function pick<T extends UnknownObject>(
-  obj: T,
-  keys: keyof T | Array<keyof T>
-): Partial<T> {
+export function pick<T extends UnknownObject>(obj: T, keys: keyof T | Array<keyof T>): Partial<T> {
   const keysArray = Array.isArray(keys) ? keys : [keys];
   const newObj: Partial<T> = {};
   for (const key of keysArray) {
@@ -62,10 +53,7 @@ export function pick<T extends UnknownObject>(
   return newObj;
 }
 
-export function omit<T extends UnknownObject>(
-  obj: T,
-  keys: keyof T | Array<keyof T>
-): Partial<T> {
+export function omit<T extends UnknownObject>(obj: T, keys: keyof T | Array<keyof T>): Partial<T> {
   const keysLookup = new Set(Array.isArray(keys) ? keys : [keys]);
 
   const newObj: Partial<T> = {};

package/dist/types/CookieBar/CookieBar.d.ts

@@ -1,9 +0,0 @@
-import { ElementType, FC, HTMLAttributes } from 'react';
-export interface CookieBarProps extends HTMLAttributes<HTMLElement> {
-    /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-    tag?: ElementType;
-    /** Classi aggiuntive da usare per il componente Cookie */
-    className?: string;
-    testId?: string;
-}
-export declare const CookieBar: FC<CookieBarProps>;

package/dist/types/CookieBar/CookieBarButton.d.ts

@@ -1,9 +0,0 @@
-import { ElementType, FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
-export declare type CookieBarButtonProps = {
-    /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-    tag?: ElementType;
-    /** Classi aggiuntive da usare per il componente CookieBarButton */
-    className?: string;
-    testId?: string;
-} & (ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
-export declare const CookieBarButton: FC<CookieBarButtonProps>;

package/dist/types/CookieBar/CookieBarButtons.d.ts

@@ -1,9 +0,0 @@
-import { ElementType, FC, HTMLAttributes } from 'react';
-export interface CookieBarButtonsProps extends HTMLAttributes<HTMLElement> {
-    /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-    tag?: ElementType;
-    /** Classi aggiuntive da usare per il componente CookieBarButtons */
-    className?: string;
-    testId?: string;
-}
-export declare const CookieBarButtons: FC<CookieBarButtonsProps>;

package/dist/types/Input/TimeInput.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import type { InputProps } from './Input';
-export declare const addTime: (value: string, maxValue: number) => string;
-export declare const subtractTime: (value: string, minValue: number) => string;
-export declare const formatTime: (value: number | string) => string;
-declare type UnusedProps = 'plaintext' | 'onBlur' | 'value' | 'type';
-export interface TimeInputProps extends Omit<InputProps, UnusedProps> {
-    id: string;
-    /** Etichetta della sezione per il controllo delle ore e dei minuti - non visibile a schermo */
-    controlsLabel?: string;
-    /** Determina l'uso del tema scuro per la sezione di selezione di ore e minuti */
-    dark?: boolean;
-    /** Il valore del campo */
-    value?: string;
-    /** Funzione callback */
-    onBlur?: (time: string) => void;
-    /** Testo esplicativo per dispositivi screen reader */
-    srText?: string;
-    /** Etichetta del campo per la selezione delle ore -  non visibile a schermo */
-    hoursLabel?: string;
-    /** Etichetta del campo per la selezione dei minuti -  non visibile a schermo */
-    minutesLabel?: string;
-    /** Etichetta del bottone per incrementare le ore -  non visibile a schermo */
-    increaseHoursLabel?: string;
-    /** Etichetta del bottone per incrementare i minuti -  non visibile a schermo */
-    increaseMinutesLabel?: string;
-    /** Etichetta del bottone per diminuire le ore -  non visibile a schermo */
-    decreaseHoursLabel?: string;
-    /** Etichetta del bottone per diminuire i minuti -  non visibile a schermo */
-    decreaseMinutesLabel?: string;
-    testId?: string;
-}
-export declare const TimeInput: ({ dark, onBlur, label, controlsLabel, invalid, value, id, placeholder, srText, hoursLabel, minutesLabel, increaseHoursLabel, increaseMinutesLabel, decreaseHoursLabel, decreaseMinutesLabel, testId, ...attributes }: TimeInputProps) => React.JSX.Element;
-export {};

package/src/CookieBar/CookieBar.tsx

@@ -1,23 +0,0 @@
-import React, { ElementType, FC, HTMLAttributes } from 'react';
-import classNames from 'classnames';
-
-export interface CookieBarProps extends HTMLAttributes<HTMLElement> {
-  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-  tag?: ElementType;
-  /** Classi aggiuntive da usare per il componente Cookie */
-  className?: string;
-  testId?: string;
-}
-
-export const CookieBar: FC<CookieBarProps> = ({
-  tag = 'div',
-  className,
-  testId,
-  ...attributes
-}) => {
-  const Tag = tag;
-  const wrapperClasses = classNames('cookiebar show', className);
-  return (
-    <Tag {...attributes} className={wrapperClasses} data-testid={testId} />
-  );
-};

package/src/CookieBar/CookieBarButton.tsx

@@ -1,29 +0,0 @@
-import React, {
-  ElementType,
-  FC,
-  ButtonHTMLAttributes,
-  AnchorHTMLAttributes
-} from 'react';
-import classNames from 'classnames';
-
-export type CookieBarButtonProps = {
-  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-  tag?: ElementType;
-  /** Classi aggiuntive da usare per il componente CookieBarButton */
-  className?: string;
-  testId?: string;
-} & (
-  | ButtonHTMLAttributes<HTMLButtonElement>
-  | AnchorHTMLAttributes<HTMLAnchorElement>
-);
-
-export const CookieBarButton: FC<CookieBarButtonProps> = ({
-  tag = 'button',
-  className,
-  testId,
-  ...attributes
-}) => {
-  const Tag = tag;
-  const activeClass = classNames(className, 'cookiebar-btn');
-  return <Tag className={activeClass} {...attributes} data-testid={testId} />;
-};

package/src/CookieBar/CookieBarButtons.tsx

@@ -1,21 +0,0 @@
-import React, { ElementType, FC, HTMLAttributes } from 'react';
-import classNames from 'classnames';
-
-export interface CookieBarButtonsProps extends HTMLAttributes<HTMLElement> {
-  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-  tag?: ElementType;
-  /** Classi aggiuntive da usare per il componente CookieBarButtons */
-  className?: string;
-  testId?: string;
-}
-
-export const CookieBarButtons: FC<CookieBarButtonsProps> = ({
-  className,
-  tag = 'div',
-  testId,
-  ...attributes
-}) => {
-  const Tag = tag;
-  const buttonClasses = classNames(className, 'cookiebar-buttons');
-  return <Tag className={buttonClasses} {...attributes} data-testid={testId} />;
-};

package/src/Input/TimeInput.tsx

@@ -1,312 +0,0 @@
-import React, { HTMLAttributes, ReactNode, useState } from 'react';
-import classNames from 'classnames';
-
-import { noop } from '../utils';
-import { Input } from './Input';
-import { Icon } from '../Icon/Icon';
-import { getClasses, getInfoTextControlClass } from './utils';
-import type { InputProps } from './Input';
-
-export const addTime = (value: string, maxValue: number): string => {
-  const currTime = Number(value);
-  return currTime >= maxValue ? value : (currTime + 1).toString();
-};
-
-export const subtractTime = (value: string, minValue: number): string => {
-  const currTime = Number(value);
-  return currTime <= minValue ? value : (currTime - 1).toString();
-};
-
-export const formatTime = (value: number | string): string =>
-  `0${value}`.substr(-2);
-
-interface TimeInputContainerProps extends HTMLAttributes<HTMLElement> {
-  wrapperClass: string;
-  infoTextClass: string;
-  label: string | ReactNode | undefined;
-  infoText: string | undefined;
-  invalid: boolean;
-  id: string;
-  button: ReactNode;
-  children: ReactNode;
-}
-
-const TimeInputContainer = ({
-  wrapperClass,
-  children,
-  label,
-  id,
-  infoText,
-  button,
-  infoTextClass,
-  invalid
-}: TimeInputContainerProps) => {
-  const infoId = id ? `${id}Description` : undefined;
-  const activeClass = 'active';
-
-  return (
-    <div className={classNames(wrapperClass)}>
-      <div className='input-group'>
-        {children}
-        <label
-          htmlFor={id}
-          className={classNames(activeClass, { 'error-label': invalid })}
-        >
-          {label}
-        </label>
-        <div id={infoId} className={infoTextClass}>
-          {infoText}
-        </div>
-        <div className='input-group-append'>{button}</div>
-      </div>
-    </div>
-  );
-};
-
-type UnusedProps = 'plaintext' | 'onBlur' | 'value' | 'type';
-
-export interface TimeInputProps extends Omit<InputProps, UnusedProps> {
-  id: string;
-  /** Etichetta della sezione per il controllo delle ore e dei minuti - non visibile a schermo */
-  controlsLabel?: string;
-  /** Determina l'uso del tema scuro per la sezione di selezione di ore e minuti */
-  dark?: boolean;
-  /** Il valore del campo */
-  value?: string;
-  /** Funzione callback */
-  onBlur?: (time: string) => void;
-  /** Testo esplicativo per dispositivi screen reader */
-  srText?: string;
-  /** Etichetta del campo per la selezione delle ore -  non visibile a schermo */
-  hoursLabel?: string;
-  /** Etichetta del campo per la selezione dei minuti -  non visibile a schermo */
-  minutesLabel?: string;
-  /** Etichetta del bottone per incrementare le ore -  non visibile a schermo */
-  increaseHoursLabel?: string;
-  /** Etichetta del bottone per incrementare i minuti -  non visibile a schermo */
-  increaseMinutesLabel?: string;
-  /** Etichetta del bottone per diminuire le ore -  non visibile a schermo */
-  decreaseHoursLabel?: string;
-  /** Etichetta del bottone per diminuire i minuti -  non visibile a schermo */
-  decreaseMinutesLabel?: string;
-  testId?: string;
-}
-
-export const TimeInput = ({
-  dark = false,
-  onBlur = noop,
-  label,
-  controlsLabel,
-  invalid = false,
-  value = '',
-  id,
-  placeholder,
-  srText,
-  hoursLabel,
-  minutesLabel,
-  increaseHoursLabel,
-  increaseMinutesLabel,
-  decreaseHoursLabel,
-  decreaseMinutesLabel,
-  testId,
-  ...attributes
-}: TimeInputProps) => {
-  const [initialHours, initialMinutes] = value.split(':');
-  const [isOpen, setIsOpen] = useState(false);
-  const [hours, setHours] = useState(initialHours || '00');
-  const [minutes, setMinutes] = useState(initialMinutes || '00');
-  const [time, setTime] = useState(
-    initialHours && initialMinutes ? `${initialHours}:${initialMinutes}` : ''
-  );
-  const [isFocused, toggleFocus] = useState(false);
-
-  const button = (
-    <button
-      type='button'
-      className='btn-time'
-      onClick={() => {
-        setIsOpen(!isOpen);
-        if (isOpen) onBlur(time);
-      }}
-    >
-      <Icon icon='it-clock' />
-    </button>
-  );
-
-  const onHoursChange = (value: string) => {
-    const formattedValue = formatTime(value);
-    setHours(isNaN(Number(formattedValue)) ? `00` : formattedValue);
-    setTime(`${formattedValue}:${minutes}`);
-  };
-
-  const onMinutesChange = (value: string) => {
-    const formattedValue = formatTime(value);
-    setMinutes(isNaN(Number(formattedValue)) ? `00` : formattedValue);
-    setTime(`${hours}:${formattedValue}`);
-  };
-
-  const onTimeChange = (value: string) => {
-    const [hours, minutes] = value.split(':');
-    onHoursChange(hours?.trim());
-    onMinutesChange(minutes?.trim());
-    setTime(value);
-  };
-
-  const infoTextControlClass = getInfoTextControlClass(
-    attributes,
-    attributes.cssModule
-  );
-
-  const { infoTextClass, wrapperClass } = getClasses(
-    attributes.className,
-    {
-      ...attributes,
-      normalized: Boolean(attributes.normalized),
-      inputPassword: false,
-      formControlClass: 'form-control',
-      infoTextControlClass,
-      isFocused,
-      originalWrapperClass:
-        attributes.wrapperClassName || attributes.wrapperClass
-    },
-    attributes.cssModule
-  );
-
-  return (
-    <div
-      className={classNames('it-timepicker-wrapper', {
-        'theme-dark': dark
-      })}
-      data-testid={testId}
-    >
-      <section className='time-spinner'>
-        <div className='error_container' role='alert' aria-atomic='true'></div>
-        <fieldset>
-          <legend>
-            <span className='visually-hidden'>{srText}</span>
-          </legend>
-          <div>
-            <div className='calendar-input-container'>
-              <TimeInputContainer
-                wrapperClass={wrapperClass}
-                infoTextClass={infoTextClass}
-                label={label}
-                infoText={attributes.infoText}
-                id={id}
-                button={button}
-                invalid={invalid}
-              >
-                <Input
-                  {...attributes}
-                  type='text'
-                  label={label}
-                  id={id}
-                  placeholder={placeholder}
-                  value={time}
-                  onFocus={() => {
-                    setIsOpen(false);
-                    toggleFocus(true);
-                  }}
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    onTimeChange(e.target.value)
-                  }
-                  invalid={invalid}
-                  onBlur={() => {
-                    toggleFocus(false);
-                    onBlur(time);
-                  }}
-                  noWrapper
-                />
-              </TimeInputContainer>
-            </div>
-          </div>
-        </fieldset>
-        <div
-          className='spinner-control'
-          aria-hidden='true'
-          role='region'
-          aria-label={controlsLabel}
-          tabIndex={-1}
-          style={{ display: isOpen ? 'block' : 'none' }}
-        >
-          <div className='spinner-hour spinner'>
-            <Input
-              className='spinnerHour form-control'
-              aria-label={hoursLabel}
-              type='number'
-              value={hours}
-              role='spinbutton'
-              maxLength={2}
-              aria-valuenow={Number(hours)}
-              aria-valuemax={23}
-              aria-valuemin={0}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                onHoursChange(e.target.value)
-              }
-            />
-            <div className='button-wrapper'>
-              <button
-                type='button'
-                className='button-hour btnHourUp'
-                aria-label={increaseHoursLabel}
-                aria-hidden='true'
-                tabIndex={-1}
-                onClick={() => onHoursChange(addTime(hours, 23))}
-              >
-                <span className='icon-up'></span>
-              </button>
-              <button
-                type='button'
-                className='button-hour btnHourDown'
-                aria-label={decreaseHoursLabel}
-                aria-hidden='true'
-                tabIndex={-1}
-                onClick={() => onHoursChange(subtractTime(hours, 0))}
-              >
-                <span className='icon-down'></span>
-              </button>
-            </div>
-          </div>
-          <div className='spinner-min spinner'>
-            <Input
-              className='spinnerMin form-control'
-              aria-label={minutesLabel}
-              type='number'
-              value={minutes}
-              role='spinbutton'
-              maxLength={2}
-              aria-valuenow={Number(minutes)}
-              aria-valuemax={59}
-              aria-valuemin={0}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                onMinutesChange(e.target.value)
-              }
-            />
-            <div className='button-wrapper'>
-              <button
-                type='button'
-                className='btnMinUp button-minute'
-                aria-label={increaseMinutesLabel}
-                aria-hidden='true'
-                tabIndex={-1}
-                onClick={() => onMinutesChange(addTime(minutes, 59))}
-              >
-                <span className='icon-up'></span>
-              </button>
-              <button
-                type='button'
-                className='btnMinDown button-minute'
-                aria-label={decreaseMinutesLabel}
-                aria-hidden='true'
-                tabIndex={-1}
-                onClick={() => onMinutesChange(subtractTime(minutes, 0))}
-              >
-                <span className='icon-down'></span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-};