301 update files for nextjs with use client

package.json

@@ -5,7 +5,7 @@
     "name": "TobiTRy"
   },
   "private": false,
-  "version": "0.5.4",
+  "version": "0.5.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -49,6 +49,7 @@
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "react-router-dom": "^6.23.0",
+    "rollup-preserve-directives": "^1.1.1",
     "vite-plugin-dts": "^3.9.0"
   },
   "devDependencies": {

src/components/atoms/ActionWrapper/ActionWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 // Define specific prop types for 'a' and 'button'

src/components/atoms/AlignedLabel/AlignedLabel.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyledAlignedLabel } from './AlignedLabel.style';
 import { Typography } from '@/components/atoms/Typography';
 

src/components/atoms/AutoSizingBox/AutoSizingBox.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { useEffect, useRef, useState } from 'react';
 import { InnerContentWrapper } from './AutoSizingBox.style';
 import { TAutoSizingBox } from './TAutoSizingBox.model';

src/components/atoms/AvilableDot/AvailableDot.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { styled } from 'styled-components';
 
 import { TTheme } from '@/types/TTheme';

src/components/atoms/BackDrop/BackDrop.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 

src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyledCheckerBoardPattern } from './CheckerBoardPattern.style';
 import { TCheckerBoardPattern } from './TCheckerBoardPattern.model';
 

src/components/atoms/ColorIndicator/ColorIndicator.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Color from 'color';
 
 import { Indicator, WrapperIndicator } from './ColorIndicator.style';

src/components/atoms/ColoredText/ColoredText.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TDynamicElement } from '@/types/TDynamicElement';
 import { StyledItem } from './ColoredText.style';
 import { TColoredText } from './TColoredText.model';

src/components/atoms/DateInput/DateInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useState } from 'react';
 
 import { TDateInputPropsWithNativeAttrs } from './TDateInput.model';

src/components/atoms/DateNumberAtom/DateNumberAtom.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { Typography } from '@/components/atoms/Typography';
 import { StyledDay } from './DateNumberAtom.style';
 import { IDateNumberAtom } from './IDateNumberAtom.model';

src/components/atoms/DateOutput/DateOutput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useMemo, useState } from 'react';
 
 import { Typography } from '@/components/atoms/Typography';

src/components/atoms/DescriptionPreview/DescriptionPreview.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 
 import { Typography } from '@/components/atoms/Typography';
@@ -23,7 +25,7 @@ export default function DescriptionPreview(props: TDescriptionPreview) {
               layer={buttonText?.layer ?? 0}
               fontWeight={'bold'}
             >
-              {isShowMore ? buttonText?.showLess ?? 'Show less' : buttonText?.showMore ?? 'Show more'}
+              {isShowMore ? (buttonText?.showLess ?? 'Show less') : (buttonText?.showMore ?? 'Show more')}
             </Typography>
           </RawButton>
         )}

src/components/atoms/DisableBox/DisabledBox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyledDisabledBox } from './DisabledBox.style';
 import { TDisabledBox } from './TDisabled.model';
 

src/components/atoms/DropDownSelect/DropDownSelect.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TDropDownSelect, TDropDownSelectNativeAttrs } from '@/components/atoms/DropDownSelect/TDropDownSelect.model';
 import { SelectField } from './DropDownSelect.style';
 import { forwardRef } from 'react';

src/components/atoms/DynamicComponentWrapper/DynamicComponentWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { cloneElement } from 'react';
 import { TDynamicComponentWrapper } from './TDynamicComponentWrapper.model';
 

src/components/atoms/DynamicElementWrapper/DynamicElementWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TDynamicElementWrapperWithHTMLAttrs } from './TDynamicElementWrapper.model';
 import { StyledDynamicElementWrapper } from './DynamicElementWrapper.style';
 

src/components/atoms/FancyAWrapper/FancyAWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { FancyAWrapperStyle } from './FancyAWrpper.style';
 import { TFancyAWrapperWithHTMLAttrs } from './TFancyAWrapper.model';
 

src/components/atoms/FancyActionWrapper/FancyActionWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import ComponentAsWrapper from '@/components/shared/ComponentAsWrapper/ComponentAsWrapper';
 import { StyledAnchor, StyledButton } from './FancyActionWrapper.style';
 import { TFancyActionWrapper } from '@/components/atoms/FancyActionWrapper/TFancyActionWrapper.model';

src/components/atoms/FancyBox/FancyBox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ElementType } from 'react';
 import { TFancyBoxWithHTMLAttrs } from './FancyBox.model';
 import { StyledFancyBox } from './FancyBox.style';

src/components/atoms/FancyImageWrapper/FancyImageWrapper.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TFancyImageWrapperWithNativeAttrs } from '@/components/atoms/FancyImageWrapper/FancyImageWrapper.model';
 import { isAspectRatioValid } from '@/utils/validations/isAspectRatioValid';
 import { ImageWrapper } from './FancyImageWrapper.style';

src/components/atoms/FancyLI/FancyLI.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { FancyLiItem } from '@/components/atoms/FancyLI/FancyLI.style';
 import { TFancyLIWithHTMLAttrs } from './TFancyLI.model';
 

src/components/atoms/FancyLine/FancyLine.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TFancyLineWithHTMLAttributes } from './TFancyLine.model';
 import { StyledFancyLine } from '@/components/atoms/FancyLine/FancyLine.style';
 

src/components/atoms/FancyLoadingBar/FancyLoadingBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { LoadingBar, LoadingContainer } from '@/components/atoms/FancyLoadingBar/FancyLoadingBar.style';
 import { TFancyLoadingBar } from '@/components/atoms/FancyLoadingBar/TFancyLoadingBar.model';
 

src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TFancyLoadingSpinner } from '@/components/atoms/FancyLoadingSpinner/IFancyLoadingSpinner.model';
 import { SpinnerContainer, StyledFancyLoadingSpinner, StyledInnerSpinner } from './FancyLoadingSpinner.model';
 

src/components/atoms/FancyPill/FancyPill.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TFancyPillWithHTMLAttrs } from './TFancyPill.model';
 import { StyledFancyPill } from './FancyPill.styled';
 

src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TextAvatar } from '@/components/molecules/TextAvatar';
 import { TFancyProfilePictureWithHTMLAttrs } from './TFancyProfilePicture.model';
 import { FancyImageWrapper } from '@/components/atoms/FancyImageWrapper';

src/components/atoms/FancySVGAtom/FancySVGAtom.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TFancySVGAtomWithNativeAttrs } from './TFancySVGAtom.model';
 import { StyledSVG } from './FancySVGAtom.style';
 

src/components/atoms/FancySpacingBox/FancySpacingBox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { ElementType } from 'react';
 
 import { TFancySpacingBoxWithHTMLAttrs } from './TFancySpacingBox.model';

src/components/atoms/FancyTextOverlay/FancyTextOverlay.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TFancyTextOverlay } from '@/components/atoms/FancyTextOverlay/FancyTextOverlay.model';
 import { Gradient, TextWrapper, Wrapper } from './FancyTextOverlay.style';
 

src/components/atoms/FancyVideo/FancyVideo.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { isAspectRatioValid } from '@/utils/validations/isAspectRatioValid';
 import { FancyVideoSource } from '@/components/atoms/FancyVideoSource';
 import { StyledVideo } from '@/components/atoms/FancyVideo/FancyVideo.style';

src/components/atoms/FancyVideoSource/FancyVideoSource.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 type IFancyVideoSourceProps = {

src/components/atoms/FancyXButton/FancyXButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { FancySVGAtom } from '@/components/atoms/FancySVGAtom';
 import { TFancyXButtonWithHTMLAttrs } from '@/components/atoms/FancyXButton/FancyXButton.model';
 import { StyledFancyXButton } from '@/components/atoms/FancyXButton/FancyXButton.style';

src/components/atoms/Header/Header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { THeaderWithHTMLAttributes } from '@/components/atoms/Header/THeader.model';
 import { StyledHeader } from './Header.style';
 import { FancyNavBar } from '@/components/molecules/FancyNavBar';

src/components/atoms/InputLabel/InputLabel.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TInputLabelWithNAtiveAttrs } from './TInputLabel.model';
 import { StyledInputLabel } from './InputLabel.style';
 

src/components/atoms/LoadingSVGArrows/LoadingSVGArrows.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import styled, { keyframes } from 'styled-components';
 
 import { SVGLoadingArrows } from '@/components/icons';

src/components/atoms/MenuItem/MenueItem.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyledMenuItem } from './MenueItem.style';
 import { sizeSettings } from './sizeSettings';
 

src/components/atoms/NumberInput/NumberInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useMemo } from 'react';
 
 import { useNumberInput } from '@/components/atoms/NumberInput/useNumberInput.hook';

src/components/atoms/PageNumberList/PageNumberList.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { FancyButton } from '@/components/organisms/FancyButton';
 import { Wrapper } from './PageNumberList.style';
 import { generateNumbers } from './utils/generateNumbers';
@@ -43,8 +45,8 @@ export default function PageNumberList(props: TPageNumberList) {
           key={index}
           textColor={
             item !== currentPage
-              ? numberButtonStyle?.textColor ?? 'secondary'
-              : numberButtonStyle?.textColorActive ?? 'accent'
+              ? (numberButtonStyle?.textColor ?? 'secondary')
+              : (numberButtonStyle?.textColorActive ?? 'accent')
           }
           label={`${item}`}
           onClick={(e) => handleClicked(e, index)}

src/components/atoms/PasswordEye/PasswordEye.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { SVGEyeCrossed } from '@/components/icons';
 import { SVGEyeOpen } from '@/components/icons';
 import { FancySVGAtom } from '@/components/atoms/FancySVGAtom';

src/components/atoms/PasswordInput/PasswordInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useEffect, useState } from 'react';
 
 import { PasswordEye } from '@/components/atoms/PasswordEye';

src/components/atoms/PasswordStrengthMeter/PasswordStrengthMeter.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { FancyBox } from '@/components/atoms/FancyBox';
 import { TPasswordStrengthMeter } from '@/components/atoms/PasswordStrengthMeter/TPasswordStrengthMeter.model';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';

src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TProgressBarWithHTMLAttrs } from './ProgressBar.model';
 import { ProgressBarContainer, ProgressBarFill } from './ProgressBar.style';
 

src/components/atoms/RawA/RawA.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyledRawA } from '@/components/atoms/RawA/RawA.style';
 import { TRawA } from './TRawA.model';
 

src/components/atoms/RawButton/RawButton.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { styled } from 'styled-components';
 
 const RawButton = styled.button`

src/components/atoms/RawCheckbox/RawCheckbox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useState, useEffect, forwardRef } from 'react';
 
 import { FakeCheckbox, HidenCheckBox, InputContainer } from './RawCheckbox.style';

src/components/atoms/RawInput/RawInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { styled } from 'styled-components';
 
 import { TRawInputWith$ } from './TRawInput.model';

src/components/atoms/RawLI/RawLI.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import styled from 'styled-components';
 
 const RawLI = styled.li`

src/components/atoms/RawNav/RawNav.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { CSSProp, styled } from 'styled-components';
 
 const RawNav = styled.nav<{ $externalStyle?: CSSProp }>`

src/components/atoms/RawRadio/RawRadio.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef } from 'react';
 
 import { TRawRadioWithHTMLAttrs } from '@/components/atoms/RawRadio/TRawRadio.model';

src/components/atoms/RawSlider/RawSlider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 import { TRawSliderWithNativeAttrs } from '@/components/atoms/RawSlider/TRawSlider.model';

src/components/atoms/RawTextArea/RawTextArea.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent';
 import { TLayer } from '@/types/TLayer';
 import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';

src/components/atoms/RawUL/RawUL.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { styled } from 'styled-components';
 
 const RawUL = styled.ul`

src/components/atoms/ScalingSection/ScalingSection.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import {
   useEffect,
   useRef,
@@ -85,7 +87,7 @@
       document.removeEventListener('touchmove', handleMoveTouch);
       document.removeEventListener('touchend', handleEnd);
     };
   }, [isDragging]);
 
   return (
     <SytledScalingSection id={id} ref={ref} onTouchStart={handleStartTouch} onMouseDown={handleStartMouse}>

src/components/atoms/ScrollableBar/ScrollableBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useRef } from 'react';
 import { ScollAbleBar } from './SrollableBar.style';
 

src/components/atoms/Seperator/Seperator.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TSeperatorWithNativeAttrs } from './TSeperator.model';
 
 import { FancyContent } from '@/components/molecules/FancyContent';

src/components/atoms/SimpleDialog/SimpleDialog.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef, useState } from 'react';
 import { animated, useSpring } from '@react-spring/web';
 

src/components/atoms/SingleInput/SingleInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef, useState } from 'react';
 
 import { TSingleInputAtomWithHTMLAttrs } from '@/components/atoms/SingleInput/TSingleInput.model';

src/components/atoms/SkeletonBox/SkeletonBox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { StyledSkeletonBox } from '@/components/atoms/SkeletonBox/SkeletonBox.style';
 import { TSkeletonBoxWithHTMLAttrs } from '@/components/atoms/SkeletonBox/TSkeleton.model';
 import { isAspectRatioValid } from '@/utils/validations/isAspectRatioValid';

src/components/atoms/SliderMarker/SliderMarker.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { TSliderMarkerWithHTMLAttrs } from '@/components/atoms/SliderMarker/TSlidermarker.model';
 import { Marker, WrapperMarker } from './SliderMarker.style';
 

src/components/atoms/SwipeUpContainer/SwipeUpContainer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { forwardRef } from 'react';
 import { TSwipeUpContainerWithHTMLAttrs } from './SwipeUpContainer.model';
 import { StyledSwipeUpContainer } from './SwipeUpContainer.style';