diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index af38baee1..40fd9c11b 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -18,7 +18,7 @@ jobs: run: npm install - name: Check Prettier Formatting - run: npx prettier --check . + run: npm run format - name: Run Lint Check run: npm run lint diff --git a/.prettierrc b/.prettierrc index 05a360b87..97a3f82ed 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { "singleQuote": true, "trailingComma": "es5", - "printWidth": 140 + "printWidth": 120 } diff --git a/lib/index.ts b/lib/index.ts index 454d92ef3..25ff18c9f 100644 --- a/lib/index.ts +++ b/lib/index.ts @@ -1,12 +1,11 @@ // ---------- atoms ------- // export { default as BackDrop } from '@/components/atoms/BackDrop/BackDrop'; -export { default as ColorDisplay } from '@/components/atoms/ColorDisplay/ColorDisplay'; export { default as ColorIndicator } from '@/components/atoms/ColorIndicator/ColorIndicator'; export { default as DateNumberAtom } from '@/components/atoms/DateNumberAtom/DateNumberAtom'; export { default as DateOutput } from '@/components/atoms/DateOutput/DateOutput'; export { default as DropDownSelect } from '@/components/atoms/DropDownSelect/DropDownSelect'; export { default as EditBarModal } from '@/components/atoms/EditBarModal/EditBarModal'; - +export { default as FancyPill } from '@/components/atoms/FancyPill/FancyPill'; export { default as FancyCard } from '@/components/atoms/FancyCard/FancyCard'; export { default as FancyLine } from '@/components/atoms/FancyLine/FancyLine'; export { default as FancyLI } from '@/components/atoms/FancyLI/FancyLI'; @@ -43,7 +42,6 @@ export { default as ActionWrapper } from '@/components/atoms/ActionWrapper/Actio export { default as RawRadio } from '@/components/atoms/RawRadio/RawRadio'; export { default as LoadingSVGArrows } from '@/components/atoms/LoadingSVGArrows/LoadingSVGArrows'; export { default as SwitchActiveIndicator } from '@/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator'; -export { default as ComponentAsWrapper } from '@/components/atoms/ComponentAsWrapper/ComponentAsWrapper'; export { default as FancyActionWrapper } from '@/components/atoms/FancyActionWrapper/FancyActionWrapper'; export { default as ListDivider } from '@/components/atoms/ListDivider/ListDivider'; export { default as MenuItem } from '@/components/atoms/MenuItem/MenuItem'; @@ -75,6 +73,7 @@ export { default as SearchBarList } from '@/components/molecules/SearchBarList/S export { default as SingleInputs } from '@/components/molecules/SingleInputs/SingleInputs'; export { default as SingleToastMessage } from '@/components/molecules/SingleToastMessage/SingleToastMessage'; export { default as SwipeUpModal } from '@/components/molecules/SwipeUpModal/SwipeUpModal'; +export { default as ColorDisplay } from '@/components/molecules/ColorDisplay/ColorDisplay'; export { default as TextInput } from '@/components/molecules/TextInput/TextInput'; export { default as FancyOpacitySlider } from '@/components/molecules/FancyOpacitySlider/FancyOpacitySlider'; export { default as FancyButton } from '@/components/organisms/FancyButton/FancyButton'; @@ -93,7 +92,6 @@ export { default as Paginator } from '@/components/molecules/Paginator/Paginator export { default as FancyProgressBar } from '@/components/molecules/FancyProgressBar/FancyProgressBar'; export { default as FancyMiniProfile } from '@/components/molecules/FancyMiniProfile/FancyMiniProfile'; export { default as FancyCheckbox } from '@/components/molecules/FancyCheckbox/FancyCheckbox'; -export { default as FancyChip } from '@/components/organisms/FancyChip/FancyChip'; export { default as Header } from '@/components/molecules/Header/Header'; export { default as FancyContent } from '@/components/molecules/FancyContent/FancyContent'; export { default as InfoCard } from '@/components/molecules/InfoCard/InfoCard'; @@ -108,6 +106,7 @@ export { default as FancyTabSwitchButton } from '@/components/molecules/FancyTab export { default as MenuList } from '@/components/molecules/MenuList/MenuList'; export { default as SwitchList } from '@/components/molecules/SwitchList/SwitchList'; export { default as TabSwitch } from '@/components/molecules/TabSwitch/TabSwitch'; +export { default as FancyNavBar } from '@/components/molecules/FancyNavBar/FancyNavBar'; // ---------- Organisms ------- // export { default as FancyColorPicker } from '@/components/organisms/FancyColorPicker/FancyColorPicker'; @@ -146,6 +145,7 @@ export { default as FancyBottomBarIcon } from '@/components/templates/FancyBotto // ---------- Utils/Hooks ------- // export { default as FancyPopover } from '@/components/shared/FancyPopover/FancyPopover'; export { default as Delay } from '@/components/shared/Delay/Delay'; +export { default as ComponentAsWrapper } from '@/components/shared/ComponentAsWrapper/ComponentAsWrapper'; export { default as FancyPortal } from '@/components/shared/FancyPortal/FancyPortal'; export { default as useIntersectionObserver } from '@/utils/hooks/useIntersectionObserver/useIntersectionObserver'; export { default as useWindowDimensions } from '@/utils/hooks/useWindowDimensions/useWindowDimensions'; @@ -154,7 +154,12 @@ export { default as useWindowDimensions } from '@/utils/hooks/useWindowDimension export { default as calcBorderRadiusOnAlignment } from '@/design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment'; export { default as calcColorState } from '@/design/designFunctions/calcColorState/calcColorState'; export { default as checkThemeOrColor } from '@/design/designFunctions/checkThemeOrColor/checkThemeOrColor'; -export { getColorsForComponent, getBackgroundColor, getTextColor } from '@/design/designFunctions/colorCalculatorForComponent'; +export { + getColorsForComponent, + getBackgroundColor, + getTextColor, +} from '@/design/designFunctions/colorCalculatorForComponent'; +export { default as focusStyle } from '@/design/designFunctions/focusStyle/focusStyle'; export { default as colorTransparencyCalculator } from '@/design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator'; export { default as disabledStyle } from '@/design/designFunctions/disabledStyle/disableStyle'; export { default as flipThemeColor } from '@/design/designFunctions/flipThemeColor/flipThemeColor'; @@ -172,6 +177,7 @@ export * from '@/interface'; export type { default as IGenerateThemeForCardProps } from '@/design/designFunctions/generateThemeForCard/IGenerateThemeForCardProps'; export type { default as IGenerateThemeDesignForComponentProps } from '@/design/designFunctions/generateThemeDesignForComponent/IGenerateThemeDesignForComponentProps'; export type { IAvailableDot } from '@/components/atoms/AvilableDot/IAvailableDot.model'; +export type { IFancyBox } from '@/components/atoms/FancyBox/FancyBox.model'; // ---------- Store ------- // export { default as themeStore } from '@/design/theme/themeStore/themeStore'; diff --git a/package.json b/package.json index b66607369..abd997882 100644 --- a/package.json +++ b/package.json @@ -11,28 +11,28 @@ "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --fix --max-warnings=-1", - "checkFormat": "prettier --check .", - "format": "prettier --write .", - "predeploy": "npm run lint && npm run checkFormat && npm run build" + "lint": "npx eslint src --ext ts,tsx --report-unused-disable-directives --fix --max-warnings=-1", + "checkFormat": "npx prettier --check .", + "format": "npx prettier --write .", + "predeploy": "npm run lint && npm run build && npm run checkFormat " }, "lint-staged": { "*.ts": [ - "eslint src --ext ts --report-unused-disable-directives --fix --max-warnings=-1", - "prettier --write" + "npx eslint src --ext ts --report-unused-disable-directives --fix --max-warnings=-1", + "npm run format" ], "*.tsx": [ - "eslint src --ext tsx --report-unused-disable-directives --fix --max-warnings=-1", - "prettier --write" + "npx eslint src --ext tsx --report-unused-disable-directives --fix --max-warnings=-1", + "npm run format" ], "*.mdx": [ - "prettier --write" + "npm run format" ], "*.yml": [ - "prettier --write" + "npm run format" ], "*.json": [ - "prettier --write" + "npm run format" ] }, "dependencies": { @@ -58,7 +58,7 @@ "@typescript-eslint/eslint-plugin": "^5.61.0", "@typescript-eslint/parser": "^5.61.0", "@vitejs/plugin-react-swc": "^3.3.2", - "eslint": "^8.44.0", + "eslint": "^8.55.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.1", "eslint-plugin-storybook": "^0.6.15", @@ -69,7 +69,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "rollup-plugin-visualizer": "^5.9.3", - "storybook": "^7.6.1", + "storybook": "^7.6.4", "typescript": "^5.0.2", "vite": "^4.4.0" }, diff --git a/src/Routes/BottonRoute/ButtonRoute.tsx b/src/Routes/BottonRoute/ButtonRoute.tsx index c5f52f991..74dc277ba 100644 --- a/src/Routes/BottonRoute/ButtonRoute.tsx +++ b/src/Routes/BottonRoute/ButtonRoute.tsx @@ -30,9 +30,9 @@ export default function ButtonRoute() { - - - + + + @@ -45,7 +45,11 @@ export default function ButtonRoute() { - + @@ -69,7 +73,14 @@ export default function ButtonRoute() { themeType="primary" outlined /> - setIsLoading(false)} themeType="secondary" outlined /> + setIsLoading(false)} + themeType="secondary" + outlined + /> - + @@ -70,8 +73,20 @@ export default function CheckboxRoute() { >
- - + +
diff --git a/src/Routes/ChipsRoute/ChipsRoute.tsx b/src/Routes/ChipsRoute/ChipsRoute.tsx index 2fc5a5943..c693453cc 100644 --- a/src/Routes/ChipsRoute/ChipsRoute.tsx +++ b/src/Routes/ChipsRoute/ChipsRoute.tsx @@ -1,15 +1,19 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ import React from 'react'; -import Chip from '../../components/organisms/FancyChip/FancyChip'; - import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; import ClipBoardIconCheck from '../../components/icons/SVGClipBoardIconChecked/SVGClipBoardIconChecked'; import { FancyCard } from '@/components/atoms/FancyCard'; import ChipList from '../../components/molecules/ChipList/ChipList'; import FancyChipList from '../../components/organisms/FancyChipList/FancyChipList'; +import FancyChip from '@/components/templates/FancyChip/FancyChip'; -const chipList = ['12', '1212', '1212', '121221', '121212211', '12121212', '12121212']; +const chipList = [ + { label: 'Item 1', id: '1' }, + { label: 'Item 2', id: '2' }, + { label: 'Item 3', id: '3' }, + { label: 'Item 4', id: '4' }, + { label: 'Item 5', id: '5' }, +]; export default function ChipsRoute() { const [isActive, setIsActive] = React.useState(false); @@ -26,62 +30,120 @@ export default function ChipsRoute() { - {/* - clickHandler('hi')} image="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" /> - clickHandler('hi')} onDelete={() => console.log('DELETE')} /> - console.log('hii')} /> - - - - console.log('DELETE')} /> - console.log('hii')} - image="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" - /> - - - - console.log('DELETE')} /> - console.log('hii')} - image="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" - /> - - - } size="sm" /> - } size="md" onDelete={() => console.log('DELETE')} /> - } size="lg" onClick={() => console.log('hii')} /> - - - } size="sm" /> - } size="md" onDelete={() => console.log('DELETE')} /> - } size="lg" onClick={() => console.log('hii')} /> - - - } size="sm" /> - } size="md" onDelete={() => console.log('DELETE')} /> - } size="lg" onClick={() => console.log('hii')} /> - - - } size="sm" /> - } size="md" onDelete={() => console.log('DELETE')} /> - console.log('hii')} /> - console.log('hii')} /> - */} + + clickHandler('hi')} + image="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" + /> + clickHandler('hi')} onDelete={() => console.log('DELETE')} /> + console.log('hii')} /> + + + + console.log('DELETE')} /> + console.log('hii')} + image="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" + /> + + + + console.log('DELETE')} /> + console.log('hii')} + image="https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg" + /> + + + } size="sm" /> + } size="md" onDelete={() => console.log('DELETE')} /> + } size="lg" onClick={() => console.log('hii')} /> + + + } + size="sm" + /> + } + size="md" + onDelete={() => console.log('DELETE')} + /> + } + size="lg" + onClick={() => console.log('hii')} + /> + + + } size="sm" /> + } + size="md" + onDelete={() => console.log('DELETE')} + /> + } + size="lg" + onClick={() => console.log('hii')} + /> + + + } + size="sm" + /> + } + size="md" + onDelete={() => console.log('DELETE')} + /> + console.log('hii')} + /> + console.log('hii')} /> + ); diff --git a/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx b/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx index f3b2cd84a..c74717edb 100644 --- a/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx +++ b/src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx @@ -21,38 +21,73 @@ export default function ColorGeneratorRoute() {
{primaryKeys?.map((color, index) => { - return
; + return ( +
+ ); })}
{accentKeys?.map((color, index) => { - return
; + return ( +
+ ); })}
{infoKeys?.map((color, index) => { - return
; + return ( +
+ ); })}
{secondaryKeys?.map((color, index) => { - return
; + return ( +
+ ); })}
{warningKeys?.map((color, index) => { - return
; + return ( +
+ ); })}
{errorKeys?.map((color, index) => { - return
; + return ( +
+ ); })}
{successKeys?.map((color, index) => { - return
; + return ( +
+ ); })}
diff --git a/src/Routes/DesignWrapper/Wrapper.tsx b/src/Routes/DesignWrapper/Wrapper.tsx index 280d9439e..d73b910ee 100644 --- a/src/Routes/DesignWrapper/Wrapper.tsx +++ b/src/Routes/DesignWrapper/Wrapper.tsx @@ -3,7 +3,6 @@ import { styled, CSSProp } from 'styled-components'; import { TTheme } from '@/interface/TTheme'; -// eslint-disable-next-line react-refresh/only-export-components export const DesignWrapper = styled.section` display: flex; flex-direction: column; diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx index b05827ce1..739d73958 100644 --- a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx +++ b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx @@ -8,15 +8,15 @@ import FancyContent from '../../components/molecules/FancyContent/FancyContent'; import BottomBarList from '../../components/molecules/SwitchList/SwitchList'; import Button from '../../components/molecules/Button/Button'; import { DesignArea, DesignWrapper } from '../DesignWrapper/Wrapper'; -import ComponentAsWrapper from '../../components/atoms/ComponentAsWrapper/ComponentAsWrapper'; +import ComponentAsWrapper from '../../components/shared/ComponentAsWrapper/ComponentAsWrapper'; import ActionWrapper from '../../components/atoms/ActionWrapper/ActionWrapper'; import FancyActionWrapper from '../../components/atoms/FancyActionWrapper/FancyActionWrapper'; import BottomBarIcon from '../../components/molecules/BottomBarIcon/BottomBarIcon'; import FancyBottomBarIcon from '@/components/templates/FancyBottomBarIcon/FancyBottomBarIcon'; import { FancyButton } from '@/components/organisms/FancyButton'; import { SingleToastMessage } from '@/components/molecules/SingleToastMessage'; -import { FancyCard } from '@/components/atoms/FancyCard'; -import { FancyChip } from '@/components/organisms/FancyChip'; + +import { FancyNumberInput } from '@/components/organisms/FancyNumberInput'; const Icon = ( @@ -62,58 +62,15 @@ export default function ExperimentalRoute() { return ( -
- - - { - console.log(''); - }} - /> - -
- -
- ) => setIsActive(e.target.value)} - /> - switchTheme()} /> -
- - - - - setIsLoading(!isLoading)} - themeType="secondary" - outlined - borderRadius="sm" - /> -
- - - + - + switchTheme()} + /> ); diff --git a/src/Routes/FancyContentRoute/FancyContentRoute.tsx b/src/Routes/FancyContentRoute/FancyContentRoute.tsx index 12ea60087..7f9933bf0 100644 --- a/src/Routes/FancyContentRoute/FancyContentRoute.tsx +++ b/src/Routes/FancyContentRoute/FancyContentRoute.tsx @@ -14,6 +14,10 @@ export default function FancyContentRoute() { Hiii Hiii + + Hiii + Hiii + ); diff --git a/src/Routes/FancyImageRoute/FancyImageRoute.tsx b/src/Routes/FancyImageRoute/FancyImageRoute.tsx index 858128257..d1bbb2022 100644 --- a/src/Routes/FancyImageRoute/FancyImageRoute.tsx +++ b/src/Routes/FancyImageRoute/FancyImageRoute.tsx @@ -18,13 +18,18 @@ export default function FancyImageRoute() { flex-direction: column; `} > - + Top Right Top Right sub an more diff --git a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx index 747ebee46..ea4ce6444 100644 --- a/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx +++ b/src/Routes/FancyLayoutRoute/FancyLayoutRoute.tsx @@ -10,7 +10,10 @@ export default function FancyLayoutRoute() { - + + + + @@ -31,7 +34,11 @@ export default function FancyLayoutRoute() { - } flexDirection="column" gap="12px"> + } + flexDirection="column" + gap="12px" + > diff --git a/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx b/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx index f8773dcc7..a4f6cca54 100644 --- a/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx +++ b/src/Routes/FancySearchBarRoute/FancySearchBarRoute.tsx @@ -60,7 +60,8 @@ export default function FancySearchBarRoute() { const searchHandler = (searchValue: string) => { const lowerSearchValue = searchValue.toLowerCase(); const getUser = users.filter( - (user) => user.name.toLowerCase().includes(lowerSearchValue) || user.username.toLowerCase().includes(lowerSearchValue) + (user) => + user.name.toLowerCase().includes(lowerSearchValue) || user.username.toLowerCase().includes(lowerSearchValue) ); setSearchValue(searchValue); setSearchedUsers(getUser); diff --git a/src/Routes/HeaderRoute/HeaderRoute.tsx b/src/Routes/HeaderRoute/HeaderRoute.tsx index bd0c2c066..e92b69972 100644 --- a/src/Routes/HeaderRoute/HeaderRoute.tsx +++ b/src/Routes/HeaderRoute/HeaderRoute.tsx @@ -12,8 +12,23 @@ import Header from '../../components/molecules/Header/Header'; import themeStore from '@/design/theme/themeStore/themeStore'; import { Typography } from '@/components/atoms/Typography'; +import { FancyHeader } from '@/components/organisms/FancyHeader'; +import { SwitchList } from '@/components/molecules/SwitchList'; +import { FancyGrid } from '@/components/templates/FancyGrid'; +import { FancyMenu } from '@/components/templates/FancyMenueComponent/FancyMenu'; +import { FancyPopover } from '@/components/shared/FancyPopover'; +import { FancyFlexBox } from '@/components/templates/FancyFlexBox'; +import { breakPointStyle } from '@/Routes/HeaderRoute/breakPointStyle'; + const Logo = () => ( - + @@ -23,9 +38,8 @@ const RightSlot = ({ onClick }: { onClick?: () => void }) => { return (
); @@ -47,9 +61,8 @@ const HeaderContent = () => {
@@ -59,8 +72,67 @@ const HeaderContent = () => { export default function HeaderRoute() { const [isOpen, setIsOpen] = useState(false); + console.log(breakPointStyle); + return (
+ + + + + + + + + + + + Mooiin + + + + + + + + + + mooin + mooin + mooin + mooin + + + + + + + + + + + } + refComponent={ + + } + > + + + + +
` + .logo { + &_text { + display: none; + } + } + + @media ${({ theme }) => theme.breakpoints.md} { + .logo { + &_text { + display: flex; + } + } + } +`; diff --git a/src/Routes/InputsRoute/InputsRoute.tsx b/src/Routes/InputsRoute/InputsRoute.tsx index d262c0c9e..1cba0144d 100644 --- a/src/Routes/InputsRoute/InputsRoute.tsx +++ b/src/Routes/InputsRoute/InputsRoute.tsx @@ -67,18 +67,46 @@ export default function InputsRoute() { - + - + - + - + - + - + diff --git a/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx b/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx index a0ba46669..d4703b218 100644 --- a/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx +++ b/src/Routes/LoadingSpinnerRoute/LoadingSpinnerRoute.tsx @@ -39,7 +39,14 @@ export default function LoadingSpinnerRoute() {
- +
diff --git a/src/Routes/MiniProfileRoute/MiniProfileroute.tsx b/src/Routes/MiniProfileRoute/MiniProfileroute.tsx index 32e0a7a24..650273023 100644 --- a/src/Routes/MiniProfileRoute/MiniProfileroute.tsx +++ b/src/Routes/MiniProfileRoute/MiniProfileroute.tsx @@ -12,73 +12,119 @@ export default function MiniProfileroute() {
+ + +
+ + +
+ + + +
+ + +
+
diff --git a/src/Routes/ModalRoute/ModalRoute.tsx b/src/Routes/ModalRoute/ModalRoute.tsx index 3824f0069..e2b7bbf49 100644 --- a/src/Routes/ModalRoute/ModalRoute.tsx +++ b/src/Routes/ModalRoute/ModalRoute.tsx @@ -14,7 +14,9 @@ export default function ModalRoute() { }; return (
- + + +
); } diff --git a/src/Routes/NavBarHandy/NavBarHandy.tsx b/src/Routes/NavBarHandy/NavBarHandy.tsx index 90622086c..e8be1d611 100644 --- a/src/Routes/NavBarHandy/NavBarHandy.tsx +++ b/src/Routes/NavBarHandy/NavBarHandy.tsx @@ -4,7 +4,9 @@ import React from 'react'; import { DesignWrapper, DesignArea } from '../DesignWrapper/Wrapper'; import BottomBar from '../../components/molecules/BottomBar/BottomBar'; import FancyHandyNav from '../../components/templates/FancyHandyNav/FancyHandyNav'; -import FancyBottomBarIcon, { IFancyBottomBarIcon } from '../../components/templates/FancyBottomBarIcon/FancyBottomBarIcon'; +import FancyBottomBarIcon, { + IFancyBottomBarIcon, +} from '../../components/templates/FancyBottomBarIcon/FancyBottomBarIcon'; import { css } from 'styled-components'; const svg = ( diff --git a/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx b/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx index 40779574b..d887ede4f 100644 --- a/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx +++ b/src/Routes/PageSwitchRoute/PageSwitchRoute.tsx @@ -23,7 +23,10 @@ export default function PageSwitchRoute() { return ( - + diff --git a/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx b/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx index 634ace366..20f1c592a 100644 --- a/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx +++ b/src/Routes/SingleNumberInputRoute/SingleNumberInputRoute.tsx @@ -25,7 +25,12 @@ export default function SingleNumberInputRoute() { - + diff --git a/src/Routes/Switches/SwitchesRoute.tsx b/src/Routes/Switches/SwitchesRoute.tsx index 02c2e5d45..9b790a816 100644 --- a/src/Routes/Switches/SwitchesRoute.tsx +++ b/src/Routes/Switches/SwitchesRoute.tsx @@ -13,7 +13,12 @@ export default function SwitchesRoute() { return ( - + } /> @@ -21,7 +26,7 @@ export default function SwitchesRoute() { - + diff --git a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx index 5f6cb3708..03e86b432 100644 --- a/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx +++ b/src/Routes/TabSwitchRoute/TabSwitchRoute.tsx @@ -21,7 +21,8 @@ const switchValues1 = [ { itemKey: '2', value: 'Tab 1', - label: 'Tab 1 asksk aklsaklskl klaskl aklas aklkl asuiasuiui uiasui asiuui asuiausi u asasuaui suaiausu asuusau isasuus ', + label: + 'Tab 1 asksk aklsaklskl klaskl aklas aklkl asuiasuiui uiasui asiuui asuiausi u asasuaui suaiausu asuusau isasuus ', icon: Icon, }, { itemKey: '3', value: 'Tab 3', label: 'Tab 3', icon: Icon }, @@ -51,7 +52,7 @@ export default function TabSwitchRoute() { <> setTest(id)} + /> + setTest(id)} + /> + setTest(id)} @@ -92,7 +116,7 @@ export default function TabSwitchRoute() { outlined rounded="complete" size="sm" - themeType="transparent" + layer={3} values={switchValues1} currentSelect={test} handler={(id: string) => setTest(id)} @@ -124,6 +148,7 @@ export default function TabSwitchRoute() { direction="vertical" values={switchValues} rounded={'xl'} + layer={3} currentSelect={test} handler={(id: string) => setTest(id)} /> @@ -131,6 +156,7 @@ export default function TabSwitchRoute() { label="test" wide values={switchValues} + layer={2} rounded={'xl'} currentSelect={test} handler={(id: string) => setTest(id)} diff --git a/src/Routes/Typography/Typogrphy.tsx b/src/Routes/Typography/Typogrphy.tsx index dd42010ac..c4ff829da 100644 --- a/src/Routes/Typography/Typogrphy.tsx +++ b/src/Routes/Typography/Typogrphy.tsx @@ -19,7 +19,9 @@ export default function Typogrphy() { h4. Heading Heading Lorem ipsum dolor sit amet, h5. Heading Heading Lorem ipsum dolor sit amet, h6. Heading Heading Lorem ipsum dolor sit amet, - button. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + + button. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur + content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur diff --git a/src/components/atoms/AlignedInputLabel/AlignedInputLabel.tsx b/src/components/atoms/AlignedInputLabel/AlignedInputLabel.tsx index 6f180fc8c..cbe99944d 100644 --- a/src/components/atoms/AlignedInputLabel/AlignedInputLabel.tsx +++ b/src/components/atoms/AlignedInputLabel/AlignedInputLabel.tsx @@ -5,7 +5,7 @@ import { getTextColor } from '../../../design/designFunctions/colorCalculatorFor 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; diff --git a/src/components/atoms/AnimatedInputLabel/AnimatedInputLabel.tsx b/src/components/atoms/AnimatedInputLabel/AnimatedInputLabel.tsx index 9b79083cc..05dc1bf23 100644 --- a/src/components/atoms/AnimatedInputLabel/AnimatedInputLabel.tsx +++ b/src/components/atoms/AnimatedInputLabel/AnimatedInputLabel.tsx @@ -9,7 +9,7 @@ import { TTheme } from '@/interface/TTheme'; // --------------------------------------------------------------------------- // // ---------- 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; @@ -39,7 +39,7 @@ const activeHandler = (align: string, $moveUp?: boolean) => { left: 0; ${$moveUp ? css` - transform: translateY(-20px); + transform: translateY(-24px); ` : ''} `; @@ -50,7 +50,7 @@ const activeHandler = (align: string, $moveUp?: boolean) => { text-align: center; ${$moveUp ? css` - transform: translateY(-20px) translate(-50%); + transform: translateY(-24px) translate(-50%); ` : 'transform: translate(-50%);'}; `; diff --git a/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx b/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx index 349f349ca..863861ed5 100644 --- a/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx +++ b/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.stories.tsx @@ -10,7 +10,8 @@ const meta = { parameters: { docs: { description: { - component: 'The CheckerBoardPattern component is a Gradient pattern that can be used as a background for other components.', + component: + 'The CheckerBoardPattern component is a Gradient pattern that can be used as a background for other components.', }, }, }, diff --git a/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.tsx b/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.tsx index add0abf79..884867f78 100644 --- a/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.tsx +++ b/src/components/atoms/CheckerBoardPattern/CheckerBoardPattern.tsx @@ -5,8 +5,9 @@ const CheckerBoardPattern = styled.div<{ opacity?: number }>` 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-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, diff --git a/src/components/atoms/DateOutput/DateOutput.tsx b/src/components/atoms/DateOutput/DateOutput.tsx index 2a6bf0a3a..ee3d12849 100644 --- a/src/components/atoms/DateOutput/DateOutput.tsx +++ b/src/components/atoms/DateOutput/DateOutput.tsx @@ -52,7 +52,12 @@ export default function DateOutput({ date = new Date(), isActive, onClick, theme // --------------------------------------------------------------------------- // // --------------------- The style for the component ------------------------- // // --------------------------------------------------------------------------- // -const DateOutputButton = styled.button<{ $isActive?: boolean; theme: TTheme; $themeType?: TThemeTypes; $layer?: TLayer }>` +const DateOutputButton = styled.button<{ + $isActive?: boolean; + theme: TTheme; + $themeType?: TThemeTypes; + $layer?: TLayer; +}>` text-align: center; width: 100%; background-color: ${({ theme, $isActive, $themeType = 'primary', $layer = 2 }) => diff --git a/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx b/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx index 0e033bc23..c7df66a4d 100644 --- a/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx +++ b/src/components/atoms/DropDownSelect/DropDownSelect.style.tsx @@ -3,8 +3,6 @@ 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; @@ -21,7 +19,7 @@ export const SelectField = styled.select` )}'>")`}; `} background-repeat: no-repeat; - background-position: right ${({ theme }) => theme.spacing.sm} top 30%; + background-position: right ${({ theme }) => theme.spacing.xxs} top 30%; text-align-last: ${({ $align }) => ($align !== 'center' ? 'left' : 'center')}; color: ${({ theme }) => theme.colors.secondary[0]}; border: none; @@ -29,7 +27,7 @@ export const SelectField = styled.select` font-weight: 500; user-select: none; appearance: none; - padding: 0px 0px ${({ theme }) => theme.spacing.sm}; + padding: 0px 0px ${({ theme }) => theme.spacing.xs}; font-size: ${fontSize.md}; background-color: transparent; diff --git a/src/components/atoms/DropDownSelect/DropDownSelect.tsx b/src/components/atoms/DropDownSelect/DropDownSelect.tsx index 52995288a..083c5de1b 100644 --- a/src/components/atoms/DropDownSelect/DropDownSelect.tsx +++ b/src/components/atoms/DropDownSelect/DropDownSelect.tsx @@ -15,7 +15,8 @@ export interface IDropDownSelect extends Omit, // ---------------- the blank drop down select ---------------------- // // ------------------------------------------------------------------ // export default function DropDownSelect(props: IDropDownSelect) { - const { values, value, placeholder, children, align, onChange, activeHandler, emptySelect, ...htmlInputProps } = props; + const { values, value, placeholder, children, align, onChange, activeHandler, emptySelect, ...htmlInputProps } = + props; return ( + Your themed and outlined bar content... ``` @@ -49,7 +50,7 @@ FancyBox is a versatile component that can act as the core element for various p FancyBox accepts child components, enabling developers to embed other components or elements within the bar. ```javascript - +

This is some text inside the FancyBox

 @@ -60,7 +61,9 @@ FancyBox is a versatile component that can act as the core element for various p 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... + + A FancyBox with custom style... + ``` ### Conclusion diff --git a/src/components/atoms/FancyBox/FancyBox.model.ts b/src/components/atoms/FancyBox/FancyBox.model.ts index 5b188558e..7cdb5c034 100644 --- a/src/components/atoms/FancyBox/FancyBox.model.ts +++ b/src/components/atoms/FancyBox/FancyBox.model.ts @@ -1,10 +1,11 @@ +import { ElementType } from 'react'; import { CSSProp } from 'styled-components'; + import { TLayer } from '@/interface/TLayer'; import { TThemeTypes } from '@/interface/TThemeTypes'; -type HTMLDivElementProps = Omit, 'style'>; -interface IFancyBox { - as?: keyof JSX.IntrinsicElements; +export interface IFancyBox { + as?: ElementType; outlined?: boolean; layer?: TLayer; themeType?: TThemeTypes; @@ -13,4 +14,4 @@ interface IFancyBox { externalStyle?: CSSProp; } -export type IFancyBoxProps = IFancyBox & HTMLDivElementProps; +export type IFancyBoxProps = IFancyBox & Omit, 'style'>; diff --git a/src/components/atoms/FancyBox/FancyBox.stories.tsx b/src/components/atoms/FancyBox/FancyBox.stories.tsx index ec3ff465a..22f5a82b6 100644 --- a/src/components/atoms/FancyBox/FancyBox.stories.tsx +++ b/src/components/atoms/FancyBox/FancyBox.stories.tsx @@ -1,5 +1,6 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; // Import the component to be tested import FancyBox from './FancyBox'; @@ -8,7 +9,6 @@ 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 @@ -19,7 +19,7 @@ const meta = { 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', + 'The FancyBox 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', }, }, }, @@ -69,7 +69,8 @@ const meta = { }, }, externalStyle: { - description: 'The style of the card can porvieed with the styled-component css and react style={{width: "100px"}}', + description: + 'The style of the card can porvieed with the styled-component css and react style={{width: "100px"}}', control: { type: 'object', }, @@ -115,9 +116,9 @@ export const Header: Story = {
@@ -148,10 +149,30 @@ const BottomBarComponent = (args: React.ComponentProps) => { 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')} /> + } + 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')} + /> ); }; diff --git a/src/components/atoms/FancyBox/FancyBox.style.tsx b/src/components/atoms/FancyBox/FancyBox.style.tsx index f175de6f9..4a901f55b 100644 --- a/src/components/atoms/FancyBox/FancyBox.style.tsx +++ b/src/components/atoms/FancyBox/FancyBox.style.tsx @@ -4,10 +4,9 @@ import { generateThemeForCard } from '@/design/designFunctions/generateThemeForC import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TTheme } from '@/interface/TTheme'; -import { IFancyBoxProps } from './FancyBox.model'; - +import { IFancyBox } from './FancyBox.model'; // the fancy box that gets the style from the theme -type IStyledFancyBox = IStyledPrefixAndPicker & { theme: TTheme }; +type IStyledFancyBox = IStyledPrefixAndPicker & { theme: TTheme }; export const StyledFancyBox = styled.div` box-sizing: border-box; ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) => diff --git a/src/components/atoms/FancyBox/FancyBox.tsx b/src/components/atoms/FancyBox/FancyBox.tsx index 1a97ff33e..93df296be 100644 --- a/src/components/atoms/FancyBox/FancyBox.tsx +++ b/src/components/atoms/FancyBox/FancyBox.tsx @@ -1,19 +1,22 @@ +import { ElementType } 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 FancyBox(props: IFancyBoxProps) { - const { layer, themeType, outlined, outlinedBackgroundStrength, externalStyle } = props; +export default function FancyBox(props: IFancyBoxProps) { + const { layer, themeType, outlined, outlinedBackgroundStrength, externalStyle, as, ...htmlProps } = props; return ( {props.children} diff --git a/src/components/atoms/FancyBox/index.ts b/src/components/atoms/FancyBox/index.ts index 0a6465ed3..5f7fdbc24 100644 --- a/src/components/atoms/FancyBox/index.ts +++ b/src/components/atoms/FancyBox/index.ts @@ -1 +1,2 @@ export { default as FancyBox } from './FancyBox'; +export type { IFancyBox } from './FancyBox.model'; diff --git a/src/components/atoms/FancyCard/Card.model.ts b/src/components/atoms/FancyCard/Card.model.ts index 2ad67dc68..a45ac9278 100644 --- a/src/components/atoms/FancyCard/Card.model.ts +++ b/src/components/atoms/FancyCard/Card.model.ts @@ -1,6 +1,6 @@ import { IRoundedEdges } from '@/design/designFunctions/edgeCalculation/edgeCalculation'; import { TLayer } from '@/interface/TLayer'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TSpacings } from '@/interface/TSpacings'; diff --git a/src/components/atoms/FancyCard/FancyCard.style.tsx b/src/components/atoms/FancyCard/FancyCard.style.tsx index b7650ab09..b422a1b27 100644 --- a/src/components/atoms/FancyCard/FancyCard.style.tsx +++ b/src/components/atoms/FancyCard/FancyCard.style.tsx @@ -13,7 +13,8 @@ import { TTheme } from '@/interface/TTheme'; type IStyledCard = IStyledPrefixAndOmiter; //the main design of the card export const StyledCard = styled.div` - ${({ theme, $themeType = 'primary', $layer, $textLayer }) => getColorsForComponent({ theme, $themeType, $layer, $textLayer })} + ${({ theme, $themeType = 'primary', $layer, $textLayer }) => + getColorsForComponent({ theme, $themeType, $layer, $textLayer })} overflow: hidden; width: ${({ $width }) => $width}; height: ${({ $height }) => $height}; diff --git a/src/components/atoms/FancyCard/FancyCard.tsx b/src/components/atoms/FancyCard/FancyCard.tsx index e4f4dd4c1..950b64db7 100644 --- a/src/components/atoms/FancyCard/FancyCard.tsx +++ b/src/components/atoms/FancyCard/FancyCard.tsx @@ -12,7 +12,10 @@ interface ICard extends StyledCardProps { layer?: TLayer; } export default function FancyCard(props: ICard) { - const { children, height, width, radius, padding, roundedEdges, layer, shadow, themeType, textLayer } = { ...defaultProps, ...props }; + const { children, height, width, radius, padding, roundedEdges, layer, shadow, themeType, textLayer } = { + ...defaultProps, + ...props, + }; return ( ; export const Primary: Story = { render: (args) => , args: { - imageUrl: 'https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg', + src: 'https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg', aspectRatio: '2/4', alt: 'Fannncy', darken: false, diff --git a/src/components/atoms/FancyImage/FancyImage.style.tsx b/src/components/atoms/FancyImage/FancyImage.style.tsx index 3d2475605..55fd6dbee 100644 --- a/src/components/atoms/FancyImage/FancyImage.style.tsx +++ b/src/components/atoms/FancyImage/FancyImage.style.tsx @@ -1,9 +1,14 @@ import { styled } from 'styled-components'; -export const StyledImage = styled.img<{ $darken?: boolean; $aspectRatio?: string }>` +import { IFancyImage } from '@/components/atoms/FancyImage/FancyImage'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; + +type TFancyImage = IStyledPrefixAndPicker; +export const StyledImage = styled.img` width: 100%; object-fit: cover; transition: filter 0.3s; - ${({ $aspectRatio }) => ($aspectRatio ? `aspect-ratio: ${$aspectRatio};` : '')} filter: ${({ $darken }) => ($darken ? 'brightness(0.5)' : 'none')}; + aspect-ratio: ${({ $aspectRatio }) => ($aspectRatio ? `${$aspectRatio};` : '')}; + ${({ $externalStyle }) => $externalStyle}; `; diff --git a/src/components/atoms/FancyImage/FancyImage.tsx b/src/components/atoms/FancyImage/FancyImage.tsx index abb763583..fd087352d 100644 --- a/src/components/atoms/FancyImage/FancyImage.tsx +++ b/src/components/atoms/FancyImage/FancyImage.tsx @@ -1,20 +1,18 @@ -import React from 'react'; - import { StyledImage } from './FancyImage.style'; import { isAspectRatioValid } from '@/utils/validations/isAspectRatioValid'; +import { CSSProp } from 'styled-components'; // Define the props for the FancyImage component -export interface IFancyImage { - imageUrl: string; +export type IFancyImage = { aspectRatio?: string; // e.g. "16/9" darken?: boolean; - alt?: string; -} + externalStyle?: CSSProp; +} & React.ImgHTMLAttributes; // --------------------------------------------------------------------------- // // -------------- The Definition for the FancyImage Component ---------------- // // --------------------------------------------------------------------------- // export default function FancyImage(props: IFancyImage) { - const { imageUrl, aspectRatio, darken, alt } = props; + const { aspectRatio, darken, externalStyle, ...imgProps } = props; // Validate the aspect ratio if it is provided if (aspectRatio && !isAspectRatioValid(aspectRatio)) { @@ -22,5 +20,5 @@ export default function FancyImage(props: IFancyImage) { } // Render the image with the provided props - return ; + return ; } diff --git a/src/components/atoms/FancyLI/FancyLI.tsx b/src/components/atoms/FancyLI/FancyLI.tsx index b3e15f83a..c3c527485 100644 --- a/src/components/atoms/FancyLI/FancyLI.tsx +++ b/src/components/atoms/FancyLI/FancyLI.tsx @@ -5,33 +5,33 @@ import IStyledPrefixAndOmiter from '@/interface/IStyledPrefixAndOmiter.model'; import { TSpacings } from '@/interface/TSpacings'; import { TTheme } from '@/interface/TTheme'; -interface FancyLIProps { +type TFancyLIProps = { aligned?: 'left' | 'center' | 'right'; children?: React.ReactNode; size?: TSpacings; -} +} & React.HTMLAttributes; // --------------------------------------------------------------------------- // // ------------- The fancy LI Item that can dynamicly adjusted --------------- // // --------------------------------------------------------------------------- // -export default function FancyLI(props: FancyLIProps) { - const { children, size, aligned } = { ...defaultProps, ...props }; +export default function FancyLI(props: TFancyLIProps) { + const { children, size, aligned, ...htmlProps } = { ...defaultProps, ...props }; return ( - + {children} ); } -const defaultProps: FancyLIProps = { - size: 'md', - aligned: 'left', +const defaultProps = { + size: 'md' as const, + aligned: 'left' as const, }; // ------------------------------------------- // // ------- The style for the component ------- // // ------------------------------------------- // -type StyledFancyLi = IStyledPrefixAndOmiter & { theme: TTheme }; +type StyledFancyLi = IStyledPrefixAndOmiter & { theme: TTheme }; const FancyLiItem = styled.li` list-style: none; display: flex; diff --git a/src/components/atoms/FancyLine/FancyLine.tsx b/src/components/atoms/FancyLine/FancyLine.tsx index 8fe286b03..e7ffc75e7 100644 --- a/src/components/atoms/FancyLine/FancyLine.tsx +++ b/src/components/atoms/FancyLine/FancyLine.tsx @@ -1,3 +1,4 @@ +import { HTMLAttributes } from 'react'; import { styled } from 'styled-components'; import { TLayer } from '@/interface/TLayer'; @@ -12,14 +13,22 @@ type IFancyLine = { margin?: string; themeType?: TThemeTypes; layer?: TLayer; -}; +} & HTMLAttributes; // --------------------------------------------------------------------------- // // ------------ A dynamic line (vertical/horizontal) for better UX/UI ------- // // --------------------------------------------------------------------------- // export default function FancyLine(props: IFancyLine) { - const { direction, thickness, margin, themeType, layer } = props; + const { direction, thickness, margin, themeType, layer, ...htmlProps } = props; + return ( - + ); } @@ -44,7 +53,8 @@ const StyledFancyLine = styled.hr` 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 })}; + background-color: ${({ theme, $themeType = 'accent', $layer }) => + getBackgroundColor({ theme, $themeType, $layer })}; border: 0; padding: 0; filter: blur(0.5px); diff --git a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts index 539d2ac2b..43030c942 100644 --- a/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts +++ b/src/components/atoms/FancyLoadingSpinner/FancyLoadingSpinner.model.ts @@ -20,7 +20,7 @@ const generateBorder = ({ $size, theme, $layer, $themeType = 'accent' }: IGenera border-top: ${$size} solid transparent; border-right: ${$size} solid ${theme.colors[$themeType][$layer || 0]}; border-bottom: ${$size} solid transparent; - border-left: ${$size} solid ${theme.colors.accent[$themeType][$layer || 0]}; + border-left: ${$size} solid ${theme.colors[$themeType][$layer || 0]}; `; }; diff --git a/src/components/atoms/FancyPill/FancyPill.mdx b/src/components/atoms/FancyPill/FancyPill.mdx new file mode 100644 index 000000000..75411fcc5 --- /dev/null +++ b/src/components/atoms/FancyPill/FancyPill.mdx @@ -0,0 +1,74 @@ +# FancyPill Documentation + +In an era where user interaction and response cues are pivotal in UI/UX design, the FancyPill component serves as a dynamic and versatile tool. Its primary purpose is to enhance user interaction through various states like focus and hover, catering to a wide range of actions and responses in an application's interface. + +## Overview + +FancyPill is an interactive component designed for signaling and handling user actions within a UI. It can be used for various purposes, such as buttons, tags, or interactive list items. This component is highly customizable, allowing developers to tailor its appearance and behavior according to the specific needs of their project. + +## Initial Setup + +### Import the Component + +Start by importing the FancyPill component into your project file: + +```javascript +import FancyPill from 'path-to-FancyPill'; +``` + +### Use the Component + +Implement the FancyPill component in your UI, configuring its properties to achieve the desired look and behavior: + +```javascript + + Your interactive content here... + +``` + +## Using FancyPill + +### Customization with Properties + +FancyPill offers a variety of properties for customization: + +- **themeType:** Determines the color theme of the pill, accepting any key from `TUiColorsType`. +- **outlined:** A boolean that styles the pill with an outline. +- **layer:** Sets the depth or z-index of the component. +- **outlinedBackgroundStrength:** Controls the background intensity when outlined is true. +- **externalStyle:** Allows for inline CSS styling. +- **isActive:** A boolean to indicate if the pill is in an active state. +- **isHoverable:** Enables hover effects on the pill. + +Example with multiple properties: + +```javascript + + Interactive and styled pill content... + +``` + +### Incorporating Child Components + +FancyPill can enclose other components or elements, enhancing their interactivity and visual appeal. + +```javascript + + +

Text inside the FancyPill

+ +``` + +## Advanced Styling + +Beyond predefined styles, the `externalStyle` property allows for additional inline customization, offering even more flexibility in design. + +```javascript + + A FancyPill with custom styling... + +``` + +## Conclusion + +FancyPill is a dynamic, customizable component that enhances user interaction within a UI. With its extensive customization options and support for active and hover states, it becomes an indispensable tool for creating responsive, engaging interfaces. Begin incorporating FancyPill into your UI design and discover the possibilities it unlocks. diff --git a/src/components/atoms/FancyPill/FancyPill.model.ts b/src/components/atoms/FancyPill/FancyPill.model.ts new file mode 100644 index 000000000..f73a9b7f1 --- /dev/null +++ b/src/components/atoms/FancyPill/FancyPill.model.ts @@ -0,0 +1,17 @@ +import { CSSProp } from 'styled-components'; + +import { TLayer } from '@/interface/TLayer'; +import { TThemeTypes } from '@/interface/TThemeTypes'; + +export interface IFancyPill { + outlined?: boolean; + layer?: TLayer; + themeType?: TThemeTypes; + children?: React.ReactNode; + outlinedBackgroundStrength?: number; + externalStyle?: CSSProp; + isActive?: boolean; + isHoverable?: boolean; +} + +export type IFancyPillProps = IFancyPill & React.HTMLAttributes; diff --git a/src/components/atoms/FancyPill/FancyPill.stories.tsx b/src/components/atoms/FancyPill/FancyPill.stories.tsx new file mode 100644 index 000000000..3415df17d --- /dev/null +++ b/src/components/atoms/FancyPill/FancyPill.stories.tsx @@ -0,0 +1,99 @@ +// Import necessary dependencies +import { Meta, StoryObj } from '@storybook/react'; + +// Import the component to be tested +import FancyPill from './FancyPill'; +// Define metadata for the story +const meta = { + component: FancyPill, + + parameters: { + docs: { + description: { + component: + 'The FancyPill component is for displaying a pill that can fill with somthing, it can be used for displaying content in a pill
- height: the height of the pill
- width: the width of the pill
- themeType: the theme type of the pill
- layer: the layer of the pill
- textLayer: the layer of the text
- roundedEdges: the rounded edges of the pill
- shadow: is the pill shadowed', + }, + }, + }, + + // Define arguments for the story + argTypes: { + themeType: { + description: 'The theme type of the component.', + control: { + type: 'select', + options: ['primary', 'secondary', 'accent', 'neutral'], + }, + }, + + layer: { + description: 'The layer of the component.', + control: { + type: 'range', + min: 0, + max: 10, + step: 1, + }, + }, + isActive: { + description: 'Is the component active.', + control: { + type: 'boolean', + }, + }, + isHoverable: { + description: 'Is the component hoverable.', + control: { + type: 'boolean', + }, + }, + outlined: { + description: 'Is the component outlined.', + control: { + type: 'boolean', + }, + }, + outlinedBackgroundStrength: { + description: 'The background strength of the outlined component.', + control: { + type: 'range', + min: 0, + max: 10, + step: 1, + }, + }, + externalStyle: { + description: 'The external style of the component.', + 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: { + children: 'Hiii', + themeType: 'primary', + layer: 3, + isActive: false, + isHoverable: false, + outlined: false, + outlinedBackgroundStrength: 0.5, + externalStyle: '', + }, + parameters: { + docs: { + description: { + story: '', + }, + }, + }, +}; diff --git a/src/components/atoms/FancyPill/FancyPill.styled.tsx b/src/components/atoms/FancyPill/FancyPill.styled.tsx new file mode 100644 index 000000000..8563d79cb --- /dev/null +++ b/src/components/atoms/FancyPill/FancyPill.styled.tsx @@ -0,0 +1,49 @@ +import { css, styled } from 'styled-components'; + +import { IFancyPill } from '@/components/atoms/FancyPill/FancyPill.model'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; +import { TTheme } from '@/interface/TTheme'; + +import { generateThemeForCard } from '@/design/designFunctions/generateThemeForCard'; +import { focusStyle } from '@/design/designFunctions/focusStyle'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; +import { clampLayer } from '@/utils/functions/clampLayer'; + +type ISytledFancyPill = IStyledPrefixAndPicker & { theme: TTheme }; +export const StyledFancyPill = styled.div` + outline: none; + border-radius: ${({ theme }) => theme.borderRadius.complete}; + ${({ $themeType, theme, $layer, $outlined, $outlinedBackgroundStrength }) => + generateThemeForCard({ $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength })}; + + ${({ $isHoverable, theme, $themeType = 'primary', $layer = 1 }) => + //Generate hover style when isHoverable is true + $isHoverable && generateHoverableStyle({ theme, $themeType, $layer })}; + + transition: background-color 0.2s ease-in-out; + + &:focus { + ${focusStyle} + } + + ${({ $isActive }) => $isActive && focusStyle} + ${({ $externalStyle }) => $externalStyle}; +`; + +// --------------------------------------------------------------------------- // +// ----------------- Generate Hover style its needed ------------------------ // +// --------------------------------------------------------------------------- // +type TGenerateHoverableStyle = { + $themeType: IFancyPill['themeType']; + $layer: IFancyPill['layer']; + theme: TTheme; +}; +const generateHoverableStyle = (props: TGenerateHoverableStyle) => { + const { $themeType = 'primary', $layer = 1, theme } = props; + return css` + cursor: pointer; + &:hover { + background-color: ${getBackgroundColor({ theme, $themeType, $layer: clampLayer($layer + 1) })}; + } + `; +}; diff --git a/src/components/atoms/FancyPill/FancyPill.tsx b/src/components/atoms/FancyPill/FancyPill.tsx new file mode 100644 index 000000000..4ffafa020 --- /dev/null +++ b/src/components/atoms/FancyPill/FancyPill.tsx @@ -0,0 +1,25 @@ +import { IFancyPill } from '@/components/atoms/FancyPill/FancyPill.model'; +import { StyledFancyPill } from '@/components/atoms/FancyPill/FancyPill.styled'; + +// --------------------------------------------------------------------------- // +// -------------- A Pill can be used for style and user actions ------------- // +// --------------------------------------------------------------------------- // +export default function FancyPill(props: IFancyPill) { + const { layer, themeType, outlined, outlinedBackgroundStrength, externalStyle, isActive, isHoverable, ...htmlProps } = + props; + + return ( + + {props.children} + + ); +} diff --git a/src/components/atoms/FancyPill/index.ts b/src/components/atoms/FancyPill/index.ts new file mode 100644 index 000000000..4cf6f2e63 --- /dev/null +++ b/src/components/atoms/FancyPill/index.ts @@ -0,0 +1 @@ +export { default as FancyPill } from './FancyPill'; diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx index 7594d1145..b83eddc9d 100644 --- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx +++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.stories.tsx @@ -10,7 +10,8 @@ const meta = { parameters: { docs: { description: { - component: 'The FancyProfilePicture component is a fancy profile picture that can be dynamicly adjusted in size and roundedness.', + component: + 'The FancyProfilePicture component is a fancy profile picture that can be dynamicly adjusted in size and roundedness.', }, }, }, @@ -36,26 +37,13 @@ const meta = { 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, - }, + externalStyle: { + control: { type: 'text' }, + description: 'The externalStyle of the image.', }, - themeType: { - control: { type: 'select' }, - description: 'The themeType of the image.', - defaultValue: { - summary: 'primary', - }, + textAvatarSettings: { + control: { type: 'object' }, + description: 'The textAvatarSettings of the image, the props of the AvatarTextImage component.', }, }, @@ -75,10 +63,7 @@ export const Primary: Story = { src: 'https://avatars.githubusercontent.com/u/54409958?v=4', rounded: 'complete', size: 'md', - alt: 'Profile', - letterLength: 2, - layer: 3, - themeType: 'primary', + alt: '', }, }; @@ -87,9 +72,11 @@ export const Avatar: Story = { args: { rounded: 'complete', size: 'md', - alt: 'Profile', - letterLength: 2, - layer: 3, - themeType: 'primary', + alt: '', + textAvatarSettings: { + size: 'md', + rounded: 'complete', + themeType: 'secondary', + }, }, }; diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx index 98c024905..0738eabcb 100644 --- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx +++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.style.tsx @@ -1,38 +1,19 @@ -import { styled } from 'styled-components'; +import { CSSProp, styled } from 'styled-components'; -import { TThemeTypes } from '@/interface/TThemeTypes'; -import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; -import { TBorderRadius, TSize, getBorderRadius, getSize } from './sizeSettings'; +import { TgetBorderRadiusViaSize, getBorderRadiusViaSize } from '@/design/designFunctions/getBorderRadiusViaSize'; +import { TSize, getSize } from '@/components/molecules/TextAvatar/utils/getSize'; // 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; +type TStyledImageProps = { + $rounded: TgetBorderRadiusViaSize; $size: TSize | string; - $color?: string; - $backgroundColor?: string; - theme?: TTheme; - $themeType?: TThemeTypes; - $layer?: TLayer; -} -export const Placeholder = styled.div` - border-radius: ${({ $rounded }) => getBorderRadius($rounded)}; + $externalStyle?: CSSProp; +}; +export const StyledImage = styled.img` + border-radius: ${({ $rounded }) => getBorderRadiusViaSize($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; + object-fit: cover; aspect-ratio: 1/1; + ${({ $externalStyle }) => $externalStyle} `; diff --git a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx index 24d3a3c74..5028b9e32 100644 --- a/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx +++ b/src/components/atoms/FancyProfilePicture/FancyProfilePicture.tsx @@ -1,58 +1,26 @@ -import { Placeholder, StyledImage } from './FancyProfilePicture.style'; -import { TThemeTypes } from '@/interface/TThemeTypes'; -import { TLayer } from '@/interface/TLayer'; -import { Typography } from '../Typography'; -import { TTypography } from '@/interface/TTypography'; -import { TSize } from './sizeSettings'; +import { CSSProp } from 'styled-components'; -export interface IFancyProfilePicture { - src?: string; +import { StyledImage } from './FancyProfilePicture.style'; +import { TextAvatar } from '@/components/molecules/TextAvatar'; +import { TSize } from '@/components/molecules/TextAvatar/utils/getSize'; + +type TtextAvatarSettings = React.ComponentProps; + +export type IFancyProfilePicture = { rounded?: 'sm' | 'md' | 'lg' | 'complete'; size?: TSize | string; - alt?: string; - layer?: TLayer; - themeType?: TThemeTypes; - letterLength?: number; - className?: string; -} + externalStyle?: CSSProp; + textAvatarSettings?: Omit; +} & React.ImgHTMLAttributes; // --------------------------------------------------------------------------- // // 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 }; + const { rounded = 'complete', size = 'md', alt, externalStyle, textAvatarSettings, ...htmlProps } = props; - return src ? ( - + return 'src' in htmlProps ? ( + ) : ( - - - {alt.substring(0, letterLength ?? 2).toUpperCase()} - - + ); } - -const defaultProps = { - size: 'md', - alt: 'Profile', -}; - -// 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'; - } -}; diff --git a/src/components/atoms/FancyProfilePicture/sizeSettings.ts b/src/components/atoms/FancyProfilePicture/sizeSettings.ts deleted file mode 100644 index 553d808c7..000000000 --- a/src/components/atoms/FancyProfilePicture/sizeSettings.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { IFancyProfilePicture } from './FancyProfilePicture'; - -// Set the border based on the prop -export type TBorderRadius = IFancyProfilePicture['rounded']; -export 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', -}; - -export 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']; -}; diff --git a/src/components/atoms/FancyProfilePicture/utils/getTextSize.ts b/src/components/atoms/FancyProfilePicture/utils/getTextSize.ts new file mode 100644 index 000000000..33c4b214b --- /dev/null +++ b/src/components/atoms/FancyProfilePicture/utils/getTextSize.ts @@ -0,0 +1,22 @@ +import { TSize } from '@/components/molecules/TextAvatar/utils/getSize'; +import { TTypography } from '@/interface/TTypography'; + +// generate the text size based on the size prop +export 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'; + } +}; diff --git a/src/components/atoms/FancySVGAtom/FancySVGAtom.stories.tsx b/src/components/atoms/FancySVGAtom/FancySVGAtom.stories.tsx index d4c6326ad..33100b899 100644 --- a/src/components/atoms/FancySVGAtom/FancySVGAtom.stories.tsx +++ b/src/components/atoms/FancySVGAtom/FancySVGAtom.stories.tsx @@ -12,7 +12,8 @@ const meta = { 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.', + component: + 'Fancy SVG Atom that can be dynamicly adjusted in size and alignment. It can also be used to display error messages.', }, }, }, diff --git a/src/components/atoms/FancyVideo/FancyVideo.tsx b/src/components/atoms/FancyVideo/FancyVideo.tsx index 0dbe081f4..ebff6cd47 100644 --- a/src/components/atoms/FancyVideo/FancyVideo.tsx +++ b/src/components/atoms/FancyVideo/FancyVideo.tsx @@ -2,23 +2,20 @@ import React from 'react'; import { styled } from 'styled-components'; import { isAspectRatioValid } from '@/utils/validations/isAspectRatioValid'; +import { FancyVideoSource } from '@/components/atoms/FancyVideo/FancyVideoSource'; // Define the props for the FancyVideo component -export interface IFancyVideo { - src: string; - controls?: boolean; +export type TFancyVideo = { autoPlay?: boolean; - loop?: boolean; muted?: boolean; - poster?: string; aspectRatio?: string; // e.g. "16/9" darken?: boolean; -} +} & React.VideoHTMLAttributes; // --------------------------------------------------------------------------- // // -------------- The Definition for the FancyVideo Component ---------------- // // --------------------------------------------------------------------------- // -export default function FancyVideo(props: IFancyVideo) { - const { src, controls, autoPlay, loop, muted, poster, aspectRatio, darken = true } = props; +export default function FancyVideo(props: TFancyVideo) { + const { autoPlay, muted, aspectRatio, darken, ...htmlProps } = props; // Validate the aspect ratio if it is provided if (aspectRatio && !isAspectRatioValid(aspectRatio)) { @@ -27,20 +24,14 @@ export default function FancyVideo(props: IFancyVideo) { // Render the video with the appropriate props return ( - - + + {props.children} ); } +FancyVideo.Source = FancyVideoSource; + // ------------------------------------------- // // ------- The style for the component ------- // // ------------------------------------------- // diff --git a/src/components/atoms/FancyVideo/FancyVideoSource/FancyVideoSource.tsx b/src/components/atoms/FancyVideo/FancyVideoSource/FancyVideoSource.tsx new file mode 100644 index 000000000..878156aab --- /dev/null +++ b/src/components/atoms/FancyVideo/FancyVideoSource/FancyVideoSource.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +type IFancyVideoSourceProps = { + src: string; + type: string; +} & React.SourceHTMLAttributes; + +export default function FancyVideoSource(props: IFancyVideoSourceProps) { + return ; +} diff --git a/src/components/atoms/FancyVideo/FancyVideoSource/index.ts b/src/components/atoms/FancyVideo/FancyVideoSource/index.ts new file mode 100644 index 000000000..8cef46b94 --- /dev/null +++ b/src/components/atoms/FancyVideo/FancyVideoSource/index.ts @@ -0,0 +1 @@ +export { default as FancyVideoSource } from './FancyVideoSource'; diff --git a/src/components/atoms/FancyXButton/FancyXButton.tsx b/src/components/atoms/FancyXButton/FancyXButton.tsx index f5447d3a5..efc317a3a 100644 --- a/src/components/atoms/FancyXButton/FancyXButton.tsx +++ b/src/components/atoms/FancyXButton/FancyXButton.tsx @@ -1,11 +1,11 @@ -import { styled } from 'styled-components'; import Color from 'color'; +import { styled } from 'styled-components'; import { fontSize } from '@/design/theme/designSizes'; import { simpleColorTransition } from '@/design/designFunctions/simpleColorTransition'; import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; import { TLayer } from '@/interface/TLayer'; -import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; // --------------------------------------------------------------------------- // @@ -45,6 +45,7 @@ const StyledFancyXButton = styled.button` ${simpleColorTransition} &:hover { - color: ${({ $themeType = 'accent', $layer, theme }) => Color(getBackgroundColor({ $themeType, $layer, theme })).darken(0.1).hex()}; + color: ${({ $themeType = 'accent', $layer, theme }) => + Color(getBackgroundColor({ $themeType, $layer, theme })).darken(0.1).hex()}; } `; diff --git a/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx index 365c23eb9..80fdd8d1d 100644 --- a/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx +++ b/src/components/atoms/ImageVideoOverlay/ImageVideoOverlay.tsx @@ -15,7 +15,7 @@ interface IImageVideoOverlay { // ----------- The Definition for the ImageVideoOverlay Component ------------ // // --------------------------------------------------------------------------- // export default function ImageVideoOverlay(props: IImageVideoOverlay) { - const { children, position, textChildren } = { ...defaultProps, ...props }; + const { children, position = 'top-right', textChildren } = props; return ( @@ -26,8 +26,3 @@ export default function ImageVideoOverlay(props: IImageVideoOverlay) { ); } - -// Define the default props for the ImageVideoOverlay component -const defaultProps = { - position: 'top-right', -}; diff --git a/src/components/atoms/InputLabel/InputLabel.stories.tsx b/src/components/atoms/InputLabel/InputLabel.stories.tsx index 453a80037..b80d95b51 100644 --- a/src/components/atoms/InputLabel/InputLabel.stories.tsx +++ b/src/components/atoms/InputLabel/InputLabel.stories.tsx @@ -16,6 +16,26 @@ const meta = { }, }, }, + argTypes: { + theme: { + description: 'The theme for the component', + }, + $layer: { + description: 'The layer for the component', + control: { + type: 'range', + min: 0, + max: 10, + step: 1, + }, + }, + $themeType: { + description: 'The themeType for the component', + control: { + type: 'select', + }, + }, + }, // Define arguments for the story // Add tags to the story diff --git a/src/components/atoms/InputLabel/InputLabel.tsx b/src/components/atoms/InputLabel/InputLabel.tsx index 65593f050..ba8e1a33f 100644 --- a/src/components/atoms/InputLabel/InputLabel.tsx +++ b/src/components/atoms/InputLabel/InputLabel.tsx @@ -1,13 +1,23 @@ import { styled } from 'styled-components'; import { TTheme } from '@/interface/TTheme'; +import { TLayer } from '@/interface/TLayer'; +import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; +import { getTextColor } from '@/design/designFunctions/colorCalculatorForComponent'; // --------------------------------------------------------------------------- // // --------------- The main label design for the input elements -------------- // // --------------------------------------------------------------------------- // -const InputLabel = styled.label<{ theme: TTheme }>` +export interface IInputLabel { + theme: TTheme; + $layer?: TLayer; + $themeType?: TThemeTypesNotTransparent; +} + +const InputLabel = styled.label` width: 100%; - color: ${({ theme }) => theme.colors.secondary[1]}; //TODO: BUILD IN LAYER + color: ${({ theme, $layer, $themeType }) => + getTextColor({ theme, $themeType: $themeType ?? 'secondary', $textLayer: $layer ?? 1 })}; font-weight: bold; pointer-events: none; user-select: none; diff --git a/src/components/atoms/InputUnderline/InputUnderline.style.tsx b/src/components/atoms/InputUnderline/InputUnderline.style.tsx new file mode 100644 index 000000000..59588fa13 --- /dev/null +++ b/src/components/atoms/InputUnderline/InputUnderline.style.tsx @@ -0,0 +1,47 @@ +import { css, styled } from 'styled-components'; + +import { TFancyUnderline } from '@/components/atoms/InputUnderline/InputUnderline'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; +import { TTheme } from '@/interface/TTheme'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; + +// Define the styled component for the underline +type IStyledUnderline = IStyledPrefixAndPicker; +export 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 }) => { + switch ($colorState) { + case 'error': + return css`linear-gradient(90deg, ${theme.colors.error[1]}, ${theme.colors.error[0]})`; + case 'active': + return css`linear-gradient(90deg, ${theme.colors.accent[1]}, ${theme.colors.accent[0]})`; + case 'default': + return css`linear-gradient(90deg, ${theme.colors.secondary[0]}, ${theme.colors.secondary[4]})`; + default: + return ''; + } + }}; + + // Define the transition styles for the gradient overlay + transition: 0.25s; + transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96); + } +`; diff --git a/src/components/atoms/InputUnderline/InputUnderline.tsx b/src/components/atoms/InputUnderline/InputUnderline.tsx index dc5f52cf8..23865aaff 100644 --- a/src/components/atoms/InputUnderline/InputUnderline.tsx +++ b/src/components/atoms/InputUnderline/InputUnderline.tsx @@ -1,71 +1,33 @@ -import React from 'react'; -import { styled, css } from 'styled-components'; +import { HTMLAttributes } from 'react'; -import { TThemeTypes } from '@/interface/TThemeTypes'; -import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TLayer } from '@/interface/TLayer'; -import { TTheme } from '@/interface/TTheme'; +import { TThemeTypes } from '@/interface/TThemeTypes'; -import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { UnderLine } from '@/components/atoms/InputUnderline/InputUnderline.style'; // Define the props for the FancyInputUnderline component -interface IFancyUnderline { +export type TFancyUnderline = { colorState?: 'error' | 'active' | 'default'; isActive?: boolean; autoWidth?: boolean; themeType?: TThemeTypes; layer?: TLayer; -} +} & HTMLAttributes; // --------------------------------------------------------------------------- // // --------- The underline for the input components with state style --------- // // --------------------------------------------------------------------------- // -export default function InputUnderline(props: IFancyUnderline) { - const { colorState = 'default', isActive, autoWidth, layer = 4, themeType } = props; +export default function InputUnderline(props: TFancyUnderline) { + const { colorState = 'default', isActive, autoWidth, layer = 4, themeType, ...htmlProps } = props; // Render the FancyInputUnderline component with the appropriate props - return ; + return ( + + ); } - -// ------------------------------------------- // -// ------- The style for the component ------- // -// ------------------------------------------- // -// 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 }) => { - switch ($colorState) { - case 'error': - return css`linear-gradient(90deg, ${theme.colors.error[1]}, ${theme.colors.error[0]})`; - case 'active': - return css`linear-gradient(90deg, ${theme.colors.accent[1]}, ${theme.colors.accent[0]})`; - case 'default': - return css`linear-gradient(90deg, ${theme.colors.secondary[0]}, ${theme.colors.secondary[4]})`; - default: - return ''; - } - }}; - - // Define the transition styles for the gradient overlay - transition: 0.25s; - transition-timing-function: cubic-bezier(0.46, 0.03, 0.52, 0.96); - } -`; diff --git a/src/components/atoms/ListDivider/ListDivider.model.ts b/src/components/atoms/ListDivider/ListDivider.model.ts index c1d25f740..695066b00 100644 --- a/src/components/atoms/ListDivider/ListDivider.model.ts +++ b/src/components/atoms/ListDivider/ListDivider.model.ts @@ -1,5 +1,6 @@ import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; +import { HTMLAttributes } from 'react'; export type TTextAlign = 'left' | 'center' | 'right'; @@ -19,4 +20,5 @@ export type IListDivider = { noLine?: boolean; bold?: boolean; icon?: React.ReactNode; -} & (WithLabel | WithoutLabel); +} & (WithLabel | WithoutLabel) & + HTMLAttributes; diff --git a/src/components/atoms/ListDivider/ListDivider.style.tsx b/src/components/atoms/ListDivider/ListDivider.style.tsx index 9880a5868..6deea170b 100644 --- a/src/components/atoms/ListDivider/ListDivider.style.tsx +++ b/src/components/atoms/ListDivider/ListDivider.style.tsx @@ -16,10 +16,13 @@ export const StyledI = styled.div` `; // the wrapper for the text and the line -type TStyledTextDiv = IStyledPrefixAndPicker & { theme: TTheme }; +type TStyledTextDiv = IStyledPrefixAndPicker & { + theme: TTheme; +}; export const StyledTextDiv = styled.div` display: flex; - color: ${({ $themeType, $layer, theme }) => getBackgroundColor({ $themeType: $themeType ?? 'secondary', $layer, theme })}; + color: ${({ $themeType, $layer, theme }) => + getBackgroundColor({ $themeType: $themeType ?? 'secondary', $layer, theme })}; justify-content: ${({ $textAlignment }) => $textAlignment === 'left' ? 'flex-start' : $textAlignment === 'right' ? 'flex-end' : 'center'}; diff --git a/src/components/atoms/ListDivider/ListDivider.tsx b/src/components/atoms/ListDivider/ListDivider.tsx index 5bc744c35..f5eeb9da4 100644 --- a/src/components/atoms/ListDivider/ListDivider.tsx +++ b/src/components/atoms/ListDivider/ListDivider.tsx @@ -7,13 +7,20 @@ import { StyledI, StyledTextDiv } from './ListDivider.style'; // ------- 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; + const { label, textAlignment = 'center', themeType, layer, bold, icon, noLine, ...htmlProps } = props; return ( <> {/* Render a Seperator(Divider) with a optional label and icon */} {label ? ( - + {label && ( @@ -25,7 +32,7 @@ export default function ListDivider(props: IListDivider) { ) : ( // Render a Seperator(Divider) only a line - + )} ); diff --git a/src/components/atoms/MenuItem/MenuItem.style.tsx b/src/components/atoms/MenuItem/MenuItem.style.tsx index 4ef7e4786..de718d34a 100644 --- a/src/components/atoms/MenuItem/MenuItem.style.tsx +++ b/src/components/atoms/MenuItem/MenuItem.style.tsx @@ -3,7 +3,10 @@ import styled from 'styled-components'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; -import { getBackgroundColor, getTextColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; +import { + getBackgroundColor, + getTextColor, +} from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; type StyledMenuProps = { $themeType?: TThemeTypes; diff --git a/src/components/atoms/PasswordEye/PasswordEye.tsx b/src/components/atoms/PasswordEye/PasswordEye.tsx index a185732f7..091e4bb3d 100644 --- a/src/components/atoms/PasswordEye/PasswordEye.tsx +++ b/src/components/atoms/PasswordEye/PasswordEye.tsx @@ -16,12 +16,12 @@ export default function PasswordEye({ isShow, onClick }: IPasswordEye) { {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/ProgressBar/ProgressBar.style.tsx b/src/components/atoms/ProgressBar/ProgressBar.style.tsx index f98965b55..04bd6112d 100644 --- a/src/components/atoms/ProgressBar/ProgressBar.style.tsx +++ b/src/components/atoms/ProgressBar/ProgressBar.style.tsx @@ -14,7 +14,8 @@ interface IProgressBarContainerProps { export const ProgressBarContainer = styled.div` width: 100%; height: 4px; - background-color: ${({ theme, $themeType = 'secondary', $layer = 4 }) => getBackgroundColor({ theme, $themeType, $layer })}; + background-color: ${({ theme, $themeType = 'secondary', $layer = 4 }) => + getBackgroundColor({ theme, $themeType, $layer })}; border-radius: 10px; overflow: hidden; position: relative; diff --git a/src/components/atoms/ProgressBar/ProgressBar.tsx b/src/components/atoms/ProgressBar/ProgressBar.tsx index 4cadaac81..1b8cfa268 100644 --- a/src/components/atoms/ProgressBar/ProgressBar.tsx +++ b/src/components/atoms/ProgressBar/ProgressBar.tsx @@ -11,7 +11,8 @@ export interface IProgressBar { layer?: TLayer; } // Define the ProgressBar component -export default function ProgressBar({ progress = 0, maxValue = 100, id, themeType, layer }: IProgressBar) { +export default function ProgressBar(props: IProgressBar) { + const { progress = 0, maxValue = 100, id, themeType, layer } = props; // Calculate the width of the progress bar fill const width = (progress / maxValue) * 100; diff --git a/src/components/atoms/RawButton/RawButton.tsx b/src/components/atoms/RawButton/RawButton.tsx new file mode 100644 index 000000000..9a03ae3b6 --- /dev/null +++ b/src/components/atoms/RawButton/RawButton.tsx @@ -0,0 +1,13 @@ +import { styled } from 'styled-components'; + +const RawButton = styled.button` + border: none; + background-color: transparent; + cursor: pointer; + background-color: transparent; + padding: 0; + display: flex; + align-items: center; +`; + +export default RawButton; diff --git a/src/components/atoms/RawButton/index.ts b/src/components/atoms/RawButton/index.ts new file mode 100644 index 000000000..7714b9dee --- /dev/null +++ b/src/components/atoms/RawButton/index.ts @@ -0,0 +1 @@ +export { default as RawButton } from './RawButton'; diff --git a/src/components/atoms/RawSlider/RawSlider.style.tsx b/src/components/atoms/RawSlider/RawSlider.style.tsx index 31736aa6c..01677a56d 100644 --- a/src/components/atoms/RawSlider/RawSlider.style.tsx +++ b/src/components/atoms/RawSlider/RawSlider.style.tsx @@ -6,7 +6,6 @@ import { TLayer } from '@/interface/TLayer'; import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; import { TTheme } from '@/interface/TTheme'; -// eslint-disable-next-line react-refresh/only-export-components const DragableThumb = css<{ theme: TTheme }>` height: 30px; width: 30px; @@ -24,7 +23,7 @@ export const StyledRawSlider = styled.input<{ theme: TTheme; $themeType?: TTheme margin: 0; height: 4px; margin: 10px 0 12px 0; - background: ${({ theme, $themeType = 'secondary', $layer = 4 }) => getBackgroundColor({ theme, $themeType, $layer })}; + background: ${({ theme, $themeType = 'secondary', $layer = 3 }) => 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%; diff --git a/src/components/atoms/RawSlider/RawSlider.tsx b/src/components/atoms/RawSlider/RawSlider.tsx index 3c5b9ff0e..7f6383cdc 100644 --- a/src/components/atoms/RawSlider/RawSlider.tsx +++ b/src/components/atoms/RawSlider/RawSlider.tsx @@ -28,7 +28,9 @@ export default function RawSlider(props: IRawSlider) { const maxVal = max ? Number(max) : 100; //calc the the progress - const calcBackgorundSize = !isNaN(sliderProgress) ? ((sliderProgress - minVal) * 100) / (maxVal - minVal) + '% 100%' : '0% 100%'; + const calcBackgorundSize = !isNaN(sliderProgress) + ? ((sliderProgress - minVal) * 100) / (maxVal - minVal) + '% 100%' + : '0% 100%'; const calcSliderProgress = !isNaN(sliderProgress) ? sliderProgress : 0; return ( diff --git a/src/components/atoms/ScrollableBar/ScrollableBar.stories.tsx b/src/components/atoms/ScrollableBar/ScrollableBar.stories.tsx index 03c5c1586..078480a93 100644 --- a/src/components/atoms/ScrollableBar/ScrollableBar.stories.tsx +++ b/src/components/atoms/ScrollableBar/ScrollableBar.stories.tsx @@ -13,7 +13,8 @@ const meta = { parameters: { docs: { description: { - component: 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', + component: + 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', }, }, }, diff --git a/src/components/atoms/SimpleDialog/SimpleDialog.model.ts b/src/components/atoms/SimpleDialog/SimpleDialog.model.ts new file mode 100644 index 000000000..87ad6ae35 --- /dev/null +++ b/src/components/atoms/SimpleDialog/SimpleDialog.model.ts @@ -0,0 +1,12 @@ +import { TLayer } from '@/interface/TLayer'; +import { TThemeTypes } from '@/interface/TThemeTypes'; + +// Define the props for the SimpleDialog component +type TSimpleDialog = { + isOpen: boolean; + children: React.ReactNode; + themeType?: TThemeTypes; + layer?: TLayer; +} & React.HTMLAttributes; + +export default TSimpleDialog; diff --git a/src/components/atoms/SimpleDialog/SimpleDialog.stories.tsx b/src/components/atoms/SimpleDialog/SimpleDialog.stories.tsx index 991f7d408..192dc3c05 100644 --- a/src/components/atoms/SimpleDialog/SimpleDialog.stories.tsx +++ b/src/components/atoms/SimpleDialog/SimpleDialog.stories.tsx @@ -10,7 +10,8 @@ const meta = { parameters: { docs: { description: { - component: 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', + component: + 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', }, }, }, diff --git a/src/components/atoms/SimpleDialog/SimpleDialog.tsx b/src/components/atoms/SimpleDialog/SimpleDialog.tsx index 6ca90e0c3..a3731572a 100644 --- a/src/components/atoms/SimpleDialog/SimpleDialog.tsx +++ b/src/components/atoms/SimpleDialog/SimpleDialog.tsx @@ -1,20 +1,15 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { animated, useSpring } from '@react-spring/web'; -import { TThemeTypes } from '@/interface/TThemeTypes'; -import { TLayer } from '@/interface/TLayer'; import { StyledDialog } from './SimpleDialog.style'; +import TSimpleDialog from '@/components/atoms/SimpleDialog/SimpleDialog.model'; -// Define the props for the SimpleDialog component -interface ISimpleDialog { - isOpen: boolean; - children: React.ReactNode; - themeType?: TThemeTypes; - layer?: TLayer; -} +// --------------------------------------------------------------------------- // +// ------- A container that can filld with everythin and acts as a dialog --- // +// --------------------------------------------------------------------------- // +export default function SimpleDialog(props: TSimpleDialog) { + const { isOpen, children, themeType, layer, ...htmlProps } = props; -// 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 @@ -31,7 +26,7 @@ export default function SimpleDialog({ isOpen, children, themeType, layer }: ISi // 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 index cf6369d74..4f770fcc8 100644 --- a/src/components/atoms/SimpleDialog/index.ts +++ b/src/components/atoms/SimpleDialog/index.ts @@ -1 +1,2 @@ export { default as SimpleDialog } from './SimpleDialog'; +export type { default as TSimpleDialog } from './SimpleDialog.model'; diff --git a/src/components/atoms/SingleInput/SingleInput.stories.tsx b/src/components/atoms/SingleInput/SingleInput.stories.tsx index ffad5ba0c..a7e38f0aa 100644 --- a/src/components/atoms/SingleInput/SingleInput.stories.tsx +++ b/src/components/atoms/SingleInput/SingleInput.stories.tsx @@ -1,11 +1,11 @@ // Import necessary dependencies import { Meta, StoryObj } from '@storybook/react'; +import SingleInput from './SingleInput'; // Import the component to be tested -import { SingleInputAtom } from './SingleInput'; // fix for building ... because storybook is not able to handle the default export -const HelperComponent = (props: React.ComponentProps) => ; +const HelperComponent = (props: React.ComponentProps) => ; HelperComponent.displayName = 'SingleInputAtom'; // Define metadata for the story @@ -14,7 +14,8 @@ const meta = { parameters: { docs: { description: { - component: 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', + component: + 'A ScrollableBar component, when the content is too wide to fit in the screen, it will be scrollable', }, }, }, diff --git a/src/components/atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx b/src/components/atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx index 33adddb45..3d68a94fd 100644 --- a/src/components/atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx +++ b/src/components/atoms/SpeedDialMenueItem/SpeedDailMenueItem.style.tsx @@ -10,7 +10,8 @@ export const MenueItemContainer = styled.div<{ $isOpen?: boolean; $index: number 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%)`)}; + 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; @@ -46,7 +47,7 @@ export const MenuItem = styled.button<{ theme: TTheme }>` &:hover { transform: scale(1.01); - background-color: ${({ theme }) => theme.colors.accent[2]}; + background-color: ${({ theme }) => theme.colors.primary[4]}; } `; diff --git a/src/components/atoms/SwipeUpContainer/SwipeUpContainer.tsx b/src/components/atoms/SwipeUpContainer/SwipeUpContainer.tsx index 281944e2b..0c21ed757 100644 --- a/src/components/atoms/SwipeUpContainer/SwipeUpContainer.tsx +++ b/src/components/atoms/SwipeUpContainer/SwipeUpContainer.tsx @@ -18,7 +18,12 @@ interface ISwipeUpContainer { } export default function SwipeUpContainer({ children, isScalable = true, style, themeType, layer }: ISwipeUpContainer) { return ( - + {children} ); @@ -46,5 +51,6 @@ const StyledSwipeUpContainer = styled.div` 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 })}; + background-color: ${({ theme, $themeType = 'primary', $layer = 0 }) => + getBackgroundColor({ theme, $themeType, $layer })}; `; diff --git a/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx b/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx index 1b4222049..d64d7ac53 100644 --- a/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx +++ b/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.stories.tsx @@ -17,7 +17,7 @@ const meta = { }, // Define arguments for the story argTypes: { - $type: { + type: { description: 'The type of the indicator, it can be a bolb or a underline', control: { type: 'radio', @@ -27,7 +27,7 @@ const meta = { summary: 'bolb', }, }, - $direction: { + direction: { description: 'The direction of the indicator where it should be moved horizontal or vertical', control: { type: 'radio', @@ -37,13 +37,13 @@ const meta = { summary: 'horizontal', }, }, - $itemNumber: { + itemNumber: { description: 'The itemnumber is to calc the position of the indicator for each item', control: { type: 'number', }, }, - $rounded: { + rounded: { description: 'The rounded is to set the border-radius of the indicator', control: { type: 'select', @@ -53,7 +53,7 @@ const meta = { summary: 'md', }, }, - $tabSpacing: { + tabSpacing: { description: 'The spacing is to calc with the offset the position of the indicator for each item', control: { type: 'select', @@ -62,7 +62,7 @@ const meta = { summary: '', }, }, - $outlined: { + outlined: { description: 'The outlined is to set the border of the indicator', control: { type: 'boolean', @@ -71,7 +71,7 @@ const meta = { summary: false, }, }, - $themeType: { + themeType: { description: 'The themeType is to set the color of the indicator', control: { type: 'select', @@ -94,13 +94,13 @@ type Story = StoryObj; export const Primary: Story = { render: (args) => , args: { - $itemNumber: 1, - $tabSpacing: 'md', - $type: 'bolb', - $rounded: 'md', - $outlined: false, - $direction: 'horizontal', - $themeType: 'accent', + itemNumber: 1, + tabSpacing: 'md', + type: 'bolb', + rounded: 'md', + outlined: false, + direction: 'horizontal', + themeType: 'accent', }, parameters: { docs: { diff --git a/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx b/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx index 130c698c0..2cd5d0dea 100644 --- a/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx +++ b/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.style.tsx @@ -5,9 +5,10 @@ import { IActiveSwitchIndicator } from './SwitchActiveIndicator'; import { generateBlob } from './utils/generateBlob'; import { generateTopline, generateUnderline } from './utils/generateLines'; import { TTheme } from '@/interface/TTheme'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; // Define the function to calculate the current position of the active indicator -type IClacCurrentPosition = Pick; +type IClacCurrentPosition = IStyledPrefixAndPicker; const clacCurrentPosition = (props: IClacCurrentPosition) => { const { $itemNumber, $tabSpacing, $direction } = props; @@ -39,9 +40,9 @@ const clacCurrentPosition = (props: IClacCurrentPosition) => { // --------------------------------------------------------------------------- // // -------- Here is the main Generator Function of the activ indicator ------- // // --------------------------------------------------------------------------- // -type TActiveSwitchIndicator = Pick< +type TActiveSwitchIndicator = IStyledPrefixAndPicker< IActiveSwitchIndicator, - '$layer' | '$rounded' | '$outlined' | '$themeType' | '$type' | '$indicatorWidth' + 'layer' | 'rounded' | 'outlined' | 'themeType' | 'type' | 'indicatorWidth' >; export const ActiveSwitchIndicator = styled.span` position: absolute; @@ -62,7 +63,7 @@ export const ActiveSwitchIndicator = styled.span; +type IWrapper = IStyledPrefixAndPicker; export const Wrapper = styled.i` top: 0; display: flex; diff --git a/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx b/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx index 607055d99..5cac014a2 100644 --- a/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx +++ b/src/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator.tsx @@ -1,28 +1,36 @@ import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; import { ActiveSwitchIndicator, Wrapper } from './SwitchActiveIndicator.style'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; 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; + itemNumber: number; + themeType?: TThemeTypes; + layer?: TLayer; + tabSpacing?: TSpacings; + type?: 'bolb' | 'underline' | 'topline'; + rounded?: TBorderRadiusSizes | string; + outlined?: boolean; + direction?: 'horizontal' | 'vertical'; + indicatorWidth?: string; + className?: 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; + const { itemNumber, tabSpacing, direction, className, ...switchProps } = props; return ( - - + + ); } diff --git a/src/components/atoms/SwitchActiveIndicator/utils/generateBlob.ts b/src/components/atoms/SwitchActiveIndicator/utils/generateBlob.ts index 9d5b34c13..b8d182dc5 100644 --- a/src/components/atoms/SwitchActiveIndicator/utils/generateBlob.ts +++ b/src/components/atoms/SwitchActiveIndicator/utils/generateBlob.ts @@ -1,14 +1,17 @@ import { css } from 'styled-components'; -import { getBackgroundColor } from '../../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; -import colorTransparencyCalculator from '../../../../design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; +import colorTransparencyCalculator from '@/design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator'; import { IActiveSwitchIndicator } from '../SwitchActiveIndicator'; import themeStore from '@/design/theme/themeStore/themeStore'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; import { TTheme } from '@/interface/TTheme'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; // Define the function to generate a blob background for the active indicator -type IGenerateBlob = Pick & { theme: TTheme }; +type IGenerateBlob = IStyledPrefixAndPicker & { + theme: TTheme; +}; export const generateBlob = (props: IGenerateBlob) => { const { $themeType, theme, $rounded, $outlined, $layer } = props; const borderRadius = themeStore.getState().theme.borderRadius; diff --git a/src/components/atoms/SwitchActiveIndicator/utils/generateLines.ts b/src/components/atoms/SwitchActiveIndicator/utils/generateLines.ts index 76abc9023..0c1078c16 100644 --- a/src/components/atoms/SwitchActiveIndicator/utils/generateLines.ts +++ b/src/components/atoms/SwitchActiveIndicator/utils/generateLines.ts @@ -3,6 +3,7 @@ import { css } from 'styled-components'; import { getBackgroundColor } from '../../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; import { IActiveSwitchIndicator } from '../SwitchActiveIndicator'; import { TTheme } from '@/interface/TTheme'; +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; const generateLine = ({ theme, $themeType = 'accent', $layer }: IGenerateLine) => { const backgroundColor = getBackgroundColor({ theme, $themeType, $layer }); @@ -15,7 +16,7 @@ const generateLine = ({ theme, $themeType = 'accent', $layer }: IGenerateLine) = }; // Define the function to generate an underline for the active indicator -type IGenerateLine = Pick & { theme: TTheme }; +type IGenerateLine = IStyledPrefixAndPicker & { theme: TTheme }; export const generateUnderline = ({ theme, $themeType = 'accent', $layer }: IGenerateLine) => { // Get the background color for the active indicator const line = generateLine({ theme, $themeType, $layer }); diff --git a/src/components/atoms/WeekDays/WeekDays.tsx b/src/components/atoms/WeekDays/WeekDays.tsx index c30b3b7fe..9936ddcc5 100644 --- a/src/components/atoms/WeekDays/WeekDays.tsx +++ b/src/components/atoms/WeekDays/WeekDays.tsx @@ -45,7 +45,8 @@ const WeekdaysConatiner = styled.div<{ theme: TTheme; $themeType?: TThemeTypes; 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 })}; + color: ${({ theme, $themeType, $layer }) => + getBackgroundColor({ theme, $themeType: $themeType ?? 'secondary', $layer: $layer ?? 0 })}; & > * { display: flex; diff --git a/src/components/atoms/YearSelector/YearSelector.style.tsx b/src/components/atoms/YearSelector/YearSelector.style.tsx index 1fcd223e5..c5a96b364 100644 --- a/src/components/atoms/YearSelector/YearSelector.style.tsx +++ b/src/components/atoms/YearSelector/YearSelector.style.tsx @@ -10,7 +10,8 @@ export const StyledYearSelector = styled.div<{ theme: TTheme; $themeType?: TThem justify-content: space-between; align-items: center; width: 100%; - color: ${({ theme, $layer, $themeType }) => ($themeType ? theme.colors[$themeType][$layer ?? 0] : theme.colors.secondary[0])}; + 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 }>` diff --git a/src/components/atoms/YearSelector/YearSelector.tsx b/src/components/atoms/YearSelector/YearSelector.tsx index 2daa1e7f2..b143ccf03 100644 --- a/src/components/atoms/YearSelector/YearSelector.tsx +++ b/src/components/atoms/YearSelector/YearSelector.tsx @@ -14,8 +14,11 @@ interface IYearSelector { themeType?: TThemeTypes; layer?: TLayer; handler?: (change: number) => void; + ariaTextLeftArrow?: string; + ariaTextRightArrow?: string; } -export default function YearSelector({ selectedYear, handler, themeType, layer }: IYearSelector) { +export default function YearSelector(props: IYearSelector) { + const { selectedYear, themeType, layer, handler, ariaTextLeftArrow, ariaTextRightArrow } = props; // update the year and call the handler if the year changes const handleYearChange = (change: number) => { const calcCurrentYear = selectedYear + change; @@ -24,7 +27,12 @@ export default function YearSelector({ selectedYear, handler, themeType, layer } return ( - handleYearChange(-1)} $themeType={themeType} $layer={layer}> + handleYearChange(-1)} + $themeType={themeType} + $layer={layer} + > {SVGChevronLeft} @@ -32,7 +40,12 @@ export default function YearSelector({ selectedYear, handler, themeType, layer } {selectedYear} - handleYearChange(1)} $themeType={themeType} $layer={layer}> + handleYearChange(1)} + $themeType={themeType} + $layer={layer} + > {SVGChevronRight} diff --git a/src/components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx b/src/components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx index bd3e904ea..916e600de 100644 --- a/src/components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx +++ b/src/components/icons/SVGEyeCrossed/SVGEyeCrossed.tsx @@ -1,4 +1,4 @@ -const SVGEyeCrossed = ( +const SVGEyeCrossed = () => ( diff --git a/src/components/icons/SVGEyeOpen/SVGEyeOpen.tsx b/src/components/icons/SVGEyeOpen/SVGEyeOpen.tsx index 10d8627d3..902fe98d5 100644 --- a/src/components/icons/SVGEyeOpen/SVGEyeOpen.tsx +++ b/src/components/icons/SVGEyeOpen/SVGEyeOpen.tsx @@ -1,4 +1,4 @@ -const SVGEyeOpen = ( +const SVGEyeOpen = () => ( // the eye icon for the password type toggle diff --git a/src/components/icons/SVGPlus/SVGPlus.tsx b/src/components/icons/SVGPlus/SVGPlus.tsx index a2c26a1f7..df89d259c 100644 --- a/src/components/icons/SVGPlus/SVGPlus.tsx +++ b/src/components/icons/SVGPlus/SVGPlus.tsx @@ -1,6 +1,9 @@ const SVGPlus = ( - + ); diff --git a/src/components/molecules/Button/Button.style.tsx b/src/components/molecules/Button/Button.style.tsx index 97293c728..2c818299c 100644 --- a/src/components/molecules/Button/Button.style.tsx +++ b/src/components/molecules/Button/Button.style.tsx @@ -21,7 +21,8 @@ export const StyledButton = styled.button generateThemeDesignForComponent({ ...props, $backgroundState: 'hover' })}; + ${(props: IGenerateThemeDesignForComponent) => + generateThemeDesignForComponent({ ...props, $backgroundState: 'hover' })}; ${({ $externalStyle }) => $externalStyle && $externalStyle} diff --git a/src/components/molecules/Button/Button.tsx b/src/components/molecules/Button/Button.tsx index b3536ed6e..71e2170ec 100644 --- a/src/components/molecules/Button/Button.tsx +++ b/src/components/molecules/Button/Button.tsx @@ -5,10 +5,11 @@ import { IButton } from './Button.model'; // --------------- A normal Button with Style from the Theme ----------------- // // --------------------------------------------------------------------------- // export default function Button(props: IButton) { - const { children, wide, themeType, layer, textColor, hoverColor, outlined, externalStyle, textHover, ...htmlProps } = { - ...defaultProps, - ...props, - }; + const { children, wide, themeType, layer, textColor, hoverColor, outlined, externalStyle, textHover, ...htmlProps } = + { + ...defaultProps, + ...props, + }; return ( ; -export const StyledChip = styled.div` - border: none; - height: ${({ $size }) => ($size ? sizes[$size].height : sizes.md.height)}; - cursor: pointer; - display: flex; - justify-content: space-between; +export const StyledChip = styled(FancyPill)` + display: inline-flex; align-items: center; - line-height: 2; - width: fit-content; - border-radius: ${({ theme }) => theme.borderRadius.xxxl}; - ${({ $outlined, $themeType = 'primary', $textColor = 'secondary', theme, $layer }) => - generateThemeDesignForComponent({ theme, $themeType, $layer: $layer ?? 3, $outlined, $textColor, $useSimpleTextColor: true })}; - - ${({ $isActive, theme }) => { - if ($isActive) { - return css` - box-shadow: 0 0 0 1px ${theme.colors.accent[0]}; - `; - } - }} - - ${({ $externalStyle }) => $externalStyle} + flex-shrink: 0; + height: ${({ $size }) => sizesSettings[$size].height}; `; diff --git a/src/components/molecules/Chip/Chip.tsx b/src/components/molecules/Chip/Chip.tsx index 71ec91c86..c2c077b10 100644 --- a/src/components/molecules/Chip/Chip.tsx +++ b/src/components/molecules/Chip/Chip.tsx @@ -1,36 +1,38 @@ -import React from 'react'; +import { IFancyPillProps } from '@/components/atoms/FancyPill/FancyPill.model'; +import { FancyContent } from '@/components/molecules/FancyContent'; +import { StyledChip } from '@/components/molecules/Chip/Chip.style'; + +import ChipDeleteButton from './Components/ChipDeleteButton/ChipDeleteButton'; +import ChipImg from '@/components/molecules/Chip/Components/ChipImg/ChipImg'; +import { TComponentSizes } from '@/interface/TComponentSizes'; -import { StyledChip } from './Chip.style'; -import { IChipProps } from './IChip.model'; // --------------------------------------------------------------------------- // // --------------- A Simple chip you can put everthing in it ---------------- // // --------------------------------------------------------------------------- // -type TChipProps = IChipProps & React.HTMLAttributes; -export default function Chip(props: TChipProps) { - const { size, outlined, themeType, textColor, layer, textLayer, isActive, externalStyle, ...htmlProps } = props; +export type TChipProps = IFancyPillProps & { size?: TComponentSizes }; +function Chip(props: TChipProps) { + const { outlined, themeType, size = 'md', layer, isActive, externalStyle, children, ...htmlProps } = props; return ( ) => { - if (props.onClick && (e.key === 'Enter' || e.key === 'Space')) { - e.preventDefault(); - props.onClick(); - } - }} + $size={size} + externalStyle={externalStyle} {...htmlProps} > - {props.children} + {children} ); } + +Chip.DeleteButton = ChipDeleteButton; +Chip.Img = ChipImg; +Chip.Content = FancyContent; + +// Is needed for the storybook to work +export default Chip; diff --git a/src/components/molecules/Chip/Components/ChipDeleteButton/ChipDeleteButton.tsx b/src/components/molecules/Chip/Components/ChipDeleteButton/ChipDeleteButton.tsx new file mode 100644 index 000000000..5c9fd4d24 --- /dev/null +++ b/src/components/molecules/Chip/Components/ChipDeleteButton/ChipDeleteButton.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { styled } from 'styled-components'; + +import { TTheme } from '@/interface/TTheme'; +import { TLayer } from '@/interface/TLayer'; +import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model'; +import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; + +import { RawButton } from '@/components/atoms/RawButton'; +import { SVGXCircle } from '@/components/icons/SVGXCircle'; +import { sizesSettings } from '@/components/molecules/Chip/sizeSettings'; +import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; + +type IXButtonProps = { + size?: keyof typeof sizesSettings; + children?: React.ReactNode; + themeType?: TThemeTypesNotTransparent; + layer?: TLayer; + onDelete?: () => void; +}; + +export default function ChipDeleteButton(props: IXButtonProps & React.ButtonHTMLAttributes) { + const { size, onDelete, children, 'aria-label': ariaLabel, layer, themeType, ...htmlProps } = props; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (onDelete && (e.key === 'Enter' || e.key === ' ')) { + e.preventDefault(); + onDelete(); + } + }; + + return ( + + {children || } + + ); +} + +type TXButton = IStyledPrefixAndOmitter; +export const StyledXButton = styled(RawButton)` + border: none; + cursor: pointer; + color: inherit; + background-color: transparent; + padding: 0; + line-height: 1; + display: flex; + align-items: center; + color: ${({ theme, $themeType = 'secondary', $layer = 3 }) => getBackgroundColor({ theme, $themeType, $layer })}; + + svg { + width: ${({ $size }) => ($size ? sizesSettings[$size].deleteButtonSize : sizesSettings.md.deleteButtonSize)}; + height: ${({ $size }) => ($size ? sizesSettings[$size].deleteButtonSize : sizesSettings.md.deleteButtonSize)}; + } +`; diff --git a/src/components/molecules/Chip/Components/ChipImg/ChipImg.tsx b/src/components/molecules/Chip/Components/ChipImg/ChipImg.tsx new file mode 100644 index 000000000..d0f2b51ad --- /dev/null +++ b/src/components/molecules/Chip/Components/ChipImg/ChipImg.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +import { TTheme } from '@/interface/TTheme'; +import { styled } from 'styled-components'; +import { FancyImage } from '@/components/atoms/FancyImage'; + +type IFancyChipImgProps = React.ComponentProps; +export default function ChipImg(props: IFancyChipImgProps) { + return ( + + + + ); +} + +// Define the styled component for the wrapper image +export const WrapperImage = styled.div<{ theme: TTheme }>` + aspect-ratio: 1/1; + height: 100%; + + img { + height: 100%; /* Ensures the image doesn't exceed the container's width */ + grid-row: 1; + border-radius: 50%; + object-fit: cover; + } +`; diff --git a/src/components/molecules/Chip/IChip.model.ts b/src/components/molecules/Chip/IChip.model.ts deleted file mode 100644 index 324d830da..000000000 --- a/src/components/molecules/Chip/IChip.model.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { CSSProp } from 'styled-components'; - -import { TThemeTypes } from '@/interface/TThemeTypes'; -import { TLayer } from '@/interface/TLayer'; -import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; -import { sizes } from '@/components/molecules/FancyContent/utils/sizeSettings'; - -export interface IChipProps { - size?: keyof typeof sizes; - outlined?: boolean; - themeType?: TThemeTypes; - textColor?: TThemeTypesNotTransparent; - layer?: TLayer; - textLayer?: TLayer; - isActive?: boolean; - onClick?: () => void; - externalStyle?: CSSProp; - children?: React.ReactNode; -} diff --git a/src/components/molecules/Chip/sizeSettings.ts b/src/components/molecules/Chip/sizeSettings.ts new file mode 100644 index 000000000..7c79ad4e3 --- /dev/null +++ b/src/components/molecules/Chip/sizeSettings.ts @@ -0,0 +1,14 @@ +export const sizesSettings = { + sm: { + height: '24px', + deleteButtonSize: '12px', + }, + md: { + height: '32px', + deleteButtonSize: '16px', + }, + lg: { + height: '40px', + deleteButtonSize: '18px', + }, +}; diff --git a/src/components/molecules/ChipList/ChipList.stories.tsx b/src/components/molecules/ChipList/ChipList.stories.tsx index 91f9c818b..11a4eda6d 100644 --- a/src/components/molecules/ChipList/ChipList.stories.tsx +++ b/src/components/molecules/ChipList/ChipList.stories.tsx @@ -3,7 +3,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import ChipList from './ChipList'; -import FancyChip from '../../organisms/FancyChip/FancyChip'; +import { FancyChip } from '@/components/templates/FancyChip'; const meta = { component: ChipList, diff --git a/src/components/molecules/ChipList/ChipList.style.tsx b/src/components/molecules/ChipList/ChipList.style.tsx index bac3df642..0755e2d8c 100644 --- a/src/components/molecules/ChipList/ChipList.style.tsx +++ b/src/components/molecules/ChipList/ChipList.style.tsx @@ -19,6 +19,8 @@ export const ChipContainer = styled.ul` * @param sytemMessage - Optional system message color for the ChipList. * @returns The generated style object for the ChipList. */ + +// eslint-disable-next-line react-refresh/only-export-components export const generateChipListStyle = (size: 'sm' | 'md' | 'lg', sytemMessage?: TUiColorsSystemMessage) => { const styemIndicatorStyle = generateSystemIndicatorStyle(sytemMessage); const getTheme = themeStore.getState().theme; diff --git a/src/components/atoms/ColorDisplay/ColorDisplay.stories.tsx b/src/components/molecules/ColorDisplay/ColorDisplay.stories.tsx similarity index 88% rename from src/components/atoms/ColorDisplay/ColorDisplay.stories.tsx rename to src/components/molecules/ColorDisplay/ColorDisplay.stories.tsx index 3afcf8014..713ac273e 100644 --- a/src/components/atoms/ColorDisplay/ColorDisplay.stories.tsx +++ b/src/components/molecules/ColorDisplay/ColorDisplay.stories.tsx @@ -9,7 +9,8 @@ const meta = { 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', + component: + 'The ColorDisplay component is for displaying a color with a text label and the color and it can be copyd on click', }, }, }, diff --git a/src/components/atoms/ColorDisplay/ColorDisplay.style.tsx b/src/components/molecules/ColorDisplay/ColorDisplay.style.tsx similarity index 87% rename from src/components/atoms/ColorDisplay/ColorDisplay.style.tsx rename to src/components/molecules/ColorDisplay/ColorDisplay.style.tsx index 105d42df1..655de05c5 100644 --- a/src/components/atoms/ColorDisplay/ColorDisplay.style.tsx +++ b/src/components/molecules/ColorDisplay/ColorDisplay.style.tsx @@ -6,7 +6,15 @@ import simpleColorTransition from '../../../design/designFunctions/simpleColorTr import { TTheme } from '@/interface/TTheme'; // calculate color on the isBright and isDarkTheme props -const colorCalculation = ({ theme, $isBright, $isDarkTheme }: { theme: TTheme; $isBright: boolean; $isDarkTheme: boolean }) => { +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]; @@ -33,7 +41,8 @@ export const Content = styled.div<{ $isBright: boolean; theme: TTheme; $isDarkTh &:active, &:hover { - color: ${({ theme, $isBright, $isDarkTheme }) => ($isBright && $isDarkTheme ? theme.colors.primary[4] : theme.colors.secondary[4])}; + color: ${({ theme, $isBright, $isDarkTheme }) => + $isBright && $isDarkTheme ? theme.colors.primary[4] : theme.colors.secondary[4]}; } `; diff --git a/src/components/atoms/ColorDisplay/ColorDisplay.tsx b/src/components/molecules/ColorDisplay/ColorDisplay.tsx similarity index 100% rename from src/components/atoms/ColorDisplay/ColorDisplay.tsx rename to src/components/molecules/ColorDisplay/ColorDisplay.tsx diff --git a/src/components/atoms/ColorDisplay/index.ts b/src/components/molecules/ColorDisplay/index.ts similarity index 100% rename from src/components/atoms/ColorDisplay/index.ts rename to src/components/molecules/ColorDisplay/index.ts diff --git a/src/components/molecules/ComponentAndActionWrapper/ComponentAndActionWrapper.tsx b/src/components/molecules/ComponentAndActionWrapper/ComponentAndActionWrapper.tsx index c64d170ca..f531f65d7 100644 --- a/src/components/molecules/ComponentAndActionWrapper/ComponentAndActionWrapper.tsx +++ b/src/components/molecules/ComponentAndActionWrapper/ComponentAndActionWrapper.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ComponentAsWrapper } from '@/components/atoms/ComponentAsWrapper'; +import { ComponentAsWrapper } from '@/components/shared/ComponentAsWrapper'; import { FancyActionWrapper } from '@/components/atoms/FancyActionWrapper'; type TAnchorProps = { diff --git a/src/components/molecules/DateOutputFromTo/DateOutputFromTo.tsx b/src/components/molecules/DateOutputFromTo/DateOutputFromTo.tsx index 5ab31619d..91f5f6ac3 100644 --- a/src/components/molecules/DateOutputFromTo/DateOutputFromTo.tsx +++ b/src/components/molecules/DateOutputFromTo/DateOutputFromTo.tsx @@ -5,6 +5,7 @@ import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; import { StyledDateOutputFromTo, VRWrapper } from './DateOutputFromTo.style'; +import { themeStore } from '@/design/theme/themeStore'; // Define the props for the DateOutputFromTo component interface IDateOutputFromTo { @@ -18,7 +19,10 @@ interface IDateOutputFromTo { // --------------------------------------------------------------------------- // // ---------- The dateOutput hanles the date display from and to ------------ // // --------------------------------------------------------------------------- // -export default function DateOutputFromTo({ whichIsSelecting, dateFrom, dateTo, handler, themeType, layer }: IDateOutputFromTo) { +export default function DateOutputFromTo(props: IDateOutputFromTo) { + const { dateFrom, dateTo, handler, whichIsSelecting, themeType, layer } = props; + const theme = themeStore((state) => state.theme); + // swap the themeType for opposite components const swapTheme = themeType === 'primary' ? 'secondary' : 'primary'; @@ -37,7 +41,7 @@ export default function DateOutputFromTo({ whichIsSelecting, dateFrom, dateTo, h onClick={() => handleClickOnDateOutput('from')} /> - theme.spacing.sm}´'} /> + ((set) => ({ //The State for the bar wich button is currently active activeEditbarItem: null, setActiveEditbarItem: (index) => - set((state) => ({ activeEditbarItem: state.activeEditbarItem === index ? null : index, activeSecondEditbarItem: null })), + set((state) => ({ + activeEditbarItem: state.activeEditbarItem === index ? null : index, + activeSecondEditbarItem: null, + })), //The State for the secondbar wich button is currently active activeSecondEditbarItem: null, diff --git a/src/components/molecules/FancyColorOutput/utils/ColorTransformator.ts b/src/components/molecules/FancyColorOutput/utils/ColorTransformator.ts index 2aa539d7a..341577207 100644 --- a/src/components/molecules/FancyColorOutput/utils/ColorTransformator.ts +++ b/src/components/molecules/FancyColorOutput/utils/ColorTransformator.ts @@ -19,7 +19,12 @@ const colorTransformator = (color: Color, opacity: number, formatIdx: number): C const rgbaColor = colorObject.rgb().object(); return { type: 'rgba' as const, - color: { r: Math.round(rgbaColor.r), g: Math.round(rgbaColor.g), b: Math.round(rgbaColor.b), a: opacity } as RGBAColor, + color: { + r: Math.round(rgbaColor.r), + g: Math.round(rgbaColor.g), + b: Math.round(rgbaColor.b), + a: opacity, + } as RGBAColor, }; } case 'hsl': { @@ -33,7 +38,12 @@ const colorTransformator = (color: Color, opacity: number, formatIdx: number): C const hslaColor = colorObject.hsl().object(); return { type: 'hsla' as const, - color: { h: Math.round(hslaColor.h), s: Math.round(hslaColor.s), l: Math.round(hslaColor.l), a: opacity } as HSLAColor, + color: { + h: Math.round(hslaColor.h), + s: Math.round(hslaColor.s), + l: Math.round(hslaColor.l), + a: opacity, + } as HSLAColor, }; } case 'hex': diff --git a/src/components/molecules/FancyContent/FancyContent.model.ts b/src/components/molecules/FancyContent/FancyContent.model.ts new file mode 100644 index 000000000..bbf01f31e --- /dev/null +++ b/src/components/molecules/FancyContent/FancyContent.model.ts @@ -0,0 +1,16 @@ +import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; +import { TLayer } from '@/interface/TLayer'; +import { CSSProp } from 'styled-components'; + +export type TFancyContentProps = { + 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'; + gapBetweenText?: string; + gapBetweenIcon?: string; + children?: React.ReactNode; + themeType?: TThemeTypesNotTransparent; + layer?: TLayer; + externalStyle?: CSSProp; + alignIcon?: 'left' | 'right'; +}; diff --git a/src/components/molecules/FancyContent/FancyContent.style.tsx b/src/components/molecules/FancyContent/FancyContent.style.tsx index d9771688f..444d0f77f 100644 --- a/src/components/molecules/FancyContent/FancyContent.style.tsx +++ b/src/components/molecules/FancyContent/FancyContent.style.tsx @@ -1,22 +1,27 @@ -import { styled } from 'styled-components'; +import { css, styled } from 'styled-components'; import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TTheme } from '@/interface/TTheme'; -import { IFancyContentProps } from './FancyContent'; +import { TFancyContentProps } from '@/components/molecules/FancyContent/FancyContent.model'; +import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model'; // Define the types for the Wrapper component -type TWrapper = IStyledPrefixAndPicker< - IFancyContentProps, - 'flexDirection' | 'flexAlign' | 'flexJustify' | 'gapBetweenText' | 'gapBetweenIcon' ->; +type TWrapper = IStyledPrefixAndOmitter; // Define the Wrapper component export const Wrapper = styled.span` - display: flex; + display: inline-flex; flex-direction: ${({ $flexDirection }) => $flexDirection || 'row'}; justify-content: ${({ $flexJustify }) => $flexJustify || 'center'}; align-items: ${({ $flexAlign }) => $flexAlign || 'center'}; - gap: ${({ $gapBetweenIcon, theme }) => $gapBetweenIcon ?? theme.spacing.xs}; + gap: ${({ $gapBetweenIcon, theme }) => $gapBetweenIcon ?? theme.spacing.xxs}; + ${({ theme, $themeType, $layer }) => + $themeType && + css` + color: ${theme.colors[$themeType ?? 'secondary'][$layer ?? 0]}; + `}; + + ${({ $externalStyle }) => $externalStyle} .content { display: flex; @@ -27,11 +32,19 @@ export const Wrapper = styled.span` } `; -type TOnlyTextWrapper = IStyledPrefixAndPicker; +type TOnlyTextWrapper = IStyledPrefixAndPicker< + TFancyContentProps, + 'flexDirection' | 'gapBetweenText' | 'flexAlign' | 'flexJustify' | 'themeType' | 'layer' +>; export const OnlyTextWrapper = styled.span` display: flex; flex-direction: ${({ $flexDirection }) => $flexDirection || 'column'}; justify-content: ${({ $flexJustify }) => $flexJustify || 'center'}; align-items: ${({ $flexAlign }) => $flexAlign || 'flex-start'}; gap: ${({ $gapBetweenText, theme }) => $gapBetweenText ?? theme.spacing.xxs}; + ${({ theme, $themeType, $layer }) => + $themeType && + css` + color: ${theme.colors[$themeType ?? 'secondary'][$layer ?? 0]}; + `}; `; diff --git a/src/components/molecules/FancyContent/FancyContent.tsx b/src/components/molecules/FancyContent/FancyContent.tsx index 635b3b1ed..5da02e46c 100644 --- a/src/components/molecules/FancyContent/FancyContent.tsx +++ b/src/components/molecules/FancyContent/FancyContent.tsx @@ -1,24 +1,29 @@ // Import necessary dependencies -import React, { ReactElement, ReactNode } from 'react'; +import React, { ReactElement } from 'react'; import { FancyContentIcon } from './utils/FancyContentIcon'; import { FancyContentDescription, FancyContentTitle } from './utils/FancyContentText'; import { OnlyTextWrapper, Wrapper } from './FancyContent.style'; +import { TFancyContentProps } from '@/components/molecules/FancyContent/FancyContent.model'; -// Define the props for the FancyContent component -export interface IFancyContentProps { - 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'; - gapBetweenText?: string; - gapBetweenIcon?: string; - children?: ReactNode; -} // --------------------------------------------------------------------------- // // ------- The conent Components handles the Content of The componets -------- // // -------------------like for a button or chip etc. ------------------------ // -function FancyContent(props: IFancyContentProps) { - const { children, flexAlign, flexDirection, flexJustify, gapBetweenText, gapBetweenIcon } = props; +function FancyContent(props: TFancyContentProps & React.HTMLAttributes) { + const { + children, + flexAlign, + flexDirection, + flexJustify, + gapBetweenText, + gapBetweenIcon, + themeType, + layer, + externalStyle, + alignIcon = 'left', + ...htmlProps + } = props; + let iconElement: ReactElement | null = null; const contentGroup: ReactElement[] = []; @@ -39,12 +44,27 @@ function FancyContent(props: IFancyContentProps) { $flexJustify={flexJustify} $gapBetweenText={gapBetweenText} $gapBetweenIcon={gapBetweenIcon} + $themeType={themeType} + $layer={layer} + $externalStyle={externalStyle} + {...htmlProps} > - {iconElement} + {alignIcon === 'left' ? iconElement : ''} {contentGroup.length > 0 && {contentGroup}} + {alignIcon === 'right' ? iconElement : ''} ) : ( - {children} + + {children} + ); } diff --git a/src/components/molecules/FancyContent/utils/sizeSettings.ts b/src/components/molecules/FancyContent/sizeSettings.ts similarity index 93% rename from src/components/molecules/FancyContent/utils/sizeSettings.ts rename to src/components/molecules/FancyContent/sizeSettings.ts index bc4ac8929..4943f28cb 100644 --- a/src/components/molecules/FancyContent/utils/sizeSettings.ts +++ b/src/components/molecules/FancyContent/sizeSettings.ts @@ -17,7 +17,7 @@ export const sizes = { }, lg: { fontSizeDescription: 'button' as TTypography, - fontSizeTitle: 'button' as TTypography, + fontSizeTitle: 'h3' as TTypography, padding: getSpacingFromTheme.md, }, }; diff --git a/src/components/molecules/FancyContent/utils/FancyContentText.tsx b/src/components/molecules/FancyContent/utils/FancyContentText.tsx index b8119e6bc..f294ce4db 100644 --- a/src/components/molecules/FancyContent/utils/FancyContentText.tsx +++ b/src/components/molecules/FancyContent/utils/FancyContentText.tsx @@ -1,6 +1,6 @@ import { Typography } from '@/components/atoms/Typography'; import { TTextProps } from './TFancyTextVariant.model'; -import { sizes } from './sizeSettings'; +import { sizes } from '../sizeSettings'; // --------------------------------------------------------------------------- // // ----------------- The Title for the FancyContent component ---------------- // diff --git a/src/components/molecules/FancyContent/utils/TFancyTextVariant.model.ts b/src/components/molecules/FancyContent/utils/TFancyTextVariant.model.ts index 7471c352d..9395c66da 100644 --- a/src/components/molecules/FancyContent/utils/TFancyTextVariant.model.ts +++ b/src/components/molecules/FancyContent/utils/TFancyTextVariant.model.ts @@ -22,4 +22,5 @@ type IFancyContentTextWithFontVariantProps = IFancyContentTextProps & { * Represents the type definition for the `TTextProps` type. * This type is a combination of `IFancyContentTextProps` and either `IFancyContentTextWithFontVariantProps` or `IFancyContentTextWithSizeProps`. */ -export type TTextProps = IFancyContentTextProps & (IFancyContentTextWithFontVariantProps | IFancyContentTextWithSizeProps); +export type TTextProps = IFancyContentTextProps & + (IFancyContentTextWithFontVariantProps | IFancyContentTextWithSizeProps); diff --git a/src/components/molecules/FancyDropDownUL/FancyDropDownUL.style.tsx b/src/components/molecules/FancyDropDownUL/FancyDropDownUL.style.tsx index c2e639247..4b3865fce 100644 --- a/src/components/molecules/FancyDropDownUL/FancyDropDownUL.style.tsx +++ b/src/components/molecules/FancyDropDownUL/FancyDropDownUL.style.tsx @@ -42,7 +42,8 @@ export const StyledUL = styled.ul<{ theme: TTheme; $themeType?: TThemeTypes; $la margin: 0; width: 100%; padding: ${({ theme }) => theme.spacing.lg}; - background-color: ${({ theme, $themeType = 'primary', $layer = 1 }) => getBackgroundColor({ theme, $themeType, $layer })}; + background-color: ${({ theme, $themeType = 'primary', $layer = 1 }) => + getBackgroundColor({ theme, $themeType, $layer })}; ${boxShadow.lg} gap: ${({ theme }) => theme.spacing.xs}; overflow: hidden; diff --git a/src/components/molecules/FancyDropDownUL/FancyDropDownUL.tsx b/src/components/molecules/FancyDropDownUL/FancyDropDownUL.tsx index 6686cf49c..9df42ad3b 100644 --- a/src/components/molecules/FancyDropDownUL/FancyDropDownUL.tsx +++ b/src/components/molecules/FancyDropDownUL/FancyDropDownUL.tsx @@ -3,7 +3,7 @@ import { animated, useSpring } from '@react-spring/web'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; import { StyledUL, WrapperUL } from './FancyDropDownUL.style'; export interface IFancyUL { diff --git a/src/components/molecules/FancyImageText/FancyImageText.tsx b/src/components/molecules/FancyImageText/FancyImageText.tsx index 8c3bfcb6e..a98d77ae5 100644 --- a/src/components/molecules/FancyImageText/FancyImageText.tsx +++ b/src/components/molecules/FancyImageText/FancyImageText.tsx @@ -14,10 +14,10 @@ interface IImageWithTextProps extends IFancyImage { // ------------The Definition for the FancyImageText Component --------------- // // --------------------------------------------------------------------------- // export default function FancyImageText(props: IImageWithTextProps) { - const { position, ...restProps } = { ...defaultProps, ...props }; + const { position, children, ...restProps } = { ...defaultProps, ...props }; return ( - + ); diff --git a/src/components/molecules/FancyListBox/FancyListBox.style.tsx b/src/components/molecules/FancyListBox/FancyListBox.style.tsx index 685cb1b37..401289a7b 100644 --- a/src/components/molecules/FancyListBox/FancyListBox.style.tsx +++ b/src/components/molecules/FancyListBox/FancyListBox.style.tsx @@ -1,8 +1,10 @@ -import { css } from 'styled-components'; +import { CSSProp, css } from 'styled-components'; import { TTheme } from '@/interface/TTheme'; -export const FancyBoxStyle = css<{ theme: TTheme }>` +export const generateFancyBoxStyle = (externalStyle?: CSSProp) => css<{ theme: TTheme }>` + padding: 0; + margin: 0; display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing.md}; @@ -10,4 +12,5 @@ export const FancyBoxStyle = css<{ theme: TTheme }>` width: 100%; border-radius: ${({ theme }) => theme.borderRadius.xl}; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); + ${externalStyle} `; diff --git a/src/components/molecules/FancyListBox/FancyListBox.tsx b/src/components/molecules/FancyListBox/FancyListBox.tsx index 754a18c2f..2ed364af1 100644 --- a/src/components/molecules/FancyListBox/FancyListBox.tsx +++ b/src/components/molecules/FancyListBox/FancyListBox.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { FancyBox } from '@/components/atoms/FancyBox'; import { FancyListBoxItem } from './FancyListBoxItem'; -import { FancyBoxStyle } from './FancyListBox.style'; +import { generateFancyBoxStyle } from './FancyListBox.style'; type FancyListBoxProps = { children?: React.ReactNode; @@ -11,9 +11,9 @@ type FancyListBoxProps = { // --------------------------------------------------------------------------- // // ---------- The FancyListBox is only a Styled list with items ------------- // // --------------------------------------------------------------------------- // -function FancyListBox({ children, ...htmlProps }: FancyListBoxProps) { +function FancyListBox({ children, externalStyle, ...htmlProps }: FancyListBoxProps) { return ( - + {children} ); diff --git a/src/components/molecules/FancyListBox/FancyListBoxItem.tsx b/src/components/molecules/FancyListBox/FancyListBoxItem.tsx index cad030c9c..9c582cb39 100644 --- a/src/components/molecules/FancyListBox/FancyListBoxItem.tsx +++ b/src/components/molecules/FancyListBox/FancyListBoxItem.tsx @@ -25,13 +25,13 @@ export { FancyListBoxItem }; const StyledLi = styled(RawLI)<{ $externalStyle?: CSSProp; theme: TTheme }>` ${({ $externalStyle }) => ($externalStyle ? $externalStyle : '')} - padding: 0 ${({ theme }) => theme.spacing.lg}; + padding: 0 ${({ theme }) => theme.spacing.md}; &:first-child { - padding-top: ${({ theme }) => theme.spacing.lg}; + padding-top: ${({ theme }) => theme.spacing.md}; } &:last-child { - padding-bottom: ${({ theme }) => theme.spacing.lg}; + padding-bottom: ${({ theme }) => theme.spacing.md}; } `; diff --git a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.stories.tsx b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.stories.tsx index cf1a12a42..5073075aa 100644 --- a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.stories.tsx +++ b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.stories.tsx @@ -9,7 +9,8 @@ const meta = { parameters: { docs: { description: { - component: 'Dumb-Comonent: A MiniProfile component is show a small profile with a picture, name and a short description.', + component: + 'Dumb-Comonent: A MiniProfile component is show a small profile with a picture, name and a short description.', }, }, }, @@ -36,18 +37,25 @@ const meta = { }, options: ['sm', 'md', 'lg'], }, - headingText: { + title: { description: 'The heading text of the component', control: { type: 'text', }, }, - subHeadingText: { + subTitle: { description: 'The sub heading text of the component', control: { type: 'text', }, }, + alignImage: { + description: 'The alignment of the image', + control: { + type: 'select', + }, + options: ['left', 'right'], + }, }, tags: ['autodocs'], } satisfies Meta; @@ -59,10 +67,10 @@ type Story = StoryObj; export const Primary: Story = { render: (args) => , args: { - alignText: 'right', - headingText: 'Hans', - subHeadingText: 'Hans', - imageURL: 'https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg', + alignImage: 'right', + title: 'Hans', + subTitle: 'Hans', + src: 'https://www.az-online.de/bilder/2019/08/23/12938342/2113799823-tobias-rester-2tyMMSkM2R73.jpg', size: 'sm', themeType: 'primary', layer: 0, diff --git a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.style.tsx b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.style.tsx index 610c9098c..2d9e245ec 100644 --- a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.style.tsx +++ b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.style.tsx @@ -1,53 +1,35 @@ -import { styled, css } from 'styled-components'; +import { css, styled } from 'styled-components'; -import { TThemeTypes } from '@/interface/TThemeTypes'; -import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; -import { TSpacings } from '@/interface/TSpacings'; -import { TTextAlignLR } from '@/interface/TTextAlignLR'; -import { getColorsForComponent } from '@/design/designFunctions/colorCalculatorForComponent'; -import { boxShadow } from '@/design/designFunctions/shadows/shadows'; +import { Chip } from '@/components/molecules/Chip'; +import { TChipProps } from '@/components/molecules/Chip/Chip'; +import { sizeSettings } from '@/components/molecules/FancyMiniProfile/sizeSettings'; -// this container wraps the whole component -interface IWrapper { - $size?: TSpacings; - $gapSpacing?: TSpacings; - $themeType?: TThemeTypes; - $layer?: TLayer; - theme: TTheme; - $shadow?: boolean; -} -export const Wrapper = styled.div` - display: inline-flex; - align-items: center; - padding: ${({ $size, theme }) => ($size ? theme.spacing[$size] : '')}; - gap: ${({ $gapSpacing, theme }) => ($gapSpacing ? theme.spacing[$gapSpacing] : ({ theme }) => theme.spacing.xxs)}; - ${({ $themeType = 'primary', $layer = 2, theme }) => getColorsForComponent({ $themeType, $layer, theme })}; - ${({ $shadow }) => $shadow && boxShadow.sm} - border-radius: ${({ theme }) => theme.borderRadius.complete}; -`; +type TStyledChip = TChipProps & { theme: TTheme; $alignedImage?: 'left' | 'right' }; +export const StyledChip = styled(Chip)` + flex-direction: ${({ $alignedImage }) => ($alignedImage === 'right' ? 'row-reverse' : 'row')}; + gap: ${({ theme, size }) => theme.spacing[sizeSettings[size || 'sm'].gap]}; -// this container wraps the texts (Heading, Subheading) -interface ITextWrapper { - $alignText?: TTextAlignLR; - $paddingToedge: TSpacings; - theme: TTheme; -} -export const TextWrapper = styled.div` - // if alignText is left, then the order of the text is reversed - ${({ $alignText, $paddingToedge, theme }) => - $alignText === 'left' + ${({ $alignedImage, size, theme }) => + $alignedImage === 'left' ? css` - order: -1; - text-align: right; - margin-left: ${theme.spacing[$paddingToedge]}; + padding-right: ${theme.spacing[sizeSettings[size || 'sm'].paddingToEdge]}; ` : css` - margin-right: ${theme.spacing[$paddingToedge]}; - `} - gap: 1px; - display: flex; - flex-direction: column; - justify-content: center; + padding-left: ${theme.spacing[sizeSettings[size || 'sm'].paddingToEdge]}; + `}; + + .miniprofile { + &_content { + height: 100%; + align-items: ${({ $alignedImage }) => ($alignedImage === 'right' ? 'flex-end' : 'flex-start')}; + + .content { + span { + line-height: 1.1; + } + } + } + } `; diff --git a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx index 1daaef464..de92cbf83 100644 --- a/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx +++ b/src/components/molecules/FancyMiniProfile/FancyMiniProfile.tsx @@ -1,59 +1,42 @@ -import { FancyProfilePicture } from '@/components/atoms/FancyProfilePicture'; -import { Typography } from '@/components/atoms/Typography'; - -import { TTextAlignLR } from '@/interface/TTextAlignLR'; -import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; +import { TThemeTypes } from '@/interface/TThemeTypes'; -import { pillSettings } from './sizeSettings'; -import { TextWrapper, Wrapper } from './FancyMiniProfile.style'; +import { TComponentSizes } from '@/interface/TComponentSizes'; +import { StyledChip } from './FancyMiniProfile.style'; +import { FancyProfilePicture } from '@/components/atoms/FancyProfilePicture'; +import { sizeSettings } from '@/components/molecules/FancyMiniProfile/sizeSettings'; -interface IFancyMiniprofile { - alignText?: TTextAlignLR; - headingText?: string; - subHeadingText?: string; - imageURL?: string; - size?: keyof typeof pillSettings; +type TFancyMiniprofile = { + title?: string; + subTitle?: string; + src?: string; + size?: TComponentSizes; themeType?: TThemeTypes; layer?: TLayer; shadow?: boolean; -} + alignImage?: 'left' | 'right'; +} & React.HTMLAttributes; // --------------------------------------------------------------------------- // // ------ The MiniProfile rendes a image with a heading and description ------ // // --------------------------------------------------------------------------- // -export default function FancyMiniProfile(props: IFancyMiniprofile) { - const { alignText, size, imageURL, headingText, subHeadingText, themeType, layer, shadow } = { ...defaultProps, ...props }; +export default function FancyMiniProfile(props: TFancyMiniprofile) { + const { size = 'sm', src, title, subTitle, themeType, layer = 3, alignImage = 'right', ...htmlProps } = props; - //get the settings from the picked size - const getSizeProps = pillSettings[size || 'sm']; + // Define a function to calculate the spacing position for the chip return ( - - {/* The Profile Picture */} - - {/* The wraper with the heading and subheading text */} - - {headingText && ( - - {headingText} - + + + + {title && ( + {title} )} - {subHeadingText && ( - - {subHeadingText} - + {subTitle && ( + + {subTitle} + )} - - + + ); } - -const defaultProps: IFancyMiniprofile = { - size: 'sm', -}; diff --git a/src/components/molecules/FancyMiniProfile/sizeSettings.ts b/src/components/molecules/FancyMiniProfile/sizeSettings.ts index a4e2d86a3..8093ab689 100644 --- a/src/components/molecules/FancyMiniProfile/sizeSettings.ts +++ b/src/components/molecules/FancyMiniProfile/sizeSettings.ts @@ -1,39 +1,34 @@ -import { IFancyProfilePicture } from '@/components/atoms/FancyProfilePicture/FancyProfilePicture'; import { TSpacings } from '@/interface/TSpacings'; import { TTypography } from '@/interface/TTypography'; // the interface for the different sizes interface IPillSettings { [key: string]: { - imageSize: IFancyProfilePicture['size']; - padding: TSpacings | undefined; - textSize: TTypography; + titleSize: TTypography; + subtitleSize: TTypography; + gap: TSpacings; paddingToEdge: TSpacings; - gapPictureAndText: TSpacings; }; } // the stettings for the different sizes -export const pillSettings: IPillSettings = { +export const sizeSettings: IPillSettings = { sm: { - imageSize: 'xs', - padding: undefined, - textSize: 'verysmText', - paddingToEdge: 'lg', - gapPictureAndText: 'sm', + paddingToEdge: 'xs', + titleSize: 'smText', + gap: 'xxs', + subtitleSize: 'verysmText', }, md: { - imageSize: 'xs', - padding: 'xs', - textSize: 'smText', - paddingToEdge: 'lg', - gapPictureAndText: 'sm', + paddingToEdge: 'sm', + gap: 'xxs', + titleSize: 'h6', + subtitleSize: 'verysmText', }, lg: { - imageSize: 'sm', - padding: 'xs', - textSize: 'h5', - paddingToEdge: 'xl', - gapPictureAndText: 'sm', + paddingToEdge: 'sm', + gap: 'xs', + titleSize: 'h5', + subtitleSize: 'verysmText', }, }; diff --git a/src/components/molecules/FancyNavBar/FancyNavBar.tsx b/src/components/molecules/FancyNavBar/FancyNavBar.tsx new file mode 100644 index 000000000..9b1d5ad46 --- /dev/null +++ b/src/components/molecules/FancyNavBar/FancyNavBar.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { CSSProp, css } from 'styled-components'; + +import { RawNav } from '@/components/atoms/RawNav'; + +type TFancyNavBar = { + children?: React.ReactNode; + externalStyle?: CSSProp; +} & React.HTMLAttributes; + +export default function FancyNavBar(props: TFancyNavBar) { + const { children, externalStyle } = props; + + return ( + + {children} + + ); +} diff --git a/src/components/molecules/FancyNavBar/index.ts b/src/components/molecules/FancyNavBar/index.ts new file mode 100644 index 000000000..82077b184 --- /dev/null +++ b/src/components/molecules/FancyNavBar/index.ts @@ -0,0 +1 @@ +export { default as FancyNavBar } from './FancyNavBar'; diff --git a/src/components/molecules/FancyPageList/FancyPageList.tsx b/src/components/molecules/FancyPageList/FancyPageList.tsx index e1e9ac6c4..bd2ff44f4 100644 --- a/src/components/molecules/FancyPageList/FancyPageList.tsx +++ b/src/components/molecules/FancyPageList/FancyPageList.tsx @@ -17,7 +17,10 @@ interface IFancyPageList { // ------- This Component renders a Paginator with the specific list --------- // // --------------------------------------------------------------------------- // export default function FancyPageList(props: IFancyPageList) { - const { itemsPerPage, elements, spacingBetweenItems, buttonDesign, outlinedButton, pageLimits } = { ...defaultProps, ...props }; + const { itemsPerPage, elements, spacingBetweenItems, buttonDesign, outlinedButton, pageLimits } = { + ...defaultProps, + ...props, + }; const [currentPage, setCurrentPage] = useState(1); diff --git a/src/components/molecules/FancyProgressBar/FancyProgressBar.tsx b/src/components/molecules/FancyProgressBar/FancyProgressBar.tsx index 04f2e566c..90936a78d 100644 --- a/src/components/molecules/FancyProgressBar/FancyProgressBar.tsx +++ b/src/components/molecules/FancyProgressBar/FancyProgressBar.tsx @@ -2,7 +2,7 @@ import { TLayer } from '@/interface/TLayer'; import { TThemeTypes } from '@/interface/TThemeTypes'; import ProgressBar, { IProgressBar } from '@/components/atoms/ProgressBar/ProgressBar'; -import { AlignedInputLabel } from '@/components/atoms/AlignedInputLabel/AlignedInputLabel'; +import { AlignedInputLabel } from '@/components/atoms/AlignedInputLabel'; import { TAlign } from '@/components/atoms/AlignedInputLabel/TalignedInputLabel.model'; import { Wrapper } from './FancyProgressBar.style'; @@ -21,7 +21,8 @@ interface IFancyProgressBar extends IProgressBar { // ---------- The Progressbar with some Items Like Percent and Label --------- // // --------------------------------------------------------------------------- // export default function FancyProgressBar(props: IFancyProgressBar) { - const { progress, maxValue, id, label, labelAlign, progressAlign, progressCount, themeType, layer, textLayer } = props; + const { progress, maxValue, id, label, labelAlign, progressAlign, progressCount, themeType, layer, textLayer } = + props; return ( diff --git a/src/components/molecules/FancySelectWrapper/FancySelectWrapper.tsx b/src/components/molecules/FancySelectWrapper/FancySelectWrapper.tsx index 402330c87..ddfc2ac66 100644 --- a/src/components/molecules/FancySelectWrapper/FancySelectWrapper.tsx +++ b/src/components/molecules/FancySelectWrapper/FancySelectWrapper.tsx @@ -32,7 +32,10 @@ export default function FancySelectWrapper(props: IFancySelectWrapperProps) { {label && ( - + {label} )} diff --git a/src/components/molecules/FancySpeedDailButton/FancySpeedDailButton.tsx b/src/components/molecules/FancySpeedDailButton/FancySpeedDailButton.tsx index 89a9f2288..0fd7f112f 100644 --- a/src/components/molecules/FancySpeedDailButton/FancySpeedDailButton.tsx +++ b/src/components/molecules/FancySpeedDailButton/FancySpeedDailButton.tsx @@ -2,7 +2,10 @@ import { useState } from 'react'; import { SVGPlus } from '@/components/icons/SVGPlus'; -import SpeedDailMenueItem, { TMenueButtonProps, TMenueItemProps } from '@/components/atoms/SpeedDialMenueItem/SpeedDailMenueItem'; +import SpeedDailMenueItem, { + TMenueButtonProps, + TMenueItemProps, +} from '@/components/atoms/SpeedDialMenueItem/SpeedDailMenueItem'; import { Button, MenueItemWrapper, Ring, SpeedDialContainer, Wrapper } from './SpeedDailButton.style'; export type ISpeedail = { diff --git a/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx b/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx index d7ed9011d..a57527c25 100644 --- a/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx +++ b/src/components/molecules/FancySpeedDailButton/SpeedDailButton.style.tsx @@ -3,7 +3,6 @@ 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` @@ -44,7 +43,8 @@ export const Button = styled.button<{ $isOpen: boolean; theme?: TTheme }>` height: 60%; font-size: 24px; transform-origin: 50% 50%; - transform: ${({ $isOpen }) => ($isOpen ? 'translate(-50%, -50%) rotate(45deg)' : 'translate(-50%, -50%) rotate(0)')}; + transform: ${({ $isOpen }) => + $isOpen ? 'translate(-50%, -50%) rotate(45deg)' : 'translate(-50%, -50%) rotate(0)'}; transition: transform 0.3s ease; } `; @@ -83,7 +83,8 @@ export const MenueItemContainer = styled.div<{ $isOpen: boolean; $index: number 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%)`)}; + 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; diff --git a/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx b/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx index 27e7d2a3a..65176431f 100644 --- a/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx +++ b/src/components/molecules/FancyTabSwitch/FancyTabSwitch.style.tsx @@ -5,7 +5,7 @@ import { TThemeTypes } from '@/interface/TThemeTypes'; import { tabSwitchSizes } from '@/components/molecules/TabSwitch/TabSwitch.style'; import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; import { TSpacings } from '@/interface/TSpacings'; // Define the interface for the styled-component diff --git a/src/components/molecules/FancyTabSwitch/FancyTabSwitch.tsx b/src/components/molecules/FancyTabSwitch/FancyTabSwitch.tsx index 0eebc9551..41c7a1529 100644 --- a/src/components/molecules/FancyTabSwitch/FancyTabSwitch.tsx +++ b/src/components/molecules/FancyTabSwitch/FancyTabSwitch.tsx @@ -12,26 +12,20 @@ import { ITabSwitchProps } from '@/components/molecules/TabSwitch/TabSwitch.mode // ----- The FancyTabswich has more advanced features like Label etc. ------- // // --------------------------------------------------------------------------- // 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'; + const { values, label, layer = 3, themeType, size, disabled, outlined, rounded, wide, ...tabSwitchProps } = props; /* Generate the unordered list for the tab switch */ return (
@@ -42,6 +36,7 @@ export default function FancyTabSwitch(props: ITabSwitchProps & { label?: string rounded={rounded} themeType={themeType} wide={wide} + size={size} {...tabSwitchProps} /> diff --git a/src/components/molecules/FancyTabSwitch/utils/generateColorDesign.ts b/src/components/molecules/FancyTabSwitch/utils/generateColorDesign.ts index fedd745ad..e4c1f3ed6 100644 --- a/src/components/molecules/FancyTabSwitch/utils/generateColorDesign.ts +++ b/src/components/molecules/FancyTabSwitch/utils/generateColorDesign.ts @@ -10,7 +10,8 @@ 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'; + const calcPadding = + Math.max(0, getPaddings - 1.5) + 'px ' + (getPaddings + parseInt(borderRadius[$rounded ?? 'sm'])) + 'px'; return css` overflow: hidden; @@ -46,7 +47,9 @@ const generateOutlineStyle = (props: TGenerateOutlineStyle) => { 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 + padding: ${$padding + ? parseInt(tabSwitchSizes[$padding].paddingComponent) - 1.5 + 'px' + : '0'}; // 1.5px is the border width `; }; @@ -63,7 +66,15 @@ export default function generateColorDesign(props: TGenerateColorDesign) { // 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 }); + outlinedStyle = generateOutlineStyle({ + $outlined, + $padding, + $themeType, + theme, + $rounded, + $layer, + $outlinedBackgroundStrength, + }); } else { backgroundColor = getBackgroundColor({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 3 }); } diff --git a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts index a63f7add8..79a396547 100644 --- a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts +++ b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.model.ts @@ -1,5 +1,6 @@ import { TThemeTypes } from '@/interface/TThemeTypes'; import { tabSwitchItemSizes } from './sizeSettings'; +import { CSSProp } from 'styled-components'; export interface ITabSwitchDetailsLabelIcon { itemKey: string; @@ -16,10 +17,10 @@ export interface ITabSwitchButton { disabled?: boolean; selected: boolean; onClick: (key: string) => void; - wide?: boolean; themeType?: TThemeTypes; iconAlign?: 'left' | 'right'; size?: keyof typeof tabSwitchItemSizes; + externalStyle?: CSSProp; } export type ITabSwitchButtonProps = ITabSwitchButton & ITabSwitchDetailsChildren & ITabSwitchDetailsLabelIcon; diff --git a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx index 132e5b0d7..55ebe7de9 100644 --- a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx +++ b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.stories.tsx @@ -7,7 +7,9 @@ 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) => ; +const HelperComponent = (props: React.ComponentProps) => ( + +); HelperComponent.displayName = 'FancyTabSwitchButton'; // Define metadata for the story diff --git a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx index de52f36cf..6ffd080f3 100644 --- a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx +++ b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx @@ -1,48 +1,27 @@ -import { css, styled } from 'styled-components'; +import { CSSProp, css, styled } from 'styled-components'; import { getBackgroundColor } from '@/design/designFunctions/colorCalculatorForComponent'; import { themeStore } from '@/design/theme/themeStore'; import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; -import { TThemeTypes } from '@/interface/TThemeTypes'; import { tabSwitchItemSizes } from './sizeSettings'; +import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; // ------------------------------------------------------------------ // // ----------- the helperfunctions for the style generate ----------- // // ------------------------------------------------------------------ // //generates the style from the dynamic values of the tab interface IListButtonStyle { - $wide?: boolean; - $textColor?: TThemeTypes; + $textColor?: TThemeTypesNotTransparent; $iconAlign?: 'left' | 'right'; theme: TTheme; - $themeType?: TThemeTypes; $layer?: TLayer; $size?: keyof typeof tabSwitchItemSizes; $hasLabel?: boolean; $hasIcon?: boolean; + $externalStyle?: CSSProp; } -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; @@ -75,42 +54,32 @@ const generateIconAlignment = (props: Pick) => { // ------------------------------------------------------------------ // // ------------ the main style generator for the li item ------------ // // ------------------------------------------------------------------ // -const generateButtonStyle = (props: IListButtonStyle) => { - const { $wide, $textColor, theme, $layer, $themeType, $iconAlign, $size, $hasIcon, $hasLabel } = props; - const getSpacingFromTheme = themeStore.getState().theme.spacing; +export const SwitchButtonStyle = styled.div` + list-style: none; + height: 100%; + width: 100%; + display: flex; + justify-content: center; - return css` - list-style: none; - height: 100%; + 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: ${({ $size, theme }) => `${tabSwitchItemSizes[$size || 'sm'].padding} ${theme.spacing.md}`}; + color: ${({ theme, $textColor = 'secondary', $layer }) => + getBackgroundColor({ theme, $themeType: $textColor, $layer })}; + ${({ $hasIcon, $hasLabel, $iconAlign }) => $hasIcon && $hasLabel && generateIconAlignment({ $iconAlign })} + will-change: transform; // ís needed for safari to prevent icons jumping tested on the iphone 18.12.23 newest versions + } - 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} + input { + display: none; + } + ${({ $externalStyle }) => $externalStyle}; `; diff --git a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx index b763f5beb..63c578373 100644 --- a/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx +++ b/src/components/molecules/FancyTabSwitchButton/FancyTabSwitchButton.tsx @@ -11,7 +11,8 @@ import { leftRightToFlex } from '@/utils/functions/leftRightToFlex'; // ------------------------------------------------------------------ // 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 { disabled, selected, onClick, iconAlign, size, itemKey, label, icon, children, externalStyle, ...HTMLProps } = + props; const id = useId(); @@ -20,11 +21,10 @@ const FancyTabSwitchButton = React.forwardRef ` `; export const StyledLegend = styled.legend<{ alignLabel?: TTextAlignLC; theme: TTheme }>` - margin: 0 ${({ alignLabel }) => (alignLabel === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xs}; + margin: 0 ${({ alignLabel }) => (alignLabel === 'center' ? 'auto' : '0')} ${({ theme }) => theme.spacing.xxs}; `; diff --git a/src/components/molecules/Fieldset/Fieldset.tsx b/src/components/molecules/Fieldset/Fieldset.tsx index 39903b31b..d0014a3cb 100644 --- a/src/components/molecules/Fieldset/Fieldset.tsx +++ b/src/components/molecules/Fieldset/Fieldset.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { HTMLAttributes, ReactNode } from 'react'; import { TTextAlignLC } from '@/interface/TTextAlignLC'; import { TTypography } from '@/interface/TTypography'; @@ -6,17 +6,17 @@ import { TTypography } from '@/interface/TTypography'; import { StyledFieldset, StyledLegend } from './Fieldset.style'; import { Typography } from '@/components/atoms/Typography'; -interface IFieldset { - children?: React.ReactNode; +type TFieldset = { + children?: ReactNode; label?: string; alignLabel?: TTextAlignLC; fontVariantLegend?: TTypography; disabled?: boolean; -} +} & HTMLAttributes; // --------------------------------------------------------------------------- // // ---- A Fieldset that Provides a Label and a Fieldset for some childs ------ // // --------------------------------------------------------------------------- // -export default function Fieldset(props: IFieldset) { +export default function Fieldset(props: TFieldset) { const { children, label, alignLabel, fontVariantLegend, disabled } = props; return ( diff --git a/src/components/molecules/Header/Header.stories.tsx b/src/components/molecules/Header/Header.stories.tsx index e0c470f1a..ebe36c3c8 100644 --- a/src/components/molecules/Header/Header.stories.tsx +++ b/src/components/molecules/Header/Header.stories.tsx @@ -47,7 +47,7 @@ export const Primary: Story = {
diff --git a/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx b/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx index b6197ffd4..7bd2cadee 100644 --- a/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx +++ b/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.stories.tsx @@ -10,7 +10,8 @@ const meta = { parameters: { docs: { description: { - component: 'Dumb-Comonent: A simple HeaderTitleWithLogo component that can be used to provied a title and a Logo.', + component: + 'Dumb-Comonent: A simple HeaderTitleWithLogo component that can be used to provied a title and a Logo.', }, }, }, diff --git a/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx b/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx index 1c1ea91ae..f89bef814 100644 --- a/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx +++ b/src/components/molecules/HeaderTitleWithLogo/HeaderTitleWithLogo.tsx @@ -10,7 +10,7 @@ import { LogoWrapper, StyledHeading, Wrapper } from './HeaderTitleWithLogo.style interface IHeaderTitleWithLogo { title?: ReactNode | string; logo?: ReactNode; - linkTo?: string; + href?: string; themeType?: TThemeTypes; layer?: TLayer; } @@ -18,11 +18,11 @@ interface IHeaderTitleWithLogo { // -------- A Header Template for the Logo and the Title of a header --------- // // --------------------------------------------------------------------------- // export default function HeaderTitleWithLogo(props: IHeaderTitleWithLogo) { - const { title, logo, linkTo, themeType, layer } = { ...defaultProps, ...props }; + const { title, logo, href, themeType, layer } = props; return ( - + {logo && {logo}} {title && ( @@ -33,8 +33,3 @@ export default function HeaderTitleWithLogo(props: IHeaderTitleWithLogo) { ); } - -const defaultProps: IHeaderTitleWithLogo = { - title: '', - linkTo: '/', -}; diff --git a/src/components/molecules/InfoCard/InfoCard.tsx b/src/components/molecules/InfoCard/InfoCard.tsx index 2aff84f2c..9aa4fd2f5 100644 --- a/src/components/molecules/InfoCard/InfoCard.tsx +++ b/src/components/molecules/InfoCard/InfoCard.tsx @@ -1,10 +1,11 @@ import { ComponentProps } from 'react'; +import { TComponentSizes } from '@/interface/TComponentSizes'; import { FancyBox } from '@/components/atoms/FancyBox'; import { generateInfoCardStyle } from './InfoCrad.style'; type TInfoCardProps = ComponentProps & { - size?: 'sm' | 'md' | 'lg'; + size?: TComponentSizes; }; // --------------------------------------------------------------------------- // // ---------- A simple Infocard that can displayed on the page --------------- // diff --git a/src/components/molecules/InfoCard/InfoCrad.style.tsx b/src/components/molecules/InfoCard/InfoCrad.style.tsx index 975611088..3edaf078b 100644 --- a/src/components/molecules/InfoCard/InfoCrad.style.tsx +++ b/src/components/molecules/InfoCard/InfoCrad.style.tsx @@ -1,6 +1,6 @@ import { css } from 'styled-components'; -import { TSizes } from '@/interface/TComponentSizes'; +import { TComponentSizes } from '@/interface/TComponentSizes'; import themeStore from '@/design/theme/themeStore/themeStore'; const getTheme = themeStore.getState().theme; @@ -19,7 +19,7 @@ const sizes = { }, }; -export const generateInfoCardStyle = (size: TSizes) => { +export const generateInfoCardStyle = (size: TComponentSizes) => { return css` width: 100%; border-radius: ${sizes[size].borderRadius}; diff --git a/src/components/molecules/InputWrapper/InputWrapper.stories.tsx b/src/components/molecules/InputWrapper/InputWrapper.stories.tsx index 8e2fe23b6..b91cac717 100644 --- a/src/components/molecules/InputWrapper/InputWrapper.stories.tsx +++ b/src/components/molecules/InputWrapper/InputWrapper.stories.tsx @@ -10,7 +10,8 @@ const meta = { parameters: { docs: { description: { - component: 'Dumb-Comonent: The InputWrapper component that can be used to wrap a input component via the InputElement.
', + component: + 'Dumb-Comonent: The InputWrapper component that can be used to wrap a input component via the InputElement.
', }, }, }, diff --git a/src/components/molecules/InputWrapper/InputWrapper.style.tsx b/src/components/molecules/InputWrapper/InputWrapper.style.tsx index b1db959dc..c5878f070 100644 --- a/src/components/molecules/InputWrapper/InputWrapper.style.tsx +++ b/src/components/molecules/InputWrapper/InputWrapper.style.tsx @@ -30,7 +30,12 @@ export const ErrorMessage = styled.p<{ theme: TTheme }>` `; //the input/label/underline are all wrapped in thid container -export const InputContainer = styled.div<{ $givePadding: boolean; theme: TTheme; $themeType: TThemeTypes; $layer: TLayer }>` +export const InputContainer = styled.div<{ + $givePadding: boolean; + theme: TTheme; + $themeType: TThemeTypes; + $layer: TLayer; +}>` width: 100%; grid-column: 2/3; ${({ $givePadding, theme }) => @@ -38,10 +43,11 @@ export const InputContainer = styled.div<{ $givePadding: boolean; theme: TTheme; css` padding-top: ${parseFloat(theme.spacing.lg) + 2 + 'px'}; `}; + position: relative; input { - padding: 0px 0px ${({ theme }) => parseFloat(theme.spacing.xs) + 2 + 'px'}; + padding: 0px 0px ${({ theme }) => parseFloat(theme.spacing.xs) + 'px'}; } svg { @@ -50,6 +56,8 @@ export const InputContainer = styled.div<{ $givePadding: boolean; theme: TTheme; `; // Define the styles for the icon + +// eslint-disable-next-line react-refresh/only-export-components export const iconStyle = css<{ theme: TTheme }>` margin-right: ${({ theme }) => parseFloat(theme.spacing.xs) + 2 + 'px'}; margin-bottom: 2px; diff --git a/src/components/molecules/InputWrapper/InputWrapper.tsx b/src/components/molecules/InputWrapper/InputWrapper.tsx index 898119ab5..61e846921 100644 --- a/src/components/molecules/InputWrapper/InputWrapper.tsx +++ b/src/components/molecules/InputWrapper/InputWrapper.tsx @@ -12,23 +12,22 @@ import { ErrorMessage, InputContainer, StyledInputWrapper, iconStyle } from './I // --------------------------------------------------------------------------- // // ------ 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; +export default function InputWrapper({ + id, + value, + isActive, + disabled, + InputElement, + errorMessage, + icon, + label, + align, + underline = true, + autoWidth, + placeholder, + layer = 4, + themeType = 'secondary', +}: IInputWrapper) { const [isInitial, setIsInitial] = useState(false); // Calculate the color state for the label and underline @@ -44,7 +43,14 @@ export default function InputWrapper(props: IInputWrapper) { return ( {icon && ( - + {icon} )} diff --git a/src/components/molecules/MenuList/MenuList.style.tsx b/src/components/molecules/MenuList/MenuList.style.tsx index c1ed61254..8ffacae65 100644 --- a/src/components/molecules/MenuList/MenuList.style.tsx +++ b/src/components/molecules/MenuList/MenuList.style.tsx @@ -13,7 +13,13 @@ export const MenuContainer = styled.div` flex-direction: column; padding: 8px 0; ${({ theme, $themeType, $layer, $outlined }) => - generateThemeForCard({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 2, $outlined, $outlinedBackgroundStrength: 1 })} + 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/Modal/Modal.tsx b/src/components/molecules/Modal/Modal.tsx index ac7cb253a..4d9a31d3d 100644 --- a/src/components/molecules/Modal/Modal.tsx +++ b/src/components/molecules/Modal/Modal.tsx @@ -1,24 +1,18 @@ -import React, { ReactNode, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; -import { SimpleDialog } from '@/components/atoms/SimpleDialog'; +import { SimpleDialog, TSimpleDialog } from '@/components/atoms/SimpleDialog'; import { BackDrop } from '@/components/atoms/BackDrop'; -import { TThemeTypes } from '@/interface/TThemeTypes'; -import { TLayer } from '@/interface/TLayer'; -export interface IModal { +export type TModal = { id?: string; - children?: ReactNode; - isOpen: boolean; onClose?: (id: string) => void; isCloseable?: boolean; backDrop?: boolean; - themeType?: TThemeTypes; - layer?: TLayer; -} -// --------------------------------------------------------------------------- // +} & TSimpleDialog; +// ----------------------------- ---------------------------------------------- // // ------ The main Modal Component to comstomize the Head/Bottomline ------- // // --------------------------------------------------------------------------- // -export default function Modal(props: IModal) { +export default function Modal(props: TModal) { const { id, children, isOpen, onClose, isCloseable, themeType, layer, backDrop = true } = props; const [modalVisible, setModalVisible] = useState(false); diff --git a/src/components/molecules/MonthWithDays/MonthWithDays.tsx b/src/components/molecules/MonthWithDays/MonthWithDays.tsx index e5199dbbe..073feaa29 100644 --- a/src/components/molecules/MonthWithDays/MonthWithDays.tsx +++ b/src/components/molecules/MonthWithDays/MonthWithDays.tsx @@ -28,8 +28,17 @@ interface IMonthWithDays { // --------- 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 { + monthIdx, + year, + handleDateClick, + selectedDates, + isRangePicking, + disabledDateSetting, + externalMonthWithDays, + layer, + themeType, + } = props; const [monthDays, setMonthDays] = useState([]); // Create the days of the month and memoize them @@ -78,7 +87,11 @@ export default function MonthWithDays(props: IMonthWithDays) { layer={layer} disabled={day.disabled} dateNumber={day.number} - isCurrentDay={day.number === new Date().getDate() && monthIdx === new Date().getMonth() && year === new Date().getFullYear()} + isCurrentDay={ + day.number === new Date().getDate() && + monthIdx === new Date().getMonth() && + year === new Date().getFullYear() + } isSelected={day.isSelected} range={day.range} isAvailable={day.isAvilable || 'completly'} diff --git a/src/components/molecules/MonthWithDays/utils/disableDate.ts b/src/components/molecules/MonthWithDays/utils/disableDate.ts index a8beaf833..c4af80694 100644 --- a/src/components/molecules/MonthWithDays/utils/disableDate.ts +++ b/src/components/molecules/MonthWithDays/utils/disableDate.ts @@ -11,7 +11,9 @@ export const disableDate = (date: Date, disabledDateSetting?: IDisabledDateSetti const isPast = date.getTime() < Date.now(); const isDisabledDay = disabledWeekdays?.includes(dateDay); const disableSpecificDates = - (disablePastDates ? isPast : false) || (disableWeekends ? isWeekend : false) || (disabledWeekdays ? !!isDisabledDay : false); + (disablePastDates ? isPast : false) || + (disableWeekends ? isWeekend : false) || + (disabledWeekdays ? !!isDisabledDay : false); return disableSpecificDates; }; diff --git a/src/components/molecules/NumberInput/NumberInput.tsx b/src/components/molecules/NumberInput/NumberInput.tsx index cfc2cfe69..e8664501b 100644 --- a/src/components/molecules/NumberInput/NumberInput.tsx +++ b/src/components/molecules/NumberInput/NumberInput.tsx @@ -1,6 +1,7 @@ -import React, { InputHTMLAttributes, useState, useEffect, KeyboardEvent, ChangeEvent } from 'react'; -import StyledNumberInput from './NumberInput.styled'; +import { useNumberInput } from '@/components/molecules/NumberInput/useNumberInput.hook'; import { TTextAlignLC } from '@/interface/TTextAlignLC'; +import { InputHTMLAttributes, useMemo } from 'react'; +import StyledNumberInput from './NumberInput.styled'; export interface INumberInput extends InputHTMLAttributes { autoWidth?: boolean; @@ -9,68 +10,19 @@ export interface INumberInput extends InputHTMLAttributes { step?: number; activeHandler?: (value: boolean) => void; } - +// --------------------------------------------------------------------------- // +// Advanced Text imput that acts like a number input to have more versatelity // +// --------------------------------------------------------------------------- // 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); - } - }; + //dont remove the value else its provided in the element and you can have letters in the input + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { value, activeHandler, align, id, autoWidth, ...moreHTMLProps } = props; + const { inputValue, handleChange, handleKeyDown } = useNumberInput(props); + + const inputWidth = useMemo( + () => (autoWidth ? (inputValue ? `${inputValue.length + 1}ch` : '2ch') : '100%'), + [inputValue, autoWidth] + ); return ( activeHandler && activeHandler(true)} onBlur={() => activeHandler && activeHandler(false)} - $width={autoWidth ? (inputValue ? inputValue.length + 1 + 'ch' : '2ch') : '100%'} + $width={inputWidth} $align={align} {...moreHTMLProps} /> diff --git a/src/components/molecules/NumberInput/useNumberInput.hook.tsx b/src/components/molecules/NumberInput/useNumberInput.hook.tsx new file mode 100644 index 000000000..3dcd75a66 --- /dev/null +++ b/src/components/molecules/NumberInput/useNumberInput.hook.tsx @@ -0,0 +1,74 @@ +// useNumberInput.ts +import { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react'; +import { INumberInput } from './NumberInput'; + +interface UseNumberInputReturn { + inputValue: string | null; + handleChange: (e: ChangeEvent) => void; + handleKeyDown: (e: KeyboardEvent) => void; +} + +export const useNumberInput = (props: INumberInput): UseNumberInputReturn => { + const { value, onChange, min, max, step = 1 } = 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 { inputValue, handleChange, handleKeyDown }; +}; diff --git a/src/components/molecules/Paginator/Paginator.tsx b/src/components/molecules/Paginator/Paginator.tsx index c2237b7d5..07810f2ec 100644 --- a/src/components/molecules/Paginator/Paginator.tsx +++ b/src/components/molecules/Paginator/Paginator.tsx @@ -22,7 +22,10 @@ interface IPaginator { // ---------------- The Paginator for a List to siwtch pages ----------------- // // --------------------------------------------------------------------------- // export default function Paginator(props: IPaginator) { - const { currentPage, totalPages, onPageChange, outlinedButton, themeType, pageLimits } = { ...defaultProps, ...props }; + const { currentPage, totalPages, onPageChange, outlinedButton, themeType, pageLimits } = { + ...defaultProps, + ...props, + }; // Define a function to handle page changes const pageHandler = (page: number) => { diff --git a/src/components/molecules/RangeCalendar/RangeCalendar.stories.tsx b/src/components/molecules/RangeCalendar/RangeCalendar.stories.tsx index 142ead3c8..a8daa1ab3 100644 --- a/src/components/molecules/RangeCalendar/RangeCalendar.stories.tsx +++ b/src/components/molecules/RangeCalendar/RangeCalendar.stories.tsx @@ -28,7 +28,8 @@ const meta = { 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.', + description: + 'If the Calendar a Rangepicker that you can select set wich date is currently selected the from - to.', control: { type: 'radio', }, diff --git a/src/components/molecules/RangeCalendar/RangeCalendar.tsx b/src/components/molecules/RangeCalendar/RangeCalendar.tsx index 385be4850..745431e50 100644 --- a/src/components/molecules/RangeCalendar/RangeCalendar.tsx +++ b/src/components/molecules/RangeCalendar/RangeCalendar.tsx @@ -43,7 +43,13 @@ export default function RangeCalendar(props: ICalendar) { 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); + const { selectedDates, handleDateClick } = useSelectedDates( + selectedYear, + selectFromTo, + handleSwitchFromTo, + handler, + rangeCalendar + ); // Scroll to current month on mount and set isScrolled to true useEffect(() => { diff --git a/src/components/molecules/RangeCalendar/helperFunctions/useSelectedDates.ts b/src/components/molecules/RangeCalendar/helperFunctions/useSelectedDates.ts index c0d57afad..6f12b58ff 100644 --- a/src/components/molecules/RangeCalendar/helperFunctions/useSelectedDates.ts +++ b/src/components/molecules/RangeCalendar/helperFunctions/useSelectedDates.ts @@ -18,7 +18,13 @@ export default function useSelectedDates( // 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 }); + const selectedDays = selectDayFunction({ + day, + monthIndex, + selectedDates: pickedDays, + selectedYear, + selectFromTo, + }); if (selectFromTo === 'from') handleSwitchFromTo && handleSwitchFromTo('to'); if (selectFromTo === 'to') handleSwitchFromTo && handleSwitchFromTo('from'); setSelectedDates(selectedDays); diff --git a/src/components/molecules/SearchBar/SearchBar.tsx b/src/components/molecules/SearchBar/SearchBar.tsx index 1e00ad035..3abb7f3b6 100644 --- a/src/components/molecules/SearchBar/SearchBar.tsx +++ b/src/components/molecules/SearchBar/SearchBar.tsx @@ -24,7 +24,7 @@ interface ISearchBar { // ---------- Seachbar like for a header to search something ---------------- // // --------------------------------------------------------------------------- // export default function SearchBar(props: ISearchBar) { - const { activeHandler, handler, searchValue, align, themeType, layer } = { ...defaultProps, ...props }; + const { activeHandler, handler, searchValue, align = 'center', themeType, layer } = 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) => { @@ -54,7 +54,7 @@ export default function SearchBar(props: ISearchBar) { ` input { ${({ $status, theme }) => - $status?.isError ? `border-color: ${theme.colors.error[0]}` : $status?.isSucceed ? `border-color: ${theme.colors.success[0]};` : ''}; + $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/SingleToastMessage/SingleToastMessage.style.tsx b/src/components/molecules/SingleToastMessage/SingleToastMessage.style.tsx index 1e60eb4ad..b90faf6b2 100644 --- a/src/components/molecules/SingleToastMessage/SingleToastMessage.style.tsx +++ b/src/components/molecules/SingleToastMessage/SingleToastMessage.style.tsx @@ -32,9 +32,10 @@ export const Container = styled.div` color: ${({ $messageType, theme, $layer = 5 }) => getBackgroundColor({ $themeType: $messageType, theme, $layer })}; //theme[$messageType]['5'] border-radius: ${({ theme }) => theme.borderRadius.sm}; - padding: ${({ theme }) => theme.spacing.lg}; + padding: ${({ theme }) => theme.spacing.md}; background-color: ${({ theme }) => colorTransparencyCalculator(theme.colors.primary['0'], 0.95)}; - border-left: 4px solid ${({ $messageType, theme, $layer = 3 }) => getBackgroundColor({ $themeType: $messageType, theme, $layer })}; + border-left: 4px solid + ${({ $messageType, theme, $layer = 3 }) => getBackgroundColor({ $themeType: $messageType, theme, $layer })}; box-sizing: border-box; ${boxShadow.md} `; @@ -59,12 +60,14 @@ const timerAnimation = keyframes` 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 })}; + 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/SwipeUpModal/SwipeUpModal.tsx b/src/components/molecules/SwipeUpModal/SwipeUpModal.tsx index 84b3f733e..911a11e85 100644 --- a/src/components/molecules/SwipeUpModal/SwipeUpModal.tsx +++ b/src/components/molecules/SwipeUpModal/SwipeUpModal.tsx @@ -15,7 +15,10 @@ 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 { children, isOpen, isCloseAble, isScalable, onClose, themeType, layer, backdrop } = { + ...defaultProps, + ...props, + }; const [statusModal, setStatusModal] = useState('closed'); const [modalPosition, setModalPosition] = useState({ height: '100%' }); @@ -130,4 +133,5 @@ const defaultProps: ISwipeUpModal = { isCloseAble: true, isScalable: true, isOpen: true, + backdrop: true, }; diff --git a/src/components/molecules/SwitchList/SwitchList.model.ts b/src/components/molecules/SwitchList/SwitchList.model.ts new file mode 100644 index 000000000..48a9f31d9 --- /dev/null +++ b/src/components/molecules/SwitchList/SwitchList.model.ts @@ -0,0 +1,28 @@ +import React from 'react'; +import { CSSProp } from 'styled-components'; + +import { IgenerateListItemStyle } from './SwitchList.style'; +import { IActiveSwitchIndicator } from '@/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator'; +import { TFancyFlexBoxProps } from '@/components/templates/FancyFlexBox/FancyFlexBox.model'; +import { TSpacings } from '@/interface/TSpacings'; + +// the props for the SwitchActiveIndicator component +type TSwitchActiveIndicator = Omit; + +// the props for the SwitchList component +interface IBottomBarListProps { + children?: React.ReactNode; + whichIndexIsSelected?: number; + activeItemHandler?: (activeKey: number) => void; + externalStyle?: CSSProp; + gap?: TSpacings; +} + +type TFlexBoxOmitGap = Omit; + +// the props for the SwitchList component with the props for the SwitchActiveIndicator component and the FancyFlexBox component +export type TSwitchList = IBottomBarListProps & + Omit & { + switchIndicator?: TSwitchActiveIndicator; + flexBoxProps?: TFlexBoxOmitGap; + }; diff --git a/src/components/molecules/SwitchList/SwitchList.stories.tsx b/src/components/molecules/SwitchList/SwitchList.stories.tsx index 6e6a05ff0..5aa073a1a 100644 --- a/src/components/molecules/SwitchList/SwitchList.stories.tsx +++ b/src/components/molecules/SwitchList/SwitchList.stories.tsx @@ -28,19 +28,16 @@ const meta = { 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' }, }, + switchIndicator: { + description: 'The switch indicator of the SwitchList. The Props of the SwitchActiveIndicator.', + }, + flexBoxProps: { + description: 'The flex box props of the SwitchList. The Props of the FancyFlexBox.', + }, }, tags: ['autodocs'], @@ -59,6 +56,14 @@ export const Primary: Story = { ), args: { + flexBoxProps: { + flexJustify: 'space-between', + flexAlign: 'center', + }, + switchIndicator: { + direction: 'horizontal', + }, + children: <>, }, }; diff --git a/src/components/molecules/SwitchList/SwitchList.style.tsx b/src/components/molecules/SwitchList/SwitchList.style.tsx index f0407d27d..34f96e2b5 100644 --- a/src/components/molecules/SwitchList/SwitchList.style.tsx +++ b/src/components/molecules/SwitchList/SwitchList.style.tsx @@ -1,16 +1,46 @@ -import { styled, CSSProp } from 'styled-components'; +import { css } from 'styled-components'; -import { RawUL } from '@/components/atoms/RawUL'; +import { simpleColorTransition } from '@/design/designFunctions/simpleColorTransition'; +import { themeStore } from '@/design/theme/themeStore'; +import { TTheme } from '@/interface/TTheme'; -export const StyledList = styled(RawUL)<{ $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` +export const ListItemStyle = css<{ theme: TTheme; active: boolean }>` position: relative; flex-grow: 1; + color: ${({ theme, active }) => (active ? theme.colors.accent[0] : theme.colors.secondary[0])}; + ${simpleColorTransition} + + &:hover { + color: ${({ theme }) => theme.colors.accent[0]}; + } `; + +export interface IgenerateListItemStyle { + isActive: boolean; + activeStyle?: boolean; + hoverStyle?: boolean; +} + +// eslint-disable-next-line react-refresh/only-export-components +export const generateListItemStyle = (props: IgenerateListItemStyle) => { + const { isActive, hoverStyle } = props; + const theme = themeStore.getState().theme; + + return css` + position: relative; + flex-grow: 1; + height: 100%; + color: ${isActive !== undefined && (isActive ? theme.colors.accent[0] : theme.colors.secondary[0])}; + ${hoverStyle && + css` + & > *:not(.switch-indicator) { + ${simpleColorTransition} + } + + & > *:hover { + ${simpleColorTransition} + color: ${theme.colors.accent[0]}; + } + `} + `; +}; diff --git a/src/components/molecules/SwitchList/SwitchList.tsx b/src/components/molecules/SwitchList/SwitchList.tsx index 5bf4c65cc..c8d9c3336 100644 --- a/src/components/molecules/SwitchList/SwitchList.tsx +++ b/src/components/molecules/SwitchList/SwitchList.tsx @@ -1,64 +1,90 @@ import React, { useEffect, useState } from 'react'; -import { CSSProp } from 'styled-components'; +import { css } from 'styled-components'; -import SwitchActiveIndicator, { IActiveSwitchIndicator } from '@/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator'; -import { ItemWrapper, StyledList } from './SwitchList.style'; +import { themeStore } from '@/design/theme/themeStore'; -type TSwitchActiveIndicator = Omit; +import { SwitchActiveIndicator } from '@/components/atoms/SwitchActiveIndicator'; +import { FancyFlexBox } from '@/components/templates/FancyFlexBox'; +import { TSwitchList } from './SwitchList.model'; +import { generateListItemStyle } from './SwitchList.style'; -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; +export default function SwitchList(props: TSwitchList) { + // the incoming props + const { + children, + whichIndexIsSelected, + activeItemHandler, + externalStyle, + switchIndicator, + flexBoxProps, + hoverStyle, + activeStyle, + gap, + } = props; + const [currentActive, setCurrentActive] = useState(''); + const theme = themeStore((state) => state.theme); const activeHandler = (uniqueKey: string) => { setCurrentActive(uniqueKey); activeItemHandler && activeItemHandler(Number(uniqueKey)); }; + // Set the current active item if the whichIndexIsSelected prop changes useEffect(() => { setCurrentActive(`${whichIndexIsSelected ? whichIndexIsSelected + 1 : 1}`); }, [whichIndexIsSelected]); return ( - + + {/* The Item Of the List */} {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} + activeHandler(uniqueKey)} + > + {child} {index === 0 && ( )} - + ); } return child; })} - + ); } diff --git a/src/components/molecules/TabSwitch/TabSwitch.model.ts b/src/components/molecules/TabSwitch/TabSwitch.model.ts index 23b0b3ec2..47ea6ad8a 100644 --- a/src/components/molecules/TabSwitch/TabSwitch.model.ts +++ b/src/components/molecules/TabSwitch/TabSwitch.model.ts @@ -1,12 +1,17 @@ import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { ITabSwitchDetailsLabelIcon, ITabSwitchDetailsChildren } from '../FancyTabSwitchButton/FancyTabSwitchButton.model'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; +import { + ITabSwitchDetailsLabelIcon, + ITabSwitchDetailsChildren, +} from '../FancyTabSwitchButton/FancyTabSwitchButton.model'; import { TSpacings } from '@/interface/TSpacings'; +import { IActiveSwitchIndicator } from '@/components/atoms/SwitchActiveIndicator/SwitchActiveIndicator'; +import { TComponentSizes } from '@/interface/TComponentSizes'; export interface ITabSwitchProps { wide?: boolean; - size?: 'sm' | 'md' | 'lg'; + size?: TComponentSizes; textColor?: TThemeTypes; themeType?: TThemeTypes; layer?: TLayer; @@ -15,6 +20,7 @@ export interface ITabSwitchProps { values: ITabSwitchDetailsChildren[] & ITabSwitchDetailsLabelIcon[]; rounded?: TBorderRadiusSizes; direction?: 'horizontal' | 'vertical'; + indicatorType?: IActiveSwitchIndicator['type']; outlined?: boolean; id?: string; currentSelect?: string; diff --git a/src/components/molecules/TabSwitch/TabSwitch.style.tsx b/src/components/molecules/TabSwitch/TabSwitch.style.tsx index 5923fb332..02c503bfe 100644 --- a/src/components/molecules/TabSwitch/TabSwitch.style.tsx +++ b/src/components/molecules/TabSwitch/TabSwitch.style.tsx @@ -1,41 +1,34 @@ -import { styled } from 'styled-components'; +import { CSSProp, styled } from 'styled-components'; import { borderRadius, spacingPx } from '@/design/theme/designSizes'; import { themeStore } from '@/design/theme/themeStore'; -import { TLayer } from '@/interface/TLayer'; import { TTheme } from '@/interface/TTheme'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; -import { TThemeTypes } from '@/interface/TThemeTypes'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; import { TSpacings } from '@/interface/TSpacings'; // Define the different sizes for the tab switch const getSpacingFromTheme = themeStore.getState().theme.spacing; + +// eslint-disable-next-line react-refresh/only-export-components export const tabSwitchSizes = { sm: { - paddingComponent: '4px', + paddingComponent: '0', }, md: { - paddingComponent: getSpacingFromTheme.xs, + paddingComponent: getSpacingFromTheme.xxs, }, lg: { - paddingComponent: getSpacingFromTheme.sm, + paddingComponent: getSpacingFromTheme.xxs, }, }; // 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; } // ----------------------------------------------------------- // @@ -63,9 +56,10 @@ export const ULButtonSwitchList = styled.ul` position: relative; height: 100%; width: 100%; list-style: none; + ${({ $externalStyle }) => $externalStyle} `; diff --git a/src/components/molecules/TabSwitch/TabSwitch.tsx b/src/components/molecules/TabSwitch/TabSwitch.tsx index 68d5158dd..a80c526ba 100644 --- a/src/components/molecules/TabSwitch/TabSwitch.tsx +++ b/src/components/molecules/TabSwitch/TabSwitch.tsx @@ -12,8 +12,6 @@ import { ITabSwitchProps } from './TabSwitch.model'; export default function TabSwitch(props: ITabSwitchProps) { const { values, - layer, - themeType, textColor, size, wide, @@ -26,6 +24,7 @@ export default function TabSwitch(props: ITabSwitchProps) { handler, iconAlign, activeColor, + indicatorType, } = props; // Define the state for the currently selected tab const buttonRefs = useRef[]>(values.map(() => React.createRef())); @@ -60,12 +59,9 @@ export default function TabSwitch(props: ITabSwitchProps) { {/* Generate a list item for each switch value */} {values.map((item, i) => ( @@ -73,7 +69,6 @@ export default function TabSwitch(props: ITabSwitchProps) { {/* Generate the button for the switch item */} )} diff --git a/src/components/molecules/TextAvatar/TextAvatar.model.ts b/src/components/molecules/TextAvatar/TextAvatar.model.ts new file mode 100644 index 000000000..767faad6f --- /dev/null +++ b/src/components/molecules/TextAvatar/TextAvatar.model.ts @@ -0,0 +1,21 @@ +import { CSSProp } from 'styled-components'; + +import { TSize } from '@/components/molecules/TextAvatar/utils/getSize'; +import { TLayer } from '@/interface/TLayer'; +import { TThemeTypes } from '@/interface/TThemeTypes'; +import { TTypography } from '@/interface/TTypography'; + +import { TgetBorderRadiusViaSize } from '@/design/designFunctions/getBorderRadiusViaSize'; + +export type TTextAvatarProps = { + text?: string; + rounded?: TgetBorderRadiusViaSize; + size?: TSize | string; + color?: string; + backgroundColor?: string; + themeType?: TThemeTypes; + layer?: TLayer; + externalStyle?: CSSProp; + fontSizes?: TTypography; + letterLength?: number; +}; diff --git a/src/components/molecules/TextAvatar/TextAvatar.stories.tsx b/src/components/molecules/TextAvatar/TextAvatar.stories.tsx new file mode 100644 index 000000000..95ae4337d --- /dev/null +++ b/src/components/molecules/TextAvatar/TextAvatar.stories.tsx @@ -0,0 +1,96 @@ +// Import necessary dependencies +import { Meta, StoryObj } from '@storybook/react'; + +// Import the component to be tested +import { TextAvatar } from '@/components/molecules/TextAvatar'; +// Define metadata for the story +const meta = { + component: TextAvatar, + + parameters: { + docs: { + description: { + component: + 'A Text Avatar that displays the first two letters and more of a text in a circle. The size and roundedness can be adjusted. ', + }, + }, + }, + + // Define arguments for the story + argTypes: { + rounded: { + description: 'The roundedness of the image.', + control: { type: 'select' }, + defaultValue: { + summary: 'md', + }, + }, + size: { + description: 'The size of the image.', + control: { type: 'select' }, + defaultValue: { + summary: 'md', + }, + }, + text: { + control: { type: 'text' }, + description: 'The source of the image.', + }, + letterLength: { + control: { type: 'number' }, + description: 'The amount of letters to be displayed.', + defaultValue: { + summary: 2, + }, + }, + fontSizes: { + control: { type: 'select' }, + description: 'The font size of the displayed text.', + }, + externalStyle: { + control: { type: 'text' }, + description: 'The externalStyle of the image.', + }, + themeType: { + control: { type: 'select' }, + description: 'The theme type of the image.', + defaultValue: { + summary: 'primary', + }, + }, + layer: { + control: { type: 'number' }, + description: 'The layer of the image.', + defaultValue: { + summary: 2, + }, + }, + color: { + control: { type: 'color' }, + description: 'The color of the image.', + }, + backgroundColor: { + control: { type: 'color' }, + description: 'The background color of the image.', + }, + }, + + // 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: { + text: 'https://avatars.githubusercontent.com/u/54409958?v=4', + rounded: 'complete', + size: 'md', + themeType: 'primary', + }, +}; diff --git a/src/components/molecules/TextAvatar/TextAvatar.style.tsx b/src/components/molecules/TextAvatar/TextAvatar.style.tsx new file mode 100644 index 000000000..75458d681 --- /dev/null +++ b/src/components/molecules/TextAvatar/TextAvatar.style.tsx @@ -0,0 +1,27 @@ +import { styled } from 'styled-components'; + +import { getBorderRadiusViaSize } from '@/design/designFunctions/getBorderRadiusViaSize'; +import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model'; +import { TTheme } from '@/interface/TTheme'; + +import { getSize } from '@/components/molecules/TextAvatar/utils/getSize'; +import { TTextAvatarProps } from '@/components/molecules/TextAvatar/TextAvatar.model'; +import { getTextColor } from '@/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent'; + +// Styled placeholder component for the profile picture +type TPlaceholderProps = IStyledPrefixAndOmitter; +export const Placeholder = styled.div` + border-radius: ${({ $rounded }) => $rounded && getBorderRadiusViaSize($rounded)}; + width: ${({ $size }) => getSize($size ?? 'md')}; + height: ${({ $size }) => getSize($size ?? 'md')}; + display: flex; + justify-content: center; + align-items: center; + background-color: ${({ $backgroundColor, theme, $layer, $themeType }) => + $backgroundColor ? $backgroundColor : theme.colors[$themeType ?? 'primary'][$layer ?? 2]}; + color: ${({ $color, theme, $layer = 1, $themeType = 'primary' }) => + getTextColor({ theme, $themeType, $textLayer: $layer, $customTextColor: $color, turnColorTheme: true })}; + font-size: 1.5em; + aspect-ratio: 1/1; + ${({ $externalStyle }) => $externalStyle} +`; diff --git a/src/components/molecules/TextAvatar/TextAvatar.tsx b/src/components/molecules/TextAvatar/TextAvatar.tsx new file mode 100644 index 000000000..1ad64eda1 --- /dev/null +++ b/src/components/molecules/TextAvatar/TextAvatar.tsx @@ -0,0 +1,42 @@ +import React from 'react'; + +import { Typography } from '@/components/atoms/Typography'; +import { Placeholder } from '@/components/molecules/TextAvatar/TextAvatar.style'; + +import { getTextSize } from '@/components/atoms/FancyProfilePicture/utils/getTextSize'; +import { TTextAvatarProps } from '@/components/molecules/TextAvatar/TextAvatar.model'; + +type TAvatarTextImage = TTextAvatarProps & React.HTMLAttributes; +export default function TextAvatar(props: TAvatarTextImage) { + const { + rounded, + size = 'md', + color, + backgroundColor, + themeType, + layer, + fontSizes, + externalStyle, + text, + letterLength, + ...htmlProps + } = props; + + return ( + + + {text?.substring(0, letterLength ?? 2).toUpperCase()} + + + ); +} diff --git a/src/components/molecules/TextAvatar/index.ts b/src/components/molecules/TextAvatar/index.ts new file mode 100644 index 000000000..4caf0c76e --- /dev/null +++ b/src/components/molecules/TextAvatar/index.ts @@ -0,0 +1 @@ +export { default as TextAvatar } from './TextAvatar'; diff --git a/src/components/molecules/TextAvatar/utils/getSize.ts b/src/components/molecules/TextAvatar/utils/getSize.ts new file mode 100644 index 000000000..fe18a7155 --- /dev/null +++ b/src/components/molecules/TextAvatar/utils/getSize.ts @@ -0,0 +1,21 @@ +// Set size based on prop +export type TSize = 'sm' | 'md' | 'lg' | 'xxs' | 'xs' | 'xl' | 'xxl' | 'complete'; +const sizeConfig: Record = { + xxs: '16px', + xs: '24px', + sm: '32px', + md: '40px', + lg: '48px', + xl: '56px', + xxl: '64px', + complete: '100%', + default: '40px', +}; + +export 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']; +}; diff --git a/src/components/organisms/FancyBoxSet/FancyBoxSet.tsx b/src/components/organisms/FancyBoxSet/FancyBoxSet.tsx index da883eb3c..09ffaea49 100644 --- a/src/components/organisms/FancyBoxSet/FancyBoxSet.tsx +++ b/src/components/organisms/FancyBoxSet/FancyBoxSet.tsx @@ -30,13 +30,13 @@ export default function FancyBoxSet(props: TFancyBoxSet) { {/* 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 && ( )} - + ))} diff --git a/src/components/organisms/FancyButton/FancyButton.style.tsx b/src/components/organisms/FancyButton/FancyButton.style.tsx index fc3eea48f..b287937a9 100644 --- a/src/components/organisms/FancyButton/FancyButton.style.tsx +++ b/src/components/organisms/FancyButton/FancyButton.style.tsx @@ -2,7 +2,7 @@ import { css } from 'styled-components'; import { generateBorderRadiusForComponent } from '@/design/designFunctions/generateBorderRadiusForComponent'; import { generateComponentPadding } from '@/design/designFunctions/generatePaddingForComponent'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; const generate1To1Button = ($size: 'sm' | 'md' | 'lg', $outlined?: boolean) => { //this makes the button a square (1/1) if there is no $label and a $icon @@ -30,7 +30,12 @@ export const generateFancyButton = (props: IGenerateFancyButton) => { return css` justify-content: ${$justifyContent ?? 'center'}; ${generateBorderRadiusForComponent($size, $borderRadius)}; - ${!$noPadding && generateComponentPadding({ size: $size ?? 'md', borderThinkness: $outlined ? 1.2 : 0, doublePaddingLeftRight: true })}; + ${!$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 index d1c776210..fbd7ccee5 100644 --- a/src/components/organisms/FancyButton/FancyButton.tsx +++ b/src/components/organisms/FancyButton/FancyButton.tsx @@ -7,7 +7,7 @@ import { LoadingSVGArrows } from '@/components/atoms/LoadingSVGArrows'; import { generateFancyButton } from './FancyButton.style'; import { TTypography } from '@/interface/TTypography'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; import { IButton, IButtonProps } from '@/components/molecules/Button/Button.model'; const alignment = { @@ -34,11 +34,23 @@ export type IFancyButtonProps = { // --------------------------------------------------------------------------- // 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 { + icon, + label, + isLoading, + iconAlign, + size, + align, + externalStyle, + oneToOne, + noPadding, + fontVariant, + borderRadius, + ...buttonProps + } = { + ...defaultProps, + ...props, + }; const generateFancyStyle = generateFancyButton({ $size: size, @@ -64,7 +76,9 @@ export default function FancyButton(props: IFancyButton) { {label && {label}} {(isLoading || icon) && ( - {isLoading ? : icon} + + {isLoading ? : icon} + )} @@ -73,6 +87,6 @@ export default function FancyButton(props: IFancyButton) { const defaultProps: IFancyButton = { themeType: 'accent', - size: 'lg', + size: 'md', align: 'center', }; diff --git a/src/components/organisms/FancyChip/FancyChip.stories.tsx b/src/components/organisms/FancyChip/FancyChip.stories.tsx deleted file mode 100644 index 2c6c9186d..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 '@/components/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 b8a60ded6..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'; - -// 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 415643c44..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 '@/components/icons/SVGXCircle'; -import { FancyContent } from '@/components/molecules/FancyContent'; -import { Chip } from '@/components/molecules/Chip'; -import { IChipProps } from '@/components/molecules/Chip/IChip.model'; - -import { StyledXButton, TSpacingPosition, WrapperImage, generateSpacing } from './FancyChip.style'; - -export type TFancyChipProps = { - label?: string; - isActive?: boolean; - icon?: React.ReactNode; - image?: string; - onDelete?: () => void; -} & IChipProps & - React.HTMLAttributes; - -// Define the Chip component -export default function FancyChip(props: TFancyChipProps) { - 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/FancyChipList/FancyChipList.stories.tsx b/src/components/organisms/FancyChipList/FancyChipList.stories.tsx index 2339ff368..c00e05516 100644 --- a/src/components/organisms/FancyChipList/FancyChipList.stories.tsx +++ b/src/components/organisms/FancyChipList/FancyChipList.stories.tsx @@ -9,7 +9,8 @@ const meta = { 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.', + component: + 'Dumb-Comonent: A Component that act like a tag list. It can be used to display tags/chips for some Informations.', }, }, }, diff --git a/src/components/organisms/FancyChipList/FancyChipList.style.tsx b/src/components/organisms/FancyChipList/FancyChipList.style.tsx index d45091f6c..cd9a2c044 100644 --- a/src/components/organisms/FancyChipList/FancyChipList.style.tsx +++ b/src/components/organisms/FancyChipList/FancyChipList.style.tsx @@ -9,18 +9,21 @@ import { IGenerateThemeForCardProps } from '@/design/designFunctions/generateThe type IChipContainer = IStyledPrefixAndPicker & { theme: TTheme }; export const InputLi = styled.li` display: flex; - flex: 1; + flex: 1 0 auto; + min-width: 40px; input { + flex-grow: 1; + height: auto; + width: 100%; border: none; - padding: 5px; font-size: 14px; background-color: transparent; - color: ${({ $themeType, theme }) => getTextColor({ $themeType: $themeType ?? 'primary', theme, turnColorTheme: true })}; + 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 index 372c205a3..63da3e10f 100644 --- a/src/components/organisms/FancyChipList/FancyChipList.tsx +++ b/src/components/organisms/FancyChipList/FancyChipList.tsx @@ -1,59 +1,35 @@ import React, { KeyboardEvent, useEffect, useState } from 'react'; -import { v4 as uuidv4 } from 'uuid'; import { TLayer } from '@/interface/TLayer'; - -import { Fieldset } from '@/components/molecules/Fieldset'; import { ChipList } from '@/components/molecules/ChipList'; -import { FancyChip } from '@/components/organisms/FancyChip'; +import { Fieldset } from '@/components/molecules/Fieldset'; +import useChip from '@/components/organisms/FancyChipList/useChip.hook'; + +import { FancyChip } from '@/components/templates/FancyChip'; import { InputLi } from './FancyChipList.style'; -import { ChipListProps, TChip } from './FancyChipListProps.model'; +import { ChipListProps } from './FancyChipListProps.model'; // 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 }; - + const { themeType, layer, chips, inputPlaceholder, outlined, label, size, editable, systemInformation, handler } = { + ...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(); - } - }; + const { + chipState, + addChip, + handleChipEdit, + deleteChip, + handleChipFocus, + focusedChip, + handleClick, + editabledChip, + removeLastChip, + } = useChip(chips); // Function to handle input keydown events for adding and removing chips const handleInputKeyDown = (event: KeyboardEvent) => { @@ -62,38 +38,47 @@ export default function FancyChipList(props: ChipListProps) { event.preventDefault(); addChip(val); setInputValue(''); - } else if (event.key === 'Backspace' && !val && chipsWithKeys.length) { + } else if (event.key === 'Backspace' && !val && chipState.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); + + const lastChip = chipState[chipState.length - 1]; + setInputValue(lastChip.label + ' '); // Add a space to prevent cursor from immediately jumping back into the chip input + removeLastChip(); } }; + useEffect(() => { + handler && handler(chipState); + }, [chipState, handler]); + // 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) => ( - + {chipState.map((chip, index) => ( +
  • + handleChipFocus(chip.id)} + onFocus={() => handleChipFocus(chip.id)} + onClick={(e) => handleClick(e, chip.id)} + onKeyDown={(e) => handleChipEdit(chip.id, e)} + onDelete={deleteChip(chip.id)} + /> +
    • ))}     diff --git a/src/components/organisms/FancyChipList/FancyChipListProps.model.ts b/src/components/organisms/FancyChipList/FancyChipListProps.model.ts index a1bc609af..a91fa2b31 100644 --- a/src/components/organisms/FancyChipList/FancyChipListProps.model.ts +++ b/src/components/organisms/FancyChipList/FancyChipListProps.model.ts @@ -1,17 +1,19 @@ import { TLayer } from '@/interface/TLayer'; -import { TThemeTypes } from '@/interface/TThemeTypes'; +import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; import { TUiColorsSystemMessage } from '@/interface/TUiColorsSystemMessage'; // Defining the interface for the component's props export interface ChipListProps { - themeType?: Exclude; + themeType?: TThemeTypesNotTransparent; systemInformation?: TUiColorsSystemMessage; layer?: TLayer; outlined?: boolean; - chips?: string[]; + chips?: TChip[]; inputPlaceholder?: string; label?: string; size?: 'sm' | 'md' | 'lg'; + editable?: boolean; + handler?: (chips: TChip[]) => void; } // Define the type for the chips with an id and label diff --git a/src/components/organisms/FancyChipList/useChip.hook.tsx b/src/components/organisms/FancyChipList/useChip.hook.tsx new file mode 100644 index 000000000..92da53c27 --- /dev/null +++ b/src/components/organisms/FancyChipList/useChip.hook.tsx @@ -0,0 +1,86 @@ +import { useEffect, useState } from 'react'; +import { v4 as uuidv4 } from 'uuid'; +import { TChip } from '@/components/organisms/FancyChipList/FancyChipListProps.model'; +import { setLastLetterPositionContentEditable } from '@/components/organisms/FancyChipList/utils/setLastLetterPositionContentEditable'; + +const useChip = (chips?: TChip[]) => { + const [chipState, setChipState] = useState([]); + const [focusedChip, setFocusedChip] = useState(''); + const [editabledChip, setEditabledChip] = useState(''); + + // Effect to initialize chipsWithKeys state when the chips prop changes + useEffect(() => { + setChipState(chips || []); + }, [chips]); + + // Function to add a new chip + const addChip = (label: string) => { + setChipState((prev) => [...prev, { id: uuidv4(), label }]); + }; + + // Function to delete a chip, curried to provide the chip id + const deleteChip = (chipToDelete: string) => () => { + setChipState(chipState.filter((chip) => chip.id !== chipToDelete)); + }; + + const removeLastChip = () => { + setChipState((prev) => prev.slice(0, -1)); + }; + + // Function to set the focused chip + const handleChipFocus = (chipId: string) => { + // If the chip is already focused, unfocus it for on blur + if (chipId === focusedChip) { + setFocusedChip(''); + setEditabledChip(''); + return; + } + // Otherwise, set the focused chip + setFocusedChip(chipId); + setEditabledChip(''); + }; + + const handleClick = (e: React.MouseEvent, chipId: string) => { + setFocusedChip(chipId); + setEditabledChip(focusedChip); + const target = e.target; + setLastLetterPositionContentEditable(target as HTMLElement); + }; + + // Function to update the label of a chip + const updateChipLabel = (chipId: string, newLabel: string) => { + setChipState((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 the user pressed the enter key, confirm the edit and remove focus + if (e.key === 'Enter' && focusedChip && !editabledChip) { + e.preventDefault(); + setEditabledChip(focusedChip); + const target = e.target as HTMLInputElement; + setLastLetterPositionContentEditable(target); + return; + } else if ((e.key === 'Enter' || e.key === ',') && chipId === focusedChip) { + e.preventDefault(); + updateChipLabel(chipId, (e.target as HTMLDivElement).innerText); + setFocusedChip(''); + setEditabledChip(''); + (e.target as HTMLDivElement).blur(); + } + }; + + return { + addChip, + handleChipEdit, + deleteChip, + handleChipFocus, + focusedChip, + editabledChip, + chipState, + removeLastChip, + handleClick, + }; +}; + +export default useChip; diff --git a/src/components/organisms/FancyChipList/useInput.hook.tsx b/src/components/organisms/FancyChipList/useInput.hook.tsx new file mode 100644 index 000000000..aa7262b3d --- /dev/null +++ b/src/components/organisms/FancyChipList/useInput.hook.tsx @@ -0,0 +1,13 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const useInput = (initialValue: string) => { + const [value, setValue] = React.useState(initialValue); + + const onChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + }; + + return { + value, + onChange, + }; +}; diff --git a/src/components/organisms/FancyChipList/utils/setLastLetterPositionContentEditable.ts b/src/components/organisms/FancyChipList/utils/setLastLetterPositionContentEditable.ts new file mode 100644 index 000000000..fa84f732f --- /dev/null +++ b/src/components/organisms/FancyChipList/utils/setLastLetterPositionContentEditable.ts @@ -0,0 +1,10 @@ +export const setLastLetterPositionContentEditable = (element: HTMLElement) => { + const range = document.createRange(); + const selection = window.getSelection(); + + range.selectNodeContents(element); + range.collapse(false); // Set the cursor at the end + + selection?.removeAllRanges(); + selection?.addRange(range); +}; diff --git a/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx b/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx index 3234cb9ba..78ff37caa 100644 --- a/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx +++ b/src/components/organisms/FancyCodeVerificationInput/FancyCodeVerificationInput.stories.tsx @@ -11,7 +11,8 @@ const meta = { parameters: { docs: { description: { - component: 'Dumb-Comonent: The FancyCodeVerificationInput component is for single input like a verification code', + component: + 'Dumb-Comonent: The FancyCodeVerificationInput component is for single input like a verification code', }, }, }, diff --git a/src/components/organisms/FancyColorPicker/FancyColorPicker.tsx b/src/components/organisms/FancyColorPicker/FancyColorPicker.tsx index e47353e61..4c4d832c4 100644 --- a/src/components/organisms/FancyColorPicker/FancyColorPicker.tsx +++ b/src/components/organisms/FancyColorPicker/FancyColorPicker.tsx @@ -6,7 +6,7 @@ import { TTheme } from '@/interface/TTheme'; import { emitSelectedColorChange } from './colorPickerUtils'; import { IColorFormat } from '@/utils/variables/colorFormat/colorFormats'; -import ColorDisplay from '@/components/atoms/ColorDisplay/ColorDisplay'; +import ColorDisplay from '@/components/molecules/ColorDisplay/ColorDisplay'; import ColorArea from '@/components/molecules/FancyColorArea/FancyColorArea'; import FancyHueSlider from '@/components/molecules/FancyHueSlider/FancyHueSlider'; import FancyOpacitySlider from '@/components/molecules/FancyOpacitySlider/FancyOpacitySlider'; @@ -31,7 +31,9 @@ export default function FanyColorPicker(props: IColorPicker) { ...props, }; - const [displayColorValue, setDisplayColorValue] = useState(Color(inputColor ? inputColor : 'hsl(0, 100%, 50%)')); + 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); diff --git a/src/components/organisms/FancyDateInput/FancyDateInput.tsx b/src/components/organisms/FancyDateInput/FancyDateInput.tsx index 1ec7e41dc..5a51fafef 100644 --- a/src/components/organisms/FancyDateInput/FancyDateInput.tsx +++ b/src/components/organisms/FancyDateInput/FancyDateInput.tsx @@ -9,7 +9,20 @@ type IFancyDateInput = Omit & IDate // ----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; + 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); diff --git a/src/components/organisms/FancyDatePicker/FancyDatePicker.tsx b/src/components/organisms/FancyDatePicker/FancyDatePicker.tsx index db286b453..c4d7e2316 100644 --- a/src/components/organisms/FancyDatePicker/FancyDatePicker.tsx +++ b/src/components/organisms/FancyDatePicker/FancyDatePicker.tsx @@ -26,7 +26,10 @@ interface IFancyDatePicker { // --------- A Datepicker thats really fancy with some advanced logic -------- // // --------------------------------------------------------------------------- // export default function FancyDatePicker(props: IFancyDatePicker) { - const { rangeCalendar, handler, selectedYear, disabledDateSetting, externalData, themeType, layer } = { ...defaultProps, ...props }; + 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()); diff --git a/src/components/organisms/FancyDropDownSelect/FancyDropDownSelect.tsx b/src/components/organisms/FancyDropDownSelect/FancyDropDownSelect.tsx index f42ae7597..ab4feabce 100644 --- a/src/components/organisms/FancyDropDownSelect/FancyDropDownSelect.tsx +++ b/src/components/organisms/FancyDropDownSelect/FancyDropDownSelect.tsx @@ -10,7 +10,20 @@ export type IFancyDropDownSelect = Omit ), border: ( - + @@ -80,7 +87,14 @@ const editBarIcons = { ), text: ( - + ), diff --git a/src/components/organisms/FancyEditBar/FancyEditBar.tsx b/src/components/organisms/FancyEditBar/FancyEditBar.tsx index efa0fe12f..907f20d44 100644 --- a/src/components/organisms/FancyEditBar/FancyEditBar.tsx +++ b/src/components/organisms/FancyEditBar/FancyEditBar.tsx @@ -8,7 +8,13 @@ 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' }) { +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); @@ -60,7 +66,13 @@ export default function FancyEditBar({ active, sectionType }: { active?: boolean // Render the EditBar component if active return (
    - {active && } + {active && ( + + )}
    ); } diff --git a/src/components/organisms/FancyEditBar/functions/ElementsObjectMapper.tsx b/src/components/organisms/FancyEditBar/functions/ElementsObjectMapper.tsx index 0400b8538..6da7b9441 100644 --- a/src/components/organisms/FancyEditBar/functions/ElementsObjectMapper.tsx +++ b/src/components/organisms/FancyEditBar/functions/ElementsObjectMapper.tsx @@ -1,5 +1,11 @@ import { IFancyBottomBarIcon } from '../../../templates/FancyBottomBarIcon/FancyBottomBarIcon'; -import { ICategoryItem, IDropDown, IRangeSlider, ITextInput, InputSettings } from '../EditBarItemsStructure/IEditbarObjectSturcture.model'; +import { + ICategoryItem, + IDropDown, + IRangeSlider, + ITextInput, + InputSettings, +} from '../EditBarItemsStructure/IEditbarObjectSturcture.model'; import { FancyTextInput } from '../../FancyTextInput'; import FancyDropDownSelect from '../../FancyDropDownSelect/FancyDropDownSelect'; @@ -34,7 +40,10 @@ interface IObjectMapper { } // Get settings based on active category of and the activeSubSectionItem -export const getObjectMapper = ({ activeEditbarCategory, activeSubSectionItem }: IObjectMapper): React.ReactElement[] | null => { +export const getObjectMapper = ({ + activeEditbarCategory, + activeSubSectionItem, +}: IObjectMapper): React.ReactElement[] | null => { //get the values and check if they there if (!activeEditbarCategory || !activeSubSectionItem) return null; diff --git a/src/components/organisms/FancyHeader/FancyHeader.tsx b/src/components/organisms/FancyHeader/FancyHeader.tsx new file mode 100644 index 000000000..11fcffdb5 --- /dev/null +++ b/src/components/organisms/FancyHeader/FancyHeader.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { Header } from '@/components/molecules/Header'; +import { FancyNavBar } from '@/components/molecules/FancyNavBar'; +import HeaderLogo from '@/components/organisms/FancyHeader/HeaderLogo/HeaderLogo'; + +type IFancyHeader = { + children?: React.ReactNode; +} & React.ComponentProps; +function FancyHeader(props: IFancyHeader) { + return
    ; +} + +FancyHeader.Nav = FancyNavBar; +FancyHeader.Logo = HeaderLogo; + +export default FancyHeader; diff --git a/src/components/organisms/FancyHeader/HeaderLogo/HeaderLogo.tsx b/src/components/organisms/FancyHeader/HeaderLogo/HeaderLogo.tsx new file mode 100644 index 000000000..f8f830a52 --- /dev/null +++ b/src/components/organisms/FancyHeader/HeaderLogo/HeaderLogo.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { styled } from 'styled-components'; + +import LogoImage from '@/components/organisms/FancyHeader/HeaderLogo/LogoImage/LogoImage'; +import LogoIcon from '@/components/organisms/FancyHeader/HeaderLogo/LogoIcon/LogoIcon'; +import LogoTitle from '@/components/organisms/FancyHeader/HeaderLogo/LogoTitle/LogoTitle'; + +type THeaderLogo = { + children?: React.ReactNode; +} & React.HTMLAttributes; +export default function HeaderLogo(props: THeaderLogo) { + return ; +} + +HeaderLogo.Image = LogoImage; +HeaderLogo.Icon = LogoIcon; +HeaderLogo.Title = LogoTitle; + +const StyledLogoWrapper = styled.div` + display: flex; + align-items: center; + justify-content: center; + height: 100%; + flex-shrink: 0; + padding: 8px; + box-sizing: border-box; + gap: 8px; +`; diff --git a/src/components/organisms/FancyHeader/HeaderLogo/LogoIcon/LogoIcon.tsx b/src/components/organisms/FancyHeader/HeaderLogo/LogoIcon/LogoIcon.tsx new file mode 100644 index 000000000..2f832af96 --- /dev/null +++ b/src/components/organisms/FancyHeader/HeaderLogo/LogoIcon/LogoIcon.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +import { FancySVGAtom } from '@/components/atoms/FancySVGAtom'; + +type ILogoIcon = React.ComponentProps; +export default function LogoIcon(props: ILogoIcon) { + const { size = 'full', ...restProps } = props; + + return ; +} diff --git a/src/components/organisms/FancyHeader/HeaderLogo/LogoImage/LogoImage.tsx b/src/components/organisms/FancyHeader/HeaderLogo/LogoImage/LogoImage.tsx new file mode 100644 index 000000000..a70d538ab --- /dev/null +++ b/src/components/organisms/FancyHeader/HeaderLogo/LogoImage/LogoImage.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { FancyImage } from '@/components/atoms/FancyImage'; + +type ILogoImage = React.ComponentProps; + +export default function LogoImage(props: ILogoImage) { + return ; +} diff --git a/src/components/organisms/FancyHeader/HeaderLogo/LogoTitle/LogoTitle.tsx b/src/components/organisms/FancyHeader/HeaderLogo/LogoTitle/LogoTitle.tsx new file mode 100644 index 000000000..3e2281fe0 --- /dev/null +++ b/src/components/organisms/FancyHeader/HeaderLogo/LogoTitle/LogoTitle.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +import { Typography } from '@/components/atoms/Typography'; + +export default function LogoTitle(props: React.ComponentProps) { + return ; +} diff --git a/src/components/organisms/FancyHeader/index.ts b/src/components/organisms/FancyHeader/index.ts new file mode 100644 index 000000000..9e46662a3 --- /dev/null +++ b/src/components/organisms/FancyHeader/index.ts @@ -0,0 +1 @@ +export { default as FancyHeader } from './FancyHeader'; diff --git a/src/components/organisms/FancyModal/FancyModal.state.tsx b/src/components/organisms/FancyModal/FancyModal.state.tsx index 91a1ed940..768b69ca8 100644 --- a/src/components/organisms/FancyModal/FancyModal.state.tsx +++ b/src/components/organisms/FancyModal/FancyModal.state.tsx @@ -1,9 +1,9 @@ import { create } from 'zustand'; import { TModalStatus } from '@/interface/TModalStatus'; -import { IModal } from '@/components/molecules/Modal/Modal'; +import { TModal } from '@/components/molecules/Modal/Modal'; -type TModalConfig = Omit; +type TModalConfig = Omit; type IModals = { id: string; diff --git a/src/components/organisms/FancyModal/FancyModal.stories.tsx b/src/components/organisms/FancyModal/FancyModal.stories.tsx index da1265115..8c82f8686 100644 --- a/src/components/organisms/FancyModal/FancyModal.stories.tsx +++ b/src/components/organisms/FancyModal/FancyModal.stories.tsx @@ -5,7 +5,7 @@ import { Meta, StoryObj } from '@storybook/react'; import FancyModal from './FancyModal'; import { useFancyModalStore } from './FancyModal.state'; import { FancyButton } from '../FancyButton'; -import { IModal } from '../../molecules/Modal/Modal'; +import { TModal } from '../../molecules/Modal/Modal'; import { FancyTextInput } from '../FancyTextInput'; // Define metadata for the story @@ -28,7 +28,7 @@ export default meta; // Define the story object type Story = StoryObj; -function HelperComponent(props: React.ComponentProps & Omit) { +function HelperComponent(props: React.ComponentProps & Omit) { const { appendToDomID, children, ...configProps } = props; const openModal = useFancyModalStore((state) => state.openModal); const closeModal = useFancyModalStore((state) => state.closeModal); diff --git a/src/components/organisms/FancyModal/FancyModal.tsx b/src/components/organisms/FancyModal/FancyModal.tsx index fd07f362f..e802ac232 100644 --- a/src/components/organisms/FancyModal/FancyModal.tsx +++ b/src/components/organisms/FancyModal/FancyModal.tsx @@ -40,7 +40,12 @@ export default function FancyModal({ appendToDomID }: IFancyModal) { {/* ----- The FancModal Ports the Modal out of the root div in the spearte "modal" div ----- */} {modals.map((modal, key) => ( - closeModalHandler(modal.id)} {...modal.config}> + closeModalHandler(modal.id)} + {...modal.config} + > {/* ----- The Content of the Modal ----- */} {modal.children} diff --git a/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx b/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx index 6821169e7..4384e44b6 100644 --- a/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx +++ b/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx @@ -10,8 +10,21 @@ type IFancyNumberInput = INumberInput & IInputWrapperUserInputProps & { autoWidt // ----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; + 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); diff --git a/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx b/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx index 6a70c567b..35bff3deb 100644 --- a/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx +++ b/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx @@ -10,7 +10,20 @@ type IFancyTextInputProps = IPasswordInputProps & Omit((props, ref) => { - const { align, alignInput, label, description, externalStyle, checked, id: idExternal, name, value, ...HTMLProps } = props; + const { + align, + alignInput, + label, + description, + externalStyle, + checked, + id: idExternal, + name, + value, + ...HTMLProps + } = props; const id = useId(); const pickedId = idExternal ? idExternal : id; diff --git a/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx b/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx index 2b0f19fc1..92678204f 100644 --- a/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx +++ b/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx @@ -13,7 +13,19 @@ import { Label, NumberContainer, RangeSliderContainer, Icon } from './FancyRange // -------------------- 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 { + label, + align, + icon, + value, + min, + max, + displayNumber, + onChange, + themeType, + layer = 4, + disabled, + } = { ...defaultProps, ...props }; const [isActive, setIsActive] = useState(false); const [toutched, setToutched] = useState(false); diff --git a/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx b/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx index c30804ce3..17c6e754c 100644 --- a/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx +++ b/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.stories.tsx @@ -15,7 +15,8 @@ const meta = { parameters: { docs: { description: { - component: 'Smart-Comonent: The FancySwipeUpModal is a smart component that handles all the logic for the SwipeUpModal.', + component: + 'Smart-Comonent: The FancySwipeUpModal is a smart component that handles all the logic for the SwipeUpModal.', }, }, }, diff --git a/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.tsx b/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.tsx index 1b80511be..0ca231719 100644 --- a/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.tsx +++ b/src/components/organisms/FancySwipeUpModal/FancySwipeUpModal.tsx @@ -31,7 +31,12 @@ export default function FancySwipeUpModal({ appendToDomID }: IFancySwipeUpModal) {/* The Mobile Modal Component */} {modals.map((modal, key) => ( - closeModalHandler(modal.id)} isOpen={modal.status === 'open'}> + closeModalHandler(modal.id)} + isOpen={modal.status === 'open'} + > {/* render the content of the modal */} {modal.children} diff --git a/src/components/organisms/FancyTextInput/FancyTextInput.tsx b/src/components/organisms/FancyTextInput/FancyTextInput.tsx index c5f106d9d..04fb25f3c 100644 --- a/src/components/organisms/FancyTextInput/FancyTextInput.tsx +++ b/src/components/organisms/FancyTextInput/FancyTextInput.tsx @@ -9,7 +9,20 @@ type IFancyTextInputProps = ITextInputProps & Omit removeToast(item.id), @@ -52,7 +56,11 @@ export default function FancyToastMessage() { {transitions(({ ...style }, item: IToastMessage) => ( - ref && refMap.set(item, ref)} toast={item} remove={removeToast} /> + ref && refMap.set(item, ref)} + toast={item} + remove={removeToast} + /> ))} diff --git a/src/components/atoms/ComponentAsWrapper/ComponentAsWrapper.mdx b/src/components/shared/ComponentAsWrapper/ComponentAsWrapper.mdx similarity index 100% rename from src/components/atoms/ComponentAsWrapper/ComponentAsWrapper.mdx rename to src/components/shared/ComponentAsWrapper/ComponentAsWrapper.mdx diff --git a/src/components/atoms/ComponentAsWrapper/ComponentAsWrapper.tsx b/src/components/shared/ComponentAsWrapper/ComponentAsWrapper.tsx similarity index 100% rename from src/components/atoms/ComponentAsWrapper/ComponentAsWrapper.tsx rename to src/components/shared/ComponentAsWrapper/ComponentAsWrapper.tsx diff --git a/src/components/atoms/ComponentAsWrapper/index.ts b/src/components/shared/ComponentAsWrapper/index.ts similarity index 100% rename from src/components/atoms/ComponentAsWrapper/index.ts rename to src/components/shared/ComponentAsWrapper/index.ts diff --git a/src/components/shared/FancyPopover/Popover.mdx b/src/components/shared/FancyPopover/Popover.mdx index b7d566aa5..1bd8fa410 100644 --- a/src/components/shared/FancyPopover/Popover.mdx +++ b/src/components/shared/FancyPopover/Popover.mdx @@ -1,6 +1,3 @@ -````markdown -import FancyPopover from './FancyPopover'; - # FancyPopover Component The `FancyPopover` component is a flexible and easy-to-use popover that can be attached to any element. It allows you to display additional information or interactive content in a floating panel that is anchored to a reference element (the `refComponent`). The popover is smartly positioned based on the available viewport space to ensure that it never goes off-screen. @@ -35,6 +32,7 @@ const App = () => { export default App; ``` + ```` In the example above, when the button is clicked, the popover content will appear with a 10-pixel offset from the left or right edge (depending on screen position) and a 15-pixel offset from the bottom of the button. @@ -51,3 +49,4 @@ For any questions or further customization needs, refer to the official React an This document provides a clear overview of the component, how to use it, and how to style it. It also includes a reminder about accessibility considerations, which are important for inclusive design. ``` +```` diff --git a/src/components/shared/FancyPopover/Popover.style.tsx b/src/components/shared/FancyPopover/Popover.style.tsx index 4a6f693bb..52ccef39d 100644 --- a/src/components/shared/FancyPopover/Popover.style.tsx +++ b/src/components/shared/FancyPopover/Popover.style.tsx @@ -2,7 +2,7 @@ import { styled } from 'styled-components'; export const RefContainer = styled.div` position: relative; - display: inline-block; + display: inline-flex; `; export const ContentContainer = styled.div` diff --git a/src/components/shared/FancyPopover/Popover.tsx b/src/components/shared/FancyPopover/Popover.tsx index 3e843e954..5d1422236 100644 --- a/src/components/shared/FancyPopover/Popover.tsx +++ b/src/components/shared/FancyPopover/Popover.tsx @@ -16,7 +16,11 @@ const Popover: React.FC = ({ buttonRef, content, isVisible, onClos const popoverRef = useRef(null); const handleClickOutside = (event: MouseEvent) => { - if (popoverRef.current && !popoverRef.current.contains(event.target as Node) && !buttonRef.current?.contains(event.target as Node)) { + if ( + popoverRef.current && + !popoverRef.current.contains(event.target as Node) && + !buttonRef.current?.contains(event.target as Node) + ) { onClose(); } }; @@ -31,7 +35,9 @@ const Popover: React.FC = ({ buttonRef, content, isVisible, onClos const isButtonOnLeftSide = buttonRect.left < window.innerWidth / 2; - let newLeft = isButtonOnLeftSide ? buttonRect.left + xOffset : buttonRect.right - popoverRef.current.offsetWidth - xOffset; + let newLeft = isButtonOnLeftSide + ? buttonRect.left + xOffset + : buttonRect.right - popoverRef.current.offsetWidth - xOffset; let newTop = buttonRect.bottom + yOffset; diff --git a/src/components/templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx b/src/components/templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx index 2ce877d4a..6b640bc22 100644 --- a/src/components/templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx +++ b/src/components/templates/FancyBottomBarIcon/FancyBottomBarIcon.stories.tsx @@ -65,7 +65,8 @@ const meta = { }, 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.', + 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, }, diff --git a/src/components/templates/FancyChip/FancyChip.tsx b/src/components/templates/FancyChip/FancyChip.tsx new file mode 100644 index 000000000..6e274c543 --- /dev/null +++ b/src/components/templates/FancyChip/FancyChip.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { css } from 'styled-components'; + +import { Chip } from '@/components/molecules/Chip'; +import { TChipProps } from '@/components/molecules/Chip/Chip'; +import { TSpacingPosition, generateSpacing } from '@/components/templates/FancyChip/utils/generateSpacings'; +import { sizesSettings } from '@/components/molecules/Chip/sizeSettings'; +import { TThemeTypesNotTransparent } from '@/interface/TThemeTypesNotTransparent'; + +type TFancyChip = { + image?: string; + label?: string; + onDelete?: () => void; + icon?: React.ReactNode; + size?: keyof typeof sizesSettings; + textColor?: TThemeTypesNotTransparent; +} & TChipProps; +export default function FancyChip(props: TFancyChip) { + const { + label, + icon, + image, + onDelete, + layer = 3, + themeType, + size = 'sm', + externalStyle, + textColor, + ...htmlProps + } = 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(); + + return ( + + {image && } + {(label || icon) && ( + + {icon && {icon}} + + {label} + + + )} + {onDelete && } + + ); +} diff --git a/src/components/organisms/FancyChip/index.ts b/src/components/templates/FancyChip/index.ts similarity index 100% rename from src/components/organisms/FancyChip/index.ts rename to src/components/templates/FancyChip/index.ts diff --git a/src/components/templates/FancyChip/utils/generateSpacings.ts b/src/components/templates/FancyChip/utils/generateSpacings.ts new file mode 100644 index 000000000..d5748e10e --- /dev/null +++ b/src/components/templates/FancyChip/utils/generateSpacings.ts @@ -0,0 +1,50 @@ +import { css } from 'styled-components'; +import { themeStore } from '@/design/theme/themeStore'; +import { TComponentSizes } from '@/interface/TComponentSizes'; + +export type TSpacingPosition = 'left' | 'right' | 'booth'; + +const getSpacingFromTheme = themeStore.getState().theme.spacing; +const sizesSettings = { + sm: { + padding: getSpacingFromTheme.xs, + paddingRight: getSpacingFromTheme.xxs, + paddingLeft: getSpacingFromTheme.xs, + }, + md: { + padding: getSpacingFromTheme.xs, + paddingRight: getSpacingFromTheme.xs, + paddingLeft: getSpacingFromTheme.sm, + }, + lg: { + padding: getSpacingFromTheme.sm, + paddingRight: getSpacingFromTheme.sm, + paddingLeft: getSpacingFromTheme.xs, + }, +}; + +// Define a function to generate the spacing based on the spacing position +interface IGenerateSpacing { + spacingPosition?: TSpacingPosition; + size?: TComponentSizes; +} +export const generateSpacing = ({ spacingPosition, size }: IGenerateSpacing) => { + const pickedSize = size ? size : 'md'; + + switch (spacingPosition) { + case 'left': + return css` + padding-left: ${parseFloat(sizesSettings[pickedSize].paddingLeft) + 'px'}; + `; + case 'right': + return css` + padding-right: ${parseFloat(sizesSettings[pickedSize].paddingRight) + 'px'}; + `; + case 'booth': + return css` + padding: 0 ${parseFloat(sizesSettings[pickedSize].padding) + 'px'}; + `; + default: + return null; + } +}; diff --git a/src/components/templates/FancyFlexBox/FancyFlexBox.mdx b/src/components/templates/FancyFlexBox/FancyFlexBox.mdx index c67b869e5..82dae4330 100644 --- a/src/components/templates/FancyFlexBox/FancyFlexBox.mdx +++ b/src/components/templates/FancyFlexBox/FancyFlexBox.mdx @@ -7,12 +7,13 @@ FancyFlexBox is a versatile layout component that utilizes the power of CSS flex The component accepts the following props: - `children`: ReactNode - The child elements you want to display inside the flex container. -- `inline`: boolean - If true, the container will use inline-flex instead of flex. +- `as`: React.ElementType like 'ul' 'li' ... - If its provided the wrapper becomes this element for better semantic. - `separator`: ReactNode - An optional separator to be placed between each child element. - `flexAlign`: string - Aligns items along the cross axis. Defaults to 'flex-start'. - `flexDirection`: string - Specifies the direction of the flex items. Defaults to 'row'. - `flexJustify`: string - Justifies content along the main axis. Defaults to 'flex-start'. - `gap`: string/number - The gap between each child element, defaults to theme's xxs spacing. +- `fitBox` : boolean - If true, the flex container will take up all the available space width 100% and height 100%. Defaults to false. ## Usage diff --git a/src/components/templates/FancyFlexBox/FancyFlexBox.model.ts b/src/components/templates/FancyFlexBox/FancyFlexBox.model.ts index fef0a5f4c..a9b9f98fc 100644 --- a/src/components/templates/FancyFlexBox/FancyFlexBox.model.ts +++ b/src/components/templates/FancyFlexBox/FancyFlexBox.model.ts @@ -1,12 +1,22 @@ +import React from 'react'; +import { CSSProp } from 'styled-components'; + +// Define the style props 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'; + externalStyle?: CSSProp; gap?: string; }; -export type FancyFlexBoxProps = { - children?: React.ReactNode; +// Props specific to FancyFlexBox +export type TFancyFlexBoxProps = { separator?: React.ReactNode; - inline?: boolean; + fitBox?: boolean; } & TStyleProps; + +// Props for dynamic element type +export type TDynamicElementProps = { + as?: T; +} & Omit, 'as'>; diff --git a/src/components/templates/FancyFlexBox/FancyFlexBox.style.tsx b/src/components/templates/FancyFlexBox/FancyFlexBox.style.tsx index 3a1c0f797..2e3d7711a 100644 --- a/src/components/templates/FancyFlexBox/FancyFlexBox.style.tsx +++ b/src/components/templates/FancyFlexBox/FancyFlexBox.style.tsx @@ -1,11 +1,10 @@ import { styled, css } from 'styled-components'; import { TStyleProps } from './FancyFlexBox.model'; -import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; -import { TTheme } from '@/interface/TTheme'; +import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model'; -const generateFlexSytles = (props: TStyledFlexBoxProps & { theme?: TTheme }) => { - const { $flexDirection, $flexJustify, $flexAlign, $gap, theme } = props; +const generateFlexSytles = (props: TStyledFlexBoxProps) => { + const { $flexDirection, $flexJustify, $flexAlign, $gap } = props; return css` display: flex; @@ -13,15 +12,14 @@ const generateFlexSytles = (props: TStyledFlexBoxProps & { theme?: TTheme }) => flex-direction: ${$flexDirection ?? 'row'}; justify-content: ${$flexJustify ?? 'flex-start'}; align-items: ${$flexAlign ?? 'flex-start'}; - gap: ${$gap ?? theme!.spacing.xxs}; + gap: ${$gap}; `; }; -type TStyledFlexBoxProps = IStyledPrefixAndPicker; -export const StyledFlexBox = styled.div` - ${(props: TStyledFlexBoxProps) => generateFlexSytles({ ...props })} -`; - -export const StyledInlineFlexBox = styled.span` +type TStyledFlexBoxProps = IStyledPrefixAndOmitter; +export const StyledFlexBox = styled.div` + padding: 0; + margin: 0; ${(props: TStyledFlexBoxProps) => generateFlexSytles({ ...props })} + ${({ $externalStyle }) => $externalStyle} `; diff --git a/src/components/templates/FancyFlexBox/FancyFlexBox.tsx b/src/components/templates/FancyFlexBox/FancyFlexBox.tsx index b8272141f..bde31506d 100644 --- a/src/components/templates/FancyFlexBox/FancyFlexBox.tsx +++ b/src/components/templates/FancyFlexBox/FancyFlexBox.tsx @@ -1,21 +1,21 @@ import React from 'react'; +import { css } from 'styled-components'; -import { FancyFlexBoxProps } from './FancyFlexBox.model'; -import { StyledFlexBox, StyledInlineFlexBox } from './FancyFlexBox.style'; +import { TFancyFlexBoxProps, TDynamicElementProps } from './FancyFlexBox.model'; +import { StyledFlexBox } 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; +export type TFancyFlexBox = TDynamicElementProps & TFancyFlexBoxProps; +export default function FancyFlexBox(props: TFancyFlexBox) { + const { children, separator, externalStyle, flexAlign, flexDirection, flexJustify, fitBox, gap, as, ...htmlElProps } = + props; // Modify the children components to include a separator if specified. const modifiedChilds = separator ? React.Children.map(children, (child, index) => { - if (index === 0) return child; + if (index === 0) return child as React.ReactElement; return ( <> {separator} @@ -27,13 +27,22 @@ export default function FancyFlexBox(props: FancyFlexBoxProps) { // Render the flexbox container with the modified children components and flex alignment props. return ( - {modifiedChilds} - + ); } diff --git a/src/components/templates/FancyGrid/FancyGrid.mdx b/src/components/templates/FancyGrid/FancyGrid.mdx index 3298cc498..451f3e3cc 100644 --- a/src/components/templates/FancyGrid/FancyGrid.mdx +++ b/src/components/templates/FancyGrid/FancyGrid.mdx @@ -1,31 +1,28 @@ # 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. +`FancyGrid` is a responsive and customizable grid layout component for React applications, designed to arrange content in a structured and adaptable grid pattern. It uses styled-components for enhanced styling capabilities. ## Usage ### FancyGrid Container -The `FancyGrid` container establishes the grid layout. +`FancyGrid` serves as the container for grid items, defining the overall grid structure. **Props**: -- `grid`: Specifies the number of columns in the grid (e.g., 12). -- `space`: Sets the spacing between grid items (e.g., "2px"). +- `grid`: (Optional) Number of columns in the grid (e.g., 12 for a standard layout). +- `gap`: (Optional) Space between grid items. +- `breakpoints`: (Optional) Array of custom breakpoint objects for responsive adjustments. -**Example**: +**Example with Default Settings**: ```jsx import FancyGrid from './FancyGrid'; const MyComponent = () => { return ( - - {/* Grid items will be placed here */} + + {/* Place grid items here */} ); }; @@ -33,32 +30,56 @@ const MyComponent = () => { ### FancyGrid.Item -`FancyGrid.Item` represents individual items within the `FancyGrid`. +`FancyGrid.Item` is used within `FancyGrid` to define individual grid items. **Props**: -- `gridSpace`: Determines the number of columns the item should span. +- `gridSpace`: Number of columns the item spans. +- `breakpoints`: (Optional) Custom responsive breakpoints for the item. -**Example**: +**Basic 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 */} - +import FancyGrid, { FancyGridItem } from './FancyGrid'; + +const MyComponent = () => { + return ( + + {/* Content for the first item */} + {/* Content for the second item */} + {/* More items... */} + + ); +}; ``` -## Responsive Design +### Responsive Design with Breakpoints -`FancyGrid` supports responsive design. You can specify different `gridSpace` values for different screen sizes to ensure your layout adapts to various devices. +`FancyGrid` and `FancyGrid.Item` can be configured with custom breakpoints for responsive layouts. -## Customization +**Example with Breakpoints**: -You can customize the `FancyGrid` and `FancyGrid.Item` by passing additional styling props or by extending the styled components to fit your design requirements. +```jsx +import FancyGrid, { FancyGridItem } from './FancyGrid'; ---- +const MyComponent = () => { + const gridBreakpoints = [{ breakpoint: '768px', gridSize: 4, gap: '5px' }]; + + const itemBreakpoints = [{ breakpoint: '768px', gridSize: 1 }]; + + return ( + + + {/* Content for an item */} + + {/* Additional items... */} + + ); +}; +``` + +In this example, the grid changes to 4 columns with a 5px gap on screens smaller than 768px. Each `FancyGridItem` will span a single column on these screens, adapting to the mobile view. + +## Customization -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. +`FancyGrid` and `FancyGrid.Item` offer extensive customization options, including grid properties, spacing, and responsive behavior. Apply custom styles using styled-component props or by extending existing styled components. diff --git a/src/components/templates/FancyGrid/FancyGrid.stories.tsx b/src/components/templates/FancyGrid/FancyGrid.stories.tsx index 65e0c87b9..0cffa0e38 100644 --- a/src/components/templates/FancyGrid/FancyGrid.stories.tsx +++ b/src/components/templates/FancyGrid/FancyGrid.stories.tsx @@ -31,6 +31,13 @@ const meta = { type: 'text', }, }, + breakpoints: { + description: 'The breakpoints for the grid', + defaultValue: [], + control: { + type: 'object', + }, + }, }, } satisfies Meta; @@ -66,5 +73,6 @@ export const Primary: Story = { args: { grid: 12, gap: '12px', + breakpoints: [{ breakpoint: '500px', gridSize: 6 }], }, }; diff --git a/src/components/templates/FancyGrid/FancyGrid.tsx b/src/components/templates/FancyGrid/FancyGrid.tsx index bf96fbf02..6ec7a8e24 100644 --- a/src/components/templates/FancyGrid/FancyGrid.tsx +++ b/src/components/templates/FancyGrid/FancyGrid.tsx @@ -1,22 +1,34 @@ // FancyGrid.tsx import React from 'react'; -import { styled } from 'styled-components'; +import { CSSProp, css, styled } from 'styled-components'; import FancyGridItem from './FancyGridItem/FancyGridItem'; import IStyledPrefixAndOmitter from '@/interface/IStyledPrefixAndOmiter.model'; +export interface ICustomBreakpoint { + breakpoint: string; // Breakpoint-Größe, z.B. '768px' + gridSize: number; // Anzahl der Spalten für diesen Breakpoint + gap?: string; // Optional: Angepasster Gap für diesen Breakpoint +} + +type TDynamicElementProps = { + as?: T; +} & Omit, 'as'>; + interface FancyGridProps { grid?: number; gap?: string; children?: React.ReactNode; + externalStyle?: CSSProp; + breakpoints?: ICustomBreakpoint[]; } // --------------------------------------------------------------------------- // // ------- The FancyGrid to allocate the grid and give the items space ------- // // --------------------------------------------------------------------------- // -function FancyGrid(props: FancyGridProps) { - const { children, grid = 12, gap } = props; +function FancyGrid(props: TDynamicElementProps & FancyGridProps) { + const { children, grid = 12, gap, as, breakpoints, externalStyle } = props; return ( - + {children} ); @@ -29,9 +41,23 @@ export default FancyGrid; // ------------------------------------------- // // ------- The style for the component ------- // // ------------------------------------------- // -const GridContainer = styled.div>` + +type TFancyGridProps = IStyledPrefixAndOmitter; +const GridContainer = styled.div` display: grid; width: 100%; grid-template-columns: repeat(${(props) => props.$grid}, 1fr); grid-gap: ${(props) => props.$gap}; + ${({ $externalStyle }) => $externalStyle} + + ${({ $breakpoints }) => + $breakpoints && + $breakpoints.map( + (breakpoint) => css` + @media (min-width: ${breakpoint.breakpoint}) { + grid-template-columns: repeat(${breakpoint.gridSize}, 1fr); + ${breakpoint.gap ? `grid-gap: ${breakpoint.gap};` : ''} + } + ` + )} `; diff --git a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.mdx b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.mdx index 3c97099fa..1710ccd0e 100644 --- a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.mdx +++ b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.mdx @@ -1,46 +1,58 @@ # 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. +`FancyGrid.Item` is a subcomponent of the `FancyGrid` component, designed for creating and managing individual items within the `FancyGrid` layout in React applications. It leverages styled-components for styling and is built to support responsive and flexible item placements 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. +Before using `FancyGrid.Item`, ensure that `FancyGrid` is already set up in your project, as `FancyGrid.Item` is an integral part of it. Also, confirm that React, TypeScript, and styled-components are installed in your project environment. ## Usage ### Basic Use of FancyGrid.Item -`FancyGrid.Item` is used within the `FancyGrid` container and requires the `FancyGrid` component to be properly functioning. +`FancyGrid.Item` is meant to be used within the `FancyGrid` container. It requires the `FancyGrid` component to be properly functioning. **Props**: -- `gridSpace`: Specifies the number of columns the item should span within the grid. +- `gridSpace`: Defines the number of columns that the item will span within the grid. It's a number indicating the fraction of the grid occupied by the item. +- `breakpoints`: (Optional) An array of custom breakpoint objects, allowing responsive adjustments at specified screen sizes. **Example**: ```jsx import FancyGrid from './FancyGrid'; +import FancyGridItem from './FancyGridItem'; const MyComponent = () => { return ( - - {/* Content for a half-width item */} - {/* Content for another half-width item */} + + {/* 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). +In this example, each `FancyGridItem` spans half the width of the grid, taking up 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. +`FancyGrid.Item` supports responsive design by allowing you to specify custom breakpoints. These breakpoints adjust the `gridSpace` dynamically based on the screen width. -### Customization +**Example with Breakpoints**: + +```jsx +const itemBreakpoints = [ + { breakpoint: '768px', gridSize: 1 }, // At screens smaller than 768px, the item takes one column. +]; -`FancyGrid.Item` can be customized further by passing additional styling props or by extending its styled component for more specific design needs. + + {/* Content */} +; +``` + +In this example, the item will span 3 columns by default, but on screens smaller than 768px, it will take up only 1 column, adapting to a mobile view. ---- +### Customization -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. +`FancyGrid.Item` can be customized further through styled-components. You can pass additional styling properties or extend its styled component for more specific design needs. This allows for a high degree of customization and flexibility in design. diff --git a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx index 232941591..a0e35f4ac 100644 --- a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx +++ b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.stories.tsx @@ -24,6 +24,13 @@ const meta = { type: 'number', }, }, + breakpoints: { + description: 'The breakpoints for the grid', + defaultValue: [], + control: { + type: 'object', + }, + }, }, } satisfies Meta; @@ -41,5 +48,6 @@ export const Primary: Story = { ), args: { gridSpace: 6, + breakpoints: [{ breakpoint: '500px', gridSize: 6 }], }, }; diff --git a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx index 2b3bec0ed..3e9d12e1d 100644 --- a/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx +++ b/src/components/templates/FancyGrid/FancyGridItem/FancyGridItem.tsx @@ -1,19 +1,53 @@ -import { styled } from 'styled-components'; -import IStyledPrefixAndPicker from '../../../../interface/IStyledPrefixAndPicker.model'; +import React from 'react'; -interface FancyGridItemProps { +import { CSSProp, css, styled } from 'styled-components'; + +import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; +import { FancyFlexBox } from '@/components/templates/FancyFlexBox'; +import { ICustomBreakpoint } from '@/components/templates/FancyGrid/FancyGrid'; +import { TFancyFlexBox } from '@/components/templates/FancyFlexBox/FancyFlexBox'; + +type TDynamicElementProps = { + as?: T; +} & Omit, 'as'>; + +type FancyGridItemProps = { gridSpace: number; children?: React.ReactNode; + breakpoints?: ICustomBreakpoint[]; + externalStyle?: CSSProp; +}; +// --------------------------------------------------------------------------- // +// ------------ The FancyGrid Item to get the space for the item - ----------- // +// --------------------------------------------------------------------------- // +export default function FancyGridItem( + props: TDynamicElementProps & FancyGridItemProps +) { + const { gridSpace, children, breakpoints, as } = props; + + return ( + + {children} + + ); } -type TGirdItemProps = IStyledPrefixAndPicker; -const GridItem = styled.div` +type TGirdItemProps = IStyledPrefixAndPicker; +const GridItem = styled.div` grid-column: span ${({ $gridSpace }) => $gridSpace}; + min-height: 0; + + // Media Queries basierend auf benutzerdefinierten Breakpoints + ${({ $breakpoints }) => + $breakpoints && + $breakpoints.map( + (breakpoint) => css` + @media (${breakpoint.breakpoint}) { + grid-column: span ${breakpoint.gridSize}; + } + ` + )} + ${({ $externalStyle }) => $externalStyle} `; -// --------------------------------------------------------------------------- // -// ------------ The FancyGrid Item to get the space for the item - ----------- // -// --------------------------------------------------------------------------- // -export default function FancyGridItem({ children, gridSpace }: FancyGridItemProps) { - return {children}; -} +FancyGridItem.FlexBox = (props: TFancyFlexBox) => ; diff --git a/src/components/templates/FancyHandyNav/FancyHandyNav.tsx b/src/components/templates/FancyHandyNav/FancyHandyNav.tsx index 6aa838eef..ee7a751b6 100644 --- a/src/components/templates/FancyHandyNav/FancyHandyNav.tsx +++ b/src/components/templates/FancyHandyNav/FancyHandyNav.tsx @@ -27,7 +27,8 @@ interface IFancyHandyNav { // ---------- A handyNavBar that can dynamicly generated via objects---------- // // --------------------------------------------------------------------------- // export default function FancyHandyNav(props: IFancyHandyNav) { - const { items, isVisible, wichIndexIsActive, themeType, themeTypeIcons, themeTypeSwitchList, layer, externalStyle } = props; + 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); @@ -61,7 +62,13 @@ export default function FancyHandyNav(props: IFancyHandyNav) { `} > {/* The List with the items */} - + {items?.map((item, index) => ( {icon && {icon}} {title && {title}} - {description && {description}} + {description && ( + {description} + )} ); diff --git a/src/components/templates/FancyInfoCard/sizeSettings.ts b/src/components/templates/FancyInfoCard/sizeSettings.ts index f7ae2956f..b4371dac8 100644 --- a/src/components/templates/FancyInfoCard/sizeSettings.ts +++ b/src/components/templates/FancyInfoCard/sizeSettings.ts @@ -1,14 +1,14 @@ -import { TSizes } from '@/interface/TComponentSizes'; +import { TComponentSizes } from '@/interface/TComponentSizes'; import { TTypography } from '@/interface/TTypography'; type TSizeObj = { - iconSize: TSizes; + iconSize: TComponentSizes; title: TTypography; descriptionSize: TTypography; }; type TSizesObject = { - [K in TSizes]: TSizeObj; + [K in TComponentSizes]: TSizeObj; }; // the template for the sizes diff --git a/src/components/templates/FancyMenueComponent/FancyMenu/index.ts b/src/components/templates/FancyMenueComponent/FancyMenu/index.ts index 130e6328a..a503726b0 100644 --- a/src/components/templates/FancyMenueComponent/FancyMenu/index.ts +++ b/src/components/templates/FancyMenueComponent/FancyMenu/index.ts @@ -1 +1 @@ -export { default as FancyMenuList } from './FancyMenu'; +export { default as FancyMenu } from './FancyMenu'; diff --git a/src/components/templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx b/src/components/templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx index bff8a7a1c..ec487b679 100644 --- a/src/components/templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx +++ b/src/components/templates/FancyMenueComponent/FancyMenuItem/FancyMenuItem.tsx @@ -15,8 +15,8 @@ export default function FancyMenuItem(props: TFancyMenueItemProps) { return ( - {label} - {icon} + {label && {label}} + {icon && {icon}} ); diff --git a/src/components/templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx b/src/components/templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx index a6a31796e..07c5b0e48 100644 --- a/src/components/templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx +++ b/src/components/templates/Inputs/FancyDateDropDown/FancyDateDropDown.tsx @@ -1,4 +1,6 @@ -import FancyDropDownSelect, { IFancyDropDownSelect } from '@/components/organisms/FancyDropDownSelect/FancyDropDownSelect'; +import FancyDropDownSelect, { + IFancyDropDownSelect, +} from '@/components/organisms/FancyDropDownSelect/FancyDropDownSelect'; import generateYearZone from '@/utils/functions/generateFunctions/generateYearZone'; import generateMonthNames from '@/utils/functions/generateFunctions/generateMonthNames'; import generateDayNumbers from '@/utils/functions/generateFunctions/generateDayNumbers'; diff --git a/src/design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment.ts b/src/design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment.ts index 2a8972d3e..5f82e9f5e 100644 --- a/src/design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment.ts +++ b/src/design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment.ts @@ -1,7 +1,7 @@ import { css } from 'styled-components'; import themeStore from '@/design/theme/themeStore/themeStore'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; export interface IAlignments { $alignHorizontal?: 'left' | 'center' | 'right'; $alignVertical?: 'top' | 'center' | 'bottom'; diff --git a/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts b/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts index df6401b61..e24cec1af 100644 --- a/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts +++ b/src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.ts @@ -85,7 +85,14 @@ type IGetColorForComponent = { }; // Define the getColorsForComponent function -export function getColorsForComponent({ theme, $themeType, $customColor, $customTextColor, $layer, $textLayer }: IGetColorForComponent) { +export function getColorsForComponent({ + theme, + $themeType, + $customColor, + $customTextColor, + $layer, + $textLayer, +}: IGetColorForComponent) { // Get the background color and text color using the getBackgroundColor and getTextColor functions const backgroundColor = getBackgroundColor({ theme, $themeType, $customColor, $layer }); const textColor = getTextColor({ theme, $themeType, $customTextColor, $textLayer, turnColorTheme: true }); diff --git a/src/design/designFunctions/edgeCalculation/edgeCalculation.ts b/src/design/designFunctions/edgeCalculation/edgeCalculation.ts index 4eb407856..f000c2ee4 100644 --- a/src/design/designFunctions/edgeCalculation/edgeCalculation.ts +++ b/src/design/designFunctions/edgeCalculation/edgeCalculation.ts @@ -1,5 +1,5 @@ import { borderRadius } from '../../theme/designSizes'; -import { TBorderRadiusSizes } from '../../../interface/TBorderRadius'; +import { TBorderRadiusSizes } from '../../../interface/TBorderRadiusSizes'; // the edge can be a string, number or TBorderRadiusSizes type TEdge = TBorderRadiusSizes | string | number; diff --git a/src/design/designFunctions/focusStyle/focusStyle.ts b/src/design/designFunctions/focusStyle/focusStyle.ts new file mode 100644 index 000000000..501b11b61 --- /dev/null +++ b/src/design/designFunctions/focusStyle/focusStyle.ts @@ -0,0 +1,9 @@ +import { TTheme } from '@/interface/TTheme'; + +import { css } from 'styled-components'; + +const focusStyle = css<{ theme: TTheme }>` + box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.accent[0]}; +`; + +export default focusStyle; diff --git a/src/design/designFunctions/focusStyle/index.ts b/src/design/designFunctions/focusStyle/index.ts new file mode 100644 index 000000000..efc0e467a --- /dev/null +++ b/src/design/designFunctions/focusStyle/index.ts @@ -0,0 +1 @@ +export { default as focusStyle } from './focusStyle'; diff --git a/src/design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts b/src/design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts index 8e1bc19df..f811030f7 100644 --- a/src/design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts +++ b/src/design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts @@ -1,7 +1,7 @@ import { css } from 'styled-components'; import themeStore from '@/design/theme/themeStore/themeStore'; -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; export const generateBorderRadiusForComponent = (size?: 'sm' | 'md' | 'lg', rounded?: TBorderRadiusSizes) => { const borderRadius = themeStore.getState().theme.borderRadius; @@ -23,7 +23,7 @@ export const generateBorderRadiusForComponent = (size?: 'sm' | 'md' | 'lg', roun `; case 'lg': return css` - border-radius: ${borderRadius.lg}; + border-radius: ${borderRadius.xl}; `; default: return css``; diff --git a/src/design/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts b/src/design/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts index b80a89b48..7eda7d47b 100644 --- a/src/design/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts +++ b/src/design/designFunctions/generateItemTheme/IGenerateThemeItemProps.model.ts @@ -1,4 +1,4 @@ -import { TBorderRadiusSizes } from '@/interface/TBorderRadius'; +import { TBorderRadiusSizes } from '@/interface/TBorderRadiusSizes'; import { TThemeTypes } from '@/interface/TThemeTypes'; import { TLayer } from '@/interface/TLayer'; import IStyledPrefixAndOmiter from '../../../interface/IStyledPrefixAndOmiter.model'; diff --git a/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts b/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts index 6e3d52010..8d2495e74 100644 --- a/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts +++ b/src/design/designFunctions/generateItemTheme/utils/generateOutlinedStyle.ts @@ -8,7 +8,10 @@ import { generatePadding } from '@/design/designFunctions/generatePaddingForComp import { calcTextColor } from './calcTextColor'; //-----this funktion generates a button that looks like a $outlined button-----// -type IGenerateOutlinedItem = Pick; +type IGenerateOutlinedItem = Pick< + IGenerateThemeItem, + '$themeType' | '$textColor' | '$size' | '$label' | '$outlined' | '$layer' +>; export const generateOutlined = (props: IGenerateOutlinedItem) => { const { $themeType, $textColor, $size, $label, $outlined, $layer } = props; const theme = themeStore.getState().theme; diff --git a/src/design/designFunctions/generatePaddingForComponent/generatePadding.ts b/src/design/designFunctions/generatePaddingForComponent/generatePadding.ts index a8e055e17..377be76e0 100644 --- a/src/design/designFunctions/generatePaddingForComponent/generatePadding.ts +++ b/src/design/designFunctions/generatePaddingForComponent/generatePadding.ts @@ -4,15 +4,15 @@ export function generatePadding(offsetPx?: number, spacingLeftRightx2?: boolean) const offset = offsetPx ? offsetPx : 0; const getSpacingFromTheme = themeStore.getState().theme.spacing; - const small = - `${parseFloat(getSpacingFromTheme.xs) * 1.75 + offset}px` + - (spacingLeftRightx2 ? ` ${parseFloat(getSpacingFromTheme.xs) * 3.5 + offset}px` : ''); + const sm = + `${parseFloat(getSpacingFromTheme.xs) + offset}px` + + (spacingLeftRightx2 ? ` ${parseFloat(getSpacingFromTheme.xs) * 2 + offset}px` : ''); const md = - `${parseFloat(getSpacingFromTheme.sm) * 1.25 + offset}px` + - (spacingLeftRightx2 ? ` ${parseFloat(getSpacingFromTheme.sm) * 2.5 + offset}px` : ''); + `${parseFloat(getSpacingFromTheme.sm) + offset}px` + + (spacingLeftRightx2 ? ` ${parseFloat(getSpacingFromTheme.sm) * 2 + offset}px` : ''); const lg = - `${parseFloat(getSpacingFromTheme.sm) * 1.5 + offset}px` + + `${parseFloat(getSpacingFromTheme.md) + offset}px` + (spacingLeftRightx2 ? ` ${parseFloat(getSpacingFromTheme.md) * 2 + offset}px` : ''); - return { sm: small, md: md, lg: lg }; + return { sm, md, lg }; } diff --git a/src/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts b/src/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts index 04d9ed043..d4f4a483c 100644 --- a/src/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts +++ b/src/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponent.ts @@ -7,7 +7,9 @@ import { getSimpleColorThemeType } from '@/design/designFunctions/getSimpleColor import IStyledPrefixAndPicker from '@/interface/IStyledPrefixAndPicker.model'; import { TTheme } from '@/interface/TTheme'; -export type IGenerateThemeDesignForComponent = IStyledPrefixAndPicker & { theme: TTheme }; +export type IGenerateThemeDesignForComponent = IStyledPrefixAndPicker & { + theme: TTheme; +}; // --------------------------------------------------------------------------- // // ------- The main function to generate a style for the components -- ------ // // --------------------------------------------------------------------------- // @@ -25,10 +27,21 @@ export default function generateThemeDesignForComponent(props: IGenerateThemeDes $textHover, } = props; - const calcTextColor = $useSimpleTextColor ? ($textColor ? $textColor : getSimpleColorThemeType($themeType)) : $textColor; + const calcTextColor = $useSimpleTextColor + ? $textColor + ? $textColor + : getSimpleColorThemeType($themeType) + : $textColor; if ($themeType === 'transparent') { - return generateTransparentStyle({ theme, $backgroundState, $hoverColor, $layer, $textColor: calcTextColor, $textHover }); + return generateTransparentStyle({ + theme, + $backgroundState, + $hoverColor, + $layer, + $textColor: calcTextColor, + $textHover, + }); } else if ($outlined) { return generateOutlineStyle({ $themeType, diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts index 7f6879e03..75bf08a55 100644 --- a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts +++ b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateHoverActiveColor.ts @@ -24,7 +24,15 @@ const generateHoverColor = (props: TGenerateOutlinedHoverStyle) => { type TGenerateStateStyle = Pick< IGenerateThemeDesignForComponent, - '$themeType' | 'theme' | '$layer' | '$backgroundStrength' | '$hoverColor' | '$backgroundState' | '$outlined' | '$textHover' | '$textColor' + | '$themeType' + | 'theme' + | '$layer' + | '$backgroundStrength' + | '$hoverColor' + | '$backgroundState' + | '$outlined' + | '$textHover' + | '$textColor' >; // --------------------------------------------------------------------------- // // ---------- this function handles wich style should apply ------------------ // diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts index 238163076..b1a68310e 100644 --- a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts +++ b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts @@ -5,7 +5,14 @@ import { generateStateStyle } from './generateHoverActiveColor'; type TGenerateOutlineStyle = Pick< IGenerateThemeDesignForComponent, - '$outlined' | '$themeType' | 'theme' | '$layer' | '$backgroundStrength' | '$backgroundState' | '$hoverColor' | '$textColor' + | '$outlined' + | '$themeType' + | 'theme' + | '$layer' + | '$backgroundStrength' + | '$backgroundState' + | '$hoverColor' + | '$textColor' >; // --------------------------------------------------------------------------- // // ------- Generates the style for a outlined box or other compoent ---------- // diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts index bacc43640..534004f2a 100644 --- a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts +++ b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts @@ -5,7 +5,9 @@ import { IGenerateThemeDesignForComponent } from '../generateThemeDesignForCompo // --------------------------------------------------------------------------- // // ------------- generate the text color for the components ----------------- // // --------------------------------------------------------------------------- // -export const generateTextColor = (props: Pick) => { +export const generateTextColor = ( + props: Pick +) => { const { $themeType, $textColor, $layer } = props; const theme = themeStore.getState().theme; diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts index c229ef889..c6466fc82 100644 --- a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts +++ b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts @@ -6,7 +6,14 @@ import { generateTextColor } from './generateTextColor'; type TGenerateTransparentStyle = Pick< IGenerateThemeDesignForComponent, - '$outlined' | 'theme' | '$layer' | '$backgroundStrength' | '$backgroundState' | '$hoverColor' | '$textColor' | '$textHover' + | '$outlined' + | 'theme' + | '$layer' + | '$backgroundStrength' + | '$backgroundState' + | '$hoverColor' + | '$textColor' + | '$textHover' >; // --------------------------------------------------------------------------- // // ---------- generates a transparent background ---------- // @@ -18,6 +25,7 @@ export const generateTransparentStyle = (props: TGenerateTransparentStyle) => { color: ${generateTextColor({ $layer, $themeType: $textColor })}; ${$backgroundState !== 'active' && 'background-color: transparent'}; /* This generate the hover / active style if its needed */ - ${$backgroundState && generateStateStyle({ ...props, $backgroundStrength, $textHover: $textHover, $textColor: $textColor })} + ${$backgroundState && + generateStateStyle({ ...props, $backgroundStrength, $textHover: $textHover, $textColor: $textColor })} `; }; diff --git a/src/design/designFunctions/getBorderRadiusViaSize/getBorderRadiusViaSize.ts b/src/design/designFunctions/getBorderRadiusViaSize/getBorderRadiusViaSize.ts new file mode 100644 index 000000000..f3fd2d32c --- /dev/null +++ b/src/design/designFunctions/getBorderRadiusViaSize/getBorderRadiusViaSize.ts @@ -0,0 +1,17 @@ +import { TComponentSizes } from '@/interface/TComponentSizes'; + +export type TgetBorderRadiusViaSize = TComponentSizes | 'complete'; +export const getBorderRadiusViaSize = (borderRadius: TgetBorderRadiusViaSize) => { + switch (borderRadius) { + case 'sm': + return '10%'; + case 'md': + return '20%'; + case 'lg': + return '30%'; + case 'complete': + return '50%'; + default: + return ''; + } +}; diff --git a/src/design/designFunctions/getBorderRadiusViaSize/index.ts b/src/design/designFunctions/getBorderRadiusViaSize/index.ts new file mode 100644 index 000000000..36570623f --- /dev/null +++ b/src/design/designFunctions/getBorderRadiusViaSize/index.ts @@ -0,0 +1,2 @@ +export { getBorderRadiusViaSize } from './getBorderRadiusViaSize'; +export type { TgetBorderRadiusViaSize } from './getBorderRadiusViaSize'; diff --git a/src/design/theme/brakePoints.ts b/src/design/theme/brakePoints.ts index 65be88c55..e4ab5ea16 100644 --- a/src/design/theme/brakePoints.ts +++ b/src/design/theme/brakePoints.ts @@ -1,6 +1,6 @@ export const breakpoints = { - sm: 'screen and (max-width: 576px)', - md: 'screen and (max-width: 768px)', - lg: 'screen and (max-width: 992px)', - xl: 'screen and (max-width: 1200px)', + sm: 'screen and (min-width: 576px)', + md: 'screen and (min-width: 768px)', + lg: 'screen and (min-width: 992px)', + xl: 'screen and (min-width: 1200px)', }; diff --git a/src/design/theme/designSizes.ts b/src/design/theme/designSizes.ts index 01286132a..47d8c325d 100644 --- a/src/design/theme/designSizes.ts +++ b/src/design/theme/designSizes.ts @@ -1,11 +1,11 @@ export const spacingPx = { - xxs: 2 + 'px', - xs: 4 + 'px', - sm: 8 + 'px', - md: 12 + 'px', - lg: 16 + 'px', - xl: 24 + 'px', - xxl: 32 + 'px', + xxs: 4 + 'px', + xs: 8 + 'px', + sm: 12 + 'px', + md: 16 + 'px', + lg: 24 + 'px', + xl: 32 + 'px', + xxl: 40 + 'px', }; export const fontSize = { @@ -57,11 +57,13 @@ export const fontSizes = { }; export const borderRadius = { - sm: '4px', + xxs: '2px', + xs: '4px', + sm: '6px', md: '8px', lg: '12px', - xl: '18px', - xxl: '24px', - xxxl: '48px', + xl: '16px', + xxl: '20px', + xxxl: '32px', complete: '50px', }; diff --git a/src/design/theme/generateColorSteps.ts b/src/design/theme/generateColorSteps.ts index 5d0d871fc..e6e888ace 100644 --- a/src/design/theme/generateColorSteps.ts +++ b/src/design/theme/generateColorSteps.ts @@ -29,7 +29,9 @@ function lightenColors({ pimaryColor, themeType, color }: IGenerateColorSteps) { const isPrimaryColorDark = Color(pimaryColor).isDark(); // if the color is dark, mirror the degreeSteps - const modifiedForBirigthnesDegreeSteps = !isPrimaryColorDark ? systemMessagesSteps : systemMessagesSteps.map((step) => -step); + const modifiedForBirigthnesDegreeSteps = !isPrimaryColorDark + ? systemMessagesSteps + : systemMessagesSteps.map((step) => -step); switch (themeType) { case 'primary': diff --git a/src/design/theme/globalSizes.ts b/src/design/theme/globalSizes.ts new file mode 100644 index 000000000..bedb2dc2e --- /dev/null +++ b/src/design/theme/globalSizes.ts @@ -0,0 +1,73 @@ +// - **XXS (Extra Extra Small)** +// - **Padding/Margin**: 4px (0.5x base unit) +// - **Font Size**: 10px or 12px +// - **Element Size**: 16px (e.g., small icons) + +// - **XS (Extra Small)** +// - **Padding/Margin**: 8px (1x base unit) +// - **Font Size**: 12px or 14px +// - **Element Size**: 24px (e.g., small buttons) + +// - **S (Small)** +// - **Padding/Margin**: 12px (1.5x base unit) +// - **Font Size**: 14px or 16px +// - **Element Size**: 32px (e.g., input fields) + +// - **M (Medium)** +// - **Padding/Margin**: 16px (2x base unit) +// - **Font Size**: 16px or 18px +// - **Element Size**: 40px (e.g., default buttons) + +// - **L (Large)** +// - **Padding/Margin**: 24px (3x base unit) +// - **Font Size**: 18px or 20px +// - **Element Size**: 48px (e.g., large buttons, spacious input fields) + +// - **XL (Extra Large)** +// - **Padding/Margin**: 32px (4x base unit) +// - **Font Size**: 20px or 24px +// - **Element Size**: 56px or more (e.g., primary call-to-action buttons) + +// - **XXL (Extra Extra Large)** +// - **Padding/Margin**: 40px (5x base unit) +// - **Font Size**: 24px or larger +// - **Element Size**: 64px or more (e.g., major screen elements, large icons) + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +const globalSizes = { + xxs: { + padding: '4px', + fontSize: '10px', + elementSize: '16px', + }, + xs: { + padding: '8px', + fontSize: '12px', + elementSize: '24px', + }, + sm: { + padding: '12px', + fontSize: '14px', + elementSize: '32px', + }, + md: { + padding: '16px', + fontSize: '16px', + elementSize: '40px', + }, + lg: { + padding: '24px', + fontSize: '18px', + elementSize: '48px', + }, + xl: { + padding: '32px', + fontSize: '20px', + elementSize: '56px', + }, + xxl: { + padding: '40px', + fontSize: '24px', + elementSize: '64px', + }, +}; diff --git a/src/interface/TBorderRadius.ts b/src/interface/TBorderRadiusSizes.ts similarity index 100% rename from src/interface/TBorderRadius.ts rename to src/interface/TBorderRadiusSizes.ts diff --git a/src/interface/TComponentSizes.ts b/src/interface/TComponentSizes.ts index d7f84ecc1..a89895c17 100644 --- a/src/interface/TComponentSizes.ts +++ b/src/interface/TComponentSizes.ts @@ -1 +1 @@ -export type TSizes = 'sm' | 'md' | 'lg'; +export type TComponentSizes = 'sm' | 'md' | 'lg'; diff --git a/src/interface/TTheme.ts b/src/interface/TTheme.ts index 0d53d7c7e..613d9ad39 100644 --- a/src/interface/TTheme.ts +++ b/src/interface/TTheme.ts @@ -1,5 +1,5 @@ import { TFontSizes } from './IFontSizes'; -import { TBorderRadiusSizes } from './TBorderRadius'; +import { TBorderRadiusSizes } from './TBorderRadiusSizes'; import { TUiColorsType } from './TUiColorsType'; import { TSpacings } from './TSpacings'; import { breakpoints } from '@/design/theme/brakePoints'; diff --git a/src/interface/index.ts b/src/interface/index.ts index d4ba42c73..d49acb351 100644 --- a/src/interface/index.ts +++ b/src/interface/index.ts @@ -2,7 +2,7 @@ export * from './IFontSizes'; export * from './IStatus'; export * from './IStyledPrefixAndOmiter.model'; export * from './IStyledPrefixAndPicker.model'; -export * from './TBorderRadius'; +export * from './TBorderRadiusSizes'; export * from './TComponentSizes'; export * from './TLayer'; export * from './TModalStatus'; diff --git a/src/utils/hooks/useSlider/IUseSlider.model.ts b/src/utils/hooks/useSlider/IUseSlider.model.ts index b4a2e99b9..790ad452f 100644 --- a/src/utils/hooks/useSlider/IUseSlider.model.ts +++ b/src/utils/hooks/useSlider/IUseSlider.model.ts @@ -11,7 +11,12 @@ export interface IUseSlider { 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; + 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 }; } @@ -24,6 +29,8 @@ export interface IUseSliderReturn { // eslint-disable-next-line @typescript-eslint/no-explicit-any sliderRef: React.MutableRefObject; markerPosition: IMarkerPosition; - handleInteractionStart: (event: React.MouseEvent | React.TouchEvent) => void; + handleInteractionStart: ( + event: React.MouseEvent | React.TouchEvent + ) => void; isInteracting: boolean; } diff --git a/src/utils/hooks/useSlider/useSilder.tsx b/src/utils/hooks/useSlider/useSilder.tsx index 56ed07471..15b924567 100644 --- a/src/utils/hooks/useSlider/useSilder.tsx +++ b/src/utils/hooks/useSlider/useSilder.tsx @@ -79,7 +79,9 @@ const useSlider = ({ const throttledHandleInteraction = useCallback(throttle(handleInteraction), [handleInteraction]); //handle the interaction start with the slider and the color area - const handleInteractionStart = (event: React.MouseEvent | React.TouchEvent) => { + const handleInteractionStart = ( + event: React.MouseEvent | React.TouchEvent + ) => { setIsInteracting(true); if (event.nativeEvent instanceof MouseEvent) { throttledHandleInteraction(event.nativeEvent.clientX, event.nativeEvent.clientY); @@ -140,8 +142,12 @@ const useSlider = ({ //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)); + + if (!color) + type === 'hue' + ? // eslint-disable-next-line react-hooks/exhaustive-deps + (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);