From 7b1cca12871d041fd92c384be3f6e774722c316b Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 30 Nov 2023 17:53:35 +0100 Subject: [PATCH] add repo --- .../Atoms/ActionWrapper/ActionWrapper.mdx | 57 ------ .../Atoms/ActionWrapper/ActionWrapper.tsx | 17 -- src/Components/Atoms/ActionWrapper/index.ts | 1 - .../AlignedInputLabel.stories.tsx | 64 ------- .../AlignedInputLabel/AlignedInputLabel.tsx | 26 --- .../TalignedInputLabel.model.ts | 13 -- .../Atoms/AlignedInputLabel/index.ts | 1 - .../AnimatedInputLabel.stories.tsx | 64 ------- .../AnimatedLabel/AnimatedInputLabel.tsx | 55 ------ .../TAnimatedInputLabel.model.ts | 12 -- src/Components/Atoms/AnimatedLabel/index.ts | 1 - .../Atoms/AvilableDot/AvailableDot.tsx | 29 --- .../Atoms/AvilableDot/AvilableDot.stories.tsx | 51 ------ src/Components/Atoms/AvilableDot/index.ts | 1 - .../Atoms/BackDrop/BackDrop.stories.tsx | 32 ---- src/Components/Atoms/BackDrop/BackDrop.tsx | 35 ---- src/Components/Atoms/BackDrop/index.ts | 1 - .../CheckerBoardPattern.stories.tsx | 44 ----- .../CheckerBoardPattern.tsx | 19 -- .../Atoms/CheckerBoardPattern/index.ts | 1 - .../ColorDisplay/ColorDisplay.stories.tsx | 58 ------ .../Atoms/ColorDisplay/ColorDisplay.style.tsx | 77 -------- .../Atoms/ColorDisplay/ColorDisplay.tsx | 49 ----- src/Components/Atoms/ColorDisplay/index.ts | 1 - .../ColorIndicator/ColorIndicator.style.tsx | 39 ---- .../Atoms/ColorIndicator/ColorIndicator.tsx | 20 -- .../ColorIndicator/Colorindicator.stories.tsx | 46 ----- src/Components/Atoms/ColorIndicator/index.ts | 1 - .../ComponentAsWrapper/ComponentAsWrapper.mdx | 52 ------ .../ComponentAsWrapper/ComponentAsWrapper.tsx | 13 -- .../CustomeDropDown.tsx | 80 -------- .../DateNumberAtom/DateNumberAtom.stories.tsx | 93 ---------- .../DateNumberAtom/DateNumberAtom.style.tsx | 76 -------- .../Atoms/DateNumberAtom/DateNumberAtom.tsx | 40 ---- src/Components/Atoms/DateNumberAtom/index.ts | 1 - .../Atoms/DateOutput/DateOutput.stories.tsx | 64 ------- .../Atoms/DateOutput/DateOutput.tsx | 65 ------- src/Components/Atoms/DateOutput/index.ts | 1 - .../DropDownSelect/DropDownSelect.model.ts | 0 .../DropDownSelect/DropDownSelect.stories.tsx | 64 ------- .../DropDownSelect/DropDownSelect.style.tsx | 69 ------- .../Atoms/DropDownSelect/DropDownSelect.tsx | 54 ------ src/Components/Atoms/DropDownSelect/index.ts | 1 - .../EditBarModal/EditBarModal.stories.tsx | 61 ------ .../Atoms/EditBarModal/EditBarModal.style.tsx | 53 ------ .../Atoms/EditBarModal/EditBarModal.tsx | 16 -- .../Atoms/EditBarModal/IEditbarModal.model.ts | 8 - src/Components/Atoms/EditBarModal/index.ts | 1 - .../FancyActionWrapper.style.tsx | 18 -- .../FancyActionWrapper/FancyActionWrapper.tsx | 28 --- src/Components/Atoms/FancyBox/FancyBox.mdx | 68 ------- .../Atoms/FancyBox/FancyBox.model.ts | 16 -- .../Atoms/FancyBox/FancyBox.stories.tsx | 169 ----------------- .../Atoms/FancyBox/FancyBox.style.tsx | 16 -- src/Components/Atoms/FancyBox/FancyBox.tsx | 23 --- src/Components/Atoms/FancyBox/index.ts | 1 - src/Components/Atoms/FancyCard/Card.model.ts | 20 -- .../Atoms/FancyCard/FancyCard.style.tsx | 32 ---- src/Components/Atoms/FancyCard/FancyCard.tsx | 40 ---- .../Atoms/FancyCard/FancyCrad.stories.tsx | 76 -------- src/Components/Atoms/FancyCard/index.ts | 1 - .../Atoms/FancyImage/FancyImage.stories.tsx | 56 ------ .../Atoms/FancyImage/FancyImage.style.tsx | 9 - .../Atoms/FancyImage/FancyImage.tsx | 26 --- src/Components/Atoms/FancyImage/index.ts | 1 - .../Atoms/FancyLI/FancyLI.stories.tsx | 54 ------ src/Components/Atoms/FancyLI/FancyLI.tsx | 40 ---- src/Components/Atoms/FancyLI/index.ts | 1 - .../Atoms/FancyLine/FancyLine.stories.tsx | 74 -------- src/Components/Atoms/FancyLine/FancyLine.tsx | 49 ----- src/Components/Atoms/FancyLine/index.ts | 1 - .../FancyLoadingBar.stories.tsx | 41 ----- .../Atoms/FancyLoadingBar/FancyLoadingBar.tsx | 43 ----- src/Components/Atoms/FancyLoadingBar/index.ts | 1 - .../FancyLoadingSpinner.stories.tsx | 41 ----- .../FancyLoadingSpinner.tsx | 104 ----------- .../Atoms/FancyLoadingSpinner/index.ts | 1 - .../FancyProfilePicture.stories.tsx | 95 ---------- .../FancyProfilePicture.style.tsx | 77 -------- .../FancyProfilePicture.tsx | 59 ------ .../Atoms/FancyProfilePicture/index.ts | 1 - .../Atoms/FancySVGAtom/FancySVGAtom.model.ts | 30 --- .../FancySVGAtom/FancySVGAtom.stories.tsx | 73 -------- .../Atoms/FancySVGAtom/FancySVGAtom.tsx | 72 -------- src/Components/Atoms/FancySVGAtom/index.ts | 1 - .../Atoms/FancyVideo/FancyVideo.stories.tsx | 69 ------- .../Atoms/FancyVideo/FancyVideo.tsx | 51 ------ src/Components/Atoms/FancyVideo/index.ts | 1 - .../FancyXButton/FancyXButton.stories.tsx | 55 ------ .../Atoms/FancyXButton/FancyXButton.tsx | 52 ------ src/Components/Atoms/FancyXButton/index.ts | 1 - .../ImageVideoOverlay.stories.tsx | 55 ------ .../ImageVideoOverlay/ImageVideoOverlay.tsx | 132 ------------- .../Atoms/ImageVideoOverlay/index.ts | 1 - .../Atoms/InputLabel/InputLabel.stories.tsx | 43 ----- .../Atoms/InputLabel/InputLabel.tsx | 21 --- src/Components/Atoms/InputLabel/index.ts | 1 - .../InputUnderline/InputUnderline.stories.tsx | 77 -------- .../Atoms/InputUnderline/InputUnderline.tsx | 60 ------ src/Components/Atoms/InputUnderline/index.ts | 1 - .../Atoms/ListDivider/ListDivider.model.ts | 22 --- .../Atoms/ListDivider/ListDivider.stories.tsx | 60 ------ .../Atoms/ListDivider/ListDivider.style.tsx | 67 ------- .../Atoms/ListDivider/ListDivider.tsx | 33 ---- src/Components/Atoms/ListDivider/index.ts | 1 - .../LoadingSVGArrows.stories.tsx | 89 --------- .../LoadingSVGArrows/LoadingSVGArrows.tsx | 32 ---- .../Atoms/MenuItem/MenuItem.stories.tsx | 60 ------ .../Atoms/MenuItem/MenuItem.style.tsx | 29 --- src/Components/Atoms/MenuItem/MenuItem.tsx | 26 --- src/Components/Atoms/MenuItem/index.ts | 1 - .../PageNumberList/PageNumberList.stories.tsx | 63 ------- .../PageNumberList/PageNumberList.style.tsx | 21 --- .../Atoms/PageNumberList/PageNumberList.tsx | 77 -------- .../Atoms/PasswordEye/PasswordEye.stories.tsx | 51 ------ .../Atoms/PasswordEye/PasswordEye.tsx | 31 ---- src/Components/Atoms/PasswordEye/index.ts | 1 - .../Atoms/ProgressBar/ProgressBar.stories.tsx | 75 -------- .../Atoms/ProgressBar/ProgressBar.tsx | 60 ------ src/Components/Atoms/ProgressBar/index.ts | 1 - .../Atoms/RawCheckbox/RawCheckbox.model.ts | 7 - .../Atoms/RawCheckbox/RawCheckbox.stories.tsx | 44 ----- .../Atoms/RawCheckbox/RawCheckbox.style.tsx | 71 ------- .../Atoms/RawCheckbox/RawCheckbox.tsx | 40 ---- src/Components/Atoms/RawCheckbox/index.ts | 1 - .../Atoms/RawInput/RawInput.stories.tsx | 60 ------ src/Components/Atoms/RawInput/RawInput.tsx | 28 --- src/Components/Atoms/RawInput/index.ts | 1 - src/Components/Atoms/RawLI/RawLI.tsx | 7 - src/Components/Atoms/RawLI/index.ts | 1 - src/Components/Atoms/RawNav/RawNav.tsx | 7 - .../Atoms/RawRadio/RawRadio.stories.tsx | 58 ------ .../Atoms/RawRadio/RawRadio.style.tsx | 55 ------ src/Components/Atoms/RawRadio/RawRadio.tsx | 21 --- src/Components/Atoms/RawRadio/index.ts | 1 - .../Atoms/RawSlider/RawSlider.stories.tsx | 79 -------- .../Atoms/RawSlider/RawSlider.style.tsx | 51 ------ src/Components/Atoms/RawSlider/RawSlider.tsx | 55 ------ src/Components/Atoms/RawSlider/index.ts | 1 - src/Components/Atoms/RawUL/RawUL.tsx | 14 -- .../ScrollableBar/ScrollableBar.stories.tsx | 52 ------ .../Atoms/ScrollableBar/ScrollableBar.tsx | 29 --- .../ScrollableBar/SrollableBar.style.tsx | 11 -- src/Components/Atoms/ScrollableBar/index.ts | 1 - .../SimpleDialog/SimpleDialog.stories.tsx | 58 ------ .../Atoms/SimpleDialog/SimpleDialog.tsx | 55 ------ src/Components/Atoms/SimpleDialog/index.ts | 1 - .../SingleInputAtom.stories.tsx | 79 -------- .../Atoms/SingleInputAtom/SingleInputAtom.tsx | 69 ------- src/Components/Atoms/SingleInputAtom/index.ts | 1 - .../SliderMarker/SliderMarker.stories.tsx | 49 ----- .../Atoms/SliderMarker/SliderMarker.style.tsx | 26 --- .../Atoms/SliderMarker/SliderMarker.tsx | 21 --- src/Components/Atoms/SliderMarker/index.ts | 1 - src/Components/Atoms/Slot/Slot.stories.tsx | 59 ------ src/Components/Atoms/Slot/Slot.tsx | 39 ---- src/Components/Atoms/Slot/index.ts | 1 - .../SpeedDailMenueItem.stories.tsx | 67 ------- .../SpeedDailMenueItem.style.tsx | 77 -------- .../SpeedDialMenueItem/SpeedDailMenueItem.tsx | 41 ----- .../Atoms/SpeedDialMenueItem/index.ts | 1 - .../SwipeUpContainer.stories.tsx | 71 ------- .../SwipeUpContainer/SwipeUpContainer.tsx | 48 ----- .../Atoms/SwipeUpContainer/index.ts | 1 - .../Atoms/SwipeUpDash/SwipeUpDash.stories.tsx | 39 ---- .../Atoms/SwipeUpDash/SwipeUpDash.tsx | 33 ---- src/Components/Atoms/SwipeUpDash/index.ts | 1 - .../SwitchActiveIndicator.stories.tsx | 112 ------------ .../SwitchActiveIndicator.style.tsx | 78 -------- .../SwitchActiveIndicator.tsx | 30 --- .../utils/generateBlob.ts | 49 ----- .../utils/generateLines.ts | 39 ---- .../Atoms/Typography/Typography.stories.tsx | 60 ------ .../Atoms/Typography/Typography.tsx | 46 ----- .../TypographyFontVariations.style.tsx | 44 ----- .../Typography/TypographyStyleVariants.tsx | 88 --------- src/Components/Atoms/Typography/index.ts | 1 - .../Atoms/WeekDays/WeekDays.stories.tsx | 62 ------- src/Components/Atoms/WeekDays/WeekDays.tsx | 51 ------ src/Components/Atoms/WeekDays/index.ts | 1 - .../YearSelector/YearSelector.stories.tsx | 71 ------- .../Atoms/YearSelector/YearSelector.style.tsx | 34 ---- .../Atoms/YearSelector/YearSelector.tsx | 44 ----- src/Components/Atoms/YearSelector/index.ts | 1 - .../Molecules/BottomBar/BottomBar.stories.tsx | 49 ----- .../Molecules/BottomBar/BottomBar.style.tsx | 9 - .../Molecules/BottomBar/BottomBar.tsx | 41 ----- src/Components/Molecules/BottomBar/index.ts | 1 - .../BottomBarIcon/BottomBarIcon.stories.tsx | 73 -------- .../BottomBarIcon/BottomBarIcon.style.tsx | 42 ----- .../Molecules/BottomBarIcon/BottomBarIcon.tsx | 33 ---- .../Molecules/Button/Button.stories.tsx | 94 ---------- .../Molecules/Button/Button.style.tsx | 30 --- src/Components/Molecules/Button/Button.tsx | 49 ----- .../Molecules/Chip/Chip.stories.tsx | 87 --------- src/Components/Molecules/Chip/Chip.style.tsx | 44 ----- src/Components/Molecules/Chip/Chip.tsx | 53 ------ .../Molecules/ChipList/ChipList.stories.tsx | 73 -------- .../Molecules/ChipList/ChipList.style.tsx | 54 ------ .../Molecules/ChipList/ChipList.tsx | 28 --- .../ComponentAndActionWrapper.mdx | 86 --------- .../ComponentAndActionWrapper.tsx | 34 ---- .../Molecules/DateInput/DateInput.stories.tsx | 39 ---- .../Molecules/DateInput/DateInput.tsx | 36 ---- src/Components/Molecules/DateInput/index.ts | 1 - .../DateNumberWithStatus.stories.tsx | 95 ---------- .../DateNumberWithStatus.tsx | 49 ----- .../Molecules/DateNumberWithStatus/index.ts | 1 - .../DateOutputFromTo.state.ts | 14 -- .../DateOutputFromTo.stories.tsx | 53 ------ .../DateOutputFromTo/DateOutputFromTo.tsx | 79 -------- .../Molecules/DateOutputFromTo/index.ts | 1 - .../DynamicBottomBar.stories.tsx | 53 ------ .../DynamicBottomScrollBar.style.tsx | 11 -- .../DynamicBottomScrollBar.tsx | 24 --- .../Molecules/DynamicBottomScrollBar/index.ts | 1 - .../Molecules/EditBar/EditBar.state.tsx | 31 ---- src/Components/Molecules/EditBar/EditBar.tsx | 74 -------- src/Components/Molecules/EditBar/index.ts | 1 - src/Components/Molecules/EditBar/todo.txt | 6 - .../FancyCheckbox/FancyCheckbox.model.ts | 12 -- .../FancyCheckbox/FancyCheckbox.stories.tsx | 56 ------ .../FancyCheckbox/FancyCheckbox.style.tsx | 42 ----- .../Molecules/FancyCheckbox/FancyCheckbox.tsx | 33 ---- .../Molecules/FancyCheckbox/index.ts | 1 - .../FancyColorArea/FancyColorArea.stories.tsx | 42 ----- .../FancyColorArea/FancyColorArea.style.tsx | 75 -------- .../FancyColorArea/FancyColorArea.tsx | 94 ---------- .../Molecules/FancyColorArea/index.ts | 1 - .../FancyColorOutput/ColorTransformator.ts | 50 ----- .../FancyColorOutput.model.ts | 47 ----- .../FancyColorOutput.stories.tsx | 57 ------ .../FancyColorOutput.style.tsx | 24 --- .../FancyColorOutput/FancyColorOutput.tsx | 112 ------------ .../InputFields/AdaptInput/AdaptInputs.tsx | 81 -------- .../InputFields/AdaptInput/index.ts | 1 - .../InputFields/InputFields.style.tsx | 25 --- .../InputFields/InputFields.tsx | 57 ------ .../FancyColorOutput/InputFields/index.ts | 1 - .../Molecules/FancyColorOutput/index.ts | 1 - .../FancyContent/FancyContent.stories.tsx | 54 ------ .../Molecules/FancyContent/FancyContent.tsx | 90 --------- .../FancyContent/utils/FancyContentIcon.tsx | 15 -- .../FancyContent/utils/FancyContentText.tsx | 58 ------ .../FancyContent/utils/sizeSettings.ts | 23 --- .../FancyContentCard.stories.tsx | 33 ---- .../FancyContentCard/FancyContentCard.tsx | 58 ------ .../Molecules/FancyContentCard/index.ts | 1 - .../FancyDropDownUL.stories.tsx | 61 ------ .../FancyDropDownUL/FancyDropDownUL.style.tsx | 53 ------ .../FancyDropDownUL/FancyDropDownUL.tsx | 52 ------ .../Molecules/FancyDropDownUL/index.ts | 1 - .../FancyHueSlider/FancyHueSlider.stories.tsx | 41 ----- .../FancyHueSlider/FancyHueSlider.style.tsx | 18 -- .../FancyHueSlider/FancyHueSlider.tsx | 69 ------- .../Molecules/FancyHueSlider/index.ts | 1 - .../FancyImageText/FancyImageText.stories.tsx | 43 ----- .../FancyImageText/FancyImageText.tsx | 28 --- .../Molecules/FancyImageText/index.ts | 1 - .../Molecules/FancyListBox/FancyListBox.mdx | 53 ------ .../FancyListBox/FancyListBox.stories.tsx | 38 ---- .../FancyListBox/FancyListBox.style.tsx | 12 -- .../Molecules/FancyListBox/FancyListBox.tsx | 23 --- .../FancyListBox/FancyListBoxItem.tsx | 34 ---- .../Molecules/FancyListBox/index.ts | 1 - .../FancyMiniProfile.stories.tsx | 71 ------- .../FancyMiniProfile.style.tsx | 52 ------ .../FancyMiniProfile/FancyMiniProfile.tsx | 96 ---------- .../Molecules/FancyMiniProfile/index.ts | 1 - .../FancyModalHeadLine.model.ts | 8 - .../FancyModalHeadLine.stories.tsx | 57 ------ .../FancyModalHeadLine/FancyModalHeadLine.tsx | 44 ----- .../Molecules/FancyModalHeadLine/index.ts | 1 - .../FancyOpacitySlider.stories.tsx | 50 ----- .../FancyOpacitySlider.style.tsx | 40 ---- .../FancyOpacitySlider/FancyOpacitySlider.tsx | 68 ------- .../Molecules/FancyOpacitySlider/index.ts | 1 - .../FancyPageList/FancyPageList.stories.tsx | 67 ------- .../Molecules/FancyPageList/FancyPageList.tsx | 70 ------- .../Molecules/FancyPageList/index.ts | 1 - .../FancyProgressBar.stories.tsx | 94 ---------- .../FancyProgressBar/FancyProgressBar.tsx | 72 -------- .../Molecules/FancyProgressBar/index.ts | 1 - .../FancySelectWrapper.style.tsx | 43 ----- .../FancySelectWrapper/FancySelectWrapper.tsx | 61 ------ .../FancySpeedDailButton.stories.tsx | 46 ----- .../FancySpeedDailButton.tsx | 45 ----- .../SpeedDailButton.style.tsx | 96 ---------- .../Molecules/FancySpeedDailButton/index.ts | 1 - .../FancyTabSwitch/FancyTabSwitch.stories.tsx | 105 ----------- .../FancyTabSwitch/FancyTabSwitch.style.tsx | 55 ------ .../FancyTabSwitch/FancyTabSwitch.tsx | 48 ----- .../Molecules/FancyTabSwitch/index.ts | 1 - .../utils/generateColorDesign.ts | 76 -------- .../FancyTabSwitchButton.model.ts | 25 --- .../FancyTabSwitchButton.stories.tsx | 95 ---------- .../FancyTabSwitchButton.style.tsx | 130 ------------- .../FancyTabSwitchButton.tsx | 53 ------ .../Molecules/FancyTabSwitchButton/index.ts | 1 - .../FancyVideoText/FancyVideoText.stories.tsx | 71 ------- .../FancyVideoText/FancyVideoText.tsx | 24 --- .../Molecules/FancyVideoText/index.ts | 1 - .../Molecules/Fieldset/Fieldset.stories.tsx | 50 ----- .../Molecules/Fieldset/Fieldset.style.tsx | 16 -- .../Molecules/Fieldset/Fieldset.tsx | 31 ---- src/Components/Molecules/Fieldset/index.ts | 1 - .../Molecules/Header/Header.stories.tsx | 62 ------- .../Molecules/Header/Header.style.tsx | 14 -- src/Components/Molecules/Header/Header.tsx | 25 --- src/Components/Molecules/Header/index.ts | 1 - .../HeaderTitleWithLogo.stories.tsx | 53 ------ .../HeaderTitleWithLogo.tsx | 62 ------- .../Molecules/HeaderTitleWithLogo/index.ts | 1 - .../Molecules/InfoCard/InfoCard.stories.tsx | 66 ------- .../Molecules/InfoCard/InfoCard.tsx | 20 -- .../Molecules/InfoCard/InfoCrad.style.tsx | 28 --- src/Components/Molecules/InfoCard/index.ts | 1 - .../InputWrapper/InputWrapper.stories.tsx | 103 ----------- .../InputWrapper/InputWrapper.style.tsx | 49 ----- .../Molecules/InputWrapper/InputWrapper.tsx | 114 ------------ .../Molecules/InputWrapper/index.ts | 1 - .../Molecules/MenuList/MenuList.stories.tsx | 60 ------ .../Molecules/MenuList/MenuList.style.tsx | 18 -- .../Molecules/MenuList/MenuList.tsx | 23 --- .../Molecules/Modal/Modal.stories.tsx | 85 --------- .../Molecules/Modal/Modal.style.tsx | 15 -- src/Components/Molecules/Modal/Modal.tsx | 46 ----- src/Components/Molecules/Modal/index.ts | 1 - .../IDisableDateSettings.model.ts | 7 - .../IExternalMonthWithDays.model.ts | 17 -- .../MonthWithDays/MonthWithDays.stories.tsx | 111 ----------- .../MonthWithDays/MonthWithDays.style.tsx | 12 -- .../Molecules/MonthWithDays/MonthWithDays.tsx | 97 ---------- .../Molecules/MonthWithDays/day.model.ts | 12 -- .../helperFunctions/createDayFunction.ts | 65 ------- .../helperFunctions/createDaysOfMonth.ts | 40 ---- .../Molecules/MonthWithDays/index.ts | 1 - .../NumberInput/NumberInput.stories.tsx | 53 ------ .../NumberInput/NumberInput.styled.tsx | 27 --- .../Molecules/NumberInput/NumberInput.tsx | 89 --------- src/Components/Molecules/NumberInput/index.ts | 1 - .../Molecules/Paginator/Paginator.stories.tsx | 59 ------ .../Molecules/Paginator/Paginator.style.tsx | 41 ----- .../Molecules/Paginator/Paginator.tsx | 72 -------- src/Components/Molecules/Paginator/index.ts | 1 - .../PasswordInput/PasswordInput.stories.tsx | 64 ------- .../Molecules/PasswordInput/PasswordInput.tsx | 56 ------ .../Molecules/PasswordInput/index.ts | 1 - .../RangeCalendar/IDateArray.model.ts | 2 - .../RangeCalendar/RangeCalendar.stories.tsx | 114 ------------ .../RangeCalendar/RangeCalendar.style.tsx | 36 ---- .../Molecules/RangeCalendar/RangeCalendar.tsx | 106 ----------- .../helperFunctions/selectDayFunction.ts | 64 ------- .../helperFunctions/useSelectedDates.ts | 37 ---- .../helperFunctions/useVisibleMonths.ts | 44 ----- .../Molecules/RangeCalendar/index.ts | 1 - .../ScalingSection/ScalingSection.stories.tsx | 44 ----- .../ScalingSection/ScalingSection.tsx | 31 ---- .../Molecules/ScalingSection/index.ts | 1 - .../Molecules/SearchBar/SearchBar.stories.tsx | 71 ------- .../Molecules/SearchBar/SearchBar.tsx | 81 -------- src/Components/Molecules/SearchBar/index.ts | 1 - .../SearchBarList/SearchBarList.stories.tsx | 52 ------ .../SearchBarList/SearchBarList.style.tsx | 20 -- .../Molecules/SearchBarList/SearchBarList.tsx | 32 ---- .../Molecules/SearchBarList/index.ts | 1 - .../SingleInputs/SingleInputs.stories.tsx | 85 --------- .../SingleInputs/SingleInputs.style.tsx | 22 --- .../Molecules/SingleInputs/SingleInputs.tsx | 148 --------------- .../Molecules/SingleInputs/index.ts | 1 - .../IToastMessage.model.tsx | 13 -- .../SingleToastMessage/SingleToastMessage.mdx | 58 ------ .../SingleToastMessage.stories.tsx | 70 ------- .../SingleToastMessage.style.tsx | 70 ------- .../SingleToastMessage/SingleToastMessage.tsx | 44 ----- .../Molecules/SingleToastMessage/index.ts | 1 - .../SwipeUpModal/ISwipeUpModal.model.ts | 13 -- .../SwipeUpModal/SwipeUpModal.stories.tsx | 89 --------- .../SwipeUpModal/SwipeUpModal.style.tsx | 48 ----- .../Molecules/SwipeUpModal/SwipeUpModal.tsx | 132 ------------- .../Molecules/SwipeUpModal/index.ts | 1 - .../SwitchList/SwitchList.stories.tsx | 64 ------- .../Molecules/SwitchList/SwitchList.style.tsx | 15 -- .../Molecules/SwitchList/SwitchList.tsx | 64 ------- .../Molecules/TabSwitch/TabSwitch.model.ts | 24 --- .../Molecules/TabSwitch/TabSwitch.style.tsx | 70 ------- .../Molecules/TabSwitch/TabSwitch.tsx | 108 ----------- .../Molecules/TextInput/TextInput.stories.tsx | 41 ----- .../Molecules/TextInput/TextInput.tsx | 25 --- src/Components/Molecules/TextInput/index.ts | 1 - .../FancyBoxSet/FancyBoxSet.stories.tsx | 123 ------------- .../Organisms/FancyBoxSet/FancyBoxSet.tsx | 48 ----- src/Components/Organisms/FancyBoxSet/index.ts | 1 - .../FancyButton/FancyButton.stories.tsx | 130 ------------- .../FancyButton/FancyButton.style.tsx | 36 ---- .../Organisms/FancyButton/FancyButton.tsx | 78 -------- .../FancyButton/IFancyButton.model.ts | 12 -- src/Components/Organisms/FancyButton/index.ts | 1 - .../Organisms/FancyChip/FancyChip.model.ts | 1 - .../Organisms/FancyChip/FancyChip.stories.tsx | 150 --------------- .../Organisms/FancyChip/FancyChip.style.tsx | 107 ----------- .../Organisms/FancyChip/FancyChip.tsx | 106 ----------- src/Components/Organisms/FancyChip/index.ts | 1 - .../FancyChipList/FancyChipList.stories.tsx | 74 -------- .../FancyChipList/FancyChipList.style.tsx | 25 --- .../Organisms/FancyChipList/FancyChipList.tsx | 134 -------------- .../FancyCodeVerificationInput.mdx | 73 -------- .../FancyCodeVerificationInput.stories.tsx | 120 ------------ .../FancyCodeVerificationInput.style.tsx | 43 ----- .../FancyCodeVerificationInput.tsx | 58 ------ .../FancyCodeVerificationInput/index.ts | 1 - .../FancyColorPicker.stories.tsx | 71 ------- .../FancyColorPicker/FancyColorPicker.tsx | 103 ----------- .../FancyColorPicker/colorPickerUtils.ts | 47 ----- .../Organisms/FancyColorPicker/index.ts | 1 - .../FancyDateInput/FancyDateInput.stories.tsx | 157 ---------------- .../FancyDateInput/FancyDateInput.style.tsx | 48 ----- .../FancyDateInput/FancyDateInput.tsx | 53 ------ .../Organisms/FancyDateInput/index.ts | 1 - .../FancyDatePicker.stories.tsx | 132 ------------- .../FancyDatePicker/FancyDatePicker.style.tsx | 31 ---- .../FancyDatePicker/FancyDatePicker.tsx | 86 --------- .../Organisms/FancyDatePicker/index.ts | 1 - .../FancyDropDownMenue.stories.tsx | 103 ----------- .../FancyDropDownMenue/FancyDropDownMenue.tsx | 40 ---- .../Organisms/FancyDropDownMenue/index.ts | 1 - .../FancyDropDownSelect.stories.tsx | 148 --------------- .../FancyDropDownSelect.tsx | 55 ------ .../Organisms/FancyDropDownSelect/index.ts | 1 - .../EditBarItemsStructure/ButtonSettings.tsx | 105 ----------- .../EditBarItemsStructure/EditBarIcons.tsx | 89 --------- .../IEditbarObjectSturcture.model.ts | 58 ------ .../objectSettingsSection.ts | 157 ---------------- .../FancyEditBar/EditBarSettings.tsx | 17 -- .../FancyEditBar/FancyEditBar.state.tsx | 44 ----- .../Organisms/FancyEditBar/FancyEditBar.tsx | 65 ------- .../functions/ElementsObjectMapper.tsx | 65 ------- .../Organisms/FancyEditBar/index.ts | 1 - .../FancyEditBar/languagesEditBar.ts | 23 --- .../Organisms/FancyModal/FancyModal.mdx | 72 -------- .../Organisms/FancyModal/FancyModal.state.tsx | 44 ----- .../FancyModal/FancyModal.stories.tsx | 72 -------- .../Organisms/FancyModal/FancyModal.tsx | 53 ------ src/Components/Organisms/FancyModal/index.ts | 1 - .../FancyNumberInput/FancyNumberInput.tsx | 55 ------ .../Organisms/FancyNumberInput/index.ts | 1 - .../FancyPasswordInput.stories.tsx | 102 ----------- .../FancyPasswordInput/FancyPasswordInput.tsx | 54 ------ .../Organisms/FancyPasswordInput/index.ts | 1 - .../Organisms/FancyRadio/FancyRadio.tsx | 33 ---- src/Components/Organisms/FancyRadio/index.ts | 1 - .../FancyRangeSlider.model.ts | 19 -- .../FancyRangeSlider.stories.tsx | 133 -------------- .../FancyRangeSlider.style.tsx | 33 ---- .../FancyRangeSlider/FancyRangeSlider.tsx | 97 ---------- .../Organisms/FancyRangeSlider/index.ts | 1 - .../FancySearchBar/FancySearchBar.stories.tsx | 82 --------- .../FancySearchBar/FancySearchBar.tsx | 74 -------- .../Organisms/FancySearchBar/index.ts | 1 - .../FancySwipeUpModal/FancySwipeUpModal.mdx | 80 -------- .../FancySwipeUpModal.state.ts | 46 ----- .../FancySwipeUpModal.stories.tsx | 135 -------------- .../FancySwipeUpModal/FancySwipeUpModal.tsx | 43 ----- .../Organisms/FancySwipeUpModal/index.ts | 1 - .../FancyTextInput/FancyTextInput.stories.tsx | 97 ---------- .../FancyTextInput/FancyTextInput.tsx | 51 ------ .../Organisms/FancyTextInput/index.ts | 1 - .../FancyToastMessage.state.tsx | 23 --- .../FancyToastMessage.stories.tsx | 49 ----- .../FancyToastMessage.style.tsx | 14 -- .../FancyToastMessage/FancyToastMessage.tsx | 60 ------ .../Organisms/FancyToastMessage/index.ts | 1 - .../FancyBottomBarIcon.stories.tsx | 103 ----------- .../FancyBottomBarIcon.style.tsx | 17 -- .../FancyBottomBarIcon/FancyBottomBarIcon.tsx | 25 --- .../Templates/FancyBottomBarIcon/index.ts | 1 - .../FancyFlexBox/FancyFlexBox.model.ts | 12 -- .../FancyFlexBox/FancyFlexBox.style.tsx | 26 --- .../Templates/FancyFlexBox/FancyFlexBox.tsx | 39 ---- .../Templates/FancyFlexBox/index.ts | 1 - .../Templates/FancyGrid/FancyGrid.mdx | 64 ------- .../Templates/FancyGrid/FancyGrid.stories.tsx | 70 ------- .../Templates/FancyGrid/FancyGrid.tsx | 35 ---- .../FancyGrid/FancyGridItem/FancyGridItem.mdx | 46 ----- .../FancyGridItem/FancyGridItem.stories.tsx | 45 ----- .../FancyGrid/FancyGridItem/FancyGridItem.tsx | 19 -- .../FancyGrid/FancyGridItem/index.ts | 1 - src/Components/Templates/FancyGrid/index.ts | 1 - .../FancyHandyNav/FancyHandyNav.store.ts | 19 -- .../FancyHandyNav/FancyHandyNav.stories.tsx | 151 --------------- .../Templates/FancyHandyNav/FancyHandyNav.tsx | 82 --------- .../Templates/FancyHandyNav/index.ts | 1 - .../FancyInfoCard/FancyInfoCard.stories.tsx | 68 ------- .../Templates/FancyInfoCard/FancyInfoCard.tsx | 57 ------ .../Templates/FancyInfoCard/index.ts | 1 - .../FancyMenu/FancyMenu.stories.tsx | 65 ------- .../FancyMenu/FancyMenu.tsx | 21 --- .../FancyMenueComponent/FancyMenu/index.ts | 1 - .../FancyMenuItem/FancyMenuItem.stories.tsx | 84 --------- .../FancyMenuItem/FancyMenuItem.tsx | 23 --- .../FancyMenuItem/index.ts | 1 - .../FancyRadioList/FancyRadioList.model.ts | 15 -- .../FancyRadioList/FancyRadioList.stories.tsx | 95 ---------- .../FancyRadioList/FancyRadioList.style.tsx | 0 .../FancyRadioList/FancyRadioList.tsx | 76 -------- .../Templates/FancyRadioList/index.ts | 1 - .../FancyDateDropDown/FancyDateDropDown.tsx | 56 ------ .../Inputs/FancyDateDropDown/index.ts | 1 - .../icons/SVGCheckMark/SVGCheckMark.tsx | 7 - src/Components/icons/SVGCheckMark/index.ts | 1 - .../icons/SVGChevronLeft/SVGChevronLeft.tsx | 12 -- src/Components/icons/SVGChevronLeft/index.ts | 1 - .../icons/SVGChevronRight/SVGChevronRight.tsx | 12 -- src/Components/icons/SVGChevronRight/index.ts | 1 - .../SVGClipBoardIcon/SVGClipBoardIcon.tsx | 9 - .../icons/SVGClipBoardIcon/index.ts | 1 - .../SVGClipBoardIconChecked.tsx | 9 - .../icons/SVGClipBoardIconChecked/index.ts | 1 - .../icons/SVGEyeCrossed/SVGEyeCrossed.tsx | 9 - src/Components/icons/SVGEyeCrossed/index.ts | 1 - .../icons/SVGEyeOpen/SVGEyeOpen.tsx | 9 - src/Components/icons/SVGEyeOpen/index.ts | 1 - .../SVGLoadingArrows/SVGLoadingArrows.tsx | 11 -- .../icons/SVGLoadingArrows/index.ts | 1 - src/Components/icons/SVGPlus/SVGPlus.tsx | 7 - src/Components/icons/SVGPlus/index.ts | 1 - src/Components/icons/SVGSearch/SVGSearch.tsx | 7 - src/Components/icons/SVGSearch/index.ts | 1 - .../icons/SVGXCircle/SVGXCircle.tsx | 8 - src/Components/icons/SVGXCircle/index.ts | 1 - .../hooks/useIntersectionObserver/index.ts | 1 - .../useIntersectionObserver.tsx | 33 ---- .../utils/hooks/useSlider/IUseSlider.model.ts | 29 --- .../utils/hooks/useSlider/useSilder.tsx | 173 ------------------ .../utils/hooks/useWindowDimensions/index.ts | 1 - .../useWindowDimensions.tsx | 27 --- .../utils/variables/colorFormats.ts | 6 - 537 files changed, 21718 deletions(-) delete mode 100644 src/Components/Atoms/ActionWrapper/ActionWrapper.mdx delete mode 100644 src/Components/Atoms/ActionWrapper/ActionWrapper.tsx delete mode 100644 src/Components/Atoms/ActionWrapper/index.ts delete mode 100644 src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.stories.tsx delete mode 100644 src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.tsx delete mode 100644 src/Components/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts delete mode 100644 src/Components/Atoms/AlignedInputLabel/index.ts delete mode 100644 src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.stories.tsx delete mode 100644 src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.tsx delete mode 100644 src/Components/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts delete mode 100644 src/Components/Atoms/AnimatedLabel/index.ts delete mode 100644 src/Components/Atoms/AvilableDot/AvailableDot.tsx delete mode 100644 src/Components/Atoms/AvilableDot/AvilableDot.stories.tsx delete mode 100644 src/Components/Atoms/AvilableDot/index.ts delete mode 100644 src/Components/Atoms/BackDrop/BackDrop.stories.tsx delete mode 100644 src/Components/Atoms/BackDrop/BackDrop.tsx delete mode 100644 src/Components/Atoms/BackDrop/index.ts delete mode 100644 src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx delete mode 100644 src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.tsx delete mode 100644 src/Components/Atoms/CheckerBoardPattern/index.ts delete mode 100644 src/Components/Atoms/ColorDisplay/ColorDisplay.stories.tsx delete mode 100644 src/Components/Atoms/ColorDisplay/ColorDisplay.style.tsx delete mode 100644 src/Components/Atoms/ColorDisplay/ColorDisplay.tsx delete mode 100644 src/Components/Atoms/ColorDisplay/index.ts delete mode 100644 src/Components/Atoms/ColorIndicator/ColorIndicator.style.tsx delete mode 100644 src/Components/Atoms/ColorIndicator/ColorIndicator.tsx delete mode 100644 src/Components/Atoms/ColorIndicator/Colorindicator.stories.tsx delete mode 100644 src/Components/Atoms/ColorIndicator/index.ts delete mode 100644 src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.mdx delete mode 100644 src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.tsx delete mode 100644 src/Components/Atoms/CustomeDropDownNOTINUSE/CustomeDropDown.tsx delete mode 100644 src/Components/Atoms/DateNumberAtom/DateNumberAtom.stories.tsx delete mode 100644 src/Components/Atoms/DateNumberAtom/DateNumberAtom.style.tsx delete mode 100644 src/Components/Atoms/DateNumberAtom/DateNumberAtom.tsx delete mode 100644 src/Components/Atoms/DateNumberAtom/index.ts delete mode 100644 src/Components/Atoms/DateOutput/DateOutput.stories.tsx delete mode 100644 src/Components/Atoms/DateOutput/DateOutput.tsx delete mode 100644 src/Components/Atoms/DateOutput/index.ts delete mode 100644 src/Components/Atoms/DropDownSelect/DropDownSelect.model.ts delete mode 100644 src/Components/Atoms/DropDownSelect/DropDownSelect.stories.tsx delete mode 100644 src/Components/Atoms/DropDownSelect/DropDownSelect.style.tsx delete mode 100644 src/Components/Atoms/DropDownSelect/DropDownSelect.tsx delete mode 100644 src/Components/Atoms/DropDownSelect/index.ts delete mode 100644 src/Components/Atoms/EditBarModal/EditBarModal.stories.tsx delete mode 100644 src/Components/Atoms/EditBarModal/EditBarModal.style.tsx delete mode 100644 src/Components/Atoms/EditBarModal/EditBarModal.tsx delete mode 100644 src/Components/Atoms/EditBarModal/IEditbarModal.model.ts delete mode 100644 src/Components/Atoms/EditBarModal/index.ts delete mode 100644 src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.style.tsx delete mode 100644 src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.tsx delete mode 100644 src/Components/Atoms/FancyBox/FancyBox.mdx delete mode 100644 src/Components/Atoms/FancyBox/FancyBox.model.ts delete mode 100644 src/Components/Atoms/FancyBox/FancyBox.stories.tsx delete mode 100644 src/Components/Atoms/FancyBox/FancyBox.style.tsx delete mode 100644 src/Components/Atoms/FancyBox/FancyBox.tsx delete mode 100644 src/Components/Atoms/FancyBox/index.ts delete mode 100644 src/Components/Atoms/FancyCard/Card.model.ts delete mode 100644 src/Components/Atoms/FancyCard/FancyCard.style.tsx delete mode 100644 src/Components/Atoms/FancyCard/FancyCard.tsx delete mode 100644 src/Components/Atoms/FancyCard/FancyCrad.stories.tsx delete mode 100644 src/Components/Atoms/FancyCard/index.ts delete mode 100644 src/Components/Atoms/FancyImage/FancyImage.stories.tsx delete mode 100644 src/Components/Atoms/FancyImage/FancyImage.style.tsx delete mode 100644 src/Components/Atoms/FancyImage/FancyImage.tsx delete mode 100644 src/Components/Atoms/FancyImage/index.ts delete mode 100644 src/Components/Atoms/FancyLI/FancyLI.stories.tsx delete mode 100644 src/Components/Atoms/FancyLI/FancyLI.tsx delete mode 100644 src/Components/Atoms/FancyLI/index.ts delete mode 100644 src/Components/Atoms/FancyLine/FancyLine.stories.tsx delete mode 100644 src/Components/Atoms/FancyLine/FancyLine.tsx delete mode 100644 src/Components/Atoms/FancyLine/index.ts delete mode 100644 src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.stories.tsx delete mode 100644 src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.tsx delete mode 100644 src/Components/Atoms/FancyLoadingBar/index.ts delete mode 100644 src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx delete mode 100644 src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx delete mode 100644 src/Components/Atoms/FancyLoadingSpinner/index.ts delete mode 100644 src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx delete mode 100644 src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx delete mode 100644 src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.tsx delete mode 100644 src/Components/Atoms/FancyProfilePicture/index.ts delete mode 100644 src/Components/Atoms/FancySVGAtom/FancySVGAtom.model.ts delete mode 100644 src/Components/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx delete mode 100644 src/Components/Atoms/FancySVGAtom/FancySVGAtom.tsx delete mode 100644 src/Components/Atoms/FancySVGAtom/index.ts delete mode 100644 src/Components/Atoms/FancyVideo/FancyVideo.stories.tsx delete mode 100644 src/Components/Atoms/FancyVideo/FancyVideo.tsx delete mode 100644 src/Components/Atoms/FancyVideo/index.ts delete mode 100644 src/Components/Atoms/FancyXButton/FancyXButton.stories.tsx delete mode 100644 src/Components/Atoms/FancyXButton/FancyXButton.tsx delete mode 100644 src/Components/Atoms/FancyXButton/index.ts delete mode 100644 src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.stories.tsx delete mode 100644 src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx delete mode 100644 src/Components/Atoms/ImageVideoOverlay/index.ts delete mode 100644 src/Components/Atoms/InputLabel/InputLabel.stories.tsx delete mode 100644 src/Components/Atoms/InputLabel/InputLabel.tsx delete mode 100644 src/Components/Atoms/InputLabel/index.ts delete mode 100644 src/Components/Atoms/InputUnderline/InputUnderline.stories.tsx delete mode 100644 src/Components/Atoms/InputUnderline/InputUnderline.tsx delete mode 100644 src/Components/Atoms/InputUnderline/index.ts delete mode 100644 src/Components/Atoms/ListDivider/ListDivider.model.ts delete mode 100644 src/Components/Atoms/ListDivider/ListDivider.stories.tsx delete mode 100644 src/Components/Atoms/ListDivider/ListDivider.style.tsx delete mode 100644 src/Components/Atoms/ListDivider/ListDivider.tsx delete mode 100644 src/Components/Atoms/ListDivider/index.ts delete mode 100644 src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.stories.tsx delete mode 100644 src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx delete mode 100644 src/Components/Atoms/MenuItem/MenuItem.stories.tsx delete mode 100644 src/Components/Atoms/MenuItem/MenuItem.style.tsx delete mode 100644 src/Components/Atoms/MenuItem/MenuItem.tsx delete mode 100644 src/Components/Atoms/MenuItem/index.ts delete mode 100644 src/Components/Atoms/PageNumberList/PageNumberList.stories.tsx delete mode 100644 src/Components/Atoms/PageNumberList/PageNumberList.style.tsx delete mode 100644 src/Components/Atoms/PageNumberList/PageNumberList.tsx delete mode 100644 src/Components/Atoms/PasswordEye/PasswordEye.stories.tsx delete mode 100644 src/Components/Atoms/PasswordEye/PasswordEye.tsx delete mode 100644 src/Components/Atoms/PasswordEye/index.ts delete mode 100644 src/Components/Atoms/ProgressBar/ProgressBar.stories.tsx delete mode 100644 src/Components/Atoms/ProgressBar/ProgressBar.tsx delete mode 100644 src/Components/Atoms/ProgressBar/index.ts delete mode 100644 src/Components/Atoms/RawCheckbox/RawCheckbox.model.ts delete mode 100644 src/Components/Atoms/RawCheckbox/RawCheckbox.stories.tsx delete mode 100644 src/Components/Atoms/RawCheckbox/RawCheckbox.style.tsx delete mode 100644 src/Components/Atoms/RawCheckbox/RawCheckbox.tsx delete mode 100644 src/Components/Atoms/RawCheckbox/index.ts delete mode 100644 src/Components/Atoms/RawInput/RawInput.stories.tsx delete mode 100644 src/Components/Atoms/RawInput/RawInput.tsx delete mode 100644 src/Components/Atoms/RawInput/index.ts delete mode 100644 src/Components/Atoms/RawLI/RawLI.tsx delete mode 100644 src/Components/Atoms/RawLI/index.ts delete mode 100644 src/Components/Atoms/RawNav/RawNav.tsx delete mode 100644 src/Components/Atoms/RawRadio/RawRadio.stories.tsx delete mode 100644 src/Components/Atoms/RawRadio/RawRadio.style.tsx delete mode 100644 src/Components/Atoms/RawRadio/RawRadio.tsx delete mode 100644 src/Components/Atoms/RawRadio/index.ts delete mode 100644 src/Components/Atoms/RawSlider/RawSlider.stories.tsx delete mode 100644 src/Components/Atoms/RawSlider/RawSlider.style.tsx delete mode 100644 src/Components/Atoms/RawSlider/RawSlider.tsx delete mode 100644 src/Components/Atoms/RawSlider/index.ts delete mode 100644 src/Components/Atoms/RawUL/RawUL.tsx delete mode 100644 src/Components/Atoms/ScrollableBar/ScrollableBar.stories.tsx delete mode 100644 src/Components/Atoms/ScrollableBar/ScrollableBar.tsx delete mode 100644 src/Components/Atoms/ScrollableBar/SrollableBar.style.tsx delete mode 100644 src/Components/Atoms/ScrollableBar/index.ts delete mode 100644 src/Components/Atoms/SimpleDialog/SimpleDialog.stories.tsx delete mode 100644 src/Components/Atoms/SimpleDialog/SimpleDialog.tsx delete mode 100644 src/Components/Atoms/SimpleDialog/index.ts delete mode 100644 src/Components/Atoms/SingleInputAtom/SingleInputAtom.stories.tsx delete mode 100644 src/Components/Atoms/SingleInputAtom/SingleInputAtom.tsx delete mode 100644 src/Components/Atoms/SingleInputAtom/index.ts delete mode 100644 src/Components/Atoms/SliderMarker/SliderMarker.stories.tsx delete mode 100644 src/Components/Atoms/SliderMarker/SliderMarker.style.tsx delete mode 100644 src/Components/Atoms/SliderMarker/SliderMarker.tsx delete mode 100644 src/Components/Atoms/SliderMarker/index.ts delete mode 100644 src/Components/Atoms/Slot/Slot.stories.tsx delete mode 100644 src/Components/Atoms/Slot/Slot.tsx delete mode 100644 src/Components/Atoms/Slot/index.ts delete mode 100644 src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx delete mode 100644 src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx delete mode 100644 src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.tsx delete mode 100644 src/Components/Atoms/SpeedDialMenueItem/index.ts delete mode 100644 src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.stories.tsx delete mode 100644 src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.tsx delete mode 100644 src/Components/Atoms/SwipeUpContainer/index.ts delete mode 100644 src/Components/Atoms/SwipeUpDash/SwipeUpDash.stories.tsx delete mode 100644 src/Components/Atoms/SwipeUpDash/SwipeUpDash.tsx delete mode 100644 src/Components/Atoms/SwipeUpDash/index.ts delete mode 100644 src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx delete mode 100644 src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx delete mode 100644 src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx delete mode 100644 src/Components/Atoms/SwitchActiveIndicator/utils/generateBlob.ts delete mode 100644 src/Components/Atoms/SwitchActiveIndicator/utils/generateLines.ts delete mode 100644 src/Components/Atoms/Typography/Typography.stories.tsx delete mode 100644 src/Components/Atoms/Typography/Typography.tsx delete mode 100644 src/Components/Atoms/Typography/TypographyFontVariations.style.tsx delete mode 100644 src/Components/Atoms/Typography/TypographyStyleVariants.tsx delete mode 100644 src/Components/Atoms/Typography/index.ts delete mode 100644 src/Components/Atoms/WeekDays/WeekDays.stories.tsx delete mode 100644 src/Components/Atoms/WeekDays/WeekDays.tsx delete mode 100644 src/Components/Atoms/WeekDays/index.ts delete mode 100644 src/Components/Atoms/YearSelector/YearSelector.stories.tsx delete mode 100644 src/Components/Atoms/YearSelector/YearSelector.style.tsx delete mode 100644 src/Components/Atoms/YearSelector/YearSelector.tsx delete mode 100644 src/Components/Atoms/YearSelector/index.ts delete mode 100644 src/Components/Molecules/BottomBar/BottomBar.stories.tsx delete mode 100644 src/Components/Molecules/BottomBar/BottomBar.style.tsx delete mode 100644 src/Components/Molecules/BottomBar/BottomBar.tsx delete mode 100644 src/Components/Molecules/BottomBar/index.ts delete mode 100644 src/Components/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx delete mode 100644 src/Components/Molecules/BottomBarIcon/BottomBarIcon.style.tsx delete mode 100644 src/Components/Molecules/BottomBarIcon/BottomBarIcon.tsx delete mode 100644 src/Components/Molecules/Button/Button.stories.tsx delete mode 100644 src/Components/Molecules/Button/Button.style.tsx delete mode 100644 src/Components/Molecules/Button/Button.tsx delete mode 100644 src/Components/Molecules/Chip/Chip.stories.tsx delete mode 100644 src/Components/Molecules/Chip/Chip.style.tsx delete mode 100644 src/Components/Molecules/Chip/Chip.tsx delete mode 100644 src/Components/Molecules/ChipList/ChipList.stories.tsx delete mode 100644 src/Components/Molecules/ChipList/ChipList.style.tsx delete mode 100644 src/Components/Molecules/ChipList/ChipList.tsx delete mode 100644 src/Components/Molecules/ComponentAndActionWrapper/ComponentAndActionWrapper.mdx delete mode 100644 src/Components/Molecules/ComponentAndActionWrapper/ComponentAndActionWrapper.tsx delete mode 100644 src/Components/Molecules/DateInput/DateInput.stories.tsx delete mode 100644 src/Components/Molecules/DateInput/DateInput.tsx delete mode 100644 src/Components/Molecules/DateInput/index.ts delete mode 100644 src/Components/Molecules/DateNumberWithStatus/DateNumberWithStatus.stories.tsx delete mode 100644 src/Components/Molecules/DateNumberWithStatus/DateNumberWithStatus.tsx delete mode 100644 src/Components/Molecules/DateNumberWithStatus/index.ts delete mode 100644 src/Components/Molecules/DateOutputFromTo/DateOutputFromTo.state.ts delete mode 100644 src/Components/Molecules/DateOutputFromTo/DateOutputFromTo.stories.tsx delete mode 100644 src/Components/Molecules/DateOutputFromTo/DateOutputFromTo.tsx delete mode 100644 src/Components/Molecules/DateOutputFromTo/index.ts delete mode 100644 src/Components/Molecules/DynamicBottomScrollBar/DynamicBottomBar.stories.tsx delete mode 100644 src/Components/Molecules/DynamicBottomScrollBar/DynamicBottomScrollBar.style.tsx delete mode 100644 src/Components/Molecules/DynamicBottomScrollBar/DynamicBottomScrollBar.tsx delete mode 100644 src/Components/Molecules/DynamicBottomScrollBar/index.ts delete mode 100644 src/Components/Molecules/EditBar/EditBar.state.tsx delete mode 100644 src/Components/Molecules/EditBar/EditBar.tsx delete mode 100644 src/Components/Molecules/EditBar/index.ts delete mode 100644 src/Components/Molecules/EditBar/todo.txt delete mode 100644 src/Components/Molecules/FancyCheckbox/FancyCheckbox.model.ts delete mode 100644 src/Components/Molecules/FancyCheckbox/FancyCheckbox.stories.tsx delete mode 100644 src/Components/Molecules/FancyCheckbox/FancyCheckbox.style.tsx delete mode 100644 src/Components/Molecules/FancyCheckbox/FancyCheckbox.tsx delete mode 100644 src/Components/Molecules/FancyCheckbox/index.ts delete mode 100644 src/Components/Molecules/FancyColorArea/FancyColorArea.stories.tsx delete mode 100644 src/Components/Molecules/FancyColorArea/FancyColorArea.style.tsx delete mode 100644 src/Components/Molecules/FancyColorArea/FancyColorArea.tsx delete mode 100644 src/Components/Molecules/FancyColorArea/index.ts delete mode 100644 src/Components/Molecules/FancyColorOutput/ColorTransformator.ts delete mode 100644 src/Components/Molecules/FancyColorOutput/FancyColorOutput.model.ts delete mode 100644 src/Components/Molecules/FancyColorOutput/FancyColorOutput.stories.tsx delete mode 100644 src/Components/Molecules/FancyColorOutput/FancyColorOutput.style.tsx delete mode 100644 src/Components/Molecules/FancyColorOutput/FancyColorOutput.tsx delete mode 100644 src/Components/Molecules/FancyColorOutput/InputFields/AdaptInput/AdaptInputs.tsx delete mode 100644 src/Components/Molecules/FancyColorOutput/InputFields/AdaptInput/index.ts delete mode 100644 src/Components/Molecules/FancyColorOutput/InputFields/InputFields.style.tsx delete mode 100644 src/Components/Molecules/FancyColorOutput/InputFields/InputFields.tsx delete mode 100644 src/Components/Molecules/FancyColorOutput/InputFields/index.ts delete mode 100644 src/Components/Molecules/FancyColorOutput/index.ts delete mode 100644 src/Components/Molecules/FancyContent/FancyContent.stories.tsx delete mode 100644 src/Components/Molecules/FancyContent/FancyContent.tsx delete mode 100644 src/Components/Molecules/FancyContent/utils/FancyContentIcon.tsx delete mode 100644 src/Components/Molecules/FancyContent/utils/FancyContentText.tsx delete mode 100644 src/Components/Molecules/FancyContent/utils/sizeSettings.ts delete mode 100644 src/Components/Molecules/FancyContentCard/FancyContentCard.stories.tsx delete mode 100644 src/Components/Molecules/FancyContentCard/FancyContentCard.tsx delete mode 100644 src/Components/Molecules/FancyContentCard/index.ts delete mode 100644 src/Components/Molecules/FancyDropDownUL/FancyDropDownUL.stories.tsx delete mode 100644 src/Components/Molecules/FancyDropDownUL/FancyDropDownUL.style.tsx delete mode 100644 src/Components/Molecules/FancyDropDownUL/FancyDropDownUL.tsx delete mode 100644 src/Components/Molecules/FancyDropDownUL/index.ts delete mode 100644 src/Components/Molecules/FancyHueSlider/FancyHueSlider.stories.tsx delete mode 100644 src/Components/Molecules/FancyHueSlider/FancyHueSlider.style.tsx delete mode 100644 src/Components/Molecules/FancyHueSlider/FancyHueSlider.tsx delete mode 100644 src/Components/Molecules/FancyHueSlider/index.ts delete mode 100644 src/Components/Molecules/FancyImageText/FancyImageText.stories.tsx delete mode 100644 src/Components/Molecules/FancyImageText/FancyImageText.tsx delete mode 100644 src/Components/Molecules/FancyImageText/index.ts delete mode 100644 src/Components/Molecules/FancyListBox/FancyListBox.mdx delete mode 100644 src/Components/Molecules/FancyListBox/FancyListBox.stories.tsx delete mode 100644 src/Components/Molecules/FancyListBox/FancyListBox.style.tsx delete mode 100644 src/Components/Molecules/FancyListBox/FancyListBox.tsx delete mode 100644 src/Components/Molecules/FancyListBox/FancyListBoxItem.tsx delete mode 100644 src/Components/Molecules/FancyListBox/index.ts delete mode 100644 src/Components/Molecules/FancyMiniProfile/FancyMiniProfile.stories.tsx delete mode 100644 src/Components/Molecules/FancyMiniProfile/FancyMiniProfile.style.tsx delete mode 100644 src/Components/Molecules/FancyMiniProfile/FancyMiniProfile.tsx delete mode 100644 src/Components/Molecules/FancyMiniProfile/index.ts delete mode 100644 src/Components/Molecules/FancyModalHeadLine/FancyModalHeadLine.model.ts delete mode 100644 src/Components/Molecules/FancyModalHeadLine/FancyModalHeadLine.stories.tsx delete mode 100644 src/Components/Molecules/FancyModalHeadLine/FancyModalHeadLine.tsx delete mode 100644 src/Components/Molecules/FancyModalHeadLine/index.ts delete mode 100644 src/Components/Molecules/FancyOpacitySlider/FancyOpacitySlider.stories.tsx delete mode 100644 src/Components/Molecules/FancyOpacitySlider/FancyOpacitySlider.style.tsx delete mode 100644 src/Components/Molecules/FancyOpacitySlider/FancyOpacitySlider.tsx delete mode 100644 src/Components/Molecules/FancyOpacitySlider/index.ts delete mode 100644 src/Components/Molecules/FancyPageList/FancyPageList.stories.tsx delete mode 100644 src/Components/Molecules/FancyPageList/FancyPageList.tsx delete mode 100644 src/Components/Molecules/FancyPageList/index.ts delete mode 100644 src/Components/Molecules/FancyProgressBar/FancyProgressBar.stories.tsx delete mode 100644 src/Components/Molecules/FancyProgressBar/FancyProgressBar.tsx delete mode 100644 src/Components/Molecules/FancyProgressBar/index.ts delete mode 100644 src/Components/Molecules/FancySelectWrapper/FancySelectWrapper.style.tsx delete mode 100644 src/Components/Molecules/FancySelectWrapper/FancySelectWrapper.tsx delete mode 100644 src/Components/Molecules/FancySpeedDailButton/FancySpeedDailButton.stories.tsx delete mode 100644 src/Components/Molecules/FancySpeedDailButton/FancySpeedDailButton.tsx delete mode 100644 src/Components/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx delete mode 100644 src/Components/Molecules/FancySpeedDailButton/index.ts delete mode 100644 src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.stories.tsx delete mode 100644 src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx delete mode 100644 src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.tsx delete mode 100644 src/Components/Molecules/FancyTabSwitch/index.ts delete mode 100644 src/Components/Molecules/FancyTabSwitch/utils/generateColorDesign.ts delete mode 100644 src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts delete mode 100644 src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx delete mode 100644 src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx delete mode 100644 src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx delete mode 100644 src/Components/Molecules/FancyTabSwitchButton/index.ts delete mode 100644 src/Components/Molecules/FancyVideoText/FancyVideoText.stories.tsx delete mode 100644 src/Components/Molecules/FancyVideoText/FancyVideoText.tsx delete mode 100644 src/Components/Molecules/FancyVideoText/index.ts delete mode 100644 src/Components/Molecules/Fieldset/Fieldset.stories.tsx delete mode 100644 src/Components/Molecules/Fieldset/Fieldset.style.tsx delete mode 100644 src/Components/Molecules/Fieldset/Fieldset.tsx delete mode 100644 src/Components/Molecules/Fieldset/index.ts delete mode 100644 src/Components/Molecules/Header/Header.stories.tsx delete mode 100644 src/Components/Molecules/Header/Header.style.tsx delete mode 100644 src/Components/Molecules/Header/Header.tsx delete mode 100644 src/Components/Molecules/Header/index.ts delete mode 100644 src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx delete mode 100644 src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx delete mode 100644 src/Components/Molecules/HeaderTitleWithLogo/index.ts delete mode 100644 src/Components/Molecules/InfoCard/InfoCard.stories.tsx delete mode 100644 src/Components/Molecules/InfoCard/InfoCard.tsx delete mode 100644 src/Components/Molecules/InfoCard/InfoCrad.style.tsx delete mode 100644 src/Components/Molecules/InfoCard/index.ts delete mode 100644 src/Components/Molecules/InputWrapper/InputWrapper.stories.tsx delete mode 100644 src/Components/Molecules/InputWrapper/InputWrapper.style.tsx delete mode 100644 src/Components/Molecules/InputWrapper/InputWrapper.tsx delete mode 100644 src/Components/Molecules/InputWrapper/index.ts delete mode 100644 src/Components/Molecules/MenuList/MenuList.stories.tsx delete mode 100644 src/Components/Molecules/MenuList/MenuList.style.tsx delete mode 100644 src/Components/Molecules/MenuList/MenuList.tsx delete mode 100644 src/Components/Molecules/Modal/Modal.stories.tsx delete mode 100644 src/Components/Molecules/Modal/Modal.style.tsx delete mode 100644 src/Components/Molecules/Modal/Modal.tsx delete mode 100644 src/Components/Molecules/Modal/index.ts delete mode 100644 src/Components/Molecules/MonthWithDays/IDisableDateSettings.model.ts delete mode 100644 src/Components/Molecules/MonthWithDays/IExternalMonthWithDays.model.ts delete mode 100644 src/Components/Molecules/MonthWithDays/MonthWithDays.stories.tsx delete mode 100644 src/Components/Molecules/MonthWithDays/MonthWithDays.style.tsx delete mode 100644 src/Components/Molecules/MonthWithDays/MonthWithDays.tsx delete mode 100644 src/Components/Molecules/MonthWithDays/day.model.ts delete mode 100644 src/Components/Molecules/MonthWithDays/helperFunctions/createDayFunction.ts delete mode 100644 src/Components/Molecules/MonthWithDays/helperFunctions/createDaysOfMonth.ts delete mode 100644 src/Components/Molecules/MonthWithDays/index.ts delete mode 100644 src/Components/Molecules/NumberInput/NumberInput.stories.tsx delete mode 100644 src/Components/Molecules/NumberInput/NumberInput.styled.tsx delete mode 100644 src/Components/Molecules/NumberInput/NumberInput.tsx delete mode 100644 src/Components/Molecules/NumberInput/index.ts delete mode 100644 src/Components/Molecules/Paginator/Paginator.stories.tsx delete mode 100644 src/Components/Molecules/Paginator/Paginator.style.tsx delete mode 100644 src/Components/Molecules/Paginator/Paginator.tsx delete mode 100644 src/Components/Molecules/Paginator/index.ts delete mode 100644 src/Components/Molecules/PasswordInput/PasswordInput.stories.tsx delete mode 100644 src/Components/Molecules/PasswordInput/PasswordInput.tsx delete mode 100644 src/Components/Molecules/PasswordInput/index.ts delete mode 100644 src/Components/Molecules/RangeCalendar/IDateArray.model.ts delete mode 100644 src/Components/Molecules/RangeCalendar/RangeCalendar.stories.tsx delete mode 100644 src/Components/Molecules/RangeCalendar/RangeCalendar.style.tsx delete mode 100644 src/Components/Molecules/RangeCalendar/RangeCalendar.tsx delete mode 100644 src/Components/Molecules/RangeCalendar/helperFunctions/selectDayFunction.ts delete mode 100644 src/Components/Molecules/RangeCalendar/helperFunctions/useSelectedDates.ts delete mode 100644 src/Components/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts delete mode 100644 src/Components/Molecules/RangeCalendar/index.ts delete mode 100644 src/Components/Molecules/ScalingSection/ScalingSection.stories.tsx delete mode 100644 src/Components/Molecules/ScalingSection/ScalingSection.tsx delete mode 100644 src/Components/Molecules/ScalingSection/index.ts delete mode 100644 src/Components/Molecules/SearchBar/SearchBar.stories.tsx delete mode 100644 src/Components/Molecules/SearchBar/SearchBar.tsx delete mode 100644 src/Components/Molecules/SearchBar/index.ts delete mode 100644 src/Components/Molecules/SearchBarList/SearchBarList.stories.tsx delete mode 100644 src/Components/Molecules/SearchBarList/SearchBarList.style.tsx delete mode 100644 src/Components/Molecules/SearchBarList/SearchBarList.tsx delete mode 100644 src/Components/Molecules/SearchBarList/index.ts delete mode 100644 src/Components/Molecules/SingleInputs/SingleInputs.stories.tsx delete mode 100644 src/Components/Molecules/SingleInputs/SingleInputs.style.tsx delete mode 100644 src/Components/Molecules/SingleInputs/SingleInputs.tsx delete mode 100644 src/Components/Molecules/SingleInputs/index.ts delete mode 100644 src/Components/Molecules/SingleToastMessage/IToastMessage.model.tsx delete mode 100644 src/Components/Molecules/SingleToastMessage/SingleToastMessage.mdx delete mode 100644 src/Components/Molecules/SingleToastMessage/SingleToastMessage.stories.tsx delete mode 100644 src/Components/Molecules/SingleToastMessage/SingleToastMessage.style.tsx delete mode 100644 src/Components/Molecules/SingleToastMessage/SingleToastMessage.tsx delete mode 100644 src/Components/Molecules/SingleToastMessage/index.ts delete mode 100644 src/Components/Molecules/SwipeUpModal/ISwipeUpModal.model.ts delete mode 100644 src/Components/Molecules/SwipeUpModal/SwipeUpModal.stories.tsx delete mode 100644 src/Components/Molecules/SwipeUpModal/SwipeUpModal.style.tsx delete mode 100644 src/Components/Molecules/SwipeUpModal/SwipeUpModal.tsx delete mode 100644 src/Components/Molecules/SwipeUpModal/index.ts delete mode 100644 src/Components/Molecules/SwitchList/SwitchList.stories.tsx delete mode 100644 src/Components/Molecules/SwitchList/SwitchList.style.tsx delete mode 100644 src/Components/Molecules/SwitchList/SwitchList.tsx delete mode 100644 src/Components/Molecules/TabSwitch/TabSwitch.model.ts delete mode 100644 src/Components/Molecules/TabSwitch/TabSwitch.style.tsx delete mode 100644 src/Components/Molecules/TabSwitch/TabSwitch.tsx delete mode 100644 src/Components/Molecules/TextInput/TextInput.stories.tsx delete mode 100644 src/Components/Molecules/TextInput/TextInput.tsx delete mode 100644 src/Components/Molecules/TextInput/index.ts delete mode 100644 src/Components/Organisms/FancyBoxSet/FancyBoxSet.stories.tsx delete mode 100644 src/Components/Organisms/FancyBoxSet/FancyBoxSet.tsx delete mode 100644 src/Components/Organisms/FancyBoxSet/index.ts delete mode 100644 src/Components/Organisms/FancyButton/FancyButton.stories.tsx delete mode 100644 src/Components/Organisms/FancyButton/FancyButton.style.tsx delete mode 100644 src/Components/Organisms/FancyButton/FancyButton.tsx delete mode 100644 src/Components/Organisms/FancyButton/IFancyButton.model.ts delete mode 100644 src/Components/Organisms/FancyButton/index.ts delete mode 100644 src/Components/Organisms/FancyChip/FancyChip.model.ts delete mode 100644 src/Components/Organisms/FancyChip/FancyChip.stories.tsx delete mode 100644 src/Components/Organisms/FancyChip/FancyChip.style.tsx delete mode 100644 src/Components/Organisms/FancyChip/FancyChip.tsx delete mode 100644 src/Components/Organisms/FancyChip/index.ts delete mode 100644 src/Components/Organisms/FancyChipList/FancyChipList.stories.tsx delete mode 100644 src/Components/Organisms/FancyChipList/FancyChipList.style.tsx delete mode 100644 src/Components/Organisms/FancyChipList/FancyChipList.tsx delete mode 100644 src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.mdx delete mode 100644 src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx delete mode 100644 src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx delete mode 100644 src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx delete mode 100644 src/Components/Organisms/FancyCodeVerificationInput/index.ts delete mode 100644 src/Components/Organisms/FancyColorPicker/FancyColorPicker.stories.tsx delete mode 100644 src/Components/Organisms/FancyColorPicker/FancyColorPicker.tsx delete mode 100644 src/Components/Organisms/FancyColorPicker/colorPickerUtils.ts delete mode 100644 src/Components/Organisms/FancyColorPicker/index.ts delete mode 100644 src/Components/Organisms/FancyDateInput/FancyDateInput.stories.tsx delete mode 100644 src/Components/Organisms/FancyDateInput/FancyDateInput.style.tsx delete mode 100644 src/Components/Organisms/FancyDateInput/FancyDateInput.tsx delete mode 100644 src/Components/Organisms/FancyDateInput/index.ts delete mode 100644 src/Components/Organisms/FancyDatePicker/FancyDatePicker.stories.tsx delete mode 100644 src/Components/Organisms/FancyDatePicker/FancyDatePicker.style.tsx delete mode 100644 src/Components/Organisms/FancyDatePicker/FancyDatePicker.tsx delete mode 100644 src/Components/Organisms/FancyDatePicker/index.ts delete mode 100644 src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.stories.tsx delete mode 100644 src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx delete mode 100644 src/Components/Organisms/FancyDropDownMenue/index.ts delete mode 100644 src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx delete mode 100644 src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.tsx delete mode 100644 src/Components/Organisms/FancyDropDownSelect/index.ts delete mode 100644 src/Components/Organisms/FancyEditBar/EditBarItemsStructure/ButtonSettings.tsx delete mode 100644 src/Components/Organisms/FancyEditBar/EditBarItemsStructure/EditBarIcons.tsx delete mode 100644 src/Components/Organisms/FancyEditBar/EditBarItemsStructure/IEditbarObjectSturcture.model.ts delete mode 100644 src/Components/Organisms/FancyEditBar/EditBarItemsStructure/objectSettingsSection.ts delete mode 100644 src/Components/Organisms/FancyEditBar/EditBarSettings.tsx delete mode 100644 src/Components/Organisms/FancyEditBar/FancyEditBar.state.tsx delete mode 100644 src/Components/Organisms/FancyEditBar/FancyEditBar.tsx delete mode 100644 src/Components/Organisms/FancyEditBar/functions/ElementsObjectMapper.tsx delete mode 100644 src/Components/Organisms/FancyEditBar/index.ts delete mode 100644 src/Components/Organisms/FancyEditBar/languagesEditBar.ts delete mode 100644 src/Components/Organisms/FancyModal/FancyModal.mdx delete mode 100644 src/Components/Organisms/FancyModal/FancyModal.state.tsx delete mode 100644 src/Components/Organisms/FancyModal/FancyModal.stories.tsx delete mode 100644 src/Components/Organisms/FancyModal/FancyModal.tsx delete mode 100644 src/Components/Organisms/FancyModal/index.ts delete mode 100644 src/Components/Organisms/FancyNumberInput/FancyNumberInput.tsx delete mode 100644 src/Components/Organisms/FancyNumberInput/index.ts delete mode 100644 src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx delete mode 100644 src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.tsx delete mode 100644 src/Components/Organisms/FancyPasswordInput/index.ts delete mode 100644 src/Components/Organisms/FancyRadio/FancyRadio.tsx delete mode 100644 src/Components/Organisms/FancyRadio/index.ts delete mode 100644 src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts delete mode 100644 src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx delete mode 100644 src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.style.tsx delete mode 100644 src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.tsx delete mode 100644 src/Components/Organisms/FancyRangeSlider/index.ts delete mode 100644 src/Components/Organisms/FancySearchBar/FancySearchBar.stories.tsx delete mode 100644 src/Components/Organisms/FancySearchBar/FancySearchBar.tsx delete mode 100644 src/Components/Organisms/FancySearchBar/index.ts delete mode 100644 src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.mdx delete mode 100644 src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts delete mode 100644 src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx delete mode 100644 src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx delete mode 100644 src/Components/Organisms/FancySwipeUpModal/index.ts delete mode 100644 src/Components/Organisms/FancyTextInput/FancyTextInput.stories.tsx delete mode 100644 src/Components/Organisms/FancyTextInput/FancyTextInput.tsx delete mode 100644 src/Components/Organisms/FancyTextInput/index.ts delete mode 100644 src/Components/Organisms/FancyToastMessage/FancyToastMessage.state.tsx delete mode 100644 src/Components/Organisms/FancyToastMessage/FancyToastMessage.stories.tsx delete mode 100644 src/Components/Organisms/FancyToastMessage/FancyToastMessage.style.tsx delete mode 100644 src/Components/Organisms/FancyToastMessage/FancyToastMessage.tsx delete mode 100644 src/Components/Organisms/FancyToastMessage/index.ts delete mode 100644 src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx delete mode 100644 src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.style.tsx delete mode 100644 src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.tsx delete mode 100644 src/Components/Templates/FancyBottomBarIcon/index.ts delete mode 100644 src/Components/Templates/FancyFlexBox/FancyFlexBox.model.ts delete mode 100644 src/Components/Templates/FancyFlexBox/FancyFlexBox.style.tsx delete mode 100644 src/Components/Templates/FancyFlexBox/FancyFlexBox.tsx delete mode 100644 src/Components/Templates/FancyFlexBox/index.ts delete mode 100644 src/Components/Templates/FancyGrid/FancyGrid.mdx delete mode 100644 src/Components/Templates/FancyGrid/FancyGrid.stories.tsx delete mode 100644 src/Components/Templates/FancyGrid/FancyGrid.tsx delete mode 100644 src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.mdx delete mode 100644 src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx delete mode 100644 src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.tsx delete mode 100644 src/Components/Templates/FancyGrid/FancyGridItem/index.ts delete mode 100644 src/Components/Templates/FancyGrid/index.ts delete mode 100644 src/Components/Templates/FancyHandyNav/FancyHandyNav.store.ts delete mode 100644 src/Components/Templates/FancyHandyNav/FancyHandyNav.stories.tsx delete mode 100644 src/Components/Templates/FancyHandyNav/FancyHandyNav.tsx delete mode 100644 src/Components/Templates/FancyHandyNav/index.ts delete mode 100644 src/Components/Templates/FancyInfoCard/FancyInfoCard.stories.tsx delete mode 100644 src/Components/Templates/FancyInfoCard/FancyInfoCard.tsx delete mode 100644 src/Components/Templates/FancyInfoCard/index.ts delete mode 100644 src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.stories.tsx delete mode 100644 src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.tsx delete mode 100644 src/Components/Templates/FancyMenueComponent/FancyMenu/index.ts delete mode 100644 src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.stories.tsx delete mode 100644 src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx delete mode 100644 src/Components/Templates/FancyMenueComponent/FancyMenuItem/index.ts delete mode 100644 src/Components/Templates/FancyRadioList/FancyRadioList.model.ts delete mode 100644 src/Components/Templates/FancyRadioList/FancyRadioList.stories.tsx delete mode 100644 src/Components/Templates/FancyRadioList/FancyRadioList.style.tsx delete mode 100644 src/Components/Templates/FancyRadioList/FancyRadioList.tsx delete mode 100644 src/Components/Templates/FancyRadioList/index.ts delete mode 100644 src/Components/Templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx delete mode 100644 src/Components/Templates/Inputs/FancyDateDropDown/index.ts delete mode 100644 src/Components/icons/SVGCheckMark/SVGCheckMark.tsx delete mode 100644 src/Components/icons/SVGCheckMark/index.ts delete mode 100644 src/Components/icons/SVGChevronLeft/SVGChevronLeft.tsx delete mode 100644 src/Components/icons/SVGChevronLeft/index.ts delete mode 100644 src/Components/icons/SVGChevronRight/SVGChevronRight.tsx delete mode 100644 src/Components/icons/SVGChevronRight/index.ts delete mode 100644 src/Components/icons/SVGClipBoardIcon/SVGClipBoardIcon.tsx delete mode 100644 src/Components/icons/SVGClipBoardIcon/index.ts delete mode 100644 src/Components/icons/SVGClipBoardIconChecked/SVGClipBoardIconChecked.tsx delete mode 100644 src/Components/icons/SVGClipBoardIconChecked/index.ts delete mode 100644 src/Components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx delete mode 100644 src/Components/icons/SVGEyeCrossed/index.ts delete mode 100644 src/Components/icons/SVGEyeOpen/SVGEyeOpen.tsx delete mode 100644 src/Components/icons/SVGEyeOpen/index.ts delete mode 100644 src/Components/icons/SVGLoadingArrows/SVGLoadingArrows.tsx delete mode 100644 src/Components/icons/SVGLoadingArrows/index.ts delete mode 100644 src/Components/icons/SVGPlus/SVGPlus.tsx delete mode 100644 src/Components/icons/SVGPlus/index.ts delete mode 100644 src/Components/icons/SVGSearch/SVGSearch.tsx delete mode 100644 src/Components/icons/SVGSearch/index.ts delete mode 100644 src/Components/icons/SVGXCircle/SVGXCircle.tsx delete mode 100644 src/Components/icons/SVGXCircle/index.ts delete mode 100644 src/Components/utils/hooks/useIntersectionObserver/index.ts delete mode 100644 src/Components/utils/hooks/useIntersectionObserver/useIntersectionObserver.tsx delete mode 100644 src/Components/utils/hooks/useSlider/IUseSlider.model.ts delete mode 100644 src/Components/utils/hooks/useSlider/useSilder.tsx delete mode 100644 src/Components/utils/hooks/useWindowDimensions/index.ts delete mode 100644 src/Components/utils/hooks/useWindowDimensions/useWindowDimensions.tsx delete mode 100644 src/Components/utils/variables/colorFormats.ts diff --git a/src/Components/Atoms/ActionWrapper/ActionWrapper.mdx b/src/Components/Atoms/ActionWrapper/ActionWrapper.mdx deleted file mode 100644 index 9a9b8e5af..000000000 --- a/src/Components/Atoms/ActionWrapper/ActionWrapper.mdx +++ /dev/null @@ -1,57 +0,0 @@ -# ActionWrapper - -`ActionWrapper` is a versatile React functional component designed to conditionally render either a `; -}; - -export default ActionWrapper; diff --git a/src/Components/Atoms/ActionWrapper/index.ts b/src/Components/Atoms/ActionWrapper/index.ts deleted file mode 100644 index bf8df9187..000000000 --- a/src/Components/Atoms/ActionWrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ActionWrapper } from './ActionWrapper'; diff --git a/src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.stories.tsx b/src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.stories.tsx deleted file mode 100644 index 958337587..000000000 --- a/src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { HTMLAttributes } from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { AlignedInputLabel } from './AlignedInputLabel'; -import { IAlignedInputLabel } from './TalignedInputLabel.model'; -import Typography from '../Typography/Typography'; - -//This is a helper component to show the styled component in the story -const HelperComponent = (props: IAlignedInputLabel & HTMLAttributes) => ( - - Hello World - -); - -// Give the component a more meaningful name in the storybook -HelperComponent.displayName = 'AlignedInputLabel'; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -const meta = { - component: HelperComponent, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout - docs: { - description: { - component: - 'The input label wich is aligned left or centered.
- the alignment is set by the $align prop.
- the color changes depending on the $isActive prop', - }, - }, - }, - argTypes: { - $align: { - options: ['left', 'center'], - control: { type: 'radio' }, - }, - $colorState: { - control: { type: 'radio' }, - options: ['error', 'active', 'default'], - }, - $layer: { - control: { type: 'range', min: 1, max: 10 }, - }, - $themeType: { - options: ['primary', 'secondary'], - control: { type: 'radio' }, - }, - }, - - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Primary: Story = { - args: { - $align: 'left', - $colorState: 'default', - $themeType: 'secondary', - $layer: 4, - }, - render: (args: IAlignedInputLabel) => , -}; diff --git a/src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.tsx b/src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.tsx deleted file mode 100644 index b1c80d3bd..000000000 --- a/src/Components/Atoms/AlignedInputLabel/AlignedInputLabel.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { styled } from 'styled-components'; - -import InputLabel from '../InputLabel/InputLabel'; -import { getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { IAlignedInputLabel } from './TalignedInputLabel.model'; - -//the aligned label is only with align left or centerd {align?: string; active?: boolean} -// eslint-disable-next-line react-refresh/only-export-components -export const AlignedInputLabel = styled(InputLabel)` - display: flex; - align-items: flex-end; - margin-bottom: ${({ theme }) => theme.spacing.xxs}; - justify-content: ${({ $align }) => ($align === 'left' ? 'flex-start' : $align === 'center' ? 'center' : 'flex-end')}; - color: ${({ $colorState, theme, $themeType = 'secondary', $layer = 4 }) => { - switch ($colorState) { - case 'error': - return theme.colors.error[0]; - case 'active': - return theme.colors.accent[0]; - default: - return getTextColor({ theme, $themeType, $textLayer: $layer }); - } - }}; -`; - -export default AlignedInputLabel; diff --git a/src/Components/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts b/src/Components/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts deleted file mode 100644 index b24a60833..000000000 --- a/src/Components/Atoms/AlignedInputLabel/TalignedInputLabel.model.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; -import { TThemeTypes } from '@/interface/TUiColors'; - -export type TAlign = 'left' | 'center'; - -export interface IAlignedInputLabel { - $align?: TAlign; - $colorState?: 'error' | 'active' | 'default'; - theme?: TTheme; - $themeType?: TThemeTypes; - $layer?: TLayer; -} diff --git a/src/Components/Atoms/AlignedInputLabel/index.ts b/src/Components/Atoms/AlignedInputLabel/index.ts deleted file mode 100644 index eb359373b..000000000 --- a/src/Components/Atoms/AlignedInputLabel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AlignedInputLabel } from './AlignedInputLabel'; diff --git a/src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.stories.tsx b/src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.stories.tsx deleted file mode 100644 index bae20dbb2..000000000 --- a/src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; - -import { AnimatedInputLabel } from './AnimatedInputLabel'; -import { IAnimatedInputLabel } from './TAnimatedInputLabel.model'; -import Typography from '../Typography/Typography'; - -// This is a helper component to show the styled component in the story -const HelperComponent = (props: IAnimatedInputLabel & HTMLAttributes) => ( - - Hello World - -); - -// Give the component a more meaningful name in the storybook -HelperComponent.displayName = 'AnimatedInputLabel'; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -const meta = { - title: 'components/atoms/AnimatedInputLabel', - component: HelperComponent, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout - layout: 'centered', - docs: { - description: { - component: - 'The input label wich hase some colors and an animation.
- the color changes depending on the $colorState prop.
- the animation is triggered by the $moveUp prop', - }, - }, - }, - argTypes: { - $moveUp: { - control: { type: 'boolean' }, - }, - $colorState: { - control: { type: 'radio' }, - options: ['error', 'active', 'default'], - }, - $layer: { - control: { type: 'range', min: 1, max: 10 }, - }, - $themeType: { - options: ['primary', 'secondary'], - control: { type: 'radio' }, - }, - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Primary: Story = { - args: { - $moveUp: false, - $colorState: 'default', - $themeType: 'secondary', - $layer: 4, - }, - render: (args) => , -}; diff --git a/src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.tsx b/src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.tsx deleted file mode 100644 index 71c59c0f6..000000000 --- a/src/Components/Atoms/AnimatedLabel/AnimatedInputLabel.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { styled, css } from 'styled-components'; - -import InputLabel from '@/components/atoms/InputLabel/InputLabel'; -import { IAnimatedInputLabel } from './TAnimatedInputLabel.model'; - -import { getTextColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -const activeHandler = (align: string, $moveUp?: boolean) => { - if (align !== 'center') { - return css` - bottom: 0; - left: 0; - ${$moveUp - ? css` - transform: translateY(-20px); - ` - : ''} - `; - } else { - return css` - bottom: 0; - left: 50%; - text-align: center; - ${$moveUp - ? css` - transform: translateY(-20px) translate(-50%); - ` - : 'transform: translate(-50%);'}; - `; - } -}; - -// --------------------------------------------------------------------------- // -// ---------- The input label wich hase some colors and an animation --------- // -// --------------------------------------------------------------------------- // -// eslint-disable-next-line react-refresh/only-export-components -export const AnimatedInputLabel = styled(InputLabel)` - position: absolute; - padding: 12px 0 5px; - color: ${({ $colorState, theme, $themeType = 'secondary', $layer = 4 }) => { - switch ($colorState) { - case 'error': - return theme.colors.error[0]; - case 'active': - return theme.colors.accent[0]; - default: - return getTextColor({ theme, $themeType, $textLayer: $layer }); - } - }}; - - ${({ $align, $moveUp }) => activeHandler($align!, $moveUp)}; -`; - -export default AnimatedInputLabel; diff --git a/src/Components/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts b/src/Components/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts deleted file mode 100644 index 2451d2cd1..000000000 --- a/src/Components/Atoms/AnimatedLabel/TAnimatedInputLabel.model.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; -import { TThemeTypes } from '@/interface/TUiColors'; - -export interface IAnimatedInputLabel { - $align?: 'center' | 'left'; - $moveUp?: boolean; - $colorState?: 'error' | 'active' | 'default'; - $themeType?: TThemeTypes; - $layer?: TLayer; - theme?: TTheme; -} diff --git a/src/Components/Atoms/AnimatedLabel/index.ts b/src/Components/Atoms/AnimatedLabel/index.ts deleted file mode 100644 index 08161e5b3..000000000 --- a/src/Components/Atoms/AnimatedLabel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AnimatedInputLabel } from './AnimatedInputLabel'; diff --git a/src/Components/Atoms/AvilableDot/AvailableDot.tsx b/src/Components/Atoms/AvilableDot/AvailableDot.tsx deleted file mode 100644 index d9c6331b1..000000000 --- a/src/Components/Atoms/AvilableDot/AvailableDot.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { styled } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -// --------------------------------------------------------------------------- // -// ---------- A little Circle that indicates if something is avilable -------- // -// --------------------------------------------------------------------------- // -export type IAvailableDot = 'completly' | 'partially' | 'not' | 'transparent'; -const AvailableDot = styled.div<{ $available?: IAvailableDot; theme?: TTheme }>` - width: 4px; - height: 4px; - border-radius: ${({ theme }) => theme.borderRadius.complete}; - background-color: ${({ $available = 'completly', theme }) => { - switch ($available) { - case 'completly': - return theme.colors.success[0]; - case 'partially': - return theme.colors.warning[0]; - case 'not': - return theme.colors.error[0]; - case 'transparent': - return 'transparent'; - } - }}; -`; - -AvailableDot.displayName = 'AvailableDot'; - -export default AvailableDot; diff --git a/src/Components/Atoms/AvilableDot/AvilableDot.stories.tsx b/src/Components/Atoms/AvilableDot/AvilableDot.stories.tsx deleted file mode 100644 index 69f014c35..000000000 --- a/src/Components/Atoms/AvilableDot/AvilableDot.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import AvailableDot from './AvailableDot'; - -// Define metadata for the story -const meta = { - component: AvailableDot, - parameters: { - layout: 'centered', - docs: { - description: { - component: - 'A little Circle that indicates if something is avilable.
- the color changes depending on the $available prop.
- the size is fixed.', - }, - }, - }, - - // Define arguments for the story - argTypes: { - $available: { - options: ['completly', 'partially', 'not', 'transparent'], - control: { type: 'radio' }, - }, - }, - - // 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: { - $available: 'completly', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/AvilableDot/index.ts b/src/Components/Atoms/AvilableDot/index.ts deleted file mode 100644 index a0cc0968b..000000000 --- a/src/Components/Atoms/AvilableDot/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as AvilableDot } from './AvailableDot'; diff --git a/src/Components/Atoms/BackDrop/BackDrop.stories.tsx b/src/Components/Atoms/BackDrop/BackDrop.stories.tsx deleted file mode 100644 index abb961e61..000000000 --- a/src/Components/Atoms/BackDrop/BackDrop.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import BackDrop from './BackDrop'; - -// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export -const meta = { - component: BackDrop, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout - layout: 'centered', - docs: { - description: { - component: 'Only a backdrop for some components with a onclick listener', - }, - }, - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs - tags: ['autodocs'], - // More on argTypes: https://storybook.js.org/docs/react/api/argtypes - argTypes: {}, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args -export const Primary: Story = { - render: (args) => , - args: { - isOpen: true, - }, -}; diff --git a/src/Components/Atoms/BackDrop/BackDrop.tsx b/src/Components/Atoms/BackDrop/BackDrop.tsx deleted file mode 100644 index c7a16d532..000000000 --- a/src/Components/Atoms/BackDrop/BackDrop.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { animated, useSpring } from '@react-spring/web'; -import { styled } from 'styled-components'; - -const BackdropContainer = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - z-index: 100; -`; - -interface IBackDrop { - isOpen: boolean; - onClick?: () => void; -} -// --------------------------------------------------------------------------- // -// ------- Only a backdrop for some components with a onclick listener ------- // -// --------------------------------------------------------------------------- // -export default function BackDrop({ isOpen, onClick }: IBackDrop) { - const [shouldRender, setRender] = useState(isOpen); - - const fade = useSpring({ - opacity: isOpen ? 0.5 : 0, - onRest: () => setRender(isOpen), - }); - - useEffect(() => { - if (isOpen) setRender(true); - }, [isOpen]); - - return shouldRender ? : null; -} diff --git a/src/Components/Atoms/BackDrop/index.ts b/src/Components/Atoms/BackDrop/index.ts deleted file mode 100644 index 94f74dfcd..000000000 --- a/src/Components/Atoms/BackDrop/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as BackDrop } from './BackDrop'; diff --git a/src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx b/src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx deleted file mode 100644 index 349f349ca..000000000 --- a/src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import { CheckerBoardPattern } from '.'; - -// Define metadata for the story -const meta = { - component: CheckerBoardPattern, - parameters: { - docs: { - description: { - component: 'The CheckerBoardPattern component is a Gradient pattern that can be used as a background for other components.', - }, - }, - }, - - // Define arguments for the story - argTypes: {}, - - // 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: { - opacity: 1, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.tsx b/src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.tsx deleted file mode 100644 index add0abf79..000000000 --- a/src/Components/Atoms/CheckerBoardPattern/CheckerBoardPattern.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { styled } from 'styled-components'; - -const CheckerBoardPattern = styled.div<{ opacity?: number }>` - position: absolute; - height: 20px; - height: 100%; - width: 100%; - background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%); - background-size: 14px 14px; - background-position: - 0 0, - 0 7px, - 7px -7px, - -7px 0px; - opacity: ${({ opacity }) => opacity || 0.05}; -`; - -export default CheckerBoardPattern; diff --git a/src/Components/Atoms/CheckerBoardPattern/index.ts b/src/Components/Atoms/CheckerBoardPattern/index.ts deleted file mode 100644 index 7da7d04d6..000000000 --- a/src/Components/Atoms/CheckerBoardPattern/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CheckerBoardPattern } from './CheckerBoardPattern'; diff --git a/src/Components/Atoms/ColorDisplay/ColorDisplay.stories.tsx b/src/Components/Atoms/ColorDisplay/ColorDisplay.stories.tsx deleted file mode 100644 index 3afcf8014..000000000 --- a/src/Components/Atoms/ColorDisplay/ColorDisplay.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import ColorDisplay from './ColorDisplay'; -// Define metadata for the story -const meta = { - component: ColorDisplay, - parameters: { - docs: { - description: { - component: 'The ColorDisplay component is for displaying a color with a text label and the color and it can be copyd on click', - }, - }, - }, - - // Define arguments for the story - argTypes: { - color: { - control: { type: 'color' }, - }, - opacity: { - control: { type: 'range', min: 0, max: 1, step: 0.1 }, - }, - fullHeight: { - control: { type: 'boolean' }, - }, - showText: { - control: { type: 'boolean' }, - }, - }, - - // 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: { - color: 'red', - opacity: 1, - fullHeight: false, - showText: true, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/ColorDisplay/ColorDisplay.style.tsx b/src/Components/Atoms/ColorDisplay/ColorDisplay.style.tsx deleted file mode 100644 index cbc468ffe..000000000 --- a/src/Components/Atoms/ColorDisplay/ColorDisplay.style.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import Color from 'color'; -import { styled } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import simpleColorTransition from '../../../design/designFunctions/simpleColorTransition/simpleTransition'; -import { TTheme } from '@/interface/TTheme'; - -const colorCalculation = ({ theme, $isBright, $isDarkTheme }: { theme: TTheme; $isBright: boolean; $isDarkTheme: boolean }) => { - if ($isDarkTheme) return $isBright ? theme.colors.primary[0] : theme.colors.secondary[0]; - - return $isBright ? theme.colors.secondary[0] : theme.colors.primary[0]; -}; - -export const Content = styled.div<{ $isBright: boolean; theme: TTheme; $isDarkTheme: boolean }>` - position: absolute; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - top: 0; - left: 0; - z-index: 2; - gap: 3px; - font-size: ${fontSize.sm}; - color: ${({ theme, $isBright, $isDarkTheme }) => colorCalculation({ theme, $isBright, $isDarkTheme })}; - ${simpleColorTransition} - - p { - user-select: none; - } - - &:active, - &:hover { - color: ${({ theme, $isBright, $isDarkTheme }) => ($isBright && $isDarkTheme ? theme.colors.primary[4] : theme.colors.secondary[4])}; - } -`; - -export const WrapperSVG = styled.div` - position: absolute; - right: 8px; - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 1px; -`; - -export const Wrapper = styled.div<{ $fullHeight?: boolean }>` - position: relative; - cursor: pointer; - width: 100%; - height: ${({ $fullHeight }) => ($fullHeight ? '100%' : '20px')}; - touch-action: manipulation; -`; - -interface IColorDisplayColor { - color?: string; - opacity?: number; -} - -const colorDisplayColor = ({ color, opacity }: IColorDisplayColor) => { - const checkOpacity = opacity === undefined ? 1 : opacity; - const transformedColor = Color(color).rgb().alpha(checkOpacity); - return { - style: { - background: `${transformedColor.toString()}`, - }, - }; -}; - -export const ColorDisplayContainer = styled.div.attrs(colorDisplayColor)` - position: absolute; - width: 100%; - height: 100%; - border-radius: ${({ theme }) => theme.borderRadius.sm}; - z-index: 1; -`; diff --git a/src/Components/Atoms/ColorDisplay/ColorDisplay.tsx b/src/Components/Atoms/ColorDisplay/ColorDisplay.tsx deleted file mode 100644 index 16151512c..000000000 --- a/src/Components/Atoms/ColorDisplay/ColorDisplay.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { useState } from 'react'; -import Color from 'color'; - -import Typography from '../Typography/Typography'; -import copyToClipboard from '../../utils/functions/copyToClipBoard'; -import CheckerBoardPattern from '../CheckerBoardPattern/CheckerBoardPattern'; -import { ColorDisplayContainer, Wrapper, Content, WrapperSVG } from './ColorDisplay.style'; -import ClipBoardIcon from '../../icons/SVGClipBoardIcon/SVGClipBoardIcon'; -import ClipBoardIconCheck from '../../icons/SVGClipBoardIconChecked/SVGClipBoardIconChecked'; -import themeStore from '../../../design/theme/themeStore/themeStore'; - -// --------------------------------------------------------------------------- // -// ----- The main ColorDisplay Component for display the color in a box ------ // -// --------------------------------------------------------------------------- // -interface IColorDisplay { - color: Color | string; - opacity?: number; - showText?: boolean; - fullHeight?: boolean; -} -export default function ColorDisplay({ color, opacity, showText, fullHeight }: IColorDisplay) { - const [copyd, setCopyd] = useState(false); - const isDarkTheme = themeStore.getState().isDarkTheme; - - opacity = opacity !== undefined ? opacity : 1; - const isBright = Color(color).isLight() && opacity > 0.5; - - const copyValue = () => { - copyToClipboard(color.toString()) - .then(() => { - setCopyd(true); - setTimeout(() => setCopyd(false), 1000); - }) - .catch((err) => { - console.error('Failed to copy: ', err); - }); - }; - - return ( - - - {showText && {color.toString()}} - {copyd ? : } - - - - - ); -} diff --git a/src/Components/Atoms/ColorDisplay/index.ts b/src/Components/Atoms/ColorDisplay/index.ts deleted file mode 100644 index 174975c64..000000000 --- a/src/Components/Atoms/ColorDisplay/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ColorDisplay } from './ColorDisplay'; diff --git a/src/Components/Atoms/ColorIndicator/ColorIndicator.style.tsx b/src/Components/Atoms/ColorIndicator/ColorIndicator.style.tsx deleted file mode 100644 index 536d30895..000000000 --- a/src/Components/Atoms/ColorIndicator/ColorIndicator.style.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { styled, css } from 'styled-components'; - -import { boxShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TTheme } from '@/interface/TTheme'; - -export const WrapperIndicator = styled.div<{ $isActive: boolean }>` - position: absolute; - width: ${({ $isActive }) => ($isActive ? '70px' : '0px')}; - height: ${({ $isActive }) => ($isActive ? '70px' : '0px')}; - z-index: 10; - left: 50%; - transform: translate(-50%); - transition: - width 0.15s ease-in-out, - height 0.15s ease-in-out; - pointer-events: none; -`; - -export const Indicator = styled.div.attrs<{ $color: string; theme: TTheme }>(({ $color }) => ({ - style: { - backgroundColor: $color, - }, -}))<{ $isActive: boolean }>` - border-radius: 50% 50% 50% 0; - border: 1.5px solid ${({ theme }) => theme.colors.secondary[0]}; - background-color: ${({ theme }) => theme.colors.secondary[0]}; - ${boxShadow.sm}; - position: absolute; - top: ${({ $isActive }) => ($isActive ? '-105px' : '-5px')}; - width: 100%; - height: 100%; - left: 50%; - transform: ${({ $isActive }) => - $isActive ? css`translate(-50%) scale(1) rotate(-45deg)` : css`translate(-50%) scale(0) rotate(-45deg)`}; - user-select: none; - transition: - transform 0.15s ease-in-out, - top 0.15s ease-in-out; -`; diff --git a/src/Components/Atoms/ColorIndicator/ColorIndicator.tsx b/src/Components/Atoms/ColorIndicator/ColorIndicator.tsx deleted file mode 100644 index 75b4fe33d..000000000 --- a/src/Components/Atoms/ColorIndicator/ColorIndicator.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import { Indicator, WrapperIndicator } from './ColorIndicator.style'; -import Color from 'color'; - -interface IColorIndicator { - position?: { x?: number | string; y?: number | string }; - color: string; - isActive: boolean; -} -export default function ColorIndicator({ position, color, isActive }: IColorIndicator) { - const positionTop = position?.y ?? '50%'; - const positionLeft = position?.x ?? '50%'; - - return ( - - - - ); -} diff --git a/src/Components/Atoms/ColorIndicator/Colorindicator.stories.tsx b/src/Components/Atoms/ColorIndicator/Colorindicator.stories.tsx deleted file mode 100644 index 106b66550..000000000 --- a/src/Components/Atoms/ColorIndicator/Colorindicator.stories.tsx +++ /dev/null @@ -1,46 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import ColorIndicator from './ColorIndicator'; -// Define metadata for the story -const meta = { - title: 'components/atoms/ColorIndicator', - component: ColorIndicator, - parameters: { - docs: { - description: { - component: - 'The ColorIndicator component is for displaying a color, its can be used to show the color of a color picker and move with the position of the mouse', - }, - }, - }, - - // Define arguments for the story - argTypes: {}, - - // 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: { - color: 'red', - isActive: true, - position: { x: '50%', y: '50%' }, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/ColorIndicator/index.ts b/src/Components/Atoms/ColorIndicator/index.ts deleted file mode 100644 index 98f4ddf9e..000000000 --- a/src/Components/Atoms/ColorIndicator/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ColorIndicator } from './ColorIndicator'; diff --git a/src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.mdx b/src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.mdx deleted file mode 100644 index 5f6837265..000000000 --- a/src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.mdx +++ /dev/null @@ -1,52 +0,0 @@ -# ComponentAsWrapper - -`ComponentAsWrapper` is a React component designed for dynamic component wrapping. It allows for the injection of children into a specified wrapper component, enabling dynamic composition of React elements. This is particularly useful when the wrapping element needs to be determined at runtime or passed as a prop from a parent component. - -## Props - -The component accepts the following props: - -- `wrapper`: A React element that will be used as the wrapper for the children. This is not just a component type but an actual element. -- `children`: The content or elements that will be wrapped inside the `wrapper`. - -## Usage - -The `ComponentAsWrapper` is straightforward to use. You pass a React element as the `wrapper` and any children you want to be wrapped. - -### Basic Example - -In a basic scenario, you might use `ComponentAsWrapper` to dynamically decide the wrapper based on certain conditions: - -```jsx -import React from 'react'; -import ComponentAsWrapper from './path/to/ComponentAsWrapper'; - -function ExampleComponent({ useDiv }) { - const WrapperElement = useDiv ?
:
; - - return ( - -

This content will be wrapped based on the condition

- - ); -} - -export default ExampleComponent; -``` - -In this example, `ComponentAsWrapper` is used to conditionally wrap the content in either a `div` or a `section`, depending on the `useDiv` prop. The `wrapper` prop takes a React element (`
` or `
`), and the `children` prop takes the content (`

` element) to be wrapped. - -## Advanced Usage - -`ComponentAsWrapper` can also be used in more advanced scenarios, such as when building a component library where you want to give users the ability to define their own wrapper elements. - -For example, in a library's modal component, you could allow users to specify their own wrapper element for the modal content: - -```jsx -// In your modal component file -{modalContent} -``` - -This makes `ComponentAsWrapper` a powerful tool for building flexible and reusable component libraries. - -By leveraging the `ComponentAsWrapper`, developers can create highly customizable UI components that adapt to various use cases, enhancing the overall flexibility and maintainability of the application. diff --git a/src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.tsx b/src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.tsx deleted file mode 100644 index d37a964c0..000000000 --- a/src/Components/Atoms/ComponentAsWrapper/ComponentAsWrapper.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -interface Props { - wrapper: React.ReactElement; - children: React.ReactNode; -} -// --------------------------------------------------------------------------- // -// --------- This component is used when you have a dynamic wrapper ---------- // -// --------------------------------------------------------------------------- // -export default function ComponentAsWrapper({ wrapper, children }: Props) { - // Clone the element to inject children - return React.cloneElement(wrapper, {}, children); -} diff --git a/src/Components/Atoms/CustomeDropDownNOTINUSE/CustomeDropDown.tsx b/src/Components/Atoms/CustomeDropDownNOTINUSE/CustomeDropDown.tsx deleted file mode 100644 index c2c18a130..000000000 --- a/src/Components/Atoms/CustomeDropDownNOTINUSE/CustomeDropDown.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import React, { useState } from 'react'; -import { styled } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import { TTheme } from '@/interface/TTheme'; - -// Styled dropdown container -const DropDownContainer = styled.div<{ theme: TTheme }>` - position: relative; - display: inline-block; - font-size: ${fontSize.md}; - color: ${({ theme }) => theme.colors.secondary.main}; - user-select: none; -`; - -// Styled button to trigger the dropdown -const DropDownTrigger = styled.div<{ theme: TTheme }>` - background-color: ${({ theme }) => theme.colors.primary.main}; - padding: ${({ theme }) => theme.spacing.sm}; - cursor: pointer; - text-align: center; -`; - -// Styled dropdown menu -const DropDownMenu = styled.div<{ $isOpen: boolean; theme: TTheme }>` - display: ${(props) => (props.$isOpen ? 'block' : 'none')}; - position: absolute; - background-color: ${({ theme }) => theme.colors.primary.main}; - min-width: 160px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); - z-index: 1; -`; - -// Styled dropdown item -const DropDownItem = styled.div<{ theme: TTheme }>` - padding: 12px 16px; - display: block; - cursor: pointer; - - &:hover { - background-color: ${({ theme }) => theme.colors.accent.main}; - } -`; - -interface CustomDropdownProps { - values?: string[]; - onSelect?: (value: string) => void; -} - -//This is not a Finished component ist for later replacinge the HTML Select with a custom Dropdown (Searchselect, checkboxselect, etc.) -const CustomDropdown: React.FC = (props) => { - const { values, onSelect } = { ...defaultProps, ...props }; - const [isOpen, setIsOpen] = useState(false); - const [selectedValue, setSelectedValue] = useState(null); - - const handleSelect = (value: string) => { - setSelectedValue(value); - setIsOpen(false); - onSelect && onSelect(value); - }; - - return ( - - setIsOpen(!isOpen)}>{selectedValue || 'Select an item'} - - {values!.map((value, index) => ( - handleSelect(value)}> - {value} - - ))} - - - ); -}; - -export default CustomDropdown; - -const defaultProps: CustomDropdownProps = { - values: ['test', 'test2', 'test3'], -}; diff --git a/src/Components/Atoms/DateNumberAtom/DateNumberAtom.stories.tsx b/src/Components/Atoms/DateNumberAtom/DateNumberAtom.stories.tsx deleted file mode 100644 index b7becc4b6..000000000 --- a/src/Components/Atoms/DateNumberAtom/DateNumberAtom.stories.tsx +++ /dev/null @@ -1,93 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import DateNumberAtom from './DateNumberAtom'; -// Define metadata for the story -const meta = { - component: DateNumberAtom, - parameters: { - docs: { - description: { - component: - 'The DateNumberAtom component is for displaying a number in a box, it can be used for displaying the day of the month in a calendar
- selected: is the day selected
- disabled: is the day disabled
- onClick: function to be called when the day is clicked
- range: is the day in a range
- isCurrentDay: is the day the current day
- themeType: the theme type of the day
- layer: the layer of the day', - }, - }, - }, - - // Define arguments for the story - argTypes: { - dateNumber: { - control: { type: 'number' }, - }, - selected: { - description: 'is the day selected', - control: { type: 'boolean' }, - }, - disabled: { - control: { type: 'boolean' }, - description: 'is the day disabled, like a day in the previous month or next month, or the weekend', - defaultValue: { - summary: false, - }, - }, - onClick: { - control: { type: 'function' }, - }, - range: { - control: { type: 'object' }, - description: - 'is the day in a range, you can pass an object with the following properties:
- start: is the day the start of the range
- end: is the day the end of the range
- inRange: is the day in the range', - }, - isCurrentDay: { - description: 'is the day the current day it gets a different color', - control: { type: 'boolean' }, - }, - themeType: { - description: 'the theme type of the day', - control: { type: 'select' }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'the layer of the day', - control: { type: 'range', min: 0, max: 10, step: 1 }, - defaultValue: { - summary: 0, - }, - }, - }, - - // 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: { - dateNumber: 1, - selected: false, - disabled: false, - onClick: () => { - console.log('clicked'); - }, - range: { start: false, end: false, inRange: false }, - isCurrentDay: false, - themeType: 'secondary', - layer: 0, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/DateNumberAtom/DateNumberAtom.style.tsx b/src/Components/Atoms/DateNumberAtom/DateNumberAtom.style.tsx deleted file mode 100644 index d0c353732..000000000 --- a/src/Components/Atoms/DateNumberAtom/DateNumberAtom.style.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { css, styled } from 'styled-components'; - -import { IRange } from './DateNumberAtom'; -import { disabledStyle } from '../../../design/designFunctions/disabledStyle/disableStyle'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -// --------------------------------------------------------------------------- // -// ----------------- The Style for one Day with diferent sates --------------- // -// --------------------------------------------------------------------------- // -interface IStyledDay { - $range?: IRange; - $isCurrentDay?: boolean; - $selected?: boolean; - $themeType?: TThemeTypes; - $layer?: TLayer; -} -export const StyledDay = styled.button` - cursor: pointer; - box-sizing: border-box; - justify-content: center; - align-items: center; - border-radius: ${({ theme }) => theme.borderRadius.complete}; - color: ${({ $isCurrentDay, theme, $themeType = 'secondary', $layer }) => - $isCurrentDay ? theme.colors.accent[0] : getTextColor({ $themeType, $textLayer: $layer, theme })}; - border: ${({ $selected, theme }) => ($selected ? `1px solid ${theme.colors.accent[0]}` : `none`)}; - background-color: transparent; - padding: 0; - width: 80%; - max-width: 40px; - position: relative; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - - &:before { - content: ''; - display: block; - padding-top: 100%; - } - - &:hover, - &:active { - border: 1px solid ${({ theme }) => theme.colors.accent[0]}; - } - - ${({ $range, theme }) => - $range?.start && - css` - border-radius: 40% 5px 5px 40%; - background-image: linear-gradient(to right, ${theme.colors.accent[0]}, transparent); - color: white; - `} - - ${({ $range, theme }) => - $range?.end && - ` - border-radius: 5px 40% 40% 5px; - background-image: linear-gradient(to left, ${theme.colors.accent[0]}, transparent); - color: white; - `} - - ${({ $range, theme }) => - $range?.inRange && - ` - background-color: ${theme.colors.accent[0]}; - color: white; - `} - - &:disabled { - ${disabledStyle} - } -`; diff --git a/src/Components/Atoms/DateNumberAtom/DateNumberAtom.tsx b/src/Components/Atoms/DateNumberAtom/DateNumberAtom.tsx deleted file mode 100644 index ca684bb51..000000000 --- a/src/Components/Atoms/DateNumberAtom/DateNumberAtom.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { StyledDay } from './DateNumberAtom.style'; -import Typography from '../Typography/Typography'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -export type IRange = { start?: boolean; end?: boolean; inRange?: boolean }; - -interface IDay { - dateNumber: number; - selected?: boolean; - disabled?: boolean; - onClick?: () => void; - range?: IRange; - isCurrentDay?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; -} -// --------------------------------------------------------------------------- // -// -------- The DateNumberAtom Displays the date number of a clendar --------- // -// --------------------------------------------------------------------------- // -export default function DateNumberAtom(props: IDay) { - const { dateNumber, selected, disabled, onClick, range, isCurrentDay, themeType, layer } = props; - - return ( - - - {dateNumber} - - - ); -} diff --git a/src/Components/Atoms/DateNumberAtom/index.ts b/src/Components/Atoms/DateNumberAtom/index.ts deleted file mode 100644 index 74173736f..000000000 --- a/src/Components/Atoms/DateNumberAtom/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DateNumberAtom } from './DateNumberAtom'; diff --git a/src/Components/Atoms/DateOutput/DateOutput.stories.tsx b/src/Components/Atoms/DateOutput/DateOutput.stories.tsx deleted file mode 100644 index 0eaea041f..000000000 --- a/src/Components/Atoms/DateOutput/DateOutput.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import DateOutput from './DateOutput'; -// Define metadata for the story -const meta = { - component: DateOutput, - parameters: { - docs: { - description: { - component: - 'the DateOutput component is for displaying a date in a box, it can be used for displaying the date in a calendar
- date: the date to be displayed
- themeType: the theme type of the date
- isActive: is the date active
- onClick: function to be called when the date is clicked
- layer: the layer of the date', - }, - }, - }, - - // Define arguments for the story - argTypes: { - date: { - control: { type: 'date' }, - }, - themeType: { - control: { type: 'select', options: ['primary', 'secondary', 'tertiary'] }, - }, - isActive: { - control: { type: 'boolean' }, - }, - onClick: { - control: { type: 'function' }, - }, - layer: { - control: { type: 'range', min: 0, max: 10, step: 1 }, - }, - }, - - // 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: { - date: new Date(), - themeType: 'primary', - isActive: true, - onClick: () => { - console.log('clicked'); - }, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/DateOutput/DateOutput.tsx b/src/Components/Atoms/DateOutput/DateOutput.tsx deleted file mode 100644 index 5038741a7..000000000 --- a/src/Components/Atoms/DateOutput/DateOutput.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { styled } from 'styled-components'; - -import Typography from '../Typography/Typography'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { getBackgroundColor, getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; - -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 }) => - $isActive - ? getBackgroundColor({ theme, $themeType, $layer: $layer ? $layer + 1 : 3 }) - : getBackgroundColor({ theme, $themeType, $layer: $layer ? $layer : 2 })}; - color: ${({ theme, $themeType = 'secondary', $layer = 1 }) => - getTextColor({ theme, $themeType, $textLayer: $layer, turnColorTheme: true })}; - border: none; - cursor: pointer; - - &:hover { - background-color: ${({ theme, $themeType = 'primary', $layer }) => - getBackgroundColor({ theme, $themeType, $layer: $layer ? $layer : 3 })}; - } -`; - -interface IDateOutput { - date?: Date; - isActive?: boolean; - onClick?: () => void; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function DateOutput({ date = new Date(), isActive, onClick, themeType, layer }: IDateOutput) { - const [active, setActive] = useState(false); - const [selectedDate, setSelectedDate] = useState(date); - - // Format the date to display as "6. Juni" - const formattedDate = useMemo(() => { - if (!selectedDate) return ''; - const userLang = navigator.language; - const options = { day: 'numeric', month: 'short' } as const; - return selectedDate.toLocaleDateString(userLang, options); - }, [selectedDate]); - - const handleOpenCalendar = () => { - setActive(true); - onClick && onClick(); - }; - - useEffect(() => { - setSelectedDate(date); - }, [date]); - - useEffect(() => { - setActive(isActive ?? false); - }, [isActive]); - - return ( - - {formattedDate || 'Select a date'} - - ); -} diff --git a/src/Components/Atoms/DateOutput/index.ts b/src/Components/Atoms/DateOutput/index.ts deleted file mode 100644 index b2e80a817..000000000 --- a/src/Components/Atoms/DateOutput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DateOutput } from './DateOutput'; diff --git a/src/Components/Atoms/DropDownSelect/DropDownSelect.model.ts b/src/Components/Atoms/DropDownSelect/DropDownSelect.model.ts deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/Components/Atoms/DropDownSelect/DropDownSelect.stories.tsx b/src/Components/Atoms/DropDownSelect/DropDownSelect.stories.tsx deleted file mode 100644 index 5635cebf7..000000000 --- a/src/Components/Atoms/DropDownSelect/DropDownSelect.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import DropDownSelect from './DropDownSelect'; -// Define metadata for the story -const meta = { - component: DropDownSelect, - parameters: { - docs: { - description: { - component: - 'The DropDownSelect component is for displaying a dropdown select, it can be used for selecting a value from a list
- values: the values to be displayed in the dropdown
- onChange: function to be called when the value is changed
- placeholder: the placeholder text to be displayed when no value is selected
- value: the value to be displayed
- emptySelect: is the select empty
- disabled: is the select disabled', - }, - }, - }, - - // Define arguments for the story - argTypes: { - values: { - control: { type: 'array' }, - }, - onChange: { - control: { type: 'function' }, - }, - placeholder: { - control: { type: 'text' }, - }, - value: { - control: { type: 'text' }, - }, - emptySelect: { - control: { type: 'boolean' }, - }, - disabled: { - control: { type: 'boolean' }, - }, - }, - - // 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: { - values: ['one', 'two', 'three'], - emptySelect: false, - disabled: false, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/DropDownSelect/DropDownSelect.style.tsx b/src/Components/Atoms/DropDownSelect/DropDownSelect.style.tsx deleted file mode 100644 index 02e926ed4..000000000 --- a/src/Components/Atoms/DropDownSelect/DropDownSelect.style.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { css, styled } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import { TTheme } from '@/interface/TTheme'; - -//the styling for each option item - -//the selectfield for the options -interface ISelectField { - $align?: string; - $labelAlign?: 'center' | 'left'; - $disabledAndSelected?: boolean; -} -export const SelectField = styled.select` - position: relative; - box-sizing: border-box; - ${({ theme }) => css` - background-image: ${`url("data:image/svg+xml;utf8,")`}; - `} - background-repeat: no-repeat; - background-position: right ${({ theme }) => theme.spacing.sm} top 30%; - text-align-last: ${({ $align }) => ($align !== 'center' ? 'left' : 'center')}; - color: ${({ theme }) => theme.colors.secondary[0]}; - border: none; - width: 100%; - font-weight: 500; - user-select: none; - appearance: none; - padding: 0px 0px ${({ theme }) => theme.spacing.sm}; - font-size: ${fontSize.md}; - background-color: transparent; - - &:disabled { - opacity: 1; - } - - &:focus { - outline: none; - } - - /* When a item is checked in the dropdown */ - &:focus option:checked { - background: ${({ theme }) => theme.colors.accent[1]}; - } - - optgroup { - font-weight: bold; - color: ${({ theme }) => theme.colors.accent[2]}; - background-color: ${({ theme }) => theme.colors.primary[2]}; - text-align: ${({ $align }) => ($align !== 'left' ? 'center' : 'left')}; - - &:disabled { - background: ${({ theme }) => theme.colors.secondary[9]}; - } - } - - option { - background-color: ${({ theme }) => theme.colors.primary[1]}; - text-align: ${({ $align }) => ($align !== 'left' ? 'center' : 'left')}; - color: ${({ theme }) => theme.colors.secondary[0]}; - - &:disabled { - background: ${({ theme }) => theme.colors.secondary[9]}; - } - } -`; diff --git a/src/Components/Atoms/DropDownSelect/DropDownSelect.tsx b/src/Components/Atoms/DropDownSelect/DropDownSelect.tsx deleted file mode 100644 index 52995288a..000000000 --- a/src/Components/Atoms/DropDownSelect/DropDownSelect.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { HTMLAttributes } from 'react'; -import { SelectField } from './DropDownSelect.style'; - -export interface IDropDownSelect extends Omit, 'type'> { - align?: 'left' | 'center'; - values?: string[]; - value?: string; - disabled?: boolean; - placeholder?: string; - emptySelect?: boolean; - children?: React.ReactNode; - activeHandler?: (value: boolean) => void; -} -// ------------------------------------------------------------------ // -// ---------------- the blank drop down select ---------------------- // -// ------------------------------------------------------------------ // -export default function DropDownSelect(props: IDropDownSelect) { - const { values, value, placeholder, children, align, onChange, activeHandler, emptySelect, ...htmlInputProps } = props; - - return ( - activeHandler && activeHandler(true)} - onBlur={() => activeHandler && activeHandler(false)} - {...htmlInputProps} - > - {/* Placeholder option */} - {placeholder && ( - - )} - - {/* Empty Select Option */} - {emptySelect && ( - - )} - {/* Children */} - - {values?.map((item, i) => ( - - ))} - - {children} - - ); -} diff --git a/src/Components/Atoms/DropDownSelect/index.ts b/src/Components/Atoms/DropDownSelect/index.ts deleted file mode 100644 index 9f07a3e19..000000000 --- a/src/Components/Atoms/DropDownSelect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as DropDownSelect } from './DropDownSelect'; diff --git a/src/Components/Atoms/EditBarModal/EditBarModal.stories.tsx b/src/Components/Atoms/EditBarModal/EditBarModal.stories.tsx deleted file mode 100644 index 8a92419f9..000000000 --- a/src/Components/Atoms/EditBarModal/EditBarModal.stories.tsx +++ /dev/null @@ -1,61 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import EditBarModal from './EditBarModal'; -// Define metadata for the story -const meta = { - component: EditBarModal, - parameters: { - docs: { - description: { - component: - 'The DropDownSelect component is for displaying a dropdown select, it can be used for selecting a value from a list
- values: the values to be displayed in the dropdown
- onChange: function to be called when the value is changed
- placeholder: the placeholder text to be displayed when no value is selected
- value: the value to be displayed
- emptySelect: is the select empty
- disabled: is the select disabled', - }, - }, - }, - - // Define arguments for the story - argTypes: { - scrollable: { - control: { type: 'boolean' }, - }, - align: { - control: { type: 'select', options: ['left', 'center', 'right'] }, - }, - title: { - control: { type: 'text' }, - }, - width: { - control: { type: 'text' }, - }, - spacingLeftRight: { - control: { type: 'text' }, - }, - }, - - // 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: { - align: 'center', - title: 'Edit Bar', - width: '100%', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/EditBarModal/EditBarModal.style.tsx b/src/Components/Atoms/EditBarModal/EditBarModal.style.tsx deleted file mode 100644 index f81d6b2ec..000000000 --- a/src/Components/Atoms/EditBarModal/EditBarModal.style.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { styled, css } from 'styled-components'; - -import { boxShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TTheme } from '@/interface/TTheme'; - -//this calculates the spacing from left and right or nothing -const calcBarWidthandSpacing = (width?: string, spacingLeftRight?: string) => { - if (width) { - if (spacingLeftRight) { - return css` - width: calc(${width} - ${spacingLeftRight}); - `; - } else { - return css` - width: ${width}; - `; - } - } else { - if (spacingLeftRight) { - return css` - width: calc(100% - ${spacingLeftRight}); - `; - } else { - return css` - width: 100%; - `; - } - } -}; - -interface IWrapper { - $width?: string; - $secondBar?: boolean; - $spacingLeftRight?: string; -} -export const Wrapper = styled.div` - box-sizing: border-box; - position: relative; - padding: ${({ theme }) => theme.spacing.md}; - z-index: 99; - ${({ $width, $spacingLeftRight }) => calcBarWidthandSpacing($width, $spacingLeftRight)}; - background-color: ${({ theme }) => theme.colors.primary[1]}; - border-radius: 12px 12px 0px 0px; - ${boxShadow.sm} -`; - -export const WrapperContent = styled.div<{ theme: TTheme }>` - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - gap: ${({ theme }) => theme.spacing.md}; -`; diff --git a/src/Components/Atoms/EditBarModal/EditBarModal.tsx b/src/Components/Atoms/EditBarModal/EditBarModal.tsx deleted file mode 100644 index 38344b30c..000000000 --- a/src/Components/Atoms/EditBarModal/EditBarModal.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { IEditBarModal } from './IEditbarModal.model'; -import { Wrapper, WrapperContent } from './EditBarModal.style'; - -import { FancyModalHeadLine } from '../../molecules/FancyModalHeadLine'; - -export default function EditBarModal(props: IEditBarModal) { - const { children, width, spacingLeftRight, title } = props; - - return ( - - - {children} - - ); -} diff --git a/src/Components/Atoms/EditBarModal/IEditbarModal.model.ts b/src/Components/Atoms/EditBarModal/IEditbarModal.model.ts deleted file mode 100644 index cd6ecbbc8..000000000 --- a/src/Components/Atoms/EditBarModal/IEditbarModal.model.ts +++ /dev/null @@ -1,8 +0,0 @@ -export interface IEditBarModal { - title?: string; - children?: React.ReactElement[]; - align?: string; - scrollable?: boolean; - width?: string; - spacingLeftRight?: string; -} diff --git a/src/Components/Atoms/EditBarModal/index.ts b/src/Components/Atoms/EditBarModal/index.ts deleted file mode 100644 index 5062a20c3..000000000 --- a/src/Components/Atoms/EditBarModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as EditBarModal } from './EditBarModal'; diff --git a/src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.style.tsx b/src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.style.tsx deleted file mode 100644 index 5a5d3c394..000000000 --- a/src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.style.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import styled from 'styled-components'; - -export const StyledButton = styled.button` - padding: 0; - border: none; - background-color: transparent; - cursor: pointer; - width: 100%; -`; - -export const StyledAnchor = styled.a` - padding: 0; - border: none; - background-color: transparent; - cursor: pointer; - width: 100%; - text-decoration: none; -`; diff --git a/src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.tsx b/src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.tsx deleted file mode 100644 index 443133c02..000000000 --- a/src/Components/Atoms/FancyActionWrapper/FancyActionWrapper.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; - -import ComponentAsWrapper from '../ComponentAsWrapper/ComponentAsWrapper'; -import { StyledAnchor, StyledButton } from './FancyActionWrapper.style'; - -// Define types for button and anchor attributes -type TNativeButtonProps = React.HTMLAttributes & { as?: 'button' }; -type TNativeAnchorProps = React.AnchorHTMLAttributes & { as: 'a' }; - -// Define a type that allows either specific button or anchor props along with ComponentAsWrapperProps -type IFancyActionWrapper = { - children: React.ReactNode; - WrapperComponent?: React.ReactElement; -} & (TNativeButtonProps | TNativeAnchorProps); - -export default function FancyActionWrapper(props: IFancyActionWrapper) { - const { children, WrapperComponent, ...HTMLProps } = props; - - const Wrapper = WrapperComponent ? ( - WrapperComponent - ) : HTMLProps.as === 'a' ? ( - - ) : ( - - ); - - return ; -} diff --git a/src/Components/Atoms/FancyBox/FancyBox.mdx b/src/Components/Atoms/FancyBox/FancyBox.mdx deleted file mode 100644 index 559ea4e6d..000000000 --- a/src/Components/Atoms/FancyBox/FancyBox.mdx +++ /dev/null @@ -1,68 +0,0 @@ -## FancyBox Documentation - -_I have given this a lot of thought, and I am a great enthusiast of customizable components. In the present times, there is an abundance of excellent headers and bottom bars, and I believe developers should have the liberty to design interfaces as they imagine. Therefore, I developed the FancyBox. It primarily offers the theme for a component, leaving the rest to your creativity. You can effortlessly integrate your styles using inline styles, and they will be added to the existing class. Whether you are designing a side nav, a header, or a bottom bar, FancyBox has everything you need._ - -### Overview - -FancyBox is a versatile component that can act as the core element for various parts of an application's UI, such as headers, footers, sidebars, or any other type of bar. With its straightforward yet extensive property system, it enables developers to customize its look and functionality, adapting it to specific needs. - -### Initial Setup - -1. **Import the Component**: - - Begin by importing the `FancyBox` component into your file. - - ```javascript - import FancyBox from 'path-to-FancyBox'; - ``` - -2. **Use the Component**: - - Utilize the FancyBox component, inputting any necessary properties to modify its look and features. - - ```javascript - - Your content here... - - ``` - -### Using FancyBox - -1. **Customization with Properties**: - - FancyBox provides various properties for customizing its appearance: - - - `themeType`: Sets the theme color. This property can accept any keys from the `TUiColorsType`. - - `outlined`: A boolean indicating whether the bar is styled with an outline. - - `layer`: This property aids in setting the depth or z-index of the component. - - `outlinedBackgroundStrength`: Dictates the intensity of the background when `outlined` is true. - - `style`: Permits inline CSS styling on the bar. - - ```javascript - - Your themed and outlined bar content... - - ``` - -2. **Incorporating Child Components**: - - FancyBox accepts child components, enabling developers to embed other components or elements within the bar. - - ```javascript - - -

This is some text inside the FancyBox

- - ``` - -### Advanced Styling - -You are not confined to the predefined styles. With the `style` property, developers can input inline styles to further personalize the appearance of the FancyBox. These styles will be combined with the preexisting styles, offering more versatility. - -```javascript -A FancyBox with custom style... -``` - -### Conclusion - -The FancyBox component embodies the philosophy that developers should have the freedom to mold components as they see fit. With its wide range of customization choices and the ability to style as desired, FancyBox emerges as a sturdy, adaptable, and essential tool in the UI toolkit. Begin crafting your ideal UI, one piece at a time, starting with the FancyBox. diff --git a/src/Components/Atoms/FancyBox/FancyBox.model.ts b/src/Components/Atoms/FancyBox/FancyBox.model.ts deleted file mode 100644 index c309b2043..000000000 --- a/src/Components/Atoms/FancyBox/FancyBox.model.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { CSSProp } from 'styled-components'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; - -type HTMLDivElementProps = Omit, 'style'>; -interface IFancyBox { - as?: keyof JSX.IntrinsicElements; - outlined?: boolean; - layer?: TLayer; - themeType?: TThemeTypes; - children?: React.ReactNode; - outlinedBackgroundStrength?: number; - externalStyle?: CSSProp; -} - -export type IFancyBoxProps = IFancyBox & HTMLDivElementProps; diff --git a/src/Components/Atoms/FancyBox/FancyBox.stories.tsx b/src/Components/Atoms/FancyBox/FancyBox.stories.tsx deleted file mode 100644 index ec3ff465a..000000000 --- a/src/Components/Atoms/FancyBox/FancyBox.stories.tsx +++ /dev/null @@ -1,169 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyBox from './FancyBox'; -import { css } from 'styled-components'; -import { FancyMiniProfile } from '../../molecules/FancyMiniProfile'; -import { HeaderTitleWithLogo } from '../../molecules/HeaderTitleWithLogo'; -import { FancyBottomBarIcon } from '../../templates/FancyBottomBarIcon'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; -import React from 'react'; -import { FancySearchBar } from '../../organisms/FancySearchBar'; - -// Define metadata for the story -const meta = { - component: FancyBox, - - parameters: { - docs: { - description: { - component: - 'The FancyCard component is for displaying a card that can fill with somthing, it can be used for displaying content in a card
- height: the height of the card
- width: the width of the card
- themeType: the theme type of the card
- layer: the layer of the card
- textLayer: the layer of the text
- roundedEdges: the rounded edges of the card
- shadow: is the card shadowed', - }, - }, - }, - - // Define arguments for the story - argTypes: { - themeType: { - description: 'The theme type of the card', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'The layer of the card', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 3, - }, - }, - outlined: { - description: 'Is the card outlined', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - outlinedBackgroundStrength: { - description: 'The background strength of the outlined card', - control: { - type: 'range', - min: 0, - max: 1, - step: 0.1, - }, - defaultValue: { - summary: 0.5, - }, - }, - externalStyle: { - description: 'The style of the card can porvieed with the styled-component css and react style={{width: "100px"}}', - control: { - type: 'object', - }, - }, - }, -} 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) => Hiii, - args: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; - -const headerStyle = css` - position: fixed; - top: 10px; - width: 80%; - padding: 12px 18px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 50px; -`; - -export const Header: Story = { - render: (args) => ( - -
- -
- -
- -
- - ), - args: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; - -const BottomBarStyle = css` - position: fixed; - bottom: 10px; - width: 100%; - padding: 12px 8px 0px 8px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 12px 12px 0 0; -`; - -const BottomBarComponent = (args: React.ComponentProps) => { - const [wichIsActive, setWichIsActive] = React.useState('0'); - - return ( - - } label="Test" isActive={wichIsActive === '0'} onClick={() => setWichIsActive('0')} /> - } label="Test" isActive={wichIsActive === '1'} onClick={() => setWichIsActive('1')} /> - } label="Test" isActive={wichIsActive === '2'} onClick={() => setWichIsActive('2')} /> - } label="Test" isActive={wichIsActive === '3'} onClick={() => setWichIsActive('3')} /> - - ); -}; - -export const BottomBar: Story = { - render: (args) => , - args: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyBox/FancyBox.style.tsx b/src/Components/Atoms/FancyBox/FancyBox.style.tsx deleted file mode 100644 index 28692b815..000000000 --- a/src/Components/Atoms/FancyBox/FancyBox.style.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { styled } from 'styled-components'; - -import generateThemeForCard from '../../../design/designFunctions/generateThemeForCard/generateThemeForCard'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import { IFancyBoxProps } from './FancyBox.model'; -import { TTheme } from '@/interface/TTheme'; - -// the styled-component for the FancyBar -type IStyledFancyBox = IStyledPrefixAndPicker & { theme: TTheme }; -export const StyledFancyBox = styled.div` - box-sizing: border-box; - ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) => - generateThemeForCard({ $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength })}; - - ${({ $externalStyle }) => $externalStyle}; -`; diff --git a/src/Components/Atoms/FancyBox/FancyBox.tsx b/src/Components/Atoms/FancyBox/FancyBox.tsx deleted file mode 100644 index b2893d627..000000000 --- a/src/Components/Atoms/FancyBox/FancyBox.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import { IFancyBoxProps } from './FancyBox.model'; -import { StyledFancyBox } from './FancyBox.style'; - -// --------------------------------------------------------------------------- // -// ------------ A Bar that can usesd for for the most components ------------ // -// --------------------------------------------------------------------------- // -export default function FancyBar(props: IFancyBoxProps) { - const { layer, themeType, outlined, outlinedBackgroundStrength, externalStyle } = props; - - return ( - - {props.children} - - ); -} diff --git a/src/Components/Atoms/FancyBox/index.ts b/src/Components/Atoms/FancyBox/index.ts deleted file mode 100644 index 0a6465ed3..000000000 --- a/src/Components/Atoms/FancyBox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyBox } from './FancyBox'; diff --git a/src/Components/Atoms/FancyCard/Card.model.ts b/src/Components/Atoms/FancyCard/Card.model.ts deleted file mode 100644 index 972d340d5..000000000 --- a/src/Components/Atoms/FancyCard/Card.model.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { IRoundedEdges } from '../../../design/designFunctions/edgeCalculation/edgeCalculation'; -import { TLayer } from '@/interface/TLayer'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TSpacings } from '@/interface/TSpacings'; - -// the scaling types for the card -type IScaling = '100%' | 'auto' | string; -// the raw styling props for the card -export interface StyledCardProps { - themeType?: TThemeTypes; - textLayer?: TLayer; - height?: IScaling; - width?: IScaling; - layer?: TLayer; - shadow?: boolean; - radius?: TBorderRadiusSizes; - roundedEdges?: IRoundedEdges; - padding?: TSpacings | false; -} diff --git a/src/Components/Atoms/FancyCard/FancyCard.style.tsx b/src/Components/Atoms/FancyCard/FancyCard.style.tsx deleted file mode 100644 index a1d9ffe41..000000000 --- a/src/Components/Atoms/FancyCard/FancyCard.style.tsx +++ /dev/null @@ -1,32 +0,0 @@ -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 { boxShadow } from '../../../design/designFunctions/shadows/shadows'; -import getColorsForComponent from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -// the converted $ styling props for the card -type IStyledCard = IStyledPrefixAndOmiter; -//the main design of the card -export const StyledCard = styled.div` - ${({ theme, $themeType = 'primary', $layer, $textLayer }) => getColorsForComponent({ theme, $themeType, $layer, $textLayer })} - overflow: hidden; - width: ${({ $width }) => $width}; - height: ${({ $height }) => $height}; - box-sizing: border-box; - padding: ${({ $padding }) => ($padding ? spacingPx[$padding] : '')}; - border-radius: ${({ $roundedEdges }) => edgeCalculation($roundedEdges)}; - ${({ $shadow }) => $shadow && boxShadow.sm}; -`; - -//the innercard makes it better to align the content with absolute position -export const InnerCard = styled.div` - width: 100%; - height: 100%; - box-sizing: border-box; - position: relative; -`; diff --git a/src/Components/Atoms/FancyCard/FancyCard.tsx b/src/Components/Atoms/FancyCard/FancyCard.tsx deleted file mode 100644 index e4f4dd4c1..000000000 --- a/src/Components/Atoms/FancyCard/FancyCard.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; - -import { InnerCard, StyledCard } from './FancyCard.style'; -import { StyledCardProps } from './Card.model'; -import { TLayer } from '@/interface/TLayer'; - -// --------------------------------------------------------------------------- // -// ---------- The card is there to wrapp some content or components ---------- // -// --------------------------------------------------------------------------- // -interface ICard extends StyledCardProps { - children?: React.ReactNode; - layer?: TLayer; -} -export default function FancyCard(props: ICard) { - const { children, height, width, radius, padding, roundedEdges, layer, shadow, themeType, textLayer } = { ...defaultProps, ...props }; - - return ( - - {children} - - ); -} - -const defaultProps: ICard = { - height: 'auto', - width: '100%', - padding: 'xl', - shadow: true, - roundedEdges: ['xl'], -}; diff --git a/src/Components/Atoms/FancyCard/FancyCrad.stories.tsx b/src/Components/Atoms/FancyCard/FancyCrad.stories.tsx deleted file mode 100644 index b625877ff..000000000 --- a/src/Components/Atoms/FancyCard/FancyCrad.stories.tsx +++ /dev/null @@ -1,76 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyCard from './FancyCard'; -// Define metadata for the story -const meta = { - title: 'components/atoms/FancyCard', - component: FancyCard, - - parameters: { - docs: { - description: { - component: - 'The FancyCard component is for displaying a card that can fill with somthing, it can be used for displaying content in a card
- height: the height of the card
- width: the width of the card
- themeType: the theme type of the card
- layer: the layer of the card
- textLayer: the layer of the text
- roundedEdges: the rounded edges of the card
- shadow: is the card shadowed', - }, - }, - }, - - // Define arguments for the story - argTypes: { - height: { - control: { type: 'text' }, - }, - width: { - control: { type: 'text' }, - }, - themeType: { - control: { type: 'select', options: ['primary', 'secondary', 'accent'] }, - }, - layer: { - control: { type: 'range', min: 0, max: 10, step: 1 }, - }, - textLayer: { - control: { type: 'range', min: 0, max: 10, step: 1 }, - }, - roundedEdges: { - control: { type: 'object' }, - }, - shadow: { - control: { type: 'boolean' }, - }, - }, - - // 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) => ( - -

Some Random Content

- - ), - args: { - roundedEdges: ['sm', 'md', 'lg', 'xl'], - shadow: true, - themeType: 'primary', - layer: 3, - width: '100%', - height: '100%', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyCard/index.ts b/src/Components/Atoms/FancyCard/index.ts deleted file mode 100644 index 9fcc02081..000000000 --- a/src/Components/Atoms/FancyCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyCard } from './FancyCard'; diff --git a/src/Components/Atoms/FancyImage/FancyImage.stories.tsx b/src/Components/Atoms/FancyImage/FancyImage.stories.tsx deleted file mode 100644 index 2cc3b4e07..000000000 --- a/src/Components/Atoms/FancyImage/FancyImage.stories.tsx +++ /dev/null @@ -1,56 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyImage from './FancyImage'; -// Define metadata for the story -const meta = { - component: FancyImage, - - parameters: { - docs: { - description: { - component: 'A FancyImage component is a styled image component that can be used to display images in a fancy way.', - }, - }, - }, - - // Define arguments for the story - argTypes: { - darken: { - control: { type: 'boolean' }, - }, - alt: { - control: { type: 'text' }, - }, - imageUrl: { - control: { type: 'text' }, - }, - }, - - // 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: { - imageUrl: 'https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg', - aspectRatio: '2/4', - alt: 'Fannncy', - darken: false, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyImage/FancyImage.style.tsx b/src/Components/Atoms/FancyImage/FancyImage.style.tsx deleted file mode 100644 index 3d2475605..000000000 --- a/src/Components/Atoms/FancyImage/FancyImage.style.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { styled } from 'styled-components'; - -export const StyledImage = styled.img<{ $darken?: boolean; $aspectRatio?: string }>` - width: 100%; - object-fit: cover; - transition: filter 0.3s; - ${({ $aspectRatio }) => ($aspectRatio ? `aspect-ratio: ${$aspectRatio};` : '')} - filter: ${({ $darken }) => ($darken ? 'brightness(0.5)' : 'none')}; -`; diff --git a/src/Components/Atoms/FancyImage/FancyImage.tsx b/src/Components/Atoms/FancyImage/FancyImage.tsx deleted file mode 100644 index 140e0b588..000000000 --- a/src/Components/Atoms/FancyImage/FancyImage.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { StyledImage } from './FancyImage.style'; -import { isAspectRatioValid } from '@/components/utils/validations/isAspectRatioValid'; - -// Define the props for the FancyImage component -export interface IFancyImage { - imageUrl: string; - aspectRatio?: string; // e.g. "16/9" - darken?: boolean; - alt?: string; -} -// --------------------------------------------------------------------------- // -// -------------- The Definition for the FancyImage Component ---------------- // -// --------------------------------------------------------------------------- // -export default function FancyImage(props: IFancyImage) { - const { imageUrl, aspectRatio, darken, alt } = props; - - // Validate the aspect ratio if it is provided - if (aspectRatio && !isAspectRatioValid(aspectRatio)) { - throw new Error('The aspect ratio is not valid. Please use the format "16/9"'); - } - - // Render the image with the provided props - return ; -} diff --git a/src/Components/Atoms/FancyImage/index.ts b/src/Components/Atoms/FancyImage/index.ts deleted file mode 100644 index e731930a7..000000000 --- a/src/Components/Atoms/FancyImage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyImage } from './FancyImage'; diff --git a/src/Components/Atoms/FancyLI/FancyLI.stories.tsx b/src/Components/Atoms/FancyLI/FancyLI.stories.tsx deleted file mode 100644 index 79f545e2a..000000000 --- a/src/Components/Atoms/FancyLI/FancyLI.stories.tsx +++ /dev/null @@ -1,54 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyLI from './FancyLI'; -// Define metadata for the story -const meta = { - component: FancyLI, - - parameters: { - docs: { - description: { - component: 'Fancy LI Item that can be dynamicly adjusted in size and alignment.', - }, - }, - }, - - // Define arguments for the story - argTypes: { - size: { - control: { type: 'select' }, - options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl'], - }, - aligned: { - control: { type: 'select' }, - options: ['left', 'center', 'right'], - }, - }, - - // 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: { - children:

Huuu

, - size: 'md', - aligned: 'left', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyLI/FancyLI.tsx b/src/Components/Atoms/FancyLI/FancyLI.tsx deleted file mode 100644 index 3c790710b..000000000 --- a/src/Components/Atoms/FancyLI/FancyLI.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import IStyledPrefixAndOmiter from '../../../interface/IStyledPrefixAndOmiter.model'; -import { spacingPx } from '../../../design/theme/designSizes'; -import { TSpacings } from '../../../interface/TSpacings'; - -type StyledFancyLi = IStyledPrefixAndOmiter; - -const FancyLiItem = styled.li` - list-style: none; - display: flex; - align-items: center; - width: 100%; - justify-content: ${({ $aligned }) => $aligned}; - padding: ${({ $size }) => $size && spacingPx[$size]}; -`; - -interface FancyLIProps { - aligned?: 'left' | 'center' | 'right'; - children?: React.ReactNode; - size?: TSpacings; -} -// --------------------------------------------------------------------------- // -// ------------- The fancy LI Item that can dynamicly adjusted --------------- // -// --------------------------------------------------------------------------- // -export default function FancyLI(props: FancyLIProps) { - const { children, size, aligned } = { ...defaultProps, ...props }; - - return ( - - {children} - - ); -} - -const defaultProps: FancyLIProps = { - size: 'md', - aligned: 'left', -}; diff --git a/src/Components/Atoms/FancyLI/index.ts b/src/Components/Atoms/FancyLI/index.ts deleted file mode 100644 index 27594c6fa..000000000 --- a/src/Components/Atoms/FancyLI/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyLI } from './FancyLI'; diff --git a/src/Components/Atoms/FancyLine/FancyLine.stories.tsx b/src/Components/Atoms/FancyLine/FancyLine.stories.tsx deleted file mode 100644 index 762c850a6..000000000 --- a/src/Components/Atoms/FancyLine/FancyLine.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyLine from './FancyLine'; - -const meta = { - component: FancyLine, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: Only a Line thats sperate something from something else.', - }, - }, - }, - argTypes: { - themeType: { - description: 'The theme type of the component', - control: { - type: 'select', - }, - defaultValue: { - summary: 'accent', - }, - }, - layer: { - description: 'The layer of the component', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 0, - }, - }, - direction: { - description: 'The direction of the line', - control: { - type: 'select', - }, - defaultValue: { - summary: 'horizontal', - }, - }, - thickness: { - description: 'The thickness of the line', - control: { - type: 'text', - }, - }, - margin: { - description: 'The margin from the line to the edge', - control: { - type: 'text', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - themeType: 'accent', - layer: 0, - direction: 'horizontal', - thickness: '1px', - margin: '0', - }, -}; diff --git a/src/Components/Atoms/FancyLine/FancyLine.tsx b/src/Components/Atoms/FancyLine/FancyLine.tsx deleted file mode 100644 index 972fa5022..000000000 --- a/src/Components/Atoms/FancyLine/FancyLine.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { styled } from 'styled-components'; - -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import { TTheme } from '@/interface/TTheme'; -import { TThemeTypes } from '@/interface/TUiColors'; - -type TStyledFancyLine = IStyledPrefixAndPicker & { theme?: TTheme }; -const StyledFancyLine = styled.hr` - background-color: ${({ theme, $themeType = 'accent', $layer }) => getBackgroundColor({ theme, $themeType, $layer })}; - display: block; - width: ${({ $direction, $thickness }) => ($direction === 'vertical' ? $thickness || '1px' : '')}; - height: ${({ $direction, $thickness }) => ($direction === 'horizontal' ? $thickness || '1px' : '')}; - border-radius: 2px; - align-self: stretch; - border: 0; - padding: 0; - margin: ${({ $margin }) => $margin || '0'}; - - &::after { - content: ''; - display: block; - align-self: stretch; - width: ${({ $direction, $thickness }) => ($direction === 'vertical' ? $thickness || '1px' : '')}; - height: ${({ $direction, $thickness }) => ($direction === 'horizontal' ? $thickness || '1px' : '')}; - background-color: ${({ theme, $themeType = 'accent', $layer }) => getBackgroundColor({ theme, $themeType, $layer })}; - border: 0; - padding: 0; - filter: blur(0.5px); - } -`; - -type IFancyLine = { - direction?: 'horizontal' | 'vertical'; - thickness?: string; - margin?: string; - themeType?: TThemeTypes; - layer?: TLayer; -}; -// --------------------------------------------------------------------------- // -// ------------ A dynamic line (vertical/horizontal) for better UX/UI ------- // -// --------------------------------------------------------------------------- // -export default function FancyLine(props: IFancyLine) { - const { direction, thickness, margin, themeType, layer } = props; - return ( - - ); -} diff --git a/src/Components/Atoms/FancyLine/index.ts b/src/Components/Atoms/FancyLine/index.ts deleted file mode 100644 index 8d35e9550..000000000 --- a/src/Components/Atoms/FancyLine/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyLine } from './FancyLine'; diff --git a/src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.stories.tsx b/src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.stories.tsx deleted file mode 100644 index dd7d2a98e..000000000 --- a/src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyLoadingBar from './FancyLoadingBar'; -// Define metadata for the story -const meta = { - component: FancyLoadingBar, - - parameters: { - docs: { - description: { - component: 'Fancy LI Item that can be dynamicly adjusted in size and alignment.', - }, - }, - }, - - // Define arguments for the story - argTypes: {}, - - // 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: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.tsx b/src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.tsx deleted file mode 100644 index b32dccbff..000000000 --- a/src/Components/Atoms/FancyLoadingBar/FancyLoadingBar.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { styled, keyframes } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -// Define keyframe animation for the loading bar -const loadingAnimation = keyframes` - 0% { - left: -70%; - } - 100% { - left: 100%; - } -`; - -// Define a styled component for the loading container -const LoadingContainer = styled.div` - position: relative; - width: 100%; - height: 2px; - overflow: hidden; -`; - -// Define a styled component for the loading bar -const LoadingBar = styled.div<{ theme: TTheme }>` - position: absolute; - left: -70%; - height: 100%; - width: 70%; - background-image: linear-gradient(90deg, transparent, ${({ theme }) => theme.colors.accent[0]}, transparent); - animation: ${loadingAnimation} 3s ease-in-out infinite; // Set the animation duration to 3s -`; - -// ----------------------------------------------------- // -// ------------------ A Loadingbar --------------------- // -// ----------------------------------------------------- // -export default function FancyLoadingBar() { - return ( - - - - ); -} diff --git a/src/Components/Atoms/FancyLoadingBar/index.ts b/src/Components/Atoms/FancyLoadingBar/index.ts deleted file mode 100644 index fc82ba895..000000000 --- a/src/Components/Atoms/FancyLoadingBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyLoadingBar } from './FancyLoadingBar'; diff --git a/src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx b/src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx deleted file mode 100644 index dc7542d39..000000000 --- a/src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyLoadingSpinner from './FancyLoadingSpinner'; -// Define metadata for the story -const meta = { - component: FancyLoadingSpinner, - - parameters: { - docs: { - description: { - component: 'FancyLooadingSpinner that indicates loading and can be dynamicly adjusted in the size.', - }, - }, - }, - - // Define arguments for the story - argTypes: {}, - - // 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: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx b/src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx deleted file mode 100644 index bc6240d10..000000000 --- a/src/Components/Atoms/FancyLoadingSpinner/FancyLoadingSpinner.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import React from 'react'; -import { styled, keyframes, css, CSSProp } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -// Define keyframe animations for the spinner -const spinner = keyframes` - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -`; - -const reverseSpinner = keyframes` - 0% { transform: rotate(360deg); } - 100% { transform: rotate(0deg); } -`; - -// Define size options for the spinner -const sizes = { - sm: { - width: '16px', - thickness: '1px', - thicknessInner: '0.5px', - }, - md: { - width: '32px', - thickness: '1.5px', - thicknessInner: '1px', - }, - lg: { - width: '48px', - thickness: '1.5px', - thicknessInner: '1px', - }, - xl: { - width: '64px', - thickness: '2px', - thicknessInner: '1.5px', - }, - xxl: { - width: '96px', - thickness: '2px', - thicknessInner: '1.5px', - }, - xxxl: { - width: '128px', - thickness: '2px', - thicknessInner: '1.5px', - }, -}; - -// Define a styled component for the spinner container -const SpinnerContainer = styled.div<{ $size?: keyof typeof sizes }>` - position: relative; - width: ${({ $size }) => ($size ? sizes[$size].width : sizes.md.width)}; - height: ${({ $size }) => ($size ? sizes[$size].width : sizes.md.width)}; - display: flex; - align-items: center; - justify-content: center; -`; - -// Define a function to generate the border for the spinner -const generateBorder = (size: string, theme: TTheme): CSSProp => { - return css` - border-top: ${size} solid transparent; - border-right: ${size} solid ${theme.colors.accent[0]}; - border-bottom: ${size} solid transparent; - border-left: ${size} solid ${theme.colors.accent[0]}; - `; -}; - -// Define a styled component for the inner spinner -const StyledInnerSpinner = styled.div<{ $size?: keyof typeof sizes; theme: TTheme }>` - ${({ $size, theme }) => generateBorder($size ? sizes[$size].thicknessInner : sizes.md.thickness, theme)} - animation: ${reverseSpinner} 2s infinite ease-in-out; - border-radius: 50%; - width: 80%; - aspect-ratio: 1 / 1; -`; - -// Define a styled component for the outer spinner -const StyledFancyLoadingSpinner = styled.div<{ $size?: keyof typeof sizes; $thickness?: string; theme: TTheme }>` - ${({ $size, theme }) => generateBorder($size ? sizes[$size].thickness : sizes.md.thickness, theme)} - position: absolute; - animation: ${spinner} 2s infinite ease-in-out; - border-radius: 50%; - width: 100%; - aspect-ratio: 1 / 1; -`; - -// Define the props for the FancyLoadingSpinner component -// --------------------------------------------------------------------------- // -// ------------------ A Loadingspinner with different sizes ------------------ // -// --------------------------------------------------------------------------- // -interface IFancyLoadingSpinner { - size?: keyof typeof sizes; -} -export default function FancyLoadingSpinner({ size = 'md' }: IFancyLoadingSpinner) { - return ( - - - - - ); -} diff --git a/src/Components/Atoms/FancyLoadingSpinner/index.ts b/src/Components/Atoms/FancyLoadingSpinner/index.ts deleted file mode 100644 index d665a7930..000000000 --- a/src/Components/Atoms/FancyLoadingSpinner/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyLoadingSpinner } from './FancyLoadingSpinner'; diff --git a/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx b/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx deleted file mode 100644 index 7594d1145..000000000 --- a/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx +++ /dev/null @@ -1,95 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyProfilePicture from './FancyProfilePicture'; -// Define metadata for the story -const meta = { - component: FancyProfilePicture, - - parameters: { - docs: { - description: { - component: 'The FancyProfilePicture component is a fancy profile picture that can be dynamicly adjusted in size and roundedness.', - }, - }, - }, - - // Define arguments for the story - argTypes: { - rounded: { - control: { type: 'select' }, - options: ['sm', 'md', 'lg', 'complete'], - }, - size: { - control: { type: 'select' }, - options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'], - }, - src: { - control: { type: 'text' }, - description: 'The source of the image.', - }, - alt: { - control: { type: 'text' }, - description: 'The alt text of the image is used as a placeholder if no image is provided.', - defaultValue: { - summary: 'Profile', - }, - }, - letterLength: { - control: { type: 'number' }, - description: 'The amount of letters to be displayed in the placeholder.', - defaultValue: { - summary: 2, - }, - }, - layer: { - control: { type: 'range', min: 1, max: 10, step: 1 }, - description: 'The layer of the image.', - defaultValue: { - summary: 3, - }, - }, - themeType: { - control: { type: 'select' }, - description: 'The themeType of the image.', - defaultValue: { - summary: 'primary', - }, - }, - }, - - // 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: { - src: 'https://avatars.githubusercontent.com/u/54409958?v=4', - rounded: 'complete', - size: 'md', - alt: 'Profile', - letterLength: 2, - layer: 3, - themeType: 'primary', - }, -}; - -export const Avatar: Story = { - render: (args) => , - args: { - rounded: 'complete', - size: 'md', - alt: 'Profile', - letterLength: 2, - layer: 3, - themeType: 'primary', - }, -}; diff --git a/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx b/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx deleted file mode 100644 index 452026b22..000000000 --- a/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.style.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { styled } from 'styled-components'; - -import { IFancyProfilePicture } from './FancyProfilePicture'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; - -// Set the border based on the prop -type TBorderRadius = IFancyProfilePicture['rounded']; -const getBorderRadius = (borderRadius: TBorderRadius) => { - switch (borderRadius) { - case 'sm': - return '10%'; - case 'md': - return '20%'; - case 'lg': - return '30%'; - case 'complete': - return '50%'; - default: - return ''; - } -}; - -// Set size based on prop -export type TSize = 'sm' | 'md' | 'lg' | 'xxs' | 'xs' | 'xl' | 'xxl'; -const sizeConfig: Record = { - xxs: '24px', - xs: '32px', - sm: '48px', - md: '96px', - lg: '128px', - xl: '192px', - xxl: '256px', - default: '100px', -}; - -const getSize = (size: TSize | string) => { - // Check if the size is a percentage value - if (typeof size === 'string' && size.endsWith('%')) return size; - - // Return the size from the config or default if not found - return sizeConfig[size] || sizeConfig['default']; -}; - -// Styled img component -export const StyledImage = styled.img<{ $rounded: TBorderRadius; $size: TSize | string }>` - border-radius: ${({ $rounded }) => getBorderRadius($rounded)}; - width: ${({ $size }) => getSize($size)}; - height: ${({ $size }) => getSize($size)}; - object-fit: cover; - aspect-ratio: 1/1; -`; - -// Styled placeholder component for the profile picture -interface IPlaceholderProps { - $rounded: TBorderRadius; - $size: TSize | string; - $color?: string; - $backgroundColor?: string; - theme?: TTheme; - $themeType?: TThemeTypes; - $layer?: TLayer; -} - -export const Placeholder = styled.div` - border-radius: ${({ $rounded }) => getBorderRadius($rounded)}; - width: ${({ $size }) => getSize($size)}; - height: ${({ $size }) => getSize($size)}; - display: flex; - justify-content: center; - align-items: center; - background-color: ${({ $backgroundColor, theme, $layer }) => ($backgroundColor ? $backgroundColor : theme.colors.primary[$layer ?? 2])}; - color: ${({ $color, theme, $layer }) => ($color ? $color : theme.colors.secondary[$layer ?? 1])}; - font-size: 1.5em; - aspect-ratio: 1/1; -`; diff --git a/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.tsx b/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.tsx deleted file mode 100644 index d3c080503..000000000 --- a/src/Components/Atoms/FancyProfilePicture/FancyProfilePicture.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; - -import { Placeholder, StyledImage, TSize } from './FancyProfilePicture.style'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { Typography } from '../Typography'; -import { TTypography } from '@/interface/TTypography'; - -// generate the text size based on the size prop -const getTextSize = (size: TSize | string): TTypography => { - switch (size) { - case 'xxs': - case 'xs': - return 'smText'; - case 'sm': - return 'h6'; - case 'md': - return 'h3'; - case 'lg': - return 'h2'; - case 'xl': - case 'xxl': - return 'h1'; - default: - return 'h4'; - } -}; - -export interface IFancyProfilePicture { - src?: string; - rounded?: 'sm' | 'md' | 'lg' | 'complete'; - size?: TSize | string; - alt?: string; - layer?: TLayer; - themeType?: TThemeTypes; - letterLength?: number; - className?: string; -} -// --------------------------------------------------------------------------- // -// ProfilePicture component to render with different sizes and border radius // -// --------------------------------------------------------------------------- // -export default function FancyProfilePicture(props: IFancyProfilePicture) { - const { src, rounded, size, alt, letterLength, className, ...placeholderProps } = { ...defaultProps, ...props }; - - return src ? ( - - ) : ( - - - {alt.substring(0, letterLength ?? 2).toUpperCase()} - - - ); -} - -const defaultProps = { - size: 'md', - alt: 'Profile', -}; diff --git a/src/Components/Atoms/FancyProfilePicture/index.ts b/src/Components/Atoms/FancyProfilePicture/index.ts deleted file mode 100644 index 5aa5c1aa4..000000000 --- a/src/Components/Atoms/FancyProfilePicture/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyProfilePicture } from './FancyProfilePicture'; diff --git a/src/Components/Atoms/FancySVGAtom/FancySVGAtom.model.ts b/src/Components/Atoms/FancySVGAtom/FancySVGAtom.model.ts deleted file mode 100644 index e44b8158e..000000000 --- a/src/Components/Atoms/FancySVGAtom/FancySVGAtom.model.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { CSSProp } from 'styled-components'; -import IStyledPrefixAndOmiter from '../../../interface/IStyledPrefixAndOmiter.model'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -export const sizes = { - xs: '14px', - sm: '16px', - md: '18px', - lg: '20px', - xl: '24px', - full: '100%', -}; - -export type ISizes = keyof typeof sizes; - -export type ISVGAtom = { - children?: React.ReactNode; - size?: ISizes; - externalStyle?: CSSProp; - isPassive?: boolean; - isActive?: boolean; - errorMessage?: string; - themeType?: TThemeTypes; - layer?: TLayer; -}; - -export type ISVGAtomProps = ISVGAtom & Omit, 'style'>; - -export type IStyledSVGAtom = IStyledPrefixAndOmiter; diff --git a/src/Components/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx b/src/Components/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx deleted file mode 100644 index d4c6326ad..000000000 --- a/src/Components/Atoms/FancySVGAtom/FancySVGAtom.stories.tsx +++ /dev/null @@ -1,73 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -import SVGXCircle from '../../icons/SVGXCircle/SVGXCircle'; - -// Import the component to be tested -import FancySVGAtom from './FancySVGAtom'; -// Define metadata for the story -const meta = { - component: FancySVGAtom, - - parameters: { - docs: { - description: { - component: 'Fancy SVG Atom that can be dynamicly adjusted in size and alignment. It can also be used to display error messages.', - }, - }, - }, - - // Define arguments for the story - argTypes: { - size: { - control: { type: 'select' }, - }, - themeType: { - control: { type: 'select' }, - }, - layer: { - control: { type: 'range', min: 1, max: 10, step: 1 }, - }, - errorMessage: { - control: { type: 'text' }, - }, - isActive: { - control: { type: 'boolean' }, - }, - isPassive: { - control: { type: 'boolean' }, - }, - }, - - // 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: { - isPassive: false, - size: 'md', - themeType: 'secondary', - errorMessage: '', - layer: 1, - isActive: true, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancySVGAtom/FancySVGAtom.tsx b/src/Components/Atoms/FancySVGAtom/FancySVGAtom.tsx deleted file mode 100644 index 4e1e83fed..000000000 --- a/src/Components/Atoms/FancySVGAtom/FancySVGAtom.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { ISVGAtomProps, IStyledSVGAtom, sizes } from './FancySVGAtom.model'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -interface ICalcIconColor { - theme: TTheme; - $isActive?: boolean; - $errorMessage?: string | undefined; - $themeType: TThemeTypes; - $layer?: number; -} - -const calcIconColor = ({ theme, $isActive, $errorMessage, $themeType, $layer }: ICalcIconColor): string => { - if (!$errorMessage) { - return $isActive ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer }); - } else { - return theme.colors.error[0]; - } -}; - -const StyledSVG = styled.i` - display: flex; - justify-content: center; - font-style: normal; - align-items: center; - width: ${({ $size }) => sizes[$size!]}; - aspect-ratio: 1/1; - color: ${({ $isActive, $errorMessage, $isPassive, theme, $themeType = 'secondary', $layer = 0 }) => - !$isPassive && calcIconColor({ theme, $isActive, $errorMessage, $layer, $themeType })}; - ${({ $externalStyle }) => $externalStyle}; - will-change: transform; - - svg { - width: 100%; - height: 100%; - } -`; - -// --------------------------------------------------------------------------- // -// --------- This is a wrapper for SVGs to wrap them and style them ---------- // -// --------------------------------------------------------------------------- // -export default function FancySVGAtom(props: ISVGAtomProps) { - const { children, isPassive, size, isActive, errorMessage, externalStyle, themeType, layer, ...htmlProps } = { - ...defaultProps, - ...props, - }; - - return ( - - {children} - - ); -} - -const defaultProps: ISVGAtomProps = { - size: 'md', - isPassive: false, - isActive: false, -}; diff --git a/src/Components/Atoms/FancySVGAtom/index.ts b/src/Components/Atoms/FancySVGAtom/index.ts deleted file mode 100644 index 670e83ee5..000000000 --- a/src/Components/Atoms/FancySVGAtom/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancySVGAtom } from './FancySVGAtom'; diff --git a/src/Components/Atoms/FancyVideo/FancyVideo.stories.tsx b/src/Components/Atoms/FancyVideo/FancyVideo.stories.tsx deleted file mode 100644 index 6bee9c7a2..000000000 --- a/src/Components/Atoms/FancyVideo/FancyVideo.stories.tsx +++ /dev/null @@ -1,69 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyVideo from './FancyVideo'; - -// Define metadata for the story -const meta = { - component: FancyVideo, - parameters: { - docs: { - description: { - component: 'FancyLooadingSpinner that indicates loading and can be dynamicly adjusted in the size.', - }, - }, - }, - - // Define arguments for the story - argTypes: { - src: { - control: { type: 'text' }, - }, - controls: { - control: { type: 'boolean' }, - }, - loop: { - control: { type: 'boolean' }, - }, - muted: { - control: { type: 'boolean' }, - }, - autoPlay: { - control: { type: 'boolean' }, - }, - darken: { - control: { type: 'boolean' }, - }, - poster: { - control: { type: 'text' }, - }, - }, - - // 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: { - aspectRatio: '16/9', - src: 'https://www.w3schools.com/html/mov_bbb.mp4', - controls: true, - loop: false, - muted: false, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyVideo/FancyVideo.tsx b/src/Components/Atoms/FancyVideo/FancyVideo.tsx deleted file mode 100644 index 06d735cda..000000000 --- a/src/Components/Atoms/FancyVideo/FancyVideo.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { isAspectRatioValid } from '@/components/utils/validations/isAspectRatioValid'; - -// Define a styled video component using styled-components -const StyledVideo = styled.video<{ $aspectRatio?: string; $darken?: boolean }>` - object-fit: cover; - width: 100%; - height: auto; - ${({ $aspectRatio }) => ($aspectRatio ? `aspect-ratio: ${$aspectRatio};` : '')} - filter: ${({ $darken }) => ($darken ? 'brightness(0.5)' : 'none')}; -`; - -// Define the props for the FancyVideo component -export interface IFancyVideo { - src: string; - controls?: boolean; - autoPlay?: boolean; - loop?: boolean; - muted?: boolean; - poster?: string; - aspectRatio?: string; // e.g. "16/9" - darken?: boolean; -} -// --------------------------------------------------------------------------- // -// -------------- The Definition for the FancyVideo Component ---------------- // -// --------------------------------------------------------------------------- // -export default function FancyVideo(props: IFancyVideo) { - const { src, controls, autoPlay, loop, muted, poster, aspectRatio, darken = true } = props; - - // Validate the aspect ratio if it is provided - if (aspectRatio && !isAspectRatioValid(aspectRatio)) { - throw new Error('The aspect ratio is not valid. Please use the format "16/9"'); - } - - // Render the video with the appropriate props - return ( - - - - ); -} diff --git a/src/Components/Atoms/FancyVideo/index.ts b/src/Components/Atoms/FancyVideo/index.ts deleted file mode 100644 index e86391b91..000000000 --- a/src/Components/Atoms/FancyVideo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyVideo } from './FancyVideo'; diff --git a/src/Components/Atoms/FancyXButton/FancyXButton.stories.tsx b/src/Components/Atoms/FancyXButton/FancyXButton.stories.tsx deleted file mode 100644 index 23f1fc6cb..000000000 --- a/src/Components/Atoms/FancyXButton/FancyXButton.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyXButton from './FancyXButton'; - -// Define metadata for the story -const meta = { - component: FancyXButton, - parameters: { - docs: { - description: { - component: 'FancyXButton is a button with a fancy X in it. It is used to close a modal or a popup.', - }, - }, - }, - - // Define arguments for the story - argTypes: { - themeType: { - description: - 'The themeType is used to define the color of the X in the button. It can be any of the colors defined in the theme or systemMessages.', - control: { - type: 'select', - options: ['primary', 'secondary', 'success', 'warning', 'info'], - }, - defaultValue: { - summary: 'accent', - }, - }, - }, - - // 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: { - themeType: 'secondary', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/FancyXButton/FancyXButton.tsx b/src/Components/Atoms/FancyXButton/FancyXButton.tsx deleted file mode 100644 index 8df877704..000000000 --- a/src/Components/Atoms/FancyXButton/FancyXButton.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import Color from 'color'; - -import { fontSize } from '../../../design/theme/designSizes'; -import simpleColorTransition from '../../../design/designFunctions/simpleColorTransition/simpleTransition'; -import { TThemeTypesNotTrasparent } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -type FancyXButtonDesign = TThemeTypesNotTrasparent; - -interface IStyledFancyXButton { - $themeType?: FancyXButtonDesign; - $layer?: TLayer; - theme: TTheme; -} - -const StyledFancyXButton = styled.button` - padding: 0 ${({ theme }) => theme.spacing.sm} ${({ theme }) => theme.spacing.xxs}; - background: none; - color: ${({ $themeType = 'accent', theme, $layer }) => getBackgroundColor({ $themeType, theme, $layer })}; - border: none; - font-size: ${fontSize.xl}; - font-weight: bolder; - cursor: pointer; - outline: none; - ${simpleColorTransition} - - &:hover { - color: ${({ $themeType = 'accent', $layer, theme }) => Color(getBackgroundColor({ $themeType, $layer, theme })).darken(0.1).hex()}; - } -`; - -// --------------------------------------------------------------------------- // -// --------------- The main Component for the X Close Button------- ---------- // -// --------------------------------------------------------------------------- // -interface IFancyXButton { - onClick?: () => void; - themeType?: FancyXButtonDesign; - layer?: TLayer; -} -export default function FancyXButton({ onClick, themeType, layer }: IFancyXButton) { - //check wich design comes in and add the right color object uiColor or systemMessages to the button - - return ( - - x - - ); -} diff --git a/src/Components/Atoms/FancyXButton/index.ts b/src/Components/Atoms/FancyXButton/index.ts deleted file mode 100644 index 9efa5ea43..000000000 --- a/src/Components/Atoms/FancyXButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyXButton } from './FancyXButton'; diff --git a/src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.stories.tsx b/src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.stories.tsx deleted file mode 100644 index 8f976e800..000000000 --- a/src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import ImageVideoOverlay from './ImageVideoOverlay'; -import { Typography } from '../Typography'; -import { FancyVideo } from '../FancyVideo'; - -// Define metadata for the story -const meta = { - component: ImageVideoOverlay, - parameters: { - docs: { - description: { - component: - 'The ImageVideoOverlay is a Wrapper for the FancyVideo / FancyImage Component. It can be used to add a text overlay to the video.
- It recives textChildren as normal React nodes
- As children it recives the FancyVideo / FancyImage Component / or what do you fucking want', - }, - }, - }, - - // Define arguments for the story - argTypes: {}, - - // 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: { - position: 'center', - textChildren: ( - <> - Hello World - - ), - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx b/src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx deleted file mode 100644 index 7835e87ac..000000000 --- a/src/Components/Atoms/ImageVideoOverlay/ImageVideoOverlay.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React from 'react'; - -import { styled, css } from 'styled-components'; -import { textShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TTheme } from '@/interface/TTheme'; - -// Define the gradient options for the overlay -const gradientOptions = { - start: 'rgba(0,0,0,0.4) 0%', - end: 'rgba(0,0,0,0) 40%', -}; - -// Define a styled wrapper component using styled-components -const Wrapper = styled.div` - position: relative; - overflow: hidden; - line-height: 0; - pointer-events: none; -`; - -// Define a styled overlay component using styled-components -const Overlay = styled.div<{ $position: string }>` - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - - ${({ $position }) => { - switch ($position) { - case 'top-left': - return css` - background: linear-gradient(135deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'top-right': - return css` - background: linear-gradient(225deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'center': - return css` - background: radial-gradient(ellipse 75% 50% at center, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'bottom-left': - return css` - background: linear-gradient(45deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - case 'bottom-right': - return css` - background: linear-gradient(325deg, ${gradientOptions.start}, ${gradientOptions.end}); - `; - default: - return ''; - } - }}; -`; - -// Define a styled text wrapper component using styled-components -const TextWrapper = styled.div<{ $position: string; theme: TTheme }>` - position: absolute; - z-index: 1; - padding: ${({ theme }) => theme.spacing.md}; - pointer-events: none; - ${textShadow.lg} - - ${({ $position }) => { - switch ($position) { - case 'top-left': - return css` - text-align: left; - top: 0; - left: 0; - `; - case 'top-right': - return css` - text-align: right; - top: 0; - right: 0; - `; - case 'center': - return css` - text-align: center; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - `; - case 'bottom-left': - return css` - text-align: left; - bottom: 0; - left: 0; - `; - case 'bottom-right': - return css` - text-align: right; - bottom: 0; - right: 0; - `; - default: - return ''; - } - }}; -`; - -// Define the possible positions for the overlay -export type TPositions = 'top-left' | 'top-right' | 'center' | 'bottom-left' | 'bottom-right'; - -// Define the props for the ImageVideoOverlay component -interface IImageVideoOverlay { - children?: React.ReactNode; - textChildren?: React.ReactNode; - position?: TPositions; -} - -// --------------------------------------------------------------------------- // -// ----------- The Definition for the ImageVideoOverlay Component ------------ // -// --------------------------------------------------------------------------- // -export default function ImageVideoOverlay(props: IImageVideoOverlay) { - const { children, position, textChildren } = { ...defaultProps, ...props }; - - return ( - - - {textChildren} - {/* The children is normaly only a Video or a image, but do with it what d o you fuucking want */} - {children} - - ); -} - -// Define the default props for the ImageVideoOverlay component -const defaultProps = { - position: 'top-right', -}; diff --git a/src/Components/Atoms/ImageVideoOverlay/index.ts b/src/Components/Atoms/ImageVideoOverlay/index.ts deleted file mode 100644 index 2697e2e51..000000000 --- a/src/Components/Atoms/ImageVideoOverlay/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ImageVideoOverlay } from './ImageVideoOverlay'; diff --git a/src/Components/Atoms/InputLabel/InputLabel.stories.tsx b/src/Components/Atoms/InputLabel/InputLabel.stories.tsx deleted file mode 100644 index 896ac2e67..000000000 --- a/src/Components/Atoms/InputLabel/InputLabel.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; -import themeStore from '../../../design/theme/themeStore/themeStore'; - -// Import the component to be tested -import InputLabel from './InputLabel'; - -// Define metadata for the story -const meta = { - component: InputLabel, - parameters: { - docs: { - description: { - component: - 'Is simply a label for the input. It is used to describe the input. The Parents are the Aligned and AnimatedInputLabel.
Its only used for grounding the design', - }, - }, - }, - - // Define arguments for the story - // 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: () => Label, - args: { - theme: themeStore.getState().theme, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/InputLabel/InputLabel.tsx b/src/Components/Atoms/InputLabel/InputLabel.tsx deleted file mode 100644 index 1f597a6a0..000000000 --- a/src/Components/Atoms/InputLabel/InputLabel.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { styled } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -// --------------------------------------------------------------------------- // -// --------------- The main label design for the input elements -------------- // -// --------------------------------------------------------------------------- // -const InputLabel = styled.label<{ theme: TTheme }>` - width: 100%; - color: ${({ theme }) => theme.colors.secondary[1]}; - font-weight: bold; - pointer-events: none; - user-select: none; - transition: 0.3s; - transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96); - letter-spacing: 0.8px; -`; - -InputLabel.displayName = 'InputLabel'; - -export default InputLabel; diff --git a/src/Components/Atoms/InputLabel/index.ts b/src/Components/Atoms/InputLabel/index.ts deleted file mode 100644 index 7876ceaac..000000000 --- a/src/Components/Atoms/InputLabel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as InputLabel } from './InputLabel'; diff --git a/src/Components/Atoms/InputUnderline/InputUnderline.stories.tsx b/src/Components/Atoms/InputUnderline/InputUnderline.stories.tsx deleted file mode 100644 index 95caaade5..000000000 --- a/src/Components/Atoms/InputUnderline/InputUnderline.stories.tsx +++ /dev/null @@ -1,77 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import InputUnderline from './InputUnderline'; - -// Define metadata for the story -const meta = { - component: InputUnderline, - parameters: { - docs: { - description: { - component: - 'The InputUnderline is a simple underline for the input.
- It has a colorState prop to define the color of the underline
- It has a isActive prop to define if the underline is active
- It has a themeType prop to define the theme of the underline
- It has a layer prop to define the layer of the underline', - }, - }, - }, - - // Define arguments for the story - argTypes: { - colorState: { - description: 'Define the color state of the underline', - control: { - type: 'select', - }, - options: ['error', 'active', 'default'], - }, - isActive: { - description: 'Define if the underline is active', - control: { - type: 'boolean', - }, - }, - themeType: { - description: 'Define the theme of the underline', - control: { - type: 'select', - }, - options: ['primary', 'secondary', 'accent'], - }, - layer: { - description: 'Define the layer of the underline', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - }, - - // 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: { - colorState: 'active', - isActive: false, - themeType: 'secondary', - layer: 0, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/InputUnderline/InputUnderline.tsx b/src/Components/Atoms/InputUnderline/InputUnderline.tsx deleted file mode 100644 index ef27d53d9..000000000 --- a/src/Components/Atoms/InputUnderline/InputUnderline.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import { styled, css } from 'styled-components'; - -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -// Define the styled component for the underline -type IStyledUnderline = IStyledPrefixAndPicker; -const UnderLine = styled.i` - position: absolute; - left: 0; - bottom: 0; - height: 2px; - border-radius: 5px; - background: ${({ theme, $themeType = 'secondary', $layer }) => getBackgroundColor({ theme, $themeType, $layer })}; - overflow: hidden; - width: 100%; - - // Define the styles for the gradient overlay - &::before { - content: ''; - width: 100%; - border-radius: 5px; - position: absolute; - left: 0; - bottom: 0; - opacity: ${({ $isActive }) => ($isActive ? 1 : 0)}; - height: 100%; - background: ${({ $colorState, theme }) => { - if ($colorState === 'error') return css`linear-gradient(90deg, ${theme.colors.error[1]}, ${theme.colors.error[0]})`; - if ($colorState === 'active') return css`linear-gradient(90deg, ${theme.colors.accent[1]}, ${theme.colors.accent[0]})`; - if ($colorState === 'default') return css`linear-gradient(90deg, ${theme.colors.secondary[0]}, ${theme.colors.secondary[4]})`; - }}; - - // Define the transition styles for the gradient overlay - transition: 0.25s; - transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96); - } -`; - -// Define the props for the FancyInputUnderline component -interface IFancyUnderline { - colorState?: 'error' | 'active' | 'default'; - isActive?: boolean; - autoWidth?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; -} -// --------------------------------------------------------------------------- // -// --------- The underline for the input components with state style --------- // -// --------------------------------------------------------------------------- // -export default function FancyInputUnderline(props: IFancyUnderline) { - const { colorState = 'default', isActive, autoWidth, layer = 4, themeType } = props; - - // Render the FancyInputUnderline component with the appropriate props - return ; -} diff --git a/src/Components/Atoms/InputUnderline/index.ts b/src/Components/Atoms/InputUnderline/index.ts deleted file mode 100644 index bc199604b..000000000 --- a/src/Components/Atoms/InputUnderline/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as InputUnderline } from './InputUnderline'; diff --git a/src/Components/Atoms/ListDivider/ListDivider.model.ts b/src/Components/Atoms/ListDivider/ListDivider.model.ts deleted file mode 100644 index b384e3edc..000000000 --- a/src/Components/Atoms/ListDivider/ListDivider.model.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -export type TTextAlign = 'left' | 'center' | 'right'; - -type WithLabel = { - label: string; - textAlignment?: TTextAlign; -}; - -type WithoutLabel = { - label?: never; - textAlignment?: TTextAlign; -}; - -export type IListDivider = { - themeType?: TThemeTypes; - layer?: TLayer; - noLine?: boolean; - bold?: boolean; - icon?: React.ReactNode; -} & (WithLabel | WithoutLabel); diff --git a/src/Components/Atoms/ListDivider/ListDivider.stories.tsx b/src/Components/Atoms/ListDivider/ListDivider.stories.tsx deleted file mode 100644 index cee02d42f..000000000 --- a/src/Components/Atoms/ListDivider/ListDivider.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import ListDivider from './ListDivider'; - -// Define metadata for the story -const meta = { - component: ListDivider, - parameters: { - docs: { - description: { - component: 'Dumb-Component: Its a Divider that displays only a line or line with informations', - }, - }, - }, - // Define arguments for the story - argTypes: { - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'The layer of the button hover effect', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { - summary: '3', - }, - }, - }, - // 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: {}, -}; -export const WithText: Story = { - render: (args) => , - args: { - label: 'Some Text', - }, -}; diff --git a/src/Components/Atoms/ListDivider/ListDivider.style.tsx b/src/Components/Atoms/ListDivider/ListDivider.style.tsx deleted file mode 100644 index b1fff9959..000000000 --- a/src/Components/Atoms/ListDivider/ListDivider.style.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { css, styled } from 'styled-components'; - -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import { IListDivider } from './ListDivider.model'; -import { TTheme } from '@/interface/TTheme'; - -// only a sepeation line -type TStyledPrefixAndOmitter = IStyledPrefixAndPicker & { theme: TTheme }; -export const StyledI = styled.div` - height: 1px; - background-color: ${({ theme, $themeType, $layer }) => - getBackgroundColor({ theme, $themeType: $themeType ?? 'secondary', $layer: $layer ?? 2 })}; - margin: 8px 0; -`; - -// the wrapper for the text and the line -type TStyledTextDiv = IStyledPrefixAndPicker & { theme: TTheme }; -export const StyledTextDiv = styled.div` - display: flex; - color: ${({ $themeType, $layer, theme }) => getBackgroundColor({ $themeType: $themeType ?? 'secondary', $layer, theme })}; - - justify-content: ${({ $textAlignment }) => - $textAlignment === 'left' ? 'flex-start' : $textAlignment === 'right' ? 'flex-end' : 'center'}; - align-items: center; - margin: 2px 0; - - > span { - padding: ${({ $textAlignment }) => { - switch ($textAlignment) { - case 'left': - return '0 8px 0 20px'; - case 'right': - return '0 20px 0 8px'; - case 'center': - return '0 8px 0 8px'; - } - }}; - flex-shrink: 0; - } - - /* This aligns the left line */ - ${({ $textAlignment, $themeType, $layer, theme, $noLine }) => - !$noLine && - ($textAlignment === 'right' || $textAlignment === 'center') && - css` - &:before { - content: ' '; - width: 100%; - height: 1px; - background-color: ${getBackgroundColor({ $themeType: $themeType ?? 'secondary', $layer, theme })}; - } - `} - - /* This aligns the right line */ - ${({ $textAlignment, $themeType, $layer, theme, $noLine }) => - !$noLine && - ($textAlignment === 'left' || $textAlignment === 'center') && - css` - &:after { - content: ' '; - width: 100%; - height: 1px; - background-color: ${getBackgroundColor({ $themeType: $themeType ?? 'secondary', $layer, theme })}; - } - `} -`; diff --git a/src/Components/Atoms/ListDivider/ListDivider.tsx b/src/Components/Atoms/ListDivider/ListDivider.tsx deleted file mode 100644 index ae9f0cac5..000000000 --- a/src/Components/Atoms/ListDivider/ListDivider.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; - -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 ----- // -// --------------------------------------------------------------------------- // -export default function ListDivider(props: IListDivider) { - const { label, textAlignment = 'center', themeType, layer, bold, icon, noLine } = props; - - return ( - <> - {/* Render a Seperator(Divider) with a optional label and icon */} - {label ? ( - - - {label && ( - - {label} - - )} - {icon && {icon}} - - - ) : ( - // Render a Seperator(Divider) only a line - - )} - - ); -} diff --git a/src/Components/Atoms/ListDivider/index.ts b/src/Components/Atoms/ListDivider/index.ts deleted file mode 100644 index a871920d7..000000000 --- a/src/Components/Atoms/ListDivider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ListDivider } from './ListDivider'; diff --git a/src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.stories.tsx b/src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.stories.tsx deleted file mode 100644 index f575f065c..000000000 --- a/src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.stories.tsx +++ /dev/null @@ -1,89 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import LoadingSVGArrows from './LoadingSVGArrows'; - -// Define metadata for the story -const meta = { - component: LoadingSVGArrows, - parameters: { - docs: { - description: { - component: - 'The LoadingSVGArrows is a simple loading animation with SVG arrows.
- It has a isLoading prop to define if the animation is active', - }, - }, - }, - - // Define arguments for the story - argTypes: { - isActive: { - control: { - type: 'boolean', - }, - }, - isLoading: { - control: { - type: 'boolean', - }, - }, - themeType: { - control: { - type: 'select', - }, - options: ['primary', 'secondary', 'accent'], - }, - layer: { - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - size: { - control: { - type: 'select', - }, - }, - errorMessage: { - control: { - type: 'text', - }, - }, - isPassive: { - description: - 'Passive mode is when when the color should adapt from the parent component, otherwise it can used interative with (active, error, colors) ', - control: { - type: 'boolean', - }, - }, - }, - - // 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: { - isLoading: true, - isPassive: false, - themeType: 'accent', - layer: 1, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx b/src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx deleted file mode 100644 index 2c8f59917..000000000 --- a/src/Components/Atoms/LoadingSVGArrows/LoadingSVGArrows.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import styled, { keyframes } from 'styled-components'; -import SVGLoadingArrows from '../../icons/SVGLoadingArrows/SVGLoadingArrows'; -import { ISVGAtomProps } from '../FancySVGAtom/FancySVGAtom.model'; - -const loadingAnimation = keyframes` - 0% { transform: rotate(0deg); } - 100% { transform: rotate(360deg); } -`; - -const AnimatedSVGArrwos = styled.span` - animation: ${loadingAnimation} 2s infinite ease-in-out; - line-height: 0; -`; - -interface ILoadingSVGArrowsProps { - isLoading?: boolean; -} - -// --------------------------------------------------------------------------- // -// A loading animation with two arrows thats shown when something is loading // -// --------------------------------------------------------------------------- // -export default function LoadingSVGArrows(props: ILoadingSVGArrowsProps & ISVGAtomProps) { - const { isLoading } = props; - - return isLoading ? ( - - - - ) : null; -} diff --git a/src/Components/Atoms/MenuItem/MenuItem.stories.tsx b/src/Components/Atoms/MenuItem/MenuItem.stories.tsx deleted file mode 100644 index c97c6fe1a..000000000 --- a/src/Components/Atoms/MenuItem/MenuItem.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import MenueItem from './MenuItem'; - -// Define metadata for the story -const meta = { - component: MenueItem, - parameters: { - docs: { - description: { - component: - 'Dumb-Component: The MenueItem is only a Box with some styles you can use it to build your own MenueList or something else', - }, - }, - }, - // Define arguments for the story - argTypes: { - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'The layer of the button hover effect', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { - summary: '3', - }, - }, - }, - // 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) => ( - - Some Content - {args.children} - - ), - args: {}, -}; diff --git a/src/Components/Atoms/MenuItem/MenuItem.style.tsx b/src/Components/Atoms/MenuItem/MenuItem.style.tsx deleted file mode 100644 index fefaa8cc3..000000000 --- a/src/Components/Atoms/MenuItem/MenuItem.style.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styled from 'styled-components'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; -import { getBackgroundColor, getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; - -type StyledMenuProps = { - $themeType?: TThemeTypes; - $layer?: TLayer; - theme: TTheme; - as?: 'a' | 'button'; -}; - -export const StyledMenuItem = styled.button` - display: flex; - box-sizing: border-box; - padding: 10px 20px; - cursor: pointer; - background-color: transparent; - border: none; - text-decoration: none; - color: ${({ theme, $themeType }) => getTextColor({ theme, $themeType: $themeType ?? 'secondary', $textLayer: 1 })}; - - &:hover { - background-color: ${({ theme, $themeType, $layer }) => - getBackgroundColor({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 3 })}; - } -`; diff --git a/src/Components/Atoms/MenuItem/MenuItem.tsx b/src/Components/Atoms/MenuItem/MenuItem.tsx deleted file mode 100644 index b23a31836..000000000 --- a/src/Components/Atoms/MenuItem/MenuItem.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { StyledMenuItem } from './MenuItem.style'; - -type HTMLButtonProps = React.ButtonHTMLAttributes & { as?: 'button' }; -type HTMLAnchorProps = React.AnchorHTMLAttributes & { as: 'a' }; - -type MenueItemProps = { - children?: React.ReactNode; - themeType?: TThemeTypes; - layer?: TLayer; -} & (HTMLButtonProps | HTMLAnchorProps); -// --------------------------------------------------------------------------- // -//A Empty Menue Item that only handles the style you can put everythin as childs// -// --------------------------------------------------------------------------- // -export default function MenuItem(props: MenueItemProps) { - const { children, as, themeType, layer, ...HTMLProps } = props; - - return ( - - {children} - - ); -} diff --git a/src/Components/Atoms/MenuItem/index.ts b/src/Components/Atoms/MenuItem/index.ts deleted file mode 100644 index e24b0fb81..000000000 --- a/src/Components/Atoms/MenuItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MenuItem } from './MenuItem'; diff --git a/src/Components/Atoms/PageNumberList/PageNumberList.stories.tsx b/src/Components/Atoms/PageNumberList/PageNumberList.stories.tsx deleted file mode 100644 index 3297c0695..000000000 --- a/src/Components/Atoms/PageNumberList/PageNumberList.stories.tsx +++ /dev/null @@ -1,63 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import PageNumberList from './PageNumberList'; - -// Define metadata for the story -const meta = { - component: PageNumberList, - parameters: { - docs: { - description: { - component: - 'The PageNumberList is a simple component to display the page numbers.
- It has a totalPages prop to define the total number of pages
- It has a currentPage prop to define the current page
- It has a pageLimits prop to define the page limits
- It has a onClick prop to define the onClick function', - }, - }, - }, - - // Define arguments for the story - argTypes: { - pageLimits: { - control: { - type: 'number', - }, - }, - totalPages: { - control: { - type: 'number', - }, - }, - currentPage: { - 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: { - totalPages: 10, - currentPage: 1, - pageLimits: 3, - onClick: (page: number) => console.log(page), - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/PageNumberList/PageNumberList.style.tsx b/src/Components/Atoms/PageNumberList/PageNumberList.style.tsx deleted file mode 100644 index 33e91b0bd..000000000 --- a/src/Components/Atoms/PageNumberList/PageNumberList.style.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { styled } from 'styled-components'; -import { TTheme } from '@/interface/TTheme'; -import simpleColorTransition from '../../../design/designFunctions/simpleColorTransition/simpleTransition'; - -// Define a styled component for the button wrapper -export const ButtonWrapper = styled.div<{ $isActive: boolean; theme: TTheme }>` - button { - color: ${({ $isActive, theme }) => $isActive && theme.colors.accent[0]}; - ${simpleColorTransition} - padding: ${({ theme }) => theme.spacing.sm}; - - &:hover { - color: ${({ $isActive, theme }) => $isActive && theme.colors.accent[0]}; - } - } -`; - -export const Wrapper = styled.div<{ theme: TTheme }>` - display: flex; - gap: ${({ theme }) => theme.spacing.md}; -`; diff --git a/src/Components/Atoms/PageNumberList/PageNumberList.tsx b/src/Components/Atoms/PageNumberList/PageNumberList.tsx deleted file mode 100644 index d1d1a44a0..000000000 --- a/src/Components/Atoms/PageNumberList/PageNumberList.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { FancyButton } from '../../organisms/FancyButton'; -import { ButtonWrapper, Wrapper } from './PageNumberList.style'; - -// Define a function to generate an array of page numbers to display -const generateNumbers = (totalPages: number, currentPage: number, pageLimit = 3) => { - const numbers: (number | string)[] = []; - - let startPage = currentPage - Math.floor(pageLimit / 2); - let endPage = currentPage + Math.floor(pageLimit / 2); - - if (pageLimit % 2 === 0) { - startPage += 1; // If pageLimit is even, favor showing one less page before the current page - } - - // Adjust if the range goes outside the total pages - if (startPage < 1) { - endPage += Math.abs(startPage) + 1; - startPage = 1; - } - - if (endPage > totalPages) { - startPage -= endPage - totalPages; - endPage = totalPages; - } - - startPage = Math.max(startPage, 1); - - if (startPage > 1) { - numbers.push('...'); - } - - for (let i = startPage; i <= endPage; i++) { - numbers.push(i); - } - - if (endPage < totalPages) { - numbers.push('...'); - } - - return numbers; -}; - -// Define the props for the PageNumberList component -interface IPageNumberList { - totalPages: number; - currentPage: number; - pageLimits?: number; - onClick?: (page: number) => void; -} -// --------------------------------------------------------------------------- // -// ------- This compoennt generate the Page Numbers and the Spacings --------- // -// --------------------------------------------------------------------------- // -export default function PageNumberList(props: IPageNumberList) { - const { totalPages, currentPage, onClick, pageLimits } = props; - - // Generate an array of page numbers to display - const NumberArray = generateNumbers(totalPages, currentPage, pageLimits); - - // Render the PageNumberList component with the appropriate props - return ( - - {/* Map over the total number of pages and render a FancyButton for each page */} - {NumberArray.map((item, index) => ( - - onClick && onClick(index + 1)} - size="md" - themeType="transparent" - wide={false} - /> - - ))} - - ); -} diff --git a/src/Components/Atoms/PasswordEye/PasswordEye.stories.tsx b/src/Components/Atoms/PasswordEye/PasswordEye.stories.tsx deleted file mode 100644 index 439f37c76..000000000 --- a/src/Components/Atoms/PasswordEye/PasswordEye.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import PasswordEye from './PasswordEye'; - -// Define metadata for the story -const meta = { - component: PasswordEye, - parameters: { - docs: { - description: { - component: - 'The PasswordEye is a simple component to toggle the password visibility.
- It has a isShow prop to define if the password is shown
- It has a onClick prop to define the onClick function', - }, - }, - }, - // Define arguments for the story - argTypes: { - isShow: { - description: 'Define if the password is shown', - control: { - type: 'boolean', - }, - }, - }, - - // 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: { - isShow: false, - onClick: () => console.log('click'), - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/PasswordEye/PasswordEye.tsx b/src/Components/Atoms/PasswordEye/PasswordEye.tsx deleted file mode 100644 index ee82aa198..000000000 --- a/src/Components/Atoms/PasswordEye/PasswordEye.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -import SVGEyeCrossed from '../../icons/SVGEyeCrossed/SVGEyeCrossed'; -import SVGEyeOpen from '../../icons/SVGEyeOpen/SVGEyeOpen'; -import FancySVGAtom from '../FancySVGAtom/FancySVGAtom'; - -interface IPasswordEye { - isShow?: boolean; - onClick?: () => void; -} -export default function PasswordEye({ isShow, onClick }: IPasswordEye) { - const clickHandler = () => { - onClick && onClick(); - }; - - return ( - - {isShow ? ( - // the eye icon for the password type toggle - - {SVGEyeOpen} - - ) : ( - // the crossed out eye icon for the password type toggle - - {SVGEyeCrossed} - - )} - - ); -} diff --git a/src/Components/Atoms/PasswordEye/index.ts b/src/Components/Atoms/PasswordEye/index.ts deleted file mode 100644 index 8c603ef59..000000000 --- a/src/Components/Atoms/PasswordEye/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as PasswordEye } from './PasswordEye'; diff --git a/src/Components/Atoms/ProgressBar/ProgressBar.stories.tsx b/src/Components/Atoms/ProgressBar/ProgressBar.stories.tsx deleted file mode 100644 index 82d2e054e..000000000 --- a/src/Components/Atoms/ProgressBar/ProgressBar.stories.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import ProgressBar from './ProgressBar'; - -// Define metadata for the story -const meta = { - component: ProgressBar, - parameters: { - docs: { - description: { - component: - 'The ProgressBar is a simple component to display the progress.
- It has a maxValue prop to define the max value of the progress bar
- It has a progress prop to define the progress of the progress bar
- It has a themeType prop to define the theme type of the progress bar
- It has a layer prop to define the layer of the progress bar', - }, - }, - }, - // Define arguments for the story - argTypes: { - maxValue: { - description: 'Define the max value of the progress bar', - control: { - type: 'number', - }, - }, - progress: { - description: 'Define the progress of the progress bar', - control: { - type: 'number', - }, - }, - themeType: { - description: 'Define the theme type of the progress bar', - control: { - type: 'select', - }, - options: ['primary', 'secondary', 'accent'], - }, - layer: { - description: 'Define the layer of the progress bar', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - }, - - // 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: { - maxValue: 100, - progress: 50, - themeType: 'secondary', - layer: 0, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/ProgressBar/ProgressBar.tsx b/src/Components/Atoms/ProgressBar/ProgressBar.tsx deleted file mode 100644 index d589e0b9f..000000000 --- a/src/Components/Atoms/ProgressBar/ProgressBar.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -// Define the styled component for the progress bar container -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 })}; - border-radius: 10px; - overflow: hidden; - position: relative; -`; - -// Define the interface for the progress bar fill props -interface IProgressBarFillProps { - width: number; - theme: TTheme; -} -// Define the styled component for the progress bar fill -const ProgressBarFill = styled.div` - height: 100%; - width: ${({ width }) => width}%; - background-color: ${({ theme }) => theme.colors.accent[0]}; - border-radius: ${({ theme }) => theme.borderRadius.complete} 0 0 ${({ theme }) => theme.borderRadius.complete}; - transition: width 0.2s ease-out; -`; - -// Define the interface for the progress bar props -export interface IProgressBar { - progress?: number; - maxValue?: number; - id?: string; - themeType?: TThemeTypes; - layer?: TLayer; -} -// Define the ProgressBar component -export default function ProgressBar({ progress = 0, maxValue = 100, id, themeType, layer }: IProgressBar) { - // Calculate the width of the progress bar fill - const width = (progress / maxValue) * 100; - - // Render the ProgressBar component with the appropriate props - return ( - - - - ); -} diff --git a/src/Components/Atoms/ProgressBar/index.ts b/src/Components/Atoms/ProgressBar/index.ts deleted file mode 100644 index e072ff53d..000000000 --- a/src/Components/Atoms/ProgressBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ProgressBar } from './ProgressBar'; diff --git a/src/Components/Atoms/RawCheckbox/RawCheckbox.model.ts b/src/Components/Atoms/RawCheckbox/RawCheckbox.model.ts deleted file mode 100644 index c81b5a83c..000000000 --- a/src/Components/Atoms/RawCheckbox/RawCheckbox.model.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { HTMLAttributes } from 'react'; - -// the props that will be passed to the input element -type NativeAttrs = Omit, 'type'>; - -// MAIN INCOMMING PROPS PASSED TO THE COMPONENT -export type IRawCheckboxProps = NativeAttrs; diff --git a/src/Components/Atoms/RawCheckbox/RawCheckbox.stories.tsx b/src/Components/Atoms/RawCheckbox/RawCheckbox.stories.tsx deleted file mode 100644 index 503c039d0..000000000 --- a/src/Components/Atoms/RawCheckbox/RawCheckbox.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import RawCheckbox from './RawCheckbox'; - -// Define metadata for the story -const meta = { - component: RawCheckbox, - parameters: { - docs: { - description: { - component: - 'The RawCheckbox is a simple component to display the checkbox.
- It has a defaultChecked prop to define the default checked of the checkbox
- It has a onClick prop to define the onClick function', - }, - }, - }, - // Define arguments for the story - argTypes: {}, - - // 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: { - defaultChecked: true, - onClick: () => console.log('click'), - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/RawCheckbox/RawCheckbox.style.tsx b/src/Components/Atoms/RawCheckbox/RawCheckbox.style.tsx deleted file mode 100644 index e21820986..000000000 --- a/src/Components/Atoms/RawCheckbox/RawCheckbox.style.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import styled, { css } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -// a consistant style for the checkbox and the fake checkbox -const checkboxStyles = css` - width: 20px; - height: 20px; - border-radius: 4px; -`; - -// the real chekbox but its hidden and the fake one is shown -export const HidenCheckBox = styled.input` - margin: 0; - position: absolute; - cursor: pointer; - opacity: 1; - background-color: transparent; - z-index: 0; - appearance: none; - outline: none; - ${checkboxStyles} - margin: 1px; - - &:checked { - background-color: transparent; - } - - &:focus-visible { - box-shadow: 0 0 0px 1px white; - } -`; - -// the fake checkbox that is shown for better styling -export const FakeCheckbox = styled.div<{ $checked: boolean; theme: TTheme }>` - position: absolute; - top: 0; - left: 0; - background-color: ${({ theme }) => theme.colors.primary[3]}; - z-index: 1; - ${checkboxStyles} - box-sizing: border-box; - width: 20px; - height: 20px; - - &:focus-visible { - outline: none; /* Remove default outline */ - } - /* the checkmark svg */ - svg { - position: absolute; - top: 50%; - left: 50%; - width: 20px; - height: 20px; - transform: translate(-50%, -50%); - fill: ${({ theme }) => theme.colors.accent[0]}; - display: ${({ $checked }) => ($checked ? 'block' : 'none')}; - } -`; - -// the container for the checkbox and the fake checkbox -export const InputContainer = styled.div` - position: relative; - display: flex; - align-items: center; - justify-content: center; - width: 20px; - height: 20px; - flex-shrink: 0; -`; diff --git a/src/Components/Atoms/RawCheckbox/RawCheckbox.tsx b/src/Components/Atoms/RawCheckbox/RawCheckbox.tsx deleted file mode 100644 index c48dd0ad0..000000000 --- a/src/Components/Atoms/RawCheckbox/RawCheckbox.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -import { FakeCheckbox, HidenCheckBox, InputContainer } from './RawCheckbox.style'; -import { IRawCheckboxProps } from './RawCheckbox.model'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -// --------------------------------------------------------------------------- // -// -------------------- A simple Checkbox with a Label ----------------------- // -// --------------------------------------------------------------------------- // -export default function RawCheckbox(props: IRawCheckboxProps) { - const { onChange, defaultChecked, id, ...rest } = props; - const [checked, setChecked] = useState(false); - - // the onClick for clicking the fake checkbox to set the state - const handleClick = () => { - setChecked(!checked); - }; - - // the onChange handler to set the state and call the incomming onChange handler - const handleChange = (e: React.ChangeEvent) => { - setChecked(e.target.checked); - if (onChange) onChange(e); - }; - - // Set default incomming checked value - useEffect(() => { - if (defaultChecked) setChecked(defaultChecked); - }, [defaultChecked]); - - return ( - - {/* The Fakecheckbox for the styling */} - - - - {/* The real checkbox but this hidden */} - - - ); -} diff --git a/src/Components/Atoms/RawCheckbox/index.ts b/src/Components/Atoms/RawCheckbox/index.ts deleted file mode 100644 index c315b01ae..000000000 --- a/src/Components/Atoms/RawCheckbox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RawCheckbox } from './RawCheckbox'; diff --git a/src/Components/Atoms/RawInput/RawInput.stories.tsx b/src/Components/Atoms/RawInput/RawInput.stories.tsx deleted file mode 100644 index a79f61ef9..000000000 --- a/src/Components/Atoms/RawInput/RawInput.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import RawInput from './RawInput'; - -// Define metadata for the story -const meta = { - component: RawInput, - parameters: { - docs: { - description: { - component: '', - }, - }, - }, - // Define arguments for the story - argTypes: { - placeholder: { - control: { - type: 'text', - }, - }, - value: { - control: { - type: 'text', - }, - }, - onChange: { - control: { - type: 'function', - }, - }, - }, - - // 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: { - placeholder: 'Placeholder', - value: '', - onChange: (event: React.ChangeEvent) => console.log(event.target.value), - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/RawInput/RawInput.tsx b/src/Components/Atoms/RawInput/RawInput.tsx deleted file mode 100644 index dc299d6a1..000000000 --- a/src/Components/Atoms/RawInput/RawInput.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { styled } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import { TTheme } from '@/interface/TTheme'; - -export type TRawInputAlign = 'left' | 'center'; - -export interface IRawInput { - $align?: TRawInputAlign; - theme?: TTheme; -} -const RawInput = styled.input` - font-weight: 500; - font-size: 16px; - box-sizing: border-box; - width: 100%; - appearance: none; - background-color: transparent; - color: ${({ theme }) => theme.colors.secondary[0]}; - text-align: ${({ $align }) => ($align !== 'center' ? 'left' : 'center')}; - border: none; - outline: none; - box-shadow: none; - font-size: ${fontSize.md}; - padding: 0; -`; - -export default RawInput; diff --git a/src/Components/Atoms/RawInput/index.ts b/src/Components/Atoms/RawInput/index.ts deleted file mode 100644 index f99545c82..000000000 --- a/src/Components/Atoms/RawInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RawInput } from './RawInput'; diff --git a/src/Components/Atoms/RawLI/RawLI.tsx b/src/Components/Atoms/RawLI/RawLI.tsx deleted file mode 100644 index 235488438..000000000 --- a/src/Components/Atoms/RawLI/RawLI.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import styled from 'styled-components'; - -const RawLI = styled.li` - list-style: none; -`; - -export default RawLI; diff --git a/src/Components/Atoms/RawLI/index.ts b/src/Components/Atoms/RawLI/index.ts deleted file mode 100644 index 4abcdaa2b..000000000 --- a/src/Components/Atoms/RawLI/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RawLI } from './RawLI'; diff --git a/src/Components/Atoms/RawNav/RawNav.tsx b/src/Components/Atoms/RawNav/RawNav.tsx deleted file mode 100644 index a9e7b015a..000000000 --- a/src/Components/Atoms/RawNav/RawNav.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { CSSProp, styled } from 'styled-components'; - -const RawNav = styled.nav<{ $externalStyle?: CSSProp }>` - width: 100%; - ${({ $externalStyle }) => $externalStyle}; -`; -export default RawNav; diff --git a/src/Components/Atoms/RawRadio/RawRadio.stories.tsx b/src/Components/Atoms/RawRadio/RawRadio.stories.tsx deleted file mode 100644 index 7e55de15d..000000000 --- a/src/Components/Atoms/RawRadio/RawRadio.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -// 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/Atoms/RawRadio/RawRadio.style.tsx b/src/Components/Atoms/RawRadio/RawRadio.style.tsx deleted file mode 100644 index 2ba17cdb5..000000000 --- a/src/Components/Atoms/RawRadio/RawRadio.style.tsx +++ /dev/null @@ -1,55 +0,0 @@ -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/Atoms/RawRadio/RawRadio.tsx b/src/Components/Atoms/RawRadio/RawRadio.tsx deleted file mode 100644 index 3e4cdea46..000000000 --- a/src/Components/Atoms/RawRadio/RawRadio.tsx +++ /dev/null @@ -1,21 +0,0 @@ -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/Atoms/RawRadio/index.ts b/src/Components/Atoms/RawRadio/index.ts deleted file mode 100644 index a361de5de..000000000 --- a/src/Components/Atoms/RawRadio/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RawRadio } from './RawRadio'; diff --git a/src/Components/Atoms/RawSlider/RawSlider.stories.tsx b/src/Components/Atoms/RawSlider/RawSlider.stories.tsx deleted file mode 100644 index afa613a7a..000000000 --- a/src/Components/Atoms/RawSlider/RawSlider.stories.tsx +++ /dev/null @@ -1,79 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import RawSlider from './RawSlider'; - -// Define metadata for the story -const meta = { - component: RawSlider, - parameters: { - docs: { - description: { - component: - 'RawSlider is a simple component to display the slider.
- It has a themeType prop to define the theme type of the slider
- It has a value prop to define the value of the slider
- It has a onChange prop to define the onChange function
- It has a id prop to define the id of the slider
- It has a min prop to define the min of the slider', - }, - }, - }, - // Define arguments for the story - argTypes: { - themeType: { - control: { - type: 'select', - }, - }, - value: { - control: { - type: 'number', - }, - }, - onChange: { - control: { - type: 'function', - }, - }, - id: { - control: { - type: 'text', - }, - }, - min: { - control: { - type: 'number', - }, - }, - activeHandler: { - description: 'Active handler is when the slider focused active or not', - control: { - type: 'function', - }, - }, - }, - - // 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: { - min: 0, - themeType: 'secondary', - value: 0, - activeHandler: (boolean: boolean) => console.log(boolean), - onChange: (event: React.ChangeEvent) => console.log(event.target.value), - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/RawSlider/RawSlider.style.tsx b/src/Components/Atoms/RawSlider/RawSlider.style.tsx deleted file mode 100644 index 4f7a5e587..000000000 --- a/src/Components/Atoms/RawSlider/RawSlider.style.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { styled, css } from 'styled-components'; - -import { boxShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -// eslint-disable-next-line react-refresh/only-export-components -const DragableThumb = css<{ theme: TTheme }>` - height: 30px; - width: 30px; - border-radius: 50%; - background: ${({ theme }) => theme.colors.accent[0]}; - cursor: ew-resize; - ${boxShadow.sm} - transition: background 0.1s ease-in-out; - border: none; -`; - -export const StyledRawSlider = styled.input<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - -webkit-appearance: none; - width: 100%; - margin: 0; - height: 4px; - margin: 10px 0 12px 0; - background: ${({ theme, $themeType = 'secondary', $layer = 4 }) => getBackgroundColor({ theme, $themeType, $layer })}; - border-radius: 5px; - background-image: ${({ theme }) => `linear-gradient(90deg, ${theme.colors.accent[0]}, ${theme.colors.accent[1]})`}; - background-size: 70% 100%; - background-repeat: no-repeat; - outline: none; - - /* Chrome */ - &::-webkit-slider-thumb { - -webkit-appearance: none; - ${DragableThumb} - } - - /* Firefox */ - &::-moz-range-thumb { - ${DragableThumb} - } - - &::-webkit-slider-runnable-track { - -webkit-appearance: none; - box-shadow: none; - border: none; - background: transparent; - } -`; diff --git a/src/Components/Atoms/RawSlider/RawSlider.tsx b/src/Components/Atoms/RawSlider/RawSlider.tsx deleted file mode 100644 index 2e699f224..000000000 --- a/src/Components/Atoms/RawSlider/RawSlider.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { InputHTMLAttributes, useRef } from 'react'; -import { StyledRawSlider } from './RawSlider.style'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; - -// --------------------------------------------------------------------------- // -// ------------ Here is createt the Slider Atom (Range Slider) --------------- // -// --------------------------------------------------------------------------- // -export interface IRawSlider extends InputHTMLAttributes { - id?: string; - activeHandler?: (value: boolean) => void; - ref?: React.RefObject; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function RawSlider(props: IRawSlider) { - const { disabled, id, max, min, value, ref, activeHandler, themeType, layer, ...htmlProps } = props; - const inputSlider = useRef(null); - const sliderProgress = value ? Number(value) : 0; - - const focusHandler = (value: boolean) => { - activeHandler && activeHandler(value); - }; - - //initialize the min an max value when get it or not - const minVal = min ? Number(min) : 0; - const maxVal = max ? Number(max) : 100; - - //calc the the progress - const calcBackgorundSize = !isNaN(sliderProgress) ? ((sliderProgress - minVal) * 100) / (maxVal - minVal) + '% 100%' : '0% 100%'; - const calcSliderProgress = !isNaN(sliderProgress) ? sliderProgress : 0; - - return ( - focusHandler(true)} - onBlur={() => focusHandler(false)} - style={{ backgroundSize: calcBackgorundSize }} - id={id} - $themeType={themeType} - $layer={layer} - type="range" - value={calcSliderProgress} - min={minVal} - max={maxVal} - onTouchStart={() => { - focusHandler(true); - inputSlider.current?.focus(); - }} - onTouchEnd={() => setTimeout(() => focusHandler(false), 500)} - {...htmlProps} - /> - ); -} diff --git a/src/Components/Atoms/RawSlider/index.ts b/src/Components/Atoms/RawSlider/index.ts deleted file mode 100644 index 515481487..000000000 --- a/src/Components/Atoms/RawSlider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RawSlider } from './RawSlider'; diff --git a/src/Components/Atoms/RawUL/RawUL.tsx b/src/Components/Atoms/RawUL/RawUL.tsx deleted file mode 100644 index cac83d1e2..000000000 --- a/src/Components/Atoms/RawUL/RawUL.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { styled } from 'styled-components'; - -const RawUL = styled.ul` - padding: 0; - margin: 0; - - li { - list-style: none; - padding: 0; - margin: 0; - } -`; - -export default RawUL; diff --git a/src/Components/Atoms/ScrollableBar/ScrollableBar.stories.tsx b/src/Components/Atoms/ScrollableBar/ScrollableBar.stories.tsx deleted file mode 100644 index 03c5c1586..000000000 --- a/src/Components/Atoms/ScrollableBar/ScrollableBar.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -import SVGEyeCrossed from '../../icons/SVGEyeCrossed/SVGEyeCrossed'; - -// Import the component to be tested -import ScrollableBar from './ScrollableBar'; -import { FancyBottomBarIcon } from '../../templates/FancyBottomBarIcon'; - -// Define metadata for the story -const meta = { - component: ScrollableBar, - parameters: { - docs: { - description: { - component: 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', - }, - }, - }, - // Define arguments for the story - argTypes: {}, - - // 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: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/ScrollableBar/ScrollableBar.tsx b/src/Components/Atoms/ScrollableBar/ScrollableBar.tsx deleted file mode 100644 index 0456c1c2f..000000000 --- a/src/Components/Atoms/ScrollableBar/ScrollableBar.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useRef } from 'react'; -import { ScollAbleBar } from './SrollableBar.style'; - -export interface IScrollableBar { - children?: React.ReactNode; -} -// --------------------------------------------------------------------------- // -// -------- Handles the overflow in the scrollbar with mac variation -------- // -// --------------------------------------------------------------------------- // -export default function ScrollableBar(props: IScrollableBar) { - const { children } = props; - - const scrollAbleBar = useRef(null); - - //this function handles the horizontal scrooling with the mouse wheel - const horizontalScrollingHandler = (e: React.WheelEvent) => { - if (/Mac/i.test(navigator.userAgent)) { - return; - } - - const box = scrollAbleBar.current; - box!.scrollLeft += e.deltaY < 0 ? -30 : 30; - }; - return ( - - {children} - - ); -} diff --git a/src/Components/Atoms/ScrollableBar/SrollableBar.style.tsx b/src/Components/Atoms/ScrollableBar/SrollableBar.style.tsx deleted file mode 100644 index 316a8c412..000000000 --- a/src/Components/Atoms/ScrollableBar/SrollableBar.style.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { styled } from 'styled-components'; - -export const ScollAbleBar = styled.div` - display: flex; - width: 100%; - overflow-x: scroll; - - &::-webkit-scrollbar { - display: none; - } -`; diff --git a/src/Components/Atoms/ScrollableBar/index.ts b/src/Components/Atoms/ScrollableBar/index.ts deleted file mode 100644 index 75d4afc07..000000000 --- a/src/Components/Atoms/ScrollableBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ScrollableBar } from './ScrollableBar'; diff --git a/src/Components/Atoms/SimpleDialog/SimpleDialog.stories.tsx b/src/Components/Atoms/SimpleDialog/SimpleDialog.stories.tsx deleted file mode 100644 index 991f7d408..000000000 --- a/src/Components/Atoms/SimpleDialog/SimpleDialog.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import SimpleDialog from './SimpleDialog'; - -// Define metadata for the story -const meta = { - component: SimpleDialog, - parameters: { - docs: { - description: { - component: 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', - }, - }, - }, - // Define arguments for the story - argTypes: { - layer: { - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - }, - themeType: { - control: { - type: 'select', - }, - }, - }, - - // 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: { - isOpen: true, - children: 'Test', - layer: 1, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/SimpleDialog/SimpleDialog.tsx b/src/Components/Atoms/SimpleDialog/SimpleDialog.tsx deleted file mode 100644 index ec2a70b01..000000000 --- a/src/Components/Atoms/SimpleDialog/SimpleDialog.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { styled } from 'styled-components'; -import { animated, useSpring } from '@react-spring/web'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import getColorsForComponent from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -// Define the styled component for the dialog -const StyledDialog = styled(animated.div)<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - padding: ${({ theme }) => theme.spacing.xl}; - border-radius: ${({ theme }) => theme.borderRadius.lg}; - border: none; - width: 70%; - max-height: 85%; - ${({ theme, $themeType = 'primary', $layer = 1 }) => getColorsForComponent({ theme, $themeType, $layer })} - z-index: 1000; -`; - -// Define the props for the SimpleDialog component -interface ISimpleDialog { - isOpen: boolean; - children: React.ReactNode; - themeType?: TThemeTypes; - layer?: TLayer; -} - -// Define the SimpleDialog component -export default function SimpleDialog({ isOpen, children, themeType, layer }: ISimpleDialog) { - const [shouldRender, setRender] = useState(isOpen); - - // Define the fade animation for the dialog - const fade = useSpring({ - transform: isOpen ? 'translate(-50%, -50%)' : 'translate(-50%, -40%)', - opacity: isOpen ? 1 : 0, - onRest: () => setRender(isOpen), - }); - - // Update the shouldRender state variable when the isOpen prop changes - useEffect(() => { - if (isOpen) setRender(true); - }, [isOpen]); - - // Render the SimpleDialog component with the appropriate props - return shouldRender ? ( - - {children} - - ) : null; -} diff --git a/src/Components/Atoms/SimpleDialog/index.ts b/src/Components/Atoms/SimpleDialog/index.ts deleted file mode 100644 index cf6369d74..000000000 --- a/src/Components/Atoms/SimpleDialog/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SimpleDialog } from './SimpleDialog'; diff --git a/src/Components/Atoms/SingleInputAtom/SingleInputAtom.stories.tsx b/src/Components/Atoms/SingleInputAtom/SingleInputAtom.stories.tsx deleted file mode 100644 index 7baf069cc..000000000 --- a/src/Components/Atoms/SingleInputAtom/SingleInputAtom.stories.tsx +++ /dev/null @@ -1,79 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import { SingleInputAtom } from './SingleInputAtom'; - -// fix for building ... because storybook is not able to handle the default export -const HelperComponent = (props: React.ComponentProps) => ; -HelperComponent.displayName = 'SingleInputAtom'; - -// Define metadata for the story -const meta = { - component: HelperComponent, - parameters: { - docs: { - description: { - component: 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', - }, - }, - }, - // Define arguments for the story - argTypes: { - value: { - description: 'The value of the input, with a maximum length of 1', - control: { - type: 'text', - }, - }, - ariaLabel: { - control: { - type: 'text', - }, - }, - themeType: { - description: 'The theme type of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'The layer of the input', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: '0', - }, - }, - }, - - // 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: { - value: '1', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/SingleInputAtom/SingleInputAtom.tsx b/src/Components/Atoms/SingleInputAtom/SingleInputAtom.tsx deleted file mode 100644 index e4ef9ee9f..000000000 --- a/src/Components/Atoms/SingleInputAtom/SingleInputAtom.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { forwardRef, useState } from 'react'; -import { styled } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; - -// the style for a single input -interface StyledSingleInputProps { - $hasValue: boolean; - $isFocused: boolean; - $themeType?: TThemeTypes; - $layer?: TLayer; -} -const StyledSingleInput = styled.input` - aspect-ratio: 4/5; - width: 1.5ch; - font-size: ${fontSize.xxl}; - text-align: center; - color: ${({ theme }) => theme.colors.secondary[0]}; - border: 1.5px solid - ${({ $hasValue, theme, $themeType = 'secondary', $layer }) => - $hasValue ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer })}; - border-radius: 5px; - padding: ${({ theme }) => theme.spacing.xs}; - background-color: transparent; - appearance: none; - outline: none; - box-shadow: ${({ $isFocused, theme }) => ($isFocused ? `0 0 2px 1px${theme.colors.accent[1]}` : 'none')}; -`; - -// --------------------------------------------------------------------------- // -// --------- A Single Letter/NumberInput for a Verification process ---------- // -// --------------------------------------------------------------------------- // -interface ISingleInputAtomProps { - value: string; - ariaLabel?: string; - onKeyDown?: (e: React.KeyboardEvent) => void; - themeType?: TThemeTypes; - layer?: TLayer; -} -export const SingleInputAtom = forwardRef( - ({ value, onKeyDown, ariaLabel, themeType, layer }, ref) => { - const [isFocused, setIsFocused] = useState(false); - - return ( - {}} - onFocus={() => setIsFocused(true)} - onBlur={() => setIsFocused(false)} - $hasValue={value.length > 0} - $isFocused={isFocused} - /> - ); - } -); - -export default SingleInputAtom; diff --git a/src/Components/Atoms/SingleInputAtom/index.ts b/src/Components/Atoms/SingleInputAtom/index.ts deleted file mode 100644 index b6cdf3e5c..000000000 --- a/src/Components/Atoms/SingleInputAtom/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SingleInputAtom } from './SingleInputAtom'; diff --git a/src/Components/Atoms/SliderMarker/SliderMarker.stories.tsx b/src/Components/Atoms/SliderMarker/SliderMarker.stories.tsx deleted file mode 100644 index d5d4ff320..000000000 --- a/src/Components/Atoms/SliderMarker/SliderMarker.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import SliderMarker from './SliderMarker'; - -// Define metadata for the story -const meta = { - component: SliderMarker, - parameters: { - docs: { - description: { - component: 'A Marker component to display the position on the slider', - }, - }, - }, - // Define arguments for the story - argTypes: { - position: { - description: 'The position of the marker on the slider', - control: { - type: 'text', - }, - }, - }, - - // 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: { - position: '50%', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/SliderMarker/SliderMarker.style.tsx b/src/Components/Atoms/SliderMarker/SliderMarker.style.tsx deleted file mode 100644 index 1b48c7bac..000000000 --- a/src/Components/Atoms/SliderMarker/SliderMarker.style.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { styled } from 'styled-components'; - -import { TTheme } from '../../../interface/TTheme'; -import colorTransparencyCalculator from '../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator'; - -export const WrapperMarker = styled.div` - position: absolute; - box-sizing: border-box; - top: 2px; - bottom: 2px; - margin-left: 0; - margin-right: 0; - width: 5px; - z-index: 2; - transform: translate(-2.5px); -`; - -export const Marker = styled.div<{ theme: TTheme }>` - box-sizing: border-box; - position: relative; - border: ${({ theme }) => `solid 1px ${theme.colors.primary[0]} `}; - width: 100%; - height: 100%; - box-shadow: 0px 0px 1px 1px ${({ theme }) => colorTransparencyCalculator(theme.colors.secondary[0], 0.5)}; - border-radius: ${({ theme }) => theme.borderRadius.sm}; -`; diff --git a/src/Components/Atoms/SliderMarker/SliderMarker.tsx b/src/Components/Atoms/SliderMarker/SliderMarker.tsx deleted file mode 100644 index a94d9ab36..000000000 --- a/src/Components/Atoms/SliderMarker/SliderMarker.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import { Marker, WrapperMarker } from './SliderMarker.style'; - -// --------------------------------------------------------------------------- // -// --- The main Marker Component to display the position on the slider ------ // -// --------------------------------------------------------------------------- // -interface ISliderMarker { - position: string; - children?: React.ReactNode; -} -export default function SliderMarker({ position, children }: ISliderMarker) { - return ( - - - {/* the children can use to display something in the marker like the color indicator that moves with the marker */} - {children && children} - - - ); -} diff --git a/src/Components/Atoms/SliderMarker/index.ts b/src/Components/Atoms/SliderMarker/index.ts deleted file mode 100644 index c517066ca..000000000 --- a/src/Components/Atoms/SliderMarker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SliderMarker } from './SliderMarker'; diff --git a/src/Components/Atoms/Slot/Slot.stories.tsx b/src/Components/Atoms/Slot/Slot.stories.tsx deleted file mode 100644 index a7d19464f..000000000 --- a/src/Components/Atoms/Slot/Slot.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import Slot from './Slot'; -// Define metadata for the story -const meta = { - component: Slot, - parameters: { - docs: { - description: { - component: 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', - }, - }, - }, - // Define arguments for the story - argTypes: { - children: { - description: 'The content to be displayed in the slot', - control: { - type: 'text', - }, - }, - align: { - description: 'The alignment of the content in the slot', - control: { - type: 'select', - }, - }, - grow: { - description: 'The Flex grow factor of the slot', - 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: { - children: 'Iam only a dummy', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/Slot/Slot.tsx b/src/Components/Atoms/Slot/Slot.tsx deleted file mode 100644 index 4e9d4dd6c..000000000 --- a/src/Components/Atoms/Slot/Slot.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { styled, CSSProp } from 'styled-components'; - -type TAlign = 'center' | 'left' | 'right'; - -const StyledSlot = styled.div<{ $align?: TAlign; $grow?: number; $extenalStyle?: CSSProp }>` - display: flex; - position: relative; - height: 100%; - box-sizing: border-box; - justify-content: ${({ $align }) => { - if ($align === 'center') return 'center'; - if ($align === 'left') return 'flex-start'; - if ($align === 'right') return 'flex-end'; - return 'flex-start'; - }}; - flex-grow: ${({ $grow = 1 }) => $grow}; - align-items: center; - ${({ $extenalStyle }) => ($extenalStyle ? $extenalStyle : '')} -`; - -// --------------------------------------------------------------------------- // -// ------ A simple Slot component wich can use to position a component ------ // -// --------------------------------------------------------------------------- // -export interface ISlot { - children?: React.ReactNode; - align?: TAlign; - grow?: number; - externalStyle?: CSSProp; -} -export default function Slot(props: ISlot) { - const { children, align, grow, externalStyle } = props; - - return ( - - {children} - - ); -} diff --git a/src/Components/Atoms/Slot/index.ts b/src/Components/Atoms/Slot/index.ts deleted file mode 100644 index 81f1b2267..000000000 --- a/src/Components/Atoms/Slot/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Slot } from './Slot'; diff --git a/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx b/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx deleted file mode 100644 index 6737fa06d..000000000 --- a/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.stories.tsx +++ /dev/null @@ -1,67 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -// Import the component to be tested -import SpeedDailMenueItem from './SpeedDailMenueItem'; -// Define metadata for the story -const meta = { - title: 'components/atoms/SpeedDailMenueItem', - component: SpeedDailMenueItem, - parameters: { - docs: { - description: { - component: 'A SpeedDailMenueItem or better a Button with a label and an icon', - }, - }, - }, - // Define arguments for the story - argTypes: { - isOpen: { - description: 'Is the menue open or closed', - type: { name: 'boolean' }, - }, - label: { - description: 'The label for the button', - type: { name: 'string' }, - }, - icon: { - description: 'The value for the button', - }, - hideLabel: { - description: 'Hide the label', - type: { name: 'boolean' }, - }, - labelAlign: { - description: 'Align the label left or right', - }, - }, - // 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: { - label: 'Iam only a dummy', - icon: , - isOpen: true, - hideLabel: false, - labelAlign: 'left', - index: 0, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx b/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx deleted file mode 100644 index b8974c356..000000000 --- a/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import styled, { css } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import { boxShadow, textShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TTheme } from '@/interface/TTheme'; - -export const MenueItemContainer = styled.div<{ $isOpen?: boolean; $index: number }>` - position: absolute; - left: 50%; - border-radius: 50%; - bottom: ${({ $index }) => `calc(${($index + 1) * 60}px)`}; - opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)}; - transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0) scale(1) translateX(-50%)' : `translateY(50px) scale(0) translateX(-50%)`)}; - transition: - transform 0.25s ease-in-out, - opacity 0.25s ease-in-out; - transition-delay: ${({ $isOpen, $index }) => ($isOpen ? 0.1 * $index : 0.1 * (2 - $index))}s; - pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')}; - transform: translate(-50%); - height: 40px; - width: 40px; - ${boxShadow.sm}; -`; - -export const MenuItem = styled.button<{ theme: TTheme }>` - width: 100%; - height: 100%; - border-radius: 50%; - padding: 0; - color: ${({ theme }) => theme.colors.secondary[0]}; - cursor: pointer; - font-size: ${fontSize.md}; - border: none; - outline: none; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; - background-color: ${({ theme }) => theme.colors.primary[2]}; - transition: 150ms ease-in-out; - - svg { - width: 50%; - height: 50%; - } - - &:hover { - transform: scale(1.01); - background-color: ${({ theme }) => theme.colors.accent[2]}; - } -`; - -export const Label = css<{ $isOpen: boolean; $labelAlign?: 'left' | 'right'; theme: TTheme }>` - position: absolute; - top: 50%; - transform: translateY(-50%); - color: ${({ theme }) => theme.colors.secondary[0]}; - display: ${({ $isOpen }) => ($isOpen ? 'inline' : 'none')}; - opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)}; - transition: - opacity 0.5s ease-in-out, - right 0.3s ease, - left 0.3s ease; - ${textShadow.md} - white-space: nowrap; - - ${({ $labelAlign }) => - $labelAlign === 'right' - ? css` - left: 100%; - margin-left: 10px; - ` - : css` - right: 100%; - margin-right: 10px; - `} -`; diff --git a/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.tsx b/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.tsx deleted file mode 100644 index 494db24e9..000000000 --- a/src/Components/Atoms/SpeedDialMenueItem/SpeedDailMenueItem.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; - -import { Typography } from '../Typography'; -import { Label, MenuItem, MenueItemContainer } from './SpeedDailMenueItem.style'; - -//the props only for the button -export type TMenueButtonProps = { - label?: string; - icon: string | number | JSX.Element; - index?: number; - onClick?: () => void; -}; - -// the props for the complete component -export type TMenueItemProps = { - labelAlign?: 'left' | 'right'; - hideLabel?: boolean; - isOpen?: boolean; -}; - -export type ISpeedDailMenueItem = TMenueButtonProps & TMenueItemProps; - -// --------------------------------------------------------------------------- // -// ---------- Component that handles the Buttonlist and the opening ---------- // -// --------------------------------------------------------------------------- // -export default function SpeedDailMenueItem(props: ISpeedDailMenueItem) { - const { label, icon, hideLabel, isOpen, onClick, index } = props; - - return ( - - - {icon} - - {label && !hideLabel && ( - - {label} - - )} - - ); -} diff --git a/src/Components/Atoms/SpeedDialMenueItem/index.ts b/src/Components/Atoms/SpeedDialMenueItem/index.ts deleted file mode 100644 index bd1d74b0e..000000000 --- a/src/Components/Atoms/SpeedDialMenueItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SpeedDialMenueItem } from './SpeedDailMenueItem'; diff --git a/src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.stories.tsx b/src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.stories.tsx deleted file mode 100644 index 250ce86a6..000000000 --- a/src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import SwipeUpContainer from './SwipeUpContainer'; - -// Define metadata for the story -const meta = { - component: SwipeUpContainer, - parameters: { - docs: { - description: { - component: - 'SwipeUpContainer is only the container for the SwipeUpModal.
- The isScalable and the style prop is for the dynamicly changing height of the container.
- The real hieght of the container is the height of the children. ', - }, - }, - }, - // Define arguments for the story - argTypes: { - style: { - description: 'The style of the container', - }, - isScalable: { - description: 'Is the container scalable', - }, - themeType: { - description: 'The theme type of the container', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the container', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - }, - children: { - description: 'The children of the container', - }, - }, - // 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: { - style: { height: '100px' }, - isScalable: true, - themeType: 'primary', - layer: 0, - children:
, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.tsx b/src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.tsx deleted file mode 100644 index d82accab2..000000000 --- a/src/Components/Atoms/SwipeUpContainer/SwipeUpContainer.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TTheme } from '@/interface/TTheme'; - -interface IStyledSwipeUpContainer { - $giveSpace: boolean; - theme: TTheme; - $themeType?: TThemeTypes; - $layer?: TLayer; -} - -const StyledSwipeUpContainer = styled.div` - width: 100%; - max-height: 90%; - border-radius: ${({ theme }) => theme.borderRadius.xxxl} ${({ theme }) => theme.borderRadius.xxxl} 0 0; - position: sticky; - top: 0; - box-shadow: unset; - display: flex; - flex-direction: column; - align-items: center; - padding-top: ${({ $giveSpace }) => ($giveSpace ? ({ theme }) => theme.spacing.lg : '0')}; - z-index: 101; - backdrop-filter: blur(4px); - background-color: ${({ theme, $themeType = 'primary', $layer = 0 }) => getBackgroundColor({ theme, $themeType, $layer })}; -`; - -// --------------------------------------------------------------------------- // -// ----------- The Modal Atom the displays a simple Mobile Modal ------------- // -// --------------------------------------------------------------------------- // -interface ISwipeUpContainer { - children: React.ReactNode; - style?: { height: string }; - isScalable?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function SwipeUpContainer({ children, isScalable = true, style, themeType, layer }: ISwipeUpContainer) { - return ( - - {children} - - ); -} diff --git a/src/Components/Atoms/SwipeUpContainer/index.ts b/src/Components/Atoms/SwipeUpContainer/index.ts deleted file mode 100644 index c58a67d30..000000000 --- a/src/Components/Atoms/SwipeUpContainer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SwipeUpContainer } from './SwipeUpContainer'; diff --git a/src/Components/Atoms/SwipeUpDash/SwipeUpDash.stories.tsx b/src/Components/Atoms/SwipeUpDash/SwipeUpDash.stories.tsx deleted file mode 100644 index 85092bfdc..000000000 --- a/src/Components/Atoms/SwipeUpDash/SwipeUpDash.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import SwipeUpDash from './SwipeUpDash'; - -// Define metadata for the story -const meta = { - component: SwipeUpDash, - parameters: { - docs: { - description: { - component: 'SwipeUpDash is a simple horizontal line', - }, - }, - }, - // Define arguments for the story - argTypes: {}, - // 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: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/SwipeUpDash/SwipeUpDash.tsx b/src/Components/Atoms/SwipeUpDash/SwipeUpDash.tsx deleted file mode 100644 index 7a04d6155..000000000 --- a/src/Components/Atoms/SwipeUpDash/SwipeUpDash.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import simpleColorTransition from '../../../design/designFunctions/simpleColorTransition/simpleTransition'; -import { TTheme } from '@/interface/TTheme'; - -const StyledSwipeUpDash = styled.div<{ theme: TTheme }>` - width: 50px; - height: 3px; - background-color: ${({ theme }) => theme.colors.secondary[0]}; - border-radius: 3px; -`; - -const StyledButton = styled.button` - font-weight: bold; - border: none; - background-color: transparent; - cursor: pointer; - margin-top: 1rem; - margin-bottom: 1rem; - ${simpleColorTransition} -`; - -// --------------------------------------------------------------------------- // -// ---- The SwipeUpDash component is a simple horizontal line as Button ------ // -// --------------------------------------------------------------------------- // -export default function SwipeUpDash() { - return ( - - - - ); -} diff --git a/src/Components/Atoms/SwipeUpDash/index.ts b/src/Components/Atoms/SwipeUpDash/index.ts deleted file mode 100644 index 98875b136..000000000 --- a/src/Components/Atoms/SwipeUpDash/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SwipeUpDash } from './SwipeUpDash'; diff --git a/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx b/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx deleted file mode 100644 index 1b4222049..000000000 --- a/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx +++ /dev/null @@ -1,112 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import SwitchActiveIndicator from './SwitchActiveIndicator'; - -// Define metadata for the story -const meta = { - component: SwitchActiveIndicator, - parameters: { - docs: { - description: { - component: - 'The SwitchActiveIndicator is a simple horizontal line or a bolb that indicates the active tab in a tab switcher, it is used in the FancyTabSwitch component', - }, - }, - }, - // Define arguments for the story - argTypes: { - $type: { - description: 'The type of the indicator, it can be a bolb or a underline', - control: { - type: 'radio', - }, - options: ['bolb', 'underline'], - defaultValue: { - summary: 'bolb', - }, - }, - $direction: { - description: 'The direction of the indicator where it should be moved horizontal or vertical', - control: { - type: 'radio', - }, - options: ['horizontal', 'vertical'], - defaultValue: { - summary: 'horizontal', - }, - }, - $itemNumber: { - description: 'The itemnumber is to calc the position of the indicator for each item', - control: { - type: 'number', - }, - }, - $rounded: { - description: 'The rounded is to set the border-radius of the indicator', - control: { - type: 'select', - }, - options: ['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'complete'], - defaultValue: { - summary: 'md', - }, - }, - $tabSpacing: { - description: 'The spacing is to calc with the offset the position of the indicator for each item', - control: { - type: 'select', - }, - defaultValue: { - summary: '', - }, - }, - $outlined: { - description: 'The outlined is to set the border of the indicator', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - $themeType: { - description: 'The themeType is to set the color of the indicator', - control: { - type: 'select', - }, - defaultValue: { - summary: 'accent', - }, - }, - }, - // 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: { - $itemNumber: 1, - $tabSpacing: 'md', - $type: 'bolb', - $rounded: 'md', - $outlined: false, - $direction: 'horizontal', - $themeType: 'accent', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx b/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx deleted file mode 100644 index 130c698c0..000000000 --- a/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { styled, css } from 'styled-components'; - -import { spacingPx } from '../../../design/theme/designSizes'; -import { IActiveSwitchIndicator } from './SwitchActiveIndicator'; -import { generateBlob } from './utils/generateBlob'; -import { generateTopline, generateUnderline } from './utils/generateLines'; -import { TTheme } from '@/interface/TTheme'; - -// Define the function to calculate the current position of the active indicator -type IClacCurrentPosition = Pick; -const clacCurrentPosition = (props: IClacCurrentPosition) => { - const { $itemNumber, $tabSpacing, $direction } = props; - - // Calculate the position in percent - const itemPosition = ($itemNumber - 1) * 100 + '%'; - - // Calculate the gap between the items - const gapSpacing = $tabSpacing ? ($itemNumber - 1) * parseFloat(spacingPx[$tabSpacing]) : 0; - - // Calculate the current position of the active indicator - const currentPosition = $itemNumber - ? css` - ${$direction === 'vertical' - ? css` - transform: translateY(calc(${itemPosition} + ${gapSpacing + 'px'})); - ` - : css` - transform: translateX(calc(${itemPosition} + ${gapSpacing + 'px'})); - `} - ` - : css` - transform: translateX(0); - `; - - // Return the styled-component CSS for the active indicator - return currentPosition; -}; - -// --------------------------------------------------------------------------- // -// -------- Here is the main Generator Function of the activ indicator ------- // -// --------------------------------------------------------------------------- // -type TActiveSwitchIndicator = Pick< - IActiveSwitchIndicator, - '$layer' | '$rounded' | '$outlined' | '$themeType' | '$type' | '$indicatorWidth' ->; -export const ActiveSwitchIndicator = styled.span` - position: absolute; - width: ${({ $indicatorWidth }) => $indicatorWidth ?? '100%'}; /* Set the width of the active indicator */ - - /* Build a switch case */ - ${(props) => { - switch (props.$type) { - case 'underline': - return generateUnderline({ ...props }); - case 'topline': - return generateTopline({ ...props }); - case 'bolb': - default: - return generateBlob({ ...props }); - } - }}/* Calculate the current position of the active indicator */ -`; - -// the wrapper that handles the position of the active indicator -type IWrapper = Pick; -export const Wrapper = styled.i` - top: 0; - display: flex; - justify-content: center; - align-items: center; - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - cursor: pointer; - transition: transform 0.2s ease; - ${({ $itemNumber, $tabSpacing, $direction }) => clacCurrentPosition({ $itemNumber, $tabSpacing, $direction })} -`; diff --git a/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx b/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx deleted file mode 100644 index b896e0a80..000000000 --- a/src/Components/Atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { ActiveSwitchIndicator, Wrapper } from './SwitchActiveIndicator.style'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { TSpacings } from '@/interface/TSpacings'; - -export interface IActiveSwitchIndicator { - $itemNumber: number; - $themeType?: TThemeTypes; - $layer?: TLayer; - $tabSpacing?: TSpacings; - $type?: 'bolb' | 'underline' | 'topline'; - $rounded?: TBorderRadiusSizes | string; - $outlined?: boolean; - $direction?: 'horizontal' | 'vertical'; - $indicatorWidth?: string; -} -// --------------------------------------------------------------------------- // -// -------- Create a Incator for wich Item in a Switch List ist activ ------- // -// --------------------------------------------------------------------------- // -export default function SwitchActiveIndicator(props: IActiveSwitchIndicator) { - const { $itemNumber, $tabSpacing, $direction, ...switchProps } = props; - return ( - - - - ); -} diff --git a/src/Components/Atoms/SwitchActiveIndicator/utils/generateBlob.ts b/src/Components/Atoms/SwitchActiveIndicator/utils/generateBlob.ts deleted file mode 100644 index 3254a279e..000000000 --- a/src/Components/Atoms/SwitchActiveIndicator/utils/generateBlob.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { css } from 'styled-components'; - -import { getBackgroundColor } from '../../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import colorTransparencyCalculator from '../../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator'; -import { IActiveSwitchIndicator } from '../SwitchActiveIndicator'; -import themeStore from '@/design/theme/themeStore/themeStore'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { TTheme } from '@/interface/TTheme'; - -// Define the function to generate a blob background for the active indicator -type IGenerateBlob = Pick & { theme: TTheme }; -export const generateBlob = (props: IGenerateBlob) => { - const { $themeType, theme, $rounded, $outlined, $layer } = props; - const borderRadius = themeStore.getState().theme.borderRadius; - let backgroundStyle; - - // Get the background color for the active indicator - const backgroundColor = getBackgroundColor({ theme, $themeType: $themeType ?? 'accent', $layer: $layer ?? 0 }); - - // Check if the provided rounded value is a valid key in the borderRadius object - const isRadiusKey = $rounded ? Object.keys(borderRadius).includes($rounded) : false; - - // If the outlined prop is true, generate a slightly transparent background color and a border - if ($outlined) { - const generateSlightBackgroundColor = colorTransparencyCalculator( - getBackgroundColor({ theme, $themeType: $themeType ?? 'accent', $layer: $layer ?? 3 }), - 0.2 - ); - - backgroundStyle = css` - background-color: ${generateSlightBackgroundColor}; - border: 1px solid ${backgroundColor}; - box-sizing: border-box; - `; - } else { - // If the outlined prop is false, use the background color as the background style - backgroundStyle = css` - background-color: ${backgroundColor}; - `; - } - - // Return the styled-component CSS for the active indicator - return css` - top: 0; - height: 100%; - border-radius: ${isRadiusKey ? borderRadius[$rounded as TBorderRadiusSizes] : $rounded}; - ${backgroundStyle} - `; -}; diff --git a/src/Components/Atoms/SwitchActiveIndicator/utils/generateLines.ts b/src/Components/Atoms/SwitchActiveIndicator/utils/generateLines.ts deleted file mode 100644 index 3d286788b..000000000 --- a/src/Components/Atoms/SwitchActiveIndicator/utils/generateLines.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { css } from 'styled-components'; - -import { getBackgroundColor } from '../../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { IActiveSwitchIndicator } from '../SwitchActiveIndicator'; -import { TTheme } from '@/interface/TTheme'; - -const generateLine = ({ theme, $themeType = 'accent', $layer }: IGenerateLine) => { - const backgroundColor = getBackgroundColor({ theme, $themeType, $layer }); - - return css` - height: 1.5px; - background-color: ${backgroundColor}; - border-radius: 10px; - `; -}; - -// Define the function to generate an underline for the active indicator -type IGenerateLine = Pick & { theme: TTheme }; -export const generateUnderline = ({ theme, $themeType = 'accent', $layer }: IGenerateLine) => { - // Get the background color for the active indicator - const line = generateLine({ theme, $themeType, $layer }); - // Return the styled-component CSS for the active indicator - return css` - ${line} - bottom: 0; - box-sizing: border-box; - `; -}; - -export const generateTopline = ({ theme, $themeType = 'accent', $layer }: IGenerateLine) => { - const line = generateLine({ theme, $themeType, $layer }); - - // Return the styled-component CSS for the active indicator - return css` - ${line} - top: 0; - box-sizing: border-box; - `; -}; diff --git a/src/Components/Atoms/Typography/Typography.stories.tsx b/src/Components/Atoms/Typography/Typography.stories.tsx deleted file mode 100644 index d3f9895cd..000000000 --- a/src/Components/Atoms/Typography/Typography.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import Typography from './Typography'; - -// Define metadata for the story -const meta = { - component: Typography, - parameters: { - docs: { - description: { - component: 'The Typography component can render differnet elements with different styles', - }, - }, - }, - // Define arguments for the story - argTypes: { - type: { - description: 'The elemnt type of the typography', - control: { - type: 'select', - }, - }, - variant: { - description: 'The variant how the typography should look like', - control: { - type: 'select', - }, - }, - className: { - description: 'The className for the typography', - control: { - type: 'text', - }, - }, - }, - // 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.children}, - args: { - children: 'I need something to eat, i think i will eat a pizza', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/Typography/Typography.tsx b/src/Components/Atoms/Typography/Typography.tsx deleted file mode 100644 index e62a6a63e..000000000 --- a/src/Components/Atoms/Typography/Typography.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { ReactNode } from 'react'; -import { CSSProp, css } from 'styled-components'; - -import { IStyledComponentProps, TypographyList } from './TypographyFontVariations.style'; -import themeStore from '../../../design/theme/themeStore/themeStore'; -import { generateFontVariants } from './TypographyStyleVariants'; - -const generateStyle = (externalStyle: CSSProp, fontWeight: 'normal' | 'bold' | undefined) => { - return css` - font-weight: ${fontWeight}; - ${externalStyle}; - `; -}; - -export type ITypography = { - type?: keyof typeof TypographyList; - variant?: keyof typeof TypographyList; - children?: ReactNode; - weight?: 'normal' | 'bold'; - style?: CSSProp; - htmlFor?: string; -} & Omit, 'style'>; -// --------------------------------------------------------------------------- // -// The Typography component can render differnet elements with different styles// -// ------------- like a "h4 can have the style of a p" ----------------------- // -export default function Typography({ type, variant, children, style, weight, ...htmlProps }: ITypography) { - // get the theme font sizes - const themeFonts = themeStore((state) => state.theme.fontSizes); - - // generate the Typography component based on the type prop; - // const Component = TypographyList[type] || TypographyList.content; - const Component = TypographyList[type || 'content'] as React.FC; - - const mixedStyle = generateStyle(style, weight); - // get the variant style based on the variant prop or the type prop; - const fontVariants = generateFontVariants(themeFonts); - - // get the variant style based on the variant prop or the type prop; - const variantStyle = variant ? fontVariants[variant] : (fontVariants[type || 'content'] as CSSProp); - - return ( - - {children} - - ); -} diff --git a/src/Components/Atoms/Typography/TypographyFontVariations.style.tsx b/src/Components/Atoms/Typography/TypographyFontVariations.style.tsx deleted file mode 100644 index 326ac8836..000000000 --- a/src/Components/Atoms/Typography/TypographyFontVariations.style.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable react-refresh/only-export-components */ -import { ReactNode } from 'react'; -import styled, { CSSProp } from 'styled-components'; - -export interface IStyledComponentProps { - children?: ReactNode; - $variant?: CSSProp; - $style?: CSSProp; -} -// Base styled component for common styles -const BaseStyledComponent = styled.span` - ${(props) => props.$variant}; - ${(props) => props.$style}; -`; - -// Styled components for each type of typography -const StyledH1 = styled(BaseStyledComponent).attrs({ as: 'h1' })``; -const StyledH2 = styled(BaseStyledComponent).attrs({ as: 'h2' })``; -const StyledH3 = styled(BaseStyledComponent).attrs({ as: 'h3' })``; -const StyledH4 = styled(BaseStyledComponent).attrs({ as: 'h4' })``; -const StyledH5 = styled(BaseStyledComponent).attrs({ as: 'h5' })``; -const StyledH6 = styled(BaseStyledComponent).attrs({ as: 'h6' })``; -const StyledLabel = styled(BaseStyledComponent).attrs({ as: 'label' })``; -const StyledButton = styled(BaseStyledComponent).attrs({ as: 'span' })``; // Assuming you want a span for a button -const StyledInlineElement = styled(BaseStyledComponent).attrs({ as: 'span' })``; -const StyledContent = styled(BaseStyledComponent).attrs({ as: 'p' })``; -const StyledSmText = styled(BaseStyledComponent).attrs({ as: 'p' })``; -const StyledVerySmText = styled(BaseStyledComponent).attrs({ as: 'span' })``; - -// Export the list of typography components -export const TypographyList = { - h1: StyledH1, - h2: StyledH2, - h3: StyledH3, - h4: StyledH4, - h5: StyledH5, - h6: StyledH6, - label: StyledLabel, - button: StyledButton, - inlineElement: StyledInlineElement, - content: StyledContent, - smText: StyledSmText, - verysmText: StyledVerySmText, -}; diff --git a/src/Components/Atoms/Typography/TypographyStyleVariants.tsx b/src/Components/Atoms/Typography/TypographyStyleVariants.tsx deleted file mode 100644 index ce85125c1..000000000 --- a/src/Components/Atoms/Typography/TypographyStyleVariants.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { css } from 'styled-components'; - -import { TFontSizes } from '@/interface/IFontSizes'; -import { TTheme } from '@/interface/TTheme'; - -const nullifyStyle = css` - margin: 0; -`; - -// Hilfsfunktion für den Medien-Query -const responsiveFontSize = (mobileSize: string, desktopSize: string) => css<{ theme?: TTheme }>` - font-size: ${mobileSize}; - - @media (min-width: ${({ theme }) => theme.breakpoints.md}) { - font-size: ${desktopSize}; - } -`; - -export const generateFontVariants = (themeFonts: TFontSizes) => { - const { desktop, mobile } = themeFonts; - - return { - h1: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.headings.h1, desktop.headings.h1)} - line-height: 1.2; - `, - h2: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.headings.h2, desktop.headings.h2)} - line-height: 1.2; - `, - h3: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.headings.h3, desktop.headings.h3)} - line-height: 1.2; - `, - h4: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.headings.h4, desktop.headings.h4)} - line-height: 1.2; - `, - h5: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.headings.h5, desktop.headings.h5)} - line-height: 1.2; - `, - h6: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.headings.h6, desktop.headings.h6)} - line-height: 1.2; - `, - button: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.textElements.button, desktop.textElements.button)} - font-weight: bold; - letter-spacing: 0.4px; - `, - label: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.textElements.label, desktop.textElements.label)} - font-weight: 400; - `, - inlineElement: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.textElements.caption, desktop.textElements.caption)} - font-weight: 400; - `, - content: css` - ${nullifyStyle}; - ${responsiveFontSize(mobile.textElements.caption, desktop.textElements.caption)} - line-height: 1.4; - font-weight: 400; - `, - smText: css` - line-height: 1.1; - ${nullifyStyle}; - ${responsiveFontSize(mobile.textElements.smText, desktop.textElements.smText)} - font-weight: 400; - `, - verysmText: css` - line-height: 1; - ${nullifyStyle}; - ${responsiveFontSize(mobile.textElements.verysmText, desktop.textElements.verysmText)} - font-weight: 400; - `, - }; -}; diff --git a/src/Components/Atoms/Typography/index.ts b/src/Components/Atoms/Typography/index.ts deleted file mode 100644 index 1b67c1953..000000000 --- a/src/Components/Atoms/Typography/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Typography } from './Typography'; diff --git a/src/Components/Atoms/WeekDays/WeekDays.stories.tsx b/src/Components/Atoms/WeekDays/WeekDays.stories.tsx deleted file mode 100644 index c023077dd..000000000 --- a/src/Components/Atoms/WeekDays/WeekDays.stories.tsx +++ /dev/null @@ -1,62 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import WeekDays from './WeekDays'; - -// Define metadata for the story -const meta = { - component: WeekDays, - parameters: { - docs: { - description: { - component: - 'The WeekDays component that only shows the week days from Mo - Su as label and automatically adjusts to the language of the browser', - }, - }, - }, - // Define arguments for the story - argTypes: { - themeType: { - description: 'The Color of the week days', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'The layer of the week days', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 0, - }, - }, - }, - // 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: {}, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/WeekDays/WeekDays.tsx b/src/Components/Atoms/WeekDays/WeekDays.tsx deleted file mode 100644 index 6f4b964f9..000000000 --- a/src/Components/Atoms/WeekDays/WeekDays.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { styled } from 'styled-components'; - -import Typography from '../Typography/Typography'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -const WeekdaysConatiner = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - display: grid; - grid-template-columns: repeat(7, 1fr); - width: 100%; - margin-bottom: ${({ theme }) => theme.spacing.xs}; - color: ${({ theme, $themeType, $layer }) => getBackgroundColor({ theme, $themeType: $themeType ?? 'secondary', $layer: $layer ?? 0 })}; - - & > * { - display: flex; - justify-content: center; - align-items: center; - } -`; -// --------------------------------------------------------------------------- // -// ---------- This Atom creates a List of all Weekdas from Mo - Su ----------- // -// --------------------------------------------------------------------------- // -interface IWeekDays { - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function WeekDays({ themeType, layer }: IWeekDays) { - const [weekdays, setWeekdays] = useState([]); - - useEffect(() => { - const days = []; - for (let i = 5; i <= 11; i++) { - const day = new Date(1970, 0, i); - days.push(day.toLocaleString(navigator.language, { weekday: 'short' }).slice(0, 2)); - } - setWeekdays(days); - }, []); - - return ( - - {weekdays.map((day) => ( - - {day} - - ))} - - ); -} diff --git a/src/Components/Atoms/WeekDays/index.ts b/src/Components/Atoms/WeekDays/index.ts deleted file mode 100644 index e55f3e037..000000000 --- a/src/Components/Atoms/WeekDays/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WeekDays } from './WeekDays'; diff --git a/src/Components/Atoms/YearSelector/YearSelector.stories.tsx b/src/Components/Atoms/YearSelector/YearSelector.stories.tsx deleted file mode 100644 index 625453891..000000000 --- a/src/Components/Atoms/YearSelector/YearSelector.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import YearSelector from './YearSelector'; -// Define metadata for the story -const meta = { - component: YearSelector, - parameters: { - docs: { - description: { - component: 'the year selector is a simple component to select a year', - }, - }, - }, - // Define arguments for the story - argTypes: { - selectedYear: { - description: 'The year to be displayed', - control: { - type: 'number', - }, - }, - themeType: { - description: 'The theme type of the year selector', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the year selector', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - handler: { - description: 'The handler for the year selector', - control: { - type: 'function', - }, - }, - }, - // 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: { - selectedYear: 2021, - handler: (year: number) => console.log(year), - themeType: 'secondary', - layer: 0, - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Atoms/YearSelector/YearSelector.style.tsx b/src/Components/Atoms/YearSelector/YearSelector.style.tsx deleted file mode 100644 index 90bc2fe56..000000000 --- a/src/Components/Atoms/YearSelector/YearSelector.style.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { css, styled } from 'styled-components'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -export const StyledYearSelector = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - color: ${({ theme, $layer, $themeType }) => ($themeType ? theme.colors[$themeType][$layer ?? 0] : theme.colors.secondary[0])}; -`; - -export const StyledButton = styled.button<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - display: flex; - justify-content: center; - align-items: center; - background-color: transparent; - color: ${({ theme, $layer, $themeType = 'secondary' }) => getBackgroundColor({ theme, $themeType, $layer })}; - border: none; - padding: 0; - cursor: pointer; -`; - -export const SVGDesignCSS = css<{ theme: TTheme }>` - svg { - path: { - stroke: ${({ theme }) => theme.colors.secondary[0]}; - stroke-width: 2px; - } - } -`; diff --git a/src/Components/Atoms/YearSelector/YearSelector.tsx b/src/Components/Atoms/YearSelector/YearSelector.tsx deleted file mode 100644 index 2e97db5cb..000000000 --- a/src/Components/Atoms/YearSelector/YearSelector.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -import SVGChevronLeft from '../../icons/SVGChevronLeft/SVGChevronLeft'; -import SVGChevronRight from '../../icons/SVGChevronRight/SVGChevronRight'; -import { SVGDesignCSS, StyledButton, StyledYearSelector } from './YearSelector.style'; -import Typography from '../Typography/Typography'; -import { FancySVGAtom } from '../FancySVGAtom'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -// --------------------------------------------------------------------------- // -// ---------- Here are the design variants for sizing and alignment ---------- // -// --------------------------------------------------------------------------- // -interface IYearSelector { - selectedYear: number; - themeType?: TThemeTypes; - layer?: TLayer; - handler?: (change: number) => void; -} -export default function YearSelector({ selectedYear, handler, themeType, layer }: IYearSelector) { - // update the year and call the handler if the year changes - const handleYearChange = (change: number) => { - const calcCurrentYear = selectedYear + change; - handler && handler(calcCurrentYear); - }; - - return ( - - handleYearChange(-1)} $themeType={themeType} $layer={layer}> - - {SVGChevronLeft} - - - - {selectedYear} - - handleYearChange(1)} $themeType={themeType} $layer={layer}> - - {SVGChevronRight} - - - - ); -} diff --git a/src/Components/Atoms/YearSelector/index.ts b/src/Components/Atoms/YearSelector/index.ts deleted file mode 100644 index 54a59e5c6..000000000 --- a/src/Components/Atoms/YearSelector/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as YearSelector } from './YearSelector'; diff --git a/src/Components/Molecules/BottomBar/BottomBar.stories.tsx b/src/Components/Molecules/BottomBar/BottomBar.stories.tsx deleted file mode 100644 index 892e62d47..000000000 --- a/src/Components/Molecules/BottomBar/BottomBar.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyBottomBarStatic from './BottomBar'; - -const meta = { - component: FancyBottomBarStatic, - parameters: { - docs: { - description: { - component: - 'Smart-Comonent: This component shows a bar with icons and labels.
It is handled by a store to show and hide the bar and to (set/get) the active button.', - }, - }, - }, - argTypes: { - themeType: { - description: 'This prop will change the color of the bar', - control: { - type: 'select', - }, - }, - isVisible: { - description: 'This prop will show or hide the bar / props musst be received before the component is rendered', - control: { - type: 'boolean', - }, - }, - layer: { - description: 'This prop will change the layer of the bar', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: {}, -}; diff --git a/src/Components/Molecules/BottomBar/BottomBar.style.tsx b/src/Components/Molecules/BottomBar/BottomBar.style.tsx deleted file mode 100644 index 50664be3a..000000000 --- a/src/Components/Molecules/BottomBar/BottomBar.style.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { css } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -export const fancyBarStyle = css<{ theme?: TTheme }>` - display: flex; - padding: ${({ theme }) => theme.spacing.sm + ' ' + theme.spacing.sm + ' ' + theme.spacing.sm + ' 0'}; - width: 100%; -`; diff --git a/src/Components/Molecules/BottomBar/BottomBar.tsx b/src/Components/Molecules/BottomBar/BottomBar.tsx deleted file mode 100644 index 0785e729a..000000000 --- a/src/Components/Molecules/BottomBar/BottomBar.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { FancyBox } from '../../atoms/FancyBox'; -import { CSSProp, css } from 'styled-components'; -import { fancyBarStyle } from './BottomBar.style'; - -// --------------------------------------------------------------------------- // -// ------------------ The Bottom Bar for the mobile navigation --------------- // -// -------------- use the store to controle the bar from outside ------------ // -type TBottomBar = { - isVisible?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; - externalStyle?: CSSProp; - children?: React.ReactNode; -} & React.ComponentProps; -export default function BottomBar(props: TBottomBar) { - const { isVisible, externalStyle, children, ...bottomBarProps } = { ...defaultProps, ...props }; - - return ( - <> - {isVisible && ( - - {children} - - )} - - ); -} - -const defaultProps: TBottomBar = { - isVisible: true, -}; diff --git a/src/Components/Molecules/BottomBar/index.ts b/src/Components/Molecules/BottomBar/index.ts deleted file mode 100644 index 2f56dfbe7..000000000 --- a/src/Components/Molecules/BottomBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as BottomBar } from './BottomBar'; diff --git a/src/Components/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx b/src/Components/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx deleted file mode 100644 index b17b9fa0e..000000000 --- a/src/Components/Molecules/BottomBarIcon/BottomBarIcon.stories.tsx +++ /dev/null @@ -1,73 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; -// Import the component to be tested -import BottomBarIcon from './BottomBarIcon'; -// Define metadata for the story -const meta = { - component: BottomBarIcon, - parameters: { - docs: { - description: { - component: 'The BottomBarIcon component is for displaying a bottom bar icon like.', - }, - }, - }, - // Define arguments for the story - argTypes: { - disabled: { - control: { type: 'boolean' }, - defaultValue: { - summary: false, - }, - }, - label: { - control: { type: 'text' }, - defaultValue: { - summary: 'Label', - }, - }, - icon: { - control: { type: 'object' }, - }, - isActive: { - control: { type: 'boolean' }, - defaultValue: { - summary: false, - }, - }, - themeType: { - control: { type: 'select' }, - defaultValue: { - summary: 'secondary', - }, - }, - }, - - // 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: { - label: 'Label', - disabled: false, - themeType: 'secondary', - layer: 0, - icon: , - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Molecules/BottomBarIcon/BottomBarIcon.style.tsx b/src/Components/Molecules/BottomBarIcon/BottomBarIcon.style.tsx deleted file mode 100644 index eb36742f8..000000000 --- a/src/Components/Molecules/BottomBarIcon/BottomBarIcon.style.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { styled } from 'styled-components'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { disabledStyle } from '../../../design/designFunctions/disabledStyle/disableStyle'; -import { TTheme } from '@/interface/TTheme'; - -interface IContentWrapper { - $isActive?: boolean; - $disabled?: boolean; - theme: TTheme; - $themeType?: TThemeTypes; - $layer?: TLayer; -} - -export const ContentWrapper = styled.div` - position: relative; - display: flex; - flex-direction: column; - align-items: center; - width: 78px; - min-height: 32px; - background-color: transparent; - outline: none; - border: none; - cursor: pointer; - margin: 0 auto; - color: ${({ $isActive, theme, $layer = 0, $themeType = 'secondary' }) => - $isActive ? theme.colors.accent[0] : getBackgroundColor({ theme, $themeType, $layer })}; - transition: all 0.3s ease-in-out; - ${({ $disabled }) => $disabled && disabledStyle} - padding-bottom: ${({ theme }) => theme.spacing.xs}; - text-decoration: none; - - /* This is a media query that tests if the primary input mechanism of the device (e.g., mouse or touch screen) is capable of hovering */ - @media (hover: hover) { - &:hover { - color: ${({ $disabled, theme }) => !$disabled && theme.colors.accent[0]}; - } - } -`; diff --git a/src/Components/Molecules/BottomBarIcon/BottomBarIcon.tsx b/src/Components/Molecules/BottomBarIcon/BottomBarIcon.tsx deleted file mode 100644 index 1146bc4e0..000000000 --- a/src/Components/Molecules/BottomBarIcon/BottomBarIcon.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import FancyContent from '../FancyContent/FancyContent'; -import { ContentWrapper } from './BottomBarIcon.style'; - -interface IBottomBarIconProps { - icon: React.ReactNode; - label: string; - hideLabel?: boolean; - isActive?: boolean; - disabled?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; - id?: string; -} -// --------------------------------------------------------------------------- // -// -------------------- Only a Bottombar Icon with Text --------------------- // -// --------------------------------------------------------------------------- // -export default function BottomBarIcon(props: IBottomBarIconProps) { - const { icon, label, isActive, disabled, themeType, layer, hideLabel, id } = props; - - return ( - - - - {icon} - - {!hideLabel && {label}} - - - ); -} diff --git a/src/Components/Molecules/Button/Button.stories.tsx b/src/Components/Molecules/Button/Button.stories.tsx deleted file mode 100644 index 254d816ff..000000000 --- a/src/Components/Molecules/Button/Button.stories.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import Button from './Button'; - -const meta = { - component: Button, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: This component is a button with a lot of props to change the style.', - }, - }, - }, - argTypes: { - themeType: { - description: 'This prop will change the color of the bar', - control: { - type: 'select', - }, - }, - layer: { - description: 'This prop will change the layer of the bar', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - outlined: { - description: 'This prop will change the Nutton to outlined', - control: { - type: 'boolean', - }, - }, - textColor: { - description: 'This prop will change the color of the text', - control: { - type: 'select', - }, - }, - hoverColor: { - description: 'This prop will change the color of the hover', - control: { - type: 'select', - }, - }, - wide: { - description: 'This prop will change the width of the button', - control: { - type: 'boolean', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => - - - - ); -} - -const defaultProps: ISpeedail = { - labelAlign: 'right', -}; diff --git a/src/Components/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx b/src/Components/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx deleted file mode 100644 index 961ed633b..000000000 --- a/src/Components/Molecules/FancySpeedDailButton/SpeedDailButton.style.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { styled } from 'styled-components'; - -import { boxShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TTheme } from '@/interface/TTheme'; - -// eslint-disable-next-line react-refresh/only-export-components -const SpeedDailButtonSize = 60; - -export const Wrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: ${SpeedDailButtonSize + 12 + 'px'}; - height: ${SpeedDailButtonSize + 12 + 'px'}; -`; - -export const SpeedDialContainer = styled.div` - position: relative; - height: ${SpeedDailButtonSize + 'px'}; - width: ${SpeedDailButtonSize + 'px'}; -`; - -export const Button = styled.button<{ $isOpen: boolean; theme?: TTheme }>` - position: relative; - background-color: ${({ theme }) => theme.colors.accent[0]}; - color: ${({ theme }) => theme.colors.secondary[0]}; - border: none; - border-radius: 50%; - cursor: pointer; - height: 100%; - width: 100%; - outline: none; - display: flex; - align-items: center; - justify-content: center; - z-index: 50; - ${boxShadow.sm} - - svg { - position: absolute; - top: 50%; - left: 50%; - width: 60%; - height: 60%; - font-size: 24px; - transform-origin: 50% 50%; - transform: ${({ $isOpen }) => ($isOpen ? 'translate(-50%, -50%) rotate(45deg)' : 'translate(-50%, -50%) rotate(0)')}; - transition: transform 0.3s ease; - } -`; - -export const Ring = styled.div<{ $isOpen: boolean; theme?: TTheme }>` - position: absolute; - height: ${SpeedDailButtonSize + 'px'}; - width: ${SpeedDailButtonSize + 'px'}; - border-bottom: 1.5px solid ${({ theme }) => theme.colors.accent[0]}; - border-top: 1.5px solid ${({ theme }) => theme.colors.accent[0]}; - border-left: solid transparent; - border-right: solid transparent; - border-radius: 50%; - z-index: 49; - top: 50%; - right: 50%; - transform: ${({ $isOpen }) => - $isOpen ? 'translate(50%, -50%) scale(1.12) rotate(125deg)' : 'translate(50%, -50%) scale(0.9) rotate(20deg)'}; - opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)}; - transition: - opacity 0.3s ease-in-out, - transform 0.3s ease-in-out; - pointer-events: none; -`; - -export const MenueItemWrapper = styled.div<{ theme: TTheme }>` - position: absolute; - left: 50%; - bottom: ${({ theme }) => theme.spacing.lg}; - transform: translateX(-50%); -`; - -export const MenueItemContainer = styled.div<{ $isOpen: boolean; $index: number }>` - position: absolute; - left: 50%; - border-radius: 50%; - bottom: ${({ $index }) => `calc(${($index + 1) * 60}px)`}; - opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)}; - transform: ${({ $isOpen }) => ($isOpen ? 'translateY(0) scale(1) translateX(-50%)' : `translateY(50px) scale(0) translateX(-50%)`)}; - transition: - transform 0.25s ease-in-out, - opacity 0.25s ease-in-out; - transition-delay: ${({ $isOpen, $index }) => ($isOpen ? 0.1 * $index : 0.1 * (2 - $index))}s; - pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')}; - transform: translate(-50%); - height: 40px; - width: 40px; - ${boxShadow.sm}; -`; diff --git a/src/Components/Molecules/FancySpeedDailButton/index.ts b/src/Components/Molecules/FancySpeedDailButton/index.ts deleted file mode 100644 index 699b3cda5..000000000 --- a/src/Components/Molecules/FancySpeedDailButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancySpeedDailButton } from './FancySpeedDailButton'; diff --git a/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.stories.tsx b/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.stories.tsx deleted file mode 100644 index 48a3efcb8..000000000 --- a/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.stories.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyTabSwitch from './FancyTabSwitch'; - -const meta = { - component: FancyTabSwitch, - parameters: { - layout: 'centered', - docs: { - description: { - component: 'Dumb-Comonent: a Button that opens a SpeedDialMenue with a list of Buttons.', - }, - }, - }, - argTypes: { - wide: { - description: 'If true, the component will take up the full width of its container.', - type: { name: 'boolean' }, - }, - disabled: { - description: 'If true, the component will be disabled.', - type: { name: 'boolean' }, - }, - size: { - description: 'The size of the component.', - control: { - type: 'select', - }, - }, - iconAlign: { - description: 'The icon alignment.', - control: { - type: 'radio', - }, - }, - textColor: { - description: 'The color of the component.', - control: { - type: 'select', - }, - }, - themeType: { - description: 'The color of the component.', - control: { - type: 'select', - }, - }, - currentSelect: { - description: 'The currently selected tab.', - }, - layer: { - description: 'The layer of the component.', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - activeColor: { - description: 'The active color of the component.', - control: { - type: 'select', - }, - }, - outlined: { - description: 'If true, the component will be outlined.', - type: { name: 'boolean' }, - }, - rounded: { - description: 'The rounded of the component.', - control: { - type: 'select', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - values: [ - { itemKey: '1', label: 'Tab 1' }, - { itemKey: '2', label: 'Tab 2' }, - { itemKey: '3', label: 'Tab 3' }, - ], - - label: 'FancyTabSwitch', - currentSelect: '2', - handler: () => { - console.log('onChange'); - }, - themeType: 'primary', - wide: true, - layer: 4, - disabled: false, - }, -}; diff --git a/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx b/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx deleted file mode 100644 index 7b86fe683..000000000 --- a/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.style.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { styled } from 'styled-components'; - -import { borderRadius, spacingPx } from '../../../design/theme/designSizes'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { tabSwitchSizes } from '../TabSwitch/TabSwitch.style'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { TSpacings } from '../../../interface/TSpacings'; - -// Define the interface for the styled-component -export interface IFancyTabSwitchStyle { - $transparent?: boolean; - $wide?: boolean; - $outlinedBackgroundStrength?: number; - $tabSpacing?: TSpacings; - $direction?: 'horizontal' | 'vertical'; - $rounded?: TBorderRadiusSizes; - $padding?: keyof typeof tabSwitchSizes; - $outlined?: boolean; - theme: TTheme; - $layer?: TLayer; - $themeType?: TThemeTypes; -} - -// ----------------------------------------------------------- // -// ---------- The main UL element for the component ---------- // -// ----------------------------------------------------------- // -// Define the styled-component for the unordered list of the tab switch -export const ULButtonSwitchList = styled.ul` - display: ${({ $wide }) => ($wide ? 'grid' : 'inline-grid')}; - grid-auto-flow: ${({ $direction }) => ($direction === 'vertical' ? 'row' : 'column')}; - grid-auto-rows: 1fr; - grid-auto-columns: 1fr; - gap: ${({ $tabSpacing }) => ($tabSpacing ? spacingPx[$tabSpacing] : '0')}; - border-radius: ${({ $rounded }) => ($rounded ? borderRadius[$rounded] : '0')}; - ${({ $wide }) => $wide && `justify-content: space-between`}; - align-items: center; - margin: 0; - padding: 0; - - // Generate the disabled style for the tab switch -`; - -// ----------------------------------- // -// ---------- Other styled ---------- // -// ----------------------------------- // -// Define the styled-component for the list item wrapper -export const ItemWrapper = styled.li` - position: relative; - height: 100%; - width: 100%; - flex: 1 0; - list-style: none; -`; diff --git a/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.tsx b/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.tsx deleted file mode 100644 index 27d1adc30..000000000 --- a/src/Components/Molecules/FancyTabSwitch/FancyTabSwitch.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { css } from 'styled-components'; - -import { borderRadius } from '../../../design/theme/designSizes'; -import Fieldset from '../Fieldset/Fieldset'; -import FancyBar from '../../atoms/FancyBox/FancyBox'; -import TabSwitch from '../TabSwitch/TabSwitch'; -import { tabSwitchSizes } from '../TabSwitch/TabSwitch.style'; -import { ITabSwitchProps } from '../TabSwitch/TabSwitch.model'; - -// Define the main FancyTabSwitch component -export default function FancyTabSwitch(props: ITabSwitchProps & { label?: string }) { - const { values, label, layer, themeType, size, disabled, outlined, rounded, wide, ...tabSwitchProps } = props; - - const clacPadding = outlined - ? parseInt(tabSwitchSizes[size || 'sm'].paddingComponent) - 1.5 + 'px' - : size - ? tabSwitchSizes[size].paddingComponent - : '0'; - - /* Generate the unordered list for the tab switch */ - return ( -
- - - -
- ); -} diff --git a/src/Components/Molecules/FancyTabSwitch/index.ts b/src/Components/Molecules/FancyTabSwitch/index.ts deleted file mode 100644 index a9054e779..000000000 --- a/src/Components/Molecules/FancyTabSwitch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyTabSwitch } from './FancyTabSwitch'; diff --git a/src/Components/Molecules/FancyTabSwitch/utils/generateColorDesign.ts b/src/Components/Molecules/FancyTabSwitch/utils/generateColorDesign.ts deleted file mode 100644 index a6782aef1..000000000 --- a/src/Components/Molecules/FancyTabSwitch/utils/generateColorDesign.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { css } from 'styled-components'; - -import { getBackgroundColor } from '../../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { tabSwitchSizes } from '../../TabSwitch/TabSwitch.style'; -import { IFancyTabSwitchStyle } from '../FancyTabSwitch.style'; -import colorTransparencyCalculator from '../../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator'; -import { borderRadius } from '../../../../design/theme/designSizes'; - -const generateTransparentStyle = (props: TGenerateOutlineStyle) => { - const { $padding, theme, $rounded } = props; - - const getPaddings = $padding ? parseInt(tabSwitchSizes[$padding].paddingComponent) : 0; - const calcPadding = Math.max(0, getPaddings - 1.5) + 'px ' + (getPaddings + parseInt(borderRadius[$rounded ?? 'sm'])) + 'px'; - - return css` - overflow: hidden; - border: 1.5px solid ${getBackgroundColor({ theme, $themeType: 'primary', $layer: 4 })}; - - ${$rounded && - css` - padding: ${calcPadding}; - `} - `; -}; - -// Define the function to generate the outline style for the tab switch -type TGenerateOutlineStyle = Pick< - IFancyTabSwitchStyle, - '$outlined' | '$padding' | '$themeType' | '$rounded' | 'theme' | '$layer' | '$outlinedBackgroundStrength' ->; -const generateOutlineStyle = (props: TGenerateOutlineStyle) => { - const { $padding, $themeType, theme, $rounded, $layer = 3, $outlinedBackgroundStrength = 0.5 } = props; - - // if the theme type istransparent, generate the transparent style and return it - if ($themeType === 'transparent') return generateTransparentStyle({ $padding, $themeType, theme, $rounded }); - // get theme background color - const backgroundColor = getBackgroundColor({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 3 }); - - // generate the background color with a transparency of the background color - const generateSlightBackgroundColor = colorTransparencyCalculator( - getBackgroundColor({ theme, $themeType: $themeType ?? 'primary', $layer: Math.max(1, $layer - 3) }), - $outlinedBackgroundStrength - ); - - return css` - box-sizing: border-box; - background-color: ${generateSlightBackgroundColor}; - border: 1.5px solid ${backgroundColor}; - padding: ${$padding ? parseInt(tabSwitchSizes[$padding].paddingComponent) - 1.5 + 'px' : '0'}; // 1.5px is the border width - `; -}; - -// --------------------------------------------------------------------------- // -// ----------- The Main generator function to create a the square ---------- // -// --------------------------------------------------------------------------- // -type TGenerateColorDesign = Pick< - IFancyTabSwitchStyle, - '$themeType' | 'theme' | '$outlined' | '$padding' | '$rounded' | '$layer' | '$outlinedBackgroundStrength' ->; -export default function generateColorDesign(props: TGenerateColorDesign) { - const { $themeType, theme, $outlined, $padding, $rounded, $layer, $outlinedBackgroundStrength } = props; - let outlinedStyle, backgroundColor; - - // generate the outlined style if the outlined prop is true else generate only the background color - if ($outlined) { - outlinedStyle = generateOutlineStyle({ $outlined, $padding, $themeType, theme, $rounded, $layer, $outlinedBackgroundStrength }); - } else { - backgroundColor = getBackgroundColor({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 3 }); - } - - return css` - padding: ${$padding && $themeType !== 'transparent' ? tabSwitchSizes[$padding].paddingComponent : '0'}; - background-color: ${$themeType !== 'transparent' && backgroundColor}; - ${outlinedStyle} - `; -} diff --git a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts b/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts deleted file mode 100644 index 3430a5243..000000000 --- a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { TThemeTypes } from '@/interface/TUiColors'; -import { tabSwitchItemSizes } from './FancyTabSwitchButton.style'; - -export interface ITabSwitchDetailsLabelIcon { - itemKey: string; - label?: string; - icon?: JSX.Element; -} - -export interface ITabSwitchDetailsChildren { - itemKey: string; - children?: React.ReactNode; -} - -export interface ITabSwitchButton { - disabled?: boolean; - selected: boolean; - onClick: (key: string) => void; - wide?: boolean; - themeType?: TThemeTypes; - iconAlign?: 'left' | 'right'; - size?: keyof typeof tabSwitchItemSizes; -} - -export type ITabSwitchButtonProps = ITabSwitchButton & ITabSwitchDetailsChildren & ITabSwitchDetailsLabelIcon; diff --git a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx b/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx deleted file mode 100644 index 132e5b0d7..000000000 --- a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx +++ /dev/null @@ -1,95 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyTabSwitchButton from './FancyTabSwitchButton'; - -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -// fix for building ... because storybook is not able to handle the default export -const HelperComponent = (props: React.ComponentProps) => ; -HelperComponent.displayName = 'FancyTabSwitchButton'; - -// Define metadata for the story -const meta = { - component: HelperComponent, - parameters: { - docs: { - description: { - component: 'SwipeUpDash is a simple horizontal line', - }, - }, - }, - // Define arguments for the story - argTypes: { - disabled: { - description: 'If true, the button will be disabled.', - type: { name: 'boolean' }, - defaultValue: { - summary: false, - }, - }, - label: { - description: 'The text to be displayed in the button.', - type: { name: 'string' }, - }, - icon: { - description: 'The icon to be displayed in the button.', - type: { name: 'string' }, - }, - children: { - description: 'The children of the button.', - type: { name: 'string' }, - }, - itemKey: { - description: 'The key of the button.', - type: { name: 'string' }, - }, - selected: { - description: 'If true, the button will be selected.', - type: { name: 'boolean' }, - }, - onClick: { - description: 'A function that is called when the button is clicked.', - type: { name: 'function' }, - }, - wide: { - description: 'If true, the button will be wide.', - type: { name: 'boolean' }, - }, - themeType: { - description: 'The text color of the button.', - control: { type: 'select' }, - }, - iconAlign: { - description: 'The alignment of the icon.', - control: { type: 'radio' }, - }, - size: { - description: 'The size of the button.', - control: { type: 'select' }, - }, - }, - // 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: { - itemKey: '1', - label: 'label', - icon: , - selected: false, - wide: false, - themeType: 'secondary', - iconAlign: 'left', - size: 'sm', - }, -}; diff --git a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx b/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx deleted file mode 100644 index 1c573e792..000000000 --- a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import { styled, css } from 'styled-components'; - -import themeStore from '../../../design/theme/themeStore/themeStore'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTypography } from '@/interface/TTypography'; -import { TTheme } from '@/interface/TTheme'; - -const getSpacingFromTheme = themeStore.getState().theme.spacing; -export const tabSwitchItemSizes = { - sm: { - fontSize: 'smText' as TTypography, - padding: getSpacingFromTheme.xs, - }, - md: { - fontSize: 'content' as TTypography, - padding: getSpacingFromTheme.sm, - }, - lg: { - fontSize: 'button' as TTypography, - padding: getSpacingFromTheme.md, - }, -}; - -// ------------------------------------------------------------------ // -// ----------- the helperfunctions for the style generate ----------- // -// ------------------------------------------------------------------ // -//generates the style from the dynamic values of the tab -interface IListButtonStyle { - $wide?: boolean; - $textColor?: TThemeTypes; - $iconAlign?: 'left' | 'right'; - theme: TTheme; - $themeType?: TThemeTypes; - $layer?: TLayer; - $size?: keyof typeof tabSwitchItemSizes; - $hasLabel?: boolean; - $hasIcon?: boolean; -} - -type TGenerateDynamicTabStyle = Pick; -const generateDynamicTabStyle = (props: TGenerateDynamicTabStyle) => { - const { $textColor = 'secondary', theme, $themeType, $layer = 0 } = props; - const darkTheme = themeStore.getState().isDarkTheme; - - //if the background not transparent give him a background/text color - if ($themeType !== 'transparent') { - return css` - color: ${darkTheme - ? getBackgroundColor({ theme, $themeType: $textColor, $layer }) - : getBackgroundColor({ theme, $themeType: $textColor, $layer })}; - `; - } else { - //when the it is transparent style it with underline - return css` - color: ${getBackgroundColor({ theme, $themeType: $textColor, $layer })}; - `; - } -}; - -//this functions hold litle childs for the label -const generateIconAlignment = (props: Pick) => { - const { $iconAlign } = props; - - const getAlignment = () => { - switch ($iconAlign) { - case 'right': - return css` - gap: ${getSpacingFromTheme.xs}; - order: 1; - `; - default: - case 'left': - return css` - gap: ${getSpacingFromTheme.xs}; - `; - } - }; - - return css` - ${getAlignment()} - i { - display: flex; - justify-content: center; - } - `; -}; - -// ------------------------------------------------------------------ // -// ------------ the main style generator for the li item ------------ // -// ------------------------------------------------------------------ // -const generateButtonStyle = (props: IListButtonStyle) => { - const { $wide, $textColor, theme, $layer, $themeType, $iconAlign, $size, $hasIcon, $hasLabel } = props; - - return css` - list-style: none; - height: 100%; - width: 100%; - display: flex; - justify-content: center; - - label { - width: 100%; - display: flex; - flex-direction: row; - justify-content: center; - box-sizing: border-box; - align-items: center; - text-align: center; - cursor: pointer; - user-select: none; - padding: ${$wide - ? `${tabSwitchItemSizes[$size || 'sm'].padding} ${getSpacingFromTheme.md}` - : `${tabSwitchItemSizes[$size || 'sm'].padding} ${parseInt(tabSwitchItemSizes[$size || 'sm'].padding) + 7 + 'px'}`}; - //handles the dynamic values - ${generateDynamicTabStyle({ $themeType, $textColor, theme, $layer })} - // generates underlying childs in this element - ${$hasIcon && $hasLabel && generateIconAlignment({ $iconAlign })} - } - - input { - display: none; - } - `; -}; - -export const SwitchButtonStyle = styled.div` - ${generateButtonStyle} -`; diff --git a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx b/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx deleted file mode 100644 index 0697f9f07..000000000 --- a/src/Components/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { HTMLAttributes, useId } from 'react'; - -import Typography from '../../atoms/Typography/Typography'; -import FancyContent from '../FancyContent/FancyContent'; -import { ITabSwitchButtonProps } from './FancyTabSwitchButton.model'; -import { SwitchButtonStyle } from './FancyTabSwitchButton.style'; -import { leftRightToFlex } from '../../utils/functions/leftRightToFlex'; - -// ------------------------------------------------------------------ // -// ------------- main component for the tab (li item) --------------- // -// ------------------------------------------------------------------ // -type IFancyTabSwitchButton = ITabSwitchButtonProps & HTMLAttributes; -const FancyTabSwitchButton = React.forwardRef((props, ref) => { - const { disabled, selected, onClick, wide, themeType, iconAlign, size, itemKey, label, icon, children, ...HTMLProps } = props; - - const id = useId(); - - return ( - - onClick(itemKey)} - /> - - {icon || - (label && ( - - {icon && {icon}} - {label && {label}} - - ))} - {children} - - - ); -}); - -export default FancyTabSwitchButton; diff --git a/src/Components/Molecules/FancyTabSwitchButton/index.ts b/src/Components/Molecules/FancyTabSwitchButton/index.ts deleted file mode 100644 index 4d9b968c3..000000000 --- a/src/Components/Molecules/FancyTabSwitchButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TabSwitchItem } from './FancyTabSwitchButton'; diff --git a/src/Components/Molecules/FancyVideoText/FancyVideoText.stories.tsx b/src/Components/Molecules/FancyVideoText/FancyVideoText.stories.tsx deleted file mode 100644 index 7b8d71645..000000000 --- a/src/Components/Molecules/FancyVideoText/FancyVideoText.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyVideoText from './FancyVideoText'; - -const meta = { - component: FancyVideoText, - parameters: { - layout: 'centered', - docs: { - description: { - component: 'Dumb-Comonent: A FancyVideoText component.
It is a video with text on top.', - }, - }, - }, - argTypes: { - aspectRatio: { - description: 'The aspect ratio of the component.', - }, - position: { - description: 'The position of the component.', - control: { - type: 'select', - }, - }, - src: { - description: 'The video source.', - }, - autoPlay: { - description: 'If true, the video will start playing automatically.', - type: { name: 'boolean' }, - }, - muted: { - description: 'If true, the video will be muted.', - type: { name: 'boolean' }, - }, - loop: { - description: 'If true, the video will loop.', - type: { name: 'boolean' }, - }, - controls: { - description: 'If true, the video will have controls.', - type: { name: 'boolean' }, - }, - poster: { - description: 'The video poster.', - type: { name: 'string' }, - }, - darken: { - description: 'If true, the image will be darkened.', - type: { name: 'boolean' }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - src: 'https://www.w3schools.com/html/mov_bbb.mp4', - autoPlay: true, - aspectRatio: '16/9', - position: 'top-left', - children: [

Top Right

], - }, -}; diff --git a/src/Components/Molecules/FancyVideoText/FancyVideoText.tsx b/src/Components/Molecules/FancyVideoText/FancyVideoText.tsx deleted file mode 100644 index 859f20d1b..000000000 --- a/src/Components/Molecules/FancyVideoText/FancyVideoText.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -import VideoAtom, { IFancyVideo } from '../../atoms/FancyVideo/FancyVideo'; -import ImageVideoOverlay, { TPositions } from '../../atoms/ImageVideoOverlay/ImageVideoOverlay'; - -// Define the props for the FancyVideoText component -interface IFancyVideoTextProps extends IFancyVideo { - position: TPositions; - children?: React.ReactNode; -} -// --------------------------------------------------------------------------- // -// ----------- The Definition for the FancyVideoText Component --------------- // -// --------------------------------------------------------------------------- // -export default function FancyVideoText(props: IFancyVideoTextProps) { - const { position, ...restProps } = props; - - return ( - // Render the ImageVideoOverlay component with the specified position and textChildren props - - {/* Render the VideoAtom component with the remaining props */} - - - ); -} diff --git a/src/Components/Molecules/FancyVideoText/index.ts b/src/Components/Molecules/FancyVideoText/index.ts deleted file mode 100644 index 5ee330255..000000000 --- a/src/Components/Molecules/FancyVideoText/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyVideoText } from './FancyVideoText'; diff --git a/src/Components/Molecules/Fieldset/Fieldset.stories.tsx b/src/Components/Molecules/Fieldset/Fieldset.stories.tsx deleted file mode 100644 index 172867b1a..000000000 --- a/src/Components/Molecules/Fieldset/Fieldset.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import Fieldset from './Fieldset'; - -// Define metadata for the story -const meta = { - component: Fieldset, - parameters: { - docs: { - description: { - component: 'Fieldset is only a wrapper for a group of elements. It is used to group elements in a form.', - }, - }, - }, - - // Define arguments for the story - argTypes: {}, - - // 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) => ( -
-

Some text

-

Iam the Content of the Fieldset

-
- ), - args: { - alignLabel: 'left', - label: 'This is a label', - fontVariantLegend: 'h3', - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Molecules/Fieldset/Fieldset.style.tsx b/src/Components/Molecules/Fieldset/Fieldset.style.tsx deleted file mode 100644 index b7f770cce..000000000 --- a/src/Components/Molecules/Fieldset/Fieldset.style.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { styled } from 'styled-components'; -import { TalignLabel } from './Fieldset'; -import { disabledStyle } from '../../../design/designFunctions/disabledStyle/disableStyle'; -import { TTheme } from '@/interface/TTheme'; - -export const StyledFieldset = styled.fieldset<{ $disabled?: boolean }>` - width: 100%; - border: none; - padding: 0; - margin: 0; - ${({ $disabled }) => $disabled && disabledStyle} -`; - -export const StyledLegend = styled.legend<{ alignLabel?: TalignLabel; theme: TTheme }>` - margin: 0 ${({ alignLabel }) => (alignLabel === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xs}; -`; diff --git a/src/Components/Molecules/Fieldset/Fieldset.tsx b/src/Components/Molecules/Fieldset/Fieldset.tsx deleted file mode 100644 index 232e3824f..000000000 --- a/src/Components/Molecules/Fieldset/Fieldset.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -import { StyledFieldset, StyledLegend } from './Fieldset.style'; -import { TTypography } from '@/interface/TTypography'; -import { Typography } from '@/components/atoms/Typography'; - -export type TalignLabel = 'left' | 'center'; - -interface IFieldset { - children?: React.ReactNode; - label?: string; - alignLabel?: TalignLabel; - fontVariantLegend?: TTypography; - disabled?: boolean; -} -export default function Fieldset(props: IFieldset) { - const { children, label, alignLabel, fontVariantLegend, disabled } = props; - - return ( - - {label && ( - - - {label} - - - )} - {children} - - ); -} diff --git a/src/Components/Molecules/Fieldset/index.ts b/src/Components/Molecules/Fieldset/index.ts deleted file mode 100644 index f8cac46b5..000000000 --- a/src/Components/Molecules/Fieldset/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Fieldset } from './Fieldset'; diff --git a/src/Components/Molecules/Header/Header.stories.tsx b/src/Components/Molecules/Header/Header.stories.tsx deleted file mode 100644 index e0c470f1a..000000000 --- a/src/Components/Molecules/Header/Header.stories.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import Header from './Header'; -import { HeaderTitleWithLogo } from '../HeaderTitleWithLogo'; -import { FancySearchBar } from '../../organisms/FancySearchBar'; -import { FancyMiniProfile } from '../FancyMiniProfile'; -import { css } from 'styled-components'; - -const meta = { - component: Header, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A simple header that can be self designd with the help of the theme.', - }, - }, - }, - argTypes: {}, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -const headerStyle = css` - position: fixed; - top: 10px; - width: 80%; - padding: 12px 18px; - display: flex; - justify-content: space-between; - align-items: center; - border-radius: 50px; -`; - -export const Primary: Story = { - render: (args) => ( -
-
- -
- -
- -
-
- ), - args: { - themeType: 'primary', - outlined: false, - layer: 1, - outlinedBackgroundStrength: 0.5, - children: 'Header', - }, -}; diff --git a/src/Components/Molecules/Header/Header.style.tsx b/src/Components/Molecules/Header/Header.style.tsx deleted file mode 100644 index 87132a30b..000000000 --- a/src/Components/Molecules/Header/Header.style.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { CSSProp, styled } from 'styled-components'; - -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import generateThemeForCard, { IgenerateThemeForCard } from '../../../design/designFunctions/generateThemeForCard/generateThemeForCard'; -import { TTheme } from '@/interface/TTheme'; - -type TStyledHeader = IStyledPrefixAndPicker & { theme: TTheme; $externalStyle?: CSSProp }; -export const StyledHeader = styled.header` - box-sizing: border-box; - display: flex; - ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) => - generateThemeForCard({ $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength })} - ${({ $externalStyle }) => $externalStyle} -`; diff --git a/src/Components/Molecules/Header/Header.tsx b/src/Components/Molecules/Header/Header.tsx deleted file mode 100644 index 503dc5573..000000000 --- a/src/Components/Molecules/Header/Header.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { CSSProp } from 'styled-components'; - -import { IgenerateThemeForCard } from '../../../design/designFunctions/generateThemeForCard/generateThemeForCard'; -import { StyledHeader } from './Header.style'; - -type THeaderProps = IgenerateThemeForCard & { - children?: React.ReactNode; - externalStyle?: CSSProp; -} & React.HTMLAttributes; - -export default function Header(props: THeaderProps) { - const { themeType, layer, outlined, outlinedBackgroundStrength, children, externalStyle } = props; - return ( - - {children} - - ); -} diff --git a/src/Components/Molecules/Header/index.ts b/src/Components/Molecules/Header/index.ts deleted file mode 100644 index 5653319de..000000000 --- a/src/Components/Molecules/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Header } from './Header'; diff --git a/src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx b/src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx deleted file mode 100644 index b6197ffd4..000000000 --- a/src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import HeaderTitleWithLogo from './HeaderTitleWithLogo'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -const meta = { - component: HeaderTitleWithLogo, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A simple HeaderTitleWithLogo component that can be used to provied a title and a Logo.', - }, - }, - }, - argTypes: { - themeType: { - description: 'The theme type of the component', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the component', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - linkTo: { - description: 'The link that redirects to a page', - control: { - type: 'text', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - title: 'Title', - logo: , - }, -}; diff --git a/src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx b/src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx deleted file mode 100644 index 2f896b73a..000000000 --- a/src/Components/Molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; - -import Typography from '../../atoms/Typography/Typography'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -const Wrapper = styled.div` - position: relative; - display: flex; - align-items: center; - height: 100%; - width: 100%; - box-sizing: border-box; -`; - -const LogoWrapper = styled.div` - display: flex; - align-items: center; - justify-content: center; - height: 100%; -`; - -const StyledHeading = styled.a<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - display: flex; - gap: ${({ theme }) => theme.spacing.sm}; - align-items: center; - word-break: keep-all; - text-decoration: none; - color: ${({ theme, $themeType = 'secondary', $layer }) => getTextColor({ theme, $themeType, $textLayer: $layer })}; -`; - -interface IHeaderTitleWithLogo { - title?: React.ReactNode | string; - logo?: React.ReactNode; - linkTo?: string; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function HeaderTitleWithLogo(props: IHeaderTitleWithLogo) { - const { title, logo, linkTo, themeType, layer } = { ...defaultProps, ...props }; - - return ( - - - {logo && {logo}} - {title && ( - - {title} - - )} - - - ); -} - -const defaultProps: IHeaderTitleWithLogo = { - title: '', - linkTo: '/', -}; diff --git a/src/Components/Molecules/HeaderTitleWithLogo/index.ts b/src/Components/Molecules/HeaderTitleWithLogo/index.ts deleted file mode 100644 index 1129d0ae2..000000000 --- a/src/Components/Molecules/HeaderTitleWithLogo/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as HeaderTitleWithLogo } from './HeaderTitleWithLogo'; diff --git a/src/Components/Molecules/InfoCard/InfoCard.stories.tsx b/src/Components/Molecules/InfoCard/InfoCard.stories.tsx deleted file mode 100644 index 80c0a7822..000000000 --- a/src/Components/Molecules/InfoCard/InfoCard.stories.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import InfoCard from './InfoCard'; - -const meta = { - component: InfoCard, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: Thats only the Style of the InfoCard, it accepts all kind of children.', - }, - }, - }, - argTypes: { - themeType: { - description: 'The theme type of the component', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the component', - control: { - type: 'range', - min: 0, - max: 10, - step: 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: 10, - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - children: 'This is a InfoCard', - themeType: 'primary', - layer: 1, - }, -}; diff --git a/src/Components/Molecules/InfoCard/InfoCard.tsx b/src/Components/Molecules/InfoCard/InfoCard.tsx deleted file mode 100644 index dbabce193..000000000 --- a/src/Components/Molecules/InfoCard/InfoCard.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; - -import FancyBox from '../../atoms/FancyBox/FancyBox'; -import { generateInfoCardStyle } from './InfoCrad.style'; - -type TInfoCardProps = React.ComponentProps & { - size?: 'sm' | 'md' | 'lg'; -}; - -export default function InfoCard(props: TInfoCardProps) { - const { size, children, ...fancyBoxProps } = props; - - const BoxStyle = generateInfoCardStyle(size || 'md'); - - return ( - - {children} - - ); -} diff --git a/src/Components/Molecules/InfoCard/InfoCrad.style.tsx b/src/Components/Molecules/InfoCard/InfoCrad.style.tsx deleted file mode 100644 index b41dd9bf7..000000000 --- a/src/Components/Molecules/InfoCard/InfoCrad.style.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { css } from 'styled-components'; - -import { TSizes } from '../../../interface/TComponentSizes'; -import themeStore from '@/design/theme/themeStore/themeStore'; - -const getTheme = themeStore.getState().theme; -const sizes = { - sm: { - borderRadius: getTheme.borderRadius.sm, - padding: getTheme.spacing.sm, - }, - md: { - borderRadius: getTheme.borderRadius.md, - padding: getTheme.spacing.md, - }, - lg: { - borderRadius: getTheme.borderRadius.lg, - padding: getTheme.spacing.lg, - }, -}; - -export const generateInfoCardStyle = (size: TSizes) => { - return css` - width: 100%; - border-radius: ${sizes[size].borderRadius}; - padding: ${sizes[size].padding}; - `; -}; diff --git a/src/Components/Molecules/InfoCard/index.ts b/src/Components/Molecules/InfoCard/index.ts deleted file mode 100644 index d2d967091..000000000 --- a/src/Components/Molecules/InfoCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as InfoCard } from './InfoCard'; diff --git a/src/Components/Molecules/InputWrapper/InputWrapper.stories.tsx b/src/Components/Molecules/InputWrapper/InputWrapper.stories.tsx deleted file mode 100644 index 8e2fe23b6..000000000 --- a/src/Components/Molecules/InputWrapper/InputWrapper.stories.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import InputWrapper from './InputWrapper'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -const meta = { - component: InputWrapper, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The InputWrapper component that can be used to wrap a input component via the InputElement.
', - }, - }, - }, - argTypes: { - themeType: { - description: 'The theme type of the component', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the component', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - isActive: { - description: 'The state of the component', - control: { - type: 'boolean', - }, - }, - disabled: { - description: 'The state of the component', - control: { - type: 'boolean', - }, - }, - align: { - description: 'The align of the component', - control: { - type: 'select', - }, - }, - label: { - description: 'The label of the component', - control: { - type: 'text', - }, - }, - errorMessage: { - description: 'The errorMessage of the component', - control: { - type: 'text', - }, - }, - value: { - description: 'The value of the component', - control: { - type: 'text', - }, - }, - autoWidth: { - description: 'The autoWidth of the component', - control: { - type: 'boolean', - }, - }, - underline: { - description: 'The underline of the component', - control: { - type: 'boolean', - }, - }, - placeholder: { - description: 'The placeholder of the component', - control: { - type: 'text', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - id: 'id', - label: 'Label', - align: 'left', - icon: , - }, -}; diff --git a/src/Components/Molecules/InputWrapper/InputWrapper.style.tsx b/src/Components/Molecules/InputWrapper/InputWrapper.style.tsx deleted file mode 100644 index 7119f6920..000000000 --- a/src/Components/Molecules/InputWrapper/InputWrapper.style.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { styled, css } from 'styled-components'; - -import { disabledStyle } from '../../../design/designFunctions/disabledStyle/disableStyle'; -import { fontSize } from '../../../design/theme/designSizes'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -export const StyledInputWrapper = styled.div<{ disabled?: boolean; $autoWidth?: boolean }>` - box-sizing: border-box; - position: relative; - display: grid; - grid-template-columns: auto 1fr auto; - grid-template-rows: 1fr auto; - width: ${({ $autoWidth }) => ($autoWidth ? 'auto' : '100%')}; - - ${({ disabled }) => (disabled ? disabledStyle : '')}; -`; - -//the style for the error message -export const ErrorMessage = styled.p<{ theme: TTheme }>` - grid-column: 2; - grid-row: 2; - margin: 0; - margin-top: ${({ theme }) => theme.spacing.xxs}; - font-size: ${fontSize.extrasm}; - color: ${({ theme }) => theme.colors.error[0]}; -`; - -//the input/label/underline are all wrapped in thid container -export const InputContainer = styled.div<{ $givePadding: boolean; theme: TTheme; $themeType: TThemeTypes; $layer: TLayer }>` - width: 100%; - grid-column: 2/3; - ${({ $givePadding, theme }) => - $givePadding && - css` - padding-top: ${parseFloat(theme.spacing.lg) + 2 + 'px'}; - `}; - position: relative; - - input { - padding: 0px 0px ${({ theme }) => parseFloat(theme.spacing.xs) + 2 + 'px'}; - } - - svg { - color: ${({ theme, $themeType, $layer }) => getBackgroundColor({ theme, $themeType, $layer })}; - } -`; diff --git a/src/Components/Molecules/InputWrapper/InputWrapper.tsx b/src/Components/Molecules/InputWrapper/InputWrapper.tsx deleted file mode 100644 index 6d7a9e14d..000000000 --- a/src/Components/Molecules/InputWrapper/InputWrapper.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { css } from 'styled-components'; - -import { ErrorMessage, StyledInputWrapper, InputContainer } from './InputWrapper.style'; -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 { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import calcColorState from '../../../design/designFunctions/calcColorState/calcColorState'; -import themeStore from '../../../design/theme/themeStore/themeStore'; - -// Define the styles for the icon -const iconStyle = css` - margin-right: ${parseFloat(themeStore.getState().theme.spacing.xs) + 2 + 'px'}; - margin-bottom: 2px; - transition: 0.5s; - align-self: flex-end; -`; - -// Define the interface for the color state - -// Define the props for the InputWrapper component -export type IInputWrapperUserInputProps = Omit; -export interface IInputWrapper { - id: string; - isActive?: boolean; - label?: string; - disabled?: boolean; - InputElement?: React.ReactNode; - errorMessage?: string; - icon?: JSX.Element; - value?: string | number | readonly string[] | undefined; - themeType?: TThemeTypes; - layer?: TLayer; - align?: TRawInputAlign; - autoWidth?: boolean; - underline?: boolean; - placeholder?: string; -} -// --------------------------------------------------------------------------- // -// ------ The Wrapper for the inputs that give him some extra features ------ // -// ------------------ like a Label icon errormessage ------------------------- // -export default function InputWrapper(props: IInputWrapper) { - const { - id, - value, - isActive, - disabled, - InputElement, - errorMessage, - icon, - label, - align, - underline = true, - autoWidth, - placeholder, - layer = 4, - themeType = 'secondary', - } = props; - const [isInitial, setIsInitial] = useState(false); - - // Calculate the color state for the label and underline - const colorStateLabel = calcColorState({ type: 'label', isActive, errorMessage, value, placeholder }); - const colorStateUnderline = calcColorState({ type: 'underline', isActive, errorMessage, value, placeholder }); - - // Set the initial state of the input field - useEffect(() => { - if (isActive) setIsInitial(true); - }, [isActive]); - - // Render the InputWrapper component with the appropriate props - return ( - - {icon && ( - - {icon} - - )} - - {InputElement} - {/* Render the label for the input field if a label prop exists */} - {label && ( - - {label} - - )} - {/* Render the underline for the input field if the underline prop is true */} - {underline && ( - - )} - - {/* Render the error message if an errorMessage prop exists */} - {errorMessage && {errorMessage}} - - ); -} diff --git a/src/Components/Molecules/InputWrapper/index.ts b/src/Components/Molecules/InputWrapper/index.ts deleted file mode 100644 index 7298a6056..000000000 --- a/src/Components/Molecules/InputWrapper/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as InputWrapper } from './InputWrapper'; diff --git a/src/Components/Molecules/MenuList/MenuList.stories.tsx b/src/Components/Molecules/MenuList/MenuList.stories.tsx deleted file mode 100644 index 5144e0961..000000000 --- a/src/Components/Molecules/MenuList/MenuList.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import MenuList from './MenuList'; - -// Define metadata for the story -const meta = { - title: 'components/atoms/MenuList', - component: MenuList, - parameters: { - docs: { - description: { - component: 'Template: The FancyMenueItem is a template for a finished Item it used by the FancyMenuList', - }, - }, - }, - // Define arguments for the story - argTypes: { - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'The layer of the button hover effect', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { - summary: '3', - }, - }, - }, - // 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) => ( - -

Some Content

- {args.children} - - ), - args: {}, -}; diff --git a/src/Components/Molecules/MenuList/MenuList.style.tsx b/src/Components/Molecules/MenuList/MenuList.style.tsx deleted file mode 100644 index 7e0e6b6ad..000000000 --- a/src/Components/Molecules/MenuList/MenuList.style.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { styled } from 'styled-components'; - -import { MenuListProps } from './MenuList'; -import IStyledPrefixAndOmitter from '../../../interface/IStyledPrefixAndOmiter.model'; -import generateThemeForCard from '../../../design/designFunctions/generateThemeForCard/generateThemeForCard'; -import { TTheme } from '@/interface/TTheme'; - -type StyledMenuProps = IStyledPrefixAndOmitter & { theme: TTheme }; - -export const MenuContainer = styled.div` - display: flex; - flex-direction: column; - padding: 8px 0; - ${({ theme, $themeType, $layer, $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/Molecules/MenuList/MenuList.tsx b/src/Components/Molecules/MenuList/MenuList.tsx deleted file mode 100644 index a98fa36bd..000000000 --- a/src/Components/Molecules/MenuList/MenuList.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { MenuContainer } from './MenuList.style'; - -export interface MenuListProps { - children?: React.ReactNode; - themeType?: TThemeTypes; - layer?: TLayer; - outlined?: boolean; -} -// --------------------------------------------------------------------------- // -// ---------------- A simple MenuList that can have any childs --------------- // -// --------------------------------------------------------------------------- // -export default function MenuList(props: MenuListProps) { - const { children, themeType, layer, outlined } = props; - return ( - - {children} - - ); -} diff --git a/src/Components/Molecules/Modal/Modal.stories.tsx b/src/Components/Molecules/Modal/Modal.stories.tsx deleted file mode 100644 index bdcb853dc..000000000 --- a/src/Components/Molecules/Modal/Modal.stories.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import Modal from './Modal'; - -const meta = { - component: Modal, - parameters: { - docs: { - description: { - component: 'Smart-Comonent: A Modal component to show a Dialog with a Backdrop', - }, - }, - }, - argTypes: { - id: { - description: 'The id of the component', - control: { - type: 'text', - }, - }, - isOpen: { - description: 'The status of the component', - control: { - type: 'select', - }, - }, - themeType: { - description: 'The theme type of the component', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the component', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - - onClose: { - description: 'The closeModal of the component', - control: { - type: 'function', - }, - }, - backDrop: { - description: 'Is the backdrop visible', - control: { - type: 'boolean', - }, - }, - isCloseable: { - description: 'The modal is closeable', - control: { - type: 'boolean', - }, - defaultValue: { - summary: true, - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - isOpen: true, - themeType: 'primary', - layer: 0, - id: 'Modal', - onClose: () => { - console.log('closeModal'); - }, - }, -}; diff --git a/src/Components/Molecules/Modal/Modal.style.tsx b/src/Components/Molecules/Modal/Modal.style.tsx deleted file mode 100644 index 3e7ff8f92..000000000 --- a/src/Components/Molecules/Modal/Modal.style.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { styled } from 'styled-components'; - -export const HeadLine = styled.div` - position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; -`; - -export const CloseButtonWrapper = styled.div` - position: absolute; - top: 2px; - right: 0; -`; diff --git a/src/Components/Molecules/Modal/Modal.tsx b/src/Components/Molecules/Modal/Modal.tsx deleted file mode 100644 index bdca5587c..000000000 --- a/src/Components/Molecules/Modal/Modal.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { ReactNode, useEffect, useState } from 'react'; - -import SimpleDialog from '../../atoms/SimpleDialog/SimpleDialog'; -import BackDrop from '../../atoms/BackDrop/BackDrop'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -// --------------------------------------------------------------------------- // -// ------ The main Modal Component to comstomize the Head/Bottomline ------- // -// --------------------------------------------------------------------------- // -export interface IModal { - id?: string; - children?: ReactNode; - isOpen: boolean; - onClose?: (id: string) => void; - isCloseable?: boolean; - backDrop?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function Modal(props: IModal) { - const { id, children, isOpen, onClose, isCloseable, themeType, layer, backDrop = true } = props; - const [modalVisible, setModalVisible] = useState(false); - - // close the modal when the user clicks on the backdrop - const closeModalHanlder = () => { - if (isCloseable === false) return; - //if a components needs controle from outside - if (onClose && id) onClose(id); - setModalVisible(false); - }; - - useEffect(() => { - if (isOpen) setModalVisible(true); - else setModalVisible(false); - }, [isOpen]); - - return ( - <> - - {children} - - {backDrop && } - - ); -} diff --git a/src/Components/Molecules/Modal/index.ts b/src/Components/Molecules/Modal/index.ts deleted file mode 100644 index c6b35681c..000000000 --- a/src/Components/Molecules/Modal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Modal } from './Modal'; diff --git a/src/Components/Molecules/MonthWithDays/IDisableDateSettings.model.ts b/src/Components/Molecules/MonthWithDays/IDisableDateSettings.model.ts deleted file mode 100644 index 1b6152d26..000000000 --- a/src/Components/Molecules/MonthWithDays/IDisableDateSettings.model.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type IWeekDays = 0 | 1 | 2 | 3 | 4 | 5 | 6; - -export interface IDisabledDateSettings { - disablePastDates?: boolean; - disableWeekends?: boolean; - disabledWeekdays?: IWeekDays[]; -} diff --git a/src/Components/Molecules/MonthWithDays/IExternalMonthWithDays.model.ts b/src/Components/Molecules/MonthWithDays/IExternalMonthWithDays.model.ts deleted file mode 100644 index 77387d4ee..000000000 --- a/src/Components/Molecules/MonthWithDays/IExternalMonthWithDays.model.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { IAvailableDot } from '../../atoms/AvilableDot/AvailableDot'; - -export type IDateWithExternalState = { - date: number; - isAvilable: IAvailableDot; -}; - -export interface IExternalMonthWithDays { - monthIdx: number; - dates?: IDateWithExternalState[]; -} - -interface IExternalYearWithMonths { - [key: number]: IExternalMonthWithDays[]; -} - -export default IExternalYearWithMonths; diff --git a/src/Components/Molecules/MonthWithDays/MonthWithDays.stories.tsx b/src/Components/Molecules/MonthWithDays/MonthWithDays.stories.tsx deleted file mode 100644 index 14b68c1bd..000000000 --- a/src/Components/Molecules/MonthWithDays/MonthWithDays.stories.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import MonthWithDays from './MonthWithDays'; - -const meta = { - component: MonthWithDays, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: Generate a month with days, which can be used in a calendar.
', - }, - }, - }, - argTypes: { - themeType: { - description: 'The themeType for the Modal', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer for the Modal', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - monthIdx: { - description: 'The month index', - control: { - type: 'number', - }, - }, - year: { - description: 'The year', - control: { - type: 'number', - }, - }, - selectedDates: { - description: 'The selected dates', - control: { - type: 'object', - }, - }, - isRangePicking: { - description: 'The range picking', - control: { - type: 'boolean', - }, - }, - disabledDateSetting: { - description: 'The disabled date setting', - control: { - type: 'object', - }, - }, - externalMonthWithDays: { - description: 'The external month with days setting', - control: { - type: 'object', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - year: 2021, - monthIdx: 0, - isRangePicking: false, - themeType: 'primary', - layer: 1, - selectedDates: [new Date(2021, 0, 1), undefined], - handleDateClick: () => { - console.log('handleDateClick'); - }, - disabledDateSetting: { - disabledWeekdays: [1, 6], - disableWeekends: true, - disablePastDates: false, - }, - externalMonthWithDays: { - monthIdx: 0, - dates: [ - { - date: 0, - isAvilable: 'partially', - }, - { - date: 5, - isAvilable: 'not', - }, - { - date: 7, - isAvilable: 'transparent', - }, - ], - }, - }, -}; diff --git a/src/Components/Molecules/MonthWithDays/MonthWithDays.style.tsx b/src/Components/Molecules/MonthWithDays/MonthWithDays.style.tsx deleted file mode 100644 index 2adc6ddff..000000000 --- a/src/Components/Molecules/MonthWithDays/MonthWithDays.style.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { styled } from 'styled-components'; - -export const DaysContainer = styled.div` - display: grid; - grid-template-columns: repeat(7, 1fr); -`; - -export const DateNumber = styled.span` - text-align: right; - cursor: pointer; - box-sizing: border-box; -`; diff --git a/src/Components/Molecules/MonthWithDays/MonthWithDays.tsx b/src/Components/Molecules/MonthWithDays/MonthWithDays.tsx deleted file mode 100644 index 27c1e22fc..000000000 --- a/src/Components/Molecules/MonthWithDays/MonthWithDays.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { useEffect, useMemo, useState } from 'react'; - -import DateNumberWithStatus from '../DateNumberWithStatus/DateNumberWithStatus'; -import { DateNumber, DaysContainer } from './MonthWithDays.style'; -import { IDateArray } from '../RangeCalendar/IDateArray.model'; -import { IDisabledDateSettings } from './IDisableDateSettings.model'; -import Typography from '../../atoms/Typography/Typography'; -import Day from './day.model'; -import createDaysOfMonth from './helperFunctions/createDaysOfMonth'; -import { IDateWithExternalState, IExternalMonthWithDays } from './IExternalMonthWithDays.model'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -const getFirstDayOfMonth = (month: number, year: number): number => { - return new Date(year, month - 1, 1).getDay() || 7; -}; - -const getDaysInMonth = (month: number, year: number): number => { - return new Date(year, month, 0).getDate(); -}; - -interface IMonthWithDays { - monthIdx: number; - year: number; - handleDateClick?: (day: Day, monthIdx: number) => void; - isRangePicking?: boolean; - selectedDates: IDateArray; - externalMonthWithDays?: IExternalMonthWithDays; - disabledDateSetting?: IDisabledDateSettings; - themeType?: TThemeTypes; - layer?: TLayer; -} -// --------------------------------------------------------------------------- // -// --------- This Component generates a single month with the dates ---------- // -// --------------------------------------------------------------------------- // -export default function MonthWithDays(props: IMonthWithDays) { - const { monthIdx, year, handleDateClick, selectedDates, isRangePicking, disabledDateSetting, externalMonthWithDays, layer, themeType } = - props; - const [monthDays, setMonthDays] = useState([]); - - // Create the days of the month and memoize them - const month = useMemo(() => { - const month = { - name: new Date(0, monthIdx + 1, 0).toLocaleString('default', { month: 'long' }), - days: createDaysOfMonth({ - monthIdx, - year, - selectedDates, - disabledDateSetting, - isRangePicking, - externalMonthWithDays: monthDays, - }), - }; - return month; - }, [monthIdx, selectedDates, isRangePicking, monthDays, year, disabledDateSetting]); - - useEffect(() => { - if (externalMonthWithDays) { - // create a array for each month of a year and fill it with the external state - const daysOfMonth = Array.from({ length: getDaysInMonth(monthIdx + 1, year) }); - externalMonthWithDays?.dates?.forEach((date) => { - daysOfMonth[date.date] = date; - }); - - setMonthDays(daysOfMonth as IDateWithExternalState[]); - } - }, [externalMonthWithDays, year, monthIdx]); - - return ( -
- - {month.name} - - - {/* Generate the empty spaces for the start of the month */} - {Array.from({ length: getFirstDayOfMonth(monthIdx + 1, year) - 1 }, (_, i) => ( - - ))} - {/* Generate the days of the month */} - {month.days.map((day) => ( - handleDateClick && handleDateClick(day, monthIdx)} - /> - ))} - -
- ); -} diff --git a/src/Components/Molecules/MonthWithDays/day.model.ts b/src/Components/Molecules/MonthWithDays/day.model.ts deleted file mode 100644 index fb91439f6..000000000 --- a/src/Components/Molecules/MonthWithDays/day.model.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { IRange } from '../../atoms/DateNumberAtom/DateNumberAtom'; -import { IAvailableDot } from '../../atoms/AvilableDot/AvailableDot'; - -interface Day { - number: number; - isSelected: boolean; - range: IRange; - disabled: boolean; - isAvilable?: IAvailableDot; -} - -export default Day; diff --git a/src/Components/Molecules/MonthWithDays/helperFunctions/createDayFunction.ts b/src/Components/Molecules/MonthWithDays/helperFunctions/createDayFunction.ts deleted file mode 100644 index 3530df52d..000000000 --- a/src/Components/Molecules/MonthWithDays/helperFunctions/createDayFunction.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { IDisabledDateSettings, IWeekDays } from '../IDisableDateSettings.model'; -import { IDateWithExternalState } from '../IExternalMonthWithDays.model'; -import Day from '../day.model'; -import { IDateArray } from '../../RangeCalendar/IDateArray.model'; - -// 0 - Sunday, 1 - Monday, 2 - Tuesday, 3 - Wednesday, 4 - Thursday, 5 - Friday, 6 - Saturday -// this function disables dates based on the following parameters: -const disableDate = (date: Date, disabledDateSetting?: IDisabledDateSettings): boolean => { - const { disablePastDates = false, disableWeekends = false, disabledWeekdays = [] } = disabledDateSetting || {}; - - const dateDay = date.getDay() as IWeekDays; - - const isWeekend = date.getDay() === 0 || date.getDay() === 6; - const isPast = date.getTime() < Date.now(); - const isDisabledDay = disabledWeekdays?.includes(dateDay); - const disableSpecificDates = - (disablePastDates ? isPast : false) || (disableWeekends ? isWeekend : false) || (disabledWeekdays ? !!isDisabledDay : false); - - return disableSpecificDates; -}; - -// --------------------------------------------------------------------------- // -// ----this function creates a day object based on the following parameters--- // -// --------------------------------------------------------------------------- // -interface ICreateDay { - dayNumber: number; - month: number; - year: number; - isRangePicking?: boolean; - selectedDates: IDateArray; - disabledDateSetting?: IDisabledDateSettings; - externalDate?: IDateWithExternalState; -} -const createDay = (props: ICreateDay): Day => { - const { dayNumber, month, year, selectedDates, disabledDateSetting, isRangePicking, externalDate } = props; - - const date = new Date(year, month, dayNumber); - let isStart, isEnd, isInRange; - - // if isRangePicking is true, pick a date range (start and end date) - if (isRangePicking && Array.isArray(selectedDates)) { - const validRange = selectedDates[0] && selectedDates[1] ? true : false; - const isRangeStart = selectedDates[0] ? true : false; - const isRangeEnd = selectedDates[1] ? true : false; - - isInRange = validRange && selectedDates[0]! <= date && date <= selectedDates[1]!; - isStart = isRangeStart && selectedDates[0]!.getTime() === date.getTime(); - isEnd = isRangeEnd && selectedDates[1]!.getTime() === date.getTime(); - } - - // this function disables the date - const isDateDisabled = disableDate(date, disabledDateSetting); - - return { - number: dayNumber, - disabled: isDateDisabled, - isAvilable: externalDate?.isAvilable, - isSelected: Array.isArray(selectedDates) - ? selectedDates.some((selectedDate) => selectedDate && selectedDate.getTime() === date.getTime()) - : selectedDates.getTime() === date.getTime(), - range: { start: isStart, end: isEnd, inRange: isInRange }, - }; -}; - -export default createDay; diff --git a/src/Components/Molecules/MonthWithDays/helperFunctions/createDaysOfMonth.ts b/src/Components/Molecules/MonthWithDays/helperFunctions/createDaysOfMonth.ts deleted file mode 100644 index 8ed526254..000000000 --- a/src/Components/Molecules/MonthWithDays/helperFunctions/createDaysOfMonth.ts +++ /dev/null @@ -1,40 +0,0 @@ -import createDay from './createDayFunction'; -import Day from '../day.model'; -import { IDateArray } from '../../RangeCalendar/IDateArray.model'; -import { IDisabledDateSettings } from '../IDisableDateSettings.model'; -import { IDateWithExternalState } from '../IExternalMonthWithDays.model'; - -const getDaysInMonth = (month: number, year: number): number => { - return new Date(year, month, 0).getDate(); -}; - -// --------------------------------------------------------------------------- // -// --------- This function creates the days for the specific month ----------- // -// --------------------------------------------------------------------------- // - -interface ICreateDaysOfMonth { - monthIdx: number; - year: number; - selectedDates: IDateArray; - disabledDateSetting?: IDisabledDateSettings; - isRangePicking?: boolean; - externalMonthWithDays?: IDateWithExternalState[]; -} -const createDaysOfMonth = (props: ICreateDaysOfMonth): Day[] => { - const { monthIdx, year, selectedDates, disabledDateSetting, isRangePicking, externalMonthWithDays } = props; - - const MonthDays = Array.from({ length: getDaysInMonth(monthIdx + 1, year) }, (_, j) => - createDay({ - dayNumber: j + 1, - month: monthIdx, - year: year, - selectedDates, - disabledDateSetting, - isRangePicking, - externalDate: externalMonthWithDays![j], - }) - ); - return MonthDays; -}; - -export default createDaysOfMonth; diff --git a/src/Components/Molecules/MonthWithDays/index.ts b/src/Components/Molecules/MonthWithDays/index.ts deleted file mode 100644 index 49e8c2365..000000000 --- a/src/Components/Molecules/MonthWithDays/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as MonthWithDays } from './MonthWithDays'; diff --git a/src/Components/Molecules/NumberInput/NumberInput.stories.tsx b/src/Components/Molecules/NumberInput/NumberInput.stories.tsx deleted file mode 100644 index b3da31aed..000000000 --- a/src/Components/Molecules/NumberInput/NumberInput.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import NumberInput from './NumberInput'; - -const meta = { - component: NumberInput, - parameters: { - docs: { - description: { - component: 'Smart-Comonent: A Modal component to show a Dialog with a Backdrop', - }, - }, - }, - argTypes: { - autoWidth: { - description: 'If true, the width of the input will be automatically adjusted to fit the content.', - type: { name: 'boolean' }, - }, - active: { - description: 'If true, the input will be highlighted.', - type: { name: 'boolean' }, - }, - align: { - description: 'The alignment of the text.', - type: { name: 'string' }, - }, - step: { - description: 'The step to increment or decrement the value.', - type: { name: 'number' }, - }, - activeHandler: { - description: 'A function to handle the active state of the input.', - type: { name: 'function' }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - autoWidth: false, - active: false, - align: 'left', - step: 1, - }, -}; diff --git a/src/Components/Molecules/NumberInput/NumberInput.styled.tsx b/src/Components/Molecules/NumberInput/NumberInput.styled.tsx deleted file mode 100644 index 847902dfb..000000000 --- a/src/Components/Molecules/NumberInput/NumberInput.styled.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { styled } from 'styled-components'; -import RawInput from '../../atoms/RawInput/RawInput'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import { INumberInput } from './NumberInput'; - -type IStyledNumberInput = IStyledPrefixAndPicker; -const StyledNumberInput = styled(RawInput)` - box-sizing: border-box; - border-radius: 0; - width: ${({ $width }) => ($width ? $width : '2ch')}; - background-color: transparent; - border: none; - transition: 0.3s; - transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96); - outline: none; - //the focus animation for the underline - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; - } - // hide the arrows on the input for firefox - -moz-appearance: textfield; -`; - -export default StyledNumberInput; diff --git a/src/Components/Molecules/NumberInput/NumberInput.tsx b/src/Components/Molecules/NumberInput/NumberInput.tsx deleted file mode 100644 index 4373561c9..000000000 --- a/src/Components/Molecules/NumberInput/NumberInput.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, { InputHTMLAttributes, useState, useEffect, KeyboardEvent, ChangeEvent } from 'react'; -import StyledNumberInput from './NumberInput.styled'; -import { TRawInputAlign } from '../../atoms/RawInput/RawInput'; - -export interface INumberInput extends InputHTMLAttributes { - autoWidth?: boolean; - active?: boolean; - align?: TRawInputAlign; - step?: number; - activeHandler?: (value: boolean) => void; -} - -export default function NumberInput(props: INumberInput) { - const { value, onChange, activeHandler, align, id, autoWidth, max, min, step = 1, ...moreHTMLProps } = props; - const [inputValue, setInputValue] = useState(value ? value.toString() : null); - - // Set the initial value - useEffect(() => { - if (value !== undefined) { - setInputValue(value.toString()); - } - }, [value]); - - // Handle the change of the input value - const handleChange = (e: ChangeEvent) => { - const newValue = e.target.value; - // Remove all non-numeric characters - const sanitizedValue = newValue.replace(/[^\d]/g, ''); - updateValue(sanitizedValue, e); - }; - - // Handle the arrow up and down keys to increase or decrease the value - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { - e.preventDefault(); - - const currentValue = Number(inputValue) || 0; - let newValue = e.key === 'ArrowUp' ? currentValue + step : currentValue - step; - - // Round to the number of decimal places in `step` - const numDecimalPlaces = step.toString().split('.')[1]?.length || 0; - newValue = Number(newValue.toFixed(numDecimalPlaces)); - - // Update the fake event object to pass to the onChange handler - const fakeEvent = { - target: { - value: newValue.toString(), - }, - } as ChangeEvent; - - updateValue(newValue.toString(), fakeEvent); - } - }; - - // Update the value and call the onChange handler - const updateValue = (newValue: string, e?: ChangeEvent) => { - let adjustedValue = newValue; - // Check if the value is within the min and max range - if (max !== undefined && Number(newValue) > Number(max)) { - adjustedValue = max.toString(); - } else if (min !== undefined && Number(newValue) < Number(min)) { - adjustedValue = min.toString(); - } - - // Update the state - setInputValue(adjustedValue); - - // Call the onChange handler if provided - if (onChange && e) { - e.target.value = adjustedValue; - onChange(e); - } - }; - - return ( - activeHandler && activeHandler(true)} - onBlur={() => activeHandler && activeHandler(false)} - $width={autoWidth ? (inputValue ? inputValue.length + 1 + 'ch' : '2ch') : '100%'} - $align={align} - {...moreHTMLProps} - /> - ); -} diff --git a/src/Components/Molecules/NumberInput/index.ts b/src/Components/Molecules/NumberInput/index.ts deleted file mode 100644 index 4778444af..000000000 --- a/src/Components/Molecules/NumberInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as NumberInput } from './NumberInput'; diff --git a/src/Components/Molecules/Paginator/Paginator.stories.tsx b/src/Components/Molecules/Paginator/Paginator.stories.tsx deleted file mode 100644 index 267d20b40..000000000 --- a/src/Components/Molecules/Paginator/Paginator.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import Paginator from './Paginator'; - -const meta = { - component: Paginator, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A Paginator component to switch pages', - }, - }, - }, - argTypes: { - currentPage: { - description: 'The current page which is slected.', - type: { name: 'number' }, - defaultValue: { summary: 1 }, - }, - totalPages: { - description: 'The total pages that should counted to.', - type: { name: 'number' }, - }, - themeType: { - description: 'The theme type of the paginator.', - control: { - type: 'select', - }, - defaultValue: { summary: 'accent' }, - }, - outlinedButton: { - description: 'If true, the buttons will be outlined.', - type: { name: 'boolean' }, - defaultValue: { summary: false }, - }, - pageLimits: { - description: 'The limit of the pages Numbers.', - type: { name: 'number' }, - defaultValue: { summary: 3 }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - totalPages: 10, - currentPage: 1, - outlinedButton: false, - pageLimits: 3, - }, -}; diff --git a/src/Components/Molecules/Paginator/Paginator.style.tsx b/src/Components/Molecules/Paginator/Paginator.style.tsx deleted file mode 100644 index 18ee77ca5..000000000 --- a/src/Components/Molecules/Paginator/Paginator.style.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { styled, css } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -// The Paginator Wrapper that wraps the hole components -export const StyledPaginator = styled.div<{ theme: TTheme }>` - display: flex; - justify-content: space-around; - align-items: center; - gap: ${({ theme }) => theme.spacing.xs}; - margin: 0 12px; -`; - -// The Number Wrapper that wraps the buttons for the page numbers -export const NumberList = styled.div` - display: flex; - width: 100%; - justify-content: space-around; - align-items: center; -`; - -// A Icon Wraper that press thes spacing more to the outside (Look more centerd) -interface IIconWrapper { - $align: 'left' | 'right'; - theme: TTheme; -} - -export const IconWrapper = styled.div` - display: flex; - flex-shrink: 0; - aspect-ratio: 1/1; - - ${({ $align, theme }) => - $align === 'right' - ? css` - margin-left: ${parseFloat(theme.spacing.xs) - 1 + 'px'}; - ` - : css` - margin-right: ${parseFloat(theme.spacing.xs) - 1 + 'px'}; - `} -`; diff --git a/src/Components/Molecules/Paginator/Paginator.tsx b/src/Components/Molecules/Paginator/Paginator.tsx deleted file mode 100644 index 73df6b850..000000000 --- a/src/Components/Molecules/Paginator/Paginator.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useMemo } from 'react'; - -import SVGChevronLeft from '../../icons/SVGChevronLeft/SVGChevronLeft'; -import SVGChevronRight from '../../icons/SVGChevronRight/SVGChevronRight'; - -import FancyButton from '../../organisms/FancyButton/FancyButton'; -import { IconWrapper, NumberList, StyledPaginator } from './Paginator.style'; -import PageNumberList from '../../atoms/PageNumberList/PageNumberList'; -import { TThemeTypes } from '@/interface/TUiColors'; - -// Define the props for the Paginator component -interface IPaginator { - currentPage?: number; - totalPages: number; - themeType?: TThemeTypes; - outlinedButton?: boolean; - onPageChange: (page: number) => void; - pageLimits?: number; -} - -// --------------------------------------------------------------------------- // -// ---------------- The Paginator for a List to siwtch pages ----------------- // -// --------------------------------------------------------------------------- // -export default function Paginator(props: IPaginator) { - const { currentPage, totalPages, onPageChange, outlinedButton, themeType, pageLimits } = { ...defaultProps, ...props }; - - // Define a function to handle page changes - const pageHandler = (page: number) => { - onPageChange(page); - }; - - // Memoize the PageNumberList component to avoid unnecessary re-renders - const PageList = useMemo( - () => PageNumberList({ totalPages, currentPage, onClick: pageHandler, pageLimits }), - // eslint-disable-next-line react-hooks/exhaustive-deps - [totalPages, currentPage, onPageChange, pageLimits] - ); - - // Render the Paginator component with the appropriate props - return ( - - {/* The left button for the Page Switch */} - {SVGChevronLeft}} - onClick={() => onPageChange(currentPage - 1)} - disabled={currentPage === 1} - /> - {/* The numberlist */} - {PageList} - {/* The right button for the Page Switch */} - {SVGChevronRight}} - size="md" - onClick={() => onPageChange(currentPage + 1)} - disabled={currentPage === totalPages} - /> - - ); -} - -// Define the default props for the Paginator component -const defaultProps = { - currentPage: 1 as number, - totalPages: 1, -}; diff --git a/src/Components/Molecules/Paginator/index.ts b/src/Components/Molecules/Paginator/index.ts deleted file mode 100644 index 756b0c61c..000000000 --- a/src/Components/Molecules/Paginator/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Paginator } from './Paginator'; diff --git a/src/Components/Molecules/PasswordInput/PasswordInput.stories.tsx b/src/Components/Molecules/PasswordInput/PasswordInput.stories.tsx deleted file mode 100644 index 740dde614..000000000 --- a/src/Components/Molecules/PasswordInput/PasswordInput.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import PasswordInput from './PasswordInput'; - -const meta = { - component: PasswordInput, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A PasswordInput component to input password', - }, - }, - }, - argTypes: { - value: { - description: 'The value of the input.', - type: { name: 'string' }, - }, - align: { - description: 'The align of the input.', - control: { - type: 'radio', - }, - defaultValue: { summary: 'left' }, - }, - activeHandler: { - description: 'The handler gives back is the input activ or not.', - }, - themeType: { - description: 'The theme type of the input.', - control: { - type: 'select', - }, - defaultValue: { summary: 'accent' }, - }, - layer: { - description: 'The layer of the input.', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { summary: 4 }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - value: '', - align: 'left', - themeType: 'secondary', - layer: 4, - }, -}; diff --git a/src/Components/Molecules/PasswordInput/PasswordInput.tsx b/src/Components/Molecules/PasswordInput/PasswordInput.tsx deleted file mode 100644 index 8624eb731..000000000 --- a/src/Components/Molecules/PasswordInput/PasswordInput.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React, { InputHTMLAttributes, useState } from 'react'; -import { styled } from 'styled-components'; - -import RawInput, { TRawInputAlign } from '../../atoms/RawInput/RawInput'; -import PasswordEye from '../../atoms/PasswordEye/PasswordEye'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -const WrapperEye = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - position: absolute; - bottom: 6px; - right: 4px; - - svg { - color: ${({ theme, $themeType = 'secondary', $layer = 4 }) => getBackgroundColor({ theme, $themeType, $layer })}; - } -`; - -export interface IPasswordInputProps extends Omit, 'type'> { - value?: string; - align?: TRawInputAlign; - activeHandler?: (value: boolean) => void; - themeType?: TThemeTypes; - layer?: TLayer; -} -// --------------------------------------------------------------------------- // -// --------------- The passwordInputcomponent for only the input ------------- // -// --------------------------------------------------------------------------- // -export default function PasswordInput(props: IPasswordInputProps) { - const { value, onChange, activeHandler, align, themeType, layer, ...HTMLInputProps } = props; - const [isShowPassword, setIsShowPassword] = useState(false); - - // this handler is for the eye icon to show the password - const showPasswordHandler = () => { - setIsShowPassword(!isShowPassword); - }; - - return ( - <> - - - - activeHandler && activeHandler(true)} - onBlur={() => activeHandler && activeHandler(false)} - $align={align} - {...HTMLInputProps} - /> - - ); -} diff --git a/src/Components/Molecules/PasswordInput/index.ts b/src/Components/Molecules/PasswordInput/index.ts deleted file mode 100644 index f117efa1b..000000000 --- a/src/Components/Molecules/PasswordInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as PasswordInput } from './PasswordInput'; diff --git a/src/Components/Molecules/RangeCalendar/IDateArray.model.ts b/src/Components/Molecules/RangeCalendar/IDateArray.model.ts deleted file mode 100644 index 4fb8c7809..000000000 --- a/src/Components/Molecules/RangeCalendar/IDateArray.model.ts +++ /dev/null @@ -1,2 +0,0 @@ -export type IDateArray = [Date | undefined, Date | undefined] | Date; -export type IDateOnlyArray = [Date | undefined, Date | undefined]; diff --git a/src/Components/Molecules/RangeCalendar/RangeCalendar.stories.tsx b/src/Components/Molecules/RangeCalendar/RangeCalendar.stories.tsx deleted file mode 100644 index 142ead3c8..000000000 --- a/src/Components/Molecules/RangeCalendar/RangeCalendar.stories.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import RangeCalendar from './RangeCalendar'; - -const meta = { - component: RangeCalendar, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A RangeCalendar component to select a date range. or a single date.', - }, - }, - }, - argTypes: { - selectedYear: { - description: 'The selected year.', - type: { name: 'number' }, - defaultValue: { summary: 'currentYear' }, - }, - rangeCalendar: { - description: 'If the Calendar a Rangepicker or SingelDate.', - type: { name: 'boolean' }, - defaultValue: { summary: false }, - }, - handler: { - description: 'The handler gives back the selected date.', - }, - selectFromTo: { - description: 'If the Calendar a Rangepicker that you can select set wich date is currently selected the from - to.', - control: { - type: 'radio', - }, - defaultValue: { summary: 'from' }, - }, - themeType: { - description: 'The theme type of the input.', - control: { - type: 'select', - }, - defaultValue: { summary: 'secondary' }, - }, - layer: { - description: 'The layer of the input.', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { summary: 4 }, - }, - externalMonthsWithDays: { - description: 'The external months with days.', - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - selectedYear: new Date().getFullYear(), - rangeCalendar: false, - selectFromTo: 'from', - themeType: 'secondary', - externalMonthsWithDays: [ - { - monthIdx: 0, - dates: [ - { - date: 1, - isAvilable: 'partially', - }, - { - date: 2, - isAvilable: 'not', - }, - { - date: 3, - isAvilable: 'transparent', - }, - ], - }, - { - monthIdx: 11, - dates: [ - { - date: 5, - isAvilable: 'partially', - }, - { - date: 7, - isAvilable: 'not', - }, - { - date: 2, - isAvilable: 'transparent', - }, - ], - }, - ], - disabledDateSetting: { - disabledWeekdays: [1, 6], - disableWeekends: true, - disablePastDates: false, - }, - }, -}; diff --git a/src/Components/Molecules/RangeCalendar/RangeCalendar.style.tsx b/src/Components/Molecules/RangeCalendar/RangeCalendar.style.tsx deleted file mode 100644 index 0b3811fde..000000000 --- a/src/Components/Molecules/RangeCalendar/RangeCalendar.style.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { styled } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -export const MonthContainer = styled.div<{ theme: TTheme }>` - margin-top: ${({ theme }) => theme.spacing.md}; - - h2 { - margin: ${({ theme }) => theme.spacing.sm}; - margin-left: ${({ theme }) => theme.spacing.sm}; - } -`; - -export const StyledCalendar = styled.div` - width: 100%; - height: 300px; - overflow-y: auto; - &::-webkit-scrollbar { - display: none; - -ms-overflow-style: none; - scrollbar-width: none; - } -`; - -export const DateContainer = styled.div` - display: grid; - grid-template-columns: repeat(7, 1fr); -`; - -// this span is for the empty days -export const DateNumber = styled.span` - width: 14.28%; /* 100 / 7 days */ - text-align: right; - cursor: pointer; - box-sizing: border-box; -`; diff --git a/src/Components/Molecules/RangeCalendar/RangeCalendar.tsx b/src/Components/Molecules/RangeCalendar/RangeCalendar.tsx deleted file mode 100644 index cd3968fe3..000000000 --- a/src/Components/Molecules/RangeCalendar/RangeCalendar.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React, { useEffect, useState, useRef } from 'react'; -import { MonthContainer, StyledCalendar } from './RangeCalendar.style'; - -import MonthWithDays from '../MonthWithDays/MonthWithDays'; -import useSelectedDates from './helperFunctions/useSelectedDates'; -import useVisibleMonths from './helperFunctions/useVisibleMonths'; - -import { IDisabledDateSettings } from '../MonthWithDays/IDisableDateSettings.model'; -import { IExternalMonthWithDays } from '../MonthWithDays/IExternalMonthWithDays.model'; -import { IDateArray } from './IDateArray.model'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -// --------------------------------------------------------------------------- // -// -------- The main calenader wich can select a date, or date range ---------- // -// --------------------------------------------------------------------------- // -interface ICalendar { - selectedYear?: number; - rangeCalendar: boolean; - handler?: (date: IDateArray) => void; - selectFromTo?: 'from' | 'to' | undefined; - handleSwitchFromTo?: (change: 'from' | 'to') => void; - disabledDateSetting?: IDisabledDateSettings; - externalMonthsWithDays?: IExternalMonthWithDays[]; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function RangeCalendar(props: ICalendar) { - const { - selectedYear = new Date().getFullYear(), - handler, - selectFromTo, - handleSwitchFromTo, - disabledDateSetting, - externalMonthsWithDays, - rangeCalendar = false, - themeType, - layer, - } = props; - const monthRefs = useRef<(HTMLDivElement | null)[]>([]); - const [isScrolled, setIsScrolled] = useState(false); - const [externalMonthsData, setExternalMonthsData] = useState([]); - // hooks for selected dates and visible months - const { visibleMonths, firstMonthRef, lastMonthRef } = useVisibleMonths(isScrolled); - const { selectedDates, handleDateClick } = useSelectedDates(selectedYear, selectFromTo, handleSwitchFromTo, handler, rangeCalendar); - - // Scroll to current month on mount and set isScrolled to true - useEffect(() => { - const currentMonth = new Date().getMonth(); - monthRefs.current[currentMonth]?.scrollIntoView(); - setTimeout(() => { - setIsScrolled(true); - }, 300); - }, []); - - useEffect(() => { - // compare the year of the external state with the selected year - if (externalMonthsWithDays) { - // create a array for each month of a year and fill it with the external state - const monthsOfYearExternal = new Array(12).fill({}); - externalMonthsWithDays.forEach((month) => { - monthsOfYearExternal[month.monthIdx] = month; - }); - setExternalMonthsData(monthsOfYearExternal); - } else { - setExternalMonthsData([]); - } - }, [selectedYear, externalMonthsWithDays]); - - return ( - - {visibleMonths.map((MonthIdx, idx) => { - return ( - { - monthRefs.current[MonthIdx] = ref; - if (idx === 0) { - firstMonthRef.current = ref; - } - if (idx === visibleMonths.length - 1) { - lastMonthRef.current = ref; - } - }} - > - - - ); - })} - - ); -} - -RangeCalendar.defaultProps = { - rangeCalendar: false, -}; diff --git a/src/Components/Molecules/RangeCalendar/helperFunctions/selectDayFunction.ts b/src/Components/Molecules/RangeCalendar/helperFunctions/selectDayFunction.ts deleted file mode 100644 index 53752cc2d..000000000 --- a/src/Components/Molecules/RangeCalendar/helperFunctions/selectDayFunction.ts +++ /dev/null @@ -1,64 +0,0 @@ -import Day from '../../MonthWithDays/day.model'; - -import { IDateOnlyArray } from '../IDateArray.model'; -type DateArray = Date[] | (Date | undefined)[]; - -const checkForValidDatesEnterd = (dates: DateArray) => { - return dates[0] && dates[1] ? true : false; -}; - -const checkDateIsSame = (dates: Date[]) => { - // Check if date is the same - return dates[0].getTime() === dates[1].getTime(); -}; - -interface ISelectDayFunction { - day: Day; - monthIndex: number; - selectedYear: number; - selectedDates: IDateOnlyArray; - selectFromTo: 'from' | 'to' | undefined; -} - -// inputs: selectFromTo -const selectDayFunction = (props: ISelectDayFunction) => { - const { day, monthIndex, selectedYear, selectedDates, selectFromTo } = props; - - // create day with the selected date - const newDate = new Date(selectedYear, monthIndex, day.number); - let newSelectedDates: DateArray = [...selectedDates]; - - // When no dates are selected or when "from" date is selected - if (selectFromTo === 'from' || selectFromTo === undefined) { - newSelectedDates = [newDate, selectedDates[1]]; - - if (newSelectedDates[1] && newDate > newSelectedDates[1]) { - newSelectedDates[1] = undefined; // Swap dates if "from" date is later than "to" date - } - - //handleSwitchFromTo && handleSwitchFromTo('to'); - } else if (selectFromTo === 'to') { - newSelectedDates = [selectedDates[0], newDate]; - - if (newSelectedDates[0] && newDate < newSelectedDates[0]) { - newSelectedDates[0] = undefined; // Swap dates if "to" date is earlier than "from" date - } - } - - //When Valid dates are entered - if (checkForValidDatesEnterd(newSelectedDates)) { - if (checkDateIsSame(newSelectedDates as Date[])) { - const identifySecondAsDate = newSelectedDates[1] as Date; - identifySecondAsDate.setDate(identifySecondAsDate.getDate() + 1); - newSelectedDates = [newSelectedDates[0], identifySecondAsDate]; - } - // else if when selection 1 is after selection 2 then set selection 2 to undefined - else if (newSelectedDates[0]!.getTime() > newSelectedDates[1]!.getTime()) { - newSelectedDates[1] = undefined; - } - } - - return newSelectedDates as IDateOnlyArray; -}; - -export default selectDayFunction; diff --git a/src/Components/Molecules/RangeCalendar/helperFunctions/useSelectedDates.ts b/src/Components/Molecules/RangeCalendar/helperFunctions/useSelectedDates.ts deleted file mode 100644 index 6061ce913..000000000 --- a/src/Components/Molecules/RangeCalendar/helperFunctions/useSelectedDates.ts +++ /dev/null @@ -1,37 +0,0 @@ -// useSelectedDates.ts -import { useState, useCallback } from 'react'; -import Day from '../../MonthWithDays/day.model'; -import selectDayFunction from './selectDayFunction'; -import { IDateArray, IDateOnlyArray } from '../IDateArray.model'; - -// the hook for handle the selected dates -export default function useSelectedDates( - selectedYear: number, - selectFromTo: 'from' | 'to' | undefined, - handleSwitchFromTo: ((change: 'from' | 'to') => void) | undefined, - handler: ((date: IDateArray) => void) | undefined, - rangeCalendar: boolean -) { - const [selectedDates, setSelectedDates] = useState([undefined, undefined]); - const handleDateClick = useCallback( - (day: Day, monthIndex: number) => { - // when a range is slected you can select two dates - if (rangeCalendar) { - const pickedDays = selectedDates as IDateOnlyArray; - const selectedDays = selectDayFunction({ day, monthIndex, selectedDates: pickedDays, selectedYear, selectFromTo }); - if (selectFromTo === 'from') handleSwitchFromTo && handleSwitchFromTo('to'); - if (selectFromTo === 'to') handleSwitchFromTo && handleSwitchFromTo('from'); - setSelectedDates(selectedDays); - handler && handler(selectedDays); - // when a single date is selected - } else { - const newDate = new Date(selectedYear, monthIndex, day.number); - setSelectedDates(newDate); - handler && handler(newDate); - } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [selectedDates, selectedYear, selectFromTo] - ); - return { selectedDates, handleDateClick }; -} diff --git a/src/Components/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts b/src/Components/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts deleted file mode 100644 index d136f8c2f..000000000 --- a/src/Components/Molecules/RangeCalendar/helperFunctions/useVisibleMonths.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { useState, useEffect } from 'react'; -import useIntersectionObserver from '../../../utils/hooks/useIntersectionObserver/useIntersectionObserver'; - -// the hook for handle the visible months and add the next and previous months -export default function useVisibleMonths(isScrolled: boolean) { - const [lastMonthRef, isInView] = useIntersectionObserver(); - const [firstMonthRef, isFirstInView] = useIntersectionObserver(); - - // calulate the visible months based on the current month - const [visibleMonths, setVisibleMonths] = useState(() => { - const currentMonth = new Date().getMonth(); - const startMonth = Math.max(currentMonth - 2, 0); - const endMonth = Math.min(currentMonth + 2, 11); - return Array.from({ length: endMonth - startMonth + 1 }, (_, i) => i + startMonth); - }); - - // When the last visible month enters the viewport, add the next two months - useEffect(() => { - if (isInView) { - setVisibleMonths((prevMonths) => { - const nextMonth1 = prevMonths[prevMonths.length - 1] + 1; - const nextMonth2 = prevMonths[prevMonths.length - 1] + 2; - if (nextMonth1 < 12) prevMonths.push(nextMonth1); - if (nextMonth2 < 12) prevMonths.push(nextMonth2); - return [...prevMonths]; - }); - } - }, [isInView]); - - // When the first visible month enters the viewport, add the previous two months - useEffect(() => { - if (isFirstInView && isScrolled) { - setVisibleMonths((prevMonths) => { - const prevMonth1 = prevMonths[0] - 1; - const prevMonth2 = prevMonths[0] - 2; - if (prevMonth1 >= 0) prevMonths.unshift(prevMonth1); - if (prevMonth2 >= 0) prevMonths.unshift(prevMonth2); - return [...prevMonths]; - }); - } - }, [isFirstInView, isScrolled]); - - return { visibleMonths, firstMonthRef, lastMonthRef }; -} diff --git a/src/Components/Molecules/RangeCalendar/index.ts b/src/Components/Molecules/RangeCalendar/index.ts deleted file mode 100644 index 006645fdd..000000000 --- a/src/Components/Molecules/RangeCalendar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RangeCalendar } from './RangeCalendar'; diff --git a/src/Components/Molecules/ScalingSection/ScalingSection.stories.tsx b/src/Components/Molecules/ScalingSection/ScalingSection.stories.tsx deleted file mode 100644 index cf430c31b..000000000 --- a/src/Components/Molecules/ScalingSection/ScalingSection.stories.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import ScalingSection from './ScalingSection'; - -const meta = { - component: ScalingSection, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: This is the top of a swipeupmodal that is used to control the swipe up modal.', - }, - }, - }, - argTypes: { - touchStart: { - description: 'A function to handle the touchStart event.', - type: { name: 'function' }, - }, - touchMove: { - description: 'A function to handle the touchMove event.', - type: { name: 'function' }, - }, - touchEnd: { - description: 'A function to handle the touchEnd event.', - type: { name: 'function' }, - }, - click: { - description: 'A function to handle the click event.', - type: { name: 'function' }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: {}, -}; diff --git a/src/Components/Molecules/ScalingSection/ScalingSection.tsx b/src/Components/Molecules/ScalingSection/ScalingSection.tsx deleted file mode 100644 index 9170b4b2f..000000000 --- a/src/Components/Molecules/ScalingSection/ScalingSection.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { styled } from 'styled-components'; -import SwipeUpDash from '../../atoms/SwipeUpDash/SwipeUpDash'; - -const SytledScalingSection = styled.div` - position: sticky; - height: 30px; - top: 0; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - z-index: 100; -`; - -// --------------------------------------------------------------------------- // -//the ScalingSection is for conroling events on the swipe up dash for better UX // -// --------------------------------------------------------------------------- // -interface IScalingSection { - touchStart?: (e: React.TouchEvent) => void; - touchMove: (e: React.TouchEvent) => void; - touchEnd: (e: React.TouchEvent) => void; - click: (e: React.MouseEvent) => void; -} -export default function ScalingSection({ touchStart, touchMove, touchEnd, click }: IScalingSection) { - return ( - - - - ); -} diff --git a/src/Components/Molecules/ScalingSection/index.ts b/src/Components/Molecules/ScalingSection/index.ts deleted file mode 100644 index 38e2d3229..000000000 --- a/src/Components/Molecules/ScalingSection/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ScalingSection } from './ScalingSection'; diff --git a/src/Components/Molecules/SearchBar/SearchBar.stories.tsx b/src/Components/Molecules/SearchBar/SearchBar.stories.tsx deleted file mode 100644 index 7a2de759f..000000000 --- a/src/Components/Molecules/SearchBar/SearchBar.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import SearchBar from './SearchBar'; - -const meta = { - component: SearchBar, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The Searchbar for the header.', - }, - }, - }, - argTypes: { - searchValue: { - description: 'The value of the search bar.', - type: { name: 'string' }, - }, - align: { - description: 'The alignment of the text.', - control: { - type: 'select', - }, - defaultValue: { - summary: 'center', - }, - }, - themeType: { - description: 'The theme type of the search bar.', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'The layer of the search bar.', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 4, - }, - }, - placerholder: { - description: 'The placeholder of the search bar.', - type: { name: 'string' }, - defaultValue: { - summary: 'Search', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - searchValue: '', - }, -}; diff --git a/src/Components/Molecules/SearchBar/SearchBar.tsx b/src/Components/Molecules/SearchBar/SearchBar.tsx deleted file mode 100644 index d234bdf51..000000000 --- a/src/Components/Molecules/SearchBar/SearchBar.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React, { ChangeEvent, useState } from 'react'; -import { styled, css } from 'styled-components'; -import FancyTextInput from '../../organisms/FancyTextInput/FancyTextInput'; - -import SVGSearch from '../../icons/SVGSearch/SVGSearch'; -import FancySVGAtom from '../../atoms/FancySVGAtom/FancySVGAtom'; -import { TRawInputAlign } from '../../atoms/RawInput/RawInput'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; - -// Styled component for the search bar -const StyledSearchBar = styled.div<{ $isActive?: boolean; theme: TTheme }>` - display: flex; - align-items: center; - border-radius: ${({ $isActive, theme }) => - $isActive - ? `${theme.borderRadius.lg} ${theme.borderRadius.lg} 0px 0px` - : theme.borderRadius.lg}; // Set the border radius based on whether the search bar list is active - gap: ${({ theme }) => theme.spacing.sm}; - z-index: 1; - - input { - padding: 0 0 4px; - } -`; - -// Props for the SearchBar component -interface ISearchBar { - searchValue?: string; - align?: TRawInputAlign; - activeHandler?: (isActive: boolean) => void; - handler?: (value: string) => void; - themeType?: TThemeTypes; - layer?: TLayer; - placerholder?: string; -} -// The SearchBar component -export default function SearchBar(props: ISearchBar) { - const { activeHandler, handler, searchValue, align, themeType, layer } = { ...defaultProps, ...props }; - const [isActive, setIsActive] = useState(false); // The state for the isActive state of the search bar - // Function to handle changes to the isActive state - const focusHandler = (isFocused: boolean) => { - activeHandler && activeHandler(isFocused); - setIsActive(isFocused); - }; - - // Function to handle changes to the search value - const onChangeValueHandler = (e?: ChangeEvent) => { - handler && handler(e!.target.value); - }; - - return ( - - {/* The search icon */} - - {SVGSearch} - - {/* The search input */} - - - ); -} - -const defaultProps = { - align: 'center', -}; diff --git a/src/Components/Molecules/SearchBar/index.ts b/src/Components/Molecules/SearchBar/index.ts deleted file mode 100644 index 8580b56b7..000000000 --- a/src/Components/Molecules/SearchBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SearchBar } from './SearchBar'; diff --git a/src/Components/Molecules/SearchBarList/SearchBarList.stories.tsx b/src/Components/Molecules/SearchBarList/SearchBarList.stories.tsx deleted file mode 100644 index cdc8868a4..000000000 --- a/src/Components/Molecules/SearchBarList/SearchBarList.stories.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import SearchBarList from './SearchBarList'; - -const meta = { - component: SearchBarList, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A SearchBarList component to display a list of items as children', - }, - }, - }, - argTypes: { - isActive: { - description: 'If true, the list will be displayed.', - type: { name: 'boolean' }, - defaultValue: { - summary: false, - }, - }, - themeType: { - description: 'The theme type of the search bar list.', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the search bar list.', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - isActive: true, - }, -}; diff --git a/src/Components/Molecules/SearchBarList/SearchBarList.style.tsx b/src/Components/Molecules/SearchBarList/SearchBarList.style.tsx deleted file mode 100644 index 2127f4292..000000000 --- a/src/Components/Molecules/SearchBarList/SearchBarList.style.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import styled from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -// Styled component for the search bar list -export const StyledSearchBarList = styled.div<{ theme: TTheme }>` - border-radius: ${({ theme }) => theme.borderRadius.xl}; - z-index: 100; -`; - -// Styled component for the inner card of the search bar list -export const InnerCard = styled.div` - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - box-sizing: border-box; - align-items: center; - justify-content: center; -`; diff --git a/src/Components/Molecules/SearchBarList/SearchBarList.tsx b/src/Components/Molecules/SearchBarList/SearchBarList.tsx deleted file mode 100644 index 98525afd6..000000000 --- a/src/Components/Molecules/SearchBarList/SearchBarList.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import FancyCard from '../../atoms/FancyCard/FancyCard'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { InnerCard, StyledSearchBarList } from './SearchBarList.style'; - -// Props for the SearchBarList component -interface ISearchBarList { - isActive?: boolean; - children?: React.ReactNode; - themeType?: TThemeTypes; - layer?: TLayer; -} -// The SearchBarList component -export default function SearchBarList(props: ISearchBarList) { - const { isActive, children, themeType, layer } = props; - - return ( - - {/* If the search bar list is active, display the list */} - {isActive && ( - - - {/* If there are items to display, display them */} - {children &&
{children}
} - - - )} - - ); -} diff --git a/src/Components/Molecules/SearchBarList/index.ts b/src/Components/Molecules/SearchBarList/index.ts deleted file mode 100644 index 138a56344..000000000 --- a/src/Components/Molecules/SearchBarList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SearchBarList } from './SearchBarList'; diff --git a/src/Components/Molecules/SingleInputs/SingleInputs.stories.tsx b/src/Components/Molecules/SingleInputs/SingleInputs.stories.tsx deleted file mode 100644 index 34e6e39e8..000000000 --- a/src/Components/Molecules/SingleInputs/SingleInputs.stories.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import SingleInputs from './SingleInputs'; - -const meta = { - component: SingleInputs, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The Singele input component is for single input like a verification code.', - }, - }, - }, - - argTypes: { - length: { - description: 'How many inputs are Displayed / how long is the verification code.', - control: { - type: 'number', - }, - defaultValue: { - summary: 6, - }, - }, - automaticCase: { - description: 'If the input should be upper or lower case', - control: { - type: 'select', - options: ['upper', 'lower', undefined], - }, - defaultValue: { - summary: undefined, - }, - }, - status: { - description: 'The status of the input', - control: { - type: 'object', - }, - defaultValue: { - summary: `isError: false, - isSucceed: false,`, - }, - }, - themeType: { - description: 'The theme type of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'The layer of the input', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: '0', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - length: 6, - status: { - isError: false, - isSucceed: false, - }, - }, -}; diff --git a/src/Components/Molecules/SingleInputs/SingleInputs.style.tsx b/src/Components/Molecules/SingleInputs/SingleInputs.style.tsx deleted file mode 100644 index 32d74dbed..000000000 --- a/src/Components/Molecules/SingleInputs/SingleInputs.style.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { styled } from 'styled-components'; - -import IStatus from '../../../interface/IStatus'; -import { TTheme } from '@/interface/TTheme'; - -interface IInputWrapper { - $status?: Omit; - theme: TTheme; -} -export const InputWrapper = styled.div` - display: flex; - flex-wrap: wrap; - justify-content: center; - width: 100%; - gap: ${({ theme }) => theme.spacing.md}; - - input { - ${({ $status, theme }) => - $status?.isError ? `border-color: ${theme.colors.error[0]}` : $status?.isSucceed ? `border-color: ${theme.colors.success[0]};` : ''}; - transition: border-color 0.3s ease-in-out; - } -`; diff --git a/src/Components/Molecules/SingleInputs/SingleInputs.tsx b/src/Components/Molecules/SingleInputs/SingleInputs.tsx deleted file mode 100644 index 97ce9d064..000000000 --- a/src/Components/Molecules/SingleInputs/SingleInputs.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React, { useState, createRef, useEffect } from 'react'; - -import SingleInputAtom from '../../atoms/SingleInputAtom/SingleInputAtom'; -import IStatus from '../../../interface/IStatus'; -import { InputWrapper } from './SingleInputs.style'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -interface IFancySingleInputsProps { - length?: number; - handler?: (value: string) => void; - status?: Pick; - automaticCase?: 'upper' | 'lower'; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function SingleInputs(props: IFancySingleInputsProps) { - const { length = 6, handler, status, automaticCase, themeType, layer } = props; - - const [values, setValues] = useState(Array(length).fill('')); - const refs = Array.from({ length }, () => createRef()); - - //when the values are filled, call the handler - useEffect(() => { - if (values.every((value) => value !== '')) { - handler && handler(values.join('')); - } - }, [values, handler]); - - // this function is to handle the paste event - const processClipboardData = (paste: string) => { - const newValues = paste.split('').slice(0, length); - - setValues((prev) => { - const copy = [...prev]; - for (let i = 0; i < newValues.length; i++) { - copy[i] = newValues[i]; - } - return copy; - }); - }; - - const handlePaste = (event: React.ClipboardEvent) => { - event.preventDefault(); - const paste = event.clipboardData.getData('text'); - processClipboardData(paste); - (event.target as HTMLInputElement).blur(); - }; - - // this function is to handle the character keys - const handleCharacterInput = (event: React.KeyboardEvent, index: number) => { - event.preventDefault(); - - // if the automatic case is upper, change the character to upper case - if (automaticCase === 'upper') { - event.key = event.key.toUpperCase(); - } - if (automaticCase === 'lower') { - event.key = event.key.toLowerCase(); - } - - setValues((prev) => { - const copy = [...prev]; - copy[index] = event.key; - return copy; - }); - - // if the next input exists, focus it - if (refs[index + 1]) { - moveRightToTheNextInputRef(index); - } else { - // if there is no next input, blur the current input - event.currentTarget.blur(); - } - }; - - // this function is to handle the backspace key - const handleBackspaceKey = (index: number) => { - if (values[index] === '') { - moveLeftToTheNextInputRef(index); - } else { - setValues((prev) => { - const copy = [...prev]; - copy[index] = ''; - return copy; - }); - } - }; - - // this function is to jump to the next input - const moveRightToTheNextInputRef = (index: number) => { - // if the next input exists, focus it - if (refs[index + 1]) { - refs[index + 1].current?.focus(); - } - }; - - // this function is to jumpback to the previous input - const moveLeftToTheNextInputRef = (index: number) => { - // if the previous input exists, focus it - if (refs[index - 1]) { - refs[index - 1].current?.focus(); - } - }; - - const handleKeyDownPaste = async () => { - const clipText = await navigator.clipboard.readText(); - moveRightToTheNextInputRef(clipText.length); - processClipboardData(clipText); - }; - - const handleKeyDown = (event: React.KeyboardEvent, index: number) => { - if (event.key === 'v' && (event.ctrlKey || event.metaKey)) { - void handleKeyDownPaste(); - event.currentTarget.blur(); - } - // Handle character keys - else if (event.key.length === 1) { - handleCharacterInput(event, index); - } - // Handle backspace key - else if (event.key === 'Backspace') { - handleBackspaceKey(index); - } - // Handle arrow keys - else if (event.key === 'ArrowRight') { - moveRightToTheNextInputRef(index); - } else if (event.key === 'ArrowLeft') { - moveLeftToTheNextInputRef(index); - } - }; - - return ( - - {values.map((value, index) => ( - handleKeyDown(e, index)} - themeType={themeType} - layer={layer} - /> - ))} - - ); -} diff --git a/src/Components/Molecules/SingleInputs/index.ts b/src/Components/Molecules/SingleInputs/index.ts deleted file mode 100644 index 05ea385d0..000000000 --- a/src/Components/Molecules/SingleInputs/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SingleInputs } from './SingleInputs'; diff --git a/src/Components/Molecules/SingleToastMessage/IToastMessage.model.tsx b/src/Components/Molecules/SingleToastMessage/IToastMessage.model.tsx deleted file mode 100644 index 6de198d49..000000000 --- a/src/Components/Molecules/SingleToastMessage/IToastMessage.model.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { TSystemMessageProps } from '../../../interface/TSystemMessageProps'; -import { TLayer } from '@/interface/TLayer'; - -type IToastMessage = { - id: number; - title: string; - message: string; - time?: number; - themeType: TSystemMessageProps; - layer?: TLayer; -}; - -export default IToastMessage; diff --git a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.mdx b/src/Components/Molecules/SingleToastMessage/SingleToastMessage.mdx deleted file mode 100644 index 520a55f66..000000000 --- a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.mdx +++ /dev/null @@ -1,58 +0,0 @@ -## SingleToastMessage Documentation - -### Overview - -`SingleToastMessage` is a React component tailored to display individual toast notifications with style and interactivity. It handles various message types such as success, warning, error, and information. Each toast is equipped with a headline, a message body, a customizable timer line indicating its duration, and a close button for users to dismiss the toast manually. - -### Component Props - -The component accepts the following properties: - -- **toast**: This is the main object that contains all the data required for the toast. It follows the `IToastMessage` type, which encompasses: - - - `id`: A unique identifier for the toast. - - `title`: The headline or main point of the toast. - - `message`: Detailed message or information. - - `time`: Optional. The duration the toast will be displayed (in milliseconds). - - `themeType`: Determines the style of the toast based on its type. Accepts values 'success', 'warning', 'error', or 'info'. - - `layer`: Optional. Sets the depth or layer of the toast's appearance. - -- **remove**: A function to be called to dismiss the toast. It takes the toast's `id` as an argument. - -### Component Behavior - -On mounting, the `SingleToastMessage` component starts a timer based on the `time` prop its only for displaying the countdown. However, users also have the flexibility to manually dismiss the toast using the `FancyXButton`. - -### Styling - -Different message types (`themeType`) influence the toast's appearance, ensuring users can quickly distinguish the notification's nature. For instance, an 'error' might display in red, while 'success' might show in green. The `$messageType` and `$time` props are also leveraged for stylized components like `Container` and `TimerLine`. - -### Example Usage - -```React -import SingleToastMessage from './SingleToastMessage'; - -const MyToastComponent = () => { - const handleRemove = (id: number) => { - console.log(`Toast with ID: ${id} removed.`); - // Further logic to handle removal, e.g., update state - }; - - const sampleToast: IToastMessage = { - id: 1, - title: "Success!", - message: "Data has been saved successfully.", - time: 3000, - themeType: "success", - layer: 5 - }; - - return ; -}; - -export default MyToastComponent; -``` - -### Conclusion - -The `SingleToastMessage` component offers a sleek and user-friendly way to relay notifications to users. With automated dismissal and manual override capabilities, it ensures a smooth user experience while effectively conveying important messages. diff --git a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.stories.tsx b/src/Components/Molecules/SingleToastMessage/SingleToastMessage.stories.tsx deleted file mode 100644 index 13399b650..000000000 --- a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.stories.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import SingleToastMessage from './SingleToastMessage'; - -const HelperComponent = (props: React.ComponentProps) => ; -HelperComponent.displayName = 'SingleToastMessage'; - -const meta = { - component: HelperComponent, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A toast message to display a message to the user', - }, - }, - }, - - argTypes: { - remove: { - description: 'A function that is called from the toast when the it should be removed.', - type: { name: 'function' }, - }, - toast: { - description: 'The toast message to display.', - }, - }, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Success: Story = { - render: (args) => , - args: { - toast: { - id: 1, - title: 'Success', - message: 'This is a success message', - time: 5000, - themeType: 'success', - }, - }, -}; -export const Error: Story = { - render: (args) => , - args: { - toast: { - id: 2, - title: 'warning', - message: 'this is a warning message', - time: 5000, - themeType: 'warning', - }, - }, -}; -export const Warning: Story = { - render: (args) => , - args: { - toast: { - id: 3, - title: 'error', - message: 'this is an error message', - time: 5000, - themeType: 'error', - }, - }, -}; diff --git a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.style.tsx b/src/Components/Molecules/SingleToastMessage/SingleToastMessage.style.tsx deleted file mode 100644 index 5b9353276..000000000 --- a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.style.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { styled, keyframes } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import colorTransparencyCalculator from '../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator'; -import { boxShadow } from '../../../design/designFunctions/shadows/shadows'; -import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; - -type ToastMessageProps = 'success' | 'warning' | 'error' | 'info'; - -interface IToastMessage { - $messageType: ToastMessageProps; - $layer?: TLayer; - theme: TTheme; -} - -interface TimerLineProps { - $messageType: ToastMessageProps; - $layer?: TLayer; - theme: TTheme; - $time: number; -} - -// styles for single toast message -export const Container = styled.div` - z-index: 99; - display: flex; - position: relative; - flex-direction: column; - align-items: left; - color: ${({ $messageType, theme, $layer = 5 }) => - getBackgroundColor({ $themeType: $messageType, theme, $layer })}; //theme[$messageType]['5'] - border-radius: ${({ theme }) => theme.borderRadius.sm}; - padding: ${({ theme }) => theme.spacing.lg}; - background-color: ${({ theme }) => colorTransparencyCalculator(theme.colors.primary['0'], 0.95)}; - border-left: 4px solid ${({ $messageType, theme, $layer = 3 }) => getBackgroundColor({ $themeType: $messageType, theme, $layer })}; - box-sizing: border-box; - ${boxShadow.md} -`; - -export const Headline = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - - button { - align-self: flex-start; - line-height: ${fontSize.lg}; - } -`; - -// animation for timer line -const timerAnimation = keyframes` - 0% { - width: 100%; - } - 100% { - width: 0; - } -`; -export const TimerLine = styled.div` - position: absolute; - bottom: 0; - left: 0; - height: 2px; - width: 100%; - background-color: ${({ $messageType, theme, $layer = 3 }) => getBackgroundColor({ $themeType: $messageType, theme, $layer })}; - animation: ${() => timerAnimation} ${({ $time }) => $time - 300}ms linear forwards; -`; diff --git a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.tsx b/src/Components/Molecules/SingleToastMessage/SingleToastMessage.tsx deleted file mode 100644 index c413c6219..000000000 --- a/src/Components/Molecules/SingleToastMessage/SingleToastMessage.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { forwardRef, useEffect } from 'react'; - -// Import necessary components and interfaces -import IToastMessage from './IToastMessage.model'; -import { Container, TimerLine, Headline } from './SingleToastMessage.style'; -import Typography from '../../atoms/Typography/Typography'; -import FancyXButton from '../../atoms/FancyXButton/FancyXButton'; - -// Define the interface for the component -interface ISingleToastMessage { - toast: IToastMessage; - remove: (id: number) => void; -} - -// A Single Toast Message Component wich -const SingleToastMessage = forwardRef((props, ref) => { - const { id, title, message, time, themeType, layer } = props.toast; - const remove = props.remove; - - // Remove toast after the time - useEffect(() => { - const timer = setTimeout(() => { - remove(id); - }, time); - - return () => clearTimeout(timer); - }, [id, time, remove]); - - return ( - - - - {title} - - remove(id)} themeType={themeType} layer={layer || 5} /> - - {message} - - - ); -}); - -// Export the component -export default SingleToastMessage; diff --git a/src/Components/Molecules/SingleToastMessage/index.ts b/src/Components/Molecules/SingleToastMessage/index.ts deleted file mode 100644 index e6560b728..000000000 --- a/src/Components/Molecules/SingleToastMessage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SingleToastMessage } from './SingleToastMessage'; diff --git a/src/Components/Molecules/SwipeUpModal/ISwipeUpModal.model.ts b/src/Components/Molecules/SwipeUpModal/ISwipeUpModal.model.ts deleted file mode 100644 index 7e4d69f14..000000000 --- a/src/Components/Molecules/SwipeUpModal/ISwipeUpModal.model.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; - -export interface ISwipeUpModal { - isOpen?: boolean; - 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?: TThemeTypes; - layer?: TLayer; - backdrop?: boolean; - onClose?: () => void; -} diff --git a/src/Components/Molecules/SwipeUpModal/SwipeUpModal.stories.tsx b/src/Components/Molecules/SwipeUpModal/SwipeUpModal.stories.tsx deleted file mode 100644 index 45a3e7e6d..000000000 --- a/src/Components/Molecules/SwipeUpModal/SwipeUpModal.stories.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import SwipeUpModal from './SwipeUpModal'; - -const meta = { - component: SwipeUpModal, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A simple header component to display a header with slots', - }, - }, - }, - - argTypes: { - isOpen: { - description: 'The state of the modal', - type: { name: 'boolean' }, - defaultValue: { - summary: false, - }, - }, - isCloseAble: { - description: 'If true, the modal can be closed.', - type: { name: 'boolean' }, - defaultValue: { - summary: true, - }, - }, - isScalable: { - description: 'If true, the modal can be scaled.', - type: { name: 'boolean' }, - defaultValue: { - summary: true, - }, - }, - onClose: { - description: 'A function that is called when the modal should be closed.', - type: { name: 'function' }, - }, - 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: 0, - }, - }, - backdrop: { - description: 'If true, the backdrop is visible.', - type: { name: 'boolean' }, - defaultValue: { - summary: true, - }, - }, - }, - - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - isOpen: true, - isCloseAble: true, - isScalable: true, - themeType: 'primary', - layer: 1, - }, -}; diff --git a/src/Components/Molecules/SwipeUpModal/SwipeUpModal.style.tsx b/src/Components/Molecules/SwipeUpModal/SwipeUpModal.style.tsx deleted file mode 100644 index c7f984388..000000000 --- a/src/Components/Molecules/SwipeUpModal/SwipeUpModal.style.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { styled } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -export const WrapperModal = styled.div` - display: flex; - justify-content: center; - align-items: flex-end; - position: fixed; - width: 100%; - height: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - z-index: 101; -`; - -export const WrapperAnimated = styled.div` - display: flex; - align-items: flex-end; - width: 100%; -`; - -export const ContentBox = styled.div<{ theme: TTheme }>` - overflow-y: scroll; - color: ${({ theme }) => theme.colors.secondary[0]}; - display: flex; - flex-direction: column; - justify-content: flex-start; - align-items: center; - width: 100%; -`; - -export const WrapperContent = styled.div` - padding: 0; - width: 90%; - display: flex; - flex-direction: column; - gap: 24px; - margin-bottom: 24px; -`; - -export const Content = styled.div` - width: 100%; - display: flex; - flex-direction: column; - gap: 24px; -`; diff --git a/src/Components/Molecules/SwipeUpModal/SwipeUpModal.tsx b/src/Components/Molecules/SwipeUpModal/SwipeUpModal.tsx deleted file mode 100644 index d40df744a..000000000 --- a/src/Components/Molecules/SwipeUpModal/SwipeUpModal.tsx +++ /dev/null @@ -1,132 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { animated, useTransition } from '@react-spring/web'; - -import useWindowDimensions from '../../utils/hooks/useWindowDimensions/useWindowDimensions'; -import SwipeUpContainer from '../../atoms/SwipeUpContainer/SwipeUpContainer'; -import BackDrop from '../../atoms/BackDrop/BackDrop'; -import UseDelay from '../../utils/components/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/TModalStatus'; - -// --------------------------------------------------------------------------- // -// ----------- The Modal Molecule the displays the complete modal - ---------- // -// --------------------------------------------------------------------------- // -export default function SwipeUpModal(props: ISwipeUpModal) { - const { children, isOpen, isCloseAble, isScalable, onClose, themeType, layer, backdrop = true } = { ...defaultProps, ...props }; - - const [statusModal, setStatusModal] = useState('closed'); - const [modalPosition, setModalPosition] = useState({ height: '100%' }); - const [initialHeight, setInitialHeight] = useState(); - const { height } = useWindowDimensions(); - - //Opens the modal and set the overfolw to hidden - const openModal = () => { - document.body.style.overflow = 'hidden'; - setModalPosition({ height: 'auto' }); - setStatusModal('open'); - }; - - const moveModalHandler = (e: React.TouchEvent) => { - document.body.style.overflowY = 'hidden'; - const getToutch = e.changedTouches[0].clientY; - - // sets the initial height of the modal on the auto height - // this is used for the close calculation - if (!initialHeight) setInitialHeight(height - getToutch); - - //from the to 100% = 0px to the buttom 0% 844px - //height = 100% 844 - const onePercent = height / 100; - const getPosition = getToutch / onePercent; - const turnValue = 100 - getPosition; - - // update the modal position - setModalPosition({ height: turnValue + '%' }); - }; - - //Close the modal via the specific event and set the overflow back - //the closedBy is needed is needed to prevent the modal from closing --> - //when the user is interacting with the modal and the modal is not closeable - const closeModal = (cloesedBy: 'status' | 'intercation') => { - if (cloesedBy === 'intercation' && !isCloseAble) return; - - //close the gobal modal state - if (onClose) onClose(); - setStatusModal('closing'); - - //wait for the animation and remove the modal from the store - setTimeout(() => { - setStatusModal('closed'); - }, 250); - - document.body.style.overflow = 'overlay'; - }; - - // when the touchevent is active, can calucalte the height of the modal and close it - const toutchEnd = (e: React.TouchEvent) => { - const getToutch = e.changedTouches[0].clientY; - // this calulation is for good user experience - if (initialHeight !== undefined && height - getToutch < initialHeight * 0.85) { - closeModal('intercation'); - } - }; - - // the open transition for the modal via react-spring - const openTransition = useTransition(statusModal === 'open', { - from: { height: '0%' }, - enter: { height: '100%' }, - leave: { height: '0%' }, - }); - - // if the modal is open, open the modal else close it - useEffect(() => { - if (isOpen) { - openModal(); - } else { - closeModal('status'); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [isOpen]); - - return ( - - - {openTransition( - (styles, item) => - item && ( - - - {/*// ---------- The top of the modal is used for the scaling ---------- //*/} - {isScalable && isCloseAble && ( - { - moveModalHandler(e); - }} - touchEnd={toutchEnd} - click={() => closeModal('intercation')} - /> - )} - {/*// ---------- Content Area ---------- //*/} - - {/*// ---------- Header ---------- //*/} - - {children} - - - - - ) - )} - {backdrop && closeModal('intercation')} />} - - - ); -} - -const defaultProps: ISwipeUpModal = { - isCloseAble: true, - isScalable: true, - isOpen: true, -}; diff --git a/src/Components/Molecules/SwipeUpModal/index.ts b/src/Components/Molecules/SwipeUpModal/index.ts deleted file mode 100644 index 171e8bf36..000000000 --- a/src/Components/Molecules/SwipeUpModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SwipeUpModal } from './SwipeUpModal'; diff --git a/src/Components/Molecules/SwitchList/SwitchList.stories.tsx b/src/Components/Molecules/SwitchList/SwitchList.stories.tsx deleted file mode 100644 index 6e6a05ff0..000000000 --- a/src/Components/Molecules/SwitchList/SwitchList.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import SwitchList from './SwitchList'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; -import { FancyBottomBarIcon } from '../../templates/FancyBottomBarIcon'; - -const meta = { - component: SwitchList, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A SwitchList that used to indicate which item is active', - }, - }, - }, - - argTypes: { - children: { - description: 'The children of the SwitchList.', - }, - whichIndexIsSelected: { - description: 'The index of the selected item.', - type: { name: 'number' }, - }, - activeItemHandler: { - description: 'A function that is called when the active item is changed.', - type: { name: 'function' }, - }, - indicatorType: { - description: 'The type of the active indicator.', - control: { - type: 'select', - }, - defaultValue: { - summary: 'underline', - }, - }, - externalStyle: { - description: 'The external style of the SwitchList.', - type: { name: 'string' }, - }, - }, - - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => ( - - } /> - } /> - } /> - - ), - args: { - children: <>, - }, -}; diff --git a/src/Components/Molecules/SwitchList/SwitchList.style.tsx b/src/Components/Molecules/SwitchList/SwitchList.style.tsx deleted file mode 100644 index b7d2ab820..000000000 --- a/src/Components/Molecules/SwitchList/SwitchList.style.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { styled, CSSProp } from 'styled-components'; -import ULRaw from '../../atoms/RawUL/RawUL'; - -export const StyledList = styled(ULRaw)<{ $externalStyle?: CSSProp; $direction?: 'horizontal' | 'vertical' }>` - display: flex; - flex-direction: ${({ $direction }) => ($direction === 'vertical' ? 'column' : 'row')}; - justify-content: space-evenly; - width: 100%; - ${({ $externalStyle }) => $externalStyle}; -`; - -export const ItemWrapper = styled.li` - position: relative; - flex-grow: 1; -`; diff --git a/src/Components/Molecules/SwitchList/SwitchList.tsx b/src/Components/Molecules/SwitchList/SwitchList.tsx deleted file mode 100644 index d219f3d5f..000000000 --- a/src/Components/Molecules/SwitchList/SwitchList.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import { CSSProp } from 'styled-components'; - -import SwitchActiveIndicator, { IActiveSwitchIndicator } from '../../atoms/SwitchActiveIndicator/SwitchActiveIndicator'; -import { ItemWrapper, StyledList } from './SwitchList.style'; - -type TSwitchActiveIndicator = Omit; - -interface IBottomBarListProps { - children?: React.ReactNode; - whichIndexIsSelected?: number; - activeItemHandler?: (activeKey: number) => void; - indicatorType?: React.ComponentProps['$type']; - externalStyle?: CSSProp; -} - -interface IKey { - $uniquekey: string; -} -// --------------------------------------------------------------------------- // -// -------------- The Switch List Indicates wich item is active -------------- // -// --------------------------------------------------------------------------- // -export default function SwitchList(props: IBottomBarListProps & TSwitchActiveIndicator) { - const { children, whichIndexIsSelected, activeItemHandler, indicatorType, externalStyle, $direction, ...indicatorProps } = props; - const [currentActive, setCurrentActive] = useState(''); - - const activeHandler = (uniqueKey: string) => { - setCurrentActive(uniqueKey); - activeItemHandler && activeItemHandler(Number(uniqueKey)); - }; - - useEffect(() => { - setCurrentActive(`${whichIndexIsSelected ? whichIndexIsSelected + 1 : 1}`); - }, [whichIndexIsSelected]); - - return ( - - {React.Children.map(children, (child, index) => { - if (React.isValidElement(child)) { - // Generate a unique key (or use any other unique identifier logic) - const uniqueKey = `${index + 1}`; - - // Clone the child and add the uniqueKey prop - const clonedChild = React.cloneElement(child as React.ReactElement, { $uniquekey: uniqueKey }); - - return ( - activeHandler(uniqueKey)}> - {clonedChild} - {index === 0 && ( - - )} - - ); - } - return child; - })} - - ); -} diff --git a/src/Components/Molecules/TabSwitch/TabSwitch.model.ts b/src/Components/Molecules/TabSwitch/TabSwitch.model.ts deleted file mode 100644 index 8e27e093d..000000000 --- a/src/Components/Molecules/TabSwitch/TabSwitch.model.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { TThemeTypes } from '@/interface/TUiColors'; -import { TLayer } from '@/interface/TLayer'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { ITabSwitchDetailsLabelIcon, ITabSwitchDetailsChildren } from '../FancyTabSwitchButton/FancyTabSwitchButton.model'; -import { TSpacings } from '../../../interface/TSpacings'; - -export interface ITabSwitchProps { - wide?: boolean; - size?: 'sm' | 'md' | 'lg'; - textColor?: TThemeTypes; - themeType?: TThemeTypes; - layer?: TLayer; - disabled?: boolean; - tabSpacing?: TSpacings; - values: ITabSwitchDetailsChildren[] & ITabSwitchDetailsLabelIcon[]; - rounded?: TBorderRadiusSizes; - direction?: 'horizontal' | 'vertical'; - outlined?: boolean; - id?: string; - currentSelect?: string; - iconAlign?: 'left' | 'right'; - activeColor?: TThemeTypes; - handler?: (value: string) => void; -} diff --git a/src/Components/Molecules/TabSwitch/TabSwitch.style.tsx b/src/Components/Molecules/TabSwitch/TabSwitch.style.tsx deleted file mode 100644 index f6c20434a..000000000 --- a/src/Components/Molecules/TabSwitch/TabSwitch.style.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { styled } from 'styled-components'; - -import { borderRadius, spacingPx } from '../../../design/theme/designSizes'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TSpacings } from '../../../interface/TSpacings'; -import themeStore from '../../../design/theme/themeStore/themeStore'; - -// Define the different sizes for the tab switch -const getSpacingFromTheme = themeStore.getState().theme.spacing; -export const tabSwitchSizes = { - sm: { - paddingComponent: '4px', - }, - md: { - paddingComponent: getSpacingFromTheme.xs, - }, - lg: { - paddingComponent: getSpacingFromTheme.sm, - }, -}; - -// Define the interface for the styled-component -export interface IFancyTabSwitchStyle { - $transparent?: boolean; - $wide?: boolean; - $outlinedBackgroundStrength?: number; - $tabSpacing?: TSpacings; - $direction?: 'horizontal' | 'vertical'; - $rounded?: TBorderRadiusSizes; - $padding?: keyof typeof tabSwitchSizes; - $outlined?: boolean; - theme: TTheme; - $layer?: TLayer; - $themeType?: TThemeTypes; -} - -// ----------------------------------------------------------- // -// ---------- The main UL element for the component ---------- // -// ----------------------------------------------------------- // -// Define the styled-component for the unordered list of the tab switch -export const ULButtonSwitchList = styled.ul` - display: ${({ $wide }) => ($wide ? 'grid' : 'inline-grid')}; - grid-auto-flow: ${({ $direction }) => ($direction === 'vertical' ? 'row' : 'column')}; - grid-auto-rows: 1fr; - grid-auto-columns: 1fr; - gap: ${({ $tabSpacing }) => ($tabSpacing ? spacingPx[$tabSpacing] : '0')}; - border-radius: ${({ $rounded }) => ($rounded ? borderRadius[$rounded] : '0')}; - ${({ $wide }) => $wide && `justify-content: space-between`}; - align-items: center; - margin: 0; - padding: 0; - & > * { - /* Selects all direct children of the parent */ - min-width: 0; - } -`; - -// ----------------------------------- // -// ---------- Other styled ---------- // -// ----------------------------------- // -// Define the styled-component for the list item wrapper -export const ItemWrapper = styled.li` - position: relative; - height: 100%; - width: 100%; - list-style: none; -`; diff --git a/src/Components/Molecules/TabSwitch/TabSwitch.tsx b/src/Components/Molecules/TabSwitch/TabSwitch.tsx deleted file mode 100644 index bb5fe6a3b..000000000 --- a/src/Components/Molecules/TabSwitch/TabSwitch.tsx +++ /dev/null @@ -1,108 +0,0 @@ -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 { ITabSwitchProps } from './TabSwitch.model'; - -// --------------------------------------------------------------------------- // -// ------------ The tap SwitchComponent to slect specifc values -------------- // -// --------------------------------------------------------------------------- // -export default function TabSwitch(props: ITabSwitchProps) { - const { - values, - layer, - themeType, - textColor, - size, - wide, - disabled, - tabSpacing, - rounded, - direction, - outlined, - currentSelect, - handler, - iconAlign, - activeColor, - } = props; - // Define the state for the currently selected tab - const buttonRefs = useRef[]>(values.map(() => React.createRef())); - const [currentSelected, setCurrentSelect] = useState(currentSelect); - - // Define the function to handle the selection of a tab - const radioChangeHandler = (position: string) => { - const currentItem = values.find((item) => item.itemKey === position); - setCurrentSelect(position); - handler && handler(currentItem?.itemKey!); - }; - - // This handles the navigation with the keyboard - const handleKeyDown = (event: React.KeyboardEvent, itemKey: string) => { - const currentIndex = values.findIndex((item) => item.itemKey === itemKey); - let newIndex = -1; - - if (event.key === 'ArrowRight' || event.key === 'ArrowDown') { - newIndex = (currentIndex + 1) % values.length; - } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') { - newIndex = (currentIndex - 1 + values.length) % values.length; - } - - if (newIndex !== -1) { - const newPosition = values[newIndex].itemKey; - radioChangeHandler(newPosition); - buttonRefs.current[newIndex].current?.focus(); - } - }; - - return ( - - {/* Generate a list item for each switch value */} - {values.map((item, i) => ( - - {/* Generate the button for the switch item */} - radioChangeHandler(item.itemKey)} - onKeyDown={(e) => handleKeyDown(e, item.itemKey)} - tabIndex={item.itemKey === currentSelected ? 0 : -1} // Manage focus - /> - {/* Generate the switch active indicator wich is a blob or underline */} - {i === 0 && ( - - )} - - ))} - - ); -} diff --git a/src/Components/Molecules/TextInput/TextInput.stories.tsx b/src/Components/Molecules/TextInput/TextInput.stories.tsx deleted file mode 100644 index 348996a26..000000000 --- a/src/Components/Molecules/TextInput/TextInput.stories.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import TextInput from './TextInput'; - -// Define metadata for the story -const meta = { - component: TextInput, - parameters: { - docs: { - description: { - component: 'SwipeUpDash is a simple horizontal line', - }, - }, - }, - // Define arguments for the story - argTypes: { - value: { - description: 'The value of the input.', - type: { name: 'string' }, - }, - align: { - description: 'The alignment of the text.', - control: { type: 'select' }, - }, - }, - // 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: {}, -}; diff --git a/src/Components/Molecules/TextInput/TextInput.tsx b/src/Components/Molecules/TextInput/TextInput.tsx deleted file mode 100644 index 483ff30e5..000000000 --- a/src/Components/Molecules/TextInput/TextInput.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { InputHTMLAttributes } from 'react'; - -import RawInput, { TRawInputAlign } from '../../atoms/RawInput/RawInput'; - -export interface ITextInputProps extends Omit, 'type'> { - value?: string | number; - align?: TRawInputAlign; - activeHandler?: (value: boolean) => void; -} - -export default function TextInput(props: ITextInputProps) { - const { value, activeHandler, onChange, align, ...htmlInputProps } = props; - - return ( - activeHandler && activeHandler(true)} - onBlur={() => activeHandler && activeHandler(false)} - $align={align} - {...htmlInputProps} - /> - ); -} diff --git a/src/Components/Molecules/TextInput/index.ts b/src/Components/Molecules/TextInput/index.ts deleted file mode 100644 index 137a1443c..000000000 --- a/src/Components/Molecules/TextInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as TextInput } from './TextInput'; diff --git a/src/Components/Organisms/FancyBoxSet/FancyBoxSet.stories.tsx b/src/Components/Organisms/FancyBoxSet/FancyBoxSet.stories.tsx deleted file mode 100644 index 9e2a320ee..000000000 --- a/src/Components/Organisms/FancyBoxSet/FancyBoxSet.stories.tsx +++ /dev/null @@ -1,123 +0,0 @@ -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/Organisms/FancyBoxSet/FancyBoxSet.tsx b/src/Components/Organisms/FancyBoxSet/FancyBoxSet.tsx deleted file mode 100644 index 9ce404132..000000000 --- a/src/Components/Organisms/FancyBoxSet/FancyBoxSet.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; - -import { Fieldset } from '@/components/molecules/Fieldset'; -import { FancyListBox } from '@/components/molecules/FancyListBox'; -import { FancyLine } from '@/components/atoms/FancyLine'; -import { TLayer } from '@/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/Organisms/FancyBoxSet/index.ts b/src/Components/Organisms/FancyBoxSet/index.ts deleted file mode 100644 index 2fccca4df..000000000 --- a/src/Components/Organisms/FancyBoxSet/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyBoxSet } from './FancyBoxSet'; diff --git a/src/Components/Organisms/FancyButton/FancyButton.stories.tsx b/src/Components/Organisms/FancyButton/FancyButton.stories.tsx deleted file mode 100644 index c847c433e..000000000 --- a/src/Components/Organisms/FancyButton/FancyButton.stories.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyButton from './FancyButton'; -import SVGChevronLeft from '../../icons/SVGChevronLeft/SVGChevronLeft'; - -const meta = { - component: FancyButton, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: This component is a button with a lot of props to change the style.', - }, - }, - }, - argTypes: { - themeType: { - description: 'This prop will change the color of the bar', - control: { - type: 'select', - }, - }, - layer: { - description: 'This prop will change the layer of the bar', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - outlined: { - description: 'This prop will change the Nutton to outlined', - control: { - type: 'boolean', - }, - }, - iconAlign: { - description: 'This prop will align the icon inside the button to the left or right from the text', - control: { - type: 'radio', - }, - defaultValue: { - summary: 'left', - }, - }, - borderRadius: { - description: 'This prop will change the borderRadius of the button', - control: { - type: 'select', - }, - }, - isLoading: { - description: 'This prop will change the button to loading', - control: { - type: 'boolean', - }, - }, - textColor: { - description: 'This prop will change the color of the text', - control: { - type: 'select', - }, - }, - hoverColor: { - description: 'This prop will change the color of the hover', - control: { - type: 'select', - }, - }, - wide: { - description: 'This prop will change the width of the button', - control: { - type: 'boolean', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - icon: SVGChevronLeft, - themeType: 'accent', - label: 'Button', - size: 'md', - align: 'center', - layer: 0, - outlined: false, - borderRadius: 'md', - isLoading: false, - wide: false, - }, -}; - -export const Outlined: Story = { - render: (args) => , - args: { - icon: SVGChevronLeft, - themeType: 'accent', - label: 'Button', - size: 'md', - align: 'center', - layer: 0, - outlined: true, - borderRadius: 'md', - isLoading: false, - wide: false, - }, -}; - -export const OneToOne: Story = { - render: (args) => , - args: { - icon: SVGChevronLeft, - themeType: 'accent', - size: 'md', - align: 'center', - layer: 0, - outlined: true, - borderRadius: 'md', - isLoading: false, - wide: false, - }, -}; diff --git a/src/Components/Organisms/FancyButton/FancyButton.style.tsx b/src/Components/Organisms/FancyButton/FancyButton.style.tsx deleted file mode 100644 index 18f530a65..000000000 --- a/src/Components/Organisms/FancyButton/FancyButton.style.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { css } from 'styled-components'; - -import { generateBorderRadiusForComponent } from '../../../design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent'; -import { generateComponentPadding } from '../../../design/designFunctions/generatePaddingForComponent/generatepaddingForComponent'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; - -const generate1To1Button = ($size: 'sm' | 'md' | 'lg', $outlined?: boolean) => { - //this makes the button a square (1/1) if there is no $label and a $icon - const padding = generateComponentPadding({ size: $size ?? 'md', borderThinkness: $outlined ? 1.2 : 0 }); - - return css` - aspect-ratio: 1/1; - justify-content: center; - ${padding} - `; -}; - -interface IGenerateFancyButton { - $size?: 'sm' | 'md' | 'lg'; - $outlined?: boolean; - $oneToOne?: boolean; - $borderRadius?: TBorderRadiusSizes; - $justifyContent?: 'flex-start' | 'flex-end' | 'center'; - $noPadding?: boolean; -} - -export const generateFancyButton = (props: IGenerateFancyButton) => { - const { $size, $borderRadius, $outlined, $oneToOne, $justifyContent, $noPadding } = props; - - return css` - justify-content: ${$justifyContent ?? 'center'}; - ${generateBorderRadiusForComponent($size, $borderRadius)}; - ${!$noPadding && generateComponentPadding({ size: $size ?? 'md', borderThinkness: $outlined ? 1.2 : 0, doublePaddingLeftRight: true })}; - ${$oneToOne && generate1To1Button($size ?? 'md', $outlined)}; - `; -}; diff --git a/src/Components/Organisms/FancyButton/FancyButton.tsx b/src/Components/Organisms/FancyButton/FancyButton.tsx deleted file mode 100644 index 86a627de9..000000000 --- a/src/Components/Organisms/FancyButton/FancyButton.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import { css } from 'styled-components'; - -import LoadingSVGArrows from '../../atoms/LoadingSVGArrows/LoadingSVGArrows'; -import Button, { IButtonProps } from '../../molecules/Button/Button'; -import FancyContent from '../../molecules/FancyContent/FancyContent'; -import { generateFancyButton } from './FancyButton.style'; - -import { IButton } from '../../molecules/Button/Button'; -import { TTypography } from '@/interface/TTypography'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; - -const alignment = { - left: 'flex-start' as const, - right: 'flex-end' as const, - center: 'center' as const, -}; - -export type IFancyButtonProps = { - isLoading?: boolean; - label?: string; - align?: 'left' | 'right' | 'center'; - iconAlign?: 'left' | 'right'; - size?: 'sm' | 'md' | 'lg'; - borderRadius?: TBorderRadiusSizes; - oneToOne?: boolean; - icon?: React.ReactNode; - fontVariant?: TTypography; - noPadding?: boolean; -}; - -// --------------------------------------------------------------------------- // -// ---------- The Fancy Button has a bit more options than another ---------- // -// --------------------------------------------------------------------------- // -type IFancyButton = IFancyButtonProps & IButton; -export default function FancyButton(props: IFancyButton) { - const { icon, label, isLoading, iconAlign, size, align, externalStyle, oneToOne, noPadding, fontVariant, borderRadius, ...buttonProps } = - { - ...defaultProps, - ...props, - }; - - const generateFancyStyle = generateFancyButton({ - $size: size, - $borderRadius: borderRadius, - $oneToOne: oneToOne || (Boolean(!label) && Boolean(icon)), - $outlined: props.outlined, - $justifyContent: alignment[align ?? 'center'], - $noPadding: noPadding, - }); - - // handle icon alignment - const alignIcon = iconAlign === 'left' ? 'row' : 'row-reverse'; - - return ( - - ); -} - -const defaultProps: IFancyButton = { - themeType: 'accent', - size: 'lg', - align: 'center', -}; diff --git a/src/Components/Organisms/FancyButton/IFancyButton.model.ts b/src/Components/Organisms/FancyButton/IFancyButton.model.ts deleted file mode 100644 index 089c23e83..000000000 --- a/src/Components/Organisms/FancyButton/IFancyButton.model.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ButtonHTMLAttributes } from 'react'; - -type NativeButtonAttributes = Omit, 'type'>; - -type IFancyButton = { - isLoading?: boolean; - align?: 'left' | 'right' | 'center'; - iconAlign?: 'left' | 'right'; - icon?: JSX.Element; -}; - -export type IFancyButtonProps = IFancyButton & NativeButtonAttributes; diff --git a/src/Components/Organisms/FancyButton/index.ts b/src/Components/Organisms/FancyButton/index.ts deleted file mode 100644 index 7af99e192..000000000 --- a/src/Components/Organisms/FancyButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyButton } from './FancyButton'; 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/FancyChip/FancyChip.stories.tsx b/src/Components/Organisms/FancyChip/FancyChip.stories.tsx deleted file mode 100644 index c01a3914b..000000000 --- a/src/Components/Organisms/FancyChip/FancyChip.stories.tsx +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyChip from './FancyChip'; -import SVGChevronLeft from '../../icons/SVGChevronLeft/SVGChevronLeft'; - -const meta = { - component: FancyChip, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A chip is a component that displays a label and optionally an icon / image and delete button. ', - }, - }, - }, - argTypes: { - size: { - description: 'The size of the button.', - control: { - type: 'select', - }, - }, - themeType: { - description: 'The theme type of the button.', - control: { - type: 'select', - }, - }, - isActive: { - description: 'The active state of the button.', - control: { - type: 'boolean', - }, - }, - outlined: { - description: 'The outlined state of the button.', - control: { - type: 'boolean', - }, - }, - onDelete: { - description: 'The onDelete event of the button.', - control: { - type: 'function', - }, - }, - onClick: { - description: 'The onClick event of the button.', - control: { - type: 'function', - }, - }, - textColor: { - description: 'The text color of the button.', - control: { - type: 'select', - }, - }, - textLayer: { - description: 'The text layer of the button.', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - }, - layer: { - description: 'The layer of the button.', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - }, - image: { - description: 'The image of the button.', - control: { - type: 'text', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - label: 'Chip', - layer: 3, - icon: false, - size: 'sm', - outlined: false, - onDelete: undefined, - themeType: 'primary', - isActive: false, - }, -}; - -export const WithDelete: Story = { - render: (args) => , - args: { - label: 'Chip', - layer: 3, - icon: false, - size: 'sm', - outlined: false, - onDelete: undefined, - themeType: 'primary', - isActive: false, - }, -}; - -export const WithImage: Story = { - render: (args) => , - args: { - label: 'Chip', - layer: 3, - icon: false, - size: 'sm', - outlined: false, - themeType: 'primary', - isActive: false, - image: 'https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg', - onDelete: () => { - console.log('DELETE'); - }, - }, -}; - -export const WithIcon: Story = { - render: (args) => , - args: { - label: 'Chip', - layer: 3, - size: 'sm', - outlined: false, - themeType: 'primary', - isActive: false, - icon: SVGChevronLeft, - onDelete: () => { - console.log('DELETE'); - }, - }, -}; diff --git a/src/Components/Organisms/FancyChip/FancyChip.style.tsx b/src/Components/Organisms/FancyChip/FancyChip.style.tsx deleted file mode 100644 index 141947320..000000000 --- a/src/Components/Organisms/FancyChip/FancyChip.style.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import styled, { css } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; -import themeStore from '@/design/theme/themeStore/themeStore'; - -// Define the type for the spacing position -export type TSpacingPosition = 'left' | 'right' | 'booth'; - -const getSpacingFromTheme = themeStore.getState().theme.spacing; -const spacings = { - xs: parseFloat(getSpacingFromTheme.xs), - sm: parseFloat(getSpacingFromTheme.sm), - md: parseFloat(getSpacingFromTheme.md), -}; - -export const sizes = { - sm: { - height: '24px', - deleteButtonSize: '14px', - padding: spacings.xs, - paddingRight: spacings.xs, - paddingLeft: spacings.xs, - icon: '14px', - }, - md: { - height: '32px', - deleteButtonSize: '14px', - padding: spacings.sm, - paddingRight: spacings.sm, - paddingLeft: spacings.sm, - icon: '18px', - }, - lg: { - height: '38px', - deleteButtonSize: '14px', - padding: spacings.sm, - paddingRight: spacings.sm, - paddingLeft: spacings.md, - icon: '20px', - }, -}; - -// Define a function to generate the spacing based on the spacing position -interface IGenerateSpacing { - spacingPosition?: TSpacingPosition; - size?: keyof typeof sizes; -} -export const generateSpacing = ({ spacingPosition, size }: IGenerateSpacing) => { - const pickedSize = size ? size : 'md'; - - switch (spacingPosition) { - case 'left': - return css` - padding-left: ${sizes[pickedSize].paddingLeft + 2 + 'px'}; - `; - case 'right': - return css` - padding-right: ${sizes[pickedSize].paddingRight + 2 + 'px'}; - `; - case 'booth': - return css` - padding: 0 ${sizes[pickedSize].padding + 2 + 'px'}; - `; - default: - return null; - } -}; - -// Define the styled component for the X button -interface IXButton { - $size?: keyof typeof sizes; - theme: TTheme; -} -export const StyledXButton = styled.button` - border: none; - background-color: transparent; - cursor: pointer; - color: inherit; - background-color: transparent; - padding: 0; - line-height: 1; - display: flex; - align-items: center; - margin-left: ${({ theme }) => parseFloat(theme.spacing.xs) + 2 + 'px'}; - - svg { - width: ${({ $size }) => ($size ? sizes[$size].deleteButtonSize : sizes.md.deleteButtonSize)}; - height: ${({ $size }) => ($size ? sizes[$size].deleteButtonSize : sizes.md.deleteButtonSize)}; - } -`; - -// Define the styled component for the wrapper image -export const WrapperImage = styled.div<{ theme: TTheme }>` - height: 100%; - aspect-ratio: 1/1; - line-height: 0; - margin-right: ${({ theme }) => theme.spacing.xs}; - display: flex; - align-items: center; - - img { - width: 95%; - height: 95%; - object-fit: cover; - border-radius: 50%; - } -`; diff --git a/src/Components/Organisms/FancyChip/FancyChip.tsx b/src/Components/Organisms/FancyChip/FancyChip.tsx deleted file mode 100644 index 04dead1fd..000000000 --- a/src/Components/Organisms/FancyChip/FancyChip.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import React from 'react'; -import { css } from 'styled-components'; - -import SVGXCircle from '../../icons/SVGXCircle/SVGXCircle'; -import FancyContent from '../../molecules/FancyContent/FancyContent'; - -import { StyledXButton, TSpacingPosition, WrapperImage, generateSpacing } from './FancyChip.style'; -import Chip from '../../molecules/Chip/Chip'; -import { IStyledChip } from '../../molecules/Chip/Chip'; - -export type TChipProps = { - label?: string; - isActive?: boolean; - icon?: React.ReactNode; - image?: string; - onDelete?: () => void; -} & IStyledChip & - React.HTMLAttributes; - -// Define the Chip component -export default function FancyChip(props: TChipProps) { - const { - label, - onDelete, - icon, - image, - size, - outlined, - themeType, - layer, - textColor, - textLayer, - isActive, - externalStyle, - ...HTMLAttributes - } = { - ...defaultProps, - ...props, - }; - - // Define a function to calculate the spacing position for the chip - const clacPosition = (): TSpacingPosition => { - if (icon && onDelete) return 'booth'; - if (image && onDelete) return 'right'; - if (image) return 'right'; - if (onDelete) return 'booth'; - if (icon) return 'booth'; - return 'booth'; - }; - - // Calculate the spacing position for the chip - const getCalcPosition = clacPosition(); - 3; - - // Render the Chip component with the appropriate props - return ( - - {image && ( - - chip - - )} - - - {icon && {icon}} - {label && ( - - {label} - - )} - - - {onDelete && ( - ) => { - e.stopPropagation(); - onDelete && onDelete(); - }} - > - - - )} - - ); -} - -// Define the default props for the Chip component -const defaultProps = { - size: 'md' as const, -}; diff --git a/src/Components/Organisms/FancyChip/index.ts b/src/Components/Organisms/FancyChip/index.ts deleted file mode 100644 index ad4ade32b..000000000 --- a/src/Components/Organisms/FancyChip/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyChip } from './FancyChip'; diff --git a/src/Components/Organisms/FancyChipList/FancyChipList.stories.tsx b/src/Components/Organisms/FancyChipList/FancyChipList.stories.tsx deleted file mode 100644 index 2339ff368..000000000 --- a/src/Components/Organisms/FancyChipList/FancyChipList.stories.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; - -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyChipList from './FancyChipList'; - -const meta = { - component: FancyChipList, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A Component that act like a tag list. It can be used to display tags/chips for some Informations.', - }, - }, - }, - argTypes: { - size: { - description: 'Size of the ChipList', - control: { - type: 'select', - options: ['sm', 'md', 'lg'], - }, - }, - chips: { - description: 'The Chips that should be displayed', - control: { - type: 'array', - }, - }, - label: { - description: 'The Label of the ChipList', - control: { - type: 'text', - }, - }, - systemInformation: { - description: 'The SystemInformation that should be displayed', - control: { - type: 'select', - }, - }, - outlined: { - description: 'If the ChipList should be outlined', - control: { - type: 'boolean', - }, - }, - layer: { - description: 'The Layer of the ChipList', - control: { - type: 'select', - }, - }, - themeType: { - description: 'The ThemeType of the ChipList', - control: { - type: 'select', - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - chips: ['12', '1212', '1212', '121221', '121212211', '12121212', '12121212'], - size: 'md', - label: 'ChipList', - }, -}; diff --git a/src/Components/Organisms/FancyChipList/FancyChipList.style.tsx b/src/Components/Organisms/FancyChipList/FancyChipList.style.tsx deleted file mode 100644 index b8456e039..000000000 --- a/src/Components/Organisms/FancyChipList/FancyChipList.style.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { styled } from 'styled-components'; - -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import { getTextColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { IgenerateThemeForCard } from '../../../design/designFunctions/generateThemeForCard/generateThemeForCard'; -import { TTheme } from '@/interface/TTheme'; - -type IChipContainer = IStyledPrefixAndPicker & { theme: TTheme }; -export const InputLi = styled.li` - display: flex; - flex: 1; - - input { - border: none; - padding: 5px; - font-size: 14px; - background-color: transparent; - color: ${({ $themeType, theme }) => getTextColor({ $themeType: $themeType ?? 'primary', theme, turnColorTheme: true })}; - - &:focus { - outline: none; - width: 1ch; - } - } -`; diff --git a/src/Components/Organisms/FancyChipList/FancyChipList.tsx b/src/Components/Organisms/FancyChipList/FancyChipList.tsx deleted file mode 100644 index dcaae968b..000000000 --- a/src/Components/Organisms/FancyChipList/FancyChipList.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React, { KeyboardEvent, useEffect, useState } from 'react'; -import { v4 as uuidv4 } from 'uuid'; - -import { Fieldset } from '../../molecules/Fieldset'; -import { TLayer } from '@/interface/TLayer'; -import ChipList from '../../molecules/ChipList/ChipList'; -import { FancyChip } from '../FancyChip'; -import { InputLi } from './FancyChipList.style'; -import { TThemeTypes } from '@/interface/TUiColors'; -import { TUiColorsSystemMessage } from '@/interface/TUiColors'; - -// Defining the interface for the component's props -export interface ChipListProps { - themeType?: Exclude; - systemInformation?: TUiColorsSystemMessage; - layer?: TLayer; - outlined?: boolean; - chips?: string[]; - inputPlaceholder?: string; - label?: string; - size?: 'sm' | 'md' | 'lg'; -} - -// Define the type for the chips with an id and label -type TChip = { - id: string; - label: string; -}; - -// The FancyChipList component definition -export default function FancyChipList(props: ChipListProps) { - // Destructure props and provide default values from defaultProps - const { themeType, layer, outlined, chips, inputPlaceholder, label, size, systemInformation } = { ...defaultProps, ...props }; - - // State to hold chips with unique identifiers and input values - const [chipsWithKeys, setChipsWithKeys] = useState([]); - const [inputValue, setInputValue] = useState(''); - const [focusedChip, setFocusedChip] = useState(''); - - // Effect to initialize chipsWithKeys state when the chips prop changes - useEffect(() => { - setChipsWithKeys(chips!.map((label) => ({ id: uuidv4(), label }))); - }, [chips]); - - // Function to add a new chip - const addChip = (label: string) => { - setChipsWithKeys((prev) => [...prev, { id: uuidv4(), label }]); - }; - - // Function to delete a chip, curried to provide the chip id - const deleteChip = (chipToDelete: string) => () => { - setChipsWithKeys(chipsWithKeys.filter((chip) => chip.id !== chipToDelete)); - }; - - // Function to set the focused chip - const hanleChipFocus = (chipId: string) => () => { - setFocusedChip(chipId); - }; - - // Function to update the label of a chip - const updateChipLabel = (chipId: string, newLabel: string) => { - setChipsWithKeys((prev) => prev.map((chip) => (chip.id === chipId ? { ...chip, label: newLabel } : chip))); - }; - - // Function to handle editing of a chip label through keyboard events - const handleChipEdit = (chipId: string) => (e: React.KeyboardEvent) => { - if ((e.key === 'Enter' || e.key === ',') && chipId === focusedChip) { - e.preventDefault(); - updateChipLabel(chipId, (e.target as HTMLDivElement).innerText); - setFocusedChip(''); - (e.target as HTMLDivElement).blur(); - } - }; - - // Function to handle input keydown events for adding and removing chips - const handleInputKeyDown = (event: KeyboardEvent) => { - const val = event.currentTarget.value.trim(); - if ((event.key === 'Enter' || event.key === ',') && val) { - event.preventDefault(); - addChip(val); - setInputValue(''); - } else if (event.key === 'Backspace' && !val && chipsWithKeys.length) { - // On backspace, if input is empty, remove the last chip and add its label to the input - const lastChip = chipsWithKeys[chipsWithKeys.length - 1]; - setChipsWithKeys((prev) => prev.slice(0, -1)); - setInputValue(lastChip.label); - } - }; - - // Function to handle changes in the input field - const handleInputChange = (event: React.ChangeEvent) => { - setInputValue(event.target.value); - }; - - // The component's JSX structure for rendering - return ( -
- - {/* // Mapping through each chip in the state to render a FancyChip */} - {chipsWithKeys.map((chip, index) => ( - - ))} - - - - -
- ); -} -// Default properties for the FancyChipList component -const defaultProps: ChipListProps = { - themeType: 'primary', - layer: 1, - chips: [], - size: 'md', -}; diff --git a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.mdx b/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.mdx deleted file mode 100644 index add8264d7..000000000 --- a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.mdx +++ /dev/null @@ -1,73 +0,0 @@ -## FancyCodeVerificationInput Documentation - -### Overview - -The `FancyCodeVerificationInput` is a sophisticated input component tailored for single-input entries, such as verification codes. Offering an enhanced user experience, it not only transitions automatically to the subsequent input after a key press but also supports copy-paste functionality via `Ctrl + V`. Upon completing the code entry, the handler is activated, returning the entered value and its status, thus making it versatile and useful for various applications requiring code verification. - -### Integration Steps - -1. **Connect the Component to your Application** - - Import the component using the following: - - `import FancyCodeVerificationInput from './FancyCodeVerificationInput';` - -2. **Initialize and Handle Input State** - - The `FancyCodeVerificationInput` relies on properties such as `isSuccess` and `errorMessage` to manage its internal state. It's essential to set up handlers to determine input success and display potential error messages. - -### Additional Features - -The `FancyCodeVerificationInput` component accepts several props to enhance its functionality: - -- **handler**: Callback function invoked with the input value. -- **length**: Determines the total number of input fields, defaulting to 6. -- **automaticCase**: Determines whether input should be automatically converted to uppercase, lowercase, or remain unchanged. -- **debounceTime**: Provides a debounced input experience with a delay in milliseconds before the handler is called. -- **isSuccess**: Denotes whether the current input is successful. -- **errorMessage**: Allows for displaying custom error messages. - -### Example Usage - -To best demonstrate the component's functionality, here's a simplified usage: - -```React -import React, { useEffect, useState } from 'react'; -import FancyCodeVerificationInput from './FancyCodeVerificationInput'; - -const MyVerificationComponent = () => { - const [isSuccess, setIsSuccess] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - - const handleVerification = (value) => { - if (value === '123456') { - setIsSuccess(true); - setErrorMessage(''); - } else { - setIsSuccess(false); - setErrorMessage('Incorrect code'); - } - }; - - return ( - - ); -}; - -export default MyVerificationComponent; -``` - -In this example, the `handleVerification` function checks if the entered code matches '123456'. Depending on the match, the input's success status and potential error message are updated. - -### Customization - -The `FancyCodeVerificationInput` component offers a wide range of customization options. Props such as `length`, `automaticCase`, and `debounceTime` allow you to adjust the input's behavior and appearance. Furthermore, the component can be styled using CSS to fit the aesthetic of your application. - -### Conclusion - -With its rich set of features and customization options, the `FancyCodeVerificationInput` component stands out as an ideal choice for applications requiring code verification, providing an enhanced and seamless user experience. diff --git a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx b/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx deleted file mode 100644 index 3234cb9ba..000000000 --- a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx +++ /dev/null @@ -1,120 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyCodeVerificationInput from './FancyCodeVerificationInput'; -import React, { useEffect } from 'react'; - -// Define metadata for the story -const meta = { - component: FancyCodeVerificationInput, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The FancyCodeVerificationInput component is for single input like a verification code', - }, - }, - }, - // Define arguments for the story - argTypes: { - handler: { - description: 'Callback function for the search value', - control: { - type: 'function', - }, - }, - length: { - description: 'The length of the input fields', - control: { - type: 'number', - }, - defaultValue: { - summary: '6', - }, - }, - automaticCase: { - description: 'If the input should be upper or lower case', - control: { - type: 'radio', - options: ['upper', 'lower', undefined], - }, - defaultValue: { - summary: undefined, - }, - }, - debounceTime: { - description: 'The debounce time for the handler', - control: { - type: 'number', - }, - defaultValue: { - summary: 700, - }, - }, - isSuccess: { - description: 'If the input is success', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - errorMessage: { - description: 'The error message', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - }, - // Add tags to the story -} satisfies Meta; - -// Export the metadata -export default meta; -// Define the story object -type Story = StoryObj; - -type PropsType = React.ComponentProps; - -function HelperComponent(props: PropsType) { - const [errorMessage, setErrorMessage] = React.useState(''); - const [isSuccess, setIsSuccess] = React.useState(false); - - useEffect(() => { - setIsSuccess(Boolean(props.isSuccess)); - setErrorMessage(props.errorMessage || ''); - }, [props.isSuccess, props.errorMessage]); - - return ( - { - console.log(value); - if (value === '123456') { - setIsSuccess(true); - setErrorMessage(''); - } else { - setIsSuccess(false); - } - }} - /> - ); -} - -// Define the primary story -export const Primary: Story = { - render: (args) => , - args: { - length: 6, - isSuccess: false, - errorMessage: '', - automaticCase: undefined, - debounceTime: 700, - }, -}; diff --git a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx b/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx deleted file mode 100644 index d76039287..000000000 --- a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.style.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { styled, css } from 'styled-components'; - -import { fontSize } from '../../../design/theme/designSizes'; -import { TTheme } from '@/interface/TTheme'; - -export const WarpperComponent = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; - -export const MessageContainer = styled.div<{ theme: TTheme }>` - display: flex; - flex-direction: column; - align-items: center; - margin-top: ${({ theme }) => theme.spacing.sm}; -`; - -export const Message = styled.div<{ $isError?: boolean; theme: TTheme }>` - color: ${({ theme }) => theme.colors.secondary[0]}; - font-size: ${fontSize.sm}; - max-height: 0; - visibility: hidden; - overflow: hidden; - opacity: 0; - - ${({ $isError, theme }) => - $isError && - css` - color: ${theme.colors.error[0]}; - max-height: 100px; - visibility: visible; - opacity: 1; - `} - - transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, visibility 0.3s ease-in-out; -`; - -export const Container = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; diff --git a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx b/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx deleted file mode 100644 index ef84a8500..000000000 --- a/src/Components/Organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useState, useEffect, useRef } from 'react'; - -import SingleInputs from '../../molecules/SingleInputs/SingleInputs'; -import { Container, WarpperComponent, Message, MessageContainer } from './FancyCodeVerificationInput.style'; -import { Typography } from '../../atoms/Typography'; - -// --------------------------------------------------------------------------- // -// -The main FancySinlgeInput Componet wich handle the apicall and the sattus- // -// --------------------------------------------------------------------------- // -interface IFancySingleInputs { - length?: number; - errorMessage?: string; - isSuccess?: boolean; - handler?: (value: string) => void; - automaticCase?: 'upper' | 'lower'; - debounceTime?: number; -} -export default function FancyCodeVerificationInput(props: IFancySingleInputs) { - const { length, errorMessage, isSuccess, handler, automaticCase, debounceTime } = { ...defaultProps, ...props }; - const [inputValue, setInputValue] = useState(''); - const debounceTimeoutRef = useRef(); - - // hanldes the input value change and validate it with the api - useEffect(() => { - if (inputValue.length === length) { - if (debounceTimeoutRef.current) { - clearTimeout(debounceTimeoutRef.current); - } - debounceTimeoutRef.current = setTimeout(() => handler && handler(inputValue), debounceTime || 700); - } - }, [inputValue, handler, length, debounceTime]); - - const valueHandler = (value: string) => { - setInputValue(value); - }; - - return ( - - - - - - {errorMessage} - - - - - ); -} - -const defaultProps: IFancySingleInputs = { - length: 6, -}; diff --git a/src/Components/Organisms/FancyCodeVerificationInput/index.ts b/src/Components/Organisms/FancyCodeVerificationInput/index.ts deleted file mode 100644 index d70254aba..000000000 --- a/src/Components/Organisms/FancyCodeVerificationInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyCodeVerificationInput } from './FancyCodeVerificationInput'; diff --git a/src/Components/Organisms/FancyColorPicker/FancyColorPicker.stories.tsx b/src/Components/Organisms/FancyColorPicker/FancyColorPicker.stories.tsx deleted file mode 100644 index f273318b2..000000000 --- a/src/Components/Organisms/FancyColorPicker/FancyColorPicker.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyColorPicker from './FancyColorPicker'; - -// Define metadata for the story -const meta = { - component: FancyColorPicker, - parameters: { - docs: { - description: { - component: - 'Smart-Comonent: A Color Picker component to pick a color from a color area, hue slider, opacity slider and color output', - }, - }, - }, - // Define arguments for the story - argTypes: { - colorArea: { - description: 'Show the color area', - control: { type: 'boolean' }, - }, - hueSlider: { - description: 'Show the hue slider', - control: { type: 'boolean' }, - }, - opacitySlider: { - description: 'Show the opacity slider', - control: { type: 'boolean' }, - }, - colorOutput: { - description: 'Show the color output', - control: { type: 'boolean' }, - }, - displayColor: { - description: 'Show the color display', - control: { type: 'boolean' }, - }, - inputColor: { - description: 'The initial color', - control: { type: 'text' }, - }, - outputFormat: { - description: 'The output color format', - control: { type: 'radio' }, - options: ['hsl', 'hex', 'rgb', 'rgba', 'hsla', 'hexa'], - }, - }, - // 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: { - colorArea: true, - hueSlider: true, - opacitySlider: true, - colorOutput: true, - displayColor: true, - inputColor: 'hsl(0, 100%, 50%)', - outputFormat: 'hsl', - }, -}; diff --git a/src/Components/Organisms/FancyColorPicker/FancyColorPicker.tsx b/src/Components/Organisms/FancyColorPicker/FancyColorPicker.tsx deleted file mode 100644 index eacdfb773..000000000 --- a/src/Components/Organisms/FancyColorPicker/FancyColorPicker.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React, { useCallback, useEffect, useState } from 'react'; - -import Color from 'color'; -import { styled } from 'styled-components'; - -import ColorDisplay from '../../atoms/ColorDisplay/ColorDisplay'; -import ColorArea from '../../molecules/FancyColorArea/FancyColorArea'; -import FancyHueSlider from '../../molecules/FancyHueSlider/FancyHueSlider'; -import FancyOpacitySlider from '../../molecules/FancyOpacitySlider/FancyOpacitySlider'; -import FancyColorOutput from '../../molecules/FancyColorOutput/FancyColorOutput'; -import { emitSelectedColorChange } from './colorPickerUtils'; -import { IColorFormat } from '../../utils/variables/colorFormats'; -import { TTheme } from '../../../interface/TTheme'; - -const Wrapper = styled.div<{ theme: TTheme }>` - width: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; - gap: ${({ theme }) => theme.spacing.md}; -`; - -// --------------------------------------------------------------------------- // -// ------------------- The main ColorPicker Component ------------------------ // -// --------------------------------------------------------------------------- // -interface IColorPicker { - outputFormat?: IColorFormat; - colorArea?: boolean; - opacitySlider?: boolean; - hueSlider?: boolean; - colorOutput?: boolean; - displayColor?: boolean; - inputColor?: string; - handler?: (color: string) => void; -} -export default function FanyColorPicker(props: IColorPicker) { - const { colorArea, hueSlider, opacitySlider, colorOutput, outputFormat, displayColor, inputColor, handler } = { - ...defaultProps, - ...props, - }; - - const [displayColorValue, setDisplayColorValue] = useState(Color(inputColor ? inputColor : 'hsl(0, 100%, 50%)')); - const [rawColor, setRawColor] = useState(Color('hsl(0, 100%, 50%)')); - const [opacity, setOpacity] = useState(1); - const [hue, setHue] = useState(0); - const [colorType, setColorType] = useState('hsl'); - - //create a calculated main color and use the normal only for display (flicker on the color area) - //this sets the main color that will be used in the parent component=> { - const calculateGiveBackColor = useCallback(() => { - return emitSelectedColorChange({ color: rawColor, opacity, outputFormat }); - }, [rawColor, opacity, outputFormat]); - - handler && handler(calculateGiveBackColor()); - - //this function is handle the color change in the child FancyColorOutput component - useEffect(() => { - const calcDisplayColor = emitSelectedColorChange({ color: rawColor, opacity, outputFormat: colorType }); - setDisplayColorValue(calcDisplayColor); - }, [colorType, hue, rawColor, opacity, setDisplayColorValue]); - - useEffect(() => { - setRawColor(Color(rawColor).hue(hue)); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [hue]); - - useEffect(() => { - if (inputColor) { - setRawColor(Color(inputColor)); - setOpacity(Color(inputColor).alpha()); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return ( - - {displayColor && } - {colorArea && } - {hueSlider && } - {opacitySlider && } - {colorOutput && ( - - )} - - ); -} - -// Define defaultProps for ColorPicker -const defaultProps: IColorPicker = { - outputFormat: 'hex', - colorArea: true, - opacitySlider: true, - hueSlider: true, - colorOutput: true, - displayColor: true, - inputColor: '#000', -}; diff --git a/src/Components/Organisms/FancyColorPicker/colorPickerUtils.ts b/src/Components/Organisms/FancyColorPicker/colorPickerUtils.ts deleted file mode 100644 index 0c78ec128..000000000 --- a/src/Components/Organisms/FancyColorPicker/colorPickerUtils.ts +++ /dev/null @@ -1,47 +0,0 @@ -import Color from 'color'; - -interface IColorPickerUtils { - color: Color; - opacity: number; - outputFormat?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla'; -} - -export const emitSelectedColorChange = ({ color, opacity, outputFormat }: IColorPickerUtils) => { - const colorObj = Color(color).alpha(opacity); - let outputColor; - - switch (outputFormat) { - case 'rgb': - outputColor = colorObj.rgb().string(); - break; - case 'rgba': { - const { r, g, b } = colorObj.rgb().object(); - outputColor = `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${opacity})`; - break; - } - case 'hsl': { - const { h, s, l } = colorObj.hsl().object(); - outputColor = `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`; - break; - } - case 'hsla': { - const { h, s, l } = colorObj.hsl().object(); - outputColor = `hsla(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%, ${opacity})`; - break; - } - case 'hex': - outputColor = colorObj.hex(); - break; - case 'hexa': - outputColor = - colorObj.hex() + - Math.round(opacity * 255) - .toString(16) - .padStart(2, '0'); - break; - default: - outputColor = colorObj.hsl().string(); - } - - return outputColor; -}; diff --git a/src/Components/Organisms/FancyColorPicker/index.ts b/src/Components/Organisms/FancyColorPicker/index.ts deleted file mode 100644 index 069da9436..000000000 --- a/src/Components/Organisms/FancyColorPicker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyColorPicker } from './FancyColorPicker'; diff --git a/src/Components/Organisms/FancyDateInput/FancyDateInput.stories.tsx b/src/Components/Organisms/FancyDateInput/FancyDateInput.stories.tsx deleted file mode 100644 index f61ee6ebc..000000000 --- a/src/Components/Organisms/FancyDateInput/FancyDateInput.stories.tsx +++ /dev/null @@ -1,157 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyDateInput from './FancyDateInput'; - -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -// Define metadata for the story -const meta = { - component: FancyDateInput, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A fancy date input with label, icon and error message and more', - }, - }, - }, - // Define arguments for the story - argTypes: { - label: { - description: 'Label for the input', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - align: { - description: 'Alignment of the label', - control: { - type: 'select', - }, - defaultValue: { - summary: 'left', - }, - }, - disabled: { - description: 'Disable the input', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - themeType: { - description: 'Theme type of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'Layer of the input', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 4, - }, - }, - errorMessage: { - description: 'Error message to be displayed', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - activeHandler: { - description: 'Handler for the input', - control: { - type: 'function', - }, - }, - placeholder: { - description: 'Placeholder for the input', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - icon: { - description: 'Icon for the input', - }, - isActive: { - description: 'Active state of the input', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - value: { - description: 'Value of the input', - control: { - type: 'text', - }, - }, - type: { - description: 'Type of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'date', - }, - }, - }, - // 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: { - label: 'Date', - align: 'left', - disabled: false, - placeholder: new Date().toLocaleDateString(), - themeType: 'secondary', - layer: 4, - value: '2023-10-26', - icon: , - activeHandler: (value: boolean) => console.log(value), - }, -}; - -export const WithError: Story = { - render: (args) => , - args: { - label: 'Date', - align: 'left', - disabled: false, - themeType: 'secondary', - layer: 4, - errorMessage: 'This is an error message', - activeHandler: (value: boolean) => console.log(value), - }, -}; diff --git a/src/Components/Organisms/FancyDateInput/FancyDateInput.style.tsx b/src/Components/Organisms/FancyDateInput/FancyDateInput.style.tsx deleted file mode 100644 index 68240ca43..000000000 --- a/src/Components/Organisms/FancyDateInput/FancyDateInput.style.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { css, styled } from 'styled-components'; -import RawInput, { IRawInput } from '../../atoms/RawInput/RawInput'; -import { getBackgroundColor } from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TLayer } from '@/interface/TLayer'; -import { IDateInputProps } from '../../molecules/DateInput/DateInput'; -import simpleColorTransition from '../../../design/designFunctions/simpleColorTransition/simpleTransition'; -import { TThemeTypes } from '@/interface/TUiColors'; - -interface IRawInputWrapper extends IRawInput { - value?: string; - $themeType?: TThemeTypes; - $layer?: TLayer; -} -export const StyledDatePicker = styled(RawInput)` - color: ${({ value }) => (value ? '' : 'transparent')}; - transition: color 0.3s ease-in; - - /* This renders a Placerholder in Text when its needed */ - ${({ placeholder, $themeType = 'secondary', $layer = 4, value, theme, align }) => { - if (placeholder && !value) { - return css` - &:not(:focus):before { - content: attr(placeholder); - width: 100%; - text-align: ${align}; - color: ${getBackgroundColor({ theme, $themeType, $layer })}; - position: absolute; - transition: all 0.3s ease-in-out; - pointer-events: none; - } - `; - } - }} - - /* This renders the calendar Icon with the color theme */ - &::-webkit-calendar-picker-indicator { - ${simpleColorTransition} - - ${({ theme, $themeType = 'secondary', $layer = 4 }) => css` - background-image: ${`url('data:image/svg+xml;utf8,')`}; - `}; - } -`; diff --git a/src/Components/Organisms/FancyDateInput/FancyDateInput.tsx b/src/Components/Organisms/FancyDateInput/FancyDateInput.tsx deleted file mode 100644 index e69b9a60d..000000000 --- a/src/Components/Organisms/FancyDateInput/FancyDateInput.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React, { useId, useState } from 'react'; - -import DateInput, { IDateInputPropsWithNativeAttrs } from '../../molecules/DateInput/DateInput'; -import InputWrapper, { IInputWrapperUserInputProps } from '../../molecules/InputWrapper/InputWrapper'; - -type IFancyDateInput = Omit & IDateInputPropsWithNativeAttrs; -// --------------------------------------------------------------------------- // -// ----The TextInput Comonent with surrounding icon, label and underline ----- // -// --------------------------------------------------------------------------- // -export default function FancyDateInput(props: IFancyDateInput) { - const { id, value, label, icon, errorMessage, align, disabled, activeHandler, themeType, layer, placeholder, ...inputProps } = props; - - //the states activity of the input - const [isActive, setIsActive] = useState(false); - - // if no id is provided, generate a random one - const useid = useId(); - const usedId = id ? id : useid; - - // handles the focus and blur events and calls the handler from the parent - const activeFocusHandler = (value: boolean) => { - setIsActive(value); - activeHandler && activeHandler(value); - }; - - return ( - - } - /> - ); -} diff --git a/src/Components/Organisms/FancyDateInput/index.ts b/src/Components/Organisms/FancyDateInput/index.ts deleted file mode 100644 index 0d9257618..000000000 --- a/src/Components/Organisms/FancyDateInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyDateInput } from './FancyDateInput'; diff --git a/src/Components/Organisms/FancyDatePicker/FancyDatePicker.stories.tsx b/src/Components/Organisms/FancyDatePicker/FancyDatePicker.stories.tsx deleted file mode 100644 index df5465739..000000000 --- a/src/Components/Organisms/FancyDatePicker/FancyDatePicker.stories.tsx +++ /dev/null @@ -1,132 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyDatePicker from './FancyDatePicker'; -import { IDateArray } from '../../molecules/RangeCalendar/IDateArray.model'; - -// Define metadata for the story -const meta = { - component: FancyDatePicker, - parameters: { - docs: { - description: { - component: 'Smart-Comonent: A fancy date picker with a range calendar and more', - }, - }, - }, - // Define arguments for the story - argTypes: { - rangeCalendar: { - description: 'Is Pickinga range of dates', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - handler: { - description: - 'Handler gives back the first and last date [first, last]... its not a RangePicker then it gives back the first date [frist, undefined]', - control: { - type: 'function', - }, - defaultValue: { - summary: '[undefined, undefined]', - }, - }, - selectedYear: { - description: 'Selected year', - control: { - type: 'number', - }, - defaultValue: { - summary: 'current year', - }, - }, - themeType: { - description: 'Theme type of the datepicker', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'Layer of the datepicker', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 1, - }, - }, - }, - // 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: { - rangeCalendar: false, - handler: (date: IDateArray) => console.log(date), - selectedYear: new Date().getFullYear(), - themeType: 'primary', - layer: 1, - externalData: { - 2023: [ - { - monthIdx: 0, - dates: [ - { - date: 1, - isAvilable: 'partially', - }, - { - date: 2, - isAvilable: 'not', - }, - { - date: 3, - isAvilable: 'transparent', - }, - ], - }, - { - monthIdx: 11, - dates: [ - { - date: 5, - isAvilable: 'partially', - }, - { - date: 7, - isAvilable: 'not', - }, - { - date: 2, - isAvilable: 'transparent', - }, - ], - }, - ], - }, - disabledDateSetting: { - disabledWeekdays: [1, 6], - disableWeekends: true, - disablePastDates: false, - }, - }, -}; diff --git a/src/Components/Organisms/FancyDatePicker/FancyDatePicker.style.tsx b/src/Components/Organisms/FancyDatePicker/FancyDatePicker.style.tsx deleted file mode 100644 index 1a112ebe9..000000000 --- a/src/Components/Organisms/FancyDatePicker/FancyDatePicker.style.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { styled } from 'styled-components'; - -import { TLayer } from '@/interface/TLayer'; -import getColorsForComponent, { - getBackgroundColor, -} from '../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponet'; -import { TTheme } from '@/interface/TTheme'; -import { TThemeTypes } from '@/interface/TUiColors'; - -export const DatePickerContainer = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` - display: flex; - flex-direction: column; - align-items: center; - ${({ theme, $themeType = 'primary', $layer = 1 }) => getColorsForComponent({ theme, $themeType, $layer })}; - border-radius: ${({ theme }) => theme.borderRadius.xl}; - padding: 20px; - width: 100%; - box-sizing: border-box; -`; - -export const WrapperYearSelector = styled.div<{ theme: TTheme }>` - width: 100%; - padding: ${({ theme }) => `${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.md}`}; - box-sizing: border-box; -`; - -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/Organisms/FancyDatePicker/FancyDatePicker.tsx b/src/Components/Organisms/FancyDatePicker/FancyDatePicker.tsx deleted file mode 100644 index 8c045f9ea..000000000 --- a/src/Components/Organisms/FancyDatePicker/FancyDatePicker.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -import YearSelector from '../../atoms/YearSelector/YearSelector'; -import WeekDays from '../../atoms/WeekDays/WeekDays'; -import RangeCalendar from '../../molecules/RangeCalendar/RangeCalendar'; -import { DatePickerContainer, WrapperWeekdays, WrapperYearSelector } from './FancyDatePicker.style'; -import IExternalYearWithMonths from '../../molecules/MonthWithDays/IExternalMonthWithDays.model'; -import DateOutputFromTo from '../../molecules/DateOutputFromTo/DateOutputFromTo'; -import { IDisabledDateSettings } from '../../molecules/MonthWithDays/IDisableDateSettings.model'; -import { IDateArray } from '../../molecules/RangeCalendar/IDateArray.model'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; - -interface IFancyDatePicker { - rangeCalendar?: boolean; - handler?: (date: IDateArray) => void; - selectedYear?: number; - disabledDateSetting?: IDisabledDateSettings; - externalData?: IExternalYearWithMonths; - themeType?: TThemeTypes; - layer?: TLayer; -} - -export default function FancyDatePicker(props: IFancyDatePicker) { - const { rangeCalendar, handler, selectedYear, disabledDateSetting, externalData, themeType, layer } = { ...defaultProps, ...props }; - const [selectedDate, setSelectedDate] = useState([new Date(), new Date()]); - const [currentlySelectedFromOrTo, setCurrentlySelectedFromOrTo] = useState<'from' | 'to'>('from'); - const [currentlySelectedYear, setCurrentlySelectedYear] = useState(new Date().getFullYear()); - const swapedTheme = themeType ? (themeType === 'primary' ? 'secondary' : 'primary') : undefined; - - const handleDateChange = (changedDate: IDateArray) => { - handler && handler(changedDate); - setSelectedDate(changedDate); - }; - - const handleSwitchFromTo = (change: 'from' | 'to') => { - setCurrentlySelectedFromOrTo(change); - }; - - useEffect(() => { - if (selectedYear) { - setCurrentlySelectedYear(selectedYear); - } - }, [selectedYear]); - - return ( - - - setCurrentlySelectedYear(year)} - themeType={swapedTheme} - layer={layer} - /> - - - - - - {rangeCalendar && ( - - )} - - ); -} - -const defaultProps: IFancyDatePicker = { - rangeCalendar: false, -}; diff --git a/src/Components/Organisms/FancyDatePicker/index.ts b/src/Components/Organisms/FancyDatePicker/index.ts deleted file mode 100644 index 098010256..000000000 --- a/src/Components/Organisms/FancyDatePicker/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyDatePicker } from './FancyDatePicker'; diff --git a/src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.stories.tsx b/src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.stories.tsx deleted file mode 100644 index a4fa1caca..000000000 --- a/src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.stories.tsx +++ /dev/null @@ -1,103 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyDropDownMenue from './FancyDropDownMenue'; - -// Define metadata for the story -const meta = { - component: FancyDropDownMenue, - parameters: { - docs: { - description: { - component: 'Smart-Comonent: A fancy date picker with a range calendar and more', - }, - }, - }, - // Define arguments for the story - argTypes: { - isOpen: { - description: 'Is the dropdown open', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - themeType: { - description: 'Theme type of the datepicker', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'Layer of the datepicker', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 1, - }, - }, - width: { - description: 'Width of the dropdown', - control: { - type: 'text', - }, - defaultValue: { - summary: '50%', - }, - }, - alignHorizontal: { - description: 'Horizontal alignment of the dropdown', - control: { - type: 'select', - }, - defaultValue: { - summary: 'center', - }, - }, - alignVertical: { - description: 'Vertical alignment of the dropdown', - control: { - type: 'select', - }, - defaultValue: { - summary: 'top', - }, - }, - }, - // 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: { - isOpen: false, - themeType: 'primary', - layer: 1, - width: '50%', - alignHorizontal: 'center', - alignVertical: 'top', - children: ( - <> -

test

-

test

- - ), - }, -}; diff --git a/src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx b/src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx deleted file mode 100644 index 6c356f8de..000000000 --- a/src/Components/Organisms/FancyDropDownMenue/FancyDropDownMenue.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useEffect, useState } from 'react'; - -import FancyUL, { IFancyUL } from '../../molecules/FancyDropDownUL/FancyDropDownUL'; -import UseDelay from '../../utils/components/UseDelay/UseDelay'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; - -// --------------------------------------------------------------------------- // -// ------------ The main component that renders the dropdown menu ------------ // -// --------------------------------------------------------------------------- // -interface IFancyDropDownMenue extends IFancyUL { - isOpen?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; -} -export default function FancyDropDownMenue(props: IFancyDropDownMenue) { - const { isOpen } = props; - const [isOpenState, setIsOpenState] = useState(isOpen); - const [fristRender, setFristRender] = useState(false); - - // This useEffect hook sets the fristRender state to true after the component mounts - useEffect(() => { - setFristRender(true); - }, []); - - useEffect(() => { - if (isOpen) { - setIsOpenState(true); - } else { - setIsOpenState(false); - } - }, [isOpen]); - - // This component returns the FancyUL component wrapped in a UseDelay component - return fristRender ? ( - - - - ) : null; -} diff --git a/src/Components/Organisms/FancyDropDownMenue/index.ts b/src/Components/Organisms/FancyDropDownMenue/index.ts deleted file mode 100644 index 7673c246f..000000000 --- a/src/Components/Organisms/FancyDropDownMenue/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyDropDownMenue } from './FancyDropDownMenue'; diff --git a/src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx b/src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx deleted file mode 100644 index 8c68acb1a..000000000 --- a/src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.stories.tsx +++ /dev/null @@ -1,148 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyDropDownSelect from './FancyDropDownSelect'; - -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -// Define metadata for the story -const meta = { - component: FancyDropDownSelect, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: A fancy dropdown select with label, icon and error message and more', - }, - }, - }, - // Define arguments for the story - argTypes: { - label: { - description: 'Label for the input', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - placeholder: { - description: 'Placeholder for the input', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - disabled: { - description: 'Disable the input', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - align: { - description: 'Alignment of the label', - control: { - type: 'radio', - }, - defaultValue: { - summary: 'left', - }, - }, - themeType: { - description: 'Theme type of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'Layer of the input', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 4, - }, - }, - isActive: { - description: 'Is the input in focus', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - errorMessage: { - description: 'Error message to be displayed', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - values: { - description: 'Values for the dropdown', - control: { - type: 'array', - }, - defaultValue: { - summary: [], - }, - }, - value: { - description: 'The picked value of the dropdown', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - emptySelect: { - description: 'A Empty Item that is selectable', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - activeHandler: { - description: 'Handler gives back if the dropdown is on focused', - control: { - type: 'function', - }, - }, - }, - // 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: { - icon: , - label: 'Label', - placeholder: 'Placeholder', - values: ['test1', 'test2', 'test3'], - }, -}; diff --git a/src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.tsx b/src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.tsx deleted file mode 100644 index 71c9f95aa..000000000 --- a/src/Components/Organisms/FancyDropDownSelect/FancyDropDownSelect.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useId, useState } from 'react'; - -import InputWrapper from '../../molecules/InputWrapper/InputWrapper'; -import DropDownSelect, { IDropDownSelect } from '../../atoms/DropDownSelect/DropDownSelect'; - -import { IInputWrapperUserInputProps } from '../../molecules/InputWrapper/InputWrapper'; - -export type IFancyDropDownSelect = Omit & IDropDownSelect; - -// --------------------------------------------------------------------------- // -// ----The Dropdown Comonent with surrounding icon, label and underline ------ // -// --------------------------------------------------------------------------- // -export default function FancyDropDownSelect(props: IFancyDropDownSelect) { - const { id, value, placeholder, disabled, align, activeHandler, icon, label, errorMessage, themeType, layer, ...inputProps } = props; - - //the states for the value and the activity of the input - const [isActive, setIsActive] = useState(false); - - // if no id is provided, generate a random one - const useid = useId(); - const usedId = id ? id : useid; - - // handles the focus and blur events and calls the handler from the parent - const activeFocusHandler = (value: boolean) => { - setIsActive(value); - activeHandler && activeHandler(value); - }; - - return ( - - } - /> - ); -} diff --git a/src/Components/Organisms/FancyDropDownSelect/index.ts b/src/Components/Organisms/FancyDropDownSelect/index.ts deleted file mode 100644 index f46fdc4e0..000000000 --- a/src/Components/Organisms/FancyDropDownSelect/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyDropDownSelect } from './FancyDropDownSelect'; diff --git a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/ButtonSettings.tsx b/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/ButtonSettings.tsx deleted file mode 100644 index cd196a6ba..000000000 --- a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/ButtonSettings.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import editBarIcons from './EditBarIcons'; -import { languagesEditBarEN } from '../languagesEditBar'; -const language = languagesEditBarEN; -import { IFancyBottomBarIcon } from '../../../templates/FancyBottomBarIcon/FancyBottomBarIcon'; -import { useEditBarStore } from '../../../molecules/EditBar/EditBar.state'; - -const setActiveBarItem = useEditBarStore.getState().setActiveEditbarItem; -const setActiveSecondBarItem = useEditBarStore.getState().setActiveSecondEditbarItem; - -type TButtonSettings = { - [key: string]: IFancyBottomBarIcon; -}; - -const groupButtons: TButtonSettings = { - color: { - id: 'color', - label: language.sectionSectionBox.color.label, - icon: editBarIcons.color, - onClick: () => setActiveBarItem('color'), - }, - distance: { - id: 'distance', - label: language.sectionSectionBox.distance.label, - icon: editBarIcons.distance, - onClick: () => setActiveBarItem('distance'), - }, - border: { - id: 'border', - label: language.sectionSectionBox.border.label, - icon: editBarIcons.border, - onClick: () => setActiveBarItem('border'), - }, - shadow: { - id: 'shadow', - label: language.sectionSectionBox.shadow.label, - icon: editBarIcons.shadow, - onClick: () => setActiveBarItem('shadow'), - }, -}; - -const buttonSettings: TButtonSettings = { - color: { - id: 'color', - label: language.sectionSectionBox.color.label, - icon: editBarIcons.color, - onClick: () => setActiveSecondBarItem('color'), - }, - distanceVertical: { - id: 'distanceVertical', - label: language.settings.distanceVertical.label, - icon: editBarIcons.distanceVertical, - onClick: () => setActiveSecondBarItem('distanceVertical'), - }, - distanceHorizontal: { - id: 'distanceHorizontal', - label: language.settings.distanceHorizontal.label, - icon: editBarIcons.distanceHorizontal, - onClick: () => setActiveSecondBarItem('distanceHorizontal'), - }, - distanceLeft: { - id: 'distanceLeft', - label: language.settings.distanceLeft.label, - icon: editBarIcons.distanceLeft, - onClick: () => setActiveSecondBarItem('distanceLeft'), - }, - distanceRight: { - id: 'distanceRight', - label: language.settings.distanceRight.label, - icon: editBarIcons.distanceRight, - onClick: () => setActiveSecondBarItem('distanceRight'), - }, - distanceTop: { - id: 'distanceTop', - label: language.settings.distanceTop.label, - icon: editBarIcons.distanceTop, - onClick: () => setActiveSecondBarItem('distanceTop'), - }, - distanceBottom: { - id: 'distanceBottom', - label: language.settings.distanceBottom.label, - icon: editBarIcons.distanceBottom, - onClick: () => setActiveSecondBarItem('distanceBottom'), - }, - thikness: { - id: 'thikness', - label: language.settings.thikness.label, - icon: editBarIcons.thikness, - onClick: () => setActiveSecondBarItem('thikness'), - }, - radius: { - id: 'radius', - label: language.settings.radius.label, - icon: editBarIcons.radius, - onClick: () => setActiveSecondBarItem('radius'), - }, - strength: { - id: 'strength', - label: language.settings.strength.label, - icon: editBarIcons.thikness, - onClick: () => setActiveSecondBarItem('strength'), - }, -}; - -export default buttonSettings; -export { groupButtons }; diff --git a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/EditBarIcons.tsx b/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/EditBarIcons.tsx deleted file mode 100644 index e3367d251..000000000 --- a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/EditBarIcons.tsx +++ /dev/null @@ -1,89 +0,0 @@ -const editBarIcons = { - distance: ( - - - - - ), - color: ( - - - - - ), - border: ( - - - - - ), - shadow: ( - - - - ), - position: ( - - - - ), - distanceVertical: ( - - - - ), - distanceHorizontal: ( - - - - ), - distanceLeft: ( - - - - - ), - distanceRight: ( - - - - - ), - distanceTop: ( - - - - - ), - distanceBottom: ( - - - - - ), - thikness: ( - - - - ), - radius: ( - - - - ), - background: ( - - - - ), - text: ( - - - - ), -}; - -export default editBarIcons; diff --git a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/IEditbarObjectSturcture.model.ts b/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/IEditbarObjectSturcture.model.ts deleted file mode 100644 index e77e63588..000000000 --- a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/IEditbarObjectSturcture.model.ts +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; - -import { IFancyBottomBarIcon } from '../../../templates/FancyBottomBarIcon/FancyBottomBarIcon'; -import FancyDropDownSelect from '../../FancyDropDownSelect/FancyDropDownSelect'; -import FancyTextInput from '../../FancyTextInput/FancyTextInput'; -import IFancyRangeSlider from '../../FancyRangeSlider/FancyRangeSlider.model'; -import { ITabSwitchProps } from '../../../molecules/TabSwitch/TabSwitch.model'; - -// --------------------------------------------------------------------------- // -// ---------- thes interfaces map the strings and JSX Item together ---------- // -// --------------------------------------------------------------------------- // - -//the input types wich the editbar can have -interface ISettingsItem { - settingsType: 'textInput' | 'select' | 'slider' | 'dropDown' | 'tab'; -} - -//---------- The mapped interfaces ----------// -export interface IDropDown extends ISettingsItem, React.ComponentProps { - settingsType: 'dropDown'; -} - -export interface ITextInput extends ISettingsItem, React.ComponentProps { - settingsType: 'textInput'; -} - -export interface IRangeSlider extends ISettingsItem, IFancyRangeSlider { - settingsType: 'slider'; -} - -export interface ITab extends ISettingsItem, ITabSwitchProps { - settingsType: 'tab'; -} - -// types which the settings array can have -export type InputSettings = ITextInput | IDropDown | IRangeSlider | ITab; - -// SubsectionSettingItem interface -//One Item has a subsectionItem(title, icon etc.) and settings (input, select, slider etc.) array -interface SubsectionSettingItem { - subsectionItem: IFancyBottomBarIcon; - settings: Array | null; -} - -// SubsectionSettingItems interface -interface SubsectionSettingItems { - [key: string]: SubsectionSettingItem; -} - -// ISectionItem interface -export interface ICategoryItem { - id: string; - sectionItem: IFancyBottomBarIcon; - subsectionSettingItems: SubsectionSettingItems; -} - -// ISection type -export type ICategory = ICategoryItem[]; diff --git a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/objectSettingsSection.ts b/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/objectSettingsSection.ts deleted file mode 100644 index 031e488dc..000000000 --- a/src/Components/Organisms/FancyEditBar/EditBarItemsStructure/objectSettingsSection.ts +++ /dev/null @@ -1,157 +0,0 @@ -import buttonSettings, { groupButtons } from './ButtonSettings'; -import { ICategory } from './IEditbarObjectSturcture.model'; - -//Dummy Category Box for demonstration -//the item is build up with three categories [mainCategoryItems (Arry) ---> SubSectionItems(Object) ---> Settings ---> ] -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const dummyItem = [ - { - //the CategoryItem is build up in SectionItem(displayed for the bar) and the SubsectionSettingItems - id: 'distance', - sectionItem: buttonSettings.distance, - subsectionSettingItems: { - //here are listed the items for the subsection (not in an array but in an object) - - distanceVertical: { - // this is like one SubSection Items looks like SectionItem and the settings array - subsectionItem: buttonSettings.distanceVertical, - settings: [ - //this is the settings array this sttings are displayed on the modal over the editbar - { - settingsType: 'textInput', - type: 'text', - label: 'Test1', - align: 'center', - }, - { - settingsType: 'textInput', - type: 'text', - label: 'Test1', - align: 'center', - }, - ], - }, - }, - }, -]; - -const sectionSectionBox: ICategory = [ - { - id: 'distance', - sectionItem: groupButtons.distance, - subsectionSettingItems: { - distanceVertical: { - subsectionItem: buttonSettings.distanceVertical, - settings: [ - { - settingsType: 'textInput', - label: 'Test1', - align: 'center', - }, - { - settingsType: 'textInput', - label: 'Test1', - align: 'center', - }, - ], - }, - distanceHorizontal: { - subsectionItem: buttonSettings.distanceHorizontal, - settings: [ - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - ], - }, - distanceLeft: { - subsectionItem: buttonSettings.distanceLeft, - settings: [ - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - ], - }, - distanceRight: { - subsectionItem: buttonSettings.distanceRight, - settings: [ - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - { - settingsType: 'dropDown', - label: 'Test', - }, - ], - }, - }, - }, - { - id: 'shadow', - sectionItem: groupButtons.shadow, - subsectionSettingItems: { - shadowPosition: { - subsectionItem: buttonSettings.shadow, - settings: [ - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - ], - }, - shadowStrength: { - subsectionItem: buttonSettings.strength, - settings: [ - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - ], - }, - shadowColor: { - subsectionItem: buttonSettings.color, - settings: [ - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - { - settingsType: 'textInput', - label: 'Test', - align: 'center', - }, - ], - }, - }, - }, -]; - -export default sectionSectionBox; diff --git a/src/Components/Organisms/FancyEditBar/EditBarSettings.tsx b/src/Components/Organisms/FancyEditBar/EditBarSettings.tsx deleted file mode 100644 index e104592e6..000000000 --- a/src/Components/Organisms/FancyEditBar/EditBarSettings.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import sectionSectionBox from './EditBarItemsStructure/objectSettingsSection'; - -// --------------------------------------------------------------------------- // -// ---------- Here are the design variants for sizing and alignment ---------- // -// --------------------------------------------------------------------------- // -export const mainSectionCreator = (sectionFor: 'header' | 'sectionBox' | 'background') => { - switch (sectionFor) { - case 'header': - //return sectionHeader; - break; - case 'sectionBox': - return sectionSectionBox; - case 'background': - - //return sectionBackground; - } -}; diff --git a/src/Components/Organisms/FancyEditBar/FancyEditBar.state.tsx b/src/Components/Organisms/FancyEditBar/FancyEditBar.state.tsx deleted file mode 100644 index 5d1ef03ac..000000000 --- a/src/Components/Organisms/FancyEditBar/FancyEditBar.state.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { create } from 'zustand'; -import { IFancyBottomBarIcon } from '../../templates/FancyBottomBarIcon/FancyBottomBarIcon'; -import { ICategoryItem } from './EditBarItemsStructure/IEditbarObjectSturcture.model'; - -// --------------------------------------------------------------------------- // -// ------------- The Interface structure for the useEditBarStore ------------- // -// --------------------------------------------------------------------------- // -interface EditBarModuleStore { - //the current items for the main bar - currentItems: IFancyBottomBarIcon[] | null; - setCurrentItems: (items: IFancyBottomBarIcon[]) => void; - - //the active setting for the editbar - activeEditbarCategory: ICategoryItem | null; - setActiveEditbarCategory: (setting: ICategoryItem | null) => void; - - //the current items for the second bar - secondCurrentItems: IFancyBottomBarIcon[] | null; - setSecondCurrentItems: (items: IFancyBottomBarIcon[]) => void; - - //the active setting for the editbar - activeSetting: string | null; - setActiveSetting: (setting: string) => void; -} - -// --------------------------------------------------------------------------- // -// --------------- This is the global state for the editbar ------------------ // -// --------------------------------------------------------------------------- // -export const useFancyEditBarStore = create((set) => ({ - activeEditbarCategory: null, - setActiveEditbarCategory: (setting) => set(() => ({ activeEditbarCategory: setting })), - - //The State for the currently set bar items - currentItems: null, - setCurrentItems: (items) => set(() => ({ currentItems: items })), - - //The State for the second bar items they currently set - secondCurrentItems: null, - setSecondCurrentItems: (items) => set(() => ({ secondCurrentItems: items })), - - //The State for the active setting - activeSetting: null, - setActiveSetting: (setting) => set(() => ({ activeSetting: setting })), -})); diff --git a/src/Components/Organisms/FancyEditBar/FancyEditBar.tsx b/src/Components/Organisms/FancyEditBar/FancyEditBar.tsx deleted file mode 100644 index b44ab024e..000000000 --- a/src/Components/Organisms/FancyEditBar/FancyEditBar.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useEffect, useState } from 'react'; -import EditBar from '../../molecules/EditBar/EditBar'; -import { mainSectionCreator } from './EditBarSettings'; -import { useEditBarStore } from '../../molecules/EditBar/EditBar.state'; - -import { ICategory } from './EditBarItemsStructure/IEditbarObjectSturcture.model'; -import { useFancyEditBarStore } from './FancyEditBar.state'; -import { getObjectMapper, getSubSectionItems } from './functions/ElementsObjectMapper'; - -export default function FancyEditBar({ active, sectionType }: { active?: boolean; sectionType: 'header' | 'sectionBox' | 'background' }) { - // Hooks to get and set state values from the edit bar store - const currentEditBarItems = useFancyEditBarStore((state) => state.currentItems); - const setCurrentEditBarItems = useFancyEditBarStore((state) => state.setCurrentItems); - - const activeEditbarItem = useEditBarStore((state) => state.activeEditbarItem); - const setActiveEditbarItem = useEditBarStore((state) => state.setActiveEditbarItem); - const activeSubSectionItem = useEditBarStore((state) => state.activeSecondEditbarItem); - - const activeEditbarCategory = useFancyEditBarStore((state) => state.activeEditbarCategory); - const setActiveEditbarCategory = useFancyEditBarStore((state) => state.setActiveEditbarCategory); - - //thhe state with the current editbar items - const [editBar, setEditBar] = useState(); - - // Get sub-section items and settings - const currentSubSectionItems = getSubSectionItems({ activeEditbarCategory }); - const currentSettings = getObjectMapper({ activeEditbarCategory, activeSubSectionItem }); - - // Update activeEditbarCategory based on activeEditbarItem - useEffect(() => { - const getEditBarSetting = editBar?.find((item) => item.id === activeEditbarItem); - - setActiveEditbarCategory(getEditBarSetting || null); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [activeEditbarItem]); - - // Reset activeEditbarItem when the active prop changes to false - useEffect(() => { - if (!active) { - setActiveEditbarItem(null); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [active]); - - // Update currentEditBarItems when the editBar state changes (when the sectionType changes) - useEffect(() => { - const currentEditBarItems = editBar?.map((item) => item.sectionItem); - setCurrentEditBarItems(currentEditBarItems!); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [editBar]); - - // Initialize editBar and currentEditBarItems based on sectionType - useEffect(() => { - // Generate the edit bar based on the sectionType Image / Section / Background - const createDynamicSection = mainSectionCreator(sectionType); - setEditBar(createDynamicSection); - }, [sectionType]); - - // Render the EditBar component if active - return ( -
- {active && } -
- ); -} diff --git a/src/Components/Organisms/FancyEditBar/functions/ElementsObjectMapper.tsx b/src/Components/Organisms/FancyEditBar/functions/ElementsObjectMapper.tsx deleted file mode 100644 index 0400b8538..000000000 --- a/src/Components/Organisms/FancyEditBar/functions/ElementsObjectMapper.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { IFancyBottomBarIcon } from '../../../templates/FancyBottomBarIcon/FancyBottomBarIcon'; -import { ICategoryItem, IDropDown, IRangeSlider, ITextInput, InputSettings } from '../EditBarItemsStructure/IEditbarObjectSturcture.model'; - -import { FancyTextInput } from '../../FancyTextInput'; -import FancyDropDownSelect from '../../FancyDropDownSelect/FancyDropDownSelect'; -import FancyRangeSlider from '../../FancyRangeSlider/FancyRangeSlider'; -import FancyTabSwitch from '../../../molecules/FancyTabSwitch/FancyTabSwitch'; -import { ITabSwitchProps } from '../../../molecules/TabSwitch/TabSwitch.model'; - -// --------------------------------------------------------------------------- // -// --------- Give back a Element of the the specified item string ------------ // -// --------------------------------------------------------------------------- // -const settingsToJSXMapper = (itemObject: InputSettings) => { - const { settingsType, ...inputProps } = itemObject; - - switch (settingsType) { - case 'textInput': - return ; - case 'dropDown': - return ; - case 'slider': - return ; - case 'tab': - return ; - } -}; - -// --------------------------------------------------------------------------- // -// ------ get the items of SubSection based on the active category item ------ // -// --------------------------------------------------------------------------- // -interface IObjectMapper { - activeEditbarCategory: ICategoryItem | null; - activeSubSectionItem: string | null; -} - -// Get settings based on active category of and the activeSubSectionItem -export const getObjectMapper = ({ activeEditbarCategory, activeSubSectionItem }: IObjectMapper): React.ReactElement[] | null => { - //get the values and check if they there - if (!activeEditbarCategory || !activeSubSectionItem) return null; - - //get the JSX SETTINGS from the currently ACTIVE CATEGORY ---> ACTIVE SUBSECTION ---> and get the SETTINGS - const currentActiveSettings = activeEditbarCategory.subsectionSettingItems[activeSubSectionItem].settings; - - console.log('currentActiveSettings', currentActiveSettings, activeEditbarCategory); - //map the settings to JSX - const JSXElements = currentActiveSettings ? currentActiveSettings.map((item) => settingsToJSXMapper(item)) : null; - - return JSXElements; -}; - -// --------------------------------------------------------------------------- // -// ------ get the items of SubSection based on the active Section item ------- // -// --------------------------------------------------------------------------- // -interface ICategoryItems { - activeEditbarCategory: ICategoryItem | null; -} - -// Get the current sub-section items from the activeEditbarCategory -export const getSubSectionItems = ({ activeEditbarCategory }: ICategoryItems): IFancyBottomBarIcon[] | null => { - if (!activeEditbarCategory) return null; - const getSubsetionItems = activeEditbarCategory.subsectionSettingItems; - - //return the SubSectionItems of the values form the object - return Object.values(getSubsetionItems).map((item) => item.subsectionItem); -}; diff --git a/src/Components/Organisms/FancyEditBar/index.ts b/src/Components/Organisms/FancyEditBar/index.ts deleted file mode 100644 index d0c7cf875..000000000 --- a/src/Components/Organisms/FancyEditBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyEditBar } from './FancyEditBar'; diff --git a/src/Components/Organisms/FancyEditBar/languagesEditBar.ts b/src/Components/Organisms/FancyEditBar/languagesEditBar.ts deleted file mode 100644 index e9f722ddb..000000000 --- a/src/Components/Organisms/FancyEditBar/languagesEditBar.ts +++ /dev/null @@ -1,23 +0,0 @@ -export const languagesEditBarEN = { - sectionSectionBox: { - distance: { label: 'Distance' }, - color: { label: 'Color' }, - border: { label: 'Border' }, - shadow: { label: 'Shadow' }, - }, - settings: { - distanceVertical: { label: 'Vertical' }, - distanceHorizontal: { label: 'Horizontal' }, - distanceTop: { label: 'Top' }, - distanceBottom: { label: 'Bottom' }, - distanceLeft: { label: 'Left' }, - distanceRight: { label: 'Right' }, - thikness: { label: 'Thikness' }, - radius: { label: 'Radius' }, - shadow: { label: 'Shadow' }, - position: { label: 'Position' }, - strength: { label: 'Strength' }, - color: { label: 'Color' }, - background: { label: 'Background' }, - }, -}; diff --git a/src/Components/Organisms/FancyModal/FancyModal.mdx b/src/Components/Organisms/FancyModal/FancyModal.mdx deleted file mode 100644 index 8735fd2df..000000000 --- a/src/Components/Organisms/FancyModal/FancyModal.mdx +++ /dev/null @@ -1,72 +0,0 @@ -## FancyModal Documentation - -### Overview - -The FancyModal component, streamlined with the `useFancyModalStore`, presents a modern approach to creating and managing modals in your applications. This approach simplifies the integration process by handling modal configurations automatically, allowing developers to effortlessly incorporate modals without the complications of manual prop settings. - -### Setting Up FancyModal - -1. **Render the Main Component in the Base File**: - - Ensure that the `` component is added to a suitable location in your main file for correct modal behavior. - -2. **Specify the DOM Element for Rendering**: - - Designate a DOM element to serve as the container for the modal. For example: - - ```html -
- ``` - -### Implementing the Modal - -1. **Import the Store in the Component**: - - Within the component where you plan to initiate the modal, start by importing the `useFancyModalStore`. - - ```javascript - const openModal = useFancyModalStore((state) => state.openModal); - ``` - -2. **Open the Modal**: - - To display the modal, employ the `openModal` function. This function requires the following parameters: - - - `appendToDomID`: The ID corresponding to the DOM element where the modal will appear. - - Child components: The specific content or components you want to show within the modal. - - Configuration object: This sets various modal properties. - - ```javascript - const openModalHandler = () => { - openModal( - 'modalTest', -
- - closeModal('modalTest')} label="Close Modal"> -
, - { - isCloseAble: false, - } - ); - }; - ``` - -3. **Close the Modal**: - - To terminate an active modal, use the `closeModal` method from the `useFancyModalStore`. - - ```javascript - const closeModal = useFancyModalStore((state) => state.closeModal); - ``` - - Subsequently, invoke `closeModal` using the ID of the modal you wish to shut, as depicted in the `openModalHandler` example. - -### Configuration Options - -The FancyModal's adaptability is showcased through the configuration object provided during modal initiation. One available option is: - -- `isCloseAble`: A boolean that denotes whether users can manually terminate the modal. - -### Conclusion - -The evolved FancyModal, bolstered by `useFancyModalStore`, offers developers a smoother and more intuitive modal management experience. This refurbished framework undeniably simplifies the modal integration process, ensuring both efficient development and streamlined user interactions. diff --git a/src/Components/Organisms/FancyModal/FancyModal.state.tsx b/src/Components/Organisms/FancyModal/FancyModal.state.tsx deleted file mode 100644 index 7f252cff2..000000000 --- a/src/Components/Organisms/FancyModal/FancyModal.state.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { create } from 'zustand'; - -import { TModalStatus } from '../../../interface/TModalStatus'; -import { IModal } from '../../molecules/Modal/Modal'; - -type TModalConfig = Omit; - -type IModals = { - id: string; - children: React.ReactNode; - status: TModalStatus; - config?: TModalConfig; -}; - -// openModal(id,
hi
, {}) - -// --------------------------------------------------------------------------- // -// --------------------- The state for the ModalModuel ----------------------- // -// --------------------------------------------------------------------------- // -interface IModalModule { - modals: IModals[]; - openModal: (id: string, content: React.ReactNode, config: TModalConfig) => void; - removeModal: (id: string) => void; - closeModal: (id: string) => void; -} -export const useFancyModalStore = create((set) => ({ - // the state array for the modals - modals: [], - // add a new modal to the state array - openModal: (id, children, config) => - set((state) => ({ - modals: [...state.modals, { id, children, status: 'open', config }], - })), - // change the status of the modal to closing - closeModal: (id) => - set((state) => ({ - modals: state.modals.map((modal) => (modal.id === id ? { ...modal, status: 'closing' } : modal)), - })), - // remove the modal from the state array - removeModal: (id) => - set((state) => ({ - modals: state.modals.filter((modal) => modal.id !== id), - })), -})); diff --git a/src/Components/Organisms/FancyModal/FancyModal.stories.tsx b/src/Components/Organisms/FancyModal/FancyModal.stories.tsx deleted file mode 100644 index 2f4b77634..000000000 --- a/src/Components/Organisms/FancyModal/FancyModal.stories.tsx +++ /dev/null @@ -1,72 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyModal from './FancyModal'; -import { useFancyModalStore } from './FancyModal.state'; -import { FancyButton } from '../FancyButton'; -import { IModal } from '../../molecules/Modal/Modal'; -import { FancyTextInput } from '../FancyTextInput'; - -// Define metadata for the story -const meta = { - component: HelperComponent, - title: 'components/ui/organisms/FancyModal', - parameters: { - docs: { - description: { - component: 'Smart-Comonent: The FancyModal is a smart component that handles all the logic for the Modal.', - }, - }, - }, - // Define arguments for the story - argTypes: {}, - // Add tags to the story -} satisfies Meta; - -// Export the metadata -export default meta; -// Define the story object -type Story = StoryObj; - -function HelperComponent(props: React.ComponentProps & Omit) { - const { appendToDomID, children, ...configProps } = props; - const openModal = useFancyModalStore((state) => state.openModal); - const closeModal = useFancyModalStore((state) => state.closeModal); - - const openModalHandler = () => { - openModal( - appendToDomID || 'modalTest', - children || ( -
- - closeModal('modalTest')} label="Close Modal"> -
- ), - configProps || { - isCloseAble: false, - } - ); - }; - return ( - <> - - openModalHandler()} /> - - ); -} - -HelperComponent.displayName = 'FancyModal'; - -// Define the primary story -export const Primary: Story = { - render: (args) => ( - <> - - - - ), - args: { - appendToDomID: '', - }, -}; diff --git a/src/Components/Organisms/FancyModal/FancyModal.tsx b/src/Components/Organisms/FancyModal/FancyModal.tsx deleted file mode 100644 index 7b1ba0616..000000000 --- a/src/Components/Organisms/FancyModal/FancyModal.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; - -import { useFancyModalStore } from './FancyModal.state'; -import Modal from '../../molecules/Modal/Modal'; -import FancyPortal from '../../utils/components/FancyPortal/FancyPortal'; - -// ---------- How to use the Module ------- // -//--- use it -// Append this module to the root of the app you dont need to pass any props -// just use the useModalModuleStore to open a modal -//--- open modal -// useModalModuleStore.openModal( 'ID', , '{CONFIG OBJECT}) -//--- close modal -// when you want to close the modal with a custom button just use the closeModal function with the "ID" of the modal -// useModalModuleStore.closeModal('id') - -// --------------------------------------------------------------------------- // -// ----------------- The modalModule to build up a Moadal ------------------- // -// --------------------------------------------------------------------------- // -interface IFancyModal { - appendToDomID: string; -} -export default function FancyModal({ appendToDomID }: IFancyModal) { - const modals = useFancyModalStore((state) => state.modals); - const closeModal = useFancyModalStore((state) => state.closeModal); - const removeModal = useFancyModalStore((state) => state.removeModal); - - const closeModalHandler = (id: string) => { - // closing the modal is a two step process - // first we set the status to "closing" with the closeModal function - // this will trigger the animation in the modal component - closeModal(id); - - //wait for the animation and remove the modal from the store - setTimeout(() => { - removeModal(id); - }, 300); - }; - - return ( - <> - {/* ----- The FancModal Ports the Modal out of the root div in the spearte "modal" div ----- */} - - {modals.map((modal, key) => ( - closeModalHandler(modal.id)} {...modal.config}> - {/* ----- The Content of the Modal ----- */} - {modal.children} - - ))} - - - ); -} diff --git a/src/Components/Organisms/FancyModal/index.ts b/src/Components/Organisms/FancyModal/index.ts deleted file mode 100644 index 5e17e9e55..000000000 --- a/src/Components/Organisms/FancyModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyModal } from './FancyModal'; diff --git a/src/Components/Organisms/FancyNumberInput/FancyNumberInput.tsx b/src/Components/Organisms/FancyNumberInput/FancyNumberInput.tsx deleted file mode 100644 index 295850594..000000000 --- a/src/Components/Organisms/FancyNumberInput/FancyNumberInput.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useId, useState } from 'react'; -import NumberInput, { INumberInput } from '../../molecules/NumberInput/NumberInput'; -import InputWrapper, { IInputWrapperUserInputProps } from '../../molecules/InputWrapper/InputWrapper'; - -type IFancyNumberInput = INumberInput & IInputWrapperUserInputProps & { autoWidth?: boolean }; - -// --------------------------------------------------------------------------- // -// ----The NumberInput Comonent with surrounding icon, label and underline --- // -// --------------------------------------------------------------------------- // -export default function FancyNumberInput(props: IFancyNumberInput) { - const { value, label, icon, activeHandler, disabled, errorMessage, align, id, themeType, layer, autoWidth, placeholder, ...inputProps } = - props; - - //the states activity of the input - const [isActive, setIsActive] = useState(false); - - // if no id is provided, generate a random one - const useid = useId(); - const usedId = id ? id : useid; - - // handles the focus and blur events and calls the handler from the parent - const activeFocusHandler = (value: boolean) => { - setIsActive(value); - activeHandler && activeHandler(value); - }; - - return ( - - } - /> - ); -} diff --git a/src/Components/Organisms/FancyNumberInput/index.ts b/src/Components/Organisms/FancyNumberInput/index.ts deleted file mode 100644 index 1ff247088..000000000 --- a/src/Components/Organisms/FancyNumberInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyNumberInput } from './FancyNumberInput'; diff --git a/src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx b/src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx deleted file mode 100644 index 36696c9a2..000000000 --- a/src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.stories.tsx +++ /dev/null @@ -1,102 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyPasswordInput from './FancyPasswordInput'; - -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -// Define metadata for the story -const meta = { - component: FancyPasswordInput, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The FancyPasswordInput Comonent with surrounding icon, label and underline', - }, - }, - }, - // Define arguments for the story - argTypes: { - value: { - description: 'The value of the input', - control: { - type: 'text', - }, - }, - align: { - description: 'The alignment of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'left', - }, - }, - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'The layer of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: '4', - }, - }, - label: { - description: 'The label of the input', - control: { - type: 'text', - }, - }, - icon: { - description: 'The icon of the input', - defaultValue: { - summary: 'none', - }, - }, - isActive: { - description: 'Is the input focused', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - errorMessage: { - description: 'The error message of the input', - control: { - type: 'text', - }, - }, - }, - // 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: { - align: 'left', - themeType: 'secondary', - layer: 4, - label: 'Password', - icon: , - isActive: false, - }, -}; diff --git a/src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.tsx b/src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.tsx deleted file mode 100644 index 3a956ee82..000000000 --- a/src/Components/Organisms/FancyPasswordInput/FancyPasswordInput.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React, { useId, useState } from 'react'; -import PasswordInput, { IPasswordInputProps } from '../../molecules/PasswordInput/PasswordInput'; - -import InputWrapper, { IInputWrapperUserInputProps } from '../../molecules/InputWrapper/InputWrapper'; -type IFancyTextInputProps = IPasswordInputProps & Omit; - -// --------------------------------------------------------------------------- // -// ----The PasswordInput Comonent with surrounding icon, label and underline-- // -// --------------------------------------------------------------------------- // -export default function FancyPasswordInput(props: IFancyTextInputProps) { - const { id, value, placeholder, activeHandler, errorMessage, disabled, align, themeType, layer, icon, label, ...inputProps } = props; - - //the states activity of the input - const [isActive, setIsActive] = useState(false); - - // if no id is provided, generate a random one - const useid = useId(); - const usedId = id ? id : useid; - - // handles the focus and blur events and calls the handler from the parent - const activeFocusHandler = (value: boolean) => { - setIsActive(value); - activeHandler && activeHandler(value); - }; - - return ( - - } - /> - ); -} diff --git a/src/Components/Organisms/FancyPasswordInput/index.ts b/src/Components/Organisms/FancyPasswordInput/index.ts deleted file mode 100644 index 48ceea88d..000000000 --- a/src/Components/Organisms/FancyPasswordInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyPasswordInput } from './FancyPasswordInput'; diff --git a/src/Components/Organisms/FancyRadio/FancyRadio.tsx b/src/Components/Organisms/FancyRadio/FancyRadio.tsx deleted file mode 100644 index bb08883a2..000000000 --- a/src/Components/Organisms/FancyRadio/FancyRadio.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useId } from 'react'; - -import FancySelectWrapper from '@/components/molecules/FancySelectWrapper/FancySelectWrapper'; -import { RawRadio } from '@/components/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/Organisms/FancyRadio/index.ts b/src/Components/Organisms/FancyRadio/index.ts deleted file mode 100644 index 1c6f79482..000000000 --- a/src/Components/Organisms/FancyRadio/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyRadio } from './FancyRadio'; diff --git a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts b/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts deleted file mode 100644 index 3d22b61c9..000000000 --- a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.model.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { ChangeEvent } from 'react'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; - -interface IFancyRangeSlider { - label?: string; - align?: 'left' | 'center'; - icon?: JSX.Element; - value?: number; - min?: number; - max?: number; - displayNumber?: boolean; - onChange?: (e: ChangeEvent) => void; - themeType?: TThemeTypes; - layer?: TLayer; - disabled?: boolean; -} - -export default IFancyRangeSlider; diff --git a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx b/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx deleted file mode 100644 index 24a4ccfed..000000000 --- a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.stories.tsx +++ /dev/null @@ -1,133 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -import FancyRangeSlider from './FancyRangeSlider'; - -// Define metadata for the story -const meta = { - component: FancyRangeSlider, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The FancyPasswordInput Comonent with surrounding icon, label and underline', - }, - }, - }, - // Define arguments for the story - argTypes: { - label: { - description: 'The label of the input', - control: { - type: 'text', - }, - }, - align: { - description: 'The alignment of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'left', - }, - }, - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'The layer of the input', - control: { - type: 'range ', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { - summary: '4', - }, - }, - icon: { - description: 'The icon of the input', - defaultValue: { - summary: 'none', - }, - }, - disabled: { - description: 'The disabled state of the input', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - min: { - description: 'The minimum value of the input', - control: { - type: 'number', - }, - defaultValue: { - summary: 0, - }, - }, - max: { - description: 'The maximum value of the input', - control: { - type: 'number', - }, - defaultValue: { - summary: 100, - }, - }, - value: { - description: 'The current value of the input', - control: { - type: 'number', - }, - defaultValue: { - summary: 50, - }, - }, - displayNumber: { - description: 'The display number of the input', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - }, - // 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: { - label: 'Label', - align: 'left', - themeType: 'secondary', - layer: 4, - icon: , - disabled: false, - min: 0, - max: 100, - value: 50, - displayNumber: true, - }, -}; diff --git a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.style.tsx b/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.style.tsx deleted file mode 100644 index 1bfe21680..000000000 --- a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.style.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from 'styled-components'; -import { AlignedInputLabel } from '../../atoms/AlignedInputLabel/AlignedInputLabel'; -import { TTheme } from '@/interface/TTheme'; - -export const RangeSliderContainer = styled.div` - grid-row: 2/3; - grid-column: 2/3; - position: relative; - width: 100%; -`; - -export const NumberContainer = styled.div` - position: relative; - box-sizing: border-box; - grid-row: 2 / 3; - grid-column: 3 / 4; - margin-left: 10px; -`; - -//the label inhert the style from the AlignedInputLabel -export const Label = styled(AlignedInputLabel)` - grid-row: 1/2; - grid-column: 2/3; -`; - -export const Icon = styled.div<{ theme: TTheme }>` - grid-column: 1/2; - grid-row: 2/3; - margin-bottom: ${({ theme }) => theme.spacing.xxs}; - margin-right: ${({ theme }) => theme.spacing.sm}; - display: flex; - align-items: center; -`; diff --git a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.tsx b/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.tsx deleted file mode 100644 index e10491420..000000000 --- a/src/Components/Organisms/FancyRangeSlider/FancyRangeSlider.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React, { ChangeEvent, useId, useState } from 'react'; - -import RawSlider from '../../atoms/RawSlider/RawSlider'; -import FancyNumberInput from '../FancyNumberInput/FancyNumberInput'; -import { StyledInputWrapper } from '../../molecules/InputWrapper/InputWrapper.style'; -import FancySVGAtom from '../../atoms/FancySVGAtom/FancySVGAtom'; -import { Label, NumberContainer, RangeSliderContainer, Icon } from './FancyRangeSlider.style'; -import IFancyRangeSlider from './FancyRangeSlider.model'; -import calcColorState from '../../../design/designFunctions/calcColorState/calcColorState'; - -// --------------------------------------------------------------------------- // -// -------------------- The main FancySlider Component ----------------------- // -// --------------------------------------------------------------------------- // -export default function FancyRangeSlider(props: IFancyRangeSlider) { - const { label, align, icon, value, min, max, displayNumber, onChange, themeType, layer = 4, disabled } = { ...defaultProps, ...props }; - - const [isActive, setIsActive] = useState(false); - const [toutched, setToutched] = useState(false); - - const id = useId(); - - const colorStateLabel = calcColorState({ type: 'label', isActive: isActive || toutched, value }); - - // this function is called when the slider is moved - const changeHandler = (e: ChangeEvent) => { - // this line handles the the input bewteen number and slider - setToutched(true); - onChange && onChange(e); - }; - - // this function is called when the slider is clicked - const activeHandler = (value: boolean) => { - setIsActive(value); - }; - - return ( - - {/* Icon for the left side of the slider */} - {icon && ( - - - {icon} - - - )} - - {/* label for the top side of the slider */} - {label && ( - - )} - {/* Range Slider */} - - - - - {/* Number input for typing the number */} - {displayNumber && ( - - - - )} - - ); -} - -const defaultProps: IFancyRangeSlider = { - min: 0, - max: 100, -}; diff --git a/src/Components/Organisms/FancyRangeSlider/index.ts b/src/Components/Organisms/FancyRangeSlider/index.ts deleted file mode 100644 index 0482c873f..000000000 --- a/src/Components/Organisms/FancyRangeSlider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyRangeSlider } from './FancyRangeSlider'; diff --git a/src/Components/Organisms/FancySearchBar/FancySearchBar.stories.tsx b/src/Components/Organisms/FancySearchBar/FancySearchBar.stories.tsx deleted file mode 100644 index 81f21225c..000000000 --- a/src/Components/Organisms/FancySearchBar/FancySearchBar.stories.tsx +++ /dev/null @@ -1,82 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancySearchBar from './FancySearchBar'; - -import { FancyLoadingSpinner } from '../../atoms/FancyLoadingSpinner'; - -// Define metadata for the story -const meta = { - component: FancySearchBar, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The FancyPasswordInput Comonent with surrounding icon, label and underline', - }, - }, - }, - // Define arguments for the story - argTypes: { - handlerSearchValue: { - description: 'Callback function for the search value', - control: { - type: 'function', - }, - }, - searchListWidth: { - description: 'The width of the search list', - control: { - type: 'text', - }, - defaultValue: { - summary: '100%', - }, - }, - searchValue: { - description: 'The search value', - control: { - type: 'text', - }, - }, - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'secondary', - }, - }, - layer: { - description: 'The layer of the input', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { - summary: '4', - }, - }, - }, - // 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: { - handlerSearchValue: (value: string) => console.log(value), - searchListWidth: '100%', - layer: 2, - children: , - }, -}; diff --git a/src/Components/Organisms/FancySearchBar/FancySearchBar.tsx b/src/Components/Organisms/FancySearchBar/FancySearchBar.tsx deleted file mode 100644 index c86189b38..000000000 --- a/src/Components/Organisms/FancySearchBar/FancySearchBar.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useState } from 'react'; -import { styled } from 'styled-components'; - -import SearchBar from '../../molecules/SearchBar/SearchBar'; -import SearchBarList from '../../molecules/SearchBarList/SearchBarList'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; - -// Styled component for the entire search bar -const StyledFancySearchBar = styled.div` - height: 90%; - width: 100%; - max-height: 50px; - position: relative; - justify-content: center; - display: flex; - flex-direction: column; -`; - -// Styled component for the wrapper around the search bar list -const WrapperListInput = styled.div` - position: relative; -`; - -// Styled component for the search bar list -const WrapperList = styled.div<{ $width?: string }>` - position: absolute; - top: calc(100% + 4px); - width: ${({ $width }) => $width || '100%'}; // Set the width of the search bar list - left: 50%; - transform: translateX(-50%); - z-index: 100; -`; - -// Props for the FancySearchBar component -interface IFancySearchBar { - handlerSearchValue?: (searchValue: string) => void; - children?: React.ReactNode; - searchListWidth?: string; - searchValue?: string; - themeType?: TThemeTypes; - layer?: TLayer; -} - -// The FancySearchBar component -export default function FancySearchBar(props: IFancySearchBar) { - const { handlerSearchValue, children, searchListWidth, searchValue, themeType, layer } = props; - const [isActive, setIsActive] = useState(false); // State for whether the search bar list is active - - // Function to handle changes to the isActive state - const activeHandler = (isActive: boolean) => { - setIsActive(isActive); - }; - - // Function to handle changes to the search value - const searchValueHandler = (searchValue: string) => { - handlerSearchValue && handlerSearchValue(searchValue); - }; - - return ( - - - {/* The search bar where something can be searched */} - - {/* The search bar list */} - - - {children} - - - - - ); -} diff --git a/src/Components/Organisms/FancySearchBar/index.ts b/src/Components/Organisms/FancySearchBar/index.ts deleted file mode 100644 index 556bab95f..000000000 --- a/src/Components/Organisms/FancySearchBar/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancySearchBar } from './FancySearchBar'; diff --git a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.mdx b/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.mdx deleted file mode 100644 index 8e2e01a53..000000000 --- a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.mdx +++ /dev/null @@ -1,80 +0,0 @@ -## FancySwipeUpModal Documentation - -### Overview - -The FancySwipeUpModal is now powered by the `useFancySwipeUpStore`. This enhancement further simplifies the process of creating modals, while retaining the component's adaptability and feature-rich nature. With this update, developers can effortlessly integrate FancySwipeUpModal into their applications without the previous manual prop configurations. - -### Initial Setup - -1. **Render the Main Component in the Base File**: - - Place `` at the desired location in your main file. - -2. **Specify the DOM Element for Rendering**: - - Create a DOM element where the modal will be rendered. For instance: - - ```html - - ``` - -3. **Connect the Modal to the DOM**: - - Pass the `appendToDomID` prop to the modal component. For instance, `appendToDomID="modal"`. This ties the modal to the specified DOM element. Configuration settings are now managed by the store, simplifying the overall process. - -### Using the Modal - -1. **Import the Store in the Component**: - - First, you need to import the `useFancySwipeUpModalStore` within the component where you intend to trigger the modal. - - ```javascript - const openModal = useFancySwipeUpModalStore((state) => state.openSwipeUpModal); - ``` - -2. **Open the Modal**: - - Use the `openModal` method with the following parameters: - - - Modal ID (e.g., "CustomerModal") - - Child components to be displayed within the modal - - Configuration object specifying various options - - ```javascript - const openModalHandler = () => { - openModal( - 'modalTest', -
- - closeModal('modalTest')} label="Close Modal"> -
, - { - isCloseAble: false, - isScalable: true, - } - ); - }; - ``` - -3. **Close the Modal**: - - To close the modal, you will need to utilize the `closeModal` method from the `useFancySwipeUpModalStore`. - - ```javascript - const closeModal = useFancySwipeUpModalStore((state) => state.closeSwipeUpModal); - ``` - - You can then call `closeModal` with the ID of the modal you wish to close, as shown in the `openModalHandler` example above. - -### Configuration Options - -When opening a modal, you can provide a configuration object with the following optional properties: - -- `themeType`: Accepts different theme values to alter the modal's appearance. -- `layer`: Sets the modal's depth. -- `isCloseAble`: A boolean that specifies if the user can close the modal. -- `isScalable`: A boolean that indicates whether the modal's height can be adjusted by the user. - -### Conclusion - -The revamped FancySwipeUpModal, powered by `useFancySwipeUpStore`, offers an even more streamlined approach to managing modals in applications. This update makes it easier to incorporate the modal component, providing a straightforward and efficient user experience. diff --git a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts b/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts deleted file mode 100644 index 2b0aae52b..000000000 --- a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.state.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { create } from 'zustand'; - -import { TModalStatus } from '../../../interface/TModalStatus'; -import { ISwipeUpModal } from '../../molecules/SwipeUpModal/ISwipeUpModal.model'; - -export type ModalSettings = Omit; - -export interface IFancySwipeUpModal { - id: string; - children: React.ReactNode; - status: TModalStatus; - config?: ModalSettings; -} - -export interface IFancySwipeUpModalStore { - modals: IFancySwipeUpModal[]; - openSwipeUpModal: (id: string, children: React.ReactNode, config?: ModalSettings) => void; - removeSwipeUpModal: (id: string) => void; - closeSwipeUpModal: (id: string) => void; -} - -// --------------------------------------------------------------------------- // -// ------------- The globale State to open and close ------------------------- // -// --------------------------------------------------------------------------- // -export const useFancySwipeUpModalStore = create((set) => ({ - // the state array for the modals - modals: [], - // add a new modal to the state array - openSwipeUpModal: (id, children, config) => - set((state) => { - console.log('openSwipeUpModal', id, children, config); - return { modals: [...state.modals, { children, id, status: 'open', config }] }; - }), - // change the status of the modal to closing - closeSwipeUpModal: (id) => - set((state) => ({ - modals: state.modals.map((modal) => (modal.id === id ? { ...modal, status: 'closing' } : modal)), - })), - // remove the modal from the state array - removeSwipeUpModal: (id) => - set((state) => ({ - modals: state.modals.filter((modal) => modal.id !== id), - })), - - isOpen: false, -})); diff --git a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx b/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx deleted file mode 100644 index 18f0c8f4b..000000000 --- a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx +++ /dev/null @@ -1,135 +0,0 @@ -// Import necessary dependencies -import React from 'react'; -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancySwipeUpModal from './FancySwipeUpModal'; -import { FancyButton } from '../FancyButton'; -import { useFancySwipeUpModalStore } from './FancySwipeUpModal.state'; -import { FancyTextInput } from '../FancyTextInput'; -import { ISwipeUpModal } from '../../molecules/SwipeUpModal/ISwipeUpModal.model'; - -// Define metadata for the story -const meta = { - title: 'components/ui/organisms/FancySwipeUpModal', - component: HelperComponent, - parameters: { - docs: { - description: { - component: 'Smart-Comonent: The FancySwipeUpModal is a smart component that handles all the logic for the SwipeUpModal.', - }, - }, - }, - // Define arguments for the story - argTypes: { - appendToDomID: { - description: 'The ID of the DOM element to append the modal to', - control: { - type: 'text', - }, - defaultValue: { - summary: 'body', - }, - }, - isOpen: { - description: 'The state of the modal', - control: { - type: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - isScalable: { - description: 'Is the modal scalable by the user', - control: { - type: 'boolean', - }, - defaultValue: { - summary: true, - }, - }, - isCloseAble: { - description: 'Is the modal closeable by the user', - control: { - type: 'boolean', - }, - defaultValue: { - summary: true, - }, - }, - themeType: { - description: 'The theme of the modal', - control: { - type: 'select', - }, - options: ['primary', 'secondary', 'accent'], - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'The layer of the modal', - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - defaultValue: { - summary: 0, - }, - }, - }, - // Add tags to the story -} satisfies Meta; - -// Export the metadata -export default meta; -// Define the story object -type Story = StoryObj; - -function HelperComponent(props: React.ComponentProps & Omit) { - const { appendToDomID, children, ...configProps } = props; - const openModal = useFancySwipeUpModalStore((state) => state.openSwipeUpModal); - const closeModal = useFancySwipeUpModalStore((state) => state.closeSwipeUpModal); - - const openModalHandler = () => { - openModal( - appendToDomID || 'modalTest', - children || ( -
- - closeModal('modalTest')} label="Close Modal"> -
- ), - configProps || { - isCloseAble: false, - isScalable: true, - } - ); - }; - - return ( - <> - - openModalHandler()} /> - - ); -} - -HelperComponent.displayName = 'FancyModal'; - -// Define the primary story -export const Primary: Story = { - render: (args) => ( - <> - - - - ), - args: { - themeType: 'primary', - isCloseAble: true, - }, -}; diff --git a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx b/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx deleted file mode 100644 index e3c29b4de..000000000 --- a/src/Components/Organisms/FancySwipeUpModal/FancySwipeUpModal.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; - -import SwipeUpModal from '../../molecules/SwipeUpModal/SwipeUpModal'; -import FancyPortal from '../../utils/components/FancyPortal/FancyPortal'; - -import { useFancySwipeUpModalStore } from './FancySwipeUpModal.state'; - -// --------------------------------------------------------------------------- // -// ----------- The main FancySwipeUpModal to handle all everything ----------- // -// --------------------------------------------------------------------------- // -interface IFancySwipeUpModal { - appendToDomID?: string; -} -export default function FancySwipeUpModal({ appendToDomID }: IFancySwipeUpModal) { - // get the global states and actions from the store to handle the modal - const modals = useFancySwipeUpModalStore((state) => state.modals); - const removeSwipeUpModal = useFancySwipeUpModalStore((state) => state.removeSwipeUpModal); - const closeSwipeUpModal = useFancySwipeUpModalStore((state) => state.closeSwipeUpModal); - - const closeModalHandler = (id: string) => { - // closing the modal is a two step process - // first we set the status to "closing" with the closeModal function - // this will trigger the animation in the modal component - closeSwipeUpModal(id); - - //wait for the animation and remove the modal from the store - setTimeout(() => { - removeSwipeUpModal(id); - }, 250); - }; - - return ( - - {/* The Mobile Modal Component */} - {modals.map((modal, key) => ( - closeModalHandler(modal.id)} isOpen={modal.status === 'open'}> - {/* render the content of the modal */} - {modal.children} - - ))} - - ); -} diff --git a/src/Components/Organisms/FancySwipeUpModal/index.ts b/src/Components/Organisms/FancySwipeUpModal/index.ts deleted file mode 100644 index e6d55b765..000000000 --- a/src/Components/Organisms/FancySwipeUpModal/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancySwipeUpModal } from './FancySwipeUpModal'; diff --git a/src/Components/Organisms/FancyTextInput/FancyTextInput.stories.tsx b/src/Components/Organisms/FancyTextInput/FancyTextInput.stories.tsx deleted file mode 100644 index a29f7e960..000000000 --- a/src/Components/Organisms/FancyTextInput/FancyTextInput.stories.tsx +++ /dev/null @@ -1,97 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyTextInput from './FancyTextInput'; - -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; - -// Define metadata for the story -const meta = { - component: FancyTextInput, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: The FancyPasswordInput Comonent with surrounding icon, label and underline', - }, - }, - }, - // Define arguments for the story - argTypes: { - value: { - description: 'The value of the input', - defaultValue: '', - control: { - type: 'text', - }, - }, - - layer: { - description: 'The layer of the modal', - defaultValue: 0, - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - themeType: { - description: 'The theme of the modal', - defaultValue: 'primary', - control: { - type: 'select', - }, - }, - isActive: { - description: 'The activity state of the input', - defaultValue: false, - control: { - type: 'boolean', - }, - }, - align: { - description: 'The alignment of the input', - defaultValue: 'left', - control: { - type: 'select', - }, - }, - label: { - description: 'The label of the input', - defaultValue: 'Label', - control: { - type: 'text', - }, - }, - errorMessage: { - description: 'The error message of the input', - defaultValue: '', - control: { - type: 'text', - }, - }, - }, - // 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: { - value: '', - layer: 0, - themeType: 'secondary', - isActive: false, - align: 'left', - label: 'Label', - errorMessage: '', - icon: , - }, -}; diff --git a/src/Components/Organisms/FancyTextInput/FancyTextInput.tsx b/src/Components/Organisms/FancyTextInput/FancyTextInput.tsx deleted file mode 100644 index a4c309ddf..000000000 --- a/src/Components/Organisms/FancyTextInput/FancyTextInput.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { useId, useState } from 'react'; -import TextInput, { ITextInputProps } from '../../molecules/TextInput/TextInput'; -import InputWrapper, { IInputWrapperUserInputProps } from '../../molecules/InputWrapper/InputWrapper'; - -type IFancyTextInputProps = ITextInputProps & Omit; -// --------------------------------------------------------------------------- // -// ----The TextInput Comonent with surrounding icon, label and underline ----- // -// --------------------------------------------------------------------------- // -export default function FancyTextInput(props: IFancyTextInputProps) { - const { id, value, activeHandler, themeType, layer, placeholder, errorMessage, disabled, align, icon, label, ...inputProps } = props; - - //the states activity of the input - const [isActive, setIsActive] = useState(false); - - // if no id is provided, generate a random one - const useid = useId(); - const usedId = id ? id : useid; - - // handles the focus and blur events and calls the handler from the parent - const activeFocusHandler = (value: boolean) => { - setIsActive(value); - activeHandler && activeHandler(value); - }; - - return ( - - } - /> - ); -} diff --git a/src/Components/Organisms/FancyTextInput/index.ts b/src/Components/Organisms/FancyTextInput/index.ts deleted file mode 100644 index 96aeeac3e..000000000 --- a/src/Components/Organisms/FancyTextInput/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyTextInput } from './FancyTextInput'; diff --git a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.state.tsx b/src/Components/Organisms/FancyToastMessage/FancyToastMessage.state.tsx deleted file mode 100644 index 20d17fdd4..000000000 --- a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.state.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { create } from 'zustand'; -import IToastMessage from '../../molecules/SingleToastMessage/IToastMessage.model'; - -//omit id from IToastMessage because the store will add the id -type IToastMessageProps = Omit; - -type ToastMessageStore = { - toastQueue: IToastMessage[]; - addToast: (toast: IToastMessageProps) => void; - removeToast: (id: number) => void; -}; -//the toastQueue with the add and remove functions -export const useFancyToastMessageStore = create((set) => ({ - toastQueue: [], - addToast: (toast) => - set((state) => ({ - toastQueue: [...state.toastQueue, { ...toast, id: Date.now(), time: toast.time || 5000 }], - })), - removeToast: (id) => - set((state) => ({ - toastQueue: state.toastQueue.filter((toast) => toast.id !== id), - })), -})); diff --git a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.stories.tsx b/src/Components/Organisms/FancyToastMessage/FancyToastMessage.stories.tsx deleted file mode 100644 index dcec6b16a..000000000 --- a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyToastMessage from './FancyToastMessage'; -import { useFancyToastMessageStore } from './FancyToastMessage.state'; -import { FancyButton } from '../FancyButton'; - -// Define metadata for the story -const meta = { - component: FancyToastMessage, - parameters: { - docs: { - description: { - component: - 'Smart-Comonent: The FancyToastMessage Component is a smart component to handle all toast messages in the application. It should be used as overlay in the application to make sure the toast messages are always displaey on top. To use this component in the application you have to add this component to the dom (Main Component) of the application. To add the toast messages you have to import the useToastMessageStore and addToast function const addToast = useToastMessageStore((state) => state.addToast); addToast({ title: "My Title of the titel ", message: "This is my toast message hjsadhjgdshjag.", time: 50500, type: "error", });', - }, - }, - }, - // Define arguments for the story - argTypes: {}, - // Add tags to the story - tags: ['autodocs'], -} satisfies Meta; - -// Export the metadata -export default meta; -// Define the story object -type Story = StoryObj; - -const clickHandler = () => { - useFancyToastMessageStore.getState().addToast({ - title: 'My Title of the titel ', - message: 'This is my toast message hjsadhjgdshjag.', - time: 50500, - themeType: 'error', - }); -}; - -// Define the primary story -export const Primary: Story = { - render: (args) => ( - <> - - - - ), - args: {}, -}; diff --git a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.style.tsx b/src/Components/Organisms/FancyToastMessage/FancyToastMessage.style.tsx deleted file mode 100644 index 7f1439648..000000000 --- a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.style.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { styled } from 'styled-components'; - -import { TTheme } from '@/interface/TTheme'; - -export const ToastsWrapper = styled.div<{ theme: TTheme }>` - position: fixed; - z-index: 1000; - top: ${({ theme }) => theme.spacing.md}; - right: ${({ theme }) => theme.spacing.md}; - width: calc(100% - ${({ theme }) => theme.spacing.md} * 2); - max-width: 350px; - display: flex; - flex-direction: column; -`; diff --git a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.tsx b/src/Components/Organisms/FancyToastMessage/FancyToastMessage.tsx deleted file mode 100644 index 056211df7..000000000 --- a/src/Components/Organisms/FancyToastMessage/FancyToastMessage.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useMemo } from 'react'; -import { useTransition, animated } from '@react-spring/web'; - -import { useFancyToastMessageStore } from './FancyToastMessage.state'; -import SingleToastMessage from '../../molecules/SingleToastMessage/SingleToastMessage'; -import { ToastsWrapper } from './FancyToastMessage.style'; -import IToastMessage from '../../molecules/SingleToastMessage/IToastMessage.model'; - -//this comonent should be used as overlay in the application to make sure the toast messages are always displaey on top - -// to use this component in the application you have to add this component to the dom (Main Component) of the application -// to add the toast messages you have to import the useToastMessageStore and addToast function const addToast = useToastMessageStore((state) => state.addToast); -// addToast({ -// title: 'My Title of the titel ', -// message: 'This is my toast message hjsadhjgdshjag.', -// time: 50500, -// type: 'error', -// }); - -// --------------------------------------------------------------------------- // -// ------- The Main Toast Message Module to displayed multible messages ------ // -// --------------------------------------------------------------------------- // -export default function FancyToastMessage() { - const toastQueue = useFancyToastMessageStore((state) => state.toastQueue); - const removeToast = useFancyToastMessageStore((state) => state.removeToast); - - // create a refMap to store the height of each toast message - const refMap = useMemo(() => new WeakMap(), []); - - // create the transitions for the toast messages - const transitions = useTransition(toastQueue, { - from: { opacity: 0, height: '0px', transform: 'translateX(200%)', marginBottom: '0px' }, - keys: (item: IToastMessage) => item.id, - enter: (item: IToastMessage) => async (next) => { - const getItem = refMap.get(item) as HTMLDivElement; - await next({ - opacity: 1, - transform: 'translateX(0%)', - marginBottom: '16px', - height: getItem.offsetHeight + 'px', - //config: { duration: refMap.get(item).time }, - }); - }, - leave: [ - { transform: 'translateX(60%)', opacity: 0, config: { duration: 220, tension: 250, friction: 125, precision: 0.1 } }, - { height: '0px', marginBottom: '0px', config: { duration: 265, tension: 250, friction: 125, precision: 0.8 } }, - ], - onDestroyed: (item: IToastMessage) => removeToast(item.id), - }); - - return ( - - {transitions(({ ...style }, item: IToastMessage) => ( - - ref && refMap.set(item, ref)} toast={item} remove={removeToast} /> - - ))} - - ); -} diff --git a/src/Components/Organisms/FancyToastMessage/index.ts b/src/Components/Organisms/FancyToastMessage/index.ts deleted file mode 100644 index 482696292..000000000 --- a/src/Components/Organisms/FancyToastMessage/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyToastMessage } from './FancyToastMessage'; diff --git a/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx b/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx deleted file mode 100644 index 2ce877d4a..000000000 --- a/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx +++ /dev/null @@ -1,103 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; -import SVGCheckMark from '../../icons/SVGCheckMark/SVGCheckMark'; -// Import the component to be tested -import FancyBottomBarIcon from './FancyBottomBarIcon'; -// Define metadata for the story -const meta = { - component: FancyBottomBarIcon, - parameters: { - docs: { - description: { - component: - 'The FancyBottomBarIcon component is for displaying a fancy bottom bar icon, it can be used for displaying a navivation button in da navigation bar.
It´s only the content wrapped in a ComponentAndActionWrapper component, so it can be used as a link or button or wrapped with the WrapperComponent prop in a e.g. NextJS Link Component . ', - }, - }, - }, - - // Define arguments for the story - argTypes: { - type: { - control: { type: 'select' }, - defaultValue: { - summary: 'a', - }, - }, - href: { - control: { type: 'text' }, - }, - isActive: { - control: { type: 'boolean' }, - defaultValue: { - summary: false, - }, - }, - label: { - control: { type: 'text' }, - }, - layer: { - control: { type: 'range', min: 0, max: 10, step: 1 }, - defaultValue: { - summary: 1, - }, - }, - onClick: { - control: { type: 'function' }, - }, - disabled: { - control: { type: 'boolean' }, - defaultValue: { - summary: false, - }, - }, - themeType: { - control: { type: 'select' }, - defaultValue: { - summary: 'secondary', - }, - }, - icon: { - control: { type: 'object' }, - }, - WrapperComponent: { - control: { type: 'object' }, - description: 'Provide a wrapper component like NextJS Link Component or a Custom component. ', - }, - hideLabel: { - control: { type: 'boolean' }, - description: 'Hide the label text. When The label is hidden, the icon will get bigger and the aria-label is putted to the icon.', - defaultValue: { - summary: false, - }, - }, - }, - // 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: { - type: 'a', - href: 'https://www.google.com', - isActive: false, - label: 'Label', - disabled: false, - themeType: 'secondary', - layer: 1, - icon: , - }, - parameters: { - docs: { - description: { - story: '', - }, - }, - }, -}; diff --git a/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.style.tsx b/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.style.tsx deleted file mode 100644 index 7014c681a..000000000 --- a/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.style.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { styled } from 'styled-components'; - -// Define the styled component for the item wrapper -export const ItemWrapper = styled.div` - flex: 1 0 64px; - filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.55)); -`; - -export const Icon = styled.div` - height: 18px; - width: 18px; - - svg { - height: 100%; - width: 100%; - } -`; diff --git a/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.tsx b/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.tsx deleted file mode 100644 index 533f163d4..000000000 --- a/src/Components/Templates/FancyBottomBarIcon/FancyBottomBarIcon.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { ComponentProps } from 'react'; - -import ComponentAndActionWrapper, { IComponentAndActionWrapper } from '../../molecules/ComponentAndActionWrapper/ComponentAndActionWrapper'; -import BottomBarIcon from '../../molecules/BottomBarIcon/BottomBarIcon'; - -export type IFancyBottomBarIcon = ComponentProps & IComponentAndActionWrapper; -// --------------------------------------------------------------------------- // -// ------ This Component Puts only the content and a wrapper together -------- // -// --------------------------------------------------------------------------- // -export default function FancyBottomBarIcon(props: IFancyBottomBarIcon) { - const { WrapperComponent, type, href, onClick, ...rest } = props; - - return ( - { - onClick && onClick(); - }} - > - - - ); -} diff --git a/src/Components/Templates/FancyBottomBarIcon/index.ts b/src/Components/Templates/FancyBottomBarIcon/index.ts deleted file mode 100644 index 68c89ad61..000000000 --- a/src/Components/Templates/FancyBottomBarIcon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyBottomBarIcon } from './FancyBottomBarIcon'; diff --git a/src/Components/Templates/FancyFlexBox/FancyFlexBox.model.ts b/src/Components/Templates/FancyFlexBox/FancyFlexBox.model.ts deleted file mode 100644 index fef0a5f4c..000000000 --- a/src/Components/Templates/FancyFlexBox/FancyFlexBox.model.ts +++ /dev/null @@ -1,12 +0,0 @@ -export type TStyleProps = { - flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'; - flexJustify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; - flexAlign?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'; - gap?: string; -}; - -export type FancyFlexBoxProps = { - children?: React.ReactNode; - separator?: React.ReactNode; - inline?: boolean; -} & TStyleProps; diff --git a/src/Components/Templates/FancyFlexBox/FancyFlexBox.style.tsx b/src/Components/Templates/FancyFlexBox/FancyFlexBox.style.tsx deleted file mode 100644 index 63a884649..000000000 --- a/src/Components/Templates/FancyFlexBox/FancyFlexBox.style.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { styled, css } from 'styled-components'; -import { TStyleProps } from './FancyFlexBox.model'; -import IStyledPrefixAndPicker from '../../../interface/IStyledPrefixAndPicker.model'; -import { TTheme } from '@/interface/TTheme'; - -const generateFlexSytles = (props: TStyledFlexBoxProps & { theme?: TTheme }) => { - const { $flexDirection, $flexJustify, $flexAlign, $gap, theme } = props; - - return css` - display: flex; - width: 100%; - flex-direction: ${$flexDirection ?? 'row'}; - justify-content: ${$flexJustify ?? 'flex-start'}; - align-items: ${$flexAlign ?? 'flex-start'}; - gap: ${$gap ?? theme!.spacing.xxs}; - `; -}; - -type TStyledFlexBoxProps = IStyledPrefixAndPicker; -export const StyledFlexBox = styled.div` - ${(props: TStyledFlexBoxProps) => generateFlexSytles({ ...props })} -`; - -export const StyledInlineFlexBox = styled.span` - ${(props: TStyledFlexBoxProps) => generateFlexSytles({ ...props })} -`; diff --git a/src/Components/Templates/FancyFlexBox/FancyFlexBox.tsx b/src/Components/Templates/FancyFlexBox/FancyFlexBox.tsx deleted file mode 100644 index b8272141f..000000000 --- a/src/Components/Templates/FancyFlexBox/FancyFlexBox.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; - -import { FancyFlexBoxProps } from './FancyFlexBox.model'; -import { StyledFlexBox, StyledInlineFlexBox } from './FancyFlexBox.style'; - -// --------------------------------------------------------------------------- // -// ------------ A layout component that helps align with flex box ------------ // -// --------------------------------------------------------------------------- // -export default function FancyFlexBox(props: FancyFlexBoxProps) { - const { children, inline, separator, ...flexAligns } = props; - - // Determine which container to use based on the inline prop. - const Container = inline ? StyledInlineFlexBox : StyledFlexBox; - - // Modify the children components to include a separator if specified. - const modifiedChilds = separator - ? React.Children.map(children, (child, index) => { - if (index === 0) return child; - return ( - <> - {separator} - {child} - - ); - }) - : children; - - // Render the flexbox container with the modified children components and flex alignment props. - return ( - - {modifiedChilds} - - ); -} diff --git a/src/Components/Templates/FancyFlexBox/index.ts b/src/Components/Templates/FancyFlexBox/index.ts deleted file mode 100644 index 9eb917dbb..000000000 --- a/src/Components/Templates/FancyFlexBox/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyFlexBox } from './FancyFlexBox'; diff --git a/src/Components/Templates/FancyGrid/FancyGrid.mdx b/src/Components/Templates/FancyGrid/FancyGrid.mdx deleted file mode 100644 index 3298cc498..000000000 --- a/src/Components/Templates/FancyGrid/FancyGrid.mdx +++ /dev/null @@ -1,64 +0,0 @@ -# FancyGrid Component Documentation - -`FancyGrid` is a custom grid layout components. It's built using styled-components and is designed to be both flexible and responsive. - -## Installation - -Before using `FancyGrid`, make sure you have React, TypeScript, and styled-components installed in your project. - -## Usage - -### FancyGrid Container - -The `FancyGrid` container establishes the grid layout. - -**Props**: - -- `grid`: Specifies the number of columns in the grid (e.g., 12). -- `space`: Sets the spacing between grid items (e.g., "2px"). - -**Example**: - -```jsx -import FancyGrid from './FancyGrid'; - -const MyComponent = () => { - return ( - - {/* Grid items will be placed here */} - - ); -}; -``` - -### FancyGrid.Item - -`FancyGrid.Item` represents individual items within the `FancyGrid`. - -**Props**: - -- `gridSpace`: Determines the number of columns the item should span. - -**Example**: - -```jsx - - {/* Content for the first item */} - {/* Content for the second item */} - {/* Content for the third item */} - {/* Since the grid limit is reached, the next item starts on a new line */} - {/* Content for the fourth item */} - -``` - -## Responsive Design - -`FancyGrid` supports responsive design. You can specify different `gridSpace` values for different screen sizes to ensure your layout adapts to various devices. - -## Customization - -You can customize the `FancyGrid` and `FancyGrid.Item` by passing additional styling props or by extending the styled components to fit your design requirements. - ---- - -This documentation provides a basic guideline on how to integrate and use the `FancyGrid` component in your React applications. Adjust your implementation as needed to match the specific requirements of your project. diff --git a/src/Components/Templates/FancyGrid/FancyGrid.stories.tsx b/src/Components/Templates/FancyGrid/FancyGrid.stories.tsx deleted file mode 100644 index 65e0c87b9..000000000 --- a/src/Components/Templates/FancyGrid/FancyGrid.stories.tsx +++ /dev/null @@ -1,70 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyGrid from './FancyGrid'; -import { FancyButton } from '../../organisms/FancyButton'; - -// Define metadata for the story -const meta = { - component: FancyGrid, - parameters: { - docs: { - description: { - component: 'Layout-Component: The FancyPasswordInput Comonent with surrounding icon, label and underline', - }, - }, - }, - // Define arguments for the story - argTypes: { - grid: { - description: 'The value of the input', - defaultValue: '12', - control: { - type: 'number', - }, - }, - gap: { - description: 'The layer of the modal', - defaultValue: '0', - control: { - type: 'text', - }, - }, - }, -} 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: { - grid: 12, - gap: '12px', - }, -}; diff --git a/src/Components/Templates/FancyGrid/FancyGrid.tsx b/src/Components/Templates/FancyGrid/FancyGrid.tsx deleted file mode 100644 index 86cdd4665..000000000 --- a/src/Components/Templates/FancyGrid/FancyGrid.tsx +++ /dev/null @@ -1,35 +0,0 @@ -// FancyGrid.tsx -import React from 'react'; -import { styled } from 'styled-components'; - -import FancyGridItem from './FancyGridItem/FancyGridItem'; -import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model'; - -interface FancyGridProps { - grid?: number; - gap?: string; - children?: React.ReactNode; -} - -const GridContainer = styled.div>` - display: grid; - width: 100%; - 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, gap } = props; - return ( - - {children} - - ); -} - -FancyGrid.Item = FancyGridItem; - -export default FancyGrid; diff --git a/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.mdx b/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.mdx deleted file mode 100644 index 3c97099fa..000000000 --- a/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.mdx +++ /dev/null @@ -1,46 +0,0 @@ -# FancyGrid.Item Component Documentation - -`FancyGrid.Item` is a subcomponent of the `FancyGrid` component, designed for creating and managing individual items within the `FancyGrid` layout in React applications. It's built using styled-components and allows for responsive and flexible item placement within the grid. - -## Installation - -Ensure that `FancyGrid` is already set up in your project, as `FancyGrid.Item` is a part of it. Also, make sure React, TypeScript, and styled-components are installed. - -## Usage - -### Basic Use of FancyGrid.Item - -`FancyGrid.Item` is used within the `FancyGrid` container and requires the `FancyGrid` component to be properly functioning. - -**Props**: - -- `gridSpace`: Specifies the number of columns the item should span within the grid. - -**Example**: - -```jsx -import FancyGrid from './FancyGrid'; - -const MyComponent = () => { - return ( - - {/* Content for a half-width item */} - {/* Content for another half-width item */} - - ); -}; -``` - -In this example, each `FancyGrid.Item` spans half the width of the grid (6 out of 12 columns). - -### Responsive Design - -`FancyGrid.Item` can be used to create responsive layouts within `FancyGrid`. Adjust the `gridSpace` prop based on the desired responsiveness of your layout. - -### Customization - -`FancyGrid.Item` can be customized further by passing additional styling props or by extending its styled component for more specific design needs. - ---- - -This documentation provides guidance on using the `FancyGrid.Item` component within the `FancyGrid` layout. It's designed to be flexible and easy to integrate into various types of grid-based layouts in React applications. diff --git a/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx b/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx deleted file mode 100644 index 232941591..000000000 --- a/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx +++ /dev/null @@ -1,45 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyGridItem from './FancyGridItem'; -import { FancyButton } from '../../../organisms/FancyButton'; - -// Define metadata for the story -const meta = { - component: FancyGridItem, - parameters: { - docs: { - description: { - component: 'Layout-Component: The FancyPasswordInput Comonent with surrounding icon, label and underline', - }, - }, - }, - // Define arguments for the story - argTypes: { - gridSpace: { - description: 'The space wich the item should take in the grid', - defaultValue: '12', - control: { - type: 'number', - }, - }, - }, -} 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: { - gridSpace: 6, - }, -}; diff --git a/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.tsx b/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.tsx deleted file mode 100644 index 2b3bec0ed..000000000 --- a/src/Components/Templates/FancyGrid/FancyGridItem/FancyGridItem.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { styled } from 'styled-components'; -import IStyledPrefixAndPicker from '../../../../interface/IStyledPrefixAndPicker.model'; - -interface FancyGridItemProps { - gridSpace: number; - children?: React.ReactNode; -} - -type TGirdItemProps = IStyledPrefixAndPicker; -const GridItem = styled.div` - grid-column: span ${({ $gridSpace }) => $gridSpace}; -`; - -// --------------------------------------------------------------------------- // -// ------------ The FancyGrid Item to get the space for the item - ----------- // -// --------------------------------------------------------------------------- // -export default function FancyGridItem({ children, gridSpace }: FancyGridItemProps) { - return {children}; -} diff --git a/src/Components/Templates/FancyGrid/FancyGridItem/index.ts b/src/Components/Templates/FancyGrid/FancyGridItem/index.ts deleted file mode 100644 index 421f27168..000000000 --- a/src/Components/Templates/FancyGrid/FancyGridItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyGridItem } from './FancyGridItem'; diff --git a/src/Components/Templates/FancyGrid/index.ts b/src/Components/Templates/FancyGrid/index.ts deleted file mode 100644 index 9bcb88acc..000000000 --- a/src/Components/Templates/FancyGrid/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyGrid } from './FancyGrid'; diff --git a/src/Components/Templates/FancyHandyNav/FancyHandyNav.store.ts b/src/Components/Templates/FancyHandyNav/FancyHandyNav.store.ts deleted file mode 100644 index e4bad8aa7..000000000 --- a/src/Components/Templates/FancyHandyNav/FancyHandyNav.store.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { create } from 'zustand'; - -interface IFancyHandyNavStore { - isVisible: boolean; - setIsVisible: (isVisible: boolean) => void; - - whichIsActive: string; - setWhichIsActive: (whichIsActive: string) => void; -} - -const useFancyHandyNavStore = create((set) => ({ - isVisible: true, - setIsVisible: (isVisible: boolean) => set({ isVisible }), - - whichIsActive: 'home', - setWhichIsActive: (whichIsActive: string) => set({ whichIsActive }), -})); - -export default useFancyHandyNavStore; diff --git a/src/Components/Templates/FancyHandyNav/FancyHandyNav.stories.tsx b/src/Components/Templates/FancyHandyNav/FancyHandyNav.stories.tsx deleted file mode 100644 index f87269786..000000000 --- a/src/Components/Templates/FancyHandyNav/FancyHandyNav.stories.tsx +++ /dev/null @@ -1,151 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyHandyNav from './FancyHandyNav'; -import { IFancyBottomBarIcon } from '../FancyBottomBarIcon/FancyBottomBarIcon'; - -const svg = ( - - - - -); - -const items2: IFancyBottomBarIcon[] = [ - { icon: svg, type: 'button', label: 'myButton', onClick: () => console.log('asas') }, - { icon: svg, type: 'button', label: 'myButton', href: 'http://google.de' }, - { icon: svg, type: 'button', label: 'myButton', href: 'http://google.de' }, - { icon: svg, type: 'button', label: 'myButton', href: 'http://google.de' }, -]; - -// Define metadata for the story -const meta = { - component: FancyHandyNav, - parameters: { - docs: { - description: { - component: 'Layout-Component: The FancyPasswordInput Comonent with surrounding icon, label and underline', - }, - }, - }, - // Define arguments for the story - argTypes: { - isVisible: { - description: 'Is the nav visible', - defaultValue: { - summary: true, - }, - control: { - type: 'boolean', - }, - }, - wichIndexIsActive: { - description: 'The layer of the modal', - defaultValue: { - summary: '0', - }, - control: { - type: 'text', - }, - }, - items: { - description: 'The items of the nav', - defaultValue: '', - control: { - type: 'object', - }, - }, - themeType: { - description: 'The themeType of the nav', - defaultValue: { - summary: 'primary', - }, - control: { - type: 'select', - }, - }, - themeTypeIcons: { - description: 'The themeType of the icons', - defaultValue: { - summary: 'secondary', - }, - control: { - type: 'select', - }, - }, - themeTypeSwitchList: { - description: 'The themeType of the switchlist', - defaultValue: { - summary: 'accent', - }, - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the nav', - defaultValue: { - summary: 1, - }, - control: { - type: 'range', - min: 0, - max: 10, - step: 1, - }, - }, - externalStyle: { - description: 'The external style of the nav', - defaultValue: { - summary: '', - }, - control: { - type: 'object', - }, - }, - outlined: { - description: 'Is the nav outlined', - defaultValue: { - summary: false, - }, - control: { - type: 'boolean', - }, - }, - outlinedBackgroundStrength: { - description: 'The background strength of the nav', - defaultValue: { - summary: 0.9, - }, - control: { - type: 'range', - min: 0, - max: 1, - step: 0.1, - }, - }, - }, -} 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: { - items: items2, - isVisible: true, - wichIndexIsActive: '0', - themeType: 'primary', - layer: 1, - externalStyle: '', - outlined: false, - outlinedBackgroundStrength: 0.9, - themeTypeIcons: 'secondary', - themeTypeSwitchList: 'accent', - }, -}; diff --git a/src/Components/Templates/FancyHandyNav/FancyHandyNav.tsx b/src/Components/Templates/FancyHandyNav/FancyHandyNav.tsx deleted file mode 100644 index 8e5f6d061..000000000 --- a/src/Components/Templates/FancyHandyNav/FancyHandyNav.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { useEffect } from 'react'; -import { CSSProp, css } from 'styled-components'; - -import SwitchList from '../../molecules/SwitchList/SwitchList'; -import useFancyHandyNavStore from './FancyHandyNav.store'; -import BottomBar from '../../molecules/BottomBar/BottomBar'; -import FancyBottomBarIcon, { IFancyBottomBarIcon } from '../FancyBottomBarIcon/FancyBottomBarIcon'; -import RawNav from '../../atoms/RawNav/RawNav'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TUiColors'; -interface IFancyHandyNav { - items?: IFancyBottomBarIcon[]; - isVisible?: boolean; - wichIndexIsActive?: string; - themeType?: TThemeTypes; - themeTypeIcons?: TThemeTypes; - themeTypeSwitchList?: TThemeTypes; - layer?: TLayer; - outlined?: boolean; - outlinedBackgroundStrength?: number; - externalStyle?: CSSProp; - className?: string; -} -// --------------------------------------------------------------------------- // -// ---------- A handyNavBar that can dynamicly generated via objects---------- // -// --------------------------------------------------------------------------- // -export default function FancyHandyNav(props: IFancyHandyNav) { - const { items, isVisible, wichIndexIsActive, themeType, themeTypeIcons, themeTypeSwitchList, layer, externalStyle } = props; - - // setup a global zustand store for the visibility and the active index - const isVisibleState = useFancyHandyNavStore((state) => state.isVisible); - const setIsVisible = useFancyHandyNavStore((state) => state.setIsVisible); - const stateWhichIsActive = useFancyHandyNavStore((state) => state.whichIsActive); - const setWhichIsActiveState = useFancyHandyNavStore((state) => state.setWhichIsActive); - - // Set the default values / initial values - useEffect(() => { - setWhichIsActiveState(wichIndexIsActive ?? '0'); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - // handle the visibility of the nav - useEffect(() => { - setIsVisible(isVisible ?? true); - }, [isVisible, setIsVisible]); - - return ( - <> - {isVisibleState && ( - // The Navbar container - - - {/* The List with the items */} - - {items?.map((item, index) => ( - { - setWhichIsActiveState(index.toString()); - item.onClick && item.onClick(); - }} - /> - ))} - - - - )} - - ); -} diff --git a/src/Components/Templates/FancyHandyNav/index.ts b/src/Components/Templates/FancyHandyNav/index.ts deleted file mode 100644 index 2bd0577b4..000000000 --- a/src/Components/Templates/FancyHandyNav/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyHandyNav } from './FancyHandyNav'; diff --git a/src/Components/Templates/FancyInfoCard/FancyInfoCard.stories.tsx b/src/Components/Templates/FancyInfoCard/FancyInfoCard.stories.tsx deleted file mode 100644 index 22ecac0b8..000000000 --- a/src/Components/Templates/FancyInfoCard/FancyInfoCard.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import FancyInfoCard from './FancyInfoCard'; - -const meta = { - component: FancyInfoCard, - parameters: { - docs: { - description: { - component: 'Dumb-Comonent: Thats only the Style of the InfoCard, it accepts all kind of children.', - }, - }, - }, - argTypes: { - themeType: { - description: 'The theme type of the component', - control: { - type: 'select', - }, - }, - layer: { - description: 'The layer of the component', - control: { - type: 'range', - min: 0, - max: 10, - step: 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: 10, - }, - }, - }, - tags: ['autodocs'], -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Primary: Story = { - render: (args) => , - args: { - icon: <> 🌇 , - title: 'This is a InfoCard', - description: 'This is a InfoCard', - themeType: 'primary', - layer: 1, - }, -}; diff --git a/src/Components/Templates/FancyInfoCard/FancyInfoCard.tsx b/src/Components/Templates/FancyInfoCard/FancyInfoCard.tsx deleted file mode 100644 index e638d9d7b..000000000 --- a/src/Components/Templates/FancyInfoCard/FancyInfoCard.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; - -import InfoCard from '../../molecules/InfoCard/InfoCard'; -import FancyContent from '../../molecules/FancyContent/FancyContent'; -import { TTypography } from '@/interface/TTypography'; -import { TSizes } from '../../../interface/TComponentSizes'; - -type TSizeObj = { - iconSize: TSizes; - title: TTypography; - descriptionSize: TTypography; -}; - -type TSizesObject = { - [K in TSizes]: TSizeObj; -}; - -// the template for the sizes -const sizes: TSizesObject = { - sm: { - iconSize: 'md', - title: 'h6', - descriptionSize: 'smText', - }, - md: { - iconSize: 'lg', - title: 'h5', - descriptionSize: 'content', - }, - lg: { - iconSize: 'lg', - title: 'h4', - descriptionSize: 'button', - }, -}; - -type TFancyInfoCardProps = { - title?: string; - description?: string; - icon?: React.ReactNode; -} & React.ComponentProps; -// --------------------------------------------------------------------------- // -// ------- This is a Template for a Infocard with icon Title und desc. ------- // -// --------------------------------------------------------------------------- // -export default function FancyInfoCard(props: TFancyInfoCardProps) { - const { title, description, icon, size = 'md', ...infoCardProps } = props; - - return ( - - - {icon && {icon}} - {title && {title}} - {description && {description}} - - - ); -} diff --git a/src/Components/Templates/FancyInfoCard/index.ts b/src/Components/Templates/FancyInfoCard/index.ts deleted file mode 100644 index a38e54f44..000000000 --- a/src/Components/Templates/FancyInfoCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyInfoCard } from './FancyInfoCard'; diff --git a/src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.stories.tsx b/src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.stories.tsx deleted file mode 100644 index 7f3a6b788..000000000 --- a/src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.stories.tsx +++ /dev/null @@ -1,65 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyMenu from './FancyMenu'; - -// Define metadata for the story -const meta = { - component: FancyMenu, - parameters: { - docs: { - description: { - component: 'Template: The FancyMenueItem is a template for a finished Item it used by the FancyMenu', - }, - }, - }, - // Define arguments for the story - argTypes: { - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'The layer of the button hover effect', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { - summary: '3', - }, - }, - }, - // 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: {}, -}; diff --git a/src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.tsx b/src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.tsx deleted file mode 100644 index 71a1d78d4..000000000 --- a/src/Components/Templates/FancyMenueComponent/FancyMenu/FancyMenu.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -import FancyMenuItem from '../FancyMenuItem/FancyMenuItem'; -import ListDivider from '../../../atoms/ListDivider/ListDivider'; -import MenuList from '../../../molecules/MenuList/MenuList'; - -type TFancyMenuProps = { - children?: React.ReactNode; -} & React.ComponentProps; -// --------------------------------------------------------------------------- // -// --- The FancyList is a Template with Anchor the Menue Item and Divider ---- // -// --------------------------------------------------------------------------- // -function FancyMenu(props: TFancyMenuProps) { - const { children, ...menueListProps } = props; - return {children}; -} - -FancyMenu.Item = FancyMenuItem; -FancyMenu.Divider = ListDivider; - -export default FancyMenu; diff --git a/src/Components/Templates/FancyMenueComponent/FancyMenu/index.ts b/src/Components/Templates/FancyMenueComponent/FancyMenu/index.ts deleted file mode 100644 index 130e6328a..000000000 --- a/src/Components/Templates/FancyMenueComponent/FancyMenu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyMenuList } from './FancyMenu'; diff --git a/src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.stories.tsx b/src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.stories.tsx deleted file mode 100644 index 08c281b9a..000000000 --- a/src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.stories.tsx +++ /dev/null @@ -1,84 +0,0 @@ -// Import necessary dependencies -import { Meta, StoryObj } from '@storybook/react'; - -// Import the component to be tested -import FancyMenuItem from './FancyMenuItem'; - -// Define metadata for the story -const meta = { - component: FancyMenuItem, - parameters: { - docs: { - description: { - component: 'Template: The FancyMenueItem is a template for a finished Item it used by the FancyMenuList', - }, - }, - }, - // Define arguments for the story - argTypes: { - label: { - description: 'The label of the item', - control: { - type: 'text', - }, - defaultValue: { - summary: 'Logout', - }, - }, - as: { - description: 'The as of the item', - control: { - type: 'text', - }, - defaultValue: { - summary: 'button', - }, - }, - icon: { - description: 'The icon of the item', - control: { - type: 'text', - }, - defaultValue: { - summary: '', - }, - }, - themeType: { - description: 'The theme of the input', - control: { - type: 'select', - }, - defaultValue: { - summary: 'primary', - }, - }, - layer: { - description: 'The layer of the button hover effect', - control: { - type: 'range', - min: 1, - max: 10, - step: 1, - }, - defaultValue: { - summary: '3', - }, - }, - }, - // 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: { - icon: '👋', - label: 'Logout', - }, -}; diff --git a/src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx b/src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx deleted file mode 100644 index 591fb0e4e..000000000 --- a/src/Components/Templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import MenuItem from '../../../atoms/MenuItem/MenuItem'; -import FancyContent from '../../../molecules/FancyContent/FancyContent'; - -type TFancyMenueItemProps = { - label?: string; - icon?: React.ReactNode; -} & React.ComponentProps; -// --------------------------------------------------------------------------- // -// ---------- The FancyMenueItem is a template for a finished Item ---------- // -// --------------------------------------------------------------------------- // -export default function FancyMenuItem(props: TFancyMenueItemProps) { - const { label, icon, ...menuItemProps } = props; - return ( - - - {label} - {icon} - - - ); -} diff --git a/src/Components/Templates/FancyMenueComponent/FancyMenuItem/index.ts b/src/Components/Templates/FancyMenueComponent/FancyMenuItem/index.ts deleted file mode 100644 index 7ba75fab1..000000000 --- a/src/Components/Templates/FancyMenueComponent/FancyMenuItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyMenuItem } from './FancyMenuItem'; diff --git a/src/Components/Templates/FancyRadioList/FancyRadioList.model.ts b/src/Components/Templates/FancyRadioList/FancyRadioList.model.ts deleted file mode 100644 index d9a29edfe..000000000 --- a/src/Components/Templates/FancyRadioList/FancyRadioList.model.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { FancyListBox } from '@/components/molecules/FancyListBox'; -import { Fieldset } from '@/components/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/Templates/FancyRadioList/FancyRadioList.stories.tsx b/src/Components/Templates/FancyRadioList/FancyRadioList.stories.tsx deleted file mode 100644 index b5a97c9e2..000000000 --- a/src/Components/Templates/FancyRadioList/FancyRadioList.stories.tsx +++ /dev/null @@ -1,95 +0,0 @@ -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/Templates/FancyRadioList/FancyRadioList.style.tsx b/src/Components/Templates/FancyRadioList/FancyRadioList.style.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/Components/Templates/FancyRadioList/FancyRadioList.tsx b/src/Components/Templates/FancyRadioList/FancyRadioList.tsx deleted file mode 100644 index 85ef510fc..000000000 --- a/src/Components/Templates/FancyRadioList/FancyRadioList.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React, { useRef, useState } from 'react'; - -import { FancyRadio } from '@/components/organisms/FancyRadio'; -import { FancyListBox } from '@/components/molecules/FancyListBox'; -import { FancyLine } from '@/components/atoms/FancyLine'; -import { Fieldset } from '@/components/molecules/Fieldset'; -import { clampLayer } from '@/components/utils/functions/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/Templates/FancyRadioList/index.ts b/src/Components/Templates/FancyRadioList/index.ts deleted file mode 100644 index e02bdc1fd..000000000 --- a/src/Components/Templates/FancyRadioList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyRadioList } from './FancyRadioList'; diff --git a/src/Components/Templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx b/src/Components/Templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx deleted file mode 100644 index b0ab3a8b8..000000000 --- a/src/Components/Templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; - -import FancyDropDownSelect, { IFancyDropDownSelect } from '../../../organisms/FancyDropDownSelect/FancyDropDownSelect'; -import generateYearZone from '../../../utils/functions/generateFunctions/generateYearZone'; -import generateMonthNames from '../../../utils/functions/generateFunctions/generateMonthNames'; -import generateDayNumbers from '../../../utils/functions/generateFunctions/generateDayNumbers'; - -// this function creates the options for the dropdown day month and year -const generateOptions = (type: DateType, dateLimits?: [number, number]) => { - const limitStart = dateLimits ? dateLimits[0] : undefined; - const limitEnd = dateLimits ? dateLimits[1] : undefined; - - //default limits for year - const currentYear = new Date().getFullYear(); - - // add the options to the dropdown with the given limits - switch (type) { - case 'year': { - // create limits for the year with default values if not given - const startYear = limitStart ? limitStart : currentYear - 120; - const endYear = limitEnd ? limitEnd : new Date().getFullYear(); - - return generateYearZone(startYear, endYear); - } - case 'month': { - // create limits for the month with default values if not given - const startMonth = limitStart ? limitStart : 0; - const endMonth = limitEnd ? limitEnd : 11; - - return generateMonthNames(startMonth, endMonth); - } - case 'day': { - // create limits for the day with default values if not given - const startDay = limitStart ? limitStart : 1; - const endDay = limitEnd ? limitEnd : 31; - - return generateDayNumbers(startDay, endDay); - } - } -}; - -type DateType = 'year' | 'month' | 'day'; -interface IFancyDateDropDown extends IFancyDropDownSelect { - type: DateType; - dateLimits?: [number, number]; -} -// --------------------------------------------------------------------------- // -// -------------- Fancy Date DropDown to Pick a day/month/year --------------- // -// --------------------------------------------------------------------------- // -export default function FancyDateDropDown(props: IFancyDateDropDown) { - const { type = 'year', dateLimits, ...inputProps } = props; - - const dateMonthOrYearNumbers = generateOptions(type, dateLimits); - - return ; -} diff --git a/src/Components/Templates/Inputs/FancyDateDropDown/index.ts b/src/Components/Templates/Inputs/FancyDateDropDown/index.ts deleted file mode 100644 index 1d57d15d9..000000000 --- a/src/Components/Templates/Inputs/FancyDateDropDown/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as FancyDateDropDown } from './FancyDateDropDown'; diff --git a/src/Components/icons/SVGCheckMark/SVGCheckMark.tsx b/src/Components/icons/SVGCheckMark/SVGCheckMark.tsx deleted file mode 100644 index 98a92cc6b..000000000 --- a/src/Components/icons/SVGCheckMark/SVGCheckMark.tsx +++ /dev/null @@ -1,7 +0,0 @@ -const SVGCheckMark = () => ( - - - -); - -export default SVGCheckMark; diff --git a/src/Components/icons/SVGCheckMark/index.ts b/src/Components/icons/SVGCheckMark/index.ts deleted file mode 100644 index 2957ab2e7..000000000 --- a/src/Components/icons/SVGCheckMark/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGCheckMark } from './SVGCheckMark'; diff --git a/src/Components/icons/SVGChevronLeft/SVGChevronLeft.tsx b/src/Components/icons/SVGChevronLeft/SVGChevronLeft.tsx deleted file mode 100644 index afee637be..000000000 --- a/src/Components/icons/SVGChevronLeft/SVGChevronLeft.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const SVGChevronLeft = ( - - - -); - -export default SVGChevronLeft; diff --git a/src/Components/icons/SVGChevronLeft/index.ts b/src/Components/icons/SVGChevronLeft/index.ts deleted file mode 100644 index 65771eb88..000000000 --- a/src/Components/icons/SVGChevronLeft/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGChevronLeft } from './SVGChevronLeft'; diff --git a/src/Components/icons/SVGChevronRight/SVGChevronRight.tsx b/src/Components/icons/SVGChevronRight/SVGChevronRight.tsx deleted file mode 100644 index 1ba247604..000000000 --- a/src/Components/icons/SVGChevronRight/SVGChevronRight.tsx +++ /dev/null @@ -1,12 +0,0 @@ -const SVGChevronRight = ( - - - -); - -export default SVGChevronRight; diff --git a/src/Components/icons/SVGChevronRight/index.ts b/src/Components/icons/SVGChevronRight/index.ts deleted file mode 100644 index a91ca91d5..000000000 --- a/src/Components/icons/SVGChevronRight/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGChevronRight } from './SVGChevronRight'; diff --git a/src/Components/icons/SVGClipBoardIcon/SVGClipBoardIcon.tsx b/src/Components/icons/SVGClipBoardIcon/SVGClipBoardIcon.tsx deleted file mode 100644 index 489b1e61f..000000000 --- a/src/Components/icons/SVGClipBoardIcon/SVGClipBoardIcon.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const ClipBoardIcon = () => ( - - - - - -); - -export default ClipBoardIcon; diff --git a/src/Components/icons/SVGClipBoardIcon/index.ts b/src/Components/icons/SVGClipBoardIcon/index.ts deleted file mode 100644 index 20e3b1319..000000000 --- a/src/Components/icons/SVGClipBoardIcon/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGClipBoardIcon } from './SVGClipBoardIcon'; diff --git a/src/Components/icons/SVGClipBoardIconChecked/SVGClipBoardIconChecked.tsx b/src/Components/icons/SVGClipBoardIconChecked/SVGClipBoardIconChecked.tsx deleted file mode 100644 index 6a0038d91..000000000 --- a/src/Components/icons/SVGClipBoardIconChecked/SVGClipBoardIconChecked.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const ClipBoardIconCheck = () => ( - - - - - -); - -export default ClipBoardIconCheck; diff --git a/src/Components/icons/SVGClipBoardIconChecked/index.ts b/src/Components/icons/SVGClipBoardIconChecked/index.ts deleted file mode 100644 index a82d8088e..000000000 --- a/src/Components/icons/SVGClipBoardIconChecked/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGClipBoardIconChecked } from './SVGClipBoardIconChecked'; diff --git a/src/Components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx b/src/Components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx deleted file mode 100644 index bd3e904ea..000000000 --- a/src/Components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const SVGEyeCrossed = ( - - - - - -); - -export default SVGEyeCrossed; diff --git a/src/Components/icons/SVGEyeCrossed/index.ts b/src/Components/icons/SVGEyeCrossed/index.ts deleted file mode 100644 index 431e07dd6..000000000 --- a/src/Components/icons/SVGEyeCrossed/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SVGEyeCrossed'; diff --git a/src/Components/icons/SVGEyeOpen/SVGEyeOpen.tsx b/src/Components/icons/SVGEyeOpen/SVGEyeOpen.tsx deleted file mode 100644 index 10d8627d3..000000000 --- a/src/Components/icons/SVGEyeOpen/SVGEyeOpen.tsx +++ /dev/null @@ -1,9 +0,0 @@ -const SVGEyeOpen = ( - // the eye icon for the password type toggle - - - - -); - -export default SVGEyeOpen; diff --git a/src/Components/icons/SVGEyeOpen/index.ts b/src/Components/icons/SVGEyeOpen/index.ts deleted file mode 100644 index 5114433ea..000000000 --- a/src/Components/icons/SVGEyeOpen/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGEyeOpen } from './SVGEyeOpen'; diff --git a/src/Components/icons/SVGLoadingArrows/SVGLoadingArrows.tsx b/src/Components/icons/SVGLoadingArrows/SVGLoadingArrows.tsx deleted file mode 100644 index 1c5a3da7e..000000000 --- a/src/Components/icons/SVGLoadingArrows/SVGLoadingArrows.tsx +++ /dev/null @@ -1,11 +0,0 @@ -const SVGLoadingArrows = () => ( - - - - -); - -export default SVGLoadingArrows; diff --git a/src/Components/icons/SVGLoadingArrows/index.ts b/src/Components/icons/SVGLoadingArrows/index.ts deleted file mode 100644 index 971c82d46..000000000 --- a/src/Components/icons/SVGLoadingArrows/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGLoadingArrows } from './SVGLoadingArrows'; diff --git a/src/Components/icons/SVGPlus/SVGPlus.tsx b/src/Components/icons/SVGPlus/SVGPlus.tsx deleted file mode 100644 index a2c26a1f7..000000000 --- a/src/Components/icons/SVGPlus/SVGPlus.tsx +++ /dev/null @@ -1,7 +0,0 @@ -const SVGPlus = ( - - - -); - -export default SVGPlus; diff --git a/src/Components/icons/SVGPlus/index.ts b/src/Components/icons/SVGPlus/index.ts deleted file mode 100644 index fa3ece124..000000000 --- a/src/Components/icons/SVGPlus/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGPlus } from './SVGPlus'; diff --git a/src/Components/icons/SVGSearch/SVGSearch.tsx b/src/Components/icons/SVGSearch/SVGSearch.tsx deleted file mode 100644 index cd8d212fd..000000000 --- a/src/Components/icons/SVGSearch/SVGSearch.tsx +++ /dev/null @@ -1,7 +0,0 @@ -const SVGSearch = ( - - - -); - -export default SVGSearch; diff --git a/src/Components/icons/SVGSearch/index.ts b/src/Components/icons/SVGSearch/index.ts deleted file mode 100644 index 223c0f73f..000000000 --- a/src/Components/icons/SVGSearch/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGSearch } from './SVGSearch'; diff --git a/src/Components/icons/SVGXCircle/SVGXCircle.tsx b/src/Components/icons/SVGXCircle/SVGXCircle.tsx deleted file mode 100644 index d06302399..000000000 --- a/src/Components/icons/SVGXCircle/SVGXCircle.tsx +++ /dev/null @@ -1,8 +0,0 @@ -const SVGXCircle = () => ( - - - - -); - -export default SVGXCircle; diff --git a/src/Components/icons/SVGXCircle/index.ts b/src/Components/icons/SVGXCircle/index.ts deleted file mode 100644 index bed12525d..000000000 --- a/src/Components/icons/SVGXCircle/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SVGXCircle } from './SVGXCircle'; diff --git a/src/Components/utils/hooks/useIntersectionObserver/index.ts b/src/Components/utils/hooks/useIntersectionObserver/index.ts deleted file mode 100644 index a2c58d511..000000000 --- a/src/Components/utils/hooks/useIntersectionObserver/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as useIntersectionObserver } from './useIntersectionObserver'; diff --git a/src/Components/utils/hooks/useIntersectionObserver/useIntersectionObserver.tsx b/src/Components/utils/hooks/useIntersectionObserver/useIntersectionObserver.tsx deleted file mode 100644 index e3793c804..000000000 --- a/src/Components/utils/hooks/useIntersectionObserver/useIntersectionObserver.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { useState, useEffect, useRef, MutableRefObject } from 'react'; - -const useIntersectionObserver = (): [MutableRefObject, boolean] => { - const ref = useRef(null); - const [isInView, setIsInView] = useState(false); - const observer = useRef(null); - - useEffect(() => { - if (observer.current) { - observer.current.disconnect(); - } - - observer.current = new IntersectionObserver( - ([entry]) => setIsInView(entry.isIntersecting) - //{ threshold: 1 } - ); - - if (ref.current) { - observer.current.observe(ref.current); - } - - return () => { - if (observer.current) { - observer.current.disconnect(); - } - }; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ref.current]); - - return [ref, isInView]; -}; - -export default useIntersectionObserver; diff --git a/src/Components/utils/hooks/useSlider/IUseSlider.model.ts b/src/Components/utils/hooks/useSlider/IUseSlider.model.ts deleted file mode 100644 index b4a2e99b9..000000000 --- a/src/Components/utils/hooks/useSlider/IUseSlider.model.ts +++ /dev/null @@ -1,29 +0,0 @@ -import Color from 'color'; - -// --------------------------------------------------------------------------- // -// ---------------- Define the interfaces for the useSlider Hook ------------- // -// --------------------------------------------------------------------------- // -export interface IUseSlider { - color?: Color | null; - hue?: number; - opacity?: number; - type: 'hue' | 'opacity' | 'color'; - handlerSlider?: (value: number) => void; - handlerColor?: (color: Color) => void; - sliderPositionToColorFunc?: (clientX: number, rect: DOMRect) => number; - positionToColorFunc?: (hue: number, clientX: number, clientY: number, rect: DOMRect) => { h: number; s: number; v: number } | number; - colorToPositionFunc: (color: Color, rect: DOMRect) => { x: number; y: number }; -} - -export interface IMarkerPosition { - x: number; - y: number; -} - -export interface IUseSliderReturn { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - sliderRef: React.MutableRefObject; - markerPosition: IMarkerPosition; - handleInteractionStart: (event: React.MouseEvent | React.TouchEvent) => void; - isInteracting: boolean; -} diff --git a/src/Components/utils/hooks/useSlider/useSilder.tsx b/src/Components/utils/hooks/useSlider/useSilder.tsx deleted file mode 100644 index 56ed07471..000000000 --- a/src/Components/utils/hooks/useSlider/useSilder.tsx +++ /dev/null @@ -1,173 +0,0 @@ -import { useState, useRef, useEffect, useCallback } from 'react'; -import Color from 'color'; - -import { IMarkerPosition, IUseSlider, IUseSliderReturn } from './IUseSlider.model'; - -// Throttle function to prevent too many rerenders -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const throttle = (func: (...args: any[]) => void): ((...args: any[]) => void) => { - let isThrottled = false; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - return (...args: any[]) => { - if (!isThrottled) { - isThrottled = true; - requestAnimationFrame(() => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - func(...args); - isThrottled = false; - }); - } - }; -}; - -// --------------------------------------------------------------------------- // -// ------------------ Define the main useSlider Hoook function --------------- // -// --------------------------------------------------------------------------- // -const useSlider = ({ - color, - hue, - type, - sliderPositionToColorFunc, - positionToColorFunc, - colorToPositionFunc, - handlerSlider, - handlerColor, -}: IUseSlider): IUseSliderReturn => { - const [markerPosition, setMarkerPosition] = useState({ x: 0, y: 0 }); - const [isInteracting, setIsInteracting] = useState(false); - const sliderRef = useRef(); - - //updates the marker position when the color changes - const updateMarkerPosition = useCallback( - (color: Color) => { - if (!sliderRef.current) return; - const rect = sliderRef.current.getBoundingClientRect(); - const newPosition = colorToPositionFunc(color, rect); - setMarkerPosition(newPosition); - }, - [colorToPositionFunc] - ); - - //hanlde the interaction with the slider and the color area - const handleInteraction = useCallback( - (clientX: number, clientY: number) => { - if (!sliderRef.current) return; - const rect = sliderRef.current.getBoundingClientRect(); - if (type === 'hue') { - const newColor = sliderPositionToColorFunc && sliderPositionToColorFunc(clientX, rect); - handlerSlider && handlerSlider(Math.floor(newColor!) ?? 0); - const createColor = Color({ h: newColor, s: 100, l: 50 }); - updateMarkerPosition(createColor); - } else if (type === 'opacity') { - const newColor = sliderPositionToColorFunc && sliderPositionToColorFunc(clientX, rect); - const alpha = Math.max(0, Math.min(newColor as number, 1)); - handlerSlider && handlerSlider(alpha ?? 1); - const createColor = Color({ r: 255, g: 255, b: 255 }).alpha(alpha); - updateMarkerPosition(createColor); - } else { - const newColor = positionToColorFunc && positionToColorFunc(hue ?? 0, clientX, clientY, rect); - const createColor = Color(newColor); - handlerColor && handlerColor(createColor); - updateMarkerPosition(createColor); - } - }, - [updateMarkerPosition, positionToColorFunc, type, hue, sliderPositionToColorFunc, handlerSlider, handlerColor] - ); - - // eslint-disable-next-line react-hooks/exhaustive-deps - const throttledHandleInteraction = useCallback(throttle(handleInteraction), [handleInteraction]); - - //handle the interaction start with the slider and the color area - const handleInteractionStart = (event: React.MouseEvent | React.TouchEvent) => { - setIsInteracting(true); - if (event.nativeEvent instanceof MouseEvent) { - throttledHandleInteraction(event.nativeEvent.clientX, event.nativeEvent.clientY); - } else if (event.nativeEvent instanceof TouchEvent) { - throttledHandleInteraction(event.nativeEvent.touches[0].clientX, event.nativeEvent.touches[0].clientY); - } - }; - - // this useEffect is used to prevent the body from scrolling when the user is interacting with the slider - useEffect(() => { - if (isInteracting) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = 'auto'; - } - return () => { - document.body.style.overflow = 'auto'; - }; - }, [isInteracting]); - - //handle the interaction with the slider and the color area - const handleInteractionMove = useCallback( - (event: MouseEvent | TouchEvent) => { - if (!isInteracting) return; - - if (event instanceof MouseEvent) { - event.preventDefault(); - throttledHandleInteraction(event.clientX, event.clientY); - } else if (event instanceof TouchEvent) { - if (event.cancelable) event.preventDefault(); - throttledHandleInteraction(event.touches[0].clientX, event.touches[0].clientY); - } - }, - [isInteracting, throttledHandleInteraction] - ); - - //handle the interaction end with the slider and the color area - const handleInteractionEnd = useCallback(() => { - setIsInteracting(false); - }, []); - - //update the marker position when the color changes - useEffect(() => { - if (!color) return; - updateMarkerPosition(color); - }, [color, updateMarkerPosition]); - - //update the marker position when the hue changes - useEffect(() => { - if (!hue) return; - if (type === 'color' && color) { - updateMarkerPosition(color.hue(hue)); - } else { - updateMarkerPosition(Color({ h: hue, s: 50, l: 50 })); - } - }, [hue, updateMarkerPosition, color, type]); - - //set the initial position of the marker - useEffect(() => { - if (!sliderRef.current) return; - // eslint-disable-next-line react-hooks/exhaustive-deps - if (!color) type === 'hue' ? (color = Color({ h: hue, s: 100, l: 50 })) : (color = Color({ r: 255, g: 255, b: 255 }).alpha(1)); - - const rect = sliderRef.current.getBoundingClientRect(); - const initialPosition = colorToPositionFunc(color, rect); - setMarkerPosition(initialPosition); - }, []); - - //the mouse event are listen to the window because the mouse can be outside the slider or area - useEffect(() => { - const handleInteractionMoveFunc = (event: MouseEvent | TouchEvent) => handleInteractionMove(event); - const handleInteractionEndFunc = () => handleInteractionEnd(); - if (isInteracting) { - window.addEventListener('mousemove', handleInteractionMoveFunc); - window.addEventListener('touchmove', handleInteractionMoveFunc, { passive: false }); - window.addEventListener('mouseup', handleInteractionEndFunc); - window.addEventListener('touchend', handleInteractionEndFunc, { passive: false }); - } - - return () => { - window.removeEventListener('mousemove', handleInteractionMoveFunc); - window.removeEventListener('touchmove', handleInteractionMoveFunc); - window.removeEventListener('mouseup', handleInteractionEndFunc); - window.removeEventListener('touchend', handleInteractionEndFunc); - }; - }, [handleInteractionMove, handleInteractionEnd, isInteracting]); - - return { sliderRef, markerPosition, handleInteractionStart, isInteracting }; -}; - -export default useSlider; diff --git a/src/Components/utils/hooks/useWindowDimensions/index.ts b/src/Components/utils/hooks/useWindowDimensions/index.ts deleted file mode 100644 index 891054d2a..000000000 --- a/src/Components/utils/hooks/useWindowDimensions/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as useWindowDimensions } from './useWindowDimensions'; diff --git a/src/Components/utils/hooks/useWindowDimensions/useWindowDimensions.tsx b/src/Components/utils/hooks/useWindowDimensions/useWindowDimensions.tsx deleted file mode 100644 index 581406b40..000000000 --- a/src/Components/utils/hooks/useWindowDimensions/useWindowDimensions.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useState, useEffect } from 'react'; - -// This function gets the current window dimensions -function getWindowDimensions() { - const { innerWidth: width, innerHeight: height } = window; - return { - width, - height, - }; -} - -// This custom hook returns the current window dimensions and updates them on window resize -export default function useWindowDimensions() { - const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()); - - // This useEffect hook adds a window resize event listener and removes it on cleanup - useEffect(() => { - function handleResize() { - setWindowDimensions(getWindowDimensions()); - } - - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); - - return windowDimensions; -} diff --git a/src/Components/utils/variables/colorFormats.ts b/src/Components/utils/variables/colorFormats.ts deleted file mode 100644 index d74627498..000000000 --- a/src/Components/utils/variables/colorFormats.ts +++ /dev/null @@ -1,6 +0,0 @@ -export type IColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'hexa'; -type IColorFormatsArray = IColorFormat[]; - -const colorFormats: IColorFormatsArray = ['rgb', 'rgba', 'hsl', 'hsla', 'hex', 'hexa']; - -export default colorFormats;