Templateify exported elements (WIP)

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'

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'
+*/

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'
 

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'
 

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'
 

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'
 

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'
 

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'

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'

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'

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<typeof PopupButton>) => {
 
   return <PopupButton {...props} item={item} />
 }
-
-export const TemplatePopupButton2 = Templateify(PopupButton)

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<T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<unknown>> = Omit<
-  React.ComponentProps<T>,
-  'item'
->
+type OmitItem<T> = Omit<T, 'item'>
 
-export function Templateify<
-  T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<unknown>,
->(Component: React.JSXElementConstructor<React.PropsWithChildren<{ item?: Item }>>) {
-  const TemplateComponent = (props: OmitItem<T>) => {
+export function Templateify<T extends { item?: Item }>(Component: React.ComponentType<T>) {
+  const TemplateComponent = (props: T) => {
     const item = useContext(ItemContext)
 
     return <Component {...props} item={item} />

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 <TextView truncate />
+}

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'

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'