Change folder structure

src/Components/Item/PopupForm.tsx

@@ -1,14 +1,14 @@
 import { useContext } from 'react'
 
+import LayerContext from '#components/Map/LayerContext'
 import { ItemFormPopup } from '#components/Map/Subcomponents/ItemFormPopup'
 
-import LayerContext from './LayerContext'
 import TemplateItemContext from './TemplateItemContext'
 
 /**
- * @category Map
+ * @category Item
  */
-export const CardForm = ({ children }: { children?: React.ReactNode }) => {
+export const PopupForm = ({ children }: { children?: React.ReactNode }) => {
   const { itemFormPopup, setItemFormPopup } = useContext(LayerContext)
 
   return (

src/Components/Item/PopupView.tsx

@@ -11,25 +11,23 @@ import { useItems, useAllItemsLoaded } from '#components/Map/hooks/useItems'
 import { useAddMarker, useAddPopup, useLeafletRefs } from '#components/Map/hooks/useLeafletRefs'
 import { useSetMarkerClicked, useSelectPosition } from '#components/Map/hooks/useSelectPosition'
 import { useGetItemTags, useAllTagsLoaded, useTags } from '#components/Map/hooks/useTags'
+import LayerContext from '#components/Map/LayerContext'
 import { ItemViewPopup } from '#components/Map/Subcomponents/ItemViewPopup'
 import { encodeTag } from '#utils/FormatTags'
 import { hashTagRegex } from '#utils/HashTagRegex'
 import MarkerIconFactory from '#utils/MarkerIconFactory'
 import { randomColor } from '#utils/RandomColor'
 
-import LayerContext from './LayerContext'
 import TemplateItemContext from './TemplateItemContext'
 
 import type { Item } from '#types/Item'
 import type { Tag } from '#types/Tag'
 import type { Popup } from 'leaflet'
 
-// TODO Think about folder structure. This is not for profile, but for card / popup. Both can use the same template components.
-
 /**
- * @category Profile
+ * @category Item
  */
-export const CardView = ({ children }: { children?: React.ReactNode }) => {
+export const PopupView = ({ children }: { children?: React.ReactNode }) => {
   const cardViewContext = useContext(LayerContext)
   const {
     name,
@@ -43,6 +41,7 @@ export const CardView = ({ children }: { children?: React.ReactNode }) => {
   const filterTags = useFilterTags()
 
   const items = useItems()
+
   const getItemTags = useGetItemTags()
   const addMarker = useAddMarker()
   const addPopup = useAddPopup()

src/Components/Item/index.tsx

@@ -0,0 +1,22 @@
+import {
+  TextView as PlainTextView,
+  StartEndView as PlainStartEndView,
+  PopupTextInput as PlainPopupTextInput,
+  PopupButton as PlainPopupButton,
+  PopupCheckboxInput as PlainPopupCheckboxInput,
+  PopupTextAreaInput as PlainPopupTextAreaInput,
+  PopupStartEndInput as PlainPopupStartEndInput,
+} from '#components/Map/Subcomponents/ItemPopupComponents'
+
+import { templateify } from './templateify'
+
+export { PopupForm } from './PopupForm'
+export { PopupView as CardView } from './PopupView'
+
+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 PopupStartEndInput = templateify(PlainPopupStartEndInput)

src/Components/Item/templateify.tsx

@@ -4,7 +4,7 @@ import ItemContext from './TemplateItemContext'
 
 import type { Item } from '#types/Item'
 
-export function Templateify<T extends { item?: Item }>(Component: React.ComponentType<T>) {
+export function templateify<T extends { item?: Item }>(Component: React.ComponentType<T>) {
   const TemplateComponent = (props: T) => {
     const item = useContext(ItemContext)
 

src/Components/Map/Layer.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react'
 
-import LayerContext from '#components/Profile/templateComponents/LayerContext'
-
 import { useSetItemsApi, useSetItemsData } from './hooks/useItems'
 import { useAddTag } from './hooks/useTags'
+import LayerContext from './LayerContext'
 
 import type { LayerProps } from '#types/LayerProps'
 import type { Tag } from '#types/Tag'

src/Components/Map/LayerContext.ts

@@ -2,8 +2,6 @@ import { createContext } from 'react'
 
 import type { ItemFormPopupProps } from '#types/ItemFormPopupProps'
 
-// Where should we define defaults, here or in Layer.tsx?
-
 interface LayerContextType {
   name: string
   markerDefaultColor: string
@@ -16,9 +14,9 @@ interface LayerContextType {
 
 const LayerContext = createContext<LayerContextType>({
   name: '',
-  markerDefaultColor: '#777',
-  markerDefaultColor2: 'RGBA(35, 31, 32, 0.2)',
-  markerShape: 'circle',
+  markerDefaultColor: '',
+  markerDefaultColor2: '',
+  markerShape: '',
   markerIcon: '',
   itemFormPopup: undefined,
   setItemFormPopup: undefined,

src/Components/Profile/index.tsx

@@ -2,4 +2,3 @@ export { UserSettings } from './UserSettings'
 // export { PlusButton } from './Subcomponents/PlusButton'
 export { ProfileView } from './ProfileView'
 export { ProfileForm } from './ProfileForm'
-export * from './templateComponents'

src/Components/Profile/templateComponents/TemplatePopupButton.tsx

@@ -1,21 +0,0 @@
-import { useContext } from 'react'
-
-import { PopupButton } from '#components/Map/Subcomponents/ItemPopupComponents'
-
-import ItemContext from './TemplateItemContext'
-
-import type { JSXElementConstructor } from 'react'
-
-type OmitItem<T extends keyof React.JSX.IntrinsicElements | JSXElementConstructor<unknown>> = Omit<
-  React.ComponentProps<T>,
-  'item'
->
-
-/**
- * @category Map
- */
-export const TemplatePopupButton = (props: OmitItem<typeof PopupButton>) => {
-  const item = useContext(ItemContext)
-
-  return <PopupButton {...props} item={item} />
-}

src/Components/Profile/templateComponents/index.tsx

@@ -1,26 +0,0 @@
-import {
-  TextView as PlainTextView,
-  StartEndView as PlainStartEndView,
-  PopupTextInput as PlainPopupTextInput,
-  PopupButton as PlainPopupButton,
-  PopupCheckboxInput as PlainPopupCheckboxInput,
-  PopupTextAreaInput as PlainPopupTextAreaInput,
-  PopupStartEndInput as PlainPopupStartEndInput,
-} 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 PopupStartEndInput = Templateify(PlainPopupStartEndInput)
-
-export const Test = () => {
-  return <TextView truncate />
-}

src/index.tsx

@@ -8,6 +8,7 @@ export * from './Components/Profile'
 export * from './Components/Gaming'
 export * from './Components/Templates'
 export * from './Components/Input'
+export * from './Components/Item'
 
 declare global {
   interface Window {