From 84721388e2eb6e3175d488ca2f57c0dc9285c741 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Mon, 4 Dec 2023 22:29:33 +0100 Subject: [PATCH] refactor: some components --- lib/index.ts | 1 + src/components/atoms/ColorIndicator/ColorIndicator.tsx | 1 - src/components/atoms/FancyBox/FancyBox.style.tsx | 2 +- src/components/atoms/FancyCard/Card.model.ts | 2 +- src/components/atoms/FancyCard/FancyCard.style.tsx | 6 +++--- .../atoms/FancyProfilePicture/FancyProfilePicture.tsx | 2 -- .../atoms/FancySVGAtom/FancySVGAtom.model.ts | 3 ++- .../atoms/FancySVGAtom/FancySVGAtom.style.tsx | 3 ++- src/components/atoms/FancySVGAtom/FancySVGAtom.tsx | 2 -- .../ImageVideoOverlay/ImageVideoOverlay.style.tsx | 2 +- src/components/atoms/InputLabel/InputLabel.stories.tsx | 2 +- src/components/atoms/InputUnderline/InputUnderline.tsx | 5 +++-- src/components/atoms/ListDivider/ListDivider.style.tsx | 5 +++-- src/components/atoms/ListDivider/ListDivider.tsx | 5 ++--- .../atoms/LoadingSVGArrows/LoadingSVGArrows.tsx | 4 ++-- src/components/atoms/MenuItem/MenuItem.style.tsx | 2 +- .../atoms/PageNumberList/PageNumberList.style.tsx | 3 ++- src/components/atoms/PageNumberList/PageNumberList.tsx | 2 +- src/components/atoms/PageNumberList/index.ts | 1 + src/components/atoms/PasswordEye/PasswordEye.tsx | 8 +++----- src/components/atoms/ProgressBar/ProgressBar.tsx | 2 -- src/components/atoms/RawRadio/RawRadio.style.tsx | 3 ++- src/components/atoms/RawSlider/RawSlider.style.tsx | 4 ++-- src/components/atoms/SwitchActiveIndicator/index.ts | 1 + src/components/icons/SVGEyeCrossed/index.ts | 2 +- .../molecules/BottomBarIcon/BottomBarIcon.style.tsx | 4 ++-- .../molecules/BottomBarIcon/BottomBarIcon.tsx | 4 +++- src/components/molecules/Button/Button.tsx | 2 -- src/components/molecules/Chip/Chip.style.tsx | 2 +- src/components/molecules/ChipList/ChipList.style.tsx | 2 +- .../DateNumberWithStatus/DateNumberWithStatus.tsx | 4 ++-- .../DynamicBottomBar.stories.tsx | 6 ++---- .../DynamicBottomScrollBar/DynamicBottomScrollBar.tsx | 4 ++-- src/components/molecules/EditBar/EditBar.tsx | 4 ++-- .../FancyColorOutput/FancyColorOutput.stories.tsx | 1 - .../molecules/FancyColorOutput/FancyColorOutput.tsx | 1 + .../molecules/FancyContentCard/FancyContentCard.tsx | 9 ++++----- .../molecules/FancyHueSlider/FancyHueSlider.tsx | 2 +- .../molecules/FancyMiniProfile/FancyMiniProfile.tsx | 2 +- .../molecules/FancyTabSwitch/FancyTabSwitch.style.tsx | 6 +++--- .../FancyTabSwitchButton/FancyTabSwitchButton.tsx | 6 +++--- src/components/molecules/Header/Header.style.tsx | 2 +- src/components/molecules/MenuList/MenuList.style.tsx | 2 +- src/components/molecules/Modal/Modal.tsx | 4 ++-- .../molecules/NumberInput/NumberInput.styled.tsx | 5 +++-- src/components/molecules/Paginator/Paginator.tsx | 10 +++++----- .../molecules/PasswordInput/PasswordInput.tsx | 9 +++++---- .../molecules/ScalingSection/ScalingSection.tsx | 1 + .../molecules/SingleInputs/SingleInputs.style.tsx | 2 +- .../molecules/SwitchList/SwitchList.style.tsx | 5 +++-- src/components/molecules/SwitchList/SwitchList.tsx | 2 +- src/components/molecules/TabSwitch/TabSwitch.model.ts | 2 +- src/components/molecules/TabSwitch/TabSwitch.style.tsx | 7 ++++--- src/components/molecules/TabSwitch/TabSwitch.tsx | 4 ++-- src/components/molecules/TextInput/TextInput.tsx | 6 +++--- .../organisms/FancyButton/FancyButton.stories.tsx | 2 +- .../organisms/FancyButton/FancyButton.style.tsx | 4 ++-- src/components/organisms/FancyChip/FancyChip.model.ts | 1 - .../FancyCodeVerificationInput.tsx | 2 +- .../organisms/FancyDateInput/FancyDateInput.style.tsx | 2 +- .../organisms/FancyDateInput/FancyDateInput.tsx | 2 +- .../FancyDropDownMenue/FancyDropDownMenue.tsx | 2 +- .../organisms/FancyEditBar/FancyEditBar.state.tsx | 2 +- .../organisms/FancyNumberInput/FancyNumberInput.tsx | 2 +- src/components/organisms/FancyRadio/FancyRadio.tsx | 2 +- .../organisms/FancyRangeSlider/FancyRangeSlider.tsx | 2 +- .../organisms/FancyToastMessage/FancyToastMessage.tsx | 2 +- ...dingForComponent.ts => generatepaddingComponent.ts} | 2 ++ .../generatePaddingForComponent/index.ts | 1 + src/interface/IStatus.ts | 4 +--- src/interface/index.ts | 1 + src/utils/hooks/useSlider/index.ts | 1 + 72 files changed, 115 insertions(+), 112 deletions(-) create mode 100644 src/components/atoms/PageNumberList/index.ts create mode 100644 src/components/atoms/SwitchActiveIndicator/index.ts delete mode 100644 src/components/organisms/FancyChip/FancyChip.model.ts rename src/design/designFunctions/generatePaddingForComponent/{generatepaddingForComponent.ts => generatepaddingComponent.ts} (92%) create mode 100644 src/design/designFunctions/generatePaddingForComponent/index.ts create mode 100644 src/utils/hooks/useSlider/index.ts diff --git a/lib/index.ts b/lib/index.ts index 8b6f18a9e..02be54531 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -42,6 +42,7 @@ export { default as FancyBar } from '@/components/atoms/FancyBox/FancyBox'; export { default as ActionWrapper } from '@/components/atoms/ActionWrapper/ActionWrapper'; export { default as RawRadio } from '@/components/atoms/RawRadio/RawRadio'; export { default as LoadingSVGArrows } from '@/components/atoms/LoadingSVGArrows/LoadingSVGArrows'; +export { default as SwitchActiveIndicator } from '@/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator'; // ---------- Molecules ------- // export { default as DateInput } from '@/components/molecules/DateInput/DateInput'; diff --git a/src/components/atoms/ColorIndicator/ColorIndicator.tsx b/src/components/atoms/ColorIndicator/ColorIndicator.tsx index 5f0b1045d..0fef8932e 100644 --- a/src/components/atoms/ColorIndicator/ColorIndicator.tsx +++ b/src/components/atoms/ColorIndicator/ColorIndicator.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import Color from 'color'; import { Indicator, WrapperIndicator } from './ColorIndicator.style'; diff --git a/src/components/atoms/FancyBox/FancyBox.style.tsx b/src/components/atoms/FancyBox/FancyBox.style.tsx index 839666009..f175de6f9 100644 --- a/src/components/atoms/FancyBox/FancyBox.style.tsx +++ b/src/components/atoms/FancyBox/FancyBox.style.tsx @@ -1,6 +1,6 @@ import { styled } from 'styled-components'; -import generateThemeForCard from '@/design/designFunctions/generateThemeForCard/generateThemeForCard'; +import { generateThemeForCard } from '@/design/designFunctions/generateThemeForCard'; import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TTheme } from '@/interface/TTheme'; diff --git a/src/components/atoms/FancyCard/Card.model.ts b/src/components/atoms/FancyCard/Card.model.ts index 140c97de9..2ad67dc68 100644 --- a/src/components/atoms/FancyCard/Card.model.ts +++ b/src/components/atoms/FancyCard/Card.model.ts @@ -1,4 +1,4 @@ -import { IRoundedEdges } from '../../../design/designFunctions/edgeCalculation/edgeCalculation'; +import { IRoundedEdges } from '@/design/designFunctions/edgeCalculation/edgeCalculation'; import { TLayer } from '@/interface/TLayer'; import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; import { TThemeTypes } from '@/interface/TThemeTypes'; diff --git a/src/components/atoms/FancyCard/FancyCard.style.tsx b/src/components/atoms/FancyCard/FancyCard.style.tsx index 594be1018..d1fa30f06 100644 --- a/src/components/atoms/FancyCard/FancyCard.style.tsx +++ b/src/components/atoms/FancyCard/FancyCard.style.tsx @@ -1,9 +1,9 @@ import { styled } from 'styled-components'; import { StyledCardProps } from './Card.model'; -import IStyledPrefixAndOmiter from '../../../interface/IStyledPrefixAndOmiter.model'; -import { spacingPx } from '../../../design/theme/designSizes'; -import edgeCalculation from '../../../design/designFunctions/edgeCalculation/edgeCalculation'; +import IStyledPrefixAndOmiter from '@/interface/IStyledPrefixAndOmiter.model'; +import { spacingPx } from '@/design/theme/designSizes'; +import edgeCalculation from '@/design/designFunctions/edgeCalculation/edgeCalculation'; import { boxShadow } from '@/design/designFunctions/shadows/shadows'; import { getColorsForComponent } from '@/design/designFunctions/colorCalculatorForComponent'; diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx index f472ec399..99cdd78ab 100644 --- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx +++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { Placeholder, StyledImage } from './FancyProfilePicture.style'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.model.ts b/src/components/atoms/FancySVGAtom/FancySVGAtom.model.ts index 0dd836ad3..43c613dd0 100644 --- a/src/components/atoms/FancySVGAtom/FancySVGAtom.model.ts +++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.model.ts @@ -1,5 +1,6 @@ import { CSSProp } from 'styled-components'; -import IStyledPrefixAndOmiter from '../../../interface/IStyledPrefixAndOmiter.model'; + +import IStyledPrefixAndOmiter from '@/interface/IStyledPrefixAndOmiter.model'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx index 84cddf9fb..be2e20f6b 100644 --- a/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx +++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.style.tsx @@ -1,7 +1,8 @@ +import { styled } from 'styled-components'; + import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; import { TThemeTypes } from '@/interface/TThemeTypes'; -import { styled } from 'styled-components'; import { IStyledSVGAtom, sizes } from './FancySVGAtom.model'; interface ICalcIconColor { diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx index e2ced20cc..079c970ef 100644 --- a/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx +++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { ISVGAtomProps } from './FancySVGAtom.model'; import { StyledSVG } from './FancySVGAtom.style'; diff --git a/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx index f05d6f0ea..06e651dcb 100644 --- a/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx +++ b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.style.tsx @@ -1,6 +1,6 @@ -import { TTheme } from '@/interface/TTheme'; import { css, styled } from 'styled-components'; +import { TTheme } from '@/interface/TTheme'; import { textShadow } from '@/design/designFunctions/shadows/shadows'; // Define the gradient options for the overlay diff --git a/src/components/atoms/InputLabel/InputLabel.stories.tsx b/src/components/atoms/InputLabel/InputLabel.stories.tsx index 896ac2e67..453a80037 100644 --- a/src/components/atoms/InputLabel/InputLabel.stories.tsx +++ b/src/components/atoms/InputLabel/InputLabel.stories.tsx @@ -1,6 +1,6 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; -import themeStore from '../../../design/theme/themeStore/themeStore'; +import { themeStore } from '@/design/theme/themeStore'; // Import the component to be tested import InputLabel from './InputLabel'; diff --git a/src/components/atoms/InputUnderline/InputUnderline.tsx b/src/components/atoms/InputUnderline/InputUnderline.tsx index 149cb2b3c..5f636a885 100644 --- a/src/components/atoms/InputUnderline/InputUnderline.tsx +++ b/src/components/atoms/InputUnderline/InputUnderline.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { styled, css } from 'styled-components'; -import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TThemeTypes } from '@/interface/TThemeTypes'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; + // Define the props for the FancyInputUnderline component interface IFancyUnderline { colorState?: 'error' | 'active' | 'default'; diff --git a/src/components/atoms/ListDivider/ListDivider.style.tsx b/src/components/atoms/ListDivider/ListDivider.style.tsx index 89794050f..9880a5868 100644 --- a/src/components/atoms/ListDivider/ListDivider.style.tsx +++ b/src/components/atoms/ListDivider/ListDivider.style.tsx @@ -1,9 +1,10 @@ import { css, styled } from 'styled-components'; -import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { TTheme } from '@/interface/TTheme'; import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { IListDivider } from './ListDivider.model'; -import { TTheme } from '@/interface/TTheme'; + +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; // only a sepeation line type TStyledPrefixAndOmitter = IStyledPrefixAndPicker & { theme: TTheme }; diff --git a/src/components/atoms/ListDivider/ListDivider.tsx b/src/components/atoms/ListDivider/ListDivider.tsx index ae9f0cac5..5bc744c35 100644 --- a/src/components/atoms/ListDivider/ListDivider.tsx +++ b/src/components/atoms/ListDivider/ListDivider.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import { IListDivider } from './ListDivider.model'; +import { FancyContent } from '@/components/molecules/FancyContent'; import { StyledI, StyledTextDiv } from './ListDivider.style'; -import FancyContent from '../../molecules/FancyContent/FancyContent'; -import { IListDivider } from './ListDivider.model'; // --------------------------------------------------------------------------- // // ------- A Divider that displays only a line or line with informations ----- // diff --git a/src/components/atoms/LoadingSVGArrows/LoadingSVGArrows.tsx b/src/components/atoms/LoadingSVGArrows/LoadingSVGArrows.tsx index 2fce1f18d..45fde718b 100644 --- a/src/components/atoms/LoadingSVGArrows/LoadingSVGArrows.tsx +++ b/src/components/atoms/LoadingSVGArrows/LoadingSVGArrows.tsx @@ -1,8 +1,8 @@ import React from 'react'; import styled, { keyframes } from 'styled-components'; -import SVGLoadingArrows from '../../icons/SVGLoadingArrows/SVGLoadingArrows'; -import { ISVGAtomProps } from '../FancySVGAtom/FancySVGAtom.model'; +import { SVGLoadingArrows } from '@/components/icons/SVGLoadingArrows'; +import { ISVGAtomProps } from '@/components/atoms/FancySVGAtom/FancySVGAtom.model'; interface ILoadingSVGArrowsProps { isLoading?: boolean; diff --git a/src/components/atoms/MenuItem/MenuItem.style.tsx b/src/components/atoms/MenuItem/MenuItem.style.tsx index 74e4813fb..4ef7e4786 100644 --- a/src/components/atoms/MenuItem/MenuItem.style.tsx +++ b/src/components/atoms/MenuItem/MenuItem.style.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; -import { getBackgroundColor, getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { getBackgroundColor, getTextColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; type StyledMenuProps = { $themeType?: TThemeTypes; diff --git a/src/components/atoms/PageNumberList/PageNumberList.style.tsx b/src/components/atoms/PageNumberList/PageNumberList.style.tsx index 33e91b0bd..c10948c33 100644 --- a/src/components/atoms/PageNumberList/PageNumberList.style.tsx +++ b/src/components/atoms/PageNumberList/PageNumberList.style.tsx @@ -1,6 +1,7 @@ import { styled } from 'styled-components'; + import { TTheme } from '@/interface/TTheme'; -import simpleColorTransition from '../../../design/designFunctions/simpleColorTransition/simpleTransition'; +import { simpleColorTransition } from '@/design/designFunctions/simpleColorTransition'; // Define a styled component for the button wrapper export const ButtonWrapper = styled.div<{ $isActive: boolean; theme: TTheme }>` diff --git a/src/components/atoms/PageNumberList/PageNumberList.tsx b/src/components/atoms/PageNumberList/PageNumberList.tsx index 13dddfb0f..dfece9c70 100644 --- a/src/components/atoms/PageNumberList/PageNumberList.tsx +++ b/src/components/atoms/PageNumberList/PageNumberList.tsx @@ -1,4 +1,4 @@ -import { FancyButton } from '../../organisms/FancyButton'; +import { FancyButton } from '@/components/organisms/FancyButton'; import { ButtonWrapper, Wrapper } from './PageNumberList.style'; import { generateNumbers } from './utils/generateNumbers'; diff --git a/src/components/atoms/PageNumberList/index.ts b/src/components/atoms/PageNumberList/index.ts new file mode 100644 index 000000000..74779e372 --- /dev/null +++ b/src/components/atoms/PageNumberList/index.ts @@ -0,0 +1 @@ +export { default as PageNumberList } from './PageNumberList'; diff --git a/src/components/atoms/PasswordEye/PasswordEye.tsx b/src/components/atoms/PasswordEye/PasswordEye.tsx index ee82aa198..a185732f7 100644 --- a/src/components/atoms/PasswordEye/PasswordEye.tsx +++ b/src/components/atoms/PasswordEye/PasswordEye.tsx @@ -1,8 +1,6 @@ -import React from 'react'; - -import SVGEyeCrossed from '../../icons/SVGEyeCrossed/SVGEyeCrossed'; -import SVGEyeOpen from '../../icons/SVGEyeOpen/SVGEyeOpen'; -import FancySVGAtom from '../FancySVGAtom/FancySVGAtom'; +import { SVGEyeCrossed } from '@/components/icons/SVGEyeCrossed'; +import { SVGEyeOpen } from '@/components/icons/SVGEyeOpen'; +import { FancySVGAtom } from '@/components/atoms/FancySVGAtom'; interface IPasswordEye { isShow?: boolean; diff --git a/src/components/atoms/ProgressBar/ProgressBar.tsx b/src/components/atoms/ProgressBar/ProgressBar.tsx index 4b64c9561..4cadaac81 100644 --- a/src/components/atoms/ProgressBar/ProgressBar.tsx +++ b/src/components/atoms/ProgressBar/ProgressBar.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; import { ProgressBarContainer, ProgressBarFill } from './ProgressBar.style'; diff --git a/src/components/atoms/RawRadio/RawRadio.style.tsx b/src/components/atoms/RawRadio/RawRadio.style.tsx index 2ba17cdb5..41f40b46d 100644 --- a/src/components/atoms/RawRadio/RawRadio.style.tsx +++ b/src/components/atoms/RawRadio/RawRadio.style.tsx @@ -1,5 +1,6 @@ import { styled } from 'styled-components'; -import { TTheme } from '../../../interface/TTheme'; + +import { TTheme } from '@/interface/TTheme'; export const RadioWrapper = styled.div` position: relative; diff --git a/src/components/atoms/RawSlider/RawSlider.style.tsx b/src/components/atoms/RawSlider/RawSlider.style.tsx index a8b2fe806..31736aa6c 100644 --- a/src/components/atoms/RawSlider/RawSlider.style.tsx +++ b/src/components/atoms/RawSlider/RawSlider.style.tsx @@ -1,9 +1,9 @@ import { styled, css } from 'styled-components'; -import { boxShadow } from '../../../design/designFunctions/shadows/shadows'; +import { boxShadow } from '@/design/designFunctions/shadows/shadows'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; // eslint-disable-next-line react-refresh/only-export-components diff --git a/src/components/atoms/SwitchActiveIndicator/index.ts b/src/components/atoms/SwitchActiveIndicator/index.ts new file mode 100644 index 000000000..4f2798043 --- /dev/null +++ b/src/components/atoms/SwitchActiveIndicator/index.ts @@ -0,0 +1 @@ +export { default as SwitchActiveIndicator } from './SwitchActiveIndicator'; diff --git a/src/components/icons/SVGEyeCrossed/index.ts b/src/components/icons/SVGEyeCrossed/index.ts index 431e07dd6..420150f9d 100644 --- a/src/components/icons/SVGEyeCrossed/index.ts +++ b/src/components/icons/SVGEyeCrossed/index.ts @@ -1 +1 @@ -export { default } from './SVGEyeCrossed'; +export { default as SVGEyeCrossed } from './SVGEyeCrossed'; diff --git a/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx b/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx index 8b0ba9fae..502d679c7 100644 --- a/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx +++ b/src/components/molecules/BottomBarIcon/BottomBarIcon.style.tsx @@ -2,8 +2,8 @@ import { styled } from 'styled-components'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; -import { disabledStyle } from '../../../design/designFunctions/disabledStyle/disableStyle'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { disabledStyle } from '@/design/designFunctions/disabledStyle/disableStyle'; import { TTheme } from '@/interface/TTheme'; interface IContentWrapper { diff --git a/src/components/molecules/BottomBarIcon/BottomBarIcon.tsx b/src/components/molecules/BottomBarIcon/BottomBarIcon.tsx index 35fb3aea0..2b1792e35 100644 --- a/src/components/molecules/BottomBarIcon/BottomBarIcon.tsx +++ b/src/components/molecules/BottomBarIcon/BottomBarIcon.tsx @@ -1,7 +1,9 @@ import React from 'react'; + import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; -import FancyContent from '../FancyContent/FancyContent'; + +import { FancyContent } from '@/components/molecules/FancyContent'; import { ContentWrapper } from './BottomBarIcon.style'; interface IBottomBarIconProps { diff --git a/src/components/molecules/Button/Button.tsx b/src/components/molecules/Button/Button.tsx index 005a49da6..b3536ed6e 100644 --- a/src/components/molecules/Button/Button.tsx +++ b/src/components/molecules/Button/Button.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import { StyledButton } from './Button.style'; import { IButton } from './Button.model'; diff --git a/src/components/molecules/Chip/Chip.style.tsx b/src/components/molecules/Chip/Chip.style.tsx index 772ecd3a8..6686ad36b 100644 --- a/src/components/molecules/Chip/Chip.style.tsx +++ b/src/components/molecules/Chip/Chip.style.tsx @@ -1,6 +1,6 @@ import { css, styled } from 'styled-components'; -import generateThemeDesignForComponent from '@/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent'; +import { generateThemeDesignForComponent } from '@/design/designFunctions/generateThemeDesignForComponent'; import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model'; import { TTheme } from '@/interface/TTheme'; diff --git a/src/components/molecules/ChipList/ChipList.style.tsx b/src/components/molecules/ChipList/ChipList.style.tsx index 480d61d98..bac3df642 100644 --- a/src/components/molecules/ChipList/ChipList.style.tsx +++ b/src/components/molecules/ChipList/ChipList.style.tsx @@ -1,6 +1,6 @@ import { css, styled } from 'styled-components'; -import themeStore from '@/design/theme/themeStore/themeStore'; +import { themeStore } from '@/design/theme/themeStore'; import { TUiColorsSystemMessage } from '@/interface/TUiColorsSystemMessage'; import { generateSystemIndicatorStyle } from '@/design/designFunctions/generateSystemIndicatorStyle'; diff --git a/src/components/molecules/DateNumberWithStatus/DateNumberWithStatus.tsx b/src/components/molecules/DateNumberWithStatus/DateNumberWithStatus.tsx index 1b61a6e9e..dde4547b5 100644 --- a/src/components/molecules/DateNumberWithStatus/DateNumberWithStatus.tsx +++ b/src/components/molecules/DateNumberWithStatus/DateNumberWithStatus.tsx @@ -1,7 +1,7 @@ import { styled } from 'styled-components'; -import DateNumberAtom from '@/components/atoms/DateNumberAtom/DateNumberAtom'; -import AvilableDot from '@/components/atoms/AvilableDot/AvailableDot'; +import { DateNumberAtom } from '@/components/atoms/DateNumberAtom'; +import { AvilableDot } from '@/components/atoms/AvilableDot'; import { IAvailableDot } from '@/components/atoms/AvilableDot'; import { TLayer } from '@/interface/TLayer'; diff --git a/src/components/molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx b/src/components/molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx index 70b5020b2..38d81f9e1 100644 --- a/src/components/molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx +++ b/src/components/molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx @@ -1,10 +1,8 @@ -import React from 'react'; - import type { Meta, StoryObj } from '@storybook/react'; import DynamicBottomScrollBar from './DynamicBottomScrollBar'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; -import { FancyBottomBarIcon } from '../../templates/FancyBottomBarIcon'; +import { SVGCheckMark } from '@/components/icons/SVGCheckMark'; +import { FancyBottomBarIcon } from '@/components/templates/FancyBottomBarIcon'; const meta = { title: 'components/Molecules/DynamicBottomScrollBar', diff --git a/src/components/molecules/DynamicBottomScrollBar/DynamicBottomScrollBar.tsx b/src/components/molecules/DynamicBottomScrollBar/DynamicBottomScrollBar.tsx index 2085e92c7..4d7130e8a 100644 --- a/src/components/molecules/DynamicBottomScrollBar/DynamicBottomScrollBar.tsx +++ b/src/components/molecules/DynamicBottomScrollBar/DynamicBottomScrollBar.tsx @@ -1,6 +1,6 @@ import { ReactNode, useEffect } from 'react'; -import ScollAbleBar from '@/components/atoms/ScrollableBar/ScrollableBar'; +import { ScrollableBar } from '@/components/atoms/ScrollableBar'; // Define types for the component type TDynamicScrollBarProps = { @@ -21,5 +21,5 @@ export default function DynamicBottomScrollBar(props: TDynamicScrollBarProps) { }, []); // Render the component - return <>{scrollable && activateScrollbar ? {children} : children}; + return <>{scrollable && activateScrollbar ? {children} : children}; } diff --git a/src/components/molecules/EditBar/EditBar.tsx b/src/components/molecules/EditBar/EditBar.tsx index 8ef09b917..a7a51ff88 100644 --- a/src/components/molecules/EditBar/EditBar.tsx +++ b/src/components/molecules/EditBar/EditBar.tsx @@ -14,10 +14,10 @@ import { styled } from 'styled-components'; //the second is for the settings import FancyBottomBarIcon, { IFancyBottomBarIcon } from '@/components/templates/FancyBottomBarIcon/FancyBottomBarIcon'; -import EditBarModal from '@/components/atoms/EditBarModal/EditBarModal'; +import { EditBarModal } from '@/components/atoms/EditBarModal'; import { DynamicBottomScrollBar } from '@/components/molecules/DynamicBottomScrollBar'; -import themeStore from '@/design/theme/themeStore/themeStore'; +import { themeStore } from '@/design/theme/themeStore'; const Wrapper = styled.div` position: fixed; diff --git a/src/components/molecules/FancyColorOutput/FancyColorOutput.stories.tsx b/src/components/molecules/FancyColorOutput/FancyColorOutput.stories.tsx index 66d0df8a2..741a77bd1 100644 --- a/src/components/molecules/FancyColorOutput/FancyColorOutput.stories.tsx +++ b/src/components/molecules/FancyColorOutput/FancyColorOutput.stories.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import Color from 'color'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/src/components/molecules/FancyColorOutput/FancyColorOutput.tsx b/src/components/molecules/FancyColorOutput/FancyColorOutput.tsx index c53370cce..f0f84a1e0 100644 --- a/src/components/molecules/FancyColorOutput/FancyColorOutput.tsx +++ b/src/components/molecules/FancyColorOutput/FancyColorOutput.tsx @@ -1,4 +1,5 @@ import Color from 'color'; + import { useEffect, useMemo, useState } from 'react'; import { FancyButton } from '@/components/organisms/FancyButton'; diff --git a/src/components/molecules/FancyContentCard/FancyContentCard.tsx b/src/components/molecules/FancyContentCard/FancyContentCard.tsx index f4018a22b..20d9524e5 100644 --- a/src/components/molecules/FancyContentCard/FancyContentCard.tsx +++ b/src/components/molecules/FancyContentCard/FancyContentCard.tsx @@ -1,6 +1,7 @@ +import { styled } from 'styled-components'; + import { FancyCard } from '@/components/atoms/FancyCard'; import { Typography } from '@/components/atoms/Typography'; -import { styled } from 'styled-components'; interface IContentCardProps { image?: string; @@ -17,8 +18,6 @@ const ContentWrapper = styled.div` text-align: left; `; -const ImageWrapper = styled.div``; - const InnerCard = styled.div` display: flex; flex-wrap: wrap; @@ -30,9 +29,9 @@ export default function FancyContentCard(props: IContentCardProps) { return ( - +
product - +
{title} diff --git a/src/components/molecules/FancyHueSlider/FancyHueSlider.tsx b/src/components/molecules/FancyHueSlider/FancyHueSlider.tsx index 7894fab5b..83495e1c4 100644 --- a/src/components/molecules/FancyHueSlider/FancyHueSlider.tsx +++ b/src/components/molecules/FancyHueSlider/FancyHueSlider.tsx @@ -2,7 +2,7 @@ import Color from 'color'; import useSlider from '@/utils/hooks/useSlider/useSilder'; import { SliderMarker } from '@/components/atoms/SliderMarker'; -import ColorIndicator from '@/components/atoms/ColorIndicator/ColorIndicator'; +import { ColorIndicator } from '@/components/atoms/ColorIndicator'; import { SliderContainer, SliderWrapper } from './FancyHueSlider.style'; import { colorToPositionHue, positionToColorHue } from './utils/calcPosition'; diff --git a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx index 9979df99a..1daaef464 100644 --- a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx +++ b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx @@ -1,4 +1,4 @@ -import FancyProfilePicture from '@/components/atoms/FancyProfilePicture/FancyProfilePicture'; +import { FancyProfilePicture } from '@/components/atoms/FancyProfilePicture'; import { Typography } from '@/components/atoms/Typography'; import { TTextAlignLR } from '@/interface/TTextAlignLR'; diff --git a/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx b/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx index 771dbf3b5..27e7d2a3a 100644 --- a/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx +++ b/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx @@ -1,12 +1,12 @@ import { styled } from 'styled-components'; -import { borderRadius, spacingPx } from '../../../design/theme/designSizes'; +import { borderRadius, spacingPx } from '@/design/theme/designSizes'; import { TThemeTypes } from '@/interface/TThemeTypes'; -import { tabSwitchSizes } from '../TabSwitch/TabSwitch.style'; +import { tabSwitchSizes } from '@/components/molecules/TabSwitch/TabSwitch.style'; import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { TSpacings } from '../../../interface/TSpacings'; +import { TSpacings } from '@/interface/TSpacings'; // Define the interface for the styled-component export interface IFancyTabSwitchStyle { diff --git a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx index cacf69bb1..b763f5beb 100644 --- a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx +++ b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx @@ -1,10 +1,10 @@ import React, { HTMLAttributes, useId } from 'react'; -import Typography from '../../atoms/Typography/Typography'; -import FancyContent from '../FancyContent/FancyContent'; +import { Typography } from '@/components/atoms/Typography'; +import { FancyContent } from '@/components/molecules/FancyContent'; import { ITabSwitchButtonProps } from './FancyTabSwitchButton.model'; import { SwitchButtonStyle } from './FancyTabSwitchButton.style'; -import { leftRightToFlex } from '../../../utils/functions/leftRightToFlex'; +import { leftRightToFlex } from '@/utils/functions/leftRightToFlex'; // ------------------------------------------------------------------ // // ------------- main component for the tab (li item) --------------- // diff --git a/src/components/molecules/Header/Header.style.tsx b/src/components/molecules/Header/Header.style.tsx index 94261c1ee..882febb54 100644 --- a/src/components/molecules/Header/Header.style.tsx +++ b/src/components/molecules/Header/Header.style.tsx @@ -1,6 +1,6 @@ import { CSSProp, styled } from 'styled-components'; -import generateThemeForCard from '@/design/designFunctions/generateThemeForCard/generateThemeForCard'; +import { generateThemeForCard } from '@/design/designFunctions/generateThemeForCard'; import { TTheme } from '@/interface/TTheme'; import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; diff --git a/src/components/molecules/MenuList/MenuList.style.tsx b/src/components/molecules/MenuList/MenuList.style.tsx index c2058d3da..c1ed61254 100644 --- a/src/components/molecules/MenuList/MenuList.style.tsx +++ b/src/components/molecules/MenuList/MenuList.style.tsx @@ -1,6 +1,6 @@ import { styled } from 'styled-components'; -import generateThemeForCard from '@/design/designFunctions/generateThemeForCard/generateThemeForCard'; +import { generateThemeForCard } from '@/design/designFunctions/generateThemeForCard'; import { MenuListProps } from './MenuList'; import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndPicker.model'; diff --git a/src/components/molecules/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx index 692e58609..0ffc18f2d 100644 --- a/src/components/molecules/Modal/Modal.tsx +++ b/src/components/molecules/Modal/Modal.tsx @@ -1,7 +1,7 @@ import React, { ReactNode, useEffect, useState } from 'react'; -import SimpleDialog from '../../atoms/SimpleDialog/SimpleDialog'; -import BackDrop from '../../atoms/BackDrop/BackDrop'; +import { SimpleDialog } from '@/components/atoms/SimpleDialog'; +import { BackDrop } from '@/components/atoms/BackDrop'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; diff --git a/src/components/molecules/NumberInput/NumberInput.styled.tsx b/src/components/molecules/NumberInput/NumberInput.styled.tsx index 847902dfb..a9d093013 100644 --- a/src/components/molecules/NumberInput/NumberInput.styled.tsx +++ b/src/components/molecules/NumberInput/NumberInput.styled.tsx @@ -1,6 +1,7 @@ import { styled } from 'styled-components'; -import RawInput from '../../atoms/RawInput/RawInput'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; + +import { RawInput } from '@/components/atoms/RawInput'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { INumberInput } from './NumberInput'; type IStyledNumberInput = IStyledPrefixAndPicker; diff --git a/src/components/molecules/Paginator/Paginator.tsx b/src/components/molecules/Paginator/Paginator.tsx index c39d88706..c2237b7d5 100644 --- a/src/components/molecules/Paginator/Paginator.tsx +++ b/src/components/molecules/Paginator/Paginator.tsx @@ -1,11 +1,11 @@ -import React, { useMemo } from 'react'; +import { useMemo } from 'react'; -import SVGChevronLeft from '../../icons/SVGChevronLeft/SVGChevronLeft'; -import SVGChevronRight from '../../icons/SVGChevronRight/SVGChevronRight'; +import { SVGChevronLeft } from '@/components/icons/SVGChevronLeft'; +import { SVGChevronRight } from '@/components/icons/SVGChevronRight'; -import FancyButton from '../../organisms/FancyButton/FancyButton'; +import { FancyButton } from '@/components/organisms/FancyButton'; import { IconWrapper, NumberList, StyledPaginator } from './Paginator.style'; -import PageNumberList from '../../atoms/PageNumberList/PageNumberList'; +import { PageNumberList } from '@/components/atoms/PageNumberList'; import { TThemeTypes } from '@/interface/TThemeTypes'; // Define the props for the Paginator component diff --git a/src/components/molecules/PasswordInput/PasswordInput.tsx b/src/components/molecules/PasswordInput/PasswordInput.tsx index b7dff73da..65394f987 100644 --- a/src/components/molecules/PasswordInput/PasswordInput.tsx +++ b/src/components/molecules/PasswordInput/PasswordInput.tsx @@ -1,14 +1,15 @@ -import React, { InputHTMLAttributes, useState } from 'react'; +import { InputHTMLAttributes, useState } from 'react'; import { styled } from 'styled-components'; -import RawInput from '../../atoms/RawInput/RawInput'; -import PasswordEye from '../../atoms/PasswordEye/PasswordEye'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; import { TTextAlignLC } from '@/interface/TTextAlignLC'; +import { RawInput } from '@/components/atoms/RawInput'; +import { PasswordEye } from '@/components/atoms/PasswordEye'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; + const WrapperEye = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` position: absolute; bottom: 6px; diff --git a/src/components/molecules/ScalingSection/ScalingSection.tsx b/src/components/molecules/ScalingSection/ScalingSection.tsx index 724fb79a9..81b8ca797 100644 --- a/src/components/molecules/ScalingSection/ScalingSection.tsx +++ b/src/components/molecules/ScalingSection/ScalingSection.tsx @@ -1,5 +1,6 @@ import React, { TouchEvent } from 'react'; import { styled } from 'styled-components'; + import { SwipeUpDash } from '@/components/atoms/SwipeUpDash'; // --------------------------------------------------------------------------- // diff --git a/src/components/molecules/SingleInputs/SingleInputs.style.tsx b/src/components/molecules/SingleInputs/SingleInputs.style.tsx index 32d74dbed..ab333597f 100644 --- a/src/components/molecules/SingleInputs/SingleInputs.style.tsx +++ b/src/components/molecules/SingleInputs/SingleInputs.style.tsx @@ -1,6 +1,6 @@ import { styled } from 'styled-components'; -import IStatus from '../../../interface/IStatus'; +import { IStatus } from '@/interface/IStatus'; import { TTheme } from '@/interface/TTheme'; interface IInputWrapper { diff --git a/src/components/molecules/SwitchList/SwitchList.style.tsx b/src/components/molecules/SwitchList/SwitchList.style.tsx index b7d2ab820..f0407d27d 100644 --- a/src/components/molecules/SwitchList/SwitchList.style.tsx +++ b/src/components/molecules/SwitchList/SwitchList.style.tsx @@ -1,7 +1,8 @@ import { styled, CSSProp } from 'styled-components'; -import ULRaw from '../../atoms/RawUL/RawUL'; -export const StyledList = styled(ULRaw)<{ $externalStyle?: CSSProp; $direction?: 'horizontal' | 'vertical' }>` +import { RawUL } from '@/components/atoms/RawUL'; + +export const StyledList = styled(RawUL)<{ $externalStyle?: CSSProp; $direction?: 'horizontal' | 'vertical' }>` display: flex; flex-direction: ${({ $direction }) => ($direction === 'vertical' ? 'column' : 'row')}; justify-content: space-evenly; diff --git a/src/components/molecules/SwitchList/SwitchList.tsx b/src/components/molecules/SwitchList/SwitchList.tsx index d219f3d5f..5bf4c65cc 100644 --- a/src/components/molecules/SwitchList/SwitchList.tsx +++ b/src/components/molecules/SwitchList/SwitchList.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { CSSProp } from 'styled-components'; -import SwitchActiveIndicator, { IActiveSwitchIndicator } from '../../atoms/SwitchActiveIndicator/SwitchActiveIndicator'; +import SwitchActiveIndicator, { IActiveSwitchIndicator } from '@/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator'; import { ItemWrapper, StyledList } from './SwitchList.style'; type TSwitchActiveIndicator = Omit; diff --git a/src/components/molecules/TabSwitch/TabSwitch.model.ts b/src/components/molecules/TabSwitch/TabSwitch.model.ts index 0c55d11a2..23b0b3ec2 100644 --- a/src/components/molecules/TabSwitch/TabSwitch.model.ts +++ b/src/components/molecules/TabSwitch/TabSwitch.model.ts @@ -2,7 +2,7 @@ import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; import { ITabSwitchDetailsLabelIcon, ITabSwitchDetailsChildren } from '../FancyTabSwitchButton/FancyTabSwitchButton.model'; -import { TSpacings } from '../../../interface/TSpacings'; +import { TSpacings } from '@/interface/TSpacings'; export interface ITabSwitchProps { wide?: boolean; diff --git a/src/components/molecules/TabSwitch/TabSwitch.style.tsx b/src/components/molecules/TabSwitch/TabSwitch.style.tsx index cf2e182be..5923fb332 100644 --- a/src/components/molecules/TabSwitch/TabSwitch.style.tsx +++ b/src/components/molecules/TabSwitch/TabSwitch.style.tsx @@ -1,12 +1,13 @@ import { styled } from 'styled-components'; -import { borderRadius, spacingPx } from '../../../design/theme/designSizes'; +import { borderRadius, spacingPx } from '@/design/theme/designSizes'; +import { themeStore } from '@/design/theme/themeStore'; + import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; import { TThemeTypes } from '@/interface/TThemeTypes'; -import { TSpacings } from '../../../interface/TSpacings'; -import themeStore from '../../../design/theme/themeStore/themeStore'; +import { TSpacings } from '@/interface/TSpacings'; // Define the different sizes for the tab switch const getSpacingFromTheme = themeStore.getState().theme.spacing; diff --git a/src/components/molecules/TabSwitch/TabSwitch.tsx b/src/components/molecules/TabSwitch/TabSwitch.tsx index bb5fe6a3b..795fc4dcc 100644 --- a/src/components/molecules/TabSwitch/TabSwitch.tsx +++ b/src/components/molecules/TabSwitch/TabSwitch.tsx @@ -2,8 +2,8 @@ import React, { useRef, useState } from 'react'; import { ItemWrapper, ULButtonSwitchList, tabSwitchSizes } from './TabSwitch.style'; import FancyTabSwitchButton from '../FancyTabSwitchButton/FancyTabSwitchButton'; -import { borderRadius } from '../../../design/theme/designSizes'; -import SwitchActiveIndicator from '../../atoms/SwitchActiveIndicator/SwitchActiveIndicator'; +import { borderRadius } from '@/design/theme/designSizes'; +import { SwitchActiveIndicator } from '@/components/atoms/SwitchActiveIndicator'; import { ITabSwitchProps } from './TabSwitch.model'; // --------------------------------------------------------------------------- // diff --git a/src/components/molecules/TextInput/TextInput.tsx b/src/components/molecules/TextInput/TextInput.tsx index 00a1aa221..fd188a941 100644 --- a/src/components/molecules/TextInput/TextInput.tsx +++ b/src/components/molecules/TextInput/TextInput.tsx @@ -1,7 +1,7 @@ -import React, { InputHTMLAttributes } from 'react'; +import { InputHTMLAttributes } from 'react'; -import RawInput from '../../atoms/RawInput/RawInput'; -import { TTextAlignLC } from 'lib'; +import { RawInput } from '@/components/atoms/RawInput'; +import { TTextAlignLC } from '@/interface/TTextAlignLC'; export interface ITextInputProps extends Omit, 'type'> { value?: string | number; diff --git a/src/components/organisms/FancyButton/FancyButton.stories.tsx b/src/components/organisms/FancyButton/FancyButton.stories.tsx index c847c433e..6eedaa1e8 100644 --- a/src/components/organisms/FancyButton/FancyButton.stories.tsx +++ b/src/components/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 '../../icons/SVGChevronLeft/SVGChevronLeft'; +import { SVGChevronLeft } from '@/components/icons/SVGChevronLeft'; const meta = { component: FancyButton, diff --git a/src/components/organisms/FancyButton/FancyButton.style.tsx b/src/components/organisms/FancyButton/FancyButton.style.tsx index 18f530a65..fc3eea48f 100644 --- a/src/components/organisms/FancyButton/FancyButton.style.tsx +++ b/src/components/organisms/FancyButton/FancyButton.style.tsx @@ -1,7 +1,7 @@ import { css } from 'styled-components'; -import { generateBorderRadiusForComponent } from '../../../design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent'; -import { generateComponentPadding } from '../../../design/designFunctions/generatePaddingForComponent/generatepaddingForComponent'; +import { generateBorderRadiusForComponent } from '@/design/designFunctions/generateBorderRadiusForComponent'; +import { generateComponentPadding } from '@/design/designFunctions/generatePaddingForComponent'; import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; const generate1To1Button = ($size: 'sm' | 'md' | 'lg', $outlined?: boolean) => { diff --git a/src/components/organisms/FancyChip/FancyChip.model.ts b/src/components/organisms/FancyChip/FancyChip.model.ts deleted file mode 100644 index 32a6f4684..000000000 --- a/src/components/organisms/FancyChip/FancyChip.model.ts +++ /dev/null @@ -1 +0,0 @@ -// Define the interface for the base chip props diff --git a/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx b/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx index 2db8cda7f..6b653a203 100644 --- a/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx +++ b/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; -import SingleInputs from '@/components/molecules/SingleInputs/SingleInputs'; +import { SingleInputs } from '@/components/molecules/SingleInputs'; import { Typography } from '@/components/atoms/Typography'; import { Container, WarpperComponent, Message, MessageContainer } from './FancyCodeVerificationInput.style'; diff --git a/src/components/organisms/FancyDateInput/FancyDateInput.style.tsx b/src/components/organisms/FancyDateInput/FancyDateInput.style.tsx index a2f6175e6..626d2971d 100644 --- a/src/components/organisms/FancyDateInput/FancyDateInput.style.tsx +++ b/src/components/organisms/FancyDateInput/FancyDateInput.style.tsx @@ -1,7 +1,7 @@ import { css, styled } from 'styled-components'; import RawInput, { IRawInput } from '@/components/atoms/RawInput/RawInput'; -import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; import { TLayer } from '@/interface/TLayer'; import { IDateInputProps } from '@/components/molecules/DateInput/DateInput'; import { simpleColorTransition } from '@/design/designFunctions/simpleColorTransition'; diff --git a/src/components/organisms/FancyDateInput/FancyDateInput.tsx b/src/components/organisms/FancyDateInput/FancyDateInput.tsx index e8fcd0423..1ec7e41dc 100644 --- a/src/components/organisms/FancyDateInput/FancyDateInput.tsx +++ b/src/components/organisms/FancyDateInput/FancyDateInput.tsx @@ -1,7 +1,7 @@ import { useId, useState } from 'react'; import DateInput, { IDateInputPropsWithNativeAttrs } from '@/components/molecules/DateInput/DateInput'; -import InputWrapper from '@/components/molecules/InputWrapper/InputWrapper'; +import { InputWrapper } from '@/components/molecules/InputWrapper'; import { IInputWrapperUserInputProps } from '@/components/molecules/InputWrapper/IInputWrapper.model'; type IFancyDateInput = Omit & IDateInputPropsWithNativeAttrs; diff --git a/src/components/organisms/FancyDropDownMenue/FancyDropDownMenue.tsx b/src/components/organisms/FancyDropDownMenue/FancyDropDownMenue.tsx index ef3481f5d..8aa4f6f5d 100644 --- a/src/components/organisms/FancyDropDownMenue/FancyDropDownMenue.tsx +++ b/src/components/organisms/FancyDropDownMenue/FancyDropDownMenue.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import FancyUL, { IFancyUL } from '@/components/molecules/FancyDropDownUL/FancyDropDownUL'; import { Delay } from '@/components/shared/Delay'; diff --git a/src/components/organisms/FancyEditBar/FancyEditBar.state.tsx b/src/components/organisms/FancyEditBar/FancyEditBar.state.tsx index 5d1ef03ac..07b7eae84 100644 --- a/src/components/organisms/FancyEditBar/FancyEditBar.state.tsx +++ b/src/components/organisms/FancyEditBar/FancyEditBar.state.tsx @@ -1,5 +1,5 @@ import { create } from 'zustand'; -import { IFancyBottomBarIcon } from '../../templates/FancyBottomBarIcon/FancyBottomBarIcon'; +import { IFancyBottomBarIcon } from '@/components/templates/FancyBottomBarIcon/FancyBottomBarIcon'; import { ICategoryItem } from './EditBarItemsStructure/IEditbarObjectSturcture.model'; // --------------------------------------------------------------------------- // diff --git a/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx b/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx index 5b877a972..6821169e7 100644 --- a/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx +++ b/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx @@ -1,4 +1,4 @@ -import React, { useId, useState } from 'react'; +import { useId, useState } from 'react'; import NumberInput, { INumberInput } from '@/components/molecules/NumberInput/NumberInput'; import InputWrapper from '@/components/molecules/InputWrapper/InputWrapper'; diff --git a/src/components/organisms/FancyRadio/FancyRadio.tsx b/src/components/organisms/FancyRadio/FancyRadio.tsx index 2daa37f17..4d276fd50 100644 --- a/src/components/organisms/FancyRadio/FancyRadio.tsx +++ b/src/components/organisms/FancyRadio/FancyRadio.tsx @@ -1,6 +1,6 @@ import React, { useId } from 'react'; -import FancySelectWrapper from '@/components/molecules/FancySelectWrapper/FancySelectWrapper'; +import { FancySelectWrapper } from '@/components/molecules/FancySelectWrapper'; import { RawRadio } from '@/components/atoms/RawRadio'; export type TFancyRadioProps = Omit, 'inputElement'> & diff --git a/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx b/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx index d960c1e9a..2b0f19fc1 100644 --- a/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx +++ b/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, useId, useState } from 'react'; +import { ChangeEvent, useId, useState } from 'react'; import { RawSlider } from '@/components/atoms/RawSlider'; import { FancyNumberInput } from '@/components/organisms/FancyNumberInput'; diff --git a/src/components/organisms/FancyToastMessage/FancyToastMessage.tsx b/src/components/organisms/FancyToastMessage/FancyToastMessage.tsx index 241fd4d6a..9de0cc4c1 100644 --- a/src/components/organisms/FancyToastMessage/FancyToastMessage.tsx +++ b/src/components/organisms/FancyToastMessage/FancyToastMessage.tsx @@ -2,7 +2,7 @@ import React, { useMemo } from 'react'; import { useTransition, animated } from '@react-spring/web'; import { useFancyToastMessageStore } from './FancyToastMessage.state'; -import SingleToastMessage from '@/components/molecules/SingleToastMessage/SingleToastMessage'; +import { SingleToastMessage } from '@/components/molecules/SingleToastMessage'; import IToastMessage from '@/components/molecules/SingleToastMessage/IToastMessage.model'; import { ToastsWrapper } from './FancyToastMessage.style'; diff --git a/src/design/designFunctions/generatePaddingForComponent/generatepaddingForComponent.ts b/src/design/designFunctions/generatePaddingForComponent/generatepaddingComponent.ts similarity index 92% rename from src/design/designFunctions/generatePaddingForComponent/generatepaddingForComponent.ts rename to src/design/designFunctions/generatePaddingForComponent/generatepaddingComponent.ts index cec71429b..f59f616e9 100644 --- a/src/design/designFunctions/generatePaddingForComponent/generatepaddingForComponent.ts +++ b/src/design/designFunctions/generatePaddingForComponent/generatepaddingComponent.ts @@ -14,3 +14,5 @@ export const generateComponentPadding = (props: IGenerateComponentPadding) => { padding: ${padding[size]}; `; }; + +export default generateComponentPadding; diff --git a/src/design/designFunctions/generatePaddingForComponent/index.ts b/src/design/designFunctions/generatePaddingForComponent/index.ts new file mode 100644 index 000000000..73127f6e4 --- /dev/null +++ b/src/design/designFunctions/generatePaddingForComponent/index.ts @@ -0,0 +1 @@ +export { generateComponentPadding } from './generatepaddingComponent'; diff --git a/src/interface/IStatus.ts b/src/interface/IStatus.ts index eaae05edb..2af2c663c 100644 --- a/src/interface/IStatus.ts +++ b/src/interface/IStatus.ts @@ -1,3 +1 @@ -type IStatus = { isError: boolean; isSucceed: boolean; isLoading: boolean }; - -export default IStatus; +export type IStatus = { isError: boolean; isSucceed: boolean; isLoading: boolean }; diff --git a/src/interface/index.ts b/src/interface/index.ts index 4d87d4dab..d4ba42c73 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -16,3 +16,4 @@ export * from './TUiColorsType'; export * from './TTextAlignLR'; export * from './TTextAlignLC'; export * from './TTextAlignLRC'; +export * from './IStatus'; diff --git a/src/utils/hooks/useSlider/index.ts b/src/utils/hooks/useSlider/index.ts new file mode 100644 index 000000000..e41588ee2 --- /dev/null +++ b/src/utils/hooks/useSlider/index.ts @@ -0,0 +1 @@ +export { default as useSlider } from './useSilder';