From 599b9a74ff1d6d1b99fd5a3297022b4704562730 Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Thu, 6 Mar 2025 19:48:37 +0100 Subject: [PATCH] Templateify exported elements (WIP) --- .../ItemPopupComponents/index.tsx | 7 ++++++ src/Components/Map/index.tsx | 2 ++ .../Subcomponents/ProfileStartEndForm.tsx | 2 +- .../Subcomponents/ProfileStartEndView.tsx | 2 +- .../Profile/Subcomponents/ProfileTextView.tsx | 2 +- .../Profile/Templates/OnepagerView.tsx | 2 +- .../Profile/Templates/SimpleView.tsx | 2 +- src/Components/Profile/Templates/TabsForm.tsx | 2 +- src/Components/Profile/Templates/TabsView.tsx | 2 +- src/Components/Profile/index.tsx | 3 +-- .../TemplatePopupButton.tsx | 5 +--- .../templateComponents/Templateify.tsx | 12 +++------- .../Profile/templateComponents/index.tsx | 24 +++++++++++++++++++ src/Components/Templates/ItemCard.tsx | 2 +- .../Templates/OverlayItemsIndexPage.tsx | 2 +- 15 files changed, 47 insertions(+), 24 deletions(-) create mode 100644 src/Components/Map/Subcomponents/ItemPopupComponents/index.tsx create mode 100644 src/Components/Profile/templateComponents/index.tsx diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/index.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/index.tsx new file mode 100644 index 00000000..c60493ea --- /dev/null +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/index.tsx @@ -0,0 +1,7 @@ +export { PopupTextAreaInput } from './PopupTextAreaInput' +export { PopupStartEndInput } from './PopupStartEndInput' +export { PopupTextInput } from './PopupTextInput' +export { PopupCheckboxInput } from './PopupCheckboxInput' +export { TextView } from './TextView' +export { StartEndView } from './StartEndView' +export { PopupButton } from './PopupButton' diff --git a/src/Components/Map/index.tsx b/src/Components/Map/index.tsx index b1630142..0dbcc233 100644 --- a/src/Components/Map/index.tsx +++ b/src/Components/Map/index.tsx @@ -2,6 +2,7 @@ export { UtopiaMap } from './UtopiaMap' export * from './Layer' export { Tags } from './Tags' export * from './Permissions' +/* export { PopupTextAreaInput } from './Subcomponents/ItemPopupComponents/PopupTextAreaInput' export { PopupStartEndInput } from './Subcomponents/ItemPopupComponents/PopupStartEndInput' export { PopupTextInput } from './Subcomponents/ItemPopupComponents/PopupTextInput' @@ -9,3 +10,4 @@ export { PopupCheckboxInput } from './Subcomponents/ItemPopupComponents/PopupChe export { TextView } from './Subcomponents/ItemPopupComponents/TextView' export { StartEndView } from './Subcomponents/ItemPopupComponents/StartEndView' export { PopupButton } from './Subcomponents/ItemPopupComponents/PopupButton' +*/ diff --git a/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx b/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx index e5f67ffe..fa7d20c4 100644 --- a/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx +++ b/src/Components/Profile/Subcomponents/ProfileStartEndForm.tsx @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-unsafe-return */ -import { PopupStartEndInput } from '#components/Map' +import { PopupStartEndInput } from '#components/Map/Subcomponents/ItemPopupComponents' import type { Item } from '#types/Item' diff --git a/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx b/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx index d490d725..67ac93f3 100644 --- a/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx +++ b/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx @@ -1,4 +1,4 @@ -import { StartEndView } from '#components/Map' +import { StartEndView } from '#components/Map/Subcomponents/ItemPopupComponents' import type { Item } from '#types/Item' diff --git a/src/Components/Profile/Subcomponents/ProfileTextView.tsx b/src/Components/Profile/Subcomponents/ProfileTextView.tsx index df1d5e77..2adbb3e1 100644 --- a/src/Components/Profile/Subcomponents/ProfileTextView.tsx +++ b/src/Components/Profile/Subcomponents/ProfileTextView.tsx @@ -1,6 +1,6 @@ import { get } from 'radash' -import { TextView } from '#components/Map' +import { TextView } from '#components/Map/Subcomponents/ItemPopupComponents' import type { Item } from '#types/Item' diff --git a/src/Components/Profile/Templates/OnepagerView.tsx b/src/Components/Profile/Templates/OnepagerView.tsx index 088b92a6..7c2d8077 100644 --- a/src/Components/Profile/Templates/OnepagerView.tsx +++ b/src/Components/Profile/Templates/OnepagerView.tsx @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/restrict-template-expressions */ -import { TextView } from '#components/Map' +import { TextView } from '#components/Map/Subcomponents/ItemPopupComponents' import { ContactInfoView } from '#components/Profile/Subcomponents/ContactInfoView' import { GroupSubHeaderView } from '#components/Profile/Subcomponents/GroupSubHeaderView' diff --git a/src/Components/Profile/Templates/SimpleView.tsx b/src/Components/Profile/Templates/SimpleView.tsx index 894c3459..46b0d7ba 100644 --- a/src/Components/Profile/Templates/SimpleView.tsx +++ b/src/Components/Profile/Templates/SimpleView.tsx @@ -1,4 +1,4 @@ -import { TextView } from '#components/Map' +import { TextView } from '#components/Map/Subcomponents/ItemPopupComponents' import type { Item } from '#types/Item' diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx index 0a735955..f9931b28 100644 --- a/src/Components/Profile/Templates/TabsForm.tsx +++ b/src/Components/Profile/Templates/TabsForm.tsx @@ -10,8 +10,8 @@ import { useCallback, useEffect, useState } from 'react' import { useNavigate } from 'react-router-dom' import { TextAreaInput } from '#components/Input' -import { PopupStartEndInput, TextView } from '#components/Map' import { useUpdateItem } from '#components/Map/hooks/useItems' +import { PopupStartEndInput, TextView } from '#components/Map/Subcomponents/ItemPopupComponents' import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton' import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView' import { TagsWidget } from '#components/Profile/Subcomponents/TagsWidget' diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index c14ca054..5dce43a4 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -10,9 +10,9 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { Link, useNavigate } from 'react-router-dom' import { useAppState } from '#components/AppShell/hooks/useAppState' -import { StartEndView, TextView } from '#components/Map' import { useAddFilterTag } from '#components/Map/hooks/useFilter' import { useItems } from '#components/Map/hooks/useItems' +import { StartEndView, TextView } from '#components/Map/Subcomponents/ItemPopupComponents' import { ActionButton } from '#components/Profile/Subcomponents/ActionsButton' import { LinkedItemsHeaderView } from '#components/Profile/Subcomponents/LinkedItemsHeaderView' import { TagView } from '#components/Templates/TagView' diff --git a/src/Components/Profile/index.tsx b/src/Components/Profile/index.tsx index 9178efd7..3ff3f845 100644 --- a/src/Components/Profile/index.tsx +++ b/src/Components/Profile/index.tsx @@ -2,5 +2,4 @@ export { UserSettings } from './UserSettings' // export { PlusButton } from './Subcomponents/PlusButton' export { ProfileView } from './ProfileView' export { ProfileForm } from './ProfileForm' -export { CardForm } from './templateComponents/CardForm' -export { CardView } from './templateComponents/CardView' +export * from './templateComponents' diff --git a/src/Components/Profile/templateComponents/TemplatePopupButton.tsx b/src/Components/Profile/templateComponents/TemplatePopupButton.tsx index 405e57af..ea6e4b96 100644 --- a/src/Components/Profile/templateComponents/TemplatePopupButton.tsx +++ b/src/Components/Profile/templateComponents/TemplatePopupButton.tsx @@ -1,8 +1,7 @@ import { useContext } from 'react' -import { PopupButton } from '#components/Map' +import { PopupButton } from '#components/Map/Subcomponents/ItemPopupComponents' -import { Templateify } from './Templateify' import ItemContext from './TemplateItemContext' import type { JSXElementConstructor } from 'react' @@ -20,5 +19,3 @@ export const TemplatePopupButton = (props: OmitItem) => { return } - -export const TemplatePopupButton2 = Templateify(PopupButton) diff --git a/src/Components/Profile/templateComponents/Templateify.tsx b/src/Components/Profile/templateComponents/Templateify.tsx index ae1532a2..0d9d54df 100644 --- a/src/Components/Profile/templateComponents/Templateify.tsx +++ b/src/Components/Profile/templateComponents/Templateify.tsx @@ -3,17 +3,11 @@ import { useContext } from 'react' import ItemContext from './TemplateItemContext' import type { Item } from '#types/Item' -import type { JSXElementConstructor } from 'react' -type OmitItem> = Omit< - React.ComponentProps, - 'item' -> +type OmitItem = Omit -export function Templateify< - T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor, ->(Component: React.JSXElementConstructor>) { - const TemplateComponent = (props: OmitItem) => { +export function Templateify(Component: React.ComponentType) { + const TemplateComponent = (props: T) => { const item = useContext(ItemContext) return diff --git a/src/Components/Profile/templateComponents/index.tsx b/src/Components/Profile/templateComponents/index.tsx new file mode 100644 index 00000000..f17b55ce --- /dev/null +++ b/src/Components/Profile/templateComponents/index.tsx @@ -0,0 +1,24 @@ +import { + TextView as PlainTextView, + StartEndView as PlainStartEndView, + PopupTextInput as PlainPopupTextInput, + PopupButton as PlainPopupButton, + PopupCheckboxInput as PlainPopupCheckboxInput, + PopupTextAreaInput as PlainPopupTextAreaInput, +} from '#components/Map/Subcomponents/ItemPopupComponents' + +import { Templateify } from './Templateify' + +export { CardForm } from './CardForm' +export { CardView } from './CardView' + +export const TextView = Templateify(PlainTextView) +export const StartEndView = Templateify(PlainStartEndView) +export const PopupTextInput = Templateify(PlainPopupTextInput) +export const PopupButton = Templateify(PlainPopupButton) +export const PopupCheckboxInput = Templateify(PlainPopupCheckboxInput) +export const PopupTextAreaInput = Templateify(PlainPopupTextAreaInput) + +export const Test = () => { + return +} diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx index 02d86240..6e07688e 100644 --- a/src/Components/Templates/ItemCard.tsx +++ b/src/Components/Templates/ItemCard.tsx @@ -1,7 +1,7 @@ import { useNavigate } from 'react-router-dom' -import { StartEndView, TextView } from '#components/Map' import useWindowDimensions from '#components/Map/hooks/useWindowDimension' +import { StartEndView, TextView } from '#components/Map/Subcomponents/ItemPopupComponents' import { HeaderView } from '#components/Map/Subcomponents/ItemPopupComponents/HeaderView' import { DateUserInfo } from './DateUserInfo' diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx index 482d639e..68818dfe 100644 --- a/src/Components/Templates/OverlayItemsIndexPage.tsx +++ b/src/Components/Templates/OverlayItemsIndexPage.tsx @@ -9,7 +9,6 @@ import { toast } from 'react-toastify' import { useAuth } from '#components/Auth/useAuth' import { TextInput, TextAreaInput } from '#components/Input' -import { PopupStartEndInput } from '#components/Map' import { useFilterTags } from '#components/Map/hooks/useFilter' import { useAddItem, useItems, useRemoveItem } from '#components/Map/hooks/useItems' import { useLayers } from '#components/Map/hooks/useLayers' @@ -17,6 +16,7 @@ import { useAddTag, useGetItemTags, useTags } from '#components/Map/hooks/useTag import { Control } from '#components/Map/Subcomponents/Controls/Control' import { SearchControl } from '#components/Map/Subcomponents/Controls/SearchControl' import { TagsControl } from '#components/Map/Subcomponents/Controls/TagsControl' +import { PopupStartEndInput } from '#components/Map/Subcomponents/ItemPopupComponents' import { PlusButton } from '#components/Profile/Subcomponents/PlusButton' import { hashTagRegex } from '#utils/HashTagRegex' import { randomColor } from '#utils/RandomColor'