From 0bc6aee3fe05e7688daa7fbabfa73c35ca566d99 Mon Sep 17 00:00:00 2001 From: Virtute90 <32056724+Virtute90@users.noreply.github.com> Date: Mon, 23 Sep 2024 23:07:18 +0200 Subject: [PATCH] chore(deps): update eslint to v9 Co-authored-by: Andrea Stagi --- .eslintrc.cjs | 21 - babel.config.json | 2 +- eslint.config.js | 22 + package.json | 14 +- src/Accordion/AccordionBody.tsx | 8 +- src/Alert/Alert.tsx | 2 +- src/Avatar/AvatarGroupContainer.tsx | 5 +- src/Avatar/AvatarIcon.tsx | 5 +- src/Avatar/AvatarPresence.tsx | 12 +- src/Avatar/AvatarStatus.tsx | 12 +- src/Dimmer/DimmerButtons.tsx | 5 +- src/Dropdown/Dropdown.tsx | 3 +- src/FontLoader/FontLoader.tsx | 1 + src/Input/Input.tsx | 5 +- src/List/ListItem.tsx | 2 +- src/Modal/Modal.tsx | 5 +- src/Modal/ModalHeader.tsx | 6 +- src/NavScroll/debounce.ts | 4 +- src/NavScroll/useNavScroll.ts | 1 + src/NavScroll/useSizeDetector.ts | 1 - src/Notification/Notification.tsx | 3 +- src/Notification/NotificationContent.tsx | 5 +- src/Notification/core.tsx | 4 +- src/Progress/Progress.tsx | 3 +- src/Select/shared.tsx | 45 - src/Stepper/StepperHeader.tsx | 4 +- src/transitions.ts | 1 + src/utils.tsx | 2 +- stories/Components/Alert.stories.tsx | 108 +- stories/Components/Avatar/Avatar.stories.tsx | 263 +- stories/Components/BackToTop.stories.tsx | 57 +- stories/Components/Callout.stories.tsx | 340 ++- stories/Components/Card.stories.tsx | 21 +- stories/Components/Footer.stories.tsx | 5 +- stories/Components/Form/Input.stories.tsx | 380 +-- .../Header/CenterHeader.stories.tsx | 133 +- .../Header/CompleteHeader.stories.tsx | 1 - stories/Components/List.stories.tsx | 225 +- .../NavScroll/NavScroll.stories.tsx | 2341 +++++++++-------- stories/Components/NavScroll/utils.ts | 1 + stories/Components/Skiplinks.stories.tsx | 15 +- stories/Components/Tables.stories.tsx | 5 +- stories/Components/Tooltip.stories.tsx | 31 +- stories/Documentation/Skiplinks.mdx | 4 +- yarn.lock | 1583 ++--------- 45 files changed, 2380 insertions(+), 3336 deletions(-) delete mode 100644 .eslintrc.cjs create mode 100644 eslint.config.js delete mode 100644 src/Select/shared.tsx diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index 198828556..000000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - extends: ['react-app', 'plugin:storybook/recommended'], - ignorePatterns: ['stories/**/*.mdx'], - overrides: [ - { - // or whatever matches stories specified in .storybook/main.js - files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'], - rules: { - // example of overriding a rule - 'storybook/hierarchy-separator': 'error', - // example of disabling a rule - 'storybook/default-exports': 'off' - } - } - ], - settings: { - react: { - version: 'detect' - } - } -}; diff --git a/babel.config.json b/babel.config.json index ef212531e..624a0a212 100644 --- a/babel.config.json +++ b/babel.config.json @@ -11,5 +11,5 @@ "@babel/preset-typescript", "@babel/preset-react" ], - "plugins": ["@babel/plugin-proposal-optional-chaining"] + "plugins": ["@babel/plugin-transform-optional-chaining"] } diff --git a/eslint.config.js b/eslint.config.js new file mode 100644 index 000000000..45d8a0391 --- /dev/null +++ b/eslint.config.js @@ -0,0 +1,22 @@ +import js from '@eslint/js'; +import reactRefresh from 'eslint-plugin-react-refresh'; +import globals from 'globals'; +import tseslint from 'typescript-eslint'; + +export default tseslint.config( + { ignores: ['node_modules', 'storybook-static', 'dist', 'coverage'] }, + { + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['src/**/*.{ts,tsx}', 'stories/**/*.{ts,tsx}'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser + }, + plugins: { + 'react-refresh': reactRefresh + }, + rules: { + 'react-refresh/only-export-components': ['off', { allowConstantExport: true }] + } + } +); diff --git a/package.json b/package.json index f7932302d..a8ff57607 100644 --- a/package.json +++ b/package.json @@ -54,8 +54,7 @@ "build": "tsup && tsc", "test": "jest ./src ./test --passWithNoTests", "test:ci": "jest ./src ./test --passWithNoTests --runInBand --ci", - "lint": "npx eslint src stories test --ext js,ts,tsx,jsx", - "lint:staged": "npx eslint --ext js,ts,tsx,jsx", + "lint": "npx eslint .", "prepare": "tsup && tsc && husky install", "format-code": "npx prettier . --write", "storybook:serve": "storybook dev -p 9001", @@ -73,11 +72,13 @@ "extends browserslist-config-design-italia" ], "lint-staged": { - "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint:staged" + "./{src,stories,test}/**/*.{js,ts,tsx,jsx,mdx}": "yarn lint" }, "devDependencies": { + "@babel/preset-react": "^7.24.7", "@commitlint/cli": "^18.4.3", "@commitlint/config-conventional": "^18.4.3", + "@eslint/js": "^9.10.0", "@storybook/addon-a11y": "^8.0.5", "@storybook/addon-docs": "^8.0.5", "@storybook/addon-essentials": "^8.0.5", @@ -98,11 +99,11 @@ "@types/react-transition-group": "^4.4.10", "bootstrap-italia": "^2.9.0", "browserslist-config-design-italia": "^1.0.0", - "eslint": "^8.57.0", - "eslint-config-react-app": "^7.0.1", + "eslint": "^9.10.0", "eslint-plugin-mdx": "^3.1.5", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-storybook": "^0.8.0", + "eslint-plugin-react-refresh": "^0.4.11", + "globals": "^15.9.0", "husky": "^8.0.1", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", @@ -118,6 +119,7 @@ "typeface-lora": "^1.1.13", "typeface-roboto-mono": "^1.1.13", "typescript": "^5.4.5", + "typescript-eslint": "^8.4.0", "vite": "^5.2.7" }, "dependencies": { diff --git a/src/Accordion/AccordionBody.tsx b/src/Accordion/AccordionBody.tsx index 48308b1d2..3b5b9132d 100644 --- a/src/Accordion/AccordionBody.tsx +++ b/src/Accordion/AccordionBody.tsx @@ -1,9 +1,9 @@ +import classNames from 'classnames'; import React, { ElementType, PropsWithChildren, useCallback, useState } from 'react'; -import type { TransitionProps } from 'react-transition-group/Transition'; import { Transition } from 'react-transition-group'; -import classNames from 'classnames'; -import { pick, omit } from '../utils'; +import type { TransitionProps } from 'react-transition-group/Transition'; import { TransitionTimeouts, TransitionsKeys } from '../transitions'; +import { omit, pick } from '../utils'; export type AccordionBodyProps = Partial & { tag?: ElementType; @@ -64,7 +64,7 @@ export const AccordionBody = ({ const onExiting = useCallback( (node: HTMLElement) => { // getting this variable triggers a reflow - // @ts-expect-error + // @ts-expect-error variabile non usata // eslint-disable-next-line @typescript-eslint/no-unused-vars const _unused = node.offsetHeight; setHeight(0); diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx index c6e0f1483..6aeeac5b5 100644 --- a/src/Alert/Alert.tsx +++ b/src/Alert/Alert.tsx @@ -24,7 +24,7 @@ export interface AlertProps extends HTMLAttributes { * @default true */ isOpen?: boolean; - toggle?: MouseEventHandler; + toggle?: MouseEventHandler; testId?: string; } diff --git a/src/Avatar/AvatarGroupContainer.tsx b/src/Avatar/AvatarGroupContainer.tsx index 6e1bc99ff..782f6d494 100644 --- a/src/Avatar/AvatarGroupContainer.tsx +++ b/src/Avatar/AvatarGroupContainer.tsx @@ -1,18 +1,15 @@ -import React, { FC, HTMLAttributes, ElementType } from 'react'; import classNames from 'classnames'; +import React, { ElementType, FC, HTMLAttributes } from 'react'; export interface AvatarGroupContainerProps extends HTMLAttributes { /** 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; testId?: string; } export const AvatarGroupContainer: FC = ({ - className, tag = 'ul', wrapperClassName, testId, diff --git a/src/Avatar/AvatarIcon.tsx b/src/Avatar/AvatarIcon.tsx index 970825518..0f6502ee6 100644 --- a/src/Avatar/AvatarIcon.tsx +++ b/src/Avatar/AvatarIcon.tsx @@ -1,5 +1,5 @@ -import React, { FC, HTMLAttributes, ElementType, Ref } from 'react'; import classNames from 'classnames'; +import React, { ElementType, FC, HTMLAttributes, Ref } from 'react'; export interface AvatarIconProps extends HTMLAttributes { /** @@ -36,7 +36,8 @@ export const AvatarIcon: FC = ({ const Tag = tag; const typeClass = classNames('avatar', { [`size-${size}`]: size, - [`avatar-${color}`]: color + [`avatar-${color}`]: color, + className }); if (href) { return ( diff --git a/src/Avatar/AvatarPresence.tsx b/src/Avatar/AvatarPresence.tsx index b4111b998..270b70e3a 100644 --- a/src/Avatar/AvatarPresence.tsx +++ b/src/Avatar/AvatarPresence.tsx @@ -1,5 +1,5 @@ -import React, { FC, HTMLAttributes, ElementType } from 'react'; import classNames from 'classnames'; +import React, { ElementType, FC, HTMLAttributes } from 'react'; export interface AvatarPresenceProps extends HTMLAttributes { /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ @@ -19,8 +19,12 @@ export const AvatarPresence: FC = ({ ...attributes }) => { const Tag = tag; - const typeClass = classNames('avatar-presence', { - presence - }); + const typeClass = classNames( + 'avatar-presence', + { + presence + }, + className + ); return ; }; diff --git a/src/Avatar/AvatarStatus.tsx b/src/Avatar/AvatarStatus.tsx index e22e39b05..2e464cab5 100644 --- a/src/Avatar/AvatarStatus.tsx +++ b/src/Avatar/AvatarStatus.tsx @@ -1,5 +1,5 @@ -import React, { FC, HTMLAttributes, ElementType } from 'react'; import classNames from 'classnames'; +import React, { ElementType, FC, HTMLAttributes } from 'react'; export interface AvatarStatusProps extends HTMLAttributes { /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ @@ -13,8 +13,12 @@ export interface AvatarStatusProps extends HTMLAttributes { export const AvatarStatus: FC = ({ className, tag = 'div', status, testId, ...attributes }) => { const Tag = tag; - const typeClass = classNames('avatar-status', { - status - }); + const typeClass = classNames( + 'avatar-status', + { + status + }, + className + ); return ; }; diff --git a/src/Dimmer/DimmerButtons.tsx b/src/Dimmer/DimmerButtons.tsx index abc3958d5..4d26647e5 100644 --- a/src/Dimmer/DimmerButtons.tsx +++ b/src/Dimmer/DimmerButtons.tsx @@ -1,9 +1,7 @@ -import React, { FC, HTMLAttributes } from 'react'; import classNames from 'classnames'; +import React, { FC, HTMLAttributes } from 'react'; export interface DimmerButtonsProps extends HTMLAttributes { - /** Le varianti di colore definite in Bootstrap Italia per il componente Dimmer */ - color?: 'primary' | string; /** Classi aggiuntive da usare per il componente Dimmer */ className?: string; /** Da utilizzare in presenza di un singolo bottone: quando abilitato ne centra il contenuto. */ @@ -16,7 +14,6 @@ export interface DimmerButtonsProps extends HTMLAttributes { } export const DimmerButtons: FC = ({ - color, className, single = false, dark = true, diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx index f4cdcae0e..9fc3eaeac 100644 --- a/src/Dropdown/Dropdown.tsx +++ b/src/Dropdown/Dropdown.tsx @@ -1,5 +1,5 @@ -import React, { ElementType, FC, HTMLAttributes } from 'react'; import classNames from 'classnames'; +import React, { ElementType, FC, HTMLAttributes } from 'react'; import { Dropdown as BSDRopdown } from 'reactstrap'; export interface DropdownProps extends HTMLAttributes { tag?: ElementType; @@ -14,7 +14,6 @@ export interface DropdownProps extends HTMLAttributes { export const Dropdown: FC = ({ className, testId, - tag, children, inNavbar, textCenter, diff --git a/src/FontLoader/FontLoader.tsx b/src/FontLoader/FontLoader.tsx index 250490022..9c3437919 100644 --- a/src/FontLoader/FontLoader.tsx +++ b/src/FontLoader/FontLoader.tsx @@ -17,6 +17,7 @@ const defaultFonts = [ export function useFontLoader({ fonts }: FontLoaderProps) { useEffect(() => { if (typeof window !== 'undefined') { + // eslint-disable-next-line @typescript-eslint/no-require-imports const WebFont = require('webfontloader'); WebFont.load({ custom: { diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx index 18eb8e100..e6d5b2f50 100644 --- a/src/Input/Input.tsx +++ b/src/Input/Input.tsx @@ -169,6 +169,7 @@ export const Input = ({ } }, [value]); + // eslint-disable-next-line prefer-const let { bsSize, valid, ...rest } = attributes; const Tag = getTag({ tag, plaintext, staticInput, type }); @@ -282,7 +283,7 @@ export const Input = ({ } const clickIncrDecr = (mode: number) => { - var step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1'); + let step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1'); const min = parseFloat(inputRef.current?.min ? inputRef.current.min : 'Nan'); const max = parseFloat(inputRef.current?.max ? inputRef.current.max : 'Nan'); step = isNaN(step) ? 1 : step; @@ -295,7 +296,7 @@ export const Input = ({ } const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set; nativeInputValueSetter?.call(inputRef.current, `${newValue}`); - var ev2 = new Event('input', { bubbles: true }); + const ev2 = new Event('input', { bubbles: true }); inputRef.current?.dispatchEvent(ev2); }; diff --git a/src/List/ListItem.tsx b/src/List/ListItem.tsx index db69b9bc2..c089750a7 100644 --- a/src/List/ListItem.tsx +++ b/src/List/ListItem.tsx @@ -39,7 +39,7 @@ export const ListItem: FC & { children, ...attributes }) => { - let Tag = tag; + const Tag = tag; const classes = classNames( className, { active }, diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx index 0ebcfc5da..9f4f743eb 100644 --- a/src/Modal/Modal.tsx +++ b/src/Modal/Modal.tsx @@ -1,16 +1,17 @@ +import classnames from 'classnames'; import React, { FC, HTMLAttributes } from 'react'; import { FadeProps, Modal as InnerModal } from 'reactstrap'; import { CSSModule } from 'reactstrap/types/lib/utils'; -import classnames from 'classnames'; export interface ModalProps extends HTMLAttributes { + // eslint-disable-next-line @typescript-eslint/no-explicit-any [key: string]: any; /** Indica lo stato del modale. Valore di default: undefined. */ isOpen?: boolean; autoFocus?: boolean; size?: string; /** Funzione da chiamare quando l'utente clicca sul backdrop. Valore di default: undefined. */ - toggle?: React.KeyboardEventHandler | React.MouseEventHandler; + toggle?: React.KeyboardEventHandler | React.MouseEventHandler; keyboard?: boolean; backdrop?: boolean | 'static'; /** diff --git a/src/Modal/ModalHeader.tsx b/src/Modal/ModalHeader.tsx index 2ebeee69c..245291cb0 100644 --- a/src/Modal/ModalHeader.tsx +++ b/src/Modal/ModalHeader.tsx @@ -1,10 +1,11 @@ +import classNames from 'classnames'; import React, { FC, HTMLAttributes } from 'react'; import { CSSModule } from 'reactstrap/types/lib/utils'; -import classNames from 'classnames'; import { Icon } from '../Icon/Icon'; import { mapToCssModules } from '../utils'; export interface ModalHeaderProps extends HTMLAttributes { + // eslint-disable-next-line @typescript-eslint/no-explicit-any [key: string]: any; cssModule?: CSSModule; /** Componente che conterrà il nodo titolo. Valore di default: h5 */ @@ -12,7 +13,7 @@ export interface ModalHeaderProps extends HTMLAttributes { /** Componente che contenitore per l'header. Valore di default: div. */ wrapTag?: React.ElementType; /** Funzione da passare al tasto di chiusura nell'intestazione. Quando questa funzione non è presente il tasto di chiusura non viene mostrato. Valore di default: undefined */ - toggle?: React.MouseEventHandler; + toggle?: React.MouseEventHandler; /** Indica il nome dell'icona da utilizzare nel titolo. */ icon?: string; /** Classi da aggiungere al nodo contenitore. */ @@ -25,7 +26,6 @@ export const ModalHeader: FC = ({ icon, className, children, - Util, toggle, tag: Tag = 'h5', wrapTag: WrapTag = 'div', diff --git a/src/NavScroll/debounce.ts b/src/NavScroll/debounce.ts index ad5e9b596..72f8c996f 100644 --- a/src/NavScroll/debounce.ts +++ b/src/NavScroll/debounce.ts @@ -4,12 +4,12 @@ * Code: https://github.com/dej611/react-use-navscroll */ -export const debounce = (callback: Function, wait: number) => { +export const debounce = (callback: CallableFunction, wait: number) => { let timeoutId: NodeJS.Timeout; return (...args: unknown[]) => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { - callback.apply(null, args); + callback(...args); }, wait); }; }; diff --git a/src/NavScroll/useNavScroll.ts b/src/NavScroll/useNavScroll.ts index 21127689f..a7884de90 100644 --- a/src/NavScroll/useNavScroll.ts +++ b/src/NavScroll/useNavScroll.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ /* * This work derives from the React Use Navscroll library * Released under the MIT license by Marco Liberati diff --git a/src/NavScroll/useSizeDetector.ts b/src/NavScroll/useSizeDetector.ts index ab62378eb..f1e0a1dba 100644 --- a/src/NavScroll/useSizeDetector.ts +++ b/src/NavScroll/useSizeDetector.ts @@ -4,7 +4,6 @@ * Code: https://github.com/dej611/react-use-navscroll */ -/* eslint-disable no-restricted-globals */ import { useCallback, useEffect, useState } from 'react'; import { debounce } from './debounce'; import { useNavScrollArgs } from './types'; diff --git a/src/Notification/Notification.tsx b/src/Notification/Notification.tsx index 62c639de5..ddb3e318a 100644 --- a/src/Notification/Notification.tsx +++ b/src/Notification/Notification.tsx @@ -1,5 +1,5 @@ import React, { CSSProperties, FC, PropsWithChildren, useEffect } from 'react'; -import { ToastProps, useToast, cssTransition } from 'react-toastify'; +import { cssTransition, ToastProps, useToast } from 'react-toastify'; import { NotificationToastProps } from './NotificationContent'; import { NotificationCommonProps } from './types'; @@ -20,7 +20,6 @@ export const Notification: FC> = (props) => useEffect(() => { if (!isIn) deleteToast(); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [isIn]); useEffect(() => { diff --git a/src/Notification/NotificationContent.tsx b/src/Notification/NotificationContent.tsx index 0a2a799ab..8af92dc6c 100644 --- a/src/Notification/NotificationContent.tsx +++ b/src/Notification/NotificationContent.tsx @@ -1,9 +1,10 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import classNames from 'classnames'; import React, { CSSProperties, ReactNode } from 'react'; import { Button } from '../Button/Button'; -import classNames from 'classnames'; import { Icon } from '../Icon/Icon'; -import { usePosition } from './usePosition'; import { NotificationCommonProps } from './types'; +import { usePosition } from './usePosition'; export interface NotificationToastProps { /** Indica quale icona affiancare al titolo. */ diff --git a/src/Notification/core.tsx b/src/Notification/core.tsx index 9ce5195fa..f4aa53e21 100644 --- a/src/Notification/core.tsx +++ b/src/Notification/core.tsx @@ -1,7 +1,7 @@ import { ReactNode, isValidElement } from 'react'; import { toast } from 'react-toastify'; -import { createNotification } from './NotificationContent'; import type { NotificationOptions } from './NotificationContent'; +import { createNotification } from './NotificationContent'; import { NotificationId } from './types'; export function notify(title: string, options?: NotificationOptions): NotificationId; @@ -13,7 +13,7 @@ export function notify( bodyOrOptions?: ReactNode | NotificationOptions, options?: NotificationOptions ): NotificationId { - let body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined; + const body: ReactNode | undefined = isReactNode(bodyOrOptions) ? bodyOrOptions : undefined; const safeOptions = isReactNode(bodyOrOptions) ? { ...options } : bodyOrOptions || {}; const NotificationContent = createNotification(title, body, safeOptions); const internalOptions = { diff --git a/src/Progress/Progress.tsx b/src/Progress/Progress.tsx index 784af1848..f3f32cb00 100644 --- a/src/Progress/Progress.tsx +++ b/src/Progress/Progress.tsx @@ -1,6 +1,6 @@ -import React, { FC, HTMLAttributes, ElementType } from 'react'; import classNames from 'classnames'; import isNumber from 'is-number'; +import React, { ElementType, FC, HTMLAttributes } from 'react'; import { logError } from '../utils'; export interface ProgressProps extends HTMLAttributes { @@ -34,7 +34,6 @@ export const Progress: FC = ({ indeterminate = false, color, testId, - role = 'progressbar', ...attributes }) => { const Tag = tag; diff --git a/src/Select/shared.tsx b/src/Select/shared.tsx deleted file mode 100644 index e6e498351..000000000 --- a/src/Select/shared.tsx +++ /dev/null @@ -1,45 +0,0 @@ -const black = '#000'; -const primary = '#06c'; -const primaryDark = '#435a70'; -const primaryDarker = '#17324d'; - -// Types here depend of react-select internal emotion dep + more parametric stuff -// @TODO: fix it this way for now, will review later on -export const styles = { - container: (provided: any) => ({ ...provided, height: '2.5rem' }), - control: (provided: any) => ({ - ...provided, - height: '2.5rem', - borderRadius: '0', - borderLeft: 'none', - borderRight: 'none', - borderTop: 'none', - borderBottom: `solid ${primaryDark} 1px`, - boxShadow: 'none', - '&:hover': { borderBottom: `solid ${primaryDark} 1.25px` } // border style on hover - }), - dropdownIndicator: (provided: any) => ({ - ...provided, - fill: primaryDark - }), - option: (provided: any, { isDisabled, isFocused, isSelected }: any) => ({ - ...provided, - background: 'white', - textDecoration: isFocused || isSelected ? 'underline' : 'none', - color: isSelected ? primaryDarker : primary, - cursor: isDisabled ? 'not-allowed' : 'pointer' - }), - placeholder: (provided: any) => ({ - ...provided, - fill: primaryDark - }), - singleValue: (provided: any) => ({ - ...provided, - color: black, - fontWeight: 'bold' - }), - valueContainer: (provided: any) => ({ - ...provided, - height: '2.5rem' - }) -}; diff --git a/src/Stepper/StepperHeader.tsx b/src/Stepper/StepperHeader.tsx index 653204f9b..67e22ab00 100644 --- a/src/Stepper/StepperHeader.tsx +++ b/src/Stepper/StepperHeader.tsx @@ -1,5 +1,5 @@ -import React, { FC, HTMLAttributes, ElementType } from 'react'; import classNames from 'classnames'; +import React, { ElementType, FC, HTMLAttributes } from 'react'; export interface StepperHeaderProps extends HTMLAttributes { /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ @@ -12,7 +12,7 @@ export interface StepperHeaderProps extends HTMLAttributes { export const StepperHeader: FC = ({ tag = 'div', testId, className, children, ...attributes }) => { const Tag = tag; const wrapperClass = classNames('steppers-header', className); - // @ts-ignore not recognize children's props + // @ts-expect-error not recognize children's props const isMobile = children?.props?.variant === 'mobile'; return ( diff --git a/src/transitions.ts b/src/transitions.ts index 63304bba2..8ba7bc71a 100644 --- a/src/transitions.ts +++ b/src/transitions.ts @@ -27,6 +27,7 @@ export const TransitionsKeys = [ 'onExited' ]; +// eslint-disable-next-line @typescript-eslint/no-unused-vars const transitionStatus = { entering: 1, entered: 1, diff --git a/src/utils.tsx b/src/utils.tsx index c4a7bee9b..57db83fbe 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -30,7 +30,7 @@ export const notifyDeprecation = (message: string, options: { once: boolean } = }; export function mapToCssModules(className: string | null, cssModules?: Record) { - let finalClassNames = className == null ? '' : className; + const finalClassNames = className == null ? '' : className; if (!cssModules) { return finalClassNames; } diff --git a/stories/Components/Alert.stories.tsx b/stories/Components/Alert.stories.tsx index b97667a47..80482c316 100644 --- a/stories/Components/Alert.stories.tsx +++ b/stories/Components/Alert.stories.tsx @@ -1,21 +1,20 @@ -/* eslint jsx-a11y/anchor-is-valid: 0 */ -import { Meta, StoryObj } from "@storybook/react"; -import React, { useState } from "react"; -import { componentColor } from "../../.storybook/stories-helper"; -import { Alert } from "../../src"; +import { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; +import { componentColor } from '../../.storybook/stories-helper'; +import { Alert } from '../../src'; const meta: Meta = { - title: "Documentazione/Componenti/Alert", - component: Alert, - args: { - color: "success", - }, - argTypes: { - color: { - control: "select", - options: componentColor, - }, - }, + title: 'Documentazione/Componenti/Alert', + component: Alert, + args: { + color: 'success' + }, + argTypes: { + color: { + control: 'select', + options: componentColor + } + } }; export default meta; @@ -23,43 +22,44 @@ export default meta; type Story = StoryObj; export const _EsempiInterattivi: Story = { - render: ({ ...args }) => ( - - Questo è un alert di{args.color}! - - ), + render: ({ ...args }) => ( + + Questo è un alert di{args.color}! + + ) }; export const _LinkEvidenziato: Story = { - render: ({ ...args }) => ( - - Questo è un alert con un esempio di - - link - - evidenziato. - - ), - args: { - color: "danger", - }, + render: ({ ...args }) => ( + + Questo è un alert con un esempio di + + link + + evidenziato. + + ), + args: { + color: 'danger' + } }; export const _ContenutoAggiuntivo: Story = { - render: ({ ...args }) => ( - -

Avviso di successo!

-

- Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più a lungo in modo da poter vedere come funzioni - la spaziatura all'interno di un avviso con questo tipo di contenuto. -

-
-

Quando necessario, assicurarti di inserire le utilità di margine per mantenere gli spazi equilibrati.

- - ), + render: ({ ...args }) => ( + +

Avviso di successo!

+

+ Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più a lungo in + modo da poter vedere come funzioni la spaziatura all'interno di un avviso con questo tipo di contenuto. +

+
+

+ Quando necessario, assicurarti di inserire le utilità di margine per mantenere gli spazi equilibrati. +

+ + ) }; - const ChiusuraControllataWithHooks = ({ ...args }) => { const [open, setOpen] = useState(true); @@ -75,13 +75,13 @@ const ChiusuraControllataWithHooks = ({ ...args }) => { }; export const ChiusuraControllata: Story = { - render: (args ) => , - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, - args: { - color: "warning", - }, + render: (args) => , + parameters: { + docs: { + canvas: { sourceState: 'none' } + } + }, + args: { + color: 'warning' + } }; diff --git a/stories/Components/Avatar/Avatar.stories.tsx b/stories/Components/Avatar/Avatar.stories.tsx index 464e7f288..f41d8764f 100644 --- a/stories/Components/Avatar/Avatar.stories.tsx +++ b/stories/Components/Avatar/Avatar.stories.tsx @@ -1,10 +1,6 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta, StoryObj } from '@storybook/react'; import React, { useRef } from 'react'; -import { AvatarContainer, AvatarExtraText, AvatarIcon, - AvatarWrapper, - Icon, - UncontrolledTooltip -} from '../../../src'; +import { AvatarContainer, AvatarExtraText, AvatarIcon, AvatarWrapper, Icon, UncontrolledTooltip } from '../../../src'; const meta: Meta = { title: 'Documentazione/Componenti/Avatar', @@ -21,101 +17,104 @@ export default meta; type Story = StoryObj; +// eslint-disable-next-line @typescript-eslint/no-explicit-any const AvatarWithImageWithHooks = (args: any) => { - return ( - {args.results && args.results.length ? {`${args.results.at(0).name.last} -: null} + {args.results && args.results.length ? ( + {`${args.results.at(0).name.last} + ) : null} ); -} +}; export const AvatarWithImage: Story = { - loaders: [ - async () => ({ - fakeUser: await (await fetch("https://randomuser.me/api")).json(), //https://randomuser.me/documentation#howto - }), - ], - render: (args,{ loaded: { fakeUser } } ) => + loaders: [ + async () => ({ + fakeUser: await (await fetch('https://randomuser.me/api')).json() //https://randomuser.me/documentation#howto + }) + ], + render: (args, { loaded: { fakeUser } }) => }; export const AvatarWithText: Story = { - render: () => ( - - - - Mario Rossi - - - - Mario Rossi - - - - Mario Rossi - - - - Mario Rossi - - - - Mario Rossi - - - - Mario Rossi - - - ), + render: () => ( + + + + Mario Rossi + + + + Mario Rossi + + + + Mario Rossi + + + + Mario Rossi + + + + Mario Rossi + + + + Mario Rossi + + + ) }; export const AvatarWithIcon: Story = { - render: () => ( - - - - - - - - - - - - - - - - - - - - - ), + render: () => ( + + + + + + + + + + + + + + + + + + + + + ) }; export const AvatarLink: Story = { - render: () => ( - - - Anna Barbieri - - - - Mario Rossi - - - console.log("Click")} /> - - - ), + render: () => ( + + + Anna Barbieri + + + + Mario Rossi + + + console.log('Click')} /> + + + ) }; - const AvatarLinkWithTooltipWithHooks = () => { const withImageRef = useRef(null); const withTextRef = useRef(null); @@ -123,26 +122,26 @@ const AvatarLinkWithTooltipWithHooks = () => { return ( - - + + Anna Barbieri
Administrator - Anna Barbieri + Anna Barbieri - - + + Mario Rossi
Editor - - Mario Rossi + + Mario Rossi - - - + + + Search
News Archive @@ -153,48 +152,48 @@ const AvatarLinkWithTooltipWithHooks = () => { }; export const AvatarLinkWithTooltip: Story = { - render: () => , - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, + render: () => , + parameters: { + docs: { + canvas: { sourceState: 'none' } + } + } }; export const AvatarWithAdditionalText: Story = { - render: () => ( - - - - Mario Rossi - - -

- Mario Rossi -

- - - - - - Guilia Neri - - -

Guilia Neri

-

Lorem ipsum dolor

- - - - - Michele Dotti - - -

- Micehele Dotti -

- - - - - ), + render: () => ( + + + + Mario Rossi + + +

+ Mario Rossi +

+ + + + + + Guilia Neri + + +

Guilia Neri

+

Lorem ipsum dolor

+ + + + + Michele Dotti + + +

+ Micehele Dotti +

+ + + + + ) }; diff --git a/stories/Components/BackToTop.stories.tsx b/stories/Components/BackToTop.stories.tsx index b1c333ca6..ac776d997 100644 --- a/stories/Components/BackToTop.stories.tsx +++ b/stories/Components/BackToTop.stories.tsx @@ -1,11 +1,10 @@ -/* eslint jsx-a11y/anchor-is-valid: 0 */ -import { Meta, StoryObj } from "@storybook/react"; -import React from "react"; -import { BackToTop } from "../../src"; +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { BackToTop } from '../../src'; const meta: Meta = { - title: "Documentazione/Componenti/BackToTop", - component: BackToTop, + title: 'Documentazione/Componenti/BackToTop', + component: BackToTop }; export default meta; @@ -13,39 +12,39 @@ export default meta; type Story = StoryObj; export const Esempio: Story = { - render: () => , + render: () => }; export const Small: Story = { - render: (args) => , - args: { - small: true, - }, + render: (args) => , + args: { + small: true + } }; export const Shadow: Story = { - render: () => ( -
- - -
- ), + render: () => ( +
+ + +
+ ) }; export const Dark: Story = { - render: () => ( -
- - -
- ), + render: () => ( +
+ + +
+ ) }; export const DarkShadow: Story = { - render: () => ( -
- - -
- ), + render: () => ( +
+ + +
+ ) }; diff --git a/stories/Components/Callout.stories.tsx b/stories/Components/Callout.stories.tsx index ed1c12a8d..eda9a36c2 100644 --- a/stories/Components/Callout.stories.tsx +++ b/stories/Components/Callout.stories.tsx @@ -1,15 +1,14 @@ -/* eslint jsx-a11y/anchor-is-valid: 0 */ -import type { Meta, StoryObj } from "@storybook/react"; -import React from "react"; +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; -import { Callout, CalloutMoreFooter, CalloutText, CalloutTitle, Icon } from "../../src"; +import { Callout, CalloutMoreFooter, CalloutText, CalloutTitle, Icon } from '../../src'; const meta: Meta = { - title: "Documentazione/Componenti/Callout", - component: Callout, - parameters: { - layout: "centered", - }, + title: 'Documentazione/Componenti/Callout', + component: Callout, + parameters: { + layout: 'centered' + } }; export default meta; @@ -17,187 +16,178 @@ export default meta; type Story = StoryObj; export const EsempioBasico: Story = { - render: () => ( - - - Titolo Callout - - - Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus - vestibulum varius. - - - ), + render: () => ( + + + Titolo Callout + + + Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean non augue non purus vestibulum varius. + + + ) }; export const EsempioConIcona: Story = { - render: () => ( - - - - Confermato - Titolo Callout - - - Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus - vestibulum varius. - - - ), + render: () => ( + + + + Confermato + Titolo Callout + + + Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean non augue non purus vestibulum varius. + + + ) }; export const EsempioAccessibilita: Story = { - render: () => ( - - - - Confermato - Titolo Callout - - - Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus - vestibulum varius. - - - ), + render: () => ( + + + + Confermato + Titolo Callout + + + Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean non augue non purus vestibulum varius. + + + ) }; export const CalloutVariantiColore = { - render: ({ ...args }) => ( - - - - {args.title} - - - Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus - vestibulum varius. - - - ), - parameters: { - docs: { - controls: { - exclude: ["title", "className", "tag", "title", "highlight", "detailed", "testId"], - }, - }, - }, - /** - * Da verificare un modo per modificare l'icon al cambio del colore - */ - args: { - color: "success", - icon: "check", - title: "Usa", - }, - argTypes: { - color: { - control: "radio", - options: ["success", "warning", "danger", "note", "important"], - }, - icon: { - control: "radio", - options: ["check", "help", "close", "info"], - }, + render: ({ ...args }) => ( + + + + {args.title} + + + Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean non augue non purus vestibulum varius. + + + ), + parameters: { + docs: { + controls: { + exclude: ['title', 'className', 'tag', 'title', 'highlight', 'detailed', 'testId'] + } + } + }, + /** + * Da verificare un modo per modificare l'icon al cambio del colore + */ + args: { + color: 'success', + icon: 'check', + title: 'Usa' + }, + argTypes: { + color: { + control: 'radio', + options: ['success', 'warning', 'danger', 'note', 'important'] }, + icon: { + control: 'radio', + options: ['check', 'help', 'close', 'info'] + } + } }; export const CalloutHighlights = { - render: ({ ...args }) => ( - - - - {args.title} - - - Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut sed ex. In sed dignissim elit. - - - Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus - vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet. - - - ), - parameters: { - docs: { - controls: { - exclude: ["title", "className", "tag", "title", "highlight", "detailed", "testId"], - }, - }, - }, - /** - * Da verificare un modo per modificare l'icon e il titolo al cambio del colore - */ - args: { - color: "success", - icon: "check", - title: "Titolo", - }, - argTypes: { - color: { - control: "radio", - options: ["success", "warning", "danger", "note", "important"], - }, - icon: { - control: "radio", - options: ["check", "help", "close", "info"], - }, + render: ({ ...args }) => ( + + + + {args.title} + + + Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue molestie malesuada ut + sed ex. In sed dignissim elit. + + + Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean non augue non purus vestibulum varius. Maecenas ullamcorper tincidunt nulla quis laoreet. + + + ), + parameters: { + docs: { + controls: { + exclude: ['title', 'className', 'tag', 'title', 'highlight', 'detailed', 'testId'] + } + } + }, + /** + * Da verificare un modo per modificare l'icon e il titolo al cambio del colore + */ + args: { + color: 'success', + icon: 'check', + title: 'Titolo' + }, + argTypes: { + color: { + control: 'radio', + options: ['success', 'warning', 'danger', 'note', 'important'] }, + icon: { + control: 'radio', + options: ['check', 'help', 'close', 'info'] + } + } }; export const CalloutApprofondimento = { - render: () => ( - - - - Approfondimento - - - Quisque suscipit interdum augue non volutpat. Cras tristique arcu tortor. Mauris eu magna nibh. Curabitur - malesuada neque in lectus sagittis - accumsan. In vitae justo eros. Maecenas pellentesque lacinia ipsum vitae rhoncus. Vestibulum pretium tempor - turpis, nec gravida eros viverra - in. Proin dictum nibh ut semper tristique. - - - Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue - molestie malesuada ut sed ex. In - sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo odio - mauris semper dolor. - - - Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet,{' '} - consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas - ullamcorper tincidunt nulla quis - laoreet. - - -

- Aenean tortor enim, suscipit eget commodo at, imperdiet quis diam. Vestibulum non accumsan felis, at - ultrices lorem. Pellentesque ac - diam a ipsum cursus interdum id nec odio. Vestibulum nec congue mauris. Aliquam et dui purus. Mauris in - imperdiet risus, sed blandit - tellus. Donec posuere accumsan lacinia. Mauris dignissim, sem vel volutpat rhoncus, neque mi ullamcorper - ante, vitae volutpat ipsum quam - id purus. Duis tincidunt sodales nisl eget ultricies. Sed condimentum mi eu ex venenatis, quis bibendum - dui ultrices. Quisque ex eros, - pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis - interdum scelerisque magna nec - malesuada. -

-

- Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue - molestie malesuada ut sed ex. - In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat interdum magna, eu commodo - odio mauris semper dolor. -

-

- Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet,{' '} - consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas - ullamcorper tincidunt nulla quis - laoreet. -

- - - ), + render: () => ( + + + + Approfondimento + + + Quisque suscipit interdum augue non volutpat. Cras tristique arcu tortor. Mauris eu magna nibh. Curabitur + malesuada neque in lectus sagittis accumsan. In vitae justo eros. Maecenas pellentesque lacinia ipsum vitae + rhoncus. Vestibulum pretium tempor turpis, nec gravida eros viverra in. Proin dictum nibh ut semper tristique. + + + Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue + molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat + interdum magna, eu commodo odio mauris semper dolor. + + + Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet,{' '} + consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas ullamcorper + tincidunt nulla quis laoreet. + + +

+ Aenean tortor enim, suscipit eget commodo at, imperdiet quis diam. Vestibulum non accumsan felis, at ultrices + lorem. Pellentesque ac diam a ipsum cursus interdum id nec odio. Vestibulum nec congue mauris. Aliquam et dui + purus. Mauris in imperdiet risus, sed blandit tellus. Donec posuere accumsan lacinia. Mauris dignissim, sem + vel volutpat rhoncus, neque mi ullamcorper ante, vitae volutpat ipsum quam id purus. Duis tincidunt sodales + nisl eget ultricies. Sed condimentum mi eu ex venenatis, quis bibendum dui ultrices. Quisque ex eros, + pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum + scelerisque magna nec malesuada. +

+

+ Maecenas at erat id sem interdum efficitur eu sed nunc. Mauris sit amet erat eget augue + molestie malesuada ut sed ex. In sed dignissim elit. Donec efficitur, sem eget vestibulum auctor, sem erat + interdum magna, eu commodo odio mauris semper dolor. +

+

+ Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet,{' '} + consectetur adipiscing elit. Aenean non augue non purus vestibulum varius. Maecenas + ullamcorper tincidunt nulla quis laoreet. +

+ + + ) }; diff --git a/stories/Components/Card.stories.tsx b/stories/Components/Card.stories.tsx index 297d37114..eb1bec00b 100644 --- a/stories/Components/Card.stories.tsx +++ b/stories/Components/Card.stories.tsx @@ -1,4 +1,3 @@ -/* eslint jsx-a11y/anchor-is-valid: 0 */ import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; @@ -19,8 +18,8 @@ import { } from '../../src'; const meta: Meta = { - title: "Documentazione/Componenti/Cards", - component: Card, + title: 'Documentazione/Componenti/Cards', + component: Card }; export default meta; @@ -486,10 +485,12 @@ export const CardTeaserMultiple: Story = {
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… + - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. @@ -497,8 +498,8 @@ export const CardTeaserMultiple: Story = { Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor… - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. @@ -509,8 +510,8 @@ export const CardTeaserMultiple: Story = { Lorem ipsum dolor sit amet - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. diff --git a/stories/Components/Footer.stories.tsx b/stories/Components/Footer.stories.tsx index e728b14c6..52a815fdf 100644 --- a/stories/Components/Footer.stories.tsx +++ b/stories/Components/Footer.stories.tsx @@ -1,11 +1,10 @@ -/* eslint jsx-a11y/anchor-is-valid: 0 */ import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { Button, Col, Container, Form, Icon, Input, Label, LinkList, LinkListItem, Row } from '../../src'; //Non esiste un componente specifico per cui uso Container come riferimento per la storia const meta: Meta = { - title: "Documentazione/Menu di navigazione/Footer", + title: 'Documentazione/Menu di navigazione/Footer', component: Container, args: { townName: 'Nome del Comune', @@ -361,4 +360,4 @@ export const FooterCompatto: Story = {
) -}; \ No newline at end of file +}; diff --git a/stories/Components/Form/Input.stories.tsx b/stories/Components/Form/Input.stories.tsx index 0e437a780..b998460d0 100644 --- a/stories/Components/Form/Input.stories.tsx +++ b/stories/Components/Form/Input.stories.tsx @@ -1,12 +1,13 @@ -import { Meta, StoryObj } from "@storybook/react"; -// @ts-ignore per il momento questo modulo non ha types -import Autocomplete from "accessible-autocomplete/react"; // Reference to https://www.npmjs.com/package/accessible-autocomplete -import React, { useState } from "react"; -import { Button, FormGroup, Icon, Input, TextArea } from "../../../src"; +import { Meta, StoryObj } from '@storybook/react'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore non ci sono i types +import Autocomplete from 'accessible-autocomplete/react'; // Reference to https://www.npmjs.com/package/accessible-autocomplete +import React, { useState } from 'react'; +import { Button, FormGroup, Icon, Input, TextArea } from '../../../src'; const meta: Meta = { - title: "Documentazione/Form/Input", - component: Input, + title: 'Documentazione/Form/Input', + component: Input }; export default meta; @@ -14,216 +15,219 @@ export default meta; type Story = StoryObj; export const EsempiDiCampiDiInput: Story = { - render: () => { - return ( -
- - - - -
- ); - } + render: () => { + return ( +
+ + + + +
+ ); + } }; export const UtilizzoDiPlaceholderELabel: Story = { - render: () => ( -
- - - - -
- ) + render: () => ( +
+ + + + +
+ ) }; export const InputConIconaOBottoni: Story = { - render: () => { - return ( - <> - } - /> - } - /> - } - hasButtonRight - buttonRight={} - /> - - ) - } -} - + render: () => { + return ( + <> + } + /> + } + /> + } + hasButtonRight + buttonRight={} + /> + + ); + } +}; export const InputPassword: Story = { - args: { - type: "password", - id: "exampleInputPassword", - label: "Password con label, placeholder e testo di aiuto", - infoText: "Inserisci almeno 8 caratteri e una lettera maiuscola", - } + args: { + type: 'password', + id: 'exampleInputPassword', + label: 'Password con label, placeholder e testo di aiuto', + infoText: 'Inserisci almeno 8 caratteri e una lettera maiuscola' + } }; export const Disabilitato: Story = { - args: { - label: "Contenuto disabilitato", - id: "exampleDisabled", - disabled: true - } -} + args: { + label: 'Contenuto disabilitato', + id: 'exampleDisabled', + disabled: true + } +}; export const Readonly: Story = { - args: { - label: "Contenuto in sola lettura", - id: "examplereadOnly", - readOnly: true - } -} + args: { + label: 'Contenuto in sola lettura', + id: 'examplereadOnly', + readOnly: true + } +}; export const ReadonlyNormalizzato: Story = { - args: { - type: 'text', - label: "Contenuto in sola lettura", - id: "exampleNormalized", - normalized: true - } -} + args: { + type: 'text', + label: 'Contenuto in sola lettura', + id: 'exampleNormalized', + normalized: true + } +}; export const _InputAutocompleteConDatiAccessibile: Story = { - render: () => { - const multiOptions: { value: string, label: string }[] = [ - { value: "1", label: "Abruzzo" }, - { value: "2", label: "Basilicata" }, - { value: "3", label: "Calabria" }, - { value: "4", label: "Campania" }, - { value: "5", label: "Emilia Romagna" }, - { value: "6", label: "Friuli Venezia Giulia" }, - { value: "7", label: "Lazio" }, - { value: "8", label: "Liguria" }, - { value: "9", label: "Lombardia" }, - { value: "10", label: "Marche" }, - { value: "11", label: "Molise" }, - { value: "12", label: "Piemonte" }, - { value: "13", label: "Puglia" }, - { value: "14", label: "Sardegna" }, - { value: "15", label: "Sicilia" }, - { value: "16", label: "Toscana" }, - { value: "17", label: "Trentino Alto Adige" }, - { value: "18", label: "Umbria" }, - { value: "19", label: "Valle d'Aosta" }, - { value: "20", label: "Veneto" }, - ]; - const suggest = (query: any, populateResults: any) => { - const filteredResults = multiOptions.filter((i) => i.label.toLowerCase().includes(query.toLowerCase())); - let data = filteredResults.map((item) => { - return item.label; - }); - populateResults(data); - }; - - return ( - - - "Nessun risultato"} - /> - - ); - }, - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, + render: () => { + const multiOptions: { value: string; label: string }[] = [ + { value: '1', label: 'Abruzzo' }, + { value: '2', label: 'Basilicata' }, + { value: '3', label: 'Calabria' }, + { value: '4', label: 'Campania' }, + { value: '5', label: 'Emilia Romagna' }, + { value: '6', label: 'Friuli Venezia Giulia' }, + { value: '7', label: 'Lazio' }, + { value: '8', label: 'Liguria' }, + { value: '9', label: 'Lombardia' }, + { value: '10', label: 'Marche' }, + { value: '11', label: 'Molise' }, + { value: '12', label: 'Piemonte' }, + { value: '13', label: 'Puglia' }, + { value: '14', label: 'Sardegna' }, + { value: '15', label: 'Sicilia' }, + { value: '16', label: 'Toscana' }, + { value: '17', label: 'Trentino Alto Adige' }, + { value: '18', label: 'Umbria' }, + { value: '19', label: "Valle d'Aosta" }, + { value: '20', label: 'Veneto' } + ]; + + return ( + + + 'Nessun risultato'} + /> + + ); + }, + parameters: { + docs: { + canvas: { sourceState: 'none' } + } + } }; -export const AreaDiTesto: Story = { render: () =>