diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 6a944cb75..9caf0b786 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -23,4 +23,5 @@ module.exports = { '@typescript-eslint/restrict-plus-operands': 'off', '@typescript-eslint/no-non-null-asserted-optional-chain': 'off', }, + ignorePatterns: ['vite.config.ts', '.eslintrc.cjs'], }; diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e1345ed4d..4b568ee3a 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -17,8 +17,15 @@ jobs: - name: Install Dependencies run: npm install - - name: Ceck Prettier Formatting + - name: Check Prettier Formatting run: npx prettier --check . - name: Run ESLint run: npm run lint + + - name: Run Build + run: npm run build + + - name: Fail if Previous Steps Failed + if: ${{ failure() }} + run: exit 1 diff --git a/.github/workflows/qualityCheckForDevelop.yml b/.github/workflows/qualityCheckForDevelop.yml index 401d5cd50..0f6934539 100644 --- a/.github/workflows/qualityCheckForDevelop.yml +++ b/.github/workflows/qualityCheckForDevelop.yml @@ -24,3 +24,6 @@ jobs: - name: Run ESLint run: npm run lint + + - name: Run Build + run: npm run build diff --git a/package.json b/package.json index 822b850d5..533b26ef0 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@mrtryy/fancyuilibary", "description": "FancyUI Libary", "private": false, - "version": "0.1.12117", + "version": "0.1.129", "type": "module", "scripts": { "dev": "vite", @@ -15,28 +15,31 @@ "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix --max-warnings=-1", "checkFormat": "prettier --check .", "format": "prettier --write .", - "predeploy": "npm run lint && npm run build && npm run checkFormat" + "predeploy": "npm run lint && npm run checkFormat && npm run build" }, "lint-staged": { "*.ts": [ - "eslint --fix", + "eslint src --ext ts --report-unused-disable-directives --fix --max-warnings=-1", "prettier --write" ], "*.tsx": [ - "eslint --fix", + "eslint src --ext tsx --report-unused-disable-directives --fix --max-warnings=-1", + "prettier --write" + ], + "*.mdx": [ + "prettier --write" + ], + "*.yml": [ + "prettier --write" + ], + "*.json": [ "prettier --write" ] }, "dependencies": { - "@react-spring/web": "^9.7.3", - "@types/color": "^3.0.3", "@types/react-router-dom": "^5.3.3", - "@types/uuid": "^9.0.6", - "color": "^4.2.3", "react-router-dom": "^6.14.1", - "uuid": "^9.0.1", - "vite-plugin-dts": "^3.1.1", - "zustand": "^4.3.9" + "vite-plugin-dts": "^3.1.1" }, "devDependencies": { "@storybook/addon-essentials": "^7.5.2", @@ -73,18 +76,24 @@ "peerDependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "styled-components": "^6.0.7" + "styled-components": "^6.0.7", + "zustand": "^4.3.9", + "color": "^4.2.3", + "uuid": "^9.0.1", + "@react-spring/web": "^9.7.3", + "@types/color": "^3.0.3", + "@types/uuid": "^9.0.6" }, "files": [ "dist" ], - "main": "./dist/my-lib.umd.js", - "module": "./dist/my-lib.es.js", + "main": "./dist/fui.umd.js", + "module": "./dist/fui.es.js", "types": "./dist/index.d.ts", "exports": { ".": { - "import": "./dist/my-lib.es.js", - "require": "./dist/my-lib.cjs.js", + "import": "./dist/fui.es.js", + "require": "./dist/fui.cjs.js", "types": "./dist/index.d.ts" }, "./package.json": "./package.json" diff --git a/src/App.tsx b/src/App.tsx index 6526880b8..d45b13436 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -34,7 +34,7 @@ import ChipsRoute from './Routes/ChipsRoute/ChipsRoute'; import CheckboxRoute from './Routes/CheckboxRoute/CheckboxRoute'; import ColorGeneratorRoute from './Routes/ColorGeneratorRoute/ColorGeneratorRoute'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -import themeStore from './Components/UI/Design/color/themeStore'; +import themeStore from './Components/UI/Design/color/themeStore/themeStore'; import GlobalStyle from './GlobalStyle'; import FancyContentRoute from './Routes/FancyContentRoute/FancyContentRoute'; import { FancyModal, FancySwipeUpModal } from './lib'; @@ -42,6 +42,7 @@ import SwitchesRoute from './Routes/Switches/SwitchesRoute'; import MenueRoute from './Routes/MenuRoute/MenueRoute'; import InfoCardRoute from './Routes/InfoCardRoute/InfoCardRoute'; import FancyLayoutRoute from './Routes/FancyLayoutRoute/FancyLayoutRoute'; +import FancyBoxSetRoute from './Routes/FancyBoxSet/FancyBoxSetRoute'; // const Icon = ( // @@ -179,6 +180,9 @@ function App() {
  • Layout
    • +
  • + FancyBoxSet +
  • Experimental
    • @@ -219,6 +223,7 @@ function App() { } /> } /> } /> + } /> } /> diff --git a/src/Components/UI/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts b/src/Components/UI/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts index dd4861220..d0111903d 100644 --- a/src/Components/UI/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts +++ b/src/Components/UI/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts @@ -1,6 +1,6 @@ import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; export type TAlign = 'left' | 'center'; @@ -8,6 +8,6 @@ export interface IAlignedInputLabel { $align?: TAlign; $colorState?: 'error' | 'active' | 'default'; theme?: TTheme; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; } diff --git a/src/Components/UI/Atoms/AnimatedLabel/AnimatedInputLabel.tsx b/src/Components/UI/Atoms/AnimatedLabel/AnimatedInputLabel.tsx index eb3c78052..8e6fc1a2a 100644 --- a/src/Components/UI/Atoms/AnimatedLabel/AnimatedInputLabel.tsx +++ b/src/Components/UI/Atoms/AnimatedLabel/AnimatedInputLabel.tsx @@ -1,10 +1,11 @@ import { styled, css } from 'styled-components'; -import InputLabel from '../InputLabel/InputLabel'; -import { TUiColorsType } from '../../Design/color/designColor'; -import { getTextColor } from '../../Design/color/colorCalculatorForComponet'; +import InputLabel from '@/Components/UI/Atoms/InputLabel/InputLabel'; import { IAnimatedInputLabel } from './TAnimatedInputLabel.model'; +import { getTextColor } from '@/Components/UI/Design/color/colorCalculatorForComponet'; +import { TTheme } from '@/Components/UI/Interface/TTheme'; + const activeHandler = (align: string, $moveUp?: boolean) => { if (align !== 'center') { return css` @@ -34,7 +35,7 @@ const activeHandler = (align: string, $moveUp?: boolean) => { // ---------- The input label wich hase some colors and an animation --------- // // --------------------------------------------------------------------------- // // eslint-disable-next-line react-refresh/only-export-components -export const AnimatedInputLabel = styled(InputLabel)` +export const AnimatedInputLabel = styled(InputLabel)` position: absolute; padding: 12px 0 5px; color: ${({ $colorState, theme, $themeType = 'secondary', $layer = 4 }) => { diff --git a/src/Components/UI/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts b/src/Components/UI/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts index dd610965b..cd7afaa9f 100644 --- a/src/Components/UI/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts +++ b/src/Components/UI/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts @@ -1,12 +1,12 @@ import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; export interface IAnimatedInputLabel { $align?: 'center' | 'left'; $moveUp?: boolean; $colorState?: 'error' | 'active' | 'default'; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; theme?: TTheme; } diff --git a/src/Components/UI/Atoms/ColorDisplay/ColorDisplay.tsx b/src/Components/UI/Atoms/ColorDisplay/ColorDisplay.tsx index ecb8ece03..90e1eafaa 100644 --- a/src/Components/UI/Atoms/ColorDisplay/ColorDisplay.tsx +++ b/src/Components/UI/Atoms/ColorDisplay/ColorDisplay.tsx @@ -5,9 +5,9 @@ import Typography from '../Typography/Typography'; import copyToClipboard from '../../HelperFunctions/copyToClipBoard'; import CheckerBoardPattern from '../CheckerBoardPattern/CheckerBoardPattern'; import { ColorDisplayContainer, Wrapper, Content, WrapperSVG } from './ColorDisplay.style'; -import ClipBoardIcon from '../../SVGIcons/SVGClipBoardIcon'; -import ClipBoardIconCheck from '../../SVGIcons/SVGClipBoardIconChecked'; -import themeStore from '../../Design/color/themeStore'; +import ClipBoardIcon from '../../SVGIcons/SVGClipBoardIcon/SVGClipBoardIcon'; +import ClipBoardIconCheck from '../../SVGIcons/SVGClipBoardIconChecked/SVGClipBoardIconChecked'; +import themeStore from '../../Design/color/themeStore/themeStore'; // --------------------------------------------------------------------------- // // ----- The main ColorDisplay Component for display the color in a box ------ // diff --git a/src/Components/UI/Atoms/ColorIndicator/ColorIndicator.style.tsx b/src/Components/UI/Atoms/ColorIndicator/ColorIndicator.style.tsx index 3a1e59da0..935bc18ce 100644 --- a/src/Components/UI/Atoms/ColorIndicator/ColorIndicator.style.tsx +++ b/src/Components/UI/Atoms/ColorIndicator/ColorIndicator.style.tsx @@ -1,6 +1,6 @@ import { styled, css } from 'styled-components'; -import { boxShadow } from '../../Design/shadows'; +import { boxShadow } from '../../Design/shadows/shadows'; import { TTheme } from '@/Components/UI/Interface/TTheme'; export const WrapperIndicator = styled.div<{ $isActive: boolean }>` diff --git a/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.style.tsx b/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.style.tsx index 584fce7fc..6ef86a069 100644 --- a/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.style.tsx +++ b/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.style.tsx @@ -1,8 +1,8 @@ import { css, styled } from 'styled-components'; import { IRange } from './DateNumberAtom'; -import { disabledStyle } from '../../HelperFunctions/designFunctions/disableStyle'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { disabledStyle } from '../../Design/designFunctions/disabledStyle/disableStyle'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getTextColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -14,7 +14,7 @@ interface IStyledDay { $range?: IRange; $isCurrentDay?: boolean; $selected?: boolean; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; } export const StyledDay = styled.button` diff --git a/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.tsx b/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.tsx index af545342a..782ead5d8 100644 --- a/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.tsx +++ b/src/Components/UI/Atoms/DateNumberAtom/DateNumberAtom.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { StyledDay } from './DateNumberAtom.style'; import Typography from '../Typography/Typography'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; export type IRange = { start?: boolean; end?: boolean; inRange?: boolean }; @@ -13,7 +13,7 @@ interface IDay { onClick?: () => void; range?: IRange; isCurrentDay?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } // --------------------------------------------------------------------------- // diff --git a/src/Components/UI/Atoms/DateOutput/DateOutput.tsx b/src/Components/UI/Atoms/DateOutput/DateOutput.tsx index 862867318..e600c1a89 100644 --- a/src/Components/UI/Atoms/DateOutput/DateOutput.tsx +++ b/src/Components/UI/Atoms/DateOutput/DateOutput.tsx @@ -2,12 +2,12 @@ import React, { useEffect, useMemo, useState } from 'react'; import { styled } from 'styled-components'; import Typography from '../Typography/Typography'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { getBackgroundColor, getTextColor } from '../../Design/color/colorCalculatorForComponet'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -const DateOutputButton = styled.button<{ $isActive?: boolean; theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +const DateOutputButton = styled.button<{ $isActive?: boolean; theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` text-align: center; width: 100%; background-color: ${({ theme, $isActive, $themeType = 'primary', $layer = 2 }) => @@ -29,7 +29,7 @@ interface IDateOutput { date?: Date; isActive?: boolean; onClick?: () => void; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function DateOutput({ date = new Date(), isActive, onClick, themeType, layer }: IDateOutput) { diff --git a/src/Components/UI/Atoms/EditBarModal/EditBarModal.style.tsx b/src/Components/UI/Atoms/EditBarModal/EditBarModal.style.tsx index c67c32da8..47af10f5b 100644 --- a/src/Components/UI/Atoms/EditBarModal/EditBarModal.style.tsx +++ b/src/Components/UI/Atoms/EditBarModal/EditBarModal.style.tsx @@ -1,6 +1,6 @@ import { styled, css } from 'styled-components'; -import { boxShadow } from '../../Design/shadows'; +import { boxShadow } from '../../Design/shadows/shadows'; import { TTheme } from '@/Components/UI/Interface/TTheme'; //this calculates the spacing from left and right or nothing diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.model.ts b/src/Components/UI/Atoms/FancyBox/FancyBox.model.ts index 756374d68..4627ff968 100644 --- a/src/Components/UI/Atoms/FancyBox/FancyBox.model.ts +++ b/src/Components/UI/Atoms/FancyBox/FancyBox.model.ts @@ -1,12 +1,13 @@ import { CSSProp } from 'styled-components'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; type HTMLDivElementProps = Omit, 'style'>; interface IFancyBox { + as?: keyof JSX.IntrinsicElements; outlined?: boolean; layer?: TLayer; - themeType?: TUiColors; + themeType?: TThemeTypes; children?: React.ReactNode; outlinedBackgroundStrength?: number; externalStyle?: CSSProp; diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.stories.tsx b/src/Components/UI/Atoms/FancyBox/FancyBox.stories.tsx index 75f4d6d06..bd3919762 100644 --- a/src/Components/UI/Atoms/FancyBox/FancyBox.stories.tsx +++ b/src/Components/UI/Atoms/FancyBox/FancyBox.stories.tsx @@ -7,7 +7,7 @@ import { css } from 'styled-components'; import { FancyMiniProfile } from '../../Molecules/FancyMiniProfile'; import { HeaderTitleWithLogo } from '../../Molecules/HeaderTitleWithLogo'; import { FancyBottomBarIcon } from '../../Templates/FancyBottomBarIcon'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; import React from 'react'; import { FancySearchBar } from '../../Organisms/FancySearchBar'; diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.style.tsx b/src/Components/UI/Atoms/FancyBox/FancyBox.style.tsx index d864529e2..900eef8ea 100644 --- a/src/Components/UI/Atoms/FancyBox/FancyBox.style.tsx +++ b/src/Components/UI/Atoms/FancyBox/FancyBox.style.tsx @@ -1,13 +1,13 @@ import { styled } from 'styled-components'; -import generateThemeForCard from '../../HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard'; +import generateThemeForCard from '../../Design/designFunctions/generateThemeForCard/generateThemeForCard'; import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model'; import { IFancyBoxProps } from './FancyBox.model'; import { TTheme } from '@/Components/UI/Interface/TTheme'; // the styled-component for the FancyBar type IStyledFancyBox = IStyledPrefixAndPicker & { theme: TTheme }; -export const StyledFancyBar = styled.div` +export const StyledFancyBox = styled.div` box-sizing: border-box; ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) => generateThemeForCard({ $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength })}; diff --git a/src/Components/UI/Atoms/FancyBox/FancyBox.tsx b/src/Components/UI/Atoms/FancyBox/FancyBox.tsx index 6c8836461..b2893d627 100644 --- a/src/Components/UI/Atoms/FancyBox/FancyBox.tsx +++ b/src/Components/UI/Atoms/FancyBox/FancyBox.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { IFancyBoxProps } from './FancyBox.model'; -import { StyledFancyBar } from './FancyBox.style'; +import { StyledFancyBox } from './FancyBox.style'; // --------------------------------------------------------------------------- // // ------------ A Bar that can usesd for for the most components ------------ // @@ -10,14 +10,14 @@ export default function FancyBar(props: IFancyBoxProps) { const { layer, themeType, outlined, outlinedBackgroundStrength, externalStyle } = props; return ( - {props.children} - + ); } diff --git a/src/Components/UI/Atoms/FancyCard/Card.model.ts b/src/Components/UI/Atoms/FancyCard/Card.model.ts index aa7ee17dc..923aa80a7 100644 --- a/src/Components/UI/Atoms/FancyCard/Card.model.ts +++ b/src/Components/UI/Atoms/FancyCard/Card.model.ts @@ -1,14 +1,14 @@ -import { IRoundedEdges } from '../../HelperFunctions/designFunctions/edgeCaluculation'; +import { IRoundedEdges } from '../../Design/designFunctions/edgeCaluculation'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TSpacings } from '@/Components/UI/Interface/TSpacings'; // the scaling types for the card type IScaling = '100%' | 'auto' | string; // the raw styling props for the card export interface StyledCardProps { - themeType?: TUiColors; + themeType?: TThemeTypes; textLayer?: TLayer; height?: IScaling; width?: IScaling; diff --git a/src/Components/UI/Atoms/FancyCard/FancyCard.style.tsx b/src/Components/UI/Atoms/FancyCard/FancyCard.style.tsx index 1b97daf71..6c138716e 100644 --- a/src/Components/UI/Atoms/FancyCard/FancyCard.style.tsx +++ b/src/Components/UI/Atoms/FancyCard/FancyCard.style.tsx @@ -3,9 +3,9 @@ import { styled } from 'styled-components'; import { StyledCardProps } from './Card.model'; import IStyledPrefixAndOmiter from '../../Interface/IStyledPrefixAndOmiter.model'; import { spacingPx } from '../../Design/designSizes'; -import edgeCalculation from '../../HelperFunctions/designFunctions/edgeCaluculation'; +import edgeCalculation from '../../Design/designFunctions/edgeCaluculation'; -import { boxShadow } from '../../Design/shadows'; +import { boxShadow } from '../../Design/shadows/shadows'; import getColorsForComponent from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; diff --git a/src/Components/UI/Atoms/FancyLine/FancyLine.tsx b/src/Components/UI/Atoms/FancyLine/FancyLine.tsx index ee7467b4e..e4617e3d9 100644 --- a/src/Components/UI/Atoms/FancyLine/FancyLine.tsx +++ b/src/Components/UI/Atoms/FancyLine/FancyLine.tsx @@ -4,7 +4,7 @@ import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; type TStyledFancyLine = IStyledPrefixAndPicker & { theme?: TTheme }; const StyledFancyLine = styled.hr` @@ -35,7 +35,7 @@ type IFancyLine = { direction?: 'horizontal' | 'vertical'; thickness?: string; margin?: string; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; }; // --------------------------------------------------------------------------- // diff --git a/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx b/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx index e7a885435..848de08a5 100644 --- a/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx +++ b/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; import { IFancyProfilePicture } from './FancyProfilePicture'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -59,7 +59,7 @@ interface IPlaceholderProps { $color?: string; $backgroundColor?: string; theme?: TTheme; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; } diff --git a/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.tsx b/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.tsx index c0494b01a..5d8597e3a 100644 --- a/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.tsx +++ b/src/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Placeholder, StyledImage, TSize } from './FancyProfilePicture.style'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { Typography } from '../Typography'; import { TTypography } from '@/Components/UI/Interface/TTypography'; @@ -32,7 +32,7 @@ export interface IFancyProfilePicture { size?: TSize | string; alt?: string; layer?: TLayer; - themeType?: TUiColors; + themeType?: TThemeTypes; letterLength?: number; className?: string; } diff --git a/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.model.ts b/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.model.ts index f27adc77e..a0ed8e7a5 100644 --- a/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.model.ts +++ b/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.model.ts @@ -1,6 +1,6 @@ import { CSSProp } from 'styled-components'; import IStyledPrefixAndOmiter from '../../Interface/IStyledPrefixAndOmiter.model'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; export const sizes = { @@ -21,7 +21,7 @@ export type ISVGAtom = { isPassive?: boolean; isActive?: boolean; errorMessage?: string; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; }; diff --git a/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx b/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx index d30847c5c..7741c7b0a 100644 --- a/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx +++ b/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx @@ -1,7 +1,7 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; -import SVGXCircle from '../../SVGIcons/SVGXCircle'; +import SVGXCircle from '../../SVGIcons/SVGXCircle/SVGXCircle'; // Import the component to be tested import FancySVGAtom from './FancySVGAtom'; diff --git a/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.tsx b/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.tsx index 3d0c4c35c..87159f22d 100644 --- a/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.tsx +++ b/src/Components/UI/Atoms/FancySVGAtom/FancySVGAtom.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { styled } from 'styled-components'; import { ISVGAtomProps, IStyledSVGAtom, sizes } from './FancySVGAtom.model'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -10,7 +10,7 @@ interface ICalcIconColor { theme: TTheme; $isActive?: boolean; $errorMessage?: string | undefined; - $themeType: TUiColors; + $themeType: TThemeTypes; $layer?: number; } diff --git a/src/Components/UI/Atoms/FancyXButton/FancyXButton.tsx b/src/Components/UI/Atoms/FancyXButton/FancyXButton.tsx index 4d8c08c12..06c26d9df 100644 --- a/src/Components/UI/Atoms/FancyXButton/FancyXButton.tsx +++ b/src/Components/UI/Atoms/FancyXButton/FancyXButton.tsx @@ -4,12 +4,12 @@ import Color from 'color'; import { fontSize } from '../../Design/designSizes'; import { simpleColorTransition } from '../../Design/simpleTransition'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypesNotTrasparent } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -type FancyXButtonDesign = Exclude; +type FancyXButtonDesign = TThemeTypesNotTrasparent; interface IStyledFancyXButton { $themeType?: FancyXButtonDesign; diff --git a/src/Components/UI/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx b/src/Components/UI/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx index 1c23cd1dd..8513e34c8 100644 --- a/src/Components/UI/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx +++ b/src/Components/UI/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { styled, css } from 'styled-components'; -import { textShadow } from '../../Design/shadows'; +import { textShadow } from '../../Design/shadows/shadows'; import { TTheme } from '@/Components/UI/Interface/TTheme'; // Define the gradient options for the overlay diff --git a/src/Components/UI/Atoms/InputLabel/InputLabel.stories.tsx b/src/Components/UI/Atoms/InputLabel/InputLabel.stories.tsx index ba72c75de..2eb186599 100644 --- a/src/Components/UI/Atoms/InputLabel/InputLabel.stories.tsx +++ b/src/Components/UI/Atoms/InputLabel/InputLabel.stories.tsx @@ -1,6 +1,6 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; -import themeStore from '../../Design/color/themeStore'; +import themeStore from '../../Design/color/themeStore/themeStore'; // Import the component to be tested import InputLabel from './InputLabel'; diff --git a/src/Components/UI/Atoms/InputUnderline/InputUnderline.tsx b/src/Components/UI/Atoms/InputUnderline/InputUnderline.tsx index fbbfa4f16..f15688327 100644 --- a/src/Components/UI/Atoms/InputUnderline/InputUnderline.tsx +++ b/src/Components/UI/Atoms/InputUnderline/InputUnderline.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { styled, css } from 'styled-components'; import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -46,7 +46,7 @@ interface IFancyUnderline { colorState?: 'error' | 'active' | 'default'; isActive?: boolean; autoWidth?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } // --------------------------------------------------------------------------- // diff --git a/src/Components/UI/Atoms/ListDivider/ListDivider.model.ts b/src/Components/UI/Atoms/ListDivider/ListDivider.model.ts index c0876982f..3413f72f2 100644 --- a/src/Components/UI/Atoms/ListDivider/ListDivider.model.ts +++ b/src/Components/UI/Atoms/ListDivider/ListDivider.model.ts @@ -1,4 +1,4 @@ -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; export type TTextAlign = 'left' | 'center' | 'right'; @@ -14,7 +14,7 @@ type WithoutLabel = { }; export type IListDivider = { - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; noLine?: boolean; bold?: boolean; diff --git a/src/Components/UI/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx b/src/Components/UI/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx index a08565ca8..375823e02 100644 --- a/src/Components/UI/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx +++ b/src/Components/UI/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled, { keyframes } from 'styled-components'; -import SVGLoadingArrows from '../../SVGIcons/SVGLoadingArrows'; +import SVGLoadingArrows from '../../SVGIcons/SVGLoadingArrows/SVGLoadingArrows'; import { ISVGAtomProps } from '../FancySVGAtom/FancySVGAtom.model'; const loadingAnimation = keyframes` diff --git a/src/Components/UI/Atoms/MenuItem/MenuItem.style.tsx b/src/Components/UI/Atoms/MenuItem/MenuItem.style.tsx index 04f1028c4..eb215767f 100644 --- a/src/Components/UI/Atoms/MenuItem/MenuItem.style.tsx +++ b/src/Components/UI/Atoms/MenuItem/MenuItem.style.tsx @@ -1,12 +1,12 @@ import styled from 'styled-components'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; import { getBackgroundColor, getTextColor } from '../../Design/color/colorCalculatorForComponet'; type StyledMenuProps = { - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; theme: TTheme; as?: 'a' | 'button'; diff --git a/src/Components/UI/Atoms/MenuItem/MenuItem.tsx b/src/Components/UI/Atoms/MenuItem/MenuItem.tsx index 26614a112..0d8ff34c5 100644 --- a/src/Components/UI/Atoms/MenuItem/MenuItem.tsx +++ b/src/Components/UI/Atoms/MenuItem/MenuItem.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { StyledMenuItem } from './MenuItem.style'; @@ -9,7 +9,7 @@ type HTMLAnchorProps = React.AnchorHTMLAttributes & { as: 'a' type MenueItemProps = { children?: React.ReactNode; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } & (HTMLButtonProps | HTMLAnchorProps); // --------------------------------------------------------------------------- // diff --git a/src/Components/UI/Atoms/PasswordEye/PasswordEye.tsx b/src/Components/UI/Atoms/PasswordEye/PasswordEye.tsx index 1bedd4bd6..362a5099e 100644 --- a/src/Components/UI/Atoms/PasswordEye/PasswordEye.tsx +++ b/src/Components/UI/Atoms/PasswordEye/PasswordEye.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import SVGEyeCrossed from '../../SVGIcons/SVGEyeCrossed'; -import SVGEyeOpen from '../../SVGIcons/SVGEyeOpen'; +import SVGEyeCrossed from '../../SVGIcons/SVGEyeCrossed/SVGEyeCrossed'; +import SVGEyeOpen from '../../SVGIcons/SVGEyeOpen/SVGEyeOpen'; import FancySVGAtom from '../FancySVGAtom/FancySVGAtom'; interface IPasswordEye { diff --git a/src/Components/UI/Atoms/ProgressBar/ProgressBar.tsx b/src/Components/UI/Atoms/ProgressBar/ProgressBar.tsx index 3adc838e8..aa15910c1 100644 --- a/src/Components/UI/Atoms/ProgressBar/ProgressBar.tsx +++ b/src/Components/UI/Atoms/ProgressBar/ProgressBar.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { styled } from 'styled-components'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; // Define the styled component for the progress bar container -const ProgressBarContainer = styled.div<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +const ProgressBarContainer = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` width: 100%; height: 4px; background-color: ${({ theme, $themeType = 'secondary', $layer = 4 }) => getBackgroundColor({ theme, $themeType, $layer })}; @@ -35,7 +35,7 @@ export interface IProgressBar { progress?: number; maxValue?: number; id?: string; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } // Define the ProgressBar component diff --git a/src/Components/UI/Atoms/RawCheckbox/RawCheckbox.tsx b/src/Components/UI/Atoms/RawCheckbox/RawCheckbox.tsx index 7786afd33..5f623422d 100644 --- a/src/Components/UI/Atoms/RawCheckbox/RawCheckbox.tsx +++ b/src/Components/UI/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 '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // --------------------------------------------------------------------------- // // -------------------- A simple Checkbox with a Label ----------------------- // diff --git a/src/Components/UI/Atoms/RawLI/RawLI.tsx b/src/Components/UI/Atoms/RawLI/RawLI.tsx new file mode 100644 index 000000000..235488438 --- /dev/null +++ b/src/Components/UI/Atoms/RawLI/RawLI.tsx @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const RawLI = styled.li` + list-style: none; +`; + +export default RawLI; diff --git a/src/Components/UI/Atoms/RawLI/index.ts b/src/Components/UI/Atoms/RawLI/index.ts new file mode 100644 index 000000000..4abcdaa2b --- /dev/null +++ b/src/Components/UI/Atoms/RawLI/index.ts @@ -0,0 +1 @@ +export { default as RawLI } from './RawLI'; diff --git a/src/Components/UI/Atoms/RawRadio/RawRadio.stories.tsx b/src/Components/UI/Atoms/RawRadio/RawRadio.stories.tsx new file mode 100644 index 000000000..7e55de15d --- /dev/null +++ b/src/Components/UI/Atoms/RawRadio/RawRadio.stories.tsx @@ -0,0 +1,58 @@ +// Import necessary dependencies +import { Meta, StoryObj } from '@storybook/react'; + +// Import the component to be tested +import RawRadio from './RawRadio'; + +// Define metadata for the story +const meta = { + component: RawRadio, + parameters: { + docs: { + description: { + component: 'Dumb-Comonent: The RawRadio Renders only a Styled Radio Button.', + }, + }, + }, + // Define arguments for the story + argTypes: { + checked: { + description: 'The checked state of the radio button', + control: { + type: 'boolean', + }, + }, + tabIndex: { + description: 'The tabIndex of the radio button', + control: { + type: 'number', + }, + }, + }, + + // Add tags to the story + tags: ['autodocs'], +} satisfies Meta; + +// Export the metadata +export default meta; +// Define the story object +type Story = StoryObj; + +// Define the primary story +export const Primary: Story = { + render: (args) => , + args: { + checked: false, + tabIndex: 0, + name: 'radio', + }, + + parameters: { + docs: { + description: { + story: '', + }, + }, + }, +}; diff --git a/src/Components/UI/Atoms/RawRadio/RawRadio.style.tsx b/src/Components/UI/Atoms/RawRadio/RawRadio.style.tsx new file mode 100644 index 000000000..d5b32cc0a --- /dev/null +++ b/src/Components/UI/Atoms/RawRadio/RawRadio.style.tsx @@ -0,0 +1,55 @@ +import { styled } from 'styled-components'; +import { TTheme } from '../../Interface/TTheme'; + +export const RadioWrapper = styled.div` + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + flex-shrink: 0; +`; + +export const HiddenRadio = styled.input.attrs({ type: 'radio' })` + margin: 0; + position: absolute; + cursor: pointer; + opacity: 1; + background-color: transparent; + z-index: 0; + appearance: none; + outline: none; + width: 16px; + height: 16px; +`; + +export const StyledRadio = styled.span<{ checked: boolean; theme: TTheme }>` + width: 16px; + height: 16px; + border: 2px solid; + border-color: ${(props) => (props.checked ? props.theme.colors.accent[2] : props.theme.colors.primary[3])}; + background: ${(props) => (props.checked ? 'transparent' : props.theme.colors.primary[3])}; + border-radius: 50%; + display: inline-block; + position: relative; + flex-shrink: 0; + transition: + background 0.2s ease, + border-color 0.2s ease; + + &:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 10px; + height: 10px; + border-radius: 50%; + background: ${(props) => (props.checked ? props.theme.colors.accent[1] : 'transparent')}; + transition: + background 0.2s ease, + border-color 0.2s ease; + } +`; diff --git a/src/Components/UI/Atoms/RawRadio/RawRadio.tsx b/src/Components/UI/Atoms/RawRadio/RawRadio.tsx new file mode 100644 index 000000000..3e4cdea46 --- /dev/null +++ b/src/Components/UI/Atoms/RawRadio/RawRadio.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { HiddenRadio, RadioWrapper, StyledRadio } from './RawRadio.style'; + +export type TRawRadioProp = { + name: string; + checked: boolean; +} & React.InputHTMLAttributes; +// --------------------------------------------------------------------------- // +// ---------- The Raw Radio is only a styled Radio input -------------------- // +// --------------------------------------------------------------------------- // +export default function RawRadio(props: TRawRadioProp) { + const { name, checked, tabIndex, ...inputProps } = props; + + return ( + + + + + ); +} diff --git a/src/Components/UI/Atoms/RawRadio/index.ts b/src/Components/UI/Atoms/RawRadio/index.ts new file mode 100644 index 000000000..a361de5de --- /dev/null +++ b/src/Components/UI/Atoms/RawRadio/index.ts @@ -0,0 +1 @@ +export { default as RawRadio } from './RawRadio'; diff --git a/src/Components/UI/Atoms/RawSlider/RawSlider.style.tsx b/src/Components/UI/Atoms/RawSlider/RawSlider.style.tsx index da326f0d8..e752b12cb 100644 --- a/src/Components/UI/Atoms/RawSlider/RawSlider.style.tsx +++ b/src/Components/UI/Atoms/RawSlider/RawSlider.style.tsx @@ -1,7 +1,7 @@ import { styled, css } from 'styled-components'; -import { boxShadow } from '../../Design/shadows'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { boxShadow } from '../../Design/shadows/shadows'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -18,7 +18,7 @@ const DragableThumb = css<{ theme: TTheme }>` border: none; `; -export const StyledRawSlider = styled.input<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +export const StyledRawSlider = styled.input<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` -webkit-appearance: none; width: 100%; margin: 0; diff --git a/src/Components/UI/Atoms/RawSlider/RawSlider.tsx b/src/Components/UI/Atoms/RawSlider/RawSlider.tsx index c67f40473..d954236d3 100644 --- a/src/Components/UI/Atoms/RawSlider/RawSlider.tsx +++ b/src/Components/UI/Atoms/RawSlider/RawSlider.tsx @@ -1,7 +1,7 @@ import React, { InputHTMLAttributes, useRef } from 'react'; import { StyledRawSlider } from './RawSlider.style'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; // --------------------------------------------------------------------------- // // ------------ Here is createt the Slider Atom (Range Slider) --------------- // @@ -10,7 +10,7 @@ export interface IRawSlider extends InputHTMLAttributes { id?: string; activeHandler?: (value: boolean) => void; ref?: React.RefObject; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function RawSlider(props: IRawSlider) { diff --git a/src/Components/UI/Atoms/ScrollableBar/ScrollableBar.stories.tsx b/src/Components/UI/Atoms/ScrollableBar/ScrollableBar.stories.tsx index 70fa200f2..5098c4a12 100644 --- a/src/Components/UI/Atoms/ScrollableBar/ScrollableBar.stories.tsx +++ b/src/Components/UI/Atoms/ScrollableBar/ScrollableBar.stories.tsx @@ -1,7 +1,7 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; -import SVGEyeCrossed from '../../SVGIcons/SVGEyeCrossed'; +import SVGEyeCrossed from '../../SVGIcons/SVGEyeCrossed/SVGEyeCrossed'; // Import the component to be tested import ScrollableBar from './ScrollableBar'; diff --git a/src/Components/UI/Atoms/SimpleDialog/SimpleDialog.tsx b/src/Components/UI/Atoms/SimpleDialog/SimpleDialog.tsx index e92d5ffbe..86817663e 100644 --- a/src/Components/UI/Atoms/SimpleDialog/SimpleDialog.tsx +++ b/src/Components/UI/Atoms/SimpleDialog/SimpleDialog.tsx @@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react'; import { styled } from 'styled-components'; import { animated, useSpring } from '@react-spring/web'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import getColorsForComponent from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; // Define the styled component for the dialog -const StyledDialog = styled(animated.div)<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +const StyledDialog = styled(animated.div)<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` position: fixed; top: 50%; left: 50%; @@ -26,7 +26,7 @@ const StyledDialog = styled(animated.div)<{ theme: TTheme; $themeType?: TUiColor interface ISimpleDialog { isOpen: boolean; children: React.ReactNode; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } diff --git a/src/Components/UI/Atoms/SingleInputAtom/SingleInputAtom.tsx b/src/Components/UI/Atoms/SingleInputAtom/SingleInputAtom.tsx index 59d640422..dd4d0ec5f 100644 --- a/src/Components/UI/Atoms/SingleInputAtom/SingleInputAtom.tsx +++ b/src/Components/UI/Atoms/SingleInputAtom/SingleInputAtom.tsx @@ -2,7 +2,7 @@ import React, { forwardRef, useState } from 'react'; import { styled } from 'styled-components'; import { fontSize } from '../../Design/designSizes'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -11,7 +11,7 @@ import { TTheme } from '@/Components/UI/Interface/TTheme'; interface StyledSingleInputProps { $hasValue: boolean; $isFocused: boolean; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; } const StyledSingleInput = styled.input` @@ -38,7 +38,7 @@ interface ISingleInputAtomProps { value: string; ariaLabel?: string; onKeyDown?: (e: React.KeyboardEvent) => void; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export const SingleInputAtom = forwardRef( diff --git a/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx b/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx index 370355144..b7162ea90 100644 --- a/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx +++ b/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx @@ -1,7 +1,7 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // Import the component to be tested import SpeedDailMenueItem from './SpeedDailMenueItem'; diff --git a/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx b/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx index 7b7e46cf0..d8edf1ee5 100644 --- a/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx +++ b/src/Components/UI/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx @@ -1,7 +1,7 @@ import styled, { css } from 'styled-components'; import { fontSize } from '../../Design/designSizes'; -import { boxShadow, textShadow } from '../../Design/shadows'; +import { boxShadow, textShadow } from '../../Design/shadows/shadows'; import { TTheme } from '@/Components/UI/Interface/TTheme'; export const MenueItemContainer = styled.div<{ $isOpen?: boolean; $index: number }>` diff --git a/src/Components/UI/Atoms/SwipeUpContainer/SwipeUpContainer.tsx b/src/Components/UI/Atoms/SwipeUpContainer/SwipeUpContainer.tsx index 00ddff6a0..3a7658190 100644 --- a/src/Components/UI/Atoms/SwipeUpContainer/SwipeUpContainer.tsx +++ b/src/Components/UI/Atoms/SwipeUpContainer/SwipeUpContainer.tsx @@ -3,13 +3,13 @@ import { styled } from 'styled-components'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TTheme } from '@/Components/UI/Interface/TTheme'; interface IStyledSwipeUpContainer { $giveSpace: boolean; theme: TTheme; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; } @@ -36,7 +36,7 @@ interface ISwipeUpContainer { children: React.ReactNode; style?: { height: string }; isScalable?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function SwipeUpContainer({ children, isScalable = true, style, themeType, layer }: ISwipeUpContainer) { diff --git a/src/Components/UI/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx b/src/Components/UI/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx index 9d69e6b02..5b43cfcaf 100644 --- a/src/Components/UI/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx +++ b/src/Components/UI/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { ActiveSwitchIndicator, Wrapper } from './SwitchActiveIndicator.style'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; @@ -8,7 +8,7 @@ import { TSpacings } from '@/Components/UI/Interface/TSpacings'; export interface IActiveSwitchIndicator { $itemNumber: number; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; $tabSpacing?: TSpacings; $type?: 'bolb' | 'underline' | 'topline'; diff --git a/src/Components/UI/Atoms/SwitchActiveIndicator/utils/generateBlob.ts b/src/Components/UI/Atoms/SwitchActiveIndicator/utils/generateBlob.ts index c7cd6b44b..695b375c6 100644 --- a/src/Components/UI/Atoms/SwitchActiveIndicator/utils/generateBlob.ts +++ b/src/Components/UI/Atoms/SwitchActiveIndicator/utils/generateBlob.ts @@ -3,7 +3,7 @@ import { css } from 'styled-components'; import { getBackgroundColor } from '../../../Design/color/colorCalculatorForComponet'; import colorTransparencyCalculator from '../../../Design/color/colorTransparencyCalculator'; import { IActiveSwitchIndicator } from '../SwitchActiveIndicator'; -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; import { TTheme } from '@/Components/UI/Interface/TTheme'; diff --git a/src/Components/UI/Atoms/Typography/Typography.tsx b/src/Components/UI/Atoms/Typography/Typography.tsx index bea1f348e..a13fd54e8 100644 --- a/src/Components/UI/Atoms/Typography/Typography.tsx +++ b/src/Components/UI/Atoms/Typography/Typography.tsx @@ -2,7 +2,7 @@ import React, { ReactNode } from 'react'; import { CSSProp, css } from 'styled-components'; import { IStyledComponentProps, TypographyList } from './TypographyFontVariations.style'; -import themeStore from '../../Design/color/themeStore'; +import themeStore from '../../Design/color/themeStore/themeStore'; import { generateFontVariants } from './TypographyStyleVariants'; const generateStyle = (externalStyle: CSSProp, fontWeight: 'normal' | 'bold' | undefined) => { diff --git a/src/Components/UI/Atoms/Typography/TypographyStyleVariants.tsx b/src/Components/UI/Atoms/Typography/TypographyStyleVariants.tsx index f5dd209be..b27c0a552 100644 --- a/src/Components/UI/Atoms/Typography/TypographyStyleVariants.tsx +++ b/src/Components/UI/Atoms/Typography/TypographyStyleVariants.tsx @@ -1,16 +1,17 @@ import { css } from 'styled-components'; -import brakePoints from '../../Design/brakePoints'; -import { TFontSizes } from '../../Interface/IFontSizes'; + +import { TFontSizes } from '@/Components/UI/Interface/IFontSizes'; +import { TTheme } from '@/Components/UI/Interface/TTheme'; const nullifyStyle = css` margin: 0; `; // Hilfsfunktion für den Medien-Query -const responsiveFontSize = (mobileSize: string, desktopSize: string) => css` +const responsiveFontSize = (mobileSize: string, desktopSize: string) => css<{ theme?: TTheme }>` font-size: ${mobileSize}; - @media (min-width: ${brakePoints.md + 'px'}) { + @media (min-width: ${({ theme }) => theme.breakpoints.md}) { font-size: ${desktopSize}; } `; diff --git a/src/Components/UI/Atoms/WeekDays/WeekDays.tsx b/src/Components/UI/Atoms/WeekDays/WeekDays.tsx index 55b65cc35..c920a85aa 100644 --- a/src/Components/UI/Atoms/WeekDays/WeekDays.tsx +++ b/src/Components/UI/Atoms/WeekDays/WeekDays.tsx @@ -2,12 +2,12 @@ import React, { useState, useEffect } from 'react'; import { styled } from 'styled-components'; import Typography from '../Typography/Typography'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -const WeekdaysConatiner = styled.div<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +const WeekdaysConatiner = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; @@ -24,7 +24,7 @@ const WeekdaysConatiner = styled.div<{ theme: TTheme; $themeType?: TUiColors; $l // ---------- This Atom creates a List of all Weekdas from Mo - Su ----------- // // --------------------------------------------------------------------------- // interface IWeekDays { - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function WeekDays({ themeType, layer }: IWeekDays) { diff --git a/src/Components/UI/Atoms/YearSelector/YearSelector.style.tsx b/src/Components/UI/Atoms/YearSelector/YearSelector.style.tsx index ca5402b08..2294e4fb8 100644 --- a/src/Components/UI/Atoms/YearSelector/YearSelector.style.tsx +++ b/src/Components/UI/Atoms/YearSelector/YearSelector.style.tsx @@ -1,11 +1,11 @@ import { css, styled } from 'styled-components'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -export const StyledYearSelector = styled.div<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +export const StyledYearSelector = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` display: flex; justify-content: space-between; align-items: center; @@ -13,7 +13,7 @@ export const StyledYearSelector = styled.div<{ theme: TTheme; $themeType?: TUiCo color: ${({ theme, $layer, $themeType }) => ($themeType ? theme.colors[$themeType][$layer ?? 0] : theme.colors.secondary[0])}; `; -export const StyledButton = styled.button<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +export const StyledButton = styled.button<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` display: flex; justify-content: center; align-items: center; diff --git a/src/Components/UI/Atoms/YearSelector/YearSelector.tsx b/src/Components/UI/Atoms/YearSelector/YearSelector.tsx index 0dfa0b3cb..768405853 100644 --- a/src/Components/UI/Atoms/YearSelector/YearSelector.tsx +++ b/src/Components/UI/Atoms/YearSelector/YearSelector.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft'; -import SVGChevronRight from '../../SVGIcons/SVGChevronRight'; +import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft/SVGChevronLeft'; +import SVGChevronRight from '../../SVGIcons/SVGChevronRight/SVGChevronRight'; import { SVGDesignCSS, StyledButton, StyledYearSelector } from './YearSelector.style'; import Typography from '../Typography/Typography'; import { FancySVGAtom } from '../FancySVGAtom'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; // --------------------------------------------------------------------------- // @@ -13,7 +13,7 @@ import { TLayer } from '@/Components/UI/Interface/TLayer'; // --------------------------------------------------------------------------- // interface IYearSelector { selectedYear: number; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; handler?: (change: number) => void; } diff --git a/src/Components/UI/Design/brakePoints.ts b/src/Components/UI/Design/brakePoints.ts index ea116d334..65be88c55 100644 --- a/src/Components/UI/Design/brakePoints.ts +++ b/src/Components/UI/Design/brakePoints.ts @@ -1,8 +1,6 @@ -const brakePoints = { - sm: 576, - md: 768, - lg: 992, - xl: 1200, +export const breakpoints = { + sm: 'screen and (max-width: 576px)', + md: 'screen and (max-width: 768px)', + lg: 'screen and (max-width: 992px)', + xl: 'screen and (max-width: 1200px)', }; - -export default brakePoints; diff --git a/src/Components/UI/Design/color/colorCalculatorForComponet.ts b/src/Components/UI/Design/color/colorCalculatorForComponet.ts index 2d5497766..ff231cf0a 100644 --- a/src/Components/UI/Design/color/colorCalculatorForComponet.ts +++ b/src/Components/UI/Design/color/colorCalculatorForComponet.ts @@ -4,7 +4,7 @@ import { css } from 'styled-components'; import checkThemeOrColor from './ckeckThemeOrColor'; import { TthemeColorGroup } from './designColor'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; // Define the types for the arguments that will be passed to the getBackgroundColor function type IGetBackgroundColor = Pick; @@ -77,7 +77,7 @@ export function getTextColor({ // Define the types for the arguments that will be passed to the getColorsForComponent function type IGetColorForComponent = { theme: TTheme; - $themeType: TUiColors; + $themeType: TThemeTypes; $customColor?: string | TthemeColorGroup; $customTextColor?: string | TthemeColorGroup; $layer?: number; diff --git a/src/Components/UI/Design/color/designColor.ts b/src/Components/UI/Design/color/designColor.ts index f387756fc..687dd78dd 100644 --- a/src/Components/UI/Design/color/designColor.ts +++ b/src/Components/UI/Design/color/designColor.ts @@ -1,5 +1,7 @@ +import { TUiColorsType } from '@/Components/UI/Interface/TUiColorsType'; import generateColorSteps from './generateColorSteps'; import isColorValid from './isColorValid'; +import { TThemeTypes } from '../../Interface'; const themeColors = { primary: '#131825', @@ -15,11 +17,9 @@ const themeColors = { // success: '#22C390', themeColors.accentDarken = themeColors.accent; -export type IUiColorNames = keyof typeof themeColors | 'transparent'; +export { themeColors }; export type TthemeColorGroup = { [key: string]: string }; -export type TUiColorsType = { [key in IUiColorNames]: TthemeColorGroup }; -export type TUiColorsSystemMessage = Exclude; export let uiColors: TUiColorsType = {} as TUiColorsType; @@ -28,8 +28,8 @@ export function initialGenerateUiColors() { for (const color in themeColors) { // generate the color steps for the color const generatedColor = generateColorSteps({ - themeType: color as IUiColorNames, - color: themeColors[color as IUiColorNames], + themeType: color as TThemeTypes, + color: themeColors[color as TThemeTypes], pimaryColor: themeColors.secondary, }); uiColors = { @@ -46,8 +46,8 @@ export const regenerateUiColors = (isDarkTheme: boolean) => { for (const color in uiColors) { // generate the color steps for the color const generatedColor = generateColorSteps({ - themeType: color as IUiColorNames, - color: uiColors[color as IUiColorNames]['0'], + themeType: color as TThemeTypes, + color: uiColors[color as TThemeTypes]['0'], pimaryColor: isDarkTheme ? themeColors.primary : themeColors.secondary, // if the theme is dark, the primary color is the secondary color }); @@ -61,14 +61,14 @@ export const regenerateUiColors = (isDarkTheme: boolean) => { // this function updates the theme colors with a incomming object // { 'primary': '#131825', 'accent': '#F17C12', 'secondary': '#f0f0ef' } export type IUiColorPops = { - [key in IUiColorNames]?: string; + [key in TThemeTypes]?: string; }; // this function updates the theme colors with a incomming object and generates the new colors export const updateThemeColors = (colorObject: IUiColorPops) => { let error: undefined | string; // check if the color is valid for (const key in colorObject) { - const typedkey = key as IUiColorNames; + const typedkey = key as TThemeTypes; if (!isColorValid(themeColors[typedkey])) { error = 'The color ' + typedkey + ' is not valid'; break; diff --git a/src/Components/UI/Design/color/generateColorSteps.ts b/src/Components/UI/Design/color/generateColorSteps.ts index 02636bc34..76e1fc298 100644 --- a/src/Components/UI/Design/color/generateColorSteps.ts +++ b/src/Components/UI/Design/color/generateColorSteps.ts @@ -1,6 +1,6 @@ import Color from 'color'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; // Function to adjust lightness @@ -57,7 +57,7 @@ type ColorSteps = { // this function generates a object with the color steps interface IGenerateColorSteps { - themeType: TUiColors; + themeType: TThemeTypes; color: string; pimaryColor: string; } diff --git a/src/Components/UI/Design/color/themeStore/index.ts b/src/Components/UI/Design/color/themeStore/index.ts new file mode 100644 index 000000000..81eba8e11 --- /dev/null +++ b/src/Components/UI/Design/color/themeStore/index.ts @@ -0,0 +1 @@ +export { default as themeStore } from './themeStore'; diff --git a/src/Components/UI/Design/color/themeStore.ts b/src/Components/UI/Design/color/themeStore/themeStore.ts similarity index 80% rename from src/Components/UI/Design/color/themeStore.ts rename to src/Components/UI/Design/color/themeStore/themeStore.ts index 0dc9471d2..220edd6df 100644 --- a/src/Components/UI/Design/color/themeStore.ts +++ b/src/Components/UI/Design/color/themeStore/themeStore.ts @@ -1,7 +1,8 @@ import { create } from 'zustand'; -import { updateThemeColors, uiColors, IUiColorPops, regenerateUiColors } from './designColor'; -import { spacingPx, borderRadius, fontSizes } from '../designSizes'; -import { TTheme } from '../../Interface/TTheme'; +import { updateThemeColors, uiColors, IUiColorPops, regenerateUiColors } from '../designColor'; +import { spacingPx, borderRadius, fontSizes } from '../../designSizes'; +import { TTheme } from '@/Components/UI/Interface/TTheme'; +import { breakpoints } from '@/Components/UI/Design/brakePoints'; type ThemeState = { theme: TTheme; @@ -17,6 +18,7 @@ const themeStore = create((set, get) => ({ spacing: spacingPx, borderRadius: borderRadius, fontSizes: fontSizes, + breakpoints: breakpoints, }, isDarkTheme: true, switchTheme: () => { diff --git a/src/Components/UI/Design/colorVariables.css b/src/Components/UI/Design/colorVariables.css deleted file mode 100644 index 4e87b8672..000000000 --- a/src/Components/UI/Design/colorVariables.css +++ /dev/null @@ -1,27 +0,0 @@ -:root { - /* COLOR VARIABLES */ - --white: #e8e7e4; - --white-light: #f2f1ee; - --white-dark: #d7d6d2; - - --lightgreen: #0a7273; - --lightgreen-light: #3c9e9e; - --lightgreen-dark: #005858; - - --orange: #f17c12; - --orange-light: #ffa42a; - --orange-dark: #cc6c0a; - - --darkblue: #002436; - --darkblue-light: #4c5c6e; - --darkblue-dark: #001929; - - --dark: #252525; - - --spacing-xs: 4px; - --spacing-sm: 8px; - --spacing-md: 12px; - --spacing-lg: 18px; - --spacing-xl: 24px; - --spacing-xxl: 48px; -} diff --git a/src/Components/UI/HelperFunctions/designFunctions/CalculateBorderRadiusOnAlignment.ts b/src/Components/UI/Design/designFunctions/CalculateBorderRadiusOnAlignment.ts similarity index 96% rename from src/Components/UI/HelperFunctions/designFunctions/CalculateBorderRadiusOnAlignment.ts rename to src/Components/UI/Design/designFunctions/CalculateBorderRadiusOnAlignment.ts index 616525d19..6decfbd9b 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/CalculateBorderRadiusOnAlignment.ts +++ b/src/Components/UI/Design/designFunctions/CalculateBorderRadiusOnAlignment.ts @@ -1,6 +1,6 @@ import { css } from 'styled-components'; -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; export interface IAlignments { $alignHorizontal?: 'left' | 'center' | 'right'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/disableStyle.ts b/src/Components/UI/Design/designFunctions/disabledStyle/disableStyle.ts similarity index 85% rename from src/Components/UI/HelperFunctions/designFunctions/disableStyle.ts rename to src/Components/UI/Design/designFunctions/disabledStyle/disableStyle.ts index d602540b7..263a33702 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/disableStyle.ts +++ b/src/Components/UI/Design/designFunctions/disabledStyle/disableStyle.ts @@ -7,3 +7,5 @@ export const disabledStyle = () => { filter: brightness(0.9); `; }; + +export default disabledStyle; diff --git a/src/Components/UI/Design/designFunctions/disabledStyle/index.ts b/src/Components/UI/Design/designFunctions/disabledStyle/index.ts new file mode 100644 index 000000000..be1c6aaf5 --- /dev/null +++ b/src/Components/UI/Design/designFunctions/disabledStyle/index.ts @@ -0,0 +1 @@ +export { default as disabledStyle } from './disableStyle'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/edgeCaluculation.ts b/src/Components/UI/Design/designFunctions/edgeCaluculation.ts similarity index 97% rename from src/Components/UI/HelperFunctions/designFunctions/edgeCaluculation.ts rename to src/Components/UI/Design/designFunctions/edgeCaluculation.ts index 7ec23a14e..846ae85c7 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/edgeCaluculation.ts +++ b/src/Components/UI/Design/designFunctions/edgeCaluculation.ts @@ -1,4 +1,4 @@ -import { borderRadius } from '../../Design/designSizes'; +import { borderRadius } from '../designSizes'; import { TBorderRadiusSizes } from '../../Interface/TBorderRadius'; // the edge can be a string, number or TBorderRadiusSizes diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts b/src/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts similarity index 84% rename from src/Components/UI/HelperFunctions/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts rename to src/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts index e9cb665a5..9e20e131c 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts +++ b/src/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts @@ -1,6 +1,6 @@ import { css } from 'styled-components'; -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; export const generateBorderRadiusForComponent = (size?: 'sm' | 'md' | 'lg', rounded?: TBorderRadiusSizes) => { @@ -29,3 +29,5 @@ export const generateBorderRadiusForComponent = (size?: 'sm' | 'md' | 'lg', roun return css``; } }; + +export default generateBorderRadiusForComponent; diff --git a/src/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/index.ts b/src/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/index.ts new file mode 100644 index 000000000..a97e66dfd --- /dev/null +++ b/src/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/index.ts @@ -0,0 +1 @@ +export { default as generateBorderRadiusForComponent } from './generateBorderRadiusForComponent'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts b/src/Components/UI/Design/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts similarity index 74% rename from src/Components/UI/HelperFunctions/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts rename to src/Components/UI/Design/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts index 022855c7b..7fbe9e61f 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts +++ b/src/Components/UI/Design/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts @@ -1,5 +1,5 @@ import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes, TThemeTypesNotTrasparent } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import IStyledPrefixAndOmiter from '../../../Interface/IStyledPrefixAndOmiter.model'; @@ -11,9 +11,9 @@ export type IGenerateThemeItemProps = { label?: string; wide?: boolean; borderRadius?: TBorderRadiusSizes; - themeType?: TUiColors; - textColor?: Exclude; - hoverColor?: Exclude; + themeType?: TThemeTypes; + textColor?: TThemeTypesNotTrasparent; + hoverColor?: TThemeTypesNotTrasparent; layer?: TLayer; align?: 'left' | 'right' | 'center'; }; diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateItemTheme/generateThemeItem.ts b/src/Components/UI/Design/designFunctions/generateItemTheme/generateThemeItem.ts similarity index 96% rename from src/Components/UI/HelperFunctions/designFunctions/generateItemTheme/generateThemeItem.ts rename to src/Components/UI/Design/designFunctions/generateItemTheme/generateThemeItem.ts index cabfda7f8..a50760b68 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateItemTheme/generateThemeItem.ts +++ b/src/Components/UI/Design/designFunctions/generateItemTheme/generateThemeItem.ts @@ -1,11 +1,11 @@ import { css } from 'styled-components'; import Color from 'color'; -import { disabledStyle } from '../disableStyle'; +import { disabledStyle } from '../disabledStyle/disableStyle'; import { generatePadding } from '../generatePaddingForComponent/generatePadding'; -import { boxShadow } from '../../../Design/shadows'; -import themeStore from '../../../Design/color/themeStore'; -import { getBackgroundColor } from '../../../Design/color/colorCalculatorForComponet'; +import { boxShadow } from '../../shadows/shadows'; +import themeStore from '../../color/themeStore/themeStore'; +import { getBackgroundColor } from '../../color/colorCalculatorForComponet'; import { getOpositColorContrast } from '../getOpositColorContrast'; import { IGenerateThemeItem } from './IGenerateThemeItemProps.model'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/generatePaddingForComponent/generatePadding.ts b/src/Components/UI/Design/designFunctions/generatePaddingForComponent/generatePadding.ts similarity index 90% rename from src/Components/UI/HelperFunctions/designFunctions/generatePaddingForComponent/generatePadding.ts rename to src/Components/UI/Design/designFunctions/generatePaddingForComponent/generatePadding.ts index 246503b2b..8898d2eee 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generatePaddingForComponent/generatePadding.ts +++ b/src/Components/UI/Design/designFunctions/generatePaddingForComponent/generatePadding.ts @@ -1,4 +1,4 @@ -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; export function generatePadding(offsetPx?: number, spacingLeftRightx2?: boolean) { const offset = offsetPx ? offsetPx : 0; diff --git a/src/Components/UI/HelperFunctions/designFunctions/generatePaddingForComponent/generatepaddingForComponent.ts b/src/Components/UI/Design/designFunctions/generatePaddingForComponent/generatepaddingForComponent.ts similarity index 100% rename from src/Components/UI/HelperFunctions/designFunctions/generatePaddingForComponent/generatepaddingForComponent.ts rename to src/Components/UI/Design/designFunctions/generatePaddingForComponent/generatepaddingForComponent.ts diff --git a/src/Components/UI/Design/designFunctions/generateSytemIncicator.ts b/src/Components/UI/Design/designFunctions/generateSytemIncicator.ts new file mode 100644 index 000000000..35214727e --- /dev/null +++ b/src/Components/UI/Design/designFunctions/generateSytemIncicator.ts @@ -0,0 +1,13 @@ +import { css } from 'styled-components'; +import themeStore from '../color/themeStore/themeStore'; +import { TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColors'; + +export function systemMessageIndicatorStyle(systemMessage?: TUiColorsSystemMessage) { + const theme = themeStore.getState().theme; + + if (systemMessage) + return css` + border: ${`1.5px solid ${theme.colors[systemMessage][0]}`}; + transition: border 0.3s ease-in-out; + `; +} diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts similarity index 78% rename from src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts rename to src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts index 739d9079e..f674289ea 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts +++ b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts @@ -1,18 +1,18 @@ -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes, TThemeTypesNotTrasparent } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { generateNormalStyle } from './utils/generateNormalStyle'; import { generateTransparentStyle } from './utils/generateTransparentStyle'; import { generateOutlineStyle } from './utils/generateOutlineStyle'; -import IStyledPrefixAndPicker from '../../../Interface/IStyledPrefixAndPicker.model'; -import { getSimpletColorThemeType } from '../getOpositColorThemeType'; +import IStyledPrefixAndPicker from '@/Components/UI/Interface/IStyledPrefixAndPicker.model'; +import { getSimpleColorThemeType } from '@/Components/UI/Design/designFunctions/getSimpleColorThemeType'; import { TTheme } from '@/Components/UI/Interface/TTheme'; export interface IGenerateThemeDesignForComponentProps { - themeType?: TUiColors; - hoverColor?: Exclude; - textColor?: Exclude; - textHover?: Exclude; + themeType?: TThemeTypes; + hoverColor?: TThemeTypesNotTrasparent; + textColor?: TThemeTypesNotTrasparent; + textHover?: TThemeTypesNotTrasparent; layer?: TLayer; outlined?: boolean; backgroundStrength?: number; @@ -38,7 +38,7 @@ export default function generateThemeDesignForComponent(props: IGenerateThemeDes $textHover, } = props; - const calcTextColor = $useSimpleTextColor ? ($textColor ? $textColor : getSimpletColorThemeType($themeType)) : $textColor; + const calcTextColor = $useSimpleTextColor ? ($textColor ? $textColor : getSimpleColorThemeType($themeType)) : $textColor; if ($themeType === 'transparent') { return generateTransparentStyle({ theme, $backgroundState, $hoverColor, $layer, $textColor: calcTextColor, $textHover }); diff --git a/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/index.ts b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/index.ts new file mode 100644 index 000000000..f60202dd4 --- /dev/null +++ b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/index.ts @@ -0,0 +1 @@ +export { default as generateThemeDesignForComponent } from './generateThemeDesignForComponent'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts similarity index 93% rename from src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts rename to src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts index 5b85cd49d..4eef7218b 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts +++ b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts @@ -1,6 +1,6 @@ import { css } from 'styled-components'; -import { getBackgroundColor } from '../../../../Design/color/colorCalculatorForComponet'; -import colorTransparencyCalculator from '../../../../Design/color/colorTransparencyCalculator'; +import { getBackgroundColor } from '../../../color/colorCalculatorForComponet'; +import colorTransparencyCalculator from '../../../color/colorTransparencyCalculator'; import { IGenerateThemeDesignForComponent } from '../generateThemeDesignForComponent'; import { TLayer } from '@/Components/UI/Interface/TLayer'; type TGenerateOutlinedHoverStyle = Pick< diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts similarity index 93% rename from src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts rename to src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts index d878b4f2e..1a3bf42a9 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts +++ b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateNormalStyle.ts @@ -1,5 +1,5 @@ import { css } from 'styled-components'; -import { getBackgroundColor, getTextColor } from '../../../../Design/color/colorCalculatorForComponet'; +import { getBackgroundColor, getTextColor } from '../../../color/colorCalculatorForComponet'; import { IGenerateThemeDesignForComponent } from '../generateThemeDesignForComponent'; import { generateStateStyle } from './generateHoverActiveColor'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts similarity index 93% rename from src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts rename to src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts index 874a67e4b..956c1acbc 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts +++ b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts @@ -1,5 +1,5 @@ import { css } from 'styled-components'; -import { getBackgroundColor } from '../../../../Design/color/colorCalculatorForComponet'; +import { getBackgroundColor } from '../../../color/colorCalculatorForComponet'; import { IGenerateThemeDesignForComponent } from '../generateThemeDesignForComponent'; import { generateStateStyle } from './generateHoverActiveColor'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts similarity index 83% rename from src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts rename to src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts index 46bd03869..ae6d99663 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts +++ b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts @@ -1,5 +1,5 @@ -import { getBackgroundColor } from '../../../../Design/color/colorCalculatorForComponet'; -import themeStore from '../../../../Design/color/themeStore'; +import { getBackgroundColor } from '../../../color/colorCalculatorForComponet'; +import themeStore from '../../../color/themeStore/themeStore'; import { IGenerateThemeDesignForComponent } from '../generateThemeDesignForComponent'; // --------------------------------------------------------------------------- // diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts b/src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts similarity index 100% rename from src/Components/UI/HelperFunctions/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts rename to src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard.ts b/src/Components/UI/Design/designFunctions/generateThemeForCard/generateThemeForCard.ts similarity index 85% rename from src/Components/UI/HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard.ts rename to src/Components/UI/Design/designFunctions/generateThemeForCard/generateThemeForCard.ts index f49375b01..e47352b53 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard.ts +++ b/src/Components/UI/Design/designFunctions/generateThemeForCard/generateThemeForCard.ts @@ -1,16 +1,16 @@ import { css } from 'styled-components'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import IStyledPrefixAndPicker from '../../../Interface/IStyledPrefixAndPicker.model'; -import { getBackgroundColor } from '../../../Design/color/colorCalculatorForComponet'; -import colorTransparencyCalculator from '../../../Design/color/colorTransparencyCalculator'; +import { getBackgroundColor } from '../../color/colorCalculatorForComponet'; +import colorTransparencyCalculator from '../../color/colorTransparencyCalculator'; import { TTheme } from '@/Components/UI/Interface/TTheme'; export interface IgenerateThemeForCard { outlined?: boolean; layer?: TLayer; - themeType?: TUiColors; + themeType?: TThemeTypes; outlinedBackgroundStrength?: number; } @@ -52,7 +52,11 @@ export default function generateThemeForCard(props: TGenerateColorDesign) { // padding: ${$padding && $themeType !== 'transparent' ? tabSwitchSizes[$padding].paddingComponent : '0'}; return css` background-color: ${$themeType !== 'transparent' && backgroundColor}; - border: 1.5px solid ${$themeType !== 'transparent' && backgroundColor}; + ${$themeType !== 'transparent' && + backgroundColor && + css` + border: 1.5px solid ${backgroundColor}; + `}; ${outlinedStyle} `; } diff --git a/src/Components/UI/Design/designFunctions/generateThemeForCard/index.ts b/src/Components/UI/Design/designFunctions/generateThemeForCard/index.ts new file mode 100644 index 000000000..c5dfab4b1 --- /dev/null +++ b/src/Components/UI/Design/designFunctions/generateThemeForCard/index.ts @@ -0,0 +1 @@ +export { default as generateThemeForCard } from './generateThemeForCard'; diff --git a/src/Components/UI/HelperFunctions/designFunctions/getOpositColorContrast.ts b/src/Components/UI/Design/designFunctions/getOpositColorContrast.ts similarity index 76% rename from src/Components/UI/HelperFunctions/designFunctions/getOpositColorContrast.ts rename to src/Components/UI/Design/designFunctions/getOpositColorContrast.ts index 310e0f928..d19eb2421 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/getOpositColorContrast.ts +++ b/src/Components/UI/Design/designFunctions/getOpositColorContrast.ts @@ -1,8 +1,8 @@ import Color from 'color'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import themeStore from '../../Design/color/themeStore'; +import themeStore from '../color/themeStore/themeStore'; const filpThemeColor = (isLightColor: boolean) => { const isDarkTheme = themeStore.getState().isDarkTheme; @@ -12,7 +12,7 @@ const filpThemeColor = (isLightColor: boolean) => { else return isLightColor ? theme.colors['primary'] : theme.colors['secondary']; }; -export const getOpositColorContrast = (color: TUiColors, layer?: TLayer) => { +export const getOpositColorContrast = (color: TThemeTypes, layer?: TLayer) => { const theme = themeStore.getState().theme; const isCurrentColorLight = Color(theme.colors[color][layer || 0]).isLight(); diff --git a/src/Components/UI/HelperFunctions/designFunctions/getOpositColorThemeType.ts b/src/Components/UI/Design/designFunctions/getSimpleColorThemeType/getSimpleColorThemeType.ts similarity index 56% rename from src/Components/UI/HelperFunctions/designFunctions/getOpositColorThemeType.ts rename to src/Components/UI/Design/designFunctions/getSimpleColorThemeType/getSimpleColorThemeType.ts index e2dc83ce5..43cb3cf9a 100644 --- a/src/Components/UI/HelperFunctions/designFunctions/getOpositColorThemeType.ts +++ b/src/Components/UI/Design/designFunctions/getSimpleColorThemeType/getSimpleColorThemeType.ts @@ -1,7 +1,7 @@ -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; -import themeStore from '../../Design/color/themeStore'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; +import themeStore from '../../color/themeStore/themeStore'; -export const getSimpletColorThemeType = (themeType?: TUiColors) => { +const getSimpleColorThemeType = (themeType?: TThemeTypes) => { const isDarkTheme = themeStore.getState().isDarkTheme; if (themeType === 'primary') { @@ -12,3 +12,5 @@ export const getSimpletColorThemeType = (themeType?: TUiColors) => { return isDarkTheme ? 'secondary' : 'primary'; } }; + +export default getSimpleColorThemeType; diff --git a/src/Components/UI/Design/designFunctions/getSimpleColorThemeType/index.ts b/src/Components/UI/Design/designFunctions/getSimpleColorThemeType/index.ts new file mode 100644 index 000000000..b21f76e18 --- /dev/null +++ b/src/Components/UI/Design/designFunctions/getSimpleColorThemeType/index.ts @@ -0,0 +1 @@ +export { default as getSimpleColorThemeType } from './getSimpleColorThemeType'; diff --git a/src/Components/UI/Design/shadows/index.ts b/src/Components/UI/Design/shadows/index.ts new file mode 100644 index 000000000..8e29cecbe --- /dev/null +++ b/src/Components/UI/Design/shadows/index.ts @@ -0,0 +1 @@ +export * from './shadows'; diff --git a/src/Components/UI/Design/shadows.ts b/src/Components/UI/Design/shadows/shadows.ts similarity index 85% rename from src/Components/UI/Design/shadows.ts rename to src/Components/UI/Design/shadows/shadows.ts index 743dc28e9..e7e62031b 100644 --- a/src/Components/UI/Design/shadows.ts +++ b/src/Components/UI/Design/shadows/shadows.ts @@ -1,6 +1,6 @@ import { css } from 'styled-components'; -import themeStore from './color/themeStore'; -import colorTransparencyCalculator from './color/colorTransparencyCalculator'; +import themeStore from '../color/themeStore/themeStore'; +import colorTransparencyCalculator from '../color/colorTransparencyCalculator'; //global text-shadow export const textShadow = { @@ -36,3 +36,5 @@ export const boxShadow = { }} `, }; + +export default boxShadow; diff --git a/src/Components/UI/HelperFunctions/FancyPopover/index.ts b/src/Components/UI/HelperFunctions/FancyPopover/index.ts new file mode 100644 index 000000000..1068bda89 --- /dev/null +++ b/src/Components/UI/HelperFunctions/FancyPopover/index.ts @@ -0,0 +1 @@ +export { default as FancyPopover } from './FancyPopover'; diff --git a/src/Components/UI/HelperFunctions/FancyPortal.tsx b/src/Components/UI/HelperFunctions/FancyPortal/FancyPortal.tsx similarity index 100% rename from src/Components/UI/HelperFunctions/FancyPortal.tsx rename to src/Components/UI/HelperFunctions/FancyPortal/FancyPortal.tsx diff --git a/src/Components/UI/HelperFunctions/FancyPortal/index.ts b/src/Components/UI/HelperFunctions/FancyPortal/index.ts new file mode 100644 index 000000000..a72e803a6 --- /dev/null +++ b/src/Components/UI/HelperFunctions/FancyPortal/index.ts @@ -0,0 +1 @@ +export { default as FancyPortal } from './FancyPortal'; diff --git a/src/Components/UI/HelperFunctions/clampLayer.ts b/src/Components/UI/HelperFunctions/clampLayer.ts new file mode 100644 index 000000000..0f61c8fe7 --- /dev/null +++ b/src/Components/UI/HelperFunctions/clampLayer.ts @@ -0,0 +1,14 @@ +import { TLayer } from '@/Components/UI/Interface/TLayer'; + +export function clampLayer(layer: number) { + // limit layer to minimal 0 + if (layer < 0) { + return 0 as TLayer; + } + // limit layer to maximal 10 + if (layer > 10) { + return 10 as TLayer; + } + // return layer as TLayer + return layer as TLayer; +} diff --git a/src/Components/UI/HelperFunctions/designFunctions/generateSytemIncicator.ts b/src/Components/UI/HelperFunctions/designFunctions/generateSytemIncicator.ts deleted file mode 100644 index c929978d9..000000000 --- a/src/Components/UI/HelperFunctions/designFunctions/generateSytemIncicator.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { css } from 'styled-components'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; -import themeStore from '../../Design/color/themeStore'; - -type TUiColorsSystemMessageIndicator = Exclude; - -export function sytemMessageIndicatorStyle(systemMessage?: TUiColorsSystemMessageIndicator) { - const theme = themeStore.getState().theme; - - if (systemMessage) - return css` - border: ${`1.5px solid ${theme.colors[systemMessage][0]}`}; - transition: border 0.3s ease-in-out; - `; -} diff --git a/src/Components/UI/HelperFunctions/hooks/UseDelay.tsx b/src/Components/UI/HelperFunctions/hooks/useDelay/UseDelay.tsx similarity index 100% rename from src/Components/UI/HelperFunctions/hooks/UseDelay.tsx rename to src/Components/UI/HelperFunctions/hooks/useDelay/UseDelay.tsx diff --git a/src/Components/UI/HelperFunctions/hooks/useDelay/index.ts b/src/Components/UI/HelperFunctions/hooks/useDelay/index.ts new file mode 100644 index 000000000..adefa5616 --- /dev/null +++ b/src/Components/UI/HelperFunctions/hooks/useDelay/index.ts @@ -0,0 +1 @@ +export { default as UseDelay } from './UseDelay'; diff --git a/src/Components/UI/HelperFunctions/hooks/useIntersectionObserver/index.ts b/src/Components/UI/HelperFunctions/hooks/useIntersectionObserver/index.ts new file mode 100644 index 000000000..a2c58d511 --- /dev/null +++ b/src/Components/UI/HelperFunctions/hooks/useIntersectionObserver/index.ts @@ -0,0 +1 @@ +export { default as useIntersectionObserver } from './useIntersectionObserver'; diff --git a/src/Components/UI/HelperFunctions/hooks/useIntersectionObserver.tsx b/src/Components/UI/HelperFunctions/hooks/useIntersectionObserver/useIntersectionObserver.tsx similarity index 100% rename from src/Components/UI/HelperFunctions/hooks/useIntersectionObserver.tsx rename to src/Components/UI/HelperFunctions/hooks/useIntersectionObserver/useIntersectionObserver.tsx diff --git a/src/Components/UI/HelperFunctions/hooks/useWindowDimensions/index.ts b/src/Components/UI/HelperFunctions/hooks/useWindowDimensions/index.ts new file mode 100644 index 000000000..891054d2a --- /dev/null +++ b/src/Components/UI/HelperFunctions/hooks/useWindowDimensions/index.ts @@ -0,0 +1 @@ +export { default as useWindowDimensions } from './useWindowDimensions'; diff --git a/src/Components/UI/HelperFunctions/hooks/useWindowDimensions.tsx b/src/Components/UI/HelperFunctions/hooks/useWindowDimensions/useWindowDimensions.tsx similarity index 100% rename from src/Components/UI/HelperFunctions/hooks/useWindowDimensions.tsx rename to src/Components/UI/HelperFunctions/hooks/useWindowDimensions/useWindowDimensions.tsx diff --git a/src/Components/UI/Interface/IStatus.ts b/src/Components/UI/Interface/IStatus.ts index 628c4bea8..eaae05edb 100644 --- a/src/Components/UI/Interface/IStatus.ts +++ b/src/Components/UI/Interface/IStatus.ts @@ -1,3 +1,3 @@ -type InputStatus = { isError: boolean; isSucceed: boolean; isLoading: boolean }; +type IStatus = { isError: boolean; isSucceed: boolean; isLoading: boolean }; -export default InputStatus; +export default IStatus; diff --git a/src/Components/UI/Interface/ModalStatus.ts b/src/Components/UI/Interface/TModalStatus.ts similarity index 100% rename from src/Components/UI/Interface/ModalStatus.ts rename to src/Components/UI/Interface/TModalStatus.ts diff --git a/src/Components/UI/Interface/TTheme.ts b/src/Components/UI/Interface/TTheme.ts index b9ea9d70d..39bccbfd7 100644 --- a/src/Components/UI/Interface/TTheme.ts +++ b/src/Components/UI/Interface/TTheme.ts @@ -1,7 +1,8 @@ -import { TUiColorsType } from '../Design/color/designColor'; import { TFontSizes } from './IFontSizes'; import { TBorderRadiusSizes } from './TBorderRadius'; -import { TSpacings } from '@/Components/UI/Interface/TSpacings'; +import { TUiColorsType } from './TUiColorsType'; +import { TSpacings } from './TSpacings'; +import { breakpoints } from '@/Components/UI/Design/brakePoints'; //the structure for the theme object export type TTheme = { @@ -13,4 +14,7 @@ export type TTheme = { [key in TBorderRadiusSizes]: string; }; fontSizes: TFontSizes; + breakpoints: { + [key in keyof typeof breakpoints]: string; + }; }; diff --git a/src/Components/UI/Interface/TUiColorNames.ts b/src/Components/UI/Interface/TUiColorNames.ts new file mode 100644 index 000000000..3558337bf --- /dev/null +++ b/src/Components/UI/Interface/TUiColorNames.ts @@ -0,0 +1,3 @@ +import { themeColors } from '../Design/color/designColor'; + +export type TUiColorNames = keyof typeof themeColors | 'transparent'; diff --git a/src/Components/UI/Interface/TUiColors.ts b/src/Components/UI/Interface/TUiColors.ts index f64f5393d..852306745 100644 --- a/src/Components/UI/Interface/TUiColors.ts +++ b/src/Components/UI/Interface/TUiColors.ts @@ -1,5 +1,6 @@ -import { TUiColorsType } from '../Design/color/designColor'; +import { TUiColorsType } from './TUiColorsType'; -export type TUiColors = keyof TUiColorsType; -export type TUiColorsMain = Extract; -export type TUiColorsSystemMessage = Extract; +export type TThemeTypes = keyof TUiColorsType; +export type TThemeTypesNotTrasparent = Exclude; +export type TUiColorsMain = Extract; +export type TUiColorsSystemMessage = Extract; diff --git a/src/Components/UI/Interface/TUiColorsSystemMessage.ts b/src/Components/UI/Interface/TUiColorsSystemMessage.ts new file mode 100644 index 000000000..31aac8a1b --- /dev/null +++ b/src/Components/UI/Interface/TUiColorsSystemMessage.ts @@ -0,0 +1,3 @@ +import { TThemeTypes } from './TUiColors'; + +export type TUiColorsSystemMessage = Extract; diff --git a/src/Components/UI/Interface/TUiColorsType.ts b/src/Components/UI/Interface/TUiColorsType.ts new file mode 100644 index 000000000..ecbd1fe73 --- /dev/null +++ b/src/Components/UI/Interface/TUiColorsType.ts @@ -0,0 +1,3 @@ +import { TthemeColorGroup, themeColors } from '@/Components/UI/Design/color/designColor'; + +export type TUiColorsType = { [key in keyof typeof themeColors | 'transparent']: TthemeColorGroup }; diff --git a/src/Components/UI/Interface/index.ts b/src/Components/UI/Interface/index.ts new file mode 100644 index 000000000..5026e2781 --- /dev/null +++ b/src/Components/UI/Interface/index.ts @@ -0,0 +1,12 @@ +export * from './IFontSizes'; +export * from './IStatus'; +export * from './IStyledPrefixAndOmiter.model'; +export * from './IStyledPrefixAndPicker.model'; +export * from './TBorderRadius'; +export * from './TModalStatus'; +export * from './TSpacings'; +export * from './TSystemMessageProps'; +export * from './TTheme'; +export * from './TTypography'; +export * from './TUiColors'; +export * from './TUiColorsType'; diff --git a/src/Components/UI/Molecules/BottomBar/BottomBar.tsx b/src/Components/UI/Molecules/BottomBar/BottomBar.tsx index e50737431..17a7ae9aa 100644 --- a/src/Components/UI/Molecules/BottomBar/BottomBar.tsx +++ b/src/Components/UI/Molecules/BottomBar/BottomBar.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { FancyBox } from '../../Atoms/FancyBox'; import { CSSProp, css } from 'styled-components'; @@ -11,7 +11,7 @@ import { fancyBarStyle } from './BottomBar.style'; // -------------- use the store to controle the bar from outside ------------ // type TBottomBar = { isVisible?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; externalStyle?: CSSProp; children?: React.ReactNode; diff --git a/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx b/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx index bf7cf1482..f320ea5f3 100644 --- a/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx +++ b/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx @@ -1,6 +1,6 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // Import the component to be tested import BottomBarIcon from './BottomBarIcon'; // Define metadata for the story diff --git a/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.style.tsx b/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.style.tsx index 5fe4b9b6b..e3229d0e2 100644 --- a/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.style.tsx +++ b/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.style.tsx @@ -1,16 +1,16 @@ import { styled } from 'styled-components'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; -import { disabledStyle } from '../../HelperFunctions/designFunctions/disableStyle'; +import { disabledStyle } from '../../Design/designFunctions/disabledStyle/disableStyle'; import { TTheme } from '@/Components/UI/Interface/TTheme'; interface IContentWrapper { $isActive?: boolean; $disabled?: boolean; theme: TTheme; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; } diff --git a/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.tsx b/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.tsx index a34982160..7f93a8af1 100644 --- a/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.tsx +++ b/src/Components/UI/Molecules/BottomBarIcon/BottomBarIcon.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import FancyContent from '../FancyContent/FancyContent'; import { ContentWrapper } from './BottomBarIcon.style'; @@ -10,7 +10,7 @@ interface IBottomBarIconProps { hideLabel?: boolean; isActive?: boolean; disabled?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; id?: string; } diff --git a/src/Components/UI/Molecules/Button/Button.style.tsx b/src/Components/UI/Molecules/Button/Button.style.tsx index 3faae5d90..ab8c4853c 100644 --- a/src/Components/UI/Molecules/Button/Button.style.tsx +++ b/src/Components/UI/Molecules/Button/Button.style.tsx @@ -1,8 +1,8 @@ import { styled } from 'styled-components'; -import { disabledStyle } from '../../HelperFunctions/designFunctions/disableStyle'; +import { disabledStyle } from '../../Design/designFunctions/disabledStyle/disableStyle'; import generateThemeDesignForComponent, { IGenerateThemeDesignForComponent, -} from '../../HelperFunctions/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent'; +} from '../../Design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent'; import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model'; import { IButtonProps } from './Button'; diff --git a/src/Components/UI/Molecules/Button/Button.tsx b/src/Components/UI/Molecules/Button/Button.tsx index 61cf2cad4..f015130f6 100644 --- a/src/Components/UI/Molecules/Button/Button.tsx +++ b/src/Components/UI/Molecules/Button/Button.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { CSSProp } from 'styled-components'; -import { IGenerateThemeDesignForComponentProps } from '../../HelperFunctions/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent'; +import { IGenerateThemeDesignForComponentProps } from '../../Design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent'; import { StyledButton } from './Button.style'; export type IButtonProps = { diff --git a/src/Components/UI/Molecules/Chip/Chip.style.tsx b/src/Components/UI/Molecules/Chip/Chip.style.tsx index 11ce72185..84d1deb2f 100644 --- a/src/Components/UI/Molecules/Chip/Chip.style.tsx +++ b/src/Components/UI/Molecules/Chip/Chip.style.tsx @@ -1,6 +1,6 @@ import { css, styled } from 'styled-components'; -import generateThemeDesignForComponent from '../../HelperFunctions/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent'; +import generateThemeDesignForComponent from '../../Design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent'; import IStyledPrefixAndOmitter from '../../Interface/IStyledPrefixAndOmiter.model'; import { IStyledChip } from './Chip'; import { TTheme } from '@/Components/UI/Interface/TTheme'; diff --git a/src/Components/UI/Molecules/Chip/Chip.tsx b/src/Components/UI/Molecules/Chip/Chip.tsx index 2bb1458ed..0859e9b39 100644 --- a/src/Components/UI/Molecules/Chip/Chip.tsx +++ b/src/Components/UI/Molecules/Chip/Chip.tsx @@ -2,15 +2,15 @@ import React from 'react'; import { CSSProp } from 'styled-components'; import { sizes } from '../FancyContent/utils/sizeSettings'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes, TThemeTypesNotTrasparent } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { StyledChip } from './Chip.style'; export interface IStyledChip { size?: keyof typeof sizes; outlined?: boolean; - themeType?: TUiColors; - textColor?: Exclude; + themeType?: TThemeTypes; + textColor?: TThemeTypesNotTrasparent; layer?: TLayer; textLayer?: TLayer; isActive?: boolean; diff --git a/src/Components/UI/Molecules/ChipList/ChipList.style.tsx b/src/Components/UI/Molecules/ChipList/ChipList.style.tsx index 5f742ec5a..fe4a1888a 100644 --- a/src/Components/UI/Molecules/ChipList/ChipList.style.tsx +++ b/src/Components/UI/Molecules/ChipList/ChipList.style.tsx @@ -1,8 +1,8 @@ import { css, styled } from 'styled-components'; -import { sytemMessageIndicatorStyle } from '../../HelperFunctions/designFunctions/generateSytemIncicator'; -import themeStore from '@/Components/UI/Design/color/themeStore'; -import { TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColors'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; +import { systemMessageIndicatorStyle } from '@/Components/UI/Design/designFunctions/generateSytemIncicator'; +import { TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColorsSystemMessage'; export const FancyBoxStyle = css``; @@ -15,7 +15,7 @@ export const ChipContainer = styled.ul` `; export const generateChipListStyle = (size: 'sm' | 'md' | 'lg', sytemMessage?: TUiColorsSystemMessage) => { - const styemIndicatorStyle = sytemMessageIndicatorStyle(sytemMessage); + const styemIndicatorStyle = systemMessageIndicatorStyle(sytemMessage); const getTheme = themeStore.getState().theme; let generatedStyle; diff --git a/src/Components/UI/Molecules/ChipList/ChipList.tsx b/src/Components/UI/Molecules/ChipList/ChipList.tsx index 3c93a4f03..2e1df0a58 100644 --- a/src/Components/UI/Molecules/ChipList/ChipList.tsx +++ b/src/Components/UI/Molecules/ChipList/ChipList.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import { FancyBox } from '../../Atoms/FancyBox'; + +import { FancyBox } from '@/Components/UI/Atoms/FancyBox'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { ChipContainer, generateChipListStyle } from './ChipList.style'; -import { TUiColors, TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; +import { TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColorsSystemMessage'; export interface ChipListProps { - themeType?: Exclude; + themeType?: Exclude; layer?: TLayer; outlined?: boolean; children?: React.ReactNode; diff --git a/src/Components/UI/Molecules/DateInput/DateInput.tsx b/src/Components/UI/Molecules/DateInput/DateInput.tsx index 980190992..c8459c1ef 100644 --- a/src/Components/UI/Molecules/DateInput/DateInput.tsx +++ b/src/Components/UI/Molecules/DateInput/DateInput.tsx @@ -3,13 +3,13 @@ import React, { InputHTMLAttributes } from 'react'; import { TRawInputAlign } from '../../Atoms/RawInput/RawInput'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { StyledDatePicker } from '../../Organisms/FancyDateInput/FancyDateInput.style'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; type NativeAttrs = Omit, 'type' | 'value'>; export type IDateInputPropsWithNativeAttrs = IDateInputProps & NativeAttrs; export interface IDateInputProps { value?: string; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; activeHandler?: (value: boolean) => void; align?: TRawInputAlign; diff --git a/src/Components/UI/Molecules/DateNumberWithStatus/DateNumberWithStatus.tsx b/src/Components/UI/Molecules/DateNumberWithStatus/DateNumberWithStatus.tsx index 628168f02..e6748cc2b 100644 --- a/src/Components/UI/Molecules/DateNumberWithStatus/DateNumberWithStatus.tsx +++ b/src/Components/UI/Molecules/DateNumberWithStatus/DateNumberWithStatus.tsx @@ -5,7 +5,7 @@ import DateNumberAtom from '../../Atoms/DateNumberAtom/DateNumberAtom'; import AvilableDot, { IAvailableDot } from '../../Atoms/AvilableDot/AvailableDot'; import { IRange } from '../../Atoms/DateNumberAtom/DateNumberAtom'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TTheme } from '@/Components/UI/Interface/TTheme'; const StyledDateNumberWithStatus = styled.div<{ theme: TTheme }>` @@ -26,7 +26,7 @@ interface IDateNumberWithStatus { isCurrentDay?: boolean; range?: IRange; onClick?: () => void; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function DateNumberWithStatus(props: IDateNumberWithStatus) { diff --git a/src/Components/UI/Molecules/DateOutputFromTo/DateOutputFromTo.tsx b/src/Components/UI/Molecules/DateOutputFromTo/DateOutputFromTo.tsx index 6e76b974f..ffbd3d15b 100644 --- a/src/Components/UI/Molecules/DateOutputFromTo/DateOutputFromTo.tsx +++ b/src/Components/UI/Molecules/DateOutputFromTo/DateOutputFromTo.tsx @@ -2,13 +2,13 @@ import React from 'react'; import { styled } from 'styled-components'; import DateOutput from '../../Atoms/DateOutput/DateOutput'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import FancyLine from '../../Atoms/FancyLine/FancyLine'; import { TTheme } from '@/Components/UI/Interface/TTheme'; // Define the styled component for the DateOutputFromTo component -const StyledDateOutputFromTo = styled.div<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +const StyledDateOutputFromTo = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` position: relative; display: flex; width: 100%; @@ -42,7 +42,7 @@ interface IDateOutputFromTo { dateTo?: Date; handler?: (wich: 'from' | 'to') => void; whichIsSelecting?: 'from' | 'to'; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } // Define the DateOutputFromTo component diff --git a/src/Components/UI/Molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx b/src/Components/UI/Molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx index e053870af..41dcb1b77 100644 --- a/src/Components/UI/Molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx +++ b/src/Components/UI/Molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import DynamicBottomScrollBar from './DynamicBottomScrollBar'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; import { FancyBottomBarIcon } from '../../Templates/FancyBottomBarIcon'; const meta = { diff --git a/src/Components/UI/Molecules/EditBar/EditBar.tsx b/src/Components/UI/Molecules/EditBar/EditBar.tsx index 51585277c..dea32597b 100644 --- a/src/Components/UI/Molecules/EditBar/EditBar.tsx +++ b/src/Components/UI/Molecules/EditBar/EditBar.tsx @@ -17,7 +17,7 @@ import FancyBottomBarIcon, { IFancyBottomBarIcon } from '../../Templates/FancyBo import EditBarModal from '../../Atoms/EditBarModal/EditBarModal'; import DynamicBottomScrollBar from '../DynamicBottomScrollBar/DynamicBottomScrollBar'; -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; const Wrapper = styled.div` position: fixed; diff --git a/src/Components/UI/Molecules/FancyCheckbox/FancyCheckbox.tsx b/src/Components/UI/Molecules/FancyCheckbox/FancyCheckbox.tsx index b73199832..4cc8a0905 100644 --- a/src/Components/UI/Molecules/FancyCheckbox/FancyCheckbox.tsx +++ b/src/Components/UI/Molecules/FancyCheckbox/FancyCheckbox.tsx @@ -1,41 +1,28 @@ import React, { useId } from 'react'; import RawCheckbox from '../../Atoms/RawCheckbox/RawCheckbox'; -import { Typography } from '../../Atoms/Typography'; -import { LabelWrapper, Wrapper } from './FancyCheckbox.style'; import { IFancyCheckboxProps } from './FancyCheckbox.model'; -import themeStore from '../../Design/color/themeStore'; +import FancySelectWrapper from '../FancySelectWrapper/FancySelectWrapper'; // --------------------------------------------------------------------------- // // -------------------- A simple Checkbox with a Label ----------------------- // // --------------------------------------------------------------------------- // export default function FancyCheckbox(props: IFancyCheckboxProps) { const { label, onChange, defaultChecked, align, alignCheckbox, description, ...rest } = { ...defaultProps, ...props }; - const theme = themeStore.getState().theme; const id = useId(); + const pickedId = props.id ? props.id : id; return ( - - {/* The label and description */} - {(label || description) && ( - - {label && ( - - {label} - - )} - {description && ( - - {description} - - )} - - )} - {/* The check box */} - - + } + /> ); } diff --git a/src/Components/UI/Molecules/FancyContent/FancyContent.stories.tsx b/src/Components/UI/Molecules/FancyContent/FancyContent.stories.tsx index e0e1ab209..4c5e46ae2 100644 --- a/src/Components/UI/Molecules/FancyContent/FancyContent.stories.tsx +++ b/src/Components/UI/Molecules/FancyContent/FancyContent.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/src/Components/UI/Molecules/FancyContent/utils/FancyContentText.tsx b/src/Components/UI/Molecules/FancyContent/utils/FancyContentText.tsx index 74b0f039d..580dbd83e 100644 --- a/src/Components/UI/Molecules/FancyContent/utils/FancyContentText.tsx +++ b/src/Components/UI/Molecules/FancyContent/utils/FancyContentText.tsx @@ -7,6 +7,7 @@ import { TTypography } from '@/Components/UI/Interface/TTypography'; type IFancyContentTextProps = { children?: React.ReactNode; bold?: boolean; + className?: string; externalStyle?: CSSProp; }; @@ -23,13 +24,14 @@ type IFancyContentTextWithFontVariantProps = IFancyContentTextProps & { export function FancyContentTitle( props: IFancyContentTextProps & (IFancyContentTextWithFontVariantProps | IFancyContentTextWithSizeProps) ) { - const { size, bold = true, fontVariant, children, externalStyle } = props; + const { size, bold = true, fontVariant, children, className, externalStyle } = props; return ( {children} @@ -40,13 +42,14 @@ export function FancyContentTitle( export function FancyContentDescription( props: IFancyContentTextProps & (IFancyContentTextWithFontVariantProps | IFancyContentTextWithSizeProps) ) { - const { size, bold, fontVariant, children, externalStyle } = props; + const { size, bold, fontVariant, children, className, externalStyle } = props; return ( {children} diff --git a/src/Components/UI/Molecules/FancyContent/utils/sizeSettings.ts b/src/Components/UI/Molecules/FancyContent/utils/sizeSettings.ts index 65380bc56..ee794edd0 100644 --- a/src/Components/UI/Molecules/FancyContent/utils/sizeSettings.ts +++ b/src/Components/UI/Molecules/FancyContent/utils/sizeSettings.ts @@ -1,4 +1,4 @@ -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; import { TTypography } from '@/Components/UI/Interface/TTypography'; const getSpacingFromTheme = themeStore.getState().theme.spacing; diff --git a/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.style.tsx b/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.style.tsx index e29cbdc79..f828f2b3b 100644 --- a/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.style.tsx +++ b/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.style.tsx @@ -1,10 +1,10 @@ import { styled, css } from 'styled-components'; -import CalculateBorderRadiusOnAlignment from '../../HelperFunctions/designFunctions/CalculateBorderRadiusOnAlignment'; +import CalculateBorderRadiusOnAlignment from '../../Design/designFunctions/CalculateBorderRadiusOnAlignment'; import { IFancyUL } from './FancyDropDownUL'; import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model'; -import { boxShadow } from '../../Design/shadows'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { boxShadow } from '../../Design/shadows/shadows'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -34,7 +34,7 @@ export const WrapperUL = styled.div` // --------------------------------------------------------------------------- // // ------------------- the UL for the items and the style -------------------- // // --------------------------------------------------------------------------- // -export const StyledUL = styled.ul<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +export const StyledUL = styled.ul<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` display: flex; flex-direction: column; box-sizing: border-box; diff --git a/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.tsx b/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.tsx index 4fcee694e..727035820 100644 --- a/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.tsx +++ b/src/Components/UI/Molecules/FancyDropDownUL/FancyDropDownUL.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'; import { animated, useSpring } from '@react-spring/web'; import { StyledUL, WrapperUL } from './FancyDropDownUL.style'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; @@ -12,7 +12,7 @@ export interface IFancyUL { isOpen?: boolean; alignHorizontal?: 'left' | 'center' | 'right'; alignVertical?: 'top' | 'center' | 'bottom'; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; $rouned?: TBorderRadiusSizes; } diff --git a/src/Components/UI/Molecules/FancyListBox/FancyListBox.mdx b/src/Components/UI/Molecules/FancyListBox/FancyListBox.mdx new file mode 100644 index 000000000..95862f633 --- /dev/null +++ b/src/Components/UI/Molecules/FancyListBox/FancyListBox.mdx @@ -0,0 +1,53 @@ +# FancyListBox Component + +`FancyListBox` is a simple, styled list component designed to be used in React applications. It utilizes a `FancyBox` component to render a list (`ul`) and accepts `FancyListBoxItem` components as children. + +## Usage + +To use `FancyListBox`, import it into your React component and then use `FancyListBox.Item` to add list items. + +```jsx +import FancyListBox from './path/to/FancyListBox'; + +const MyComponent = () => ( + + Item 1 + Item 2 + // More items... + +); +``` + +## Props + +`FancyListBox` accepts the following props: + +- `children`: ReactNode - The items to be displayed in the list. +- `...htmlProps`: HTMLAttributes - Any other standard HTML attributes for a div element. + +--- + +# FancyListBoxItem Component + +`FancyListBoxItem` is used within `FancyListBox` to render individual list items. It is a styled `li` element. + +## Usage + +`FancyListBoxItem` is used as a child of `FancyListBox`. + +```jsx +Item 1 +``` + +## Props + +`FancyListBoxItem` accepts the following props: + +- `children`: ReactNode - The content of the list item. +- `externalStyle`: CSSProp - Optional external styles to be applied to the list item. + +--- + +## Styling + +Both `FancyListBox` and `FancyListBoxItem` can be styled using styled-components. `FancyListBox` applies its styles through `FancyBoxStyle`, and `FancyListBoxItem` uses `StyledLi` for styling, which can be customized via the `externalStyle` prop. diff --git a/src/Components/UI/Molecules/FancyListBox/FancyListBox.stories.tsx b/src/Components/UI/Molecules/FancyListBox/FancyListBox.stories.tsx new file mode 100644 index 000000000..def8420e4 --- /dev/null +++ b/src/Components/UI/Molecules/FancyListBox/FancyListBox.stories.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import FancyListBox from './FancyListBox'; + +const meta = { + component: FancyListBox, + parameters: { + docs: { + description: { + component: 'Dumb-Comonent: The FancyListBox Renders a Styled Box with a list of Items.', + }, + }, + }, + + argTypes: { + children: { + description: 'The children of the FancyListBox.', + type: { name: 'function', required: false }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + render: (args) => ( + + Item 1 + Item 2 + Item 3 + + ), + args: {}, +}; diff --git a/src/Components/UI/Molecules/FancyListBox/FancyListBox.style.tsx b/src/Components/UI/Molecules/FancyListBox/FancyListBox.style.tsx new file mode 100644 index 000000000..072189b3e --- /dev/null +++ b/src/Components/UI/Molecules/FancyListBox/FancyListBox.style.tsx @@ -0,0 +1,12 @@ +import { css } from 'styled-components'; +import { TTheme } from '../../Interface/TTheme'; + +export const FancyBoxStyle = css<{ theme: TTheme }>` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing.md}; + justify-content: space-between; + width: 100%; + border-radius: ${({ theme }) => theme.borderRadius.xl}; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); +`; diff --git a/src/Components/UI/Molecules/FancyListBox/FancyListBox.tsx b/src/Components/UI/Molecules/FancyListBox/FancyListBox.tsx new file mode 100644 index 000000000..a01447409 --- /dev/null +++ b/src/Components/UI/Molecules/FancyListBox/FancyListBox.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +import { FancyBox } from '@/Components/UI/Atoms/FancyBox'; +import { FancyListBoxItem } from './FancyListBoxItem'; +import { FancyBoxStyle } from './FancyListBox.style'; + +type FancyListBoxProps = { + children?: React.ReactNode; +} & React.HTMLAttributes & + React.ComponentProps; +// --------------------------------------------------------------------------- // +// ---------- The FancyListBox is only a Styled list with items ------------- // +// --------------------------------------------------------------------------- // +function FancyListBox({ children, ...htmlProps }: FancyListBoxProps) { + return ( + + {children} + + ); +} + +FancyListBox.Item = FancyListBoxItem; +export default FancyListBox; // this convention is used to allow the Storybook to render the component diff --git a/src/Components/UI/Molecules/FancyListBox/FancyListBoxItem.tsx b/src/Components/UI/Molecules/FancyListBox/FancyListBoxItem.tsx new file mode 100644 index 000000000..9fbdd3368 --- /dev/null +++ b/src/Components/UI/Molecules/FancyListBox/FancyListBoxItem.tsx @@ -0,0 +1,34 @@ +import { styled, CSSProp } from 'styled-components'; + +import { RawLI } from '@/Components/UI/Atoms/RawLI'; +import { TTheme } from '@/Components/UI/Interface/TTheme'; + +// handle the distances between the items and the edeges of the list +const StyledLi = styled(RawLI)<{ $externalStyle?: CSSProp; theme: TTheme }>` + ${({ $externalStyle }) => ($externalStyle ? $externalStyle : '')} + + padding: 0 ${({ theme }) => theme.spacing.lg}; + + &:first-child { + padding-top: ${({ theme }) => theme.spacing.lg}; + } + + &:last-child { + padding-bottom: ${({ theme }) => theme.spacing.lg}; + } +`; + +interface FancyListBoxItemProps { + children?: React.ReactNode; + externalStyle?: CSSProp; +} +// --------------------------------------------------------------------------- // +// ------- The List Item for The FancyListBox to handle the distances -------- // +// --------------------------------------------------------------------------- // +function FancyListBoxItem({ children }: FancyListBoxItemProps) { + return {children}; +} + +// This convention is used to allow the Storybook to render the component +FancyListBoxItem.displayName = 'FancyListBox.Item'; +export { FancyListBoxItem }; diff --git a/src/Components/UI/Molecules/FancyListBox/index.ts b/src/Components/UI/Molecules/FancyListBox/index.ts new file mode 100644 index 000000000..47d77c29c --- /dev/null +++ b/src/Components/UI/Molecules/FancyListBox/index.ts @@ -0,0 +1 @@ +export { default as FancyListBox } from './FancyListBox'; diff --git a/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.style.tsx b/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.style.tsx index 5b3226cbd..f2ffb26c7 100644 --- a/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.style.tsx +++ b/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.style.tsx @@ -2,10 +2,10 @@ import { styled, css } from 'styled-components'; import { spacingPx } from '../../Design/designSizes'; import { TTextAlign } from './FancyMiniProfile'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import getColorsForComponent from '../../Design/color/colorCalculatorForComponet'; -import { boxShadow } from '../../Design/shadows'; +import { boxShadow } from '../../Design/shadows/shadows'; import { TTheme } from '@/Components/UI/Interface/TTheme'; import { TSpacings } from '@/Components/UI/Interface/TSpacings'; @@ -13,7 +13,7 @@ import { TSpacings } from '@/Components/UI/Interface/TSpacings'; interface IWrapper { $size?: TSpacings; $gapSpacing?: TSpacings; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; theme: TTheme; $shadow?: boolean; diff --git a/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.tsx b/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.tsx index 56c4429d0..537a9f435 100644 --- a/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.tsx +++ b/src/Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile.tsx @@ -4,7 +4,7 @@ import FancyProfilePicture, { IFancyProfilePicture } from '../../Atoms/FancyProf import Typography from '../../Atoms/Typography/Typography'; import { TextWrapper, Wrapper } from './FancyMiniProfile.style'; import { TTypography } from '@/Components/UI/Interface/TTypography'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TSpacings } from '../../Interface/TSpacings'; @@ -51,7 +51,7 @@ interface IFancyMiniprofile { subHeadingText?: string; imageURL?: string; size?: keyof typeof pillSettings; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; shadow?: boolean; } diff --git a/src/Components/UI/Molecules/FancyProgressBar/FancyProgressBar.tsx b/src/Components/UI/Molecules/FancyProgressBar/FancyProgressBar.tsx index 7b839ba72..4297b9827 100644 --- a/src/Components/UI/Molecules/FancyProgressBar/FancyProgressBar.tsx +++ b/src/Components/UI/Molecules/FancyProgressBar/FancyProgressBar.tsx @@ -5,7 +5,7 @@ import { TAlign } from '../../Atoms/AlignedInputLabel/TalignedInputLabel.model'; import { AlignedInputLabel } from '../../Atoms/AlignedInputLabel/AlignedInputLabel'; import ProgressBar, { IProgressBar } from '../../Atoms/ProgressBar/ProgressBar'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -40,7 +40,7 @@ interface IFancyProgressBar extends IProgressBar { labelAlign?: TAlign; progressCount?: boolean; progressAlign?: TAlign; - themeType?: TUiColors; + themeType?: TThemeTypes; textLayer?: TLayer; layer?: TLayer; } diff --git a/src/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper.style.tsx b/src/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper.style.tsx new file mode 100644 index 000000000..1cd4fca28 --- /dev/null +++ b/src/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper.style.tsx @@ -0,0 +1,43 @@ +import { CSSProp, css, styled } from 'styled-components'; + +import { TTheme } from '@/Components/UI/Interface/TTheme'; +import { TAlign, TAlignCheckbox } from '../FancyCheckbox/FancyCheckbox.model'; + +// wraps the whole component and handles the alignment +export const Wrapper = styled.div<{ $align?: TAlign; $externalStyle: CSSProp }>` + position: relative; + display: flex; + justify-content: ${({ $align }) => { + switch ($align) { + case 'left': + return 'flex-start'; + case 'right': + return 'flex-end'; + case 'center': + return 'center'; + } + }}; + ${({ $externalStyle }) => $externalStyle} +`; + +// this wraps the label and the description +// handle the order of the checkbox and label/description +export const LabelWrapper = styled.label<{ $align?: TAlignCheckbox; theme: TTheme }>` + display: flex; + flex-direction: column; + gap: ${({ theme }) => theme.spacing.xxs}; + ${({ $align, theme }) => + $align === 'right' + ? css` + margin-right: ${theme.spacing.sm}; + order: 0; + ` + : css` + margin-left: ${theme.spacing.sm}; + order: 1; + `}; + + .description { + margin-left: ${({ theme }) => theme.spacing.xxs}; + } +`; diff --git a/src/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper.tsx b/src/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper.tsx new file mode 100644 index 000000000..b4d5dc3b5 --- /dev/null +++ b/src/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper.tsx @@ -0,0 +1,61 @@ +import React, { useId } from 'react'; +import { CSSProp } from 'styled-components'; + +import themeStore from '../../Design/color/themeStore/themeStore'; +import { TAlign, TAlignCheckbox } from '../FancyCheckbox/FancyCheckbox.model'; +import { LabelWrapper, Wrapper } from './FancySelectWrapper.style'; +import FancyContent from '../FancyContent/FancyContent'; + +// --------------------------------------------------------------------------- // +// -------------------- A simple Checkbox with a Label ----------------------- // +// --------------------------------------------------------------------------- // +export interface IFancySelectWrapperProps { + label?: string; + align?: TAlign; + alignInput?: TAlignCheckbox; + description?: string; + id?: string; + inputElement?: React.ReactNode; + externalStyle?: CSSProp; +} +export default function FancySelectWrapper(props: IFancySelectWrapperProps) { + const { label, align, alignInput, description, inputElement, externalStyle } = { ...defaultProps, ...props }; + const getTheme = themeStore((state) => state.theme); + + const id = useId(); + const pickedId = props.id ? props.id : id; + + return ( + + {/* The label and description */} + {(label || description) && ( + + + {label && ( + + {label} + + )} + {description && ( + + {description} + + )} + + + )} + {/* The check box */} + {inputElement} + + ); +} + +// the default props of the component +const defaultProps: IFancySelectWrapperProps = { + align: 'center', + alignInput: 'left', +}; diff --git a/src/Components/UI/Molecules/FancySpeedDailButton/FancySpeedDailButton.tsx b/src/Components/UI/Molecules/FancySpeedDailButton/FancySpeedDailButton.tsx index 30734ffc4..1f5acf5bb 100644 --- a/src/Components/UI/Molecules/FancySpeedDailButton/FancySpeedDailButton.tsx +++ b/src/Components/UI/Molecules/FancySpeedDailButton/FancySpeedDailButton.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Button, MenueItemWrapper, Ring, SpeedDialContainer, Wrapper } from './SpeedDailButton.style'; import SpeedDailMenueItem, { TMenueItemProps, TMenueButtonProps } from '../../Atoms/SpeedDialMenueItem/SpeedDailMenueItem'; -import SVGPlus from '../../SVGIcons/SVGPlus'; +import SVGPlus from '../../SVGIcons/SVGPlus/SVGPlus'; export type ISpeedail = { items?: TMenueButtonProps[]; diff --git a/src/Components/UI/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx b/src/Components/UI/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx index a085a3510..6394fc35c 100644 --- a/src/Components/UI/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx +++ b/src/Components/UI/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx @@ -1,6 +1,6 @@ import { styled } from 'styled-components'; -import { boxShadow } from '../../Design/shadows'; +import { boxShadow } from '../../Design/shadows/shadows'; import { TTheme } from '@/Components/UI/Interface/TTheme'; // eslint-disable-next-line react-refresh/only-export-components diff --git a/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx b/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx index ffcdf247b..403231df2 100644 --- a/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx +++ b/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; import { borderRadius, spacingPx } from '../../Design/designSizes'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { tabSwitchSizes } from '../TabSwitch/TabSwitch.style'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -20,7 +20,7 @@ export interface IFancyTabSwitchStyle { $outlined?: boolean; theme: TTheme; $layer?: TLayer; - $themeType?: TUiColors; + $themeType?: TThemeTypes; } // ----------------------------------------------------------- // diff --git a/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.tsx b/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.tsx index b75530ac8..632c83a5f 100644 --- a/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.tsx +++ b/src/Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { css } from 'styled-components'; import { borderRadius } from '../../Design/designSizes'; -import Fieldset from '../../Atoms/Fieldset/Fieldset'; +import Fieldset from '../Fieldset/Fieldset'; import FancyBar from '../../Atoms/FancyBox/FancyBox'; import TabSwitch from '../TabSwitch/TabSwitch'; import { tabSwitchSizes } from '../TabSwitch/TabSwitch.style'; @@ -20,7 +20,7 @@ export default function FancyTabSwitch(props: ITabSwitchProps & { label?: string /* Generate the unordered list for the tab switch */ return ( -
    +
    void; wide?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; iconAlign?: 'left' | 'right'; size?: keyof typeof tabSwitchItemSizes; } diff --git a/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx b/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx index 54b5f1526..ccdd30bac 100644 --- a/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx +++ b/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; // Import the component to be tested import FancyTabSwitchButton from './FancyTabSwitchButton'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // fix for building ... because storybook is not able to handle the default export const HelperComponent = (props: React.ComponentProps) => ; diff --git a/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx b/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx index 3b773ab17..1e5b4af3f 100644 --- a/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx +++ b/src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx @@ -1,7 +1,7 @@ import { styled, css } from 'styled-components'; -import themeStore from '../../Design/color/themeStore'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import themeStore from '../../Design/color/themeStore/themeStore'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTypography } from '@/Components/UI/Interface/TTypography'; @@ -29,10 +29,10 @@ export const tabSwitchItemSizes = { //generates the style from the dynamic values of the tab interface IListButtonStyle { $wide?: boolean; - $textColor?: TUiColors; + $textColor?: TThemeTypes; $iconAlign?: 'left' | 'right'; theme: TTheme; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; $size?: keyof typeof tabSwitchItemSizes; $hasLabel?: boolean; diff --git a/src/Components/UI/Atoms/Fieldset/Fieldset.stories.tsx b/src/Components/UI/Molecules/Fieldset/Fieldset.stories.tsx similarity index 100% rename from src/Components/UI/Atoms/Fieldset/Fieldset.stories.tsx rename to src/Components/UI/Molecules/Fieldset/Fieldset.stories.tsx diff --git a/src/Components/UI/Atoms/Fieldset/Fieldset.style.tsx b/src/Components/UI/Molecules/Fieldset/Fieldset.style.tsx similarity index 75% rename from src/Components/UI/Atoms/Fieldset/Fieldset.style.tsx rename to src/Components/UI/Molecules/Fieldset/Fieldset.style.tsx index 91694cee6..b5f69a90a 100644 --- a/src/Components/UI/Atoms/Fieldset/Fieldset.style.tsx +++ b/src/Components/UI/Molecules/Fieldset/Fieldset.style.tsx @@ -1,9 +1,10 @@ import { styled } from 'styled-components'; import { TalignLabel } from './Fieldset'; -import { disabledStyle } from '../../HelperFunctions/designFunctions/disableStyle'; +import { disabledStyle } from '../../Design/designFunctions/disabledStyle/disableStyle'; import { TTheme } from '@/Components/UI/Interface/TTheme'; export const StyledFieldset = styled.fieldset<{ $disabled?: boolean }>` + width: 100%; border: none; padding: 0; margin: 0; @@ -11,5 +12,5 @@ export const StyledFieldset = styled.fieldset<{ $disabled?: boolean }>` `; export const StyledLegend = styled.legend<{ alignLabel?: TalignLabel; theme: TTheme }>` - margin: 0 ${({ alignLabel }) => (alignLabel === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xxs}; + margin: 0 ${({ alignLabel }) => (alignLabel === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xs}; `; diff --git a/src/Components/UI/Atoms/Fieldset/Fieldset.tsx b/src/Components/UI/Molecules/Fieldset/Fieldset.tsx similarity index 76% rename from src/Components/UI/Atoms/Fieldset/Fieldset.tsx rename to src/Components/UI/Molecules/Fieldset/Fieldset.tsx index e727bf5c8..223273255 100644 --- a/src/Components/UI/Atoms/Fieldset/Fieldset.tsx +++ b/src/Components/UI/Molecules/Fieldset/Fieldset.tsx @@ -1,7 +1,8 @@ import React from 'react'; + import { StyledFieldset, StyledLegend } from './Fieldset.style'; import { TTypography } from '@/Components/UI/Interface/TTypography'; -import { Typography } from '../Typography'; +import { Typography } from '@/Components/UI/Atoms/Typography'; export type TalignLabel = 'left' | 'center'; @@ -10,13 +11,13 @@ interface IFieldset { label?: string; alignLabel?: TalignLabel; fontVariantLegend?: TTypography; - $disabled?: boolean; + disabled?: boolean; } export default function Fieldset(props: IFieldset) { - const { children, label, alignLabel, fontVariantLegend, $disabled } = props; + const { children, label, alignLabel, fontVariantLegend, disabled } = props; return ( - + {label && ( diff --git a/src/Components/UI/Atoms/Fieldset/index.ts b/src/Components/UI/Molecules/Fieldset/index.ts similarity index 100% rename from src/Components/UI/Atoms/Fieldset/index.ts rename to src/Components/UI/Molecules/Fieldset/index.ts diff --git a/src/Components/UI/Molecules/Header/Header.style.tsx b/src/Components/UI/Molecules/Header/Header.style.tsx index 57dc0e68e..f220af817 100644 --- a/src/Components/UI/Molecules/Header/Header.style.tsx +++ b/src/Components/UI/Molecules/Header/Header.style.tsx @@ -1,9 +1,7 @@ import { CSSProp, styled } from 'styled-components'; import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model'; -import generateThemeForCard, { - IgenerateThemeForCard, -} from '../../HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard'; +import generateThemeForCard, { IgenerateThemeForCard } from '../../Design/designFunctions/generateThemeForCard/generateThemeForCard'; import { TTheme } from '@/Components/UI/Interface/TTheme'; type TStyledHeader = IStyledPrefixAndPicker & { theme: TTheme; $externalStyle?: CSSProp }; diff --git a/src/Components/UI/Molecules/Header/Header.tsx b/src/Components/UI/Molecules/Header/Header.tsx index c4fb492c7..09d15969a 100644 --- a/src/Components/UI/Molecules/Header/Header.tsx +++ b/src/Components/UI/Molecules/Header/Header.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { CSSProp } from 'styled-components'; -import { IgenerateThemeForCard } from '../../HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard'; +import { IgenerateThemeForCard } from '../../Design/designFunctions/generateThemeForCard/generateThemeForCard'; import { StyledHeader } from './Header.style'; type THeaderProps = IgenerateThemeForCard & { diff --git a/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx b/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx index e91aac70a..c71483503 100644 --- a/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx +++ b/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import HeaderTitleWithLogo from './HeaderTitleWithLogo'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; const meta = { component: HeaderTitleWithLogo, diff --git a/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx b/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx index 5be2e7925..bf6764272 100644 --- a/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx +++ b/src/Components/UI/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { styled } from 'styled-components'; import Typography from '../../Atoms/Typography/Typography'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getTextColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -23,7 +23,7 @@ const LogoWrapper = styled.div` height: 100%; `; -const StyledHeading = styled.a<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +const StyledHeading = styled.a<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` display: flex; gap: ${({ theme }) => theme.spacing.sm}; align-items: center; @@ -36,7 +36,7 @@ interface IHeaderTitleWithLogo { title?: React.ReactNode | string; logo?: React.ReactNode; linkTo?: string; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function HeaderTitleWithLogo(props: IHeaderTitleWithLogo) { diff --git a/src/Components/UI/Molecules/InfoCard/InfoCrad.style.tsx b/src/Components/UI/Molecules/InfoCard/InfoCrad.style.tsx index 048823eaa..698f4aa13 100644 --- a/src/Components/UI/Molecules/InfoCard/InfoCrad.style.tsx +++ b/src/Components/UI/Molecules/InfoCard/InfoCrad.style.tsx @@ -1,7 +1,7 @@ import { css } from 'styled-components'; import { TSizes } from '../../Interface/TComponentSizes'; -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; const getTheme = themeStore.getState().theme; const sizes = { diff --git a/src/Components/UI/Molecules/InputWrapper/InputWrapper.stories.tsx b/src/Components/UI/Molecules/InputWrapper/InputWrapper.stories.tsx index 41542c385..e09fa34ea 100644 --- a/src/Components/UI/Molecules/InputWrapper/InputWrapper.stories.tsx +++ b/src/Components/UI/Molecules/InputWrapper/InputWrapper.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import InputWrapper from './InputWrapper'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; const meta = { component: InputWrapper, diff --git a/src/Components/UI/Molecules/InputWrapper/InputWrapper.style.tsx b/src/Components/UI/Molecules/InputWrapper/InputWrapper.style.tsx index f8034eae6..abfca0a69 100644 --- a/src/Components/UI/Molecules/InputWrapper/InputWrapper.style.tsx +++ b/src/Components/UI/Molecules/InputWrapper/InputWrapper.style.tsx @@ -1,8 +1,8 @@ import { styled, css } from 'styled-components'; -import { disabledStyle } from '../../HelperFunctions/designFunctions/disableStyle'; +import { disabledStyle } from '../../Design/designFunctions/disabledStyle/disableStyle'; import { fontSize } from '../../Design/designSizes'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -29,7 +29,7 @@ export const ErrorMessage = styled.p<{ theme: TTheme }>` `; //the input/label/underline are all wrapped in thid container -export const InputContainer = styled.div<{ $givePadding: boolean; theme: TTheme; $themeType: TUiColors; $layer: TLayer }>` +export const InputContainer = styled.div<{ $givePadding: boolean; theme: TTheme; $themeType: TThemeTypes; $layer: TLayer }>` width: 100%; grid-column: 2/3; ${({ $givePadding, theme }) => diff --git a/src/Components/UI/Molecules/InputWrapper/InputWrapper.tsx b/src/Components/UI/Molecules/InputWrapper/InputWrapper.tsx index bfbe59da2..1b1cdbc8d 100644 --- a/src/Components/UI/Molecules/InputWrapper/InputWrapper.tsx +++ b/src/Components/UI/Molecules/InputWrapper/InputWrapper.tsx @@ -6,10 +6,10 @@ import FancyInputUnderline from '../../Atoms/InputUnderline/InputUnderline'; import FancySVGAtom from '../../Atoms/FancySVGAtom/FancySVGAtom'; import { AnimatedInputLabel } from '../../Atoms/AnimatedLabel/AnimatedInputLabel'; import { TRawInputAlign } from '../../Atoms/RawInput/RawInput'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import calcColorState from '../../Design/color/calcColorState'; -import themeStore from '../../Design/color/themeStore'; +import themeStore from '../../Design/color/themeStore/themeStore'; // Define the styles for the icon const iconStyle = css` @@ -32,7 +32,7 @@ export interface IInputWrapper { errorMessage?: string; icon?: JSX.Element; value?: string | number | readonly string[] | undefined; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; align?: TRawInputAlign; autoWidth?: boolean; diff --git a/src/Components/UI/Molecules/MenuList/MenuList.style.tsx b/src/Components/UI/Molecules/MenuList/MenuList.style.tsx index 676d962ad..f6ac7567d 100644 --- a/src/Components/UI/Molecules/MenuList/MenuList.style.tsx +++ b/src/Components/UI/Molecules/MenuList/MenuList.style.tsx @@ -2,7 +2,7 @@ import { styled } from 'styled-components'; import { MenuListProps } from './MenuList'; import IStyledPrefixAndOmitter from '../../Interface/IStyledPrefixAndOmiter.model'; -import generateThemeForCard from '../../HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard'; +import generateThemeForCard from '../../Design/designFunctions/generateThemeForCard/generateThemeForCard'; import { TTheme } from '@/Components/UI/Interface/TTheme'; type StyledMenuProps = IStyledPrefixAndOmitter & { theme: TTheme }; @@ -12,7 +12,7 @@ export const MenuContainer = styled.div` flex-direction: column; padding: 8px 0; ${({ theme, $themeType, $layer, $outlined }) => - generateThemeForCard({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 2, $outlined })} + generateThemeForCard({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 2, $outlined, $outlinedBackgroundStrength: 1 })} box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); border-radius: ${({ theme }) => theme.borderRadius.md}; `; diff --git a/src/Components/UI/Molecules/MenuList/MenuList.tsx b/src/Components/UI/Molecules/MenuList/MenuList.tsx index e0d3abdde..92f8b509f 100644 --- a/src/Components/UI/Molecules/MenuList/MenuList.tsx +++ b/src/Components/UI/Molecules/MenuList/MenuList.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { MenuContainer } from './MenuList.style'; export interface MenuListProps { children?: React.ReactNode; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; outlined?: boolean; } diff --git a/src/Components/UI/Molecules/Modal/Modal.model.ts b/src/Components/UI/Molecules/Modal/Modal.model.ts deleted file mode 100644 index 91ee1a517..000000000 --- a/src/Components/UI/Molecules/Modal/Modal.model.ts +++ /dev/null @@ -1,12 +0,0 @@ -import IModalHeadLine from '../FancyModalHeadLine/FancyModalHeadLine.model'; -import IModalBottomLine from '../../Molecules/ModalBottomLine/ModalBottomLine.model'; -import { ComponentType } from 'react'; - -interface IFancyModal { - headlineContent?: IModalHeadLine; - bottomLineContent?: IModalBottomLine; - Content?: ComponentType; - children?: React.ReactNode; -} - -export default IFancyModal; diff --git a/src/Components/UI/Molecules/Modal/Modal.tsx b/src/Components/UI/Molecules/Modal/Modal.tsx index 5c142ed49..071f0786d 100644 --- a/src/Components/UI/Molecules/Modal/Modal.tsx +++ b/src/Components/UI/Molecules/Modal/Modal.tsx @@ -2,7 +2,7 @@ import React, { ReactNode, useEffect, useState } from 'react'; import SimpleDialog from '../../Atoms/SimpleDialog/SimpleDialog'; import BackDrop from '../../Atoms/BackDrop/BackDrop'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; // --------------------------------------------------------------------------- // @@ -15,7 +15,7 @@ export interface IModal { onClose?: (id: string) => void; isCloseable?: boolean; backDrop?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function Modal(props: IModal) { diff --git a/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.model.ts b/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.model.ts deleted file mode 100644 index bb521d6cc..000000000 --- a/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.model.ts +++ /dev/null @@ -1,13 +0,0 @@ -export type IBottomLineButton = { - title: string; - onClick: () => void; - secondaryButton?: boolean; - disabled?: boolean; -}; - -interface IModalBottomLine { - buttons?: IBottomLineButton[]; - component?: React.ReactNode; -} - -export default IModalBottomLine; diff --git a/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.stories.tsx b/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.stories.tsx deleted file mode 100644 index 3a7c14cfd..000000000 --- a/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import ModalBottomLine from './ModalBottomLine'; - -const meta = { - component: ModalBottomLine, - parameters: { - docs: { - description: { - component: 'Smart-Comonent: A Modal component to show a Dialog with a Backdrop', - }, - }, - }, - argTypes: {}, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: {}, -}; diff --git a/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.tsx b/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.tsx deleted file mode 100644 index fa0c301d4..000000000 --- a/src/Components/UI/Molecules/ModalBottomLine/ModalBottomLine.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import { styled } from 'styled-components'; - -import brakePoints from '../../Design/brakePoints'; -import FancyButton from '../../Organisms/FancyButton/FancyButton'; -import IModalBottomLine, { IBottomLineButton } from './ModalBottomLine.model'; - -// a example for the buttons array for the ModalBottomLine -// const array = [ -// { -// title: 'Submit', -// onClick: () => { -// useModalStore.closeModal(ID); -// }, -// secondaryButton: true, -// disabled: false, -// }, -// ]; - -const StyledModalBottomLine = styled.div` - display: flex; - flex-direction: column; - justify-content: center; - gap: 1rem; - - // for the Desktop view align the buttons next to each other - @media (min-width: ${brakePoints.lg + 'px'}) { - flex-direction: row-reverse; - justify-content: flex-start; - } -`; - -// --------------------------------------------------------------------------- // -// --------- The main Bottomline for the Modal to displays buttons ----------- // -// --------------------------------------------------------------------------- // -export default function ModalBottomLine({ buttons, component }: IModalBottomLine) { - return buttons ? ( - - {buttons.map((button: IBottomLineButton, index) => { - return ( - - ); - })} - - ) : ( - <>{component} - ); -} diff --git a/src/Components/UI/Molecules/ModalBottomLine/index.ts b/src/Components/UI/Molecules/ModalBottomLine/index.ts deleted file mode 100644 index aab84ba95..000000000 --- a/src/Components/UI/Molecules/ModalBottomLine/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ModalBottomLine } from './ModalBottomLine'; diff --git a/src/Components/UI/Molecules/MonthWithDays/MonthWithDays.tsx b/src/Components/UI/Molecules/MonthWithDays/MonthWithDays.tsx index 11861b550..042ef3c80 100644 --- a/src/Components/UI/Molecules/MonthWithDays/MonthWithDays.tsx +++ b/src/Components/UI/Molecules/MonthWithDays/MonthWithDays.tsx @@ -8,7 +8,7 @@ import Typography from '../../Atoms/Typography/Typography'; import Day from './day.model'; import createDaysOfMonth from './helperFunctions/createDaysOfMonth'; import { IDateWithExternalState, IExternalMonthWithDays } from './IExternalMonthWithDays.model'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; const getFirstDayOfMonth = (month: number, year: number): number => { @@ -27,7 +27,7 @@ interface IMonthWithDays { selectedDates: IDateArray; externalMonthWithDays?: IExternalMonthWithDays; disabledDateSetting?: IDisabledDateSettings; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } // --------------------------------------------------------------------------- // diff --git a/src/Components/UI/Molecules/Paginator/Paginator.tsx b/src/Components/UI/Molecules/Paginator/Paginator.tsx index 0bce33c74..fcdf1fede 100644 --- a/src/Components/UI/Molecules/Paginator/Paginator.tsx +++ b/src/Components/UI/Molecules/Paginator/Paginator.tsx @@ -1,18 +1,18 @@ import React, { useMemo } from 'react'; -import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft'; -import SVGChevronRight from '../../SVGIcons/SVGChevronRight'; +import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft/SVGChevronLeft'; +import SVGChevronRight from '../../SVGIcons/SVGChevronRight/SVGChevronRight'; import FancyButton from '../../Organisms/FancyButton/FancyButton'; import { IconWrapper, NumberList, StyledPaginator } from './Paginator.style'; import PageNumberList from '../../Atoms/PageNumberList/PageNumberList'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; // Define the props for the Paginator component interface IPaginator { currentPage?: number; totalPages: number; - themeType?: TUiColors; + themeType?: TThemeTypes; outlinedButton?: boolean; onPageChange: (page: number) => void; pageLimits?: number; diff --git a/src/Components/UI/Molecules/PasswordInput/PasswordInput.tsx b/src/Components/UI/Molecules/PasswordInput/PasswordInput.tsx index fed2ee050..2c583b9a1 100644 --- a/src/Components/UI/Molecules/PasswordInput/PasswordInput.tsx +++ b/src/Components/UI/Molecules/PasswordInput/PasswordInput.tsx @@ -3,12 +3,12 @@ import { styled } from 'styled-components'; import RawInput, { TRawInputAlign } from '../../Atoms/RawInput/RawInput'; import PasswordEye from '../../Atoms/PasswordEye/PasswordEye'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -const WrapperEye = styled.div<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +const WrapperEye = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` position: absolute; bottom: 6px; right: 4px; @@ -22,7 +22,7 @@ export interface IPasswordInputProps extends Omit void; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } // --------------------------------------------------------------------------- // diff --git a/src/Components/UI/Molecules/RangeCalendar/RangeCalendar.tsx b/src/Components/UI/Molecules/RangeCalendar/RangeCalendar.tsx index 0f958e31f..fe9476cc0 100644 --- a/src/Components/UI/Molecules/RangeCalendar/RangeCalendar.tsx +++ b/src/Components/UI/Molecules/RangeCalendar/RangeCalendar.tsx @@ -8,7 +8,7 @@ import useVisibleMonths from './helperFunctions/useVisibleMonths'; import { IDisabledDateSettings } from '../MonthWithDays/IDisableDateSettings.model'; import { IExternalMonthWithDays } from '../MonthWithDays/IExternalMonthWithDays.model'; import { IDateArray } from './IDateArray.model'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; // --------------------------------------------------------------------------- // @@ -22,7 +22,7 @@ interface ICalendar { handleSwitchFromTo?: (change: 'from' | 'to') => void; disabledDateSetting?: IDisabledDateSettings; externalMonthsWithDays?: IExternalMonthWithDays[]; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function RangeCalendar(props: ICalendar) { diff --git a/src/Components/UI/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts b/src/Components/UI/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts index d9e14a8fd..00b873a62 100644 --- a/src/Components/UI/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts +++ b/src/Components/UI/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import useIntersectionObserver from '../../../HelperFunctions/hooks/useIntersectionObserver'; +import useIntersectionObserver from '../../../HelperFunctions/hooks/useIntersectionObserver/useIntersectionObserver'; // the hook for handle the visible months and add the next and previous months export default function useVisibleMonths(isScrolled: boolean) { diff --git a/src/Components/UI/Molecules/SearchBar/SearchBar.tsx b/src/Components/UI/Molecules/SearchBar/SearchBar.tsx index 17d61a7fa..f1dde6849 100644 --- a/src/Components/UI/Molecules/SearchBar/SearchBar.tsx +++ b/src/Components/UI/Molecules/SearchBar/SearchBar.tsx @@ -2,10 +2,10 @@ import React, { ChangeEvent, useState } from 'react'; import { styled, css } from 'styled-components'; import FancyTextInput from '../../Organisms/FancyTextInput/FancyTextInput'; -import SVGSearch from '../../SVGIcons/SVGSearch'; +import SVGSearch from '../../SVGIcons/SVGSearch/SVGSearch'; import FancySVGAtom from '../../Atoms/FancySVGAtom/FancySVGAtom'; import { TRawInputAlign } from '../../Atoms/RawInput/RawInput'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; @@ -31,7 +31,7 @@ interface ISearchBar { align?: TRawInputAlign; activeHandler?: (isActive: boolean) => void; handler?: (value: string) => void; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; placerholder?: string; } diff --git a/src/Components/UI/Molecules/SearchBarList/SearchBarList.tsx b/src/Components/UI/Molecules/SearchBarList/SearchBarList.tsx index a3dfcd792..8efbe4d1a 100644 --- a/src/Components/UI/Molecules/SearchBarList/SearchBarList.tsx +++ b/src/Components/UI/Molecules/SearchBarList/SearchBarList.tsx @@ -1,7 +1,7 @@ import React from 'react'; import FancyCard from '../../Atoms/FancyCard/FancyCard'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { InnerCard, StyledSearchBarList } from './SearchBarList.style'; @@ -9,7 +9,7 @@ import { InnerCard, StyledSearchBarList } from './SearchBarList.style'; interface ISearchBarList { isActive?: boolean; children?: React.ReactNode; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } // The SearchBarList component diff --git a/src/Components/UI/Molecules/SingleInputs/SingleInputs.style.tsx b/src/Components/UI/Molecules/SingleInputs/SingleInputs.style.tsx index c4d73e15e..8bb8a2591 100644 --- a/src/Components/UI/Molecules/SingleInputs/SingleInputs.style.tsx +++ b/src/Components/UI/Molecules/SingleInputs/SingleInputs.style.tsx @@ -1,10 +1,10 @@ import { styled } from 'styled-components'; -import InputStatus from '../../Interface/IStatus'; +import IStatus from '../../Interface/IStatus'; import { TTheme } from '@/Components/UI/Interface/TTheme'; interface IInputWrapper { - $status?: Omit; + $status?: Omit; theme: TTheme; } export const InputWrapper = styled.div` diff --git a/src/Components/UI/Molecules/SingleInputs/SingleInputs.tsx b/src/Components/UI/Molecules/SingleInputs/SingleInputs.tsx index 2c03b2f42..49ae795fd 100644 --- a/src/Components/UI/Molecules/SingleInputs/SingleInputs.tsx +++ b/src/Components/UI/Molecules/SingleInputs/SingleInputs.tsx @@ -1,17 +1,17 @@ import React, { useState, createRef, useEffect } from 'react'; import SingleInputAtom from '../../Atoms/SingleInputAtom/SingleInputAtom'; -import InputStatus from '../../Interface/IStatus'; +import IStatus from '../../Interface/IStatus'; import { InputWrapper } from './SingleInputs.style'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; interface IFancySingleInputsProps { length?: number; handler?: (value: string) => void; - status?: Pick; + status?: Pick; automaticCase?: 'upper' | 'lower'; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function SingleInputs(props: IFancySingleInputsProps) { diff --git a/src/Components/UI/Molecules/SingleToastMessage/SingleToastMessage.style.tsx b/src/Components/UI/Molecules/SingleToastMessage/SingleToastMessage.style.tsx index 00a1f8984..f092e128f 100644 --- a/src/Components/UI/Molecules/SingleToastMessage/SingleToastMessage.style.tsx +++ b/src/Components/UI/Molecules/SingleToastMessage/SingleToastMessage.style.tsx @@ -2,7 +2,7 @@ import { styled, keyframes } from 'styled-components'; import { fontSize } from '../../Design/designSizes'; import colorTransparencyCalculator from '../../Design/color/colorTransparencyCalculator'; -import { boxShadow } from '../../Design/shadows'; +import { boxShadow } from '../../Design/shadows/shadows'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; diff --git a/src/Components/UI/Molecules/SwipeUpModal/ISwipeUpModal.model.ts b/src/Components/UI/Molecules/SwipeUpModal/ISwipeUpModal.model.ts index c7570f032..a363d5f00 100644 --- a/src/Components/UI/Molecules/SwipeUpModal/ISwipeUpModal.model.ts +++ b/src/Components/UI/Molecules/SwipeUpModal/ISwipeUpModal.model.ts @@ -1,4 +1,4 @@ -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; export interface ISwipeUpModal { @@ -6,7 +6,7 @@ export interface ISwipeUpModal { children?: React.ReactNode; isCloseAble?: boolean; // if a error occurs and the modal should be closeable isScalable?: boolean; // if the modal should be static or scalable - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; backdrop?: boolean; onClose?: () => void; diff --git a/src/Components/UI/Molecules/SwipeUpModal/SwipeUpModal.tsx b/src/Components/UI/Molecules/SwipeUpModal/SwipeUpModal.tsx index 2f8b37e40..c065d71b1 100644 --- a/src/Components/UI/Molecules/SwipeUpModal/SwipeUpModal.tsx +++ b/src/Components/UI/Molecules/SwipeUpModal/SwipeUpModal.tsx @@ -1,14 +1,14 @@ import React, { useEffect, useState } from 'react'; import { animated, useTransition } from '@react-spring/web'; -import useWindowDimensions from '../../HelperFunctions/hooks/useWindowDimensions'; +import useWindowDimensions from '../../HelperFunctions/hooks/useWindowDimensions/useWindowDimensions'; import SwipeUpContainer from '../../Atoms/SwipeUpContainer/SwipeUpContainer'; import BackDrop from '../../Atoms/BackDrop/BackDrop'; -import UseDelay from '../../HelperFunctions/hooks/UseDelay'; +import UseDelay from '../../HelperFunctions/hooks/useDelay/UseDelay'; import ScalingSection from '../ScalingSection/ScalingSection'; import { Content, ContentBox, WrapperAnimated, WrapperContent, WrapperModal } from './SwipeUpModal.style'; import { ISwipeUpModal } from './ISwipeUpModal.model'; -import { TModalStatus } from '../../Interface/ModalStatus'; +import { TModalStatus } from '../../Interface/TModalStatus'; // --------------------------------------------------------------------------- // // ----------- The Modal Molecule the displays the complete modal - ---------- // diff --git a/src/Components/UI/Molecules/SwitchList/SwitchList.stories.tsx b/src/Components/UI/Molecules/SwitchList/SwitchList.stories.tsx index 099406937..cb1860a67 100644 --- a/src/Components/UI/Molecules/SwitchList/SwitchList.stories.tsx +++ b/src/Components/UI/Molecules/SwitchList/SwitchList.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import SwitchList from './SwitchList'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; import { FancyBottomBarIcon } from '../../Templates/FancyBottomBarIcon'; const meta = { diff --git a/src/Components/UI/Molecules/TabSwitch/TabSwitch.model.ts b/src/Components/UI/Molecules/TabSwitch/TabSwitch.model.ts index 592ce9ff1..f23f84160 100644 --- a/src/Components/UI/Molecules/TabSwitch/TabSwitch.model.ts +++ b/src/Components/UI/Molecules/TabSwitch/TabSwitch.model.ts @@ -1,4 +1,4 @@ -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; import { ITabSwitchDetailsLabelIcon, ITabSwitchDetailsChildren } from '../FancyTabSwitchButton/FancyTabSwitchButton.model'; @@ -7,8 +7,8 @@ import { TSpacings } from '../../Interface/TSpacings'; export interface ITabSwitchProps { wide?: boolean; size?: 'sm' | 'md' | 'lg'; - textColor?: TUiColors; - themeType?: TUiColors; + textColor?: TThemeTypes; + themeType?: TThemeTypes; layer?: TLayer; disabled?: boolean; tabSpacing?: TSpacings; @@ -19,6 +19,6 @@ export interface ITabSwitchProps { id?: string; currentSelect?: string; iconAlign?: 'left' | 'right'; - activeColor?: TUiColors; + activeColor?: TThemeTypes; handler?: (value: string) => void; } diff --git a/src/Components/UI/Molecules/TabSwitch/TabSwitch.style.tsx b/src/Components/UI/Molecules/TabSwitch/TabSwitch.style.tsx index f23296ceb..6414f2ff3 100644 --- a/src/Components/UI/Molecules/TabSwitch/TabSwitch.style.tsx +++ b/src/Components/UI/Molecules/TabSwitch/TabSwitch.style.tsx @@ -4,9 +4,9 @@ import { borderRadius, spacingPx } from '../../Design/designSizes'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import { TTheme } from '@/Components/UI/Interface/TTheme'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; import { TSpacings } from '../../Interface/TSpacings'; -import themeStore from '../../Design/color/themeStore'; +import themeStore from '../../Design/color/themeStore/themeStore'; // Define the different sizes for the tab switch const getSpacingFromTheme = themeStore.getState().theme.spacing; @@ -34,7 +34,7 @@ export interface IFancyTabSwitchStyle { $outlined?: boolean; theme: TTheme; $layer?: TLayer; - $themeType?: TUiColors; + $themeType?: TThemeTypes; } // ----------------------------------------------------------- // diff --git a/src/Components/UI/Molecules/TabSwitch/TabSwitch.tsx b/src/Components/UI/Molecules/TabSwitch/TabSwitch.tsx index d03b3ad8d..3cfca8388 100644 --- a/src/Components/UI/Molecules/TabSwitch/TabSwitch.tsx +++ b/src/Components/UI/Molecules/TabSwitch/TabSwitch.tsx @@ -22,7 +22,6 @@ export default function TabSwitch(props: ITabSwitchProps) { rounded, direction, outlined, - id, currentSelect, handler, iconAlign, @@ -67,7 +66,6 @@ export default function TabSwitch(props: ITabSwitchProps) { $direction={direction} role="radiogroup" $layer={layer} - id={id} > {/* Generate a list item for each switch value */} {values.map((item, i) => ( diff --git a/src/Components/UI/Organisms/FancyBoxSet/FancyBoxSet.stories.tsx b/src/Components/UI/Organisms/FancyBoxSet/FancyBoxSet.stories.tsx new file mode 100644 index 000000000..9e2a320ee --- /dev/null +++ b/src/Components/UI/Organisms/FancyBoxSet/FancyBoxSet.stories.tsx @@ -0,0 +1,123 @@ +import React from 'react'; + +import type { Meta, StoryObj } from '@storybook/react'; + +import FancyBoxSet from './FancyBoxSet'; + +const meta = { + component: FancyBoxSet, + parameters: { + docs: { + description: { + component: 'Dumb-Comonent: The FancyBoxSet Renders a Styled Box with a list of Items and a label.', + }, + }, + }, + argTypes: { + displayLine: { + description: 'The Horizontal Line is displayed.', + type: { name: 'boolean' }, + defaultValue: { + summary: true, + }, + }, + label: { + description: 'TheBoySet has a label.', + type: { name: 'string' }, + defaultValue: { + summary: '', + }, + }, + alignLabel: { + description: 'The alignment of the label.', + control: { + type: 'select', + }, + defaultValue: { + summary: 'left', + }, + }, + fontVariantLegend: { + description: 'The font variant of the label.', + control: { + type: 'select', + }, + defaultValue: { + summary: 'h3', + }, + }, + disabled: { + description: 'If true, the Fieldset is disabled.', + type: { name: 'boolean' }, + defaultValue: { + summary: false, + }, + }, + themeType: { + description: 'The theme type of the modal.', + control: { + type: 'select', + }, + defaultValue: { + summary: 'primary', + }, + }, + layer: { + description: 'The layer of the modal.', + control: { + type: 'range', + min: 0, + max: 10, + step: 1, + }, + defaultValue: { + summary: 1, + }, + }, + outlined: { + description: 'If true, the modal is outlined.', + type: { name: 'boolean' }, + defaultValue: { + summary: false, + }, + }, + outlinedBackgroundStrength: { + description: 'The background strength of the modal.', + control: { + type: 'range', + min: 0, + max: 1, + step: 0.1, + }, + defaultValue: { + summary: 1, + }, + }, + }, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + render: (args) => ( + +

    Hiii

    +

    Hiii

    +

    Hiii

    +

    Hiii

    +

    Hiii

    +     + ), + args: { + layer: 1, + themeType: 'primary', + displayLine: true, + label: 'Label', + alignLabel: 'left', + fontVariantLegend: 'h3', + disabled: false, + }, +}; diff --git a/src/Components/UI/Organisms/FancyBoxSet/FancyBoxSet.tsx b/src/Components/UI/Organisms/FancyBoxSet/FancyBoxSet.tsx new file mode 100644 index 000000000..9e3f06c39 --- /dev/null +++ b/src/Components/UI/Organisms/FancyBoxSet/FancyBoxSet.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import { Fieldset } from '@/Components/UI/Molecules/Fieldset'; +import { FancyListBox } from '@/Components/UI/Molecules/FancyListBox'; +import { FancyLine } from '@/Components/UI/Atoms/FancyLine'; +import { TLayer } from '@/Components/UI/Interface/TLayer'; + +// get props from the Fieldset and the FancyListBox +type TFieldSetProps = React.ComponentProps; +type TFancyListProps = React.ComponentProps; + +// combine the props and add the displayLine prop +type TFancyBoxSet = TFieldSetProps & TFancyListProps & { displayLine?: boolean }; +// --------------------------------------------------------------------------- // +// ----- The FancyBoxSet to render the ListBox with a Fieldset and a Line ---- // +// --------------------------------------------------------------------------- // +export default function FancyBoxSet(props: TFancyBoxSet) { + const { label, alignLabel, fontVariantLegend, disabled, children, themeType, displayLine, layer, ...HTMLProps } = { + ...defaultProp, + ...props, + }; + + // is needed to get the length of the children for displaying the line + const childArray = React.Children.toArray(children); + + return ( + // Give the list with the Fieldset a label +
    + {/* The FancyListbox gives the style */} + + {childArray.map((child, i) => ( + <> + {/* Merge the Item with the FancyLine to Seperate the items */} + {child} + {displayLine && childArray.length - 1 !== i && ( + + )} + + ))} + +
    + ); +} + +const defaultProp: TFancyBoxSet = { + layer: 1, + displayLine: true, +}; diff --git a/src/Components/UI/Organisms/FancyBoxSet/index.ts b/src/Components/UI/Organisms/FancyBoxSet/index.ts new file mode 100644 index 000000000..2fccca4df --- /dev/null +++ b/src/Components/UI/Organisms/FancyBoxSet/index.ts @@ -0,0 +1 @@ +export { default as FancyBoxSet } from './FancyBoxSet'; diff --git a/src/Components/UI/Organisms/FancyButton/FancyButton.stories.tsx b/src/Components/UI/Organisms/FancyButton/FancyButton.stories.tsx index aa1e9536e..f32698fb0 100644 --- a/src/Components/UI/Organisms/FancyButton/FancyButton.stories.tsx +++ b/src/Components/UI/Organisms/FancyButton/FancyButton.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import FancyButton from './FancyButton'; -import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft'; +import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft/SVGChevronLeft'; const meta = { component: FancyButton, diff --git a/src/Components/UI/Organisms/FancyButton/FancyButton.style.tsx b/src/Components/UI/Organisms/FancyButton/FancyButton.style.tsx index b15d67b89..196ef172b 100644 --- a/src/Components/UI/Organisms/FancyButton/FancyButton.style.tsx +++ b/src/Components/UI/Organisms/FancyButton/FancyButton.style.tsx @@ -1,7 +1,7 @@ import { css } from 'styled-components'; -import { generateBorderRadiusForComponent } from '../../HelperFunctions/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent'; -import { generateComponentPadding } from '../../HelperFunctions/designFunctions/generatePaddingForComponent/generatepaddingForComponent'; +import { generateBorderRadiusForComponent } from '../../Design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent'; +import { generateComponentPadding } from '../../Design/designFunctions/generatePaddingForComponent/generatepaddingForComponent'; import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius'; const generate1To1Button = ($size: 'sm' | 'md' | 'lg', $outlined?: boolean) => { diff --git a/src/Components/UI/Organisms/FancyChip/FancyChip.stories.tsx b/src/Components/UI/Organisms/FancyChip/FancyChip.stories.tsx index 1069d5acb..0fa1754c2 100644 --- a/src/Components/UI/Organisms/FancyChip/FancyChip.stories.tsx +++ b/src/Components/UI/Organisms/FancyChip/FancyChip.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import FancyChip from './FancyChip'; -import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft'; +import SVGChevronLeft from '../../SVGIcons/SVGChevronLeft/SVGChevronLeft'; const meta = { component: FancyChip, diff --git a/src/Components/UI/Organisms/FancyChip/FancyChip.style.tsx b/src/Components/UI/Organisms/FancyChip/FancyChip.style.tsx index a6d390d97..5b978901a 100644 --- a/src/Components/UI/Organisms/FancyChip/FancyChip.style.tsx +++ b/src/Components/UI/Organisms/FancyChip/FancyChip.style.tsx @@ -1,7 +1,7 @@ import styled, { css } from 'styled-components'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; // Define the type for the spacing position export type TSpacingPosition = 'left' | 'right' | 'booth'; diff --git a/src/Components/UI/Organisms/FancyChip/FancyChip.tsx b/src/Components/UI/Organisms/FancyChip/FancyChip.tsx index 17073da2f..2f8bfeedd 100644 --- a/src/Components/UI/Organisms/FancyChip/FancyChip.tsx +++ b/src/Components/UI/Organisms/FancyChip/FancyChip.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { css } from 'styled-components'; -import SVGXCircle from '../../SVGIcons/SVGXCircle'; +import SVGXCircle from '../../SVGIcons/SVGXCircle/SVGXCircle'; import FancyContent from '../../Molecules/FancyContent/FancyContent'; import { StyledXButton, TSpacingPosition, WrapperImage, generateSpacing } from './FancyChip.style'; diff --git a/src/Components/UI/Organisms/FancyChipList/FancyChipList.style.tsx b/src/Components/UI/Organisms/FancyChipList/FancyChipList.style.tsx index e0f6b5a82..b105baab8 100644 --- a/src/Components/UI/Organisms/FancyChipList/FancyChipList.style.tsx +++ b/src/Components/UI/Organisms/FancyChipList/FancyChipList.style.tsx @@ -2,7 +2,7 @@ import { styled } from 'styled-components'; import IStyledPrefixAndPicker from '../../Interface/IStyledPrefixAndPicker.model'; import { getTextColor } from '../../Design/color/colorCalculatorForComponet'; -import { IgenerateThemeForCard } from '../../HelperFunctions/designFunctions/generateThemeForCard/generateThemeForCard'; +import { IgenerateThemeForCard } from '../../Design/designFunctions/generateThemeForCard/generateThemeForCard'; import { TTheme } from '@/Components/UI/Interface/TTheme'; type IChipContainer = IStyledPrefixAndPicker & { theme: TTheme }; diff --git a/src/Components/UI/Organisms/FancyChipList/FancyChipList.tsx b/src/Components/UI/Organisms/FancyChipList/FancyChipList.tsx index a05e1ba13..d648fe265 100644 --- a/src/Components/UI/Organisms/FancyChipList/FancyChipList.tsx +++ b/src/Components/UI/Organisms/FancyChipList/FancyChipList.tsx @@ -1,16 +1,17 @@ import React, { KeyboardEvent, useEffect, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; -import { Fieldset } from '../../Atoms/Fieldset'; +import { Fieldset } from '../../Molecules/Fieldset'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import ChipList from '../../Molecules/ChipList/ChipList'; import { FancyChip } from '../FancyChip'; import { InputLi } from './FancyChipList.style'; -import { TUiColors, TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; +import { TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColorsSystemMessage'; // Defining the interface for the component's props export interface ChipListProps { - themeType?: Exclude; + themeType?: Exclude; systemInformation?: TUiColorsSystemMessage; layer?: TLayer; outlined?: boolean; @@ -104,7 +105,7 @@ export default function FancyChipList(props: ChipListProps) { textColor="secondary" contentEditable={focusedChip === chip.id} tabIndex={0} - layer={Math.min(layer ?? 1 + 2, 10) as TLayer} + layer={Math.min((layer ?? 1) + 2, 10) as TLayer} onDelete={deleteChip(chip.id)} outlined={outlined} onFocus={hanleChipFocus(chip.id)} diff --git a/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.stories.tsx b/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.stories.tsx index 465881411..5c387c24b 100644 --- a/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.stories.tsx +++ b/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; // Import the component to be tested import FancyDateInput from './FancyDateInput'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // Define metadata for the story const meta = { diff --git a/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.style.tsx b/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.style.tsx index 9251c8a03..a0aacb6c1 100644 --- a/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.style.tsx +++ b/src/Components/UI/Organisms/FancyDateInput/FancyDateInput.style.tsx @@ -4,11 +4,11 @@ import { getBackgroundColor } from '../../Design/color/colorCalculatorForCompone import { TLayer } from '@/Components/UI/Interface/TLayer'; import { IDateInputProps } from '../../Molecules/DateInput/DateInput'; import { simpleColorTransition } from '../../Design/simpleTransition'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; interface IRawInputWrapper extends IRawInput { value?: string; - $themeType?: TUiColors; + $themeType?: TThemeTypes; $layer?: TLayer; } export const StyledDatePicker = styled(RawInput)` diff --git a/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.style.tsx b/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.style.tsx index 8cd1530cb..9207f6735 100644 --- a/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.style.tsx +++ b/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.style.tsx @@ -3,9 +3,9 @@ import { styled } from 'styled-components'; import { TLayer } from '@/Components/UI/Interface/TLayer'; import getColorsForComponent, { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet'; import { TTheme } from '@/Components/UI/Interface/TTheme'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; -export const DatePickerContainer = styled.div<{ theme: TTheme; $themeType?: TUiColors; $layer?: TLayer }>` +export const DatePickerContainer = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` display: flex; flex-direction: column; align-items: center; @@ -22,7 +22,7 @@ export const WrapperYearSelector = styled.div<{ theme: TTheme }>` box-sizing: border-box; `; -export const WrapperWeekdays = styled.div<{ theme: TTheme; $themeType?: TUiColors }>` +export const WrapperWeekdays = styled.div<{ theme: TTheme; $themeType?: TThemeTypes }>` width: 100%; border-bottom: solid 1px ${({ theme, $themeType = 'secondary' }) => getBackgroundColor({ theme, $themeType })}; padding-bottom: ${({ theme }) => theme.spacing.xxs}; diff --git a/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.tsx b/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.tsx index 175dffc1b..20e2b1d30 100644 --- a/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.tsx +++ b/src/Components/UI/Organisms/FancyDatePicker/FancyDatePicker.tsx @@ -9,7 +9,7 @@ import DateOutputFromTo from '../../Molecules/DateOutputFromTo/DateOutputFromTo' import { IDisabledDateSettings } from '../../Molecules/MonthWithDays/IDisableDateSettings.model'; import { IDateArray } from '../../Molecules/RangeCalendar/IDateArray.model'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; interface IFancyDatePicker { rangeCalendar?: boolean; @@ -17,7 +17,7 @@ interface IFancyDatePicker { selectedYear?: number; disabledDateSetting?: IDisabledDateSettings; externalData?: IExternalYearWithMonths; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } diff --git a/src/Components/UI/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx b/src/Components/UI/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx index 0a5b4fe88..784f754e1 100644 --- a/src/Components/UI/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx +++ b/src/Components/UI/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx @@ -1,16 +1,16 @@ import React, { useEffect, useState } from 'react'; import FancyUL, { IFancyUL } from '../../Molecules/FancyDropDownUL/FancyDropDownUL'; -import UseDelay from '../../HelperFunctions/hooks/UseDelay'; +import UseDelay from '../../HelperFunctions/hooks/useDelay/UseDelay'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; // --------------------------------------------------------------------------- // // ------------ The main component that renders the dropdown menu ------------ // // --------------------------------------------------------------------------- // interface IFancyDropDownMenue extends IFancyUL { isOpen?: boolean; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } export default function FancyDropDownMenue(props: IFancyDropDownMenue) { diff --git a/src/Components/UI/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx b/src/Components/UI/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx index cd5d1dfa4..712b75b2f 100644 --- a/src/Components/UI/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx +++ b/src/Components/UI/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; // Import the component to be tested import FancyDropDownSelect from './FancyDropDownSelect'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // Define metadata for the story const meta = { diff --git a/src/Components/UI/Organisms/FancyModal/FancyModal.state.tsx b/src/Components/UI/Organisms/FancyModal/FancyModal.state.tsx index 7f6797e35..bb385ca27 100644 --- a/src/Components/UI/Organisms/FancyModal/FancyModal.state.tsx +++ b/src/Components/UI/Organisms/FancyModal/FancyModal.state.tsx @@ -1,6 +1,6 @@ import { create } from 'zustand'; -import { TModalStatus } from '../../Interface/ModalStatus'; +import { TModalStatus } from '../../Interface/TModalStatus'; import { IModal } from '../../Molecules/Modal/Modal'; type TModalConfig = Omit; diff --git a/src/Components/UI/Organisms/FancyModal/FancyModal.tsx b/src/Components/UI/Organisms/FancyModal/FancyModal.tsx index 610443e85..309b18750 100644 --- a/src/Components/UI/Organisms/FancyModal/FancyModal.tsx +++ b/src/Components/UI/Organisms/FancyModal/FancyModal.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useFancyModalStore } from './FancyModal.state'; import Modal from '../../Molecules/Modal/Modal'; -import FancyPortal from '../../HelperFunctions/FancyPortal'; +import FancyPortal from '../../HelperFunctions/FancyPortal/FancyPortal'; // ---------- How to use the Module ------- // //--- use it diff --git a/src/Components/UI/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx b/src/Components/UI/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx index 1cd5b0355..c2c03df42 100644 --- a/src/Components/UI/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx +++ b/src/Components/UI/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; // Import the component to be tested import FancyPasswordInput from './FancyPasswordInput'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // Define metadata for the story const meta = { diff --git a/src/Components/UI/Organisms/FancyRadio/FancyRadio.tsx b/src/Components/UI/Organisms/FancyRadio/FancyRadio.tsx new file mode 100644 index 000000000..6cbd72d12 --- /dev/null +++ b/src/Components/UI/Organisms/FancyRadio/FancyRadio.tsx @@ -0,0 +1,33 @@ +import React, { useId } from 'react'; + +import FancySelectWrapper from '@/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper'; +import { RawRadio } from '@/Components/UI/Atoms/RawRadio'; + +export type TFancyRadioProps = Omit, 'inputElement'> & + React.ComponentProps; + +// --------------------------------------------------------------------------- // +// --- The FancyRadio is a RadioInput with a Label and description porp ---- // +// --------------------------------------------------------------------------- // +const FancyRadio = React.forwardRef((props, ref) => { + const { align, alignInput, label, description, externalStyle, checked, id: idExternal, name, value, ...HTMLProps } = props; + const id = useId(); + + const pickedId = idExternal ? idExternal : id; + + return ( +
    + } + /> +
    + ); +}); + +export default FancyRadio; diff --git a/src/Components/UI/Organisms/FancyRadio/index.ts b/src/Components/UI/Organisms/FancyRadio/index.ts new file mode 100644 index 000000000..1c6f79482 --- /dev/null +++ b/src/Components/UI/Organisms/FancyRadio/index.ts @@ -0,0 +1 @@ +export { default as FancyRadio } from './FancyRadio'; diff --git a/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts b/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts index 55b0ab189..48fba23f9 100644 --- a/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts +++ b/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts @@ -1,6 +1,6 @@ import { ChangeEvent } from 'react'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; interface IFancyRangeSlider { label?: string; @@ -11,7 +11,7 @@ interface IFancyRangeSlider { max?: number; displayNumber?: boolean; onChange?: (e: ChangeEvent) => void; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; disabled?: boolean; } diff --git a/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx b/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx index 17be8258f..7c824c2b2 100644 --- a/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx +++ b/src/Components/UI/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx @@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react'; // Import the component to be tested -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; import FancyRangeSlider from './FancyRangeSlider'; diff --git a/src/Components/UI/Organisms/FancySearchBar/FancySearchBar.tsx b/src/Components/UI/Organisms/FancySearchBar/FancySearchBar.tsx index 156fbbeca..4b84da168 100644 --- a/src/Components/UI/Organisms/FancySearchBar/FancySearchBar.tsx +++ b/src/Components/UI/Organisms/FancySearchBar/FancySearchBar.tsx @@ -4,7 +4,7 @@ import { styled } from 'styled-components'; import SearchBar from '../../Molecules/SearchBar/SearchBar'; import SearchBarList from '../../Molecules/SearchBarList/SearchBarList'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; // Styled component for the entire search bar const StyledFancySearchBar = styled.div` @@ -38,7 +38,7 @@ interface IFancySearchBar { children?: React.ReactNode; searchListWidth?: string; searchValue?: string; - themeType?: TUiColors; + themeType?: TThemeTypes; layer?: TLayer; } diff --git a/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts b/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts index e4e63a6a7..fd4d31484 100644 --- a/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts +++ b/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts @@ -1,6 +1,6 @@ import { create } from 'zustand'; -import { TModalStatus } from '../../Interface/ModalStatus'; +import { TModalStatus } from '../../Interface/TModalStatus'; import { ISwipeUpModal } from '../../Molecules/SwipeUpModal/ISwipeUpModal.model'; export type ModalSettings = Omit; diff --git a/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx b/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx index 18c685c75..ce99d275d 100644 --- a/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx +++ b/src/Components/UI/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx @@ -1,7 +1,7 @@ import React from 'react'; import SwipeUpModal from '../../Molecules/SwipeUpModal/SwipeUpModal'; -import FancyPortal from '../../HelperFunctions/FancyPortal'; +import FancyPortal from '../../HelperFunctions/FancyPortal/FancyPortal'; import { useFancySwipeUpModalStore } from './FancySwipeUpModal.state'; diff --git a/src/Components/UI/Organisms/FancyTextInput/FancyTextInput.stories.tsx b/src/Components/UI/Organisms/FancyTextInput/FancyTextInput.stories.tsx index 048b336c5..96d71a83f 100644 --- a/src/Components/UI/Organisms/FancyTextInput/FancyTextInput.stories.tsx +++ b/src/Components/UI/Organisms/FancyTextInput/FancyTextInput.stories.tsx @@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'; // Import the component to be tested import FancyTextInput from './FancyTextInput'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // Define metadata for the story const meta = { diff --git a/src/Components/UI/SVGIcons/SVGCheckMark.tsx b/src/Components/UI/SVGIcons/SVGCheckMark/SVGCheckMark.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGCheckMark.tsx rename to src/Components/UI/SVGIcons/SVGCheckMark/SVGCheckMark.tsx diff --git a/src/Components/UI/SVGIcons/SVGCheckMark/index.ts b/src/Components/UI/SVGIcons/SVGCheckMark/index.ts new file mode 100644 index 000000000..2957ab2e7 --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGCheckMark/index.ts @@ -0,0 +1 @@ +export { default as SVGCheckMark } from './SVGCheckMark'; diff --git a/src/Components/UI/SVGIcons/SVGChevronLeft.tsx b/src/Components/UI/SVGIcons/SVGChevronLeft/SVGChevronLeft.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGChevronLeft.tsx rename to src/Components/UI/SVGIcons/SVGChevronLeft/SVGChevronLeft.tsx diff --git a/src/Components/UI/SVGIcons/SVGChevronLeft/index.ts b/src/Components/UI/SVGIcons/SVGChevronLeft/index.ts new file mode 100644 index 000000000..65771eb88 --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGChevronLeft/index.ts @@ -0,0 +1 @@ +export { default as SVGChevronLeft } from './SVGChevronLeft'; diff --git a/src/Components/UI/SVGIcons/SVGChevronRight.tsx b/src/Components/UI/SVGIcons/SVGChevronRight/SVGChevronRight.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGChevronRight.tsx rename to src/Components/UI/SVGIcons/SVGChevronRight/SVGChevronRight.tsx diff --git a/src/Components/UI/SVGIcons/SVGChevronRight/index.ts b/src/Components/UI/SVGIcons/SVGChevronRight/index.ts new file mode 100644 index 000000000..a91ca91d5 --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGChevronRight/index.ts @@ -0,0 +1 @@ +export { default as SVGChevronRight } from './SVGChevronRight'; diff --git a/src/Components/UI/SVGIcons/SVGClipBoardIcon.tsx b/src/Components/UI/SVGIcons/SVGClipBoardIcon/SVGClipBoardIcon.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGClipBoardIcon.tsx rename to src/Components/UI/SVGIcons/SVGClipBoardIcon/SVGClipBoardIcon.tsx diff --git a/src/Components/UI/SVGIcons/SVGClipBoardIcon/index.ts b/src/Components/UI/SVGIcons/SVGClipBoardIcon/index.ts new file mode 100644 index 000000000..20e3b1319 --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGClipBoardIcon/index.ts @@ -0,0 +1 @@ +export { default as SVGClipBoardIcon } from './SVGClipBoardIcon'; diff --git a/src/Components/UI/SVGIcons/SVGClipBoardIconChecked.tsx b/src/Components/UI/SVGIcons/SVGClipBoardIconChecked/SVGClipBoardIconChecked.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGClipBoardIconChecked.tsx rename to src/Components/UI/SVGIcons/SVGClipBoardIconChecked/SVGClipBoardIconChecked.tsx diff --git a/src/Components/UI/SVGIcons/SVGClipBoardIconChecked/index.ts b/src/Components/UI/SVGIcons/SVGClipBoardIconChecked/index.ts new file mode 100644 index 000000000..a82d8088e --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGClipBoardIconChecked/index.ts @@ -0,0 +1 @@ +export { default as SVGClipBoardIconChecked } from './SVGClipBoardIconChecked'; diff --git a/src/Components/UI/SVGIcons/SVGEyeCrossed.tsx b/src/Components/UI/SVGIcons/SVGEyeCrossed/SVGEyeCrossed.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGEyeCrossed.tsx rename to src/Components/UI/SVGIcons/SVGEyeCrossed/SVGEyeCrossed.tsx diff --git a/src/Components/UI/SVGIcons/SVGEyeCrossed/index.ts b/src/Components/UI/SVGIcons/SVGEyeCrossed/index.ts new file mode 100644 index 000000000..431e07dd6 --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGEyeCrossed/index.ts @@ -0,0 +1 @@ +export { default } from './SVGEyeCrossed'; diff --git a/src/Components/UI/SVGIcons/SVGEyeOpen.tsx b/src/Components/UI/SVGIcons/SVGEyeOpen/SVGEyeOpen.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGEyeOpen.tsx rename to src/Components/UI/SVGIcons/SVGEyeOpen/SVGEyeOpen.tsx diff --git a/src/Components/UI/SVGIcons/SVGEyeOpen/index.ts b/src/Components/UI/SVGIcons/SVGEyeOpen/index.ts new file mode 100644 index 000000000..5114433ea --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGEyeOpen/index.ts @@ -0,0 +1 @@ +export { default as SVGEyeOpen } from './SVGEyeOpen'; diff --git a/src/Components/UI/SVGIcons/SVGLoadingArrows.tsx b/src/Components/UI/SVGIcons/SVGLoadingArrows/SVGLoadingArrows.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGLoadingArrows.tsx rename to src/Components/UI/SVGIcons/SVGLoadingArrows/SVGLoadingArrows.tsx diff --git a/src/Components/UI/SVGIcons/SVGLoadingArrows/index.ts b/src/Components/UI/SVGIcons/SVGLoadingArrows/index.ts new file mode 100644 index 000000000..971c82d46 --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGLoadingArrows/index.ts @@ -0,0 +1 @@ +export { default as SVGLoadingArrows } from './SVGLoadingArrows'; diff --git a/src/Components/UI/SVGIcons/SVGPlus.tsx b/src/Components/UI/SVGIcons/SVGPlus/SVGPlus.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGPlus.tsx rename to src/Components/UI/SVGIcons/SVGPlus/SVGPlus.tsx diff --git a/src/Components/UI/SVGIcons/SVGPlus/index.ts b/src/Components/UI/SVGIcons/SVGPlus/index.ts new file mode 100644 index 000000000..fa3ece124 --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGPlus/index.ts @@ -0,0 +1 @@ +export { default as SVGPlus } from './SVGPlus'; diff --git a/src/Components/UI/SVGIcons/SVGSearch.tsx b/src/Components/UI/SVGIcons/SVGSearch/SVGSearch.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGSearch.tsx rename to src/Components/UI/SVGIcons/SVGSearch/SVGSearch.tsx diff --git a/src/Components/UI/SVGIcons/SVGSearch/index.ts b/src/Components/UI/SVGIcons/SVGSearch/index.ts new file mode 100644 index 000000000..223c0f73f --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGSearch/index.ts @@ -0,0 +1 @@ +export { default as SVGSearch } from './SVGSearch'; diff --git a/src/Components/UI/SVGIcons/SVGXCircle.tsx b/src/Components/UI/SVGIcons/SVGXCircle/SVGXCircle.tsx similarity index 100% rename from src/Components/UI/SVGIcons/SVGXCircle.tsx rename to src/Components/UI/SVGIcons/SVGXCircle/SVGXCircle.tsx diff --git a/src/Components/UI/SVGIcons/SVGXCircle/index.ts b/src/Components/UI/SVGIcons/SVGXCircle/index.ts new file mode 100644 index 000000000..bed12525d --- /dev/null +++ b/src/Components/UI/SVGIcons/SVGXCircle/index.ts @@ -0,0 +1 @@ +export { default as SVGXCircle } from './SVGXCircle'; diff --git a/src/Components/UI/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx b/src/Components/UI/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx index d2dad849b..a759ac81f 100644 --- a/src/Components/UI/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx +++ b/src/Components/UI/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx @@ -1,6 +1,6 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; -import SVGCheckMark from '../../SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../SVGIcons/SVGCheckMark/SVGCheckMark'; // Import the component to be tested import FancyBottomBarIcon from './FancyBottomBarIcon'; // Define metadata for the story diff --git a/src/Components/UI/Templates/FancyFlexBox/index.ts b/src/Components/UI/Templates/FancyFlexBox/index.ts new file mode 100644 index 000000000..9eb917dbb --- /dev/null +++ b/src/Components/UI/Templates/FancyFlexBox/index.ts @@ -0,0 +1 @@ +export { default as FancyFlexBox } from './FancyFlexBox'; diff --git a/src/Components/UI/Templates/FancyGrid/FancyGrid.stories.tsx b/src/Components/UI/Templates/FancyGrid/FancyGrid.stories.tsx index 5c9d20de4..41b70d3ae 100644 --- a/src/Components/UI/Templates/FancyGrid/FancyGrid.stories.tsx +++ b/src/Components/UI/Templates/FancyGrid/FancyGrid.stories.tsx @@ -24,7 +24,7 @@ const meta = { type: 'number', }, }, - space: { + gap: { description: 'The layer of the modal', defaultValue: '0', control: { @@ -65,6 +65,6 @@ export const Primary: Story = { ), args: { grid: 12, - space: '12px', + gap: '12px', }, }; diff --git a/src/Components/UI/Templates/FancyGrid/FancyGrid.tsx b/src/Components/UI/Templates/FancyGrid/FancyGrid.tsx index 6cf72b8b7..e4063fd27 100644 --- a/src/Components/UI/Templates/FancyGrid/FancyGrid.tsx +++ b/src/Components/UI/Templates/FancyGrid/FancyGrid.tsx @@ -1,28 +1,30 @@ // FancyGrid.tsx import React from 'react'; import { styled } from 'styled-components'; + import FancyGridItem from './FancyGridItem/FancyGridItem'; +import IStyledPrefixAndOmitter from '@/Components/UI/Interface/IStyledPrefixAndOmiter.model'; interface FancyGridProps { grid?: number; - space?: string; + gap?: string; children?: React.ReactNode; } -const GridContainer = styled.div` +const GridContainer = styled.div>` display: grid; width: 100%; - grid-template-columns: repeat(${(props) => props.grid}, 1fr); - grid-gap: ${(props) => props.space}; + grid-template-columns: repeat(${(props) => props.$grid}, 1fr); + grid-gap: ${(props) => props.$gap}; `; // --------------------------------------------------------------------------- // // ------- The FancyGrid to allocate the grid and give the items space ------- // // --------------------------------------------------------------------------- // function FancyGrid(props: FancyGridProps) { - const { children, grid = 12, space } = props; + const { children, grid = 12, gap } = props; return ( - + {children} ); diff --git a/src/Components/UI/Templates/FancyHandyNav/FancyHandyNav.tsx b/src/Components/UI/Templates/FancyHandyNav/FancyHandyNav.tsx index bab64d69c..513932d87 100644 --- a/src/Components/UI/Templates/FancyHandyNav/FancyHandyNav.tsx +++ b/src/Components/UI/Templates/FancyHandyNav/FancyHandyNav.tsx @@ -7,14 +7,14 @@ import BottomBar from '../../Molecules/BottomBar/BottomBar'; import FancyBottomBarIcon, { IFancyBottomBarIcon } from '../FancyBottomBarIcon/FancyBottomBarIcon'; import RawNav from '../../Atoms/RawNav/RawNav'; import { TLayer } from '@/Components/UI/Interface/TLayer'; -import { TUiColors } from '@/Components/UI/Interface/TUiColors'; +import { TThemeTypes } from '@/Components/UI/Interface/TUiColors'; interface IFancyHandyNav { items?: IFancyBottomBarIcon[]; isVisible?: boolean; wichIndexIsActive?: string; - themeType?: TUiColors; - themeTypeIcons?: TUiColors; - themeTypeSwitchList?: TUiColors; + themeType?: TThemeTypes; + themeTypeIcons?: TThemeTypes; + themeTypeSwitchList?: TThemeTypes; layer?: TLayer; outlined?: boolean; outlinedBackgroundStrength?: number; diff --git a/src/Components/UI/Templates/FancyHandyNav/index.ts b/src/Components/UI/Templates/FancyHandyNav/index.ts new file mode 100644 index 000000000..2bd0577b4 --- /dev/null +++ b/src/Components/UI/Templates/FancyHandyNav/index.ts @@ -0,0 +1 @@ +export { default as FancyHandyNav } from './FancyHandyNav'; diff --git a/src/Components/UI/Templates/FancyRadioList/FancyRadioList.model.ts b/src/Components/UI/Templates/FancyRadioList/FancyRadioList.model.ts new file mode 100644 index 000000000..74c6f939d --- /dev/null +++ b/src/Components/UI/Templates/FancyRadioList/FancyRadioList.model.ts @@ -0,0 +1,15 @@ +import { FancyListBox } from '@/Components/UI/Molecules/FancyListBox'; +import { Fieldset } from '@/Components/UI/Molecules/Fieldset'; + +export interface FancyRadioListItem { + title: string; + description?: string; + itemKey: string; +} + +export type FancyRadioListProps = { + items: FancyRadioListItem[]; + name: string; + handler?: (itemKey: string) => void; +} & Omit, 'children'> & + Omit, 'children'>; diff --git a/src/Components/UI/Templates/FancyRadioList/FancyRadioList.stories.tsx b/src/Components/UI/Templates/FancyRadioList/FancyRadioList.stories.tsx new file mode 100644 index 000000000..b5a97c9e2 --- /dev/null +++ b/src/Components/UI/Templates/FancyRadioList/FancyRadioList.stories.tsx @@ -0,0 +1,95 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import FancyRadioList from './FancyRadioList'; + +const meta = { + component: FancyRadioList, + parameters: { + docs: { + description: { + component: 'Dumb-Comonent: The FancyRadioList Renders a Styled Box with a list of RadioButtons and a label.', + }, + }, + }, + argTypes: { + themeType: { + description: 'The theme type of the component', + control: { + type: 'select', + }, + defaultValue: { + summary: 'primary', + }, + }, + layer: { + description: 'The layer of the component', + control: { + type: 'range', + min: 0, + max: 10, + step: 1, + }, + defaultValue: { + summary: 1, + }, + }, + outlined: { + description: 'The component has a outline style', + control: { + type: 'boolean', + }, + defaultValue: { + summary: false, + }, + }, + outlinedBackgroundStrength: { + description: 'The background strength of the outline', + control: { + type: 'range', + min: 0, + max: 1, + step: 0.01, + }, + defaultValue: { + summary: 1, + }, + }, + }, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + render: (args) => , + args: { + label: 'FancyRadioList', + alignLabel: 'left', + fontVariantLegend: 'h3', + disabled: false, + themeType: 'primary', + layer: 1, + outlined: false, + outlinedBackgroundStrength: 1, + + items: [ + { + title: 'Item 1', + itemKey: '1', + }, + { + title: 'Item 2', + description: 'Description 2', + itemKey: '2', + }, + { + title: 'Item 3', + description: 'Description 3', + itemKey: '3', + }, + ], + name: 'radio', + }, +}; diff --git a/src/Components/UI/Templates/FancyRadioList/FancyRadioList.style.tsx b/src/Components/UI/Templates/FancyRadioList/FancyRadioList.style.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/Components/UI/Templates/FancyRadioList/FancyRadioList.tsx b/src/Components/UI/Templates/FancyRadioList/FancyRadioList.tsx new file mode 100644 index 000000000..d25f5871c --- /dev/null +++ b/src/Components/UI/Templates/FancyRadioList/FancyRadioList.tsx @@ -0,0 +1,76 @@ +import React, { useRef, useState } from 'react'; + +import { FancyRadio } from '@/Components/UI/Organisms/FancyRadio'; +import { FancyListBox } from '@/Components/UI/Molecules/FancyListBox'; +import { FancyLine } from '@/Components/UI/Atoms/FancyLine'; +import { Fieldset } from '@/Components/UI/Molecules/Fieldset'; +import { clampLayer } from '@/Components/UI/HelperFunctions/clampLayer'; +import { FancyRadioListProps } from './FancyRadioList.model'; + +// --------------------------------------------------------------------------- // +// ------- The FancyRadioList renders a List of RadioButtons dynamicly ------- // +// --------------------------------------------------------------------------- // +export default function FancyRadioList(props: FancyRadioListProps) { + const { items, name, handler, themeType, layer, ...fieldSetProps } = props; + const [currentItem, setCurrentSelect] = useState('1'); + const buttonRefs = useRef[]>(items.map(() => React.createRef())); + + // Define the function to handle the selection of a tab + const radioChangeHandler = (position: string) => { + const currentItem = items.find((item) => item.itemKey === position); + setCurrentSelect(position); + handler && handler(currentItem?.itemKey!); + }; + + // This handles the navigation with the keyboard arrows + const handleKeyDown = (event: React.KeyboardEvent, itemKey: string) => { + const currentIndex = items.findIndex((item) => item.itemKey === itemKey); + + let newIndex = -1; + // Check if the user pressed the arrow keys + if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { + newIndex = (currentIndex + 1) % items.length; + } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { + newIndex = (currentIndex - 1 + items.length) % items.length; + } + + // Set the focus on the new item + if (newIndex !== -1) { + const newPosition = items[newIndex].itemKey; + radioChangeHandler(newPosition); + buttonRefs.current[newIndex].current?.focus(); + } + }; + + return ( + // Give the list with the Fieldset a label +
    + {/* The FancyListbox gives the style */} + + {items.map((item, index) => ( + + {/* Render the Radio with a Label and Description */} + + radioChangeHandler(item.itemKey)} + onKeyDown={(e) => handleKeyDown(e, item.itemKey)} + externalStyle={{ width: '100%' }} + aria-checked={item.itemKey === currentItem} + tabIndex={item.itemKey === currentItem ? 0 : -1} + /> + + {/* Render a line between the items */} + {items.length - 1 !== index && } + + ))} + +
    + ); +} diff --git a/src/Components/UI/Templates/FancyRadioList/index.ts b/src/Components/UI/Templates/FancyRadioList/index.ts new file mode 100644 index 000000000..e02bdc1fd --- /dev/null +++ b/src/Components/UI/Templates/FancyRadioList/index.ts @@ -0,0 +1 @@ +export { default as FancyRadioList } from './FancyRadioList'; diff --git a/src/Routes/CheckboxRoute/CheckboxRoute.tsx b/src/Routes/CheckboxRoute/CheckboxRoute.tsx index c08ec9e36..af63e8b78 100644 --- a/src/Routes/CheckboxRoute/CheckboxRoute.tsx +++ b/src/Routes/CheckboxRoute/CheckboxRoute.tsx @@ -1,16 +1,41 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ import React, { useState } from 'react'; import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; import FancyCheckbox from '../../Components/UI/Molecules/FancyCheckbox/FancyCheckbox'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; +import RawRadio from '@/Components/UI/Atoms/RawRadio/RawRadio'; +import FancyRadio from '@/Components/UI/Organisms/FancyRadio/FancyRadio'; +import CustomRadio from '@/Components/UI/Atoms/RawRadio/RawRadio'; +import FancyRadioList from '@/Components/UI/Templates/FancyRadioList/FancyRadioList'; + +const itemList = [ + { title: 'Test1', description: 'Test1', itemKey: '1' }, + { title: 'Test2', description: 'Test2', itemKey: '2' }, + { title: 'Test3', description: 'Test3', itemKey: '3' }, + { title: 'Test4', description: 'Test4', itemKey: '4' }, +]; export default function CheckboxRoute() { const [checked, setChecked] = useState(false); + const [radio, setRadio] = useState(false); + + const [selectedValue, setSelectedValue] = useState(''); + + const handleChange = (event: React.ChangeEvent) => { + console.log(event.target.value, 'dsds'); + setSelectedValue(event.target.value); + }; const handleCheckboxChange = () => { setChecked(!checked); }; + const handleRadioChange = (event: React.ChangeEvent) => { + console.log(event.target.value, 'dsds'); + setRadio(!radio); + }; + return ( @@ -25,6 +50,30 @@ export default function CheckboxRoute() { + + + + +
    + + +
    +     diff --git a/src/Routes/ChipsRoute/ChipsRoute.tsx b/src/Routes/ChipsRoute/ChipsRoute.tsx index 191486a67..3dfb05d34 100644 --- a/src/Routes/ChipsRoute/ChipsRoute.tsx +++ b/src/Routes/ChipsRoute/ChipsRoute.tsx @@ -4,8 +4,8 @@ import React from 'react'; import Chip from '../../Components/UI/Organisms/FancyChip/FancyChip'; import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; -import ClipBoardIconCheck from '../../Components/UI/SVGIcons/SVGClipBoardIconChecked'; -import { FancyCard } from '../../lib'; +import ClipBoardIconCheck from '../../Components/UI/SVGIcons/SVGClipBoardIconChecked/SVGClipBoardIconChecked'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; import ChipList from '../../Components/UI/Molecules/ChipList/ChipList'; import FancyChipList from '../../Components/UI/Organisms/FancyChipList/FancyChipList'; diff --git a/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx b/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx index 858ef8bc9..f835c8209 100644 --- a/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx +++ b/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx @@ -2,9 +2,8 @@ import React from 'react'; import styled, { css } from 'styled-components'; -import { Typography } from '../../lib'; -import themeStore from '../../Components/UI/Design/color/themeStore'; -import { TUiColorsType } from '../../Components/UI/Design/color/designColor'; + +import themeStore from '../../Components/UI/Design/color/themeStore/themeStore'; import { TTheme } from '@/Components/UI/Interface/TTheme'; export default function ColorGeneratorRoute() { diff --git a/src/Routes/DatePickerRoute/DatePickerRoute.tsx b/src/Routes/DatePickerRoute/DatePickerRoute.tsx index 4338ccdac..f01be7726 100644 --- a/src/Routes/DatePickerRoute/DatePickerRoute.tsx +++ b/src/Routes/DatePickerRoute/DatePickerRoute.tsx @@ -6,7 +6,7 @@ import FancyDatePicker from '../../Components/UI/Organisms/FancyDatePicker/Fancy import FancyDateDropDown from '../../Components/UI/Templates/Inputs/FancyDateDropDown/FancyDateDropDown'; import IExternalYearWithMonths from '../../Components/UI/Molecules/MonthWithDays/IExternalMonthWithDays.model'; import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; const externalYears: IExternalYearWithMonths = { 2023: [ diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx index 7c4c06f50..bf89295f3 100644 --- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx +++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx @@ -1,9 +1,8 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ import React, { ChangeEvent } from 'react'; -import themeStore from '../../Components/UI/Design/color/themeStore'; +import themeStore from '../../Components/UI/Design/color/themeStore/themeStore'; import { FancyTextInput } from '../../Components/UI/Organisms/FancyTextInput'; -import { FancyBottomBarIcon, FancyButton, FancyCard, FancyChip, FancySVGAtom, SingleToastMessage } from '../../lib'; import FancyContent from '../../Components/UI/Molecules/FancyContent/FancyContent'; import BottomBarList from '../../Components/UI/Molecules/SwitchList/SwitchList'; @@ -13,6 +12,11 @@ import ComponentAsWrapper from '../../Components/UI/Atoms/ComponentAsWrapper/Com import ActionWrapper from '../../Components/UI/Atoms/ActionWrapper/ActionWrapper'; import FancyActionWrapper from '../../Components/UI/Atoms/FancyActionWrapper/FancyActionWrapper'; import BottomBarIcon from '../../Components/UI/Molecules/BottomBarIcon/BottomBarIcon'; +import FancyBottomBarIcon from '@/Components/UI/Templates/FancyBottomBarIcon/FancyBottomBarIcon'; +import { FancyButton } from '@/Components/UI/Organisms/FancyButton'; +import { SingleToastMessage } from '@/Components/UI/Molecules/SingleToastMessage'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; +import { FancyChip } from '@/Components/UI/Organisms/FancyChip'; const Icon = ( diff --git a/src/Routes/FancyBoxSet/FancyBoxSetRoute.tsx b/src/Routes/FancyBoxSet/FancyBoxSetRoute.tsx new file mode 100644 index 000000000..79a294c73 --- /dev/null +++ b/src/Routes/FancyBoxSet/FancyBoxSetRoute.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import FancyBoxSet from '@/Components/UI/Organisms/FancyBoxSet/FancyBoxSet'; +import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; + +export default function FancyBoxSetRoute() { + return ( + + + +

    Hiii

    +

    Hiii

    +

    Hiii

    +

    Hiii

    +

    Hiii

    +

    Hiii

    + + + + ); +} diff --git a/src/Routes/FancyContentRoute/FancyContentRoute.tsx b/src/Routes/FancyContentRoute/FancyContentRoute.tsx index f786eb0dd..e1f2281df 100644 --- a/src/Routes/FancyContentRoute/FancyContentRoute.tsx +++ b/src/Routes/FancyContentRoute/FancyContentRoute.tsx @@ -2,7 +2,7 @@ import React from 'react'; import FancyContent from '../../Components/UI/Molecules/FancyContent/FancyContent'; -import SVGCheckMark from '../../Components/UI/SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../Components/UI/SVGIcons/SVGCheckMark/SVGCheckMark'; import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; export default function FancyContentRoute() { diff --git a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx index f5df1f8ff..99148580d 100644 --- a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx +++ b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx @@ -9,7 +9,7 @@ export default function FancyLayoutRoute() { return ( - + diff --git a/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx b/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx index 3c072a8c6..43df45270 100644 --- a/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx +++ b/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx @@ -4,7 +4,7 @@ import FancySearchBar from '../../Components/UI/Organisms/FancySearchBar/FancySe import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; import { styled } from 'styled-components'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; const users = [ { diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx index 2e7c7c088..c12d8b050 100644 --- a/src/Routes/HeaderRoute/HeaderRoute.tsx +++ b/src/Routes/HeaderRoute/HeaderRoute.tsx @@ -5,12 +5,12 @@ import HeaderTitleWithLogo from '../../Components/UI/Molecules/HeaderTitleWithLo import FancyLoadingSpinner from '../../Components/UI/Atoms/FancyLoadingSpinner/FancyLoadingSpinner'; import FancyMiniProfile from '../../Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile'; import FancySearchBar from '../../Components/UI/Organisms/FancySearchBar/FancySearchBar'; -import { Typography } from '../../lib'; import styled from 'styled-components'; import FancyBar from '../../Components/UI/Atoms/FancyBox/FancyBox'; import Header from '../../Components/UI/Molecules/Header/Header'; -import themeStore from '@/Components/UI/Design/color/themeStore'; +import themeStore from '@/Components/UI/Design/color/themeStore/themeStore'; +import { Typography } from '@/Components/UI/Atoms/Typography'; const Logo = () => ( diff --git a/src/Routes/InfoCardRoute/InfoCardRoute.tsx b/src/Routes/InfoCardRoute/InfoCardRoute.tsx index 4d8ca6a04..a0cab7276 100644 --- a/src/Routes/InfoCardRoute/InfoCardRoute.tsx +++ b/src/Routes/InfoCardRoute/InfoCardRoute.tsx @@ -3,7 +3,7 @@ import React from 'react'; import InfoCard from '../../Components/UI/Molecules/InfoCard/InfoCard'; import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; import FancyInfoCard from '../../Components/UI/Templates/FancyInfoCard/FancyInfoCard'; -import SVGCheckMark from '../../Components/UI/SVGIcons/SVGCheckMark'; +import SVGCheckMark from '../../Components/UI/SVGIcons/SVGCheckMark/SVGCheckMark'; export default function InfoCardRoute() { return ( diff --git a/src/Routes/InputsRoute/InputsRoute.tsx b/src/Routes/InputsRoute/InputsRoute.tsx index b7aeec07b..311b39018 100644 --- a/src/Routes/InputsRoute/InputsRoute.tsx +++ b/src/Routes/InputsRoute/InputsRoute.tsx @@ -10,7 +10,7 @@ import FancyDateInput from '../../Components/UI/Organisms/FancyDateInput/FancyDa import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; import FancyDateDropDown from '../../Components/UI/Templates/Inputs/FancyDateDropDown/FancyDateDropDown'; import { css } from 'styled-components'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; const svg = ( diff --git a/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx b/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx index 252bee1e8..e8a9c80dc 100644 --- a/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx +++ b/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx @@ -5,7 +5,7 @@ import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; import FancyLoadingSpinner from '../../Components/UI/Atoms/FancyLoadingSpinner/FancyLoadingSpinner'; import FancyLoadingBar from '../../Components/UI/Atoms/FancyLoadingBar/FancyLoadingBar'; import ProgressBar from '../../Components/UI/Molecules/FancyProgressBar/FancyProgressBar'; // Corrected the import name -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; export default function LoadingSpinnerRoute() { const [progress, setProgress] = React.useState(0); diff --git a/src/Routes/MenuRoute/MenueRoute.tsx b/src/Routes/MenuRoute/MenueRoute.tsx index 86b696f6a..87a1bdfcf 100644 --- a/src/Routes/MenuRoute/MenueRoute.tsx +++ b/src/Routes/MenuRoute/MenueRoute.tsx @@ -8,7 +8,7 @@ import Popover from '../../Components/UI/HelperFunctions/FancyPopover/Popover'; import FancyPopover from '../../Components/UI/HelperFunctions/FancyPopover/FancyPopover'; import FancyMenueItem from '../../Components/UI/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem'; import FancyMenuList from '../../Components/UI/Templates/FancyMenueComponent/FancyMenu/FancyMenu'; -import SVGCheckMark from '@/Components/UI/SVGIcons/SVGCheckMark'; +import SVGCheckMark from '@/Components/UI/SVGIcons/SVGCheckMark/SVGCheckMark'; export default function MenueRoute() { const [isPopoverVisible, setPopoverVisible] = useState(false); diff --git a/src/Routes/MiniProfileRoute/MiniProfileroute.tsx b/src/Routes/MiniProfileRoute/MiniProfileroute.tsx index 2937d84d5..9a3bf0b60 100644 --- a/src/Routes/MiniProfileRoute/MiniProfileroute.tsx +++ b/src/Routes/MiniProfileRoute/MiniProfileroute.tsx @@ -3,7 +3,7 @@ import React from 'react'; import FancyMiniProfile from '../../Components/UI/Molecules/FancyMiniProfile/FancyMiniProfile'; import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; export default function MiniProfileroute() { return ( diff --git a/src/Routes/NavBarHandy/NavBarHandy.tsx b/src/Routes/NavBarHandy/NavBarHandy.tsx index d3abcc0cd..283bcb215 100644 --- a/src/Routes/NavBarHandy/NavBarHandy.tsx +++ b/src/Routes/NavBarHandy/NavBarHandy.tsx @@ -3,9 +3,8 @@ import React from 'react'; import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; import BottomBar from '../../Components/UI/Molecules/BottomBar/BottomBar'; -import { FancyBottomBarIcon } from '../../lib'; import FancyHandyNav from '../../Components/UI/Templates/FancyHandyNav/FancyHandyNav'; -import { IFancyBottomBarIcon } from '../../Components/UI/Templates/FancyBottomBarIcon/FancyBottomBarIcon'; +import FancyBottomBarIcon, { IFancyBottomBarIcon } from '../../Components/UI/Templates/FancyBottomBarIcon/FancyBottomBarIcon'; import { css } from 'styled-components'; const svg = ( diff --git a/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx b/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx index 5f1c5eb79..4c4db4595 100644 --- a/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx +++ b/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx @@ -3,7 +3,7 @@ import React from 'react'; import FancyPageList from '../../Components/UI/Molecules/FancyPageList/FancyPageList'; import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; import { styled } from 'styled-components'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; const StyledDiv = styled.div` display: flex; diff --git a/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx b/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx index 7b89fc68a..969537653 100644 --- a/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx +++ b/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx @@ -2,7 +2,7 @@ import React from 'react'; import FancySingleInputs from '../../Components/UI/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput'; import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; // the home route for the single number Input export default function SingleNumberInputRoute() { diff --git a/src/Routes/SpeedDailRoute/SpeedDailRoute.tsx b/src/Routes/SpeedDailRoute/SpeedDailRoute.tsx index 9e5cc0710..5fd177f05 100644 --- a/src/Routes/SpeedDailRoute/SpeedDailRoute.tsx +++ b/src/Routes/SpeedDailRoute/SpeedDailRoute.tsx @@ -4,7 +4,7 @@ import FancySpeedDialButton from '../../Components/UI/Molecules/FancySpeedDailBu import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; import { css } from 'styled-components'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; const Icon = ( diff --git a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx index 8c0397f54..69366d708 100644 --- a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx +++ b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx @@ -3,7 +3,7 @@ import React from 'react'; import FancyTabSwitch from '../../Components/UI/Molecules/FancyTabSwitch/FancyTabSwitch'; import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; import { css } from 'styled-components'; -import { FancyCard } from '../../lib'; +import { FancyCard } from '@/Components/UI/Atoms/FancyCard'; const Icon = ( diff --git a/src/lib/index.ts b/src/lib/index.ts index 1a0363390..f1b7c2822 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -37,10 +37,11 @@ export { default as FancyLoadingBar } from '@/Components/UI/Atoms/FancyLoadingBa export { default as ProgressBar } from '@/Components/UI/Atoms/ProgressBar/ProgressBar'; export { default as FancyProfilePicture } from '@/Components/UI/Atoms/FancyProfilePicture/FancyProfilePicture'; export { default as RawCheckbox } from '@/Components/UI/Atoms/RawCheckbox/RawCheckbox'; -export { default as Fieldset } from '@/Components/UI/Atoms/Fieldset/Fieldset'; +export { default as Fieldset } from '@/Components/UI/Molecules/Fieldset/Fieldset'; export { default as AnimatedInputLabel } from '@/Components/UI/Atoms/AnimatedLabel/AnimatedInputLabel'; export { default as FancyBar } from '@/Components/UI/Atoms/FancyBox/FancyBox'; export { default as ActionWrapper } from '@/Components/UI/Atoms/ActionWrapper/ActionWrapper'; +export { default as RawRadio } from '@/Components/UI/Atoms/RawRadio/RawRadio'; // ---------- Molecules ------- // export { default as DateInput } from '@/Components/UI/Molecules/DateInput/DateInput'; @@ -54,7 +55,6 @@ export { default as FancyDropDownUL } from '@/Components/UI/Molecules/FancyDropD export { default as FancySpeedDialButton } from '@/Components/UI/Molecules/FancySpeedDailButton/FancySpeedDailButton'; export { default as InputWrapper } from '@/Components/UI/Molecules/InputWrapper/InputWrapper'; export { default as Modal } from '@/Components/UI/Molecules/Modal/Modal'; -export { default as ModalBottomLine } from '@/Components/UI/Molecules/ModalBottomLine/ModalBottomLine'; export { default as MonthWithDays } from '@/Components/UI/Molecules/MonthWithDays/MonthWithDays'; export { default as NumberInput } from '@/Components/UI/Molecules/NumberInput/NumberInput'; export { default as PasswordInput } from '@/Components/UI/Molecules/PasswordInput/PasswordInput'; @@ -101,9 +101,33 @@ export { default as FancyDateInput } from '@/Components/UI/Organisms/FancyDateIn export { default as FancyDateDropDown } from '@/Components/UI/Templates/Inputs/FancyDateDropDown/FancyDateDropDown'; export { default as FancyToastMessage } from '@/Components/UI/Organisms/FancyToastMessage/FancyToastMessage'; export { default as FancyEditBar } from '@/Components/UI/Organisms/FancyEditBar/FancyEditBar'; +export { default as FancyRadio } from '@/Components/UI/Organisms/FancyRadio/FancyRadio'; // ---------- Templates ------- // export { default as FancyInfoCard } from '@/Components/UI/Templates/FancyInfoCard/FancyInfoCard'; export { default as FancyMenu } from '@/Components/UI/Templates/FancyMenueComponent/FancyMenu/FancyMenu'; export { default as FancyGrid } from '@/Components/UI/Templates/FancyGrid/FancyGrid'; export { default as FancyGridItem } from '@/Components/UI/Templates/FancyGrid/FancyGridItem/FancyGridItem'; +export { default as FancyBoxSet } from '@/Components/UI/Organisms/FancyBoxSet/FancyBoxSet'; +export { default as FancyRadioList } from '@/Components/UI/Templates/FancyRadioList/FancyRadioList'; +export { default as FancyFlexBox } from '@/Components/UI/Templates/FancyFlexBox/FancyFlexBox'; +export { default as FancyHandyNav } from '@/Components/UI/Templates/FancyHandyNav/FancyHandyNav'; + +// ---------- Utils ------- // +export { default as FancyPopover } from '@/Components/UI/HelperFunctions/FancyPopover/FancyPopover'; +export { default as UseDelay } from '@/Components/UI/HelperFunctions/hooks/useDelay/UseDelay'; +export { default as FancyPortal } from '@/Components/UI/HelperFunctions/FancyPortal/FancyPortal'; +export { default as useIntersectionObserver } from '@/Components/UI/HelperFunctions/hooks/useIntersectionObserver/useIntersectionObserver'; +export { default as useWindowDimensions } from '@/Components/UI/HelperFunctions/hooks/useWindowDimensions/useWindowDimensions'; + +// ---------- ThemeGenerators ------- // +export { default as generateThemeForCard } from '@/Components/UI/Design/designFunctions/generateThemeForCard/generateThemeForCard'; +export { default as disabledStyle } from '@/Components/UI/Design/designFunctions/disabledStyle/disableStyle'; +export { default as generateBorderRadiusForComponent } from '@/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent'; +export { default as shadows } from '@/Components/UI/Design/shadows/shadows'; + +// ---------- Interfaces ------- // +export * from '@/Components/UI/Interface'; + +// ---------- Store ------- // +export { default as themeStore } from '@/Components/UI/Design/color/themeStore/themeStore'; diff --git a/tsconfig.json b/tsconfig.json index 65b583b68..7737d9727 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,6 @@ "noUnusedParameters": false, "noFallthroughCasesInSwitch": true }, - "include": ["src/**/*", "dist/index.d.ts"], + "include": ["src/**/*", "dist/index.d.ts", "vite.config.ts", ".eslintrc.cjs"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/vite.config.ts b/vite.config.ts index 45907a934..0780d09d8 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,7 +21,7 @@ export default defineConfig({ entry: path.resolve(__dirname, 'src/lib/index.ts'), name: 'MyLib', formats: ['es', 'umd'], - fileName: (format) => `my-lib.${format}.js`, + fileName: (format) => `fui.${format}.js`, }, rollupOptions: { external: ['react', 'react-dom', 'styled-components'],