303 update to fit the ux

.eslintrc.cjs

@@ -23,6 +23,15 @@ module.exports = {
     '@typescript-eslint/restrict-plus-operands': 'off',
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
     '@typescript-eslint/no-redundant-type-constituents': 'off',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        extendDefaults: true,
+        types: {
+          '{}': false,
+        },
+      },
+    ],
   },
   ignorePatterns: ['vite.config.ts', 'vitest.config.ts', '.eslintrc.cjs'],
 };

lib/index.ts

@@ -50,6 +50,7 @@ export * from '@/components/atoms/RawLI';
 export * from '@/components/atoms/RawUL';
 export * from '@/components/atoms/RawA';
 export * from '@/components/atoms/RawNav';
+export * from '@/components/atoms/RawButton';
 export * from '@/components/atoms/FancySpacingBox';
 export * from '@/components/atoms/DateInput';
 export * from '@/components/atoms/SystemMessage';
@@ -114,6 +115,7 @@ export * from '@/components/atoms/RawButton';
 export * from '@/components/molecules/Fieldset';
 export * from '@/components/molecules/SideBar';
 export * from '@/components/molecules/SideBarItem';
+export * from '@/components/molecules/TextAvatar';
 
 // ---------- Organisms ------- //
 export * from '@/components/organisms/FancyButton';
@@ -172,6 +174,7 @@ export * from '@/utils/functions/copyToClipBoard';
 export * from '@/utils/functions/calcCSSValuesWithOffset';
 export * from '@/utils/hooks/useActiveBreakpoint';
 export * from '@/utils/hooks/useBreakpointComparison';
+export * from '@/utils/validations/isColorValid';
 
 // ---------- Design ------- //
 export * from '@/design/designFunctions/calcBorderRadiusOnAlignment';

package.json

@@ -5,7 +5,7 @@
     "name": "TobiTRy"
   },
   "private": false,
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/atoms/DateOutput/DateOutput.style.tsx

@@ -3,7 +3,7 @@ import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 import { TDateOutput } from './TDateOutput.model';
 import { TTheme } from '@/types/TTheme';
 import { getBackgroundColor, getTextColor } from '@/design/designFunctions/colorCalculatorForComponent';
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 import { sizeSettings } from './sizeSettings';
 
 type TDateOutputButton = TStyledPrefixAndPicker<
@@ -21,7 +21,7 @@ export const DateOutputButton = styled.button<TDateOutputButton & { theme: TThem
     getTextColor({ theme, $themeType, $textLayer: $layer, turnColorTheme: true })};
   border: none;
   cursor: pointer;
-  height: ${({ $sizeC = 'md' }) => globalElementsizes[sizeSettings[$sizeC].height]};
+  height: ${({ $sizeC = 'md' }) => globalElementSizes[sizeSettings[$sizeC].height]};
   border-radius: ${({ theme, $borderRadius, $sizeC = 'md' }) =>
     $borderRadius ? theme.borderRadius[$borderRadius] : theme.borderRadius[sizeSettings[$sizeC].borderRadius]};
 `;

src/components/atoms/DateOutput/sizeSettings.ts

@@ -1,10 +1,10 @@
 import { TBorderRadiusSizes } from '@/types/TBorderRadiusSizes';
-import { TGlobalElementSizes } from '@/types/TGlobalElementSizes';
+import { TglobalElementSizes } from '@/types/TGlobalElementSizes';
 import { TSizeSettings } from '@/types/TSizeSettings';
 import { TTypographyVariants } from '@/types/TTypographyVariants';
 
 type TSizeObj = {
-  height: TGlobalElementSizes;
+  height: TglobalElementSizes;
   borderRadius: TBorderRadiusSizes;
   fontSize: TTypographyVariants;
 };

src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx

@@ -1,12 +1,13 @@
 import { CSSProp, styled } from 'styled-components';
 
+import { getSize } from '@/components/molecules/TextAvatar/utils/getSize';
 import { TgetBorderRadiusViaSize, getBorderRadiusViaSize } from '@/design/designFunctions/getBorderRadiusViaSize';
-import { TSize, getSize } from '@/components/molecules/TextAvatar/utils/getSize';
+import { TglobalElementSizesWithFit } from '@/types/TGlobalElementSizes';
 
 // Styled img component
 type TStyledImageProps = {
   $rounded: TgetBorderRadiusViaSize | 'none';
-  $sizeC: TSize | string;
+  $sizeC: TglobalElementSizesWithFit | string;
   $externalStyle?: CSSProp;
 };
 export const StyledImage = styled.img<TStyledImageProps>`

src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx

@@ -31,6 +31,7 @@ export default function FancyProfilePicture(props: TFancyProfilePictureWithHTMLA
     </FancyImageWrapper>
   ) : (
     <TextAvatar
+      {...htmlProps}
       {...textAvatarSettings}
       borderRadius={borderRadius}
       sizeC={sizeC}

src/components/atoms/FancyProfilePicture/TFancyProfilePicture.model.ts

@@ -1,13 +1,13 @@
 import { CSSProp } from 'styled-components';
 
 import { TextAvatar } from '@/components/molecules/TextAvatar';
-import { TSize } from '@/components/molecules/TextAvatar/utils/getSize';
+import { TglobalElementSizes } from '@/types/TGlobalElementSizes';
 
 type TtextAvatarSettings = React.ComponentProps<typeof TextAvatar>;
 
 export type TFancyProfilePicture = {
   borderRadius?: 'sm' | 'md' | 'lg' | 'complete' | 'none';
-  sizeC?: TSize | string;
+  sizeC?: TglobalElementSizes | (string & {});
   externalStyle?: CSSProp;
   textAvatarSettings?: Omit<TtextAvatarSettings, 'text'>;
   nickname?: string;

src/components/atoms/FancyProfilePicture/utils/getTextSize.ts

@@ -1,8 +1,8 @@
-import { TSize } from '@/components/molecules/TextAvatar/utils/getSize';
+import { TglobalElementSizesWithFit } from '@/types/TGlobalElementSizes';
 import { TTypographyVariants } from '@/types/TTypographyVariants';
 
 // generate the text sizeC based on the sizeC prop
-export const getTextSize = (sizeC: TSize | string): TTypographyVariants => {
+export const getTextSize = (sizeC: TglobalElementSizesWithFit | (string & {})): TTypographyVariants => {
   switch (sizeC) {
     case 'xxs':
     case 'xs':

src/components/atoms/FancySVGAtom/sizeSettings.ts

@@ -1,7 +1,7 @@
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 
 export const sizes = {
   xxxs: '12px',
-  ...globalElementsizes,
+  ...globalElementSizes,
   full: '100%',
 };

src/components/atoms/ScalingSection/ScalingSection.tsx

@@ -87,11 +87,11 @@
       document.removeEventListener('touchmove', handleMoveTouch);
       document.removeEventListener('touchend', handleEnd);
     };
   }, [isDragging]);
 
   return (
     <SytledScalingSection id={id} ref={ref} onTouchStart={handleStartTouch} onMouseDown={handleStartMouse}>
-      <SwipeUpDash />
+      <SwipeUpDash onClick={onClick}/>
     </SytledScalingSection>
   );
 });

src/components/atoms/SkeletonBox/SkeletonBox.style.tsx

@@ -2,14 +2,14 @@ import { styled, keyframes, css } from 'styled-components';
 
 import { TTheme } from '@/types/TTheme';
 import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 import { TSkeletonBox } from './TSkeleton.model';
 import { clampLayer } from '@/utils/functions/clampLayer';
 
 type TSyledSkeletonBox = TStyledPrefixAndPicker<TSkeletonBox>;
 export const StyledSkeletonBox = styled.div<TSyledSkeletonBox & { theme: TTheme }>`
-  width: ${({ $sizeW }) => $sizeW && ($sizeW === 'fit' ? '100%' : globalElementsizes[$sizeW])};
-  height: ${({ $sizeH }) => $sizeH && ($sizeH === 'fit' ? '100%' : globalElementsizes[$sizeH])};
+  width: ${({ $sizeW }) => $sizeW && ($sizeW === 'fit' ? '100%' : globalElementSizes[$sizeW])};
+  height: ${({ $sizeH }) => $sizeH && ($sizeH === 'fit' ? '100%' : globalElementSizes[$sizeH])};
   background-color: ${({ theme, $themeType = 'primary', $layer }) => theme.color[$themeType][$layer || 0]};
   animation: ${({ theme, $themeType, $layer }) => createLoadingKeyframes({ theme, $themeType, $layer })} 2s infinite;
   border-radius: ${({ theme, $borderRadius }) => theme.borderRadius[$borderRadius ?? 'xs'] || '0px'};

src/components/atoms/SkeletonBox/TSkeleton.model.ts

@@ -1,14 +1,14 @@
 import { TBorderRadiusSizes } from '@/types/TBorderRadiusSizes';
-import { TGlobalElementSizes } from '@/types/TGlobalElementSizes';
+import { TglobalElementSizes } from '@/types/TGlobalElementSizes';
 import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
 import { TLayer } from '@/types/TLayer';
 import { CSSProp } from 'styled-components';
 
 export type TSkeletonBox = {
   themeType?: TUiColorsNotTransparent;
   layer?: TLayer;
-  sizeW?: TGlobalElementSizes | 'fit';
-  sizeH?: TGlobalElementSizes | 'fit';
+  sizeW?: TglobalElementSizes | 'fit';
+  sizeH?: TglobalElementSizes | 'fit';
   borderRadius?: TBorderRadiusSizes;
   aspectRatio?: string;
   externalStyle?: CSSProp;

src/components/atoms/SwipeUpDash/SwipeUpDash.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import { styled } from 'styled-components';
 
 import { TTheme } from '@/types/TTheme';
@@ -8,9 +9,9 @@ import simpleColorTransition from '@/design/designFunctions/simpleColorTransitio
 // --------------------------------------------------------------------------- //
 // ---- The SwipeUpDash component is a simple horizontal line as Button ------ //
 // --------------------------------------------------------------------------- //
-export default function SwipeUpDash() {
+export default function SwipeUpDash(props: React.HTMLAttributes<HTMLButtonElement>) {
   return (
-    <StyledButton>
+    <StyledButton {...props}>
       <StyledSwipeUpDash />
     </StyledButton>
   );

src/components/atoms/Typography/Typography.tsx

@@ -14,9 +14,9 @@ export default function Typography(props: TTypography) {
   const {
     elType,
     variant = 'bodytextMd',
+    themeType, // dont use a default color it should inherit from the parent
     children,
     externalStyle,
-    themeType,
     layer,
     lineHeight,
     fontWeight,

src/components/atoms/YearSelector/YearSelector.style.tsx

@@ -6,7 +6,7 @@ import { TTheme } from '@/types/TTheme';
 import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
 import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 import { TYearSelector } from '@/components/atoms/YearSelector/TYearSelector.model';
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 import { generateBorderRadiusForComponent } from '@/design/designFunctions/generateBorderRadiusForComponent';
 import { sizeSettings } from './sizeSettings';
 import { arrayToCssValues } from '@/design/designFunctions/arrayToCssValues';
@@ -24,7 +24,7 @@ export const StyledYearSelector = styled.div<TStyledYearSelector>`
   ${({ $borderRadius, $sizeC }) => generateBorderRadiusForComponent({ borderRadius: $borderRadius, sizeC: $sizeC })};
   background-color: ${({ theme, $layer = 2, $themeType = 'primary' }) =>
     getBackgroundColor({ theme, $themeType, $layer })};
-  height: ${({ $sizeC = 'md' }) => globalElementsizes[$sizeC]};
+  height: ${({ $sizeC = 'md' }) => globalElementSizes[$sizeC]};
 `;
 
 export const StyledButton = styled.button<{ theme: TTheme; $themeType?: TUiColorsNotTransparent; $layer?: TLayer }>`

src/components/atoms/YearSelector/sizeSettings.ts

@@ -1,13 +1,13 @@
 import { TFancySVGAtomSizes } from '@/components/atoms/FancySVGAtom';
 import { TSizeSettings } from '@/types/TSizeSettings';
-import { TGlobalElementSizes } from '@/types/TGlobalElementSizes';
+import { TglobalElementSizes } from '@/types/TGlobalElementSizes';
 import { TBorderRadiusSizes } from '@/types/TBorderRadiusSizes';
 import { TSpacingArray } from '@/types/TSpacings';
 
 type TSizeObj = {
   padding: TSpacingArray;
   iconSize: TFancySVGAtomSizes;
-  height?: TGlobalElementSizes;
+  height?: TglobalElementSizes;
   borderRadius?: TBorderRadiusSizes;
 };
 

src/components/molecules/ActionItem/ActionItem.style.tsx

@@ -2,7 +2,7 @@ import { styled } from 'styled-components';
 
 import { TStyledPrefixAndPicker } from '@/types/TStyledPrefixAndPicker';
 import { TActionItem } from '@/components/molecules/ActionItem/TActionItem.model';
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 import { disabledStyle } from '@/design/designFunctions/disabledStyle';
 import { generateThemeDesignForComponent } from '@/design/designFunctions/generateThemeDesignForComponent';
 import { IGenerateThemeDesignForComponent } from '@/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent';
@@ -17,7 +17,7 @@ export const ButtonStyle = styled.span<IGenerateThemeDesignForComponent & TWrapp
   align-items: center;
   justify-content: center;
 
-  height: ${({ $size }) => globalElementsizes[$size ?? 'md']};
+  height: ${({ $size }) => globalElementSizes[$size ?? 'md']};
   cursor: pointer;
 
   ${(props: IGenerateThemeDesignForComponent) => generateThemeDesignForComponent({ ...props })};

src/components/molecules/ActionItem/ActionItem.tsx

@@ -31,19 +31,21 @@ export default function ActionItem(props: TActionItemWithHTMLProps) {
     textColor,
     textHover,
     useSimpleTextColor,
+    hideLabel,
     ...htmlProps
   } = props;
 
   const unHoverActive = isActive ? 'active' : 'hover';
 
   return (
     <FancyFlexBox direction={calcPostionToFlex(labelAlign ?? 'left')} align="center" gap="8px" {...htmlProps}>
-      {label && (
+      {label && !hideLabel && (
         <DisabledStyleBox disabled={disabled}>
           <Typography variant={sizeSettings[size].fontSize}>{label}</Typography>
         </DisabledStyleBox>
       )}
       <ButtonStyle
+        aria-label={hideLabel ? label : undefined}
         $disabled={disabled}
         $size={size}
         $layer={layer}

src/components/molecules/ActionItem/TActionItem.model.ts

@@ -6,14 +6,15 @@ import { TUiColorsNotTransparent } from '@/types/TUiColorsNotTransparent';
 
 export type TActionItemSetting = {
   labelAlign?: 'left' | 'right' | 'top' | 'bottom';
+  hideLabel?: boolean;
   size?: TComponentSizesExtended;
   layer?: TLayer;
   themeType?: TUiColorsNotTransparent;
   themeTypeActiveHover?: TUiColorsNotTransparent;
 };
 
 export type TActionItemButton = {
-  label?: string;
+  label: string;
   icon: string | number | JSX.Element;
   onClick?: () => void;
   isActive?: boolean;

src/components/molecules/ActionItem/docu/ActionItem.stories.tsx

@@ -53,6 +53,10 @@ const meta = {
       description: 'The theme type of the action item when it is active or hovered',
       control: { type: 'select' },
     },
+    hideLabel: {
+      description: 'The hide label state of the action item',
+      control: { type: 'boolean' },
+    },
     onClick: {
       description: 'The click event of the action item',
       action: 'clicked',

src/components/molecules/ActionItem/sizeSettings.ts

@@ -1,9 +1,9 @@
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 import { TSizeSettingsExtended } from '@/types/TSizeSettings';
 import { TTypographyVariants } from '@/types/TTypographyVariants';
 
 type TSizeObj = {
-  size: keyof typeof globalElementsizes;
+  size: keyof typeof globalElementSizes;
   fontSize: TTypographyVariants;
 };
 

src/components/molecules/BottomBarIcon/sizeSettings.ts

@@ -1,8 +1,8 @@
 import { TSizeSettings } from '@/types/TSizeSettings';
-import { TGlobalElementSizes } from '@/types/TGlobalElementSizes';
+import { TglobalElementSizes } from '@/types/TGlobalElementSizes';
 
 type TSizeObj = {
-  sizeIcon: TGlobalElementSizes;
+  sizeIcon: TglobalElementSizes;
 };
 
 export const sizeSettings: TSizeSettings<TSizeObj> = {

src/components/molecules/Chip/sizeSettings.ts

@@ -1,19 +1,19 @@
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 import { TFancySVGAtomSizes } from '@/components/atoms/FancySVGAtom/TFancySVGAtom.model';
 
 export const sizesSettings = {
   sm: {
-    height: globalElementsizes.xs,
+    height: globalElementSizes.xs,
     deleteButtonSize: 'xxxs' as TFancySVGAtomSizes,
     iconSize: 'xxs' as TFancySVGAtomSizes,
   },
   md: {
-    height: globalElementsizes.sm,
+    height: globalElementSizes.sm,
     deleteButtonSize: 'xxxs' as TFancySVGAtomSizes,
     iconSize: 'xxs' as TFancySVGAtomSizes,
   },
   lg: {
-    height: globalElementsizes.md,
+    height: globalElementSizes.md,
     deleteButtonSize: 'xxxs' as TFancySVGAtomSizes,
     iconSize: 'xs' as TFancySVGAtomSizes,
   },

src/components/molecules/ColorDisplay/ColorDisplay.tsx

@@ -4,7 +4,7 @@ import Color from 'color';
 
 import { themeStore } from '@/design/theme/themeStore';
 import { CheckerBoardPattern } from '@/components/atoms/CheckerBoardPattern';
-import { globalElementsizes } from '@/design/theme/globalSizes';
+import { globalElementSizes } from '@/design/theme/globalSizes';
 
 import { ColorDisplayContainer, Content, Wrapper } from './ColorDisplay.style';
 import { TColorDisplayWithHTMLAttrs } from './TColorDisplay.model';
@@ -29,7 +29,7 @@ function ColorDisplay(props: TColorDisplayWithHTMLAttrs) {
   return (
     <Wrapper
       $fullHeight={fullHeight}
-      $height={globalElementsizes[sizeSettings[sizeC].height]}
+      $height={globalElementSizes[sizeSettings[sizeC].height]}
       $borderRadius={borderRadius ? borderRadius : sizeSettings[sizeC].borderRadius}
       {...htmlProps}
     >

src/components/molecules/ColorDisplay/sizeSettings.ts

@@ -1,11 +1,11 @@
 import { TFancySVGAtomSizes } from '@/components/atoms/FancySVGAtom';
 import { TBorderRadiusSizes } from '@/types/TBorderRadiusSizes';
-import { TGlobalElementSizes } from '@/types/TGlobalElementSizes';
+import { TglobalElementSizes } from '@/types/TGlobalElementSizes';
 import { TSizeSettings } from '@/types/TSizeSettings';
 import { TTypographyVariants } from '@/types/TTypographyVariants';
 
 type TSizeObj = {
-  height: TGlobalElementSizes;
+  height: TglobalElementSizes;
   borderRadius: TBorderRadiusSizes;
   typographyVariant: TTypographyVariants;
   iconSize: TFancySVGAtomSizes;