update: some structure

lib/index.ts

@@ -87,6 +87,7 @@ export { default as Header } from '@/components/molecules/Header/Header';
 export { default as FancyContent } from '@/components/molecules/FancyContent/FancyContent';
 export { default as InfoCard } from '@/components/molecules/InfoCard/InfoCard';
 export { default as ComponentAndActionWrapper } from '@/components/molecules/ComponentAndActionWrapper/ComponentAndActionWrapper';
+export { default as FancySelectWrapper } from '@/components/molecules/FancySelectWrapper/FancySelectWrapper';
 
 // ---------- Organisms ------- //
 export { default as FancyColorPicker } from '@/components/organisms/FancyColorPicker/FancyColorPicker';
@@ -139,6 +140,8 @@ export { default as shadows } from '@/design/designFunctions/shadows/shadows';
 
 // ---------- Interfaces ------- //
 export * from '@/interface';
+export type { default as IGenerateThemeForCardProps } from '@/design/designFunctions/generateThemeForCard/IGenerateThemeForCardProps';
+export type { default as IGenerateThemeDesignForComponentProps } from '@/design/designFunctions/generateThemeDesignForComponent/IGenerateThemeDesignForComponentProps';
 
 // ---------- Store ------- //
 export { default as themeStore } from '@/design/theme/themeStore/themeStore';

src/components/atoms/RawInput/RawInput.tsx

@@ -2,11 +2,10 @@ import { styled } from 'styled-components';
 
 import { fontSize } from '@/design/theme/designSizes';
 import { TTheme } from '@/interface/TTheme';
-
-export type TRawInputAlign = 'left' | 'center';
+import { TTextAlignLC } from '@/interface/TTextAlignLC';
 
 export interface IRawInput {
-  $align?: TRawInputAlign;
+  $align?: TTextAlignLC;
   theme?: TTheme;
 }
 const RawInput = styled.input<IRawInput>`

src/components/icons/SVGDoubleChevron/SVGDoubleChevron.tsx

@@ -0,0 +1,7 @@
+const SVGDoubleChevron = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+    <path d="M7.5 18.234a.988.988 0 0 1-.648-.242l-6-5.25A.995.995 0 0 1 .516 12c0-.285.125-.555.336-.742l6-5.25a.988.988 0 0 1 1.39.094.988.988 0 0 1-.094 1.39L2.996 12l5.152 4.508a.985.985 0 0 1-.648 1.727Zm9 0a.985.985 0 0 1-.648-1.726L21.004 12l-5.152-4.508a.988.988 0 0 1-.094-1.39c.36-.41.98-.45 1.39-.094l6 5.25a.982.982 0 0 1 .336.742.982.982 0 0 1-.336.742l-6 5.25a.988.988 0 0 1-.648.242Zm0 0" />
+  </svg>
+);
+
+export default SVGDoubleChevron;

src/components/icons/SVGDoubleChevron/index.ts

@@ -0,0 +1 @@
+export { default as SVGDoubleChevron } from './SVGDoubleChevron';

src/components/molecules/Button/Button.model.ts

@@ -1,5 +1,6 @@
 import { CSSProp } from 'styled-components';
-import { IGenerateThemeDesignForComponentProps } from '@/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
+
+import { IGenerateThemeDesignForComponentProps } from '@/design/designFunctions/generateThemeDesignForComponent';
 
 export type IButtonProps = {
   size?: 'sm' | 'md' | 'lg';

src/components/molecules/DateInput/DateInput.tsx

@@ -1,9 +1,9 @@
-import React, { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
 
-import { TRawInputAlign } from '../../atoms/RawInput/RawInput';
 import { TLayer } from '@/interface/TLayer';
-import { StyledDatePicker } from '../../organisms/FancyDateInput/FancyDateInput.style';
+import { StyledDatePicker } from '@/components/organisms/FancyDateInput/FancyDateInput.style';
 import { TThemeTypes } from '@/interface/TThemeTypes';
+import { TTextAlignLC } from '@/interface/TTextAlignLC';
 
 type NativeAttrs = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'>;
 export type IDateInputPropsWithNativeAttrs = IDateInputProps & NativeAttrs;
@@ -12,11 +12,11 @@ export interface IDateInputProps {
   themeType?: TThemeTypes;
   layer?: TLayer;
   activeHandler?: (value: boolean) => void;
-  align?: TRawInputAlign;
+  align?: TTextAlignLC;
   type?: 'week' | 'date' | 'month' | 'time' | 'datetime-local' | 'datetime';
 }
 // --------------------------------------------------------------------------- //
-// ---------- Here are the design variants for sizing and alignment ---------- //
+// -------------- A simple date input for all kind of types ------------------ //
 // --------------------------------------------------------------------------- //
 export default function DateInput(props: IDateInputProps & NativeAttrs) {
   const { value, activeHandler, align, themeType, layer, type, ...htmlInputProps } = props;

src/components/molecules/DateNumberWithStatus/DateNumberWithStatus.tsx

@@ -1,23 +1,13 @@
-import React from 'react';
 import { styled } from 'styled-components';
 
-import DateNumberAtom from '../../atoms/DateNumberAtom/DateNumberAtom';
-import AvilableDot, { IAvailableDot } from '../../atoms/AvilableDot/AvailableDot';
-import { IRange } from '../../atoms/DateNumberAtom/DateNumberAtom';
+import DateNumberAtom from '@/components/atoms/DateNumberAtom/DateNumberAtom';
+import AvilableDot, { IAvailableDot } from '@/components/atoms/AvilableDot/AvailableDot';
+import { IRange } from '@/components/atoms/DateNumberAtom/DateNumberAtom';
+
 import { TLayer } from '@/interface/TLayer';
 import { TThemeTypes } from '@/interface/TThemeTypes';
 import { TTheme } from '@/interface/TTheme';
 
-const StyledDateNumberWithStatus = styled.div<{ theme: TTheme }>`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: ${({ theme }) => theme.spacing.xs};
-  padding: ${({ theme }) => theme.spacing.xs};
-`;
-
 interface IDateNumberWithStatus {
   isAvailable?: IAvailableDot;
   disabled?: boolean;
@@ -29,6 +19,9 @@ interface IDateNumberWithStatus {
   themeType?: TThemeTypes;
   layer?: TLayer;
 }
+// --------------------------------------------------------------------------- //
+//A Simple Number with the AvilableDot to indicate something is busy or free...//
+// --------------------------------------------------------------------------- //
 export default function DateNumberWithStatus(props: IDateNumberWithStatus) {
   const { isAvailable, disabled, dateNumber, isSelected, onClick, range, isCurrentDay, layer, themeType } = props;
 
@@ -47,3 +40,16 @@ export default function DateNumberWithStatus(props: IDateNumberWithStatus) {
     </StyledDateNumberWithStatus>
   );
 }
+
+// ------------------------------------------- //
+// ------- The style for the component ------- //
+// ------------------------------------------- //
+const StyledDateNumberWithStatus = styled.div<{ theme: TTheme }>`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xs};
+  padding: ${({ theme }) => theme.spacing.xs};
+`;

src/components/molecules/DateOutputFromTo/DateOutputFromTo.style.tsx

@@ -0,0 +1,34 @@
+import { styled } from 'styled-components';
+
+import { TLayer } from '@/interface/TLayer';
+import { TThemeTypes } from '@/interface/TThemeTypes';
+import { TTheme } from '@/interface/TTheme';
+
+// Define the styled component for the DateOutputFromTo component
+export const StyledDateOutputFromTo = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>`
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: auto;
+  justify-content: space-around;
+  align-items: stretch;
+
+  button:nth-child(1) {
+    border-radius: 50px 0 0 50px;
+    padding: ${({ theme }) => theme.spacing.sm};
+  }
+
+  button:nth-child(3) {
+    border-radius: 0 50px 50px 0;
+    padding: ${({ theme }) => theme.spacing.sm};
+  }
+`;
+
+// Define the styled component for the VRWrapper
+export const VRWrapper = styled.div`
+  position: absolute;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  align-items: center; // this center the FancyVR vertically
+`;

src/components/molecules/DateOutputFromTo/DateOutputFromTo.tsx

@@ -1,40 +1,10 @@
-import React from 'react';
-import { styled } from 'styled-components';
+import DateOutput from '@/components/atoms/DateOutput/DateOutput';
+import FancyLine from '@/components/atoms/FancyLine/FancyLine';
 
-import DateOutput from '../../atoms/DateOutput/DateOutput';
 import { TThemeTypes } from '@/interface/TThemeTypes';
 import { TLayer } from '@/interface/TLayer';
-import FancyLine from '../../atoms/FancyLine/FancyLine';
-import { TTheme } from '@/interface/TTheme';
 
-// Define the styled component for the DateOutputFromTo component
-const StyledDateOutputFromTo = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>`
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: auto;
-  justify-content: space-around;
-  align-items: stretch;
-
-  button:nth-child(1) {
-    border-radius: 50px 0 0 50px;
-    padding: ${({ theme }) => theme.spacing.sm};
-  }
-
-  button:nth-child(3) {
-    border-radius: 0 50px 50px 0;
-    padding: ${({ theme }) => theme.spacing.sm};
-  }
-`;
-
-// Define the styled component for the VRWrapper
-const VRWrapper = styled.div`
-  position: absolute;
-  height: 100%;
-  flex: 1;
-  display: flex;
-  align-items: center; // this center the FancyVR vertically
-`;
+import { StyledDateOutputFromTo, VRWrapper } from './DateOutputFromTo.style';
 
 // Define the props for the DateOutputFromTo component
 interface IDateOutputFromTo {
@@ -45,16 +15,18 @@ interface IDateOutputFromTo {
   themeType?: TThemeTypes;
   layer?: TLayer;
 }
-// Define the DateOutputFromTo component
+// --------------------------------------------------------------------------- //
+// ---------- The dateOutput hanles the date display from and to ------------ //
+// --------------------------------------------------------------------------- //
 export default function DateOutputFromTo({ whichIsSelecting, dateFrom, dateTo, handler, themeType, layer }: IDateOutputFromTo) {
+  // swap the themeType for opposite components
   const swapTheme = themeType === 'primary' ? 'secondary' : 'primary';
 
-  // Define the click handler for the DateOutput component
+  // Define the click handler that handles the click on the DateOutput
   const handleClickOnDateOutput = (which: 'from' | 'to') => {
     handler && handler(which);
   };
 
-  // Render the DateOutputFromTo component with the appropriate props
   return (
     <StyledDateOutputFromTo>
       <DateOutput

src/components/molecules/DynamicBottomScrollBar/DynamicBottomScrollBar.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 
-import ScollAbleBar from '../../atoms/ScrollableBar/ScrollableBar';
+import ScollAbleBar from '@/components/atoms/ScrollableBar/ScrollableBar';
 
 // Define types for the component
 type TDynamicScrollBarProps = {
   scrollable?: boolean;
   activateScrollbar?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
-
-// Define the component
+// --------------------------------------------------------------------------- //
+// ------ The dynamic scrollbar gives the items a overvlow in y on prop ------ //
+// --------------------------------------------------------------------------- //
 export default function DynamicBottomScrollBar(props: TDynamicScrollBarProps) {
   const { activateScrollbar, scrollable, children } = props;
 

src/components/molecules/EditBar/EditBar.tsx

@@ -13,10 +13,10 @@ import { styled } from 'styled-components';
 //the first bar is getting settings for the grouped bar
 //the second is for the settings
 
-import FancyBottomBarIcon, { IFancyBottomBarIcon } from '../../templates/FancyBottomBarIcon/FancyBottomBarIcon';
-import EditBarModal from '../../atoms/EditBarModal/EditBarModal';
+import FancyBottomBarIcon, { IFancyBottomBarIcon } from '@/components/templates/FancyBottomBarIcon/FancyBottomBarIcon';
+import EditBarModal from '@/components/atoms/EditBarModal/EditBarModal';
 
-import DynamicBottomScrollBar from '../DynamicBottomScrollBar/DynamicBottomScrollBar';
+import { DynamicBottomScrollBar } from '@/components/molecules/DynamicBottomScrollBar';
 import themeStore from '@/design/theme/themeStore/themeStore';
 
 const Wrapper = styled.div`

src/components/molecules/FancyCheckbox/FancyCheckbox.tsx

@@ -1,8 +1,9 @@
-import React, { useId } from 'react';
-import RawCheckbox from '../../atoms/RawCheckbox/RawCheckbox';
+import { useId } from 'react';
+
+import RawCheckbox from '@/components/atoms/RawCheckbox/RawCheckbox';
+import { FancySelectWrapper } from '@/components/molecules/FancySelectWrapper';
 
 import { IFancyCheckboxProps } from './FancyCheckbox.model';
-import FancySelectWrapper from '../FancySelectWrapper/FancySelectWrapper';
 
 // --------------------------------------------------------------------------- //
 // -------------------- A simple Checkbox with a Label ----------------------- //

src/components/molecules/FancyColorArea/FancyColorArea.tsx

@@ -1,53 +1,17 @@
-import React from 'react';
 import Color from 'color';
 
-import useSlider from '../../../utils/hooks/useSlider/useSilder';
+import { ColorIndicator } from '@/components/atoms/ColorIndicator';
+import useSlider from '@/utils/hooks/useSlider/useSilder';
 import {
-  WrapperColorArea,
   ColorAreaContainer,
-  Marker,
+  CurrentColorArea,
   LightnessGradient,
-  WrapperMarker,
+  Marker,
   SaturationGradient,
-  CurrentColorArea,
+  WrapperColorArea,
+  WrapperMarker,
 } from './FancyColorArea.style';
-import ColorIndicator from '../../atoms/ColorIndicator/ColorIndicator';
-
-//this function calculates the current color to a position using the HSV Color Type
-//HSV can be better used for merging Lightness and Saturation (L: 100 and S:100) = Full Color
-const positionToColor = (hue: number, clientX: number, clientY: number, rect: DOMRect) => {
-  //calculate the position of the mouse in the color area(rect)
-  const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
-  const y = Math.max(0, Math.min(clientY - rect.top, rect.height));
-
-  //calculate the saturation and lightness(value) from the position
-  const saturation = (x / rect.width) * 100;
-  const value = 100 - (y / rect.height) * 100;
-
-  return {
-    h: hue ?? 0,
-    s: saturation,
-    v: value,
-  };
-};
-
-//this function calculates the color to the position on the area using the HSV Color Type
-const colorToPosition = (color: Color, rect: DOMRect) => {
-  //get the saturation and lightness(value) from the color
-  const hsvColor = color.hsv().object();
-  const saturation = hsvColor.s;
-  const value = hsvColor.v;
-
-  //calculate the x and y position from the saturation and lightness(value)
-  const x = (saturation * rect.width) / 100;
-  const y = (1 - value / 100) * rect.height;
-
-  //calculate the percentage of the position
-  const xPercent = (x / rect.width) * 100;
-  const yPercent = (y / rect.height) * 100;
-
-  return { x: Math.max(0, xPercent), y: Math.max(0, yPercent) };
-};
+import { colorToPosition, positionToColor } from './utils/calcPosition';
 
 // --------------------------------------------------------------------------- //
 // ----------- The main ColorArea Componet to pick a simple color ------------ //

src/components/molecules/FancyColorArea/utils/calcPosition.ts

@@ -0,0 +1,38 @@
+//this function calculates the current color to a position using the HSV Color Type
+
+import Color from 'color';
+
+//HSV can be better used for merging Lightness and Saturation (L: 100 and S:100) = Full Color
+export const positionToColor = (hue: number, clientX: number, clientY: number, rect: DOMRect) => {
+  //calculate the position of the mouse in the color area(rect)
+  const x = Math.max(0, Math.min(clientX - rect.left, rect.width));
+  const y = Math.max(0, Math.min(clientY - rect.top, rect.height));
+
+  //calculate the saturation and lightness(value) from the position
+  const saturation = (x / rect.width) * 100;
+  const value = 100 - (y / rect.height) * 100;
+
+  return {
+    h: hue ?? 0,
+    s: saturation,
+    v: value,
+  };
+};
+
+//this function calculates the color to the position on the area using the HSV Color Type
+export const colorToPosition = (color: Color, rect: DOMRect) => {
+  //get the saturation and lightness(value) from the color
+  const hsvColor = color.hsv().object();
+  const saturation = hsvColor.s;
+  const value = hsvColor.v;
+
+  //calculate the x and y position from the saturation and lightness(value)
+  const x = (saturation * rect.width) / 100;
+  const y = (1 - value / 100) * rect.height;
+
+  //calculate the percentage of the position
+  const xPercent = (x / rect.width) * 100;
+  const yPercent = (y / rect.height) * 100;
+
+  return { x: Math.max(0, xPercent), y: Math.max(0, yPercent) };
+};