update: some strcture of molecules

lib/index.ts

@@ -17,7 +17,6 @@ export { default as RawSlider } from '@/components/atoms/RawSlider/RawSlider';
 export { default as ScrollableBar } from '@/components/atoms/ScrollableBar/ScrollableBar';
 export { default as SimpleDialog } from '@/components/atoms/SimpleDialog/SimpleDialog';
 export { default as SingleInput } from '@/components/atoms/SingleInput/SingleInput';
-export { default as Slot } from '@/components/atoms/Slot/Slot';
 export { default as SwipeUpContainer } from '@/components/atoms/SwipeUpContainer/SwipeUpContainer';
 export { default as SwipeUpDash } from '@/components/atoms/SwipeUpDash/SwipeUpDash';
 export { default as Typography } from '@/components/atoms/Typography/Typography';
@@ -85,7 +84,9 @@ export { default as FancyMiniProfile } from '@/components/molecules/FancyMiniPro
 export { default as FancyCheckbox } from '@/components/molecules/FancyCheckbox/FancyCheckbox';
 export { default as FancyChip } from '@/components/organisms/FancyChip/FancyChip';
 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';
 
 // ---------- Organisms ------- //
 export { default as FancyColorPicker } from '@/components/organisms/FancyColorPicker/FancyColorPicker';

src/components/molecules/BottomBar/BottomBar.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
+import { CSSProp, css } from 'styled-components';
 
 import { TThemeTypes } from '@/interface/TThemeTypes';
 import { TLayer } from '@/interface/TLayer';
-import { FancyBox } from '../../atoms/FancyBox';
-import { CSSProp, css } from 'styled-components';
+import { FancyBox } from '@/components/atoms/FancyBox';
 import { fancyBarStyle } from './BottomBar.style';
 
-// --------------------------------------------------------------------------- //
-// ------------------ The Bottom Bar for the mobile navigation --------------- //
-// --------------  use the store to controle the bar from outside ------------ //
 type TBottomBar = {
   isVisible?: boolean;
   themeType?: TThemeTypes;
   layer?: TLayer;
   externalStyle?: CSSProp;
   children?: React.ReactNode;
 } & React.ComponentProps<typeof FancyBox>;
+// --------------------------------------------------------------------------- //
+// ------------------ The Bottom Bar for the mobile navigation --------------- //
+// --------------  use the store to controle the bar from outside ------------ //
 export default function BottomBar(props: TBottomBar) {
   const { isVisible, externalStyle, children, ...bottomBarProps } = { ...defaultProps, ...props };
 
@@ -36,6 +36,7 @@ export default function BottomBar(props: TBottomBar) {
   );
 }
 
+// default props for the bottom bar
 const defaultProps: TBottomBar = {
   isVisible: true,
 };

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

@@ -0,0 +1,16 @@
+import { CSSProp } from 'styled-components';
+import { IGenerateThemeDesignForComponentProps } from '@/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
+
+export type IButtonProps = {
+  size?: 'sm' | 'md' | 'lg';
+  wide?: boolean;
+  children?: React.ReactNode;
+  externalStyle?: CSSProp;
+  disabled?: boolean;
+} & IGenerateThemeDesignForComponentProps;
+
+type ButtonHTML = React.ButtonHTMLAttributes<HTMLButtonElement>;
+type AnchorHTML = React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+// Using conditional type based on the 'as' prop
+export type IButton = IButtonProps & (({ as?: 'button' } & ButtonHTML) | ({ as: 'a' } & AnchorHTML));

src/components/molecules/Button/Button.style.tsx

@@ -1,10 +1,11 @@
 import { styled } from 'styled-components';
-import { disabledStyle } from '../../../design/designFunctions/disabledStyle/disableStyle';
+
+import { disabledStyle } from '@/design/designFunctions/disabledStyle/disableStyle';
 import generateThemeDesignForComponent, {
   IGenerateThemeDesignForComponent,
-} from '../../../design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
-import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model';
-import { IButtonProps } from './Button';
+} from '@/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
+import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model';
+import { IButtonProps } from './Button.model';
 
 export const StyledButton = styled.button<IGenerateThemeDesignForComponent & IStyledPrefixAndPicker<IButtonProps>>`
   display: inline-flex;

src/components/molecules/Button/Button.tsx

@@ -1,22 +1,8 @@
 import React from 'react';
-import { CSSProp } from 'styled-components';
 
-import { IGenerateThemeDesignForComponentProps } from '../../../design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
 import { StyledButton } from './Button.style';
+import { IButton } from './Button.model';
 
-export type IButtonProps = {
-  size?: 'sm' | 'md' | 'lg';
-  wide?: boolean;
-  children?: React.ReactNode;
-  externalStyle?: CSSProp;
-  disabled?: boolean;
-} & IGenerateThemeDesignForComponentProps;
-
-type ButtonHTML = React.ButtonHTMLAttributes<HTMLButtonElement>;
-type AnchorHTML = React.AnchorHTMLAttributes<HTMLAnchorElement>;
-
-// Using conditional type based on the 'as' prop
-export type IButton = IButtonProps & (({ as?: 'button' } & ButtonHTML) | ({ as: 'a' } & AnchorHTML));
 // --------------------------------------------------------------------------- //
 // --------------- A normal Button with Style from the Theme ----------------- //
 // --------------------------------------------------------------------------- //
@@ -42,8 +28,8 @@ export default function Button(props: IButton) {
   );
 }
 
-const defaultProps: IButtonProps & IGenerateThemeDesignForComponentProps = {
+const defaultProps = {
   themeType: 'accent' as const,
   size: 'md',
-  layer: 0,
+  layer: 0 as const,
 };

src/components/molecules/Chip/Chip.style.tsx

@@ -1,7 +1,7 @@
 import { css, styled } from 'styled-components';
 
-import generateThemeDesignForComponent from '../../../design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
-import IStyledPrefixAndOmitter from '../../../interface/IStyledPrefixAndOmiter.model';
+import generateThemeDesignForComponent from '@/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
+import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model';
 import { IStyledChip } from './Chip';
 import { TTheme } from '@/interface/TTheme';
 

src/components/molecules/Chip/Chip.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { CSSProp } from 'styled-components';
 
-import { sizes } from '../FancyContent/utils/sizeSettings';
 import { TThemeTypes } from '@/interface/TThemeTypes';
 import { TLayer } from '@/interface/TLayer';
 import { StyledChip } from './Chip.style';
 import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent';
+import { sizes } from '@/components/molecules/FancyContent/utils/sizeSettings';
 
 export interface IStyledChip {
   size?: keyof typeof sizes;
@@ -19,7 +19,6 @@ export interface IStyledChip {
   externalStyle?: CSSProp;
   children?: React.ReactNode;
 }
-
 // --------------------------------------------------------------------------- //
 // --------------- A Simple chip you can put everthing in it  ---------------- //
 // --------------------------------------------------------------------------- //

src/components/molecules/ChipList/ChipList.style.tsx

@@ -2,11 +2,8 @@ import { css, styled } from 'styled-components';
 
 import themeStore from '@/design/theme/themeStore/themeStore';
 import { TUiColorsSystemMessage } from '@/interface/TUiColorsSystemMessage';
-
 import { generateSystemIndicatorStyle } from '@/design/designFunctions/generateSystemIndicatorStyle';
 
-export const FancyBoxStyle = css``;
-
 export const ChipContainer = styled.ul`
   display: flex;
   flex-wrap: wrap;
@@ -15,6 +12,13 @@ export const ChipContainer = styled.ul`
   padding: 0;
 `;
 
+/**
+ * Generates the style for the ChipList component.
+ *
+ * @param size - The size of the ChipList ('sm', 'md', 'lg').
+ * @param sytemMessage - Optional system message color for the ChipList.
+ * @returns The generated style object for the ChipList.
+ */
 export const generateChipListStyle = (size: 'sm' | 'md' | 'lg', sytemMessage?: TUiColorsSystemMessage) => {
   const styemIndicatorStyle = generateSystemIndicatorStyle(sytemMessage);
   const getTheme = themeStore.getState().theme;

src/components/molecules/ChipList/ChipList.tsx

@@ -14,7 +14,9 @@ export interface ChipListProps {
   size?: 'sm' | 'md' | 'lg';
   systemMessage?: TUiColorsSystemMessage;
 }
-
+// --------------------------------------------------------------------------- //
+// ---------- The Chiplist is a wrapper for the chips to list them  ---------- //
+// --------------------------------------------------------------------------- //
 export default function ChipList(props: ChipListProps) {
   const { themeType = 'primary', layer = 1, outlined = false, children, size, systemMessage } = props;
 

src/components/molecules/ComponentAndActionWrapper/index.ts

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

src/components/molecules/FancyContent/FancyContent.style.tsx

@@ -0,0 +1,37 @@
+import { styled } from 'styled-components';
+
+import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model';
+import { TTheme } from '@/interface/TTheme';
+import { IFancyContentProps } from './FancyContent';
+
+// Define the types for the Wrapper component
+type TWrapper = IStyledPrefixAndPicker<
+  IFancyContentProps,
+  'flexDirection' | 'flexAlign' | 'flexJustify' | 'gapBetweenText' | 'gapBetweenIcon'
+>;
+
+// Define the Wrapper component
+export const Wrapper = styled.span<TWrapper & { theme: TTheme }>`
+  display: flex;
+  flex-direction: ${({ $flexDirection }) => $flexDirection || 'row'};
+  justify-content: ${({ $flexJustify }) => $flexJustify || 'center'};
+  align-items: ${({ $flexAlign }) => $flexAlign || 'center'};
+  gap: ${({ $gapBetweenIcon, theme }) => $gapBetweenIcon ?? theme.spacing.xs};
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: ${({ $gapBetweenText, theme }) => $gapBetweenText ?? theme.spacing.xxs};
+  }
+`;
+
+type TOnlyTextWrapper = IStyledPrefixAndPicker<IFancyContentProps, 'flexDirection' | 'gapBetweenText' | 'flexAlign' | 'flexJustify'>;
+export const OnlyTextWrapper = styled.span<TOnlyTextWrapper & { theme: TTheme }>`
+  display: flex;
+  flex-direction: ${({ $flexDirection }) => $flexDirection || 'column'};
+  justify-content: ${({ $flexJustify }) => $flexJustify || 'center'};
+  align-items: ${({ $flexAlign }) => $flexAlign || 'flex-start'};
+  gap: ${({ $gapBetweenText, theme }) => $gapBetweenText ?? theme.spacing.xxs};
+`;

src/components/molecules/FancyContent/FancyContent.tsx

@@ -1,46 +1,12 @@
 // Import necessary dependencies
 import React, { ReactElement } from 'react';
-import { styled } from 'styled-components';
 
 import { FancyContentIcon } from './utils/FancyContentIcon';
 import { FancyContentDescription, FancyContentTitle } from './utils/FancyContentText';
-import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model';
-import { TTheme } from '@/interface/TTheme';
-
-// Define the types for the Wrapper component
-type TWrapper = IStyledPrefixAndPicker<
-  IFancyContentProps,
-  'flexDirection' | 'flexAlign' | 'flexJustify' | 'gapBetweenText' | 'gapBetweenIcon'
->;
-
-// Define the Wrapper component
-const Wrapper = styled.span<TWrapper & { theme: TTheme }>`
-  display: flex;
-  flex-direction: ${({ $flexDirection }) => $flexDirection || 'row'};
-  justify-content: ${({ $flexJustify }) => $flexJustify || 'center'};
-  align-items: ${({ $flexAlign }) => $flexAlign || 'center'};
-  gap: ${({ $gapBetweenIcon, theme }) => $gapBetweenIcon ?? theme.spacing.xs};
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: ${({ $gapBetweenText, theme }) => $gapBetweenText ?? theme.spacing.xxs};
-  }
-`;
-
-type TOnlyTextWrapper = IStyledPrefixAndPicker<IFancyContentProps, 'flexDirection' | 'gapBetweenText' | 'flexAlign' | 'flexJustify'>;
-const OnlyTextWrapper = styled.span<TOnlyTextWrapper & { theme: TTheme }>`
-  display: flex;
-  flex-direction: ${({ $flexDirection }) => $flexDirection || 'column'};
-  justify-content: ${({ $flexJustify }) => $flexJustify || 'center'};
-  align-items: ${({ $flexAlign }) => $flexAlign || 'flex-start'};
-  gap: ${({ $gapBetweenText, theme }) => $gapBetweenText ?? theme.spacing.xxs};
-`;
+import { OnlyTextWrapper, Wrapper } from './FancyContent.style';
 
 // Define the props for the FancyContent component
-interface IFancyContentProps {
+export interface IFancyContentProps {
   flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
   flexJustify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
   flexAlign?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';

src/components/molecules/FancyContent/index.ts

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

src/components/molecules/FancyContent/utils/FancyContentIcon.tsx

@@ -1,4 +1,4 @@
-import { FancySVGAtom } from '../../../atoms/FancySVGAtom';
+import { FancySVGAtom } from '@/components/atoms/FancySVGAtom';
 
 interface IFancyContentIconProps {
   children?: React.ReactNode;

src/components/molecules/FancyContent/utils/FancyContentText.tsx

@@ -1,29 +1,11 @@
-import { CSSProp } from 'styled-components';
-
-import Typography from '../../../atoms/Typography/Typography';
+import { Typography } from '@/components/atoms/Typography';
+import { TTextProps } from './TFancyTextVariant.model';
 import { sizes } from './sizeSettings';
-import { TTypography } from '@/interface/TTypography';
-
-type IFancyContentTextProps = {
-  children?: React.ReactNode;
-  bold?: boolean;
-  className?: string;
-  externalStyle?: CSSProp;
-};
-
-type IFancyContentTextWithSizeProps = IFancyContentTextProps & {
-  size?: 'sm' | 'md' | 'lg';
-  fontVariant?: never;
-};
-
-type IFancyContentTextWithFontVariantProps = IFancyContentTextProps & {
-  fontVariant?: TTypography;
-  size?: never;
-};
 
-export function FancyContentTitle(
-  props: IFancyContentTextProps & (IFancyContentTextWithFontVariantProps | IFancyContentTextWithSizeProps)
-) {
+// --------------------------------------------------------------------------- //
+// ----------------- The Title for the FancyContent component ---------------- //
+// --------------------------------------------------------------------------- //
+export function FancyContentTitle(props: TTextProps) {
   const { size, bold = true, fontVariant, children, className, externalStyle } = props;
 
   return (
@@ -39,9 +21,10 @@ export function FancyContentTitle(
   );
 }
 
-export function FancyContentDescription(
-  props: IFancyContentTextProps & (IFancyContentTextWithFontVariantProps | IFancyContentTextWithSizeProps)
-) {
+// --------------------------------------------------------------------------- //
+// -------------- The description for the FancyContent component ------------- //
+// --------------------------------------------------------------------------- //
+export function FancyContentDescription(props: TTextProps) {
   const { size, bold, fontVariant, children, className, externalStyle } = props;
 
   return (

src/components/molecules/FancyContent/utils/TFancyTextVariant.model.ts

@@ -0,0 +1,25 @@
+import { CSSProp } from 'styled-components';
+import { TTypography } from '@/interface/TTypography';
+
+type IFancyContentTextProps = {
+  children?: React.ReactNode;
+  bold?: boolean;
+  className?: string;
+  externalStyle?: CSSProp;
+};
+
+type IFancyContentTextWithSizeProps = IFancyContentTextProps & {
+  size?: 'sm' | 'md' | 'lg';
+  fontVariant?: never;
+};
+
+type IFancyContentTextWithFontVariantProps = IFancyContentTextProps & {
+  fontVariant?: TTypography;
+  size?: never;
+};
+
+/**
+ * Represents the type definition for the `TTextProps` type.
+ * This type is a combination of `IFancyContentTextProps` and either `IFancyContentTextWithFontVariantProps` or `IFancyContentTextWithSizeProps`.
+ */
+export type TTextProps = IFancyContentTextProps & (IFancyContentTextWithFontVariantProps | IFancyContentTextWithSizeProps);

src/components/molecules/FancyContentCard/FancyContentCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import FancyCard from '../../atoms/FancyCard/FancyCard';
-import Typography from '../../atoms/Typography/Typography';
+import { FancyCard } from '@/components/atoms/FancyCard';
+import { Typography } from '@/components/atoms/Typography';
 import { styled } from 'styled-components';
 
 interface IContentCardProps {

src/components/molecules/FancyDropDownUL/FancyDropDownUL.style.tsx

@@ -1,13 +1,13 @@
 import { styled, css } from 'styled-components';
 
-import calcBorderRadiusOnAlignment from '../../../design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment';
-import { IFancyUL } from './FancyDropDownUL';
-import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model';
-import { boxShadow } from '../../../design/designFunctions/shadows/shadows';
 import { TThemeTypes } from '@/interface/TThemeTypes';
-import { TLayer } from '@/interface/TLayer';
-import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent';
 import { TTheme } from '@/interface/TTheme';
+import { TLayer } from '@/interface/TLayer';
+import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model';
+import calcBorderRadiusOnAlignment from '@/design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment';
+import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent';
+import { boxShadow } from '@/design/designFunctions/shadows/shadows';
+import { IFancyUL } from './FancyDropDownUL';
 
 // --------------------------------------------------------------------------- //
 // ------- the generator function for the Wrapper of the UL ------------------ //

src/components/molecules/FancyDropDownUL/FancyDropDownUL.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-
 import { animated, useSpring } from '@react-spring/web';
+
 import { StyledUL, WrapperUL } from './FancyDropDownUL.style';
 import { TThemeTypes } from '@/interface/TThemeTypes';
 import { TLayer } from '@/interface/TLayer';