Feat(web-react): Mark all components as Client components

- Adding support for React Server Components
@see https://react.dev/reference/rsc/use-client

solve #DS-1392

packages/web-react/README.md

@@ -4,6 +4,7 @@
 [![minified + gzip](https://badgen.net/bundlephobia/minzip/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
 [![dependency count](https://badgen.net/bundlephobia/dependency-count/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
 [![tree shaking](https://badgen.net/bundlephobia/tree-shaking/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
+[![client components](https://badgen.net/badge/client%20components/supported/green)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react)
 
 > React implementation of Spirit Design System components.
 

packages/web-react/src/components/Accordion/Accordion.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Accordion/AccordionContent.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Accordion/AccordionContext.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { AccordionHandlingProps } from '../../types';
 

packages/web-react/src/components/Accordion/AccordionHeader.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Accordion/AccordionItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Accordion/AccordionItemContext.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { AccordionItemContextProps } from '../../types';
 

packages/web-react/src/components/Accordion/UncontrolledAccordion.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { UncontrolledAccordionProps } from '../../types';
 import Accordion from './Accordion';

packages/web-react/src/components/Accordion/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Accordion';
 export * from './AccordionItem';
 export * from './AccordionHeader';

packages/web-react/src/components/Alert/Alert.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Alert/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Alert';
 export * from './useAlertStyleProps';
 export { default as Alert } from './Alert';

packages/web-react/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, Fragment } from 'react';
 import { useStyleProps } from '../../hooks/styleProps';

packages/web-react/src/components/Breadcrumbs/BreadcrumbsItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Breadcrumbs/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Breadcrumbs';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export * from './BreadcrumbsItem';

packages/web-react/src/components/Button/Button.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Button/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Button';
 export * from './useButtonAriaProps';
 export * from './useButtonStyleProps';

packages/web-react/src/components/ButtonLink/ButtonLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, ForwardedRef, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/ButtonLink/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './ButtonLink';
 export * from './useButtonLinkAriaProps';
 export * from './useButtonLinkStyleProps';

packages/web-react/src/components/Checkbox/Checkbox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { forwardRef, ForwardedRef } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Checkbox/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Checkbox';
 export * from './useCheckboxStyleProps';
 export { default as Checkbox } from './Checkbox';

packages/web-react/src/components/Collapse/Collapse.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { MutableRefObject, useRef } from 'react';
 import { Transition, TransitionStatus } from 'react-transition-group';

packages/web-react/src/components/Collapse/UncontrolledCollapse.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { SpiritUncontrolledCollapseProps } from '../../types';
 import Collapse from './Collapse';

packages/web-react/src/components/Collapse/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Collapse';
 export { default as Collapse } from './Collapse';
 export * from './UncontrolledCollapse';

packages/web-react/src/components/Container/Container.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks/styleProps';

packages/web-react/src/components/Container/index.ts

@@ -1,2 +1,4 @@
+'use client';
+
 export * from './Container';
 export { default as Container } from './Container';

packages/web-react/src/components/Dialog/Dialog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef, MutableRefObject, Children, cloneElement, forwardRef, ReactElement, ForwardedRef } from 'react';
 import { useCancelEvent, useClickOutside } from '../../hooks';
 import { DialogProps } from '../../types';

packages/web-react/src/components/Dialog/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Dialog';
 export { default as Dialog } from './Dialog';
 export * from './useDialog';

packages/web-react/src/components/Divider/Divider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Divider/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Divider';
 export * from './useDividerStyleProps';
 export { default as Divider } from './Divider';

packages/web-react/src/components/Dropdown/Dropdown.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import { useClickOutside, useStyleProps } from '../../hooks';

packages/web-react/src/components/Dropdown/DropdownContext.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { MutableRefObject, createContext, useContext } from 'react';
 import { Placements } from '../../constants';
 import { ClickEvent, PlacementDictionaryType } from '../../types';

packages/web-react/src/components/Dropdown/DropdownPopover.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Dropdown/DropdownTrigger.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Dropdown/UncontrolledDropdown.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Dropdown/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export { default as Dropdown } from './Dropdown';
 export { default as DropdownTrigger } from './DropdownTrigger';
 export { default as DropdownPopover } from './DropdownPopover';

packages/web-react/src/components/Field/HelperText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, useEffect } from 'react';
 import { HelperTextProps } from './types';
 

packages/web-react/src/components/Field/ValidationText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { ElementType, useEffect } from 'react';
 import { ValidationTextProps } from './types';
 

packages/web-react/src/components/Field/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './HelperText';
 export * from './useAriaIds';
 export * from './ValidationText';

packages/web-react/src/components/FieldGroup/FieldGroup.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/FieldGroup/index.ts

@@ -1,2 +1,4 @@
+'use client';
+
 export * from './FieldGroup';
 export { default as FieldGroup } from './FieldGroup';

packages/web-react/src/components/FileUploader/AttachmentActionButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/FileUploader/AttachmentDismissButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/FileUploader/AttachmentImagePreview.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { FileMetadata } from '../../types/fileUploader';
 import { IMAGE_DIMENSION } from './constants';

packages/web-react/src/components/FileUploader/FileUploader.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/FileUploader/FileUploaderAttachment.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { MouseEvent, RefObject, useRef, useState } from 'react';
 import { useClassNamePrefix, useStyleProps } from '../../hooks';

packages/web-react/src/components/FileUploader/FileUploaderContext.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { FileUploaderHandlingProps, FileUploaderErrorMessagesProps } from '../../types';
 

packages/web-react/src/components/FileUploader/FileUploaderInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useDeprecationMessage, useStyleProps } from '../../hooks';

packages/web-react/src/components/FileUploader/FileUploaderList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/FileUploader/UncontrolledFileUploader.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect } from 'react';
 import { SpiritUncontrolledFileUploaderProps } from '../../types';
 import FileUploader from './FileUploader';

packages/web-react/src/components/FileUploader/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export { default as FileUploader } from './FileUploader';
 export { default as FileUploaderInput } from './FileUploaderInput';
 export { default as FileUploaderList } from './FileUploaderList';

packages/web-react/src/components/Grid/Grid.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Grid/GridItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Grid/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './Grid';
 export * from './GridItem';
 export * from './useGridStyleProps';

packages/web-react/src/components/Header/Header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDesktopActions.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps, useLastActiveFocus } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialogActions.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialogButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialogCloseButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialogContext.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useContext } from 'react';
 import { ClickEvent } from '../../types';
 

packages/web-react/src/components/Header/HeaderDialogLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialogNav.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialogNavItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderDialogText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';

packages/web-react/src/components/Header/HeaderLink.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { ElementType, forwardRef } from 'react';
 import { useStyleProps } from '../../hooks';