add git shouldnt ignore case

src/components/atoms/ActionWrapper/ActionWrapper.mdx

@@ -0,0 +1,57 @@
+# ActionWrapper
+
+`ActionWrapper` is a versatile React functional component designed to conditionally render either a `<button>` or an `<a>` (anchor) element based on the provided props. This component simplifies the process of creating UI elements that can switch between being a button or a link, maintaining consistent behavior and style across different use cases.
+
+## Props
+
+`ActionWrapper` accepts the standard HTML attributes for both `<button>` and `<a>` elements, with an additional `as` prop to determine which element type to render:
+
+- `as`: A required prop to specify the type of element to render. It accepts `'a'` for anchor or `'button'` for button.
+- Standard HTML attributes for buttons and anchors, such as `onClick`, `href`, `className`, `disabled`, etc.
+
+## Usage
+
+### As a Button
+
+To use `ActionWrapper` as a button, you set the `as` prop to `'button'` and pass any button-specific HTML attributes:
+
+```jsx
+import ActionWrapper from './path/to/ActionWrapper';
+
+<ActionWrapper as="button" onClick={() => console.log('Button clicked')} className="my-button">
+  Click Me
+</ActionWrapper>;
+```
+
+### As an Anchor
+
+To use it as an anchor tag, set the `as` prop to `'a'` and provide anchor-specific attributes like `href`:
+
+```jsx
+<ActionWrapper as="a" href="https://example.com" className="my-link">
+  Go to Example.com
+</ActionWrapper>
+```
+
+## Example
+
+Here's a practical example of using `ActionWrapper` in a component that can act either as a button or a link, based on the props it receives:
+
+```jsx
+import React from 'react';
+import ActionWrapper from './ActionWrapper';
+
+function MyComponent({ isLink, url, onClick }) {
+  return (
+    <ActionWrapper as={isLink ? 'a' : 'button'} href={isLink ? url : undefined} onClick={onClick}>
+      {isLink ? 'Visit URL' : 'Perform Action'}
+    </ActionWrapper>
+  );
+}
+
+export default MyComponent;
+```
+
+In this example, `MyComponent` uses `ActionWrapper` to conditionally render as a button or an anchor. The `isLink` prop determines the element type, while `url` and `onClick` provide the necessary attributes for each type.
+
+By using `ActionWrapper`, developers can create components with flexible rendering capabilities, simplifying the process of handling elements that can serve as both clickable actions and navigation links.

src/components/atoms/ActionWrapper/ActionWrapper.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+// Define specific prop types for 'a' and 'button'
+type THTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { as?: 'button' };
+type THTMLAnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & { as: 'a' };
+
+// Define the main component props as a union of these two types
+type TActionWrapperProps = THTMLButtonProps | THTMLAnchorProps;
+
+const ActionWrapper: React.FC<TActionWrapperProps> = (props) => {
+  const { children, ...restProps } = props;
+
+  // Conditionally render the 'a' or 'button' element
+  return restProps.as === 'a' ? <a {...restProps}>{children}</a> : <button {...restProps}>{children}</button>;
+};
+
+export default ActionWrapper;

src/components/atoms/ActionWrapper/index.ts

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

src/components/atoms/AlignedInputLabel/AlignedInputLabel.stories.tsx

@@ -0,0 +1,64 @@
+import { HTMLAttributes } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AlignedInputLabel } from './AlignedInputLabel';
+import { IAlignedInputLabel } from './TalignedInputLabel.model';
+import Typography from '../Typography/Typography';
+
+//This is a helper component to show the styled component in the story
+const HelperComponent = (props: IAlignedInputLabel & HTMLAttributes<HTMLLabelElement>) => (
+  <AlignedInputLabel {...props}>
+    <Typography type="label">Hello World</Typography>
+  </AlignedInputLabel>
+);
+
+// Give the component a more meaningful name in the storybook
+HelperComponent.displayName = 'AlignedInputLabel';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  component: HelperComponent,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    docs: {
+      description: {
+        component:
+          'The input label wich is aligned left or centered. <br> - the alignment is set by the $align prop. <br> - the color changes depending on the $isActive prop',
+      },
+    },
+  },
+  argTypes: {
+    $align: {
+      options: ['left', 'center'],
+      control: { type: 'radio' },
+    },
+    $colorState: {
+      control: { type: 'radio' },
+      options: ['error', 'active', 'default'],
+    },
+    $layer: {
+      control: { type: 'range', min: 1, max: 10 },
+    },
+    $themeType: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof HelperComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    $align: 'left',
+    $colorState: 'default',
+    $themeType: 'secondary',
+    $layer: 4,
+  },
+  render: (args: IAlignedInputLabel) => <HelperComponent {...args} />,
+};

src/components/atoms/AlignedInputLabel/AlignedInputLabel.tsx

@@ -0,0 +1,26 @@
+import { styled } from 'styled-components';
+
+import InputLabel from '../InputLabel/InputLabel';
+import { getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet';
+import { IAlignedInputLabel } from './TalignedInputLabel.model';
+
+//the aligned label is only with align left or centerd {align?: string; active?: boolean}
+// eslint-disable-next-line react-refresh/only-export-components
+export const AlignedInputLabel = styled(InputLabel)<IAlignedInputLabel>`
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: ${({ theme }) => theme.spacing.xxs};
+  justify-content: ${({ $align }) => ($align === 'left' ? 'flex-start' : $align === 'center' ? 'center' : 'flex-end')};
+  color: ${({ $colorState, theme, $themeType = 'secondary', $layer = 4 }) => {
+    switch ($colorState) {
+      case 'error':
+        return theme.colors.error[0];
+      case 'active':
+        return theme.colors.accent[0];
+      default:
+        return getTextColor({ theme, $themeType, $textLayer: $layer });
+    }
+  }};
+`;
+
+export default AlignedInputLabel;

src/components/atoms/AlignedInputLabel/TalignedInputLabel.model.ts

@@ -0,0 +1,13 @@
+import { TLayer } from '@/interface/TLayer';
+import { TTheme } from '@/interface/TTheme';
+import { TThemeTypes } from '@/interface/TUiColors';
+
+export type TAlign = 'left' | 'center';
+
+export interface IAlignedInputLabel {
+  $align?: TAlign;
+  $colorState?: 'error' | 'active' | 'default';
+  theme?: TTheme;
+  $themeType?: TThemeTypes;
+  $layer?: TLayer;
+}

src/components/atoms/AlignedInputLabel/index.ts

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

src/components/atoms/AnimatedLabel/AnimatedInputLabel.stories.tsx

@@ -0,0 +1,64 @@
+import React, { HTMLAttributes } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AnimatedInputLabel } from './AnimatedInputLabel';
+import { IAnimatedInputLabel } from './TAnimatedInputLabel.model';
+import Typography from '../Typography/Typography';
+
+// This is a helper component to show the styled component in the story
+const HelperComponent = (props: IAnimatedInputLabel & HTMLAttributes<HTMLLabelElement>) => (
+  <AnimatedInputLabel {...props}>
+    <Typography type="label">Hello World</Typography>
+  </AnimatedInputLabel>
+);
+
+// Give the component a more meaningful name in the storybook
+HelperComponent.displayName = 'AnimatedInputLabel';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'components/atoms/AnimatedInputLabel',
+  component: HelperComponent,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'The input label wich hase some colors and an animation. <br> - the color changes depending on the $colorState prop. <br> - the animation is triggered by the $moveUp prop',
+      },
+    },
+  },
+  argTypes: {
+    $moveUp: {
+      control: { type: 'boolean' },
+    },
+    $colorState: {
+      control: { type: 'radio' },
+      options: ['error', 'active', 'default'],
+    },
+    $layer: {
+      control: { type: 'range', min: 1, max: 10 },
+    },
+    $themeType: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof HelperComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    $moveUp: false,
+    $colorState: 'default',
+    $themeType: 'secondary',
+    $layer: 4,
+  },
+  render: (args) => <HelperComponent {...args} />,
+};

src/components/atoms/AnimatedLabel/AnimatedInputLabel.tsx

@@ -0,0 +1,55 @@
+import { styled, css } from 'styled-components';
+
+import InputLabel from '@/components/atoms/InputLabel/InputLabel';
+import { IAnimatedInputLabel } from './TAnimatedInputLabel.model';
+
+import { getTextColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet';
+import { TTheme } from '@/interface/TTheme';
+
+const activeHandler = (align: string, $moveUp?: boolean) => {
+  if (align !== 'center') {
+    return css`
+      bottom: 0;
+      left: 0;
+      ${$moveUp
+        ? css`
+            transform: translateY(-20px);
+          `
+        : ''}
+    `;
+  } else {
+    return css`
+      bottom: 0;
+      left: 50%;
+      text-align: center;
+      ${$moveUp
+        ? css`
+            transform: translateY(-20px) translate(-50%);
+          `
+        : 'transform: translate(-50%);'};
+    `;
+  }
+};
+
+// --------------------------------------------------------------------------- //
+// ---------- The input label wich hase some colors and an animation --------- //
+// --------------------------------------------------------------------------- //
+// eslint-disable-next-line react-refresh/only-export-components
+export const AnimatedInputLabel = styled(InputLabel)<IAnimatedInputLabel & { theme?: TTheme }>`
+  position: absolute;
+  padding: 12px 0 5px;
+  color: ${({ $colorState, theme, $themeType = 'secondary', $layer = 4 }) => {
+    switch ($colorState) {
+      case 'error':
+        return theme.colors.error[0];
+      case 'active':
+        return theme.colors.accent[0];
+      default:
+        return getTextColor({ theme, $themeType, $textLayer: $layer });
+    }
+  }};
+
+  ${({ $align, $moveUp }) => activeHandler($align!, $moveUp)};
+`;
+
+export default AnimatedInputLabel;

src/components/atoms/AnimatedLabel/TAnimatedInputLabel.model.ts

@@ -0,0 +1,12 @@
+import { TLayer } from '@/interface/TLayer';
+import { TTheme } from '@/interface/TTheme';
+import { TThemeTypes } from '@/interface/TUiColors';
+
+export interface IAnimatedInputLabel {
+  $align?: 'center' | 'left';
+  $moveUp?: boolean;
+  $colorState?: 'error' | 'active' | 'default';
+  $themeType?: TThemeTypes;
+  $layer?: TLayer;
+  theme?: TTheme;
+}

src/components/atoms/AnimatedLabel/index.ts

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

src/components/atoms/AvilableDot/AvailableDot.tsx

@@ -0,0 +1,29 @@
+import { styled } from 'styled-components';
+
+import { TTheme } from '@/interface/TTheme';
+
+// --------------------------------------------------------------------------- //
+// ---------- A little Circle that indicates if something is avilable -------- //
+// --------------------------------------------------------------------------- //
+export type IAvailableDot = 'completly' | 'partially' | 'not' | 'transparent';
+const AvailableDot = styled.div<{ $available?: IAvailableDot; theme?: TTheme }>`
+  width: 4px;
+  height: 4px;
+  border-radius: ${({ theme }) => theme.borderRadius.complete};
+  background-color: ${({ $available = 'completly', theme }) => {
+    switch ($available) {
+      case 'completly':
+        return theme.colors.success[0];
+      case 'partially':
+        return theme.colors.warning[0];
+      case 'not':
+        return theme.colors.error[0];
+      case 'transparent':
+        return 'transparent';
+    }
+  }};
+`;
+
+AvailableDot.displayName = 'AvailableDot';
+
+export default AvailableDot;