From 5e9328f392ff878f633738c69829a5054c1a55ca Mon Sep 17 00:00:00 2001 From: vargastat Date: Wed, 18 Sep 2024 18:38:52 +0200 Subject: [PATCH 1/8] feat: add areasPage work on going --- .../common/layout/stdTabs/StdTabItem.tsx | 75 ++++++ .../common/layout/stdTabs/StdTabList.tsx | 119 +++++++++ .../common/layout/stdTabs/StdTabs.tsx | 50 ++++ .../common/layout/stdTabs/tabClassBuilder.tsx | 137 ++++++++++ .../layout/stdTabs/tests/stdTabs.test.tsx | 240 ++++++++++++++++++ .../stdTabs/tests/tabClassBuilder.test.tsx | 170 +++++++++++++ src/components/common/layout/stdTabs/utils.ts | 20 ++ src/components/pegase/header/HeaderPage.tsx | 22 ++ src/hooks/common/useActiveKeyboard.ts | 52 ++++ src/pages/pegase/areas/AreasPage.tsx | 20 ++ .../pegase/areas/components/ContentPage.tsx | 25 ++ .../areas/components/TabDisplayArea.tsx | 16 ++ .../pegase/areas/components/TabSelection.tsx | 59 +++++ src/routes.tsx | 2 + src/shared/i18n/en.json | 3 +- src/shared/i18n/fr.json | 3 +- 16 files changed, 1011 insertions(+), 2 deletions(-) create mode 100644 src/components/common/layout/stdTabs/StdTabItem.tsx create mode 100644 src/components/common/layout/stdTabs/StdTabList.tsx create mode 100644 src/components/common/layout/stdTabs/StdTabs.tsx create mode 100644 src/components/common/layout/stdTabs/tabClassBuilder.tsx create mode 100644 src/components/common/layout/stdTabs/tests/stdTabs.test.tsx create mode 100644 src/components/common/layout/stdTabs/tests/tabClassBuilder.test.tsx create mode 100644 src/components/common/layout/stdTabs/utils.ts create mode 100644 src/components/pegase/header/HeaderPage.tsx create mode 100644 src/hooks/common/useActiveKeyboard.ts create mode 100644 src/pages/pegase/areas/AreasPage.tsx create mode 100644 src/pages/pegase/areas/components/ContentPage.tsx create mode 100644 src/pages/pegase/areas/components/TabDisplayArea.tsx create mode 100644 src/pages/pegase/areas/components/TabSelection.tsx diff --git a/src/components/common/layout/stdTabs/StdTabItem.tsx b/src/components/common/layout/stdTabs/StdTabItem.tsx new file mode 100644 index 0000000..96b76e5 --- /dev/null +++ b/src/components/common/layout/stdTabs/StdTabItem.tsx @@ -0,0 +1,75 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at https://mozilla.org/MPL/2.0/. + */ + +import useActiveKeyboard from '@/hooks/common/useActiveKeyboard'; +import { useStdId } from '@/hooks/common/useStdId'; +import { StdIconId } from '@/shared/utils/common/mappings/iconMaps'; +import { MouseEventHandler } from 'react'; +import StdButton from '../../base/stdButton/StdButton'; +import StdIcon from '../../base/stdIcon/StdIcon'; +import { tabItemClassBuilder } from './tabClassBuilder'; + +export type TabItemType = 'primary' | 'secondary'; + +export type StdTabItemProps = { + onClick: (selectedItemName: string) => void; + name: string; + tabType?: TabItemType; + id?: string; + label?: string; + icon?: StdIconId; + active?: boolean; + disabled?: boolean; + button?: { + icon: StdIconId; + onClick: MouseEventHandler; + }; + onDropdown?: MouseEventHandler; + secondary?: Omit[]; +}; + +const ICON_SIZE = 16; + +const StdTabItem = ({ + id: propsId, + tabType = 'primary', + label, + icon, + active, + disabled, + name, + onClick, + button, +}: StdTabItemProps) => { + const id = useStdId('tbi', propsId); + const [handlerKeyboardEvent, isActiveKeyboard] = useActiveKeyboard(() => onClick?.(name), { id }); + const { contentContainerClasses, borderClasses } = tabItemClassBuilder( + tabType, + isActiveKeyboard, + icon, + active, + disabled, + ); + + return ( +