structure: molecules

lib/index.ts

@@ -16,7 +16,7 @@ export { default as PasswordEye } from '@/components/atoms/PasswordEye/PasswordE
 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 SingleInputAtom } from '@/components/atoms/SingleInputAtom/SingleInputAtom';
+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';

src/components/atoms/FancyCard/FancyCard.style.tsx

@@ -5,8 +5,8 @@ import IStyledPrefixAndOmiter from '../../../interface/IStyledPrefixAndOmiter.mo
 import { spacingPx } from '../../../design/theme/designSizes';
 import edgeCalculation from '../../../design/designFunctions/edgeCalculation/edgeCalculation';
 
-import { boxShadow } from '../../../design/designFunctions/shadows/shadows';
-import getColorsForComponent from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent';
+import { boxShadow } from '@/design/designFunctions/shadows/shadows';
+import { getColorsForComponent } from '@/design/designFunctions/colorCalculatorForComponent';
 import { TTheme } from '@/interface/TTheme';
 
 // the converted $ styling props for the card

src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { styled } from 'styled-components';
 
 import { TThemeTypes } from '@/interface/TThemeTypes';
 import { TLayer } from '@/interface/TLayer';
-import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent';
-import { TTheme } from '@/interface/TTheme';
 import { ProgressBarContainer, ProgressBarFill } from './ProgressBar.style';
 
 // Define the interface for the progress bar props

src/components/atoms/RawCheckbox/RawCheckbox.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import { FakeCheckbox, HidenCheckBox, InputContainer } from './RawCheckbox.style';
 import { IRawCheckboxProps } from './RawCheckbox.model';
-import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark';
+import { SVGCheckMark } from '@/components/icons/SVGCheckMark';
 
 // --------------------------------------------------------------------------- //
 // -------------------- A simple Checkbox with a Label ----------------------- //

src/components/atoms/RawInput/RawInput.tsx

@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 
-import { fontSize } from '../../../design/theme/designSizes';
+import { fontSize } from '@/design/theme/designSizes';
 import { TTheme } from '@/interface/TTheme';
 
 export type TRawInputAlign = 'left' | 'center';

src/components/atoms/RawNav/index.ts

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

src/components/atoms/RawSlider/RawSlider.tsx

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes, useRef } from 'react';
+
 import { StyledRawSlider } from './RawSlider.style';
 import { TLayer } from '@/interface/TLayer';
 import { TThemeTypes } from '@/interface/TThemeTypes';

src/components/atoms/RawUL/index.ts

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

src/components/atoms/SimpleDialog/SimpleDialog.style.ts

@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+import { getColorsForComponent } from '@/design/designFunctions/colorCalculatorForComponent';
+
+import { TLayer } from '@/interface/TLayer';
+import { TTheme } from '@/interface/TTheme';
+import { TThemeTypes } from '@/interface/TThemeTypes';
+import { animated } from '@react-spring/web';
+
+// Define the styled component for the dialog
+export const StyledDialog = styled(animated.div)<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: ${({ theme }) => theme.spacing.xl};
+  border-radius: ${({ theme }) => theme.borderRadius.lg};
+  border: none;
+  width: 70%;
+  max-height: 85%;
+  ${({ theme, $themeType = 'primary', $layer = 1 }) => getColorsForComponent({ theme, $themeType, $layer })}
+  z-index: 1000;
+`;

src/components/atoms/SimpleDialog/SimpleDialog.tsx

@@ -1,26 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { styled } from 'styled-components';
 import { animated, useSpring } from '@react-spring/web';
 
 import { TThemeTypes } from '@/interface/TThemeTypes';
 import { TLayer } from '@/interface/TLayer';
-import getColorsForComponent from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent';
-import { TTheme } from '@/interface/TTheme';
-
-// Define the styled component for the dialog
-const StyledDialog = styled(animated.div)<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: ${({ theme }) => theme.spacing.xl};
-  border-radius: ${({ theme }) => theme.borderRadius.lg};
-  border: none;
-  width: 70%;
-  max-height: 85%;
-  ${({ theme, $themeType = 'primary', $layer = 1 }) => getColorsForComponent({ theme, $themeType, $layer })}
-  z-index: 1000;
-`;
+import { StyledDialog } from './SimpleDialog.style';
 
 // Define the props for the SimpleDialog component
 interface ISimpleDialog {

src/components/atoms/SingleInputAtom/SingleInputAtom.stories.tsx → src/components/atoms/SingleInput/SingleInput.stories.tsx

@@ -2,7 +2,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 // Import the component to be tested
-import { SingleInputAtom } from './SingleInputAtom';
+import { SingleInputAtom } from './SingleInput';
 
 // fix for building ... because storybook is not able to handle the default export
 const HelperComponent = (props: React.ComponentProps<typeof SingleInputAtom>) => <SingleInputAtom {...props} />;

src/components/atoms/SingleInput/SingleInput.style.tsx

@@ -0,0 +1,31 @@
+import { styled } from 'styled-components';
+
+import { TLayer } from '@/interface/TLayer';
+import { TThemeTypes } from '@/interface/TThemeTypes';
+import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent';
+import { TTheme } from '@/interface/TTheme';
+import { fontSize } from '@/design/theme/designSizes';
+
+// the style for a single input
+interface StyledSingleInputProps {
+  $hasValue: boolean;
+  $isFocused: boolean;
+  $themeType?: TThemeTypes;
+  $layer?: TLayer;
+}
+export const StyledSingleInput = styled.input<StyledSingleInputProps & { theme: TTheme }>`
+  aspect-ratio: 4/5;
+  width: 1.5ch;
+  font-size: ${fontSize.xxl};
+  text-align: center;
+  color: ${({ theme }) => theme.colors.secondary[0]};
+  border: 1.5px solid
+    ${({ $hasValue, theme, $themeType = 'secondary', $layer }) =>
+      $hasValue ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer })};
+  border-radius: 5px;
+  padding: ${({ theme }) => theme.spacing.xs};
+  background-color: transparent;
+  appearance: none;
+  outline: none;
+  box-shadow: ${({ $isFocused, theme }) => ($isFocused ? `0 0 2px 1px${theme.colors.accent[1]}` : 'none')};
+`;

src/components/atoms/SingleInput/SingleInput.tsx

@@ -0,0 +1,41 @@
+import React, { forwardRef, useState } from 'react';
+
+import { TThemeTypes } from '@/interface/TThemeTypes';
+import { TLayer } from '@/interface/TLayer';
+import { StyledSingleInput } from './SingleInput.style';
+
+// --------------------------------------------------------------------------- //
+// --------- A Single Letter/NumberInput for a Verification process ---------- //
+// --------------------------------------------------------------------------- //
+interface ISingleInputAtomProps {
+  value: string;
+  ariaLabel?: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  themeType?: TThemeTypes;
+  layer?: TLayer;
+}
+const SingleInputAtom = forwardRef<HTMLInputElement, ISingleInputAtomProps>((props, ref) => {
+  const { value, ariaLabel, onKeyDown, themeType, layer } = props;
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <StyledSingleInput
+      type="text"
+      $themeType={themeType}
+      $layer={layer}
+      maxLength={1}
+      value={value}
+      onKeyDown={onKeyDown}
+      ref={ref}
+      aria-label={ariaLabel}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange={() => {}}
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      $hasValue={value.length > 0}
+      $isFocused={isFocused}
+    />
+  );
+});
+
+export default SingleInputAtom;

src/components/atoms/SingleInput/index.ts

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

src/components/atoms/SliderMarker/SliderMarker.style.tsx

@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 
-import { TTheme } from '../../../interface/TTheme';
-import colorTransparencyCalculator from '../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator';
+import { TTheme } from '@/interface/TTheme';
+import { colorTransparencyCalculator } from '@/design/designFunctions/colorTransparencyCalculator';
 
 export const WrapperMarker = styled.div`
   position: absolute;

src/components/atoms/SliderMarker/SliderMarker.tsx

@@ -14,7 +14,7 @@ export default function SliderMarker({ position, children }: ISliderMarker) {
     <WrapperMarker style={{ left: `${position}` }}>
       <Marker>
         {/* the children can use to display something in the marker like the color indicator that moves with the marker */}
-        {children && children}
+        {children}
       </Marker>
     </WrapperMarker>
   );

src/components/atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
-import { fontSize } from '../../../design/theme/designSizes';
-import { boxShadow, textShadow } from '../../../design/designFunctions/shadows/shadows';
+import { fontSize } from '@/design/theme/designSizes';
+import { boxShadow, textShadow } from '@/design/designFunctions/shadows/shadows';
 import { TTheme } from '@/interface/TTheme';
 
 export const MenueItemContainer = styled.div<{ $isOpen?: boolean; $index: number }>`