@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.0

package/src/ResponseActions/ResponseActions.test.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ResponseActions from './ResponseActions';
+import ResponseActions, { ActionProps } from './ResponseActions';
 import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 import Message from '../Message';
@@ -41,6 +40,15 @@ const CUSTOM_ACTIONS = [
   }
 ];
 
+const ALL_ACTIONS_DATA_TEST = [
+  { type: 'positive', label: 'Good response', dataTestId: 'positive' },
+  { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
+  { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+  { type: 'share', label: 'Share', dataTestId: 'share' },
+  { type: 'download', label: 'Download', dataTestId: 'download' },
+  { type: 'listen', label: 'Listen', dataTestId: 'listen' }
+];
+
 describe('ResponseActions', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -53,6 +61,7 @@ describe('ResponseActions', () => {
           negative: { onClick: jest.fn() },
           copy: { onClick: jest.fn() },
           share: { onClick: jest.fn() },
+          download: { onClick: jest.fn() },
           listen: { onClick: jest.fn() }
         }}
       />
@@ -61,8 +70,9 @@ describe('ResponseActions', () => {
     const badBtn = screen.getByRole('button', { name: 'Bad response' });
     const copyBtn = screen.getByRole('button', { name: 'Copy' });
     const shareBtn = screen.getByRole('button', { name: 'Share' });
+    const downloadBtn = screen.getByRole('button', { name: 'Download' });
     const listenBtn = screen.getByRole('button', { name: 'Listen' });
-    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, downloadBtn, listenBtn];
     buttons.forEach((button) => {
       expect(button).toBeTruthy();
     });
@@ -119,6 +129,103 @@ describe('ResponseActions', () => {
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
+
+  it('should handle isClicked prop within group of buttons correctly', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn() }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set "listen" button as active if its `isClicked` is true', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: false },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: false },
+            listen: { 'data-testid': 'listen-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    expect(screen.getByTestId('listen-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    expect(screen.getByTestId('positive-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should prioritize "positive" when both "positive" and "negative" are set to clicked', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    // Positive button should take precendence
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set an additional action button as active if it is initially clicked and no predefined are clicked', async () => {
+    const [additionalActions] = CUSTOM_ACTIONS;
+    const customActions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: false },
+      ...Object.keys(additionalActions).reduce((acc, actionKey) => {
+        acc[actionKey] = {
+          ...additionalActions[actionKey],
+          'data-testid': actionKey,
+          isClicked: actionKey === 'regenerate'
+        };
+        return acc;
+      }, {})
+    };
+    render(<ResponseActions actions={customActions} />);
+
+    Object.keys(customActions).forEach((actionKey) => {
+      if (actionKey === 'regenerate') {
+        expect(screen.getByTestId(actionKey)).toHaveClass('pf-chatbot__button--response-action-clicked');
+      } else {
+        // Other actions should not have clicked class
+        expect(screen.getByTestId(actionKey)).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+      }
+    });
+  });
+
+  it('should activate the clicked button and deactivate any previously active button', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: true }
+    };
+    render(<ResponseActions actions={actions} />);
+
+    const negativeBtn = screen.getByTestId('negative');
+    const positiveBtn = screen.getByTestId('positive');
+    // negative button is initially clicked
+    expect(negativeBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(positiveBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(positiveBtn);
+
+    // positive button should now have the clicked class
+    expect(positiveBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(negativeBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
   it('should render buttons correctly', () => {
     ALL_ACTIONS.forEach(({ type, label }) => {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
@@ -159,6 +266,7 @@ describe('ResponseActions', () => {
       { type: 'negative', ariaLabel: 'Thumbs down' },
       { type: 'copy', ariaLabel: 'Copy the message' },
       { type: 'share', ariaLabel: 'Share it with friends' },
+      { type: 'download', ariaLabel: 'Download your cool message' },
       { type: 'listen', ariaLabel: 'Listen up' }
     ];
     actions.forEach(({ type, ariaLabel }) => {
@@ -181,6 +289,13 @@ describe('ResponseActions', () => {
     });
   });
 
+  it('should be able to add custom attributes to buttons', () => {
+    ALL_ACTIONS_DATA_TEST.forEach(({ type, dataTestId }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn(), 'data-testid': dataTestId } }} />);
+      expect(screen.getByTestId(dataTestId)).toBeTruthy();
+    });
+  });
+
   it('should be able to add custom actions', () => {
     CUSTOM_ACTIONS.forEach((action) => {
       const key = Object.keys(action)[0];
@@ -192,12 +307,14 @@ describe('ResponseActions', () => {
               onClick: action[key].onClick,
               // doing this just because it's easier to test without a regex for the button name
               ariaLabel: action[key].ariaLabel.toLowerCase(),
-              icon: action[key].icon
+              icon: action[key].icon,
+              'data-testid': action[key]
             }
           }}
         />
       );
       expect(screen.getByRole('button', { name: key })).toBeTruthy();
+      expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
 });

package/src/ResponseActions/ResponseActions.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   ExternalLinkAltIcon,
   VolumeUpIcon,
   OutlinedThumbsUpIcon,
   OutlinedThumbsDownIcon,
-  OutlinedCopyIcon
+  OutlinedCopyIcon,
+  DownloadIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
@@ -36,25 +38,57 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
   'aria-controls'?: string;
 }
 
+type ExtendedActionProps = ActionProps & {
+  [key: string]: any;
+};
 export interface ResponseActionProps {
   /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
-  actions: Record<string, ActionProps | undefined> & {
+  actions: Record<string, ExtendedActionProps | undefined> & {
     positive?: ActionProps;
     negative?: ActionProps;
     copy?: ActionProps;
     share?: ActionProps;
+    download?: ActionProps;
     listen?: ActionProps;
   };
 }
 
-export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({ actions }) => {
-  const [activeButton, setActiveButton] = React.useState<string>();
-  const { positive, negative, copy, share, listen, ...additionalActions } = actions;
-  const responseActions = React.useRef<HTMLDivElement>(null);
+export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
+  const [activeButton, setActiveButton] = useState<string>();
+  const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
+  useEffect(() => {
+    // Define the order of precedence for checking initial `isClicked`
+    const actionPrecedence = ['positive', 'negative', 'copy', 'share', 'download', 'listen'];
+    let initialActive: string | undefined;
+
+    // Check predefined actions first based on precedence
+    for (const actionName of actionPrecedence) {
+      const actionProp = actions[actionName as keyof typeof actions];
+      if (actionProp?.isClicked) {
+        initialActive = actionName;
+        break;
+      }
+    }
+    // If no predefined action was initially clicked, check additionalActions
+    if (!initialActive) {
+      const clickedActionName = Object.keys(additionalActions).find(
+        (actionName) => !actionPrecedence.includes(actionName) && additionalActions[actionName]?.isClicked
+      );
+      initialActive = clickedActionName;
+    }
+    if (initialActive) {
+      // Click state is explicitly controlled by consumer.
+      setClickStatePersisted(true);
+    }
+    setActiveButton(initialActive);
+  }, [actions]);
+
+  const { positive, negative, copy, share, download, listen, ...additionalActions } = actions;
+  const responseActions = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleClickOutside = (e) => {
-      if (responseActions.current && !responseActions.current.contains(e.target)) {
+      if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
         setActiveButton(undefined);
       }
     };
@@ -63,13 +97,14 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
     return () => {
       window.removeEventListener('click', handleClickOutside);
     };
-  }, []);
+  }, [clickStatePersisted]);
 
   const handleClick = (
-    e: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent,
+    e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
-    onClick?: (event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
+    onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
+    setClickStatePersisted(false);
     setActiveButton(id);
     onClick && onClick(e);
   };
@@ -78,6 +113,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
     <div ref={responseActions} className="pf-chatbot__response-actions">
       {positive && (
         <ResponseActionButton
+          {...positive}
           ariaLabel={positive.ariaLabel ?? 'Good response'}
           clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'positive', positive.onClick)}
@@ -95,6 +131,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {negative && (
         <ResponseActionButton
+          {...negative}
           ariaLabel={negative.ariaLabel ?? 'Bad response'}
           clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'negative', negative.onClick)}
@@ -112,6 +149,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {copy && (
         <ResponseActionButton
+          {...copy}
           ariaLabel={copy.ariaLabel ?? 'Copy'}
           clickedAriaLabel={copy.ariaLabel ?? 'Copied'}
           onClick={(e) => handleClick(e, 'copy', copy.onClick)}
@@ -129,6 +167,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {share && (
         <ResponseActionButton
+          {...share}
           ariaLabel={share.ariaLabel ?? 'Share'}
           clickedAriaLabel={share.ariaLabel ?? 'Shared'}
           onClick={(e) => handleClick(e, 'share', share.onClick)}
@@ -144,8 +183,27 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           aria-controls={share['aria-controls']}
         ></ResponseActionButton>
       )}
+      {download && (
+        <ResponseActionButton
+          {...download}
+          ariaLabel={download.ariaLabel ?? 'Download'}
+          clickedAriaLabel={download.ariaLabel ?? 'Downloaded'}
+          onClick={(e) => handleClick(e, 'download', download.onClick)}
+          className={download.className}
+          isDisabled={download.isDisabled}
+          tooltipContent={download.tooltipContent ?? 'Download'}
+          clickedTooltipContent={download.clickedTooltipContent ?? 'Downloaded'}
+          tooltipProps={download.tooltipProps}
+          icon={<DownloadIcon />}
+          isClicked={activeButton === 'download'}
+          ref={download.ref}
+          aria-expanded={download['aria-expanded']}
+          aria-controls={download['aria-controls']}
+        ></ResponseActionButton>
+      )}
       {listen && (
         <ResponseActionButton
+          {...listen}
           ariaLabel={listen.ariaLabel ?? 'Listen'}
           clickedAriaLabel={listen.ariaLabel ?? 'Listening'}
           onClick={(e) => handleClick(e, 'listen', listen.onClick)}
@@ -163,6 +221,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {Object.keys(additionalActions).map((action) => (
         <ResponseActionButton
+          {...additionalActions[action]}
           key={action}
           ariaLabel={additionalActions[action]?.ariaLabel}
           clickedAriaLabel={additionalActions[action]?.clickedAriaLabel}

package/src/Settings/SettingsForm.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';

package/src/Settings/SettingsForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface SettingsFormProps {
   /** Class applied to form container */
@@ -9,12 +9,7 @@ export interface SettingsFormProps {
   isCompact?: boolean;
 }
 
-export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({
-  className,
-  fields = [],
-  isCompact,
-  ...props
-}) => (
+export const SettingsForm: FunctionComponent<SettingsFormProps> = ({ className, fields = [], isCompact, ...props }) => (
   <div
     className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
     {...props}

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
 
 export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,7 +10,7 @@ export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivEleme
   type?: string;
 }
 
-export const SourceDetailsMenuItem: React.FunctionComponent<SourceDetailsMenuItemProps> = ({
+export const SourceDetailsMenuItem: FunctionComponent<SourceDetailsMenuItemProps> = ({
   icon,
   name,
   type,

package/src/SourcesCard/SourcesCard.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -243,4 +242,18 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
   });
+
+  it('should call onClick appropriately', async () => {
+    const spy = jest.fn();
+    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '', onClick: spy }]} />);
+    await userEvent.click(screen.getByRole('link', { name: /How to make an apple pie/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should apply titleProps appropriately', () => {
+    render(
+      <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }]} />
+    );
+    expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
+  });
 });

package/src/SourcesCard/SourcesCard.tsx

@@ -1,11 +1,12 @@
 // ============================================================================
 // Chatbot Main - Messages - Sources Card
 // ============================================================================
-import React from 'react';
-
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useState } from 'react';
 // Import PatternFly components
 import {
   Button,
+  ButtonProps,
   ButtonVariant,
   Card,
   CardBody,
@@ -31,11 +32,20 @@ export interface SourcesCardProps extends CardProps {
   paginationAriaLabel?: string;
   /** Content rendered inside the paginated card */
   sources: {
+    /** Title of sources card */
     title?: string;
+    /** Link to source */
     link: string;
+    /** Body of sources card */
     body?: React.ReactNode | string;
+    /** Whether link is external */
     isExternal?: boolean;
+    /** Whether sources card is expandable */
     hasShowMore?: boolean;
+    /** onClick event applied to the title of the Sources card */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Any additional props applied to the title of the Sources card  */
+    titleProps?: ButtonProps;
   }[];
   /** Label for the English word "source" */
   sourceWord?: string;
@@ -57,7 +67,7 @@ export interface SourcesCardProps extends CardProps {
   showLessWords?: string;
 }
 
-const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
+const SourcesCard: FunctionComponent<SourcesCardProps> = ({
   className,
   isDisabled,
   paginationAriaLabel = 'Pagination',
@@ -74,14 +84,14 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   isCompact,
   ...props
 }: SourcesCardProps) => {
-  const [page, setPage] = React.useState(1);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [page, setPage] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+  const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
-  const handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
     onSetPage && onSetPage(_evt, newPage);
   };
@@ -107,6 +117,8 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
             isInline
             rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
             target={sources[page - 1].isExternal ? '_blank' : undefined}
+            onClick={sources[page - 1].onClick ?? undefined}
+            {...sources[page - 1].titleProps}
           >
             {renderTitle(sources[page - 1].title)}
           </Button>

package/src/TermsOfUse/TermsOfUse.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/TermsOfUse/TermsOfUse.tsx

@@ -1,7 +1,8 @@
 // ============================================================================
 // Terms of Use Modal - Chatbot Modal Extension
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
 import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
@@ -37,7 +38,7 @@ export interface TermsOfUseProps extends ModalProps {
   isCompact?: boolean;
 }
 
-export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
+export const TermsOfUseBase: FunctionComponent<TermsOfUseProps> = ({
   handleModalToggle,
   isModalOpen,
   onPrimaryAction,
@@ -55,12 +56,12 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   isCompact,
   ...props
 }: TermsOfUseProps) => {
-  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handlePrimaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onPrimaryAction && onPrimaryAction(_event);
   };
 
-  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleSecondaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     onSecondaryAction(_event);
   };
 
@@ -115,7 +116,7 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   return modal;
 };
 
-const TermsOfUse = React.forwardRef((props: TermsOfUseProps, ref: React.Ref<HTMLDivElement>) => (
+const TermsOfUse = forwardRef((props: TermsOfUseProps, ref: Ref<HTMLDivElement>) => (
   <TermsOfUseBase innerRef={ref} {...props} />
 ));
 

package/tsconfig.cjs.json

@@ -5,4 +5,3 @@
     "module": "commonjs"
   }
 }
-  

package/tsconfig.json

@@ -9,7 +9,7 @@
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */
@@ -26,7 +26,7 @@
 
     /* Strict Type-Checking Options */
     "strict": true /* Enable all strict type-checking options. */,
-    "noImplicitAny": false,                       /* Raise error on expressions and declarations with an implied 'any' type. */
+    "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
     // "strictNullChecks": true,                    /* Enable strict null checks. */
     // "strictFunctionTypes": true,                 /* Enable strict checking of function types. */
     // "strictBindCallApply": true,                 /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
@@ -69,5 +69,5 @@
     "skipLibCheck": true /* Skip type checking of declaration files. */,
     "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   },
-  "include": ["./src/*", "./src/**/*", "./cypress/**/*"],
+  "include": ["./src/*", "./src/**/*", "./cypress/**/*"]
 }