Merge branch '202-cleanup-repo' of https://github.com/MrTRyy/FancyUIL…

…ibary into 202-cleanup-repo

src/components/molecules/InputWrapper/InputWrapper.tsx

@@ -62,8 +62,8 @@ export default function InputWrapper(props: IInputWrapper) {
   const [isInitial, setIsInitial] = useState(false);
 
   // Calculate the color state for the label and underline
-  const colorStateLabel = calcColorState({ type: 'label', isActive, errorMessage, value, placeholder });
-  const colorStateUnderline = calcColorState({ type: 'underline', isActive, errorMessage, value, placeholder });
+  const colorStateLabel = calcColorState({ type: 'text', isActive, errorMessage, value, placeholder });
+  const colorStateUnderline = calcColorState({ type: 'item', isActive, errorMessage, value, placeholder });
 
   // Set the initial state of the input field
   useEffect(() => {

src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx

@@ -19,7 +19,7 @@ export default function FancyRangeSlider(props: IFancyRangeSlider) {
 
   const id = useId();
 
-  const colorStateLabel = calcColorState({ type: 'label', isActive: isActive || toutched, value });
+  const colorStateLabel = calcColorState({ type: 'text', isActive: isActive || toutched, value });
 
   // this function is called when the slider is moved
   const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {

src/design/designFunctions/calcColorState/calcColorState.ts

@@ -1,5 +1,5 @@
 interface IColorState {
-  type: 'underline' | 'label';
+  type: 'item' | 'text';
   isActive?: boolean;
   errorMessage?: string;
   value?: string | number | readonly string[] | undefined;
@@ -10,7 +10,7 @@ interface IColorState {
 const calcColorState = ({ type, isActive, errorMessage, value, placeholder }: IColorState) => {
   if (errorMessage) return 'error';
   if (isActive) return 'active';
-  if (value && type !== 'underline') return 'active';
+  if (value && type !== 'item') return 'active';
   if (placeholder) return 'default';
   return 'default';
 };

src/lib/index.ts

@@ -113,7 +113,7 @@ export { default as FancyRadioList } from '@/components/templates/FancyRadioList
 export { default as FancyFlexBox } from '@/components/templates/FancyFlexBox/FancyFlexBox';
 export { default as FancyHandyNav } from '@/components/templates/FancyHandyNav/FancyHandyNav';
 
-// ---------- Utils ------- //
+// ---------- Utils/Hooks ------- //
 export { default as FancyPopover } from '@/utils/components/FancyPopover/FancyPopover';
 export { default as UseDelay } from '@/utils/components/UseDelay/UseDelay';
 export { default as FancyPortal } from '@/utils/components/FancyPortal/FancyPortal';

src/utils/components/UseDelay/UseDelay.mdx

@@ -0,0 +1,48 @@
+# UseDelay Component
+
+The `UseDelay` component is a React component designed to delay the rendering of its children based on an external boolean state and a specified delay time.
+
+## Props
+
+The component accepts the following props:
+
+- `children`: `React.ReactNode` - The content to be rendered after the delay.
+- `externalStateBool` (optional): `boolean` - An external boolean state that influences the rendering behavior.
+- `delay` (optional): `number` - The delay time in milliseconds before rendering the children. Defaults to 250 ms if not specified.
+
+## Usage
+
+```jsx
+import React, { useState } from 'react';
+import UseDelay from './UseDelay';
+
+function Example() {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setShow(!show)}>Toggle</button>
+      <UseDelay externalStateBool={show} delay={500}>
+        <div>Delayed content</div>
+      </UseDelay>
+    </div>
+  );
+}
+```
+
+In this example, the content within `UseDelay` will render only after the `show` state becomes true and after a delay of 500 milliseconds.
+
+## Implementation Details
+
+- The component uses a `useState` hook to manage the internal mount state.
+- The `useEffect` hook listens for changes in the `externalStateBool` and handles the delay logic.
+- A `setTimeout` is used to delay the state update which controls the rendering of children.
+- The component ensures any ongoing timeout is cleared when the component is unmounted or when the `externalStateBool` changes, to prevent memory leaks.
+
+## Notes
+
+- The component is designed to handle changes in the external boolean state gracefully, resetting the timer if the state changes.
+- If the `externalStateBool` is true, the content is rendered immediately without delay.
+- When `externalStateBool` is false, the content rendering is delayed by the specified `delay` time.
+
+This component can be useful in scenarios where conditional rendering is required based on certain conditions, allowing for a smoother user experience by delaying the rendering of components.

src/utils/functions/clampLayer/clampLayer.mdx

@@ -0,0 +1,40 @@
+# clampLayer Function
+
+The `clampLayer` function is a utility function designed to clamp a given layer number within a specified range. It ensures that the layer value is constrained between 0 and 10.
+
+## Parameters
+
+- `layer`: `number` - The layer number to be clamped.
+
+## Return Value
+
+- Returns a `TLayer` type value, which is the clamped layer number.
+
+## Usage
+
+```jsx
+import clampLayer from './clampLayer';
+
+function ExampleComponent() {
+  const layer = 12;
+  const clampedLayer = clampLayer(layer);
+
+  return <div>The clamped layer value is: {clampedLayer}</div>;
+}
+```
+
+In this example, `clampLayer` is used to ensure that the `layer` value does not exceed the defined range (0 to 10). If `layer` is greater than 10, it is clamped to 10. If it's less than 0, it's clamped to 0.
+
+## Implementation Details
+
+- The function checks if the `layer` parameter is less than 0 and, if true, returns 0.
+- If `layer` is greater than 10, the function returns 10.
+- If `layer` falls within the 0 to 10 range, it returns the `layer` value as is.
+- The function uses `TLayer` typecasting to ensure that the return type is consistent with the defined `TLayer` type.
+
+## Notes
+
+- The `TLayer` type is assumed to be a custom type defined elsewhere in the codebase.
+- This utility function can be used in scenarios where layer values need to be maintained within a specific range, such as in graphical interfaces or layer-based UI elements.
+
+The `clampLayer` function offers a simple and effective way to manage layer values, ensuring they remain within a designated range, which is particularly useful in graphical and UI applications where layering is significant.

src/utils/functions/clampLayer/clampLayer.ts

@@ -1,13 +1,13 @@
 import { TLayer } from '@/interface/TLayer';
 
-export default function clampLayer(layer: number) {
+export default function clampLayer(layer: number): TLayer {
   // limit layer to minimal 0
   if (layer < 0) {
-    return 0 as TLayer;
+    return 0;
   }
   // limit layer to maximal 10
   if (layer > 10) {
-    return 10 as TLayer;
+    return 10;
   }
   // return layer as TLayer
   return layer as TLayer;

src/utils/hooks/useIntersectionObserver/useIntersectionObserver.mdx

@@ -0,0 +1,39 @@
+# useIntersectionObserver Hook
+
+The `useIntersectionObserver` hook is a custom React hook designed to detect when an element is visible within the viewport using the Intersection Observer API. This hook provides a simple way to monitor the visibility of a component or element.
+
+## Return Values
+
+The hook returns an array containing two items:
+
+1. `ref`: `MutableRefObject<HTMLDivElement | null>` - A React ref that should be attached to the element you want to observe.
+2. `isInView`: `boolean` - A state that indicates whether the observed element is currently visible within the viewport.
+
+## Usage
+
+```jsx
+import React from 'react';
+import useIntersectionObserver from './useIntersectionObserver';
+
+function ExampleComponent() {
+  const [ref, isInView] = useIntersectionObserver();
+
+  return <div ref={ref}>{isInView ? 'In Viewport' : 'Not in Viewport'}</div>;
+}
+```
+
+In this example, the text 'In Viewport' is displayed when the `div` is in the viewport, and 'Not in Viewport' when it is not.
+
+## Implementation Details
+
+- The hook uses a `useRef` hook to create a reference (`ref`) for the DOM element that will be observed.
+- A state `isInView` is used to track the visibility of the element.
+- The Intersection Observer API is used to detect when the observed element enters or leaves the viewport.
+- The observer is attached to the element referred to by `ref`.
+- The observer is disconnected in the cleanup function of the `useEffect` to avoid memory leaks.
+
+## Notes
+
+- The hook should be used in components that need to respond to their visibility in the viewport, such as lazy loading images or triggering animations.
+
+This hook simplifies the process of detecting when an element is in the viewport and can be used in various scenarios, such as animations, lazy loading of content, or any other actions that depend on the visibility of elements.

src/utils/hooks/useWindowDimensions/useWindowDimensions.mdx

@@ -0,0 +1,44 @@
+# useWindowDimensions Hook
+
+The `useWindowDimensions` hook is a custom React hook that provides the dimensions of the window. It returns the current window width and height, and updates these values whenever the window is resized.
+
+## Return Value
+
+The hook returns an object containing two properties:
+
+- `width`: `number` - The current width of the window.
+- `height`: `number` - The current height of the window.
+
+## Usage
+
+```jsx
+import React from 'react';
+import useWindowDimensions from './useWindowDimensions';
+
+function ExampleComponent() {
+  const { width, height } = useWindowDimensions();
+
+  return (
+    <div>
+      Window width: {width}px, height: {height}px
+    </div>
+  );
+}
+```
+
+In this example, the component displays the current window width and height. These values are updated in real-time as the window is resized.
+
+## Implementation Details
+
+- The hook initializes the `windowDimensions` state using the `getWindowDimensions` function.
+- `getWindowDimensions` retrieves the current `innerWidth` and `innerHeight` of the window.
+- The `useEffect` hook sets up an event listener on the window for the 'resize' event.
+- The `handleResize` function within `useEffect` updates the `windowDimensions` state whenever the window size changes.
+- The event listener is cleaned up when the component is unmounted to prevent memory leaks.
+
+## Notes
+
+- This hook can be useful in responsive designs where the component behavior or layout depends on the window size.
+- The hook ensures performance efficiency by only re-rendering components when necessary (i.e., when the window size changes).
+
+This hook provides a simple and efficient way to access and respond to changes in the window's dimensions, making it a valuable tool in developing responsive web applications.