docs: group by category (#124)

Groups the docs by categories and assigns all exported Components a
category (except types).

package.json

@@ -24,7 +24,7 @@
     "test:component": "cypress run --component --browser electron",
     "test:unit": "npm run test:unit:dev -- run --coverage",
     "test:unit:dev": "vitest",
-    "docs:generate": "typedoc --plugin typedoc-plugin-coverage src/index.tsx",
+    "docs:generate": "typedoc --navigation.includeCategories true --plugin typedoc-plugin-coverage src/index.tsx",
     "update": "npx npm-check-updates"
   },
   "files": [

src/Components/AppShell/AppShell.tsx

@@ -4,6 +4,9 @@ import { SetAppState } from './SetAppState'
 
 import type { AssetsApi } from '#types/AssetsApi'
 
+/**
+ * @category AppShell
+ */
 export function AppShell({
   appName,
   children,

src/Components/AppShell/Content.tsx

@@ -3,6 +3,9 @@ type ContentProps = {
   children?: React.ReactNode
 }
 
+/**
+ * @category AppShell
+ */
 export function Content({ children }: ContentProps) {
   return (
     <div className='tw-flex tw-flex-col tw-w-full tw-h-full tw-bg-base-200 tw-relative'>

src/Components/AppShell/SideBar.tsx

@@ -20,6 +20,9 @@ type route = {
   blank?: boolean
 }
 
+/**
+ * @category AppShell
+ */
 export function SideBar({ routes, bottomRoutes }: { routes: route[]; bottomRoutes?: route[] }) {
   // prevent react18 from calling useEffect twice
   const init = useRef(false)

src/Components/AppShell/Sitemap.tsx

@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react'
 
 import { useItems } from '#components/Map/hooks/useItems'
 
+/**
+ * @category AppShell
+ */
 export const Sitemap = ({ url }: { url: string }) => {
   const [sitemap, setSitemap] = useState('')
 

src/Components/Auth/LoginPage.tsx

@@ -11,6 +11,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 export function LoginPage() {
   const [email, setEmail] = useState<string>('')
   const [password, setPassword] = useState<string>('')

src/Components/Auth/RequestPasswordPage.tsx

@@ -9,6 +9,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 // eslint-disable-next-line react/prop-types
 export function RequestPasswordPage({ resetUrl }) {
   const [email, setEmail] = useState<string>('')

src/Components/Auth/SetNewPasswordPage.tsx

@@ -8,6 +8,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 export function SetNewPasswordPage() {
   const [password, setPassword] = useState<string>('')
 

src/Components/Auth/SignupPage.tsx

@@ -11,6 +11,9 @@ import { MapOverlayPage } from '#components/Templates/MapOverlayPage'
 
 import { useAuth } from './useAuth'
 
+/**
+ * @category Auth
+ */
 export function SignupPage() {
   const [email, setEmail] = useState<string>('')
   const [userName, setUserName] = useState<string>('')

src/Components/Auth/useAuth.tsx

@@ -45,6 +45,9 @@ const AuthContext = createContext<AuthContextProps>({
   passwordReset: () => Promise.reject(Error('Unimplemented')),
 })
 
+/**
+ * @category Auth
+ */
 export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
   const [user, setUser] = useState<UserItem | null>(null)
   const [token, setToken] = useState<string | null>(null)

src/Components/Gaming/Modal.tsx

@@ -1,5 +1,8 @@
 import { useEffect } from 'react'
 
+/**
+ * @category Gaming
+ */
 export function Modal({
   children,
   showOnStartup,

src/Components/Gaming/Quests.tsx

@@ -7,6 +7,9 @@ import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Gaming
+ */
 export function Quests() {
   const questsOpen = useQuestsOpen()
   const setQuestsOpen = useSetQuestOpen()

src/Components/Input/SelectBox.tsx

@@ -17,6 +17,9 @@ type SelectBoxProps = {
   labelDescription?: string
 }
 
+/**
+ * @category Input
+ */
 export function SelectBox(props: SelectBoxProps) {
   const {
     labelTitle,

src/Components/Input/TextAreaInput.tsx

@@ -22,6 +22,9 @@ interface KeyValue {
   [key: string]: string
 }
 
+/**
+ * @category Input
+ */
 export function TextAreaInput({
   labelTitle,
   dataField,

src/Components/Input/TextInput.tsx

@@ -18,6 +18,9 @@ type InputTextProps = {
   updateFormValue?: (value: string) => void
 }
 
+/**
+ * @category Input
+ */
 export function TextInput({
   labelTitle,
   labelStyle,

src/Components/Map/ItemForm.tsx

@@ -2,6 +2,9 @@ import { Children, cloneElement, isValidElement, useEffect } from 'react'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const ItemForm = ({
   children,
   item,

src/Components/Map/ItemView.tsx

@@ -2,6 +2,9 @@ import { Children, cloneElement, isValidElement } from 'react'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const ItemView = ({ children, item }: { children?: React.ReactNode; item?: Item }) => {
   return (
     <div>

src/Components/Map/Layer.tsx

@@ -27,6 +27,9 @@ import type { Tag } from '#types/Tag'
 import type { Popup } from 'leaflet'
 import type { ReactElement, ReactNode } from 'react'
 
+/**
+ * @category Map
+ */
 export const Layer = ({
   data,
   children,

src/Components/Map/Permissions.tsx

@@ -7,6 +7,9 @@ import { useSetPermissionData, useSetPermissionApi, useSetAdminRole } from './ho
 import type { ItemsApi } from '#types/ItemsApi'
 import type { Permission } from '#types/Permission'
 
+/**
+ * @category Map
+ */
 export function Permissions({
   data,
   api,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx

@@ -6,6 +6,9 @@ import { useGetItemTags } from '#components/Map/hooks/useTags'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupButton = ({
   url,
   parameterField,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx

@@ -1,5 +1,8 @@
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupCheckboxInput = ({
   dataField,
   label,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx

@@ -10,6 +10,9 @@ interface StartEndInputProps {
   updateEndValue?: (value: string) => void
 }
 
+/**
+ * @category Map
+ */
 export const PopupStartEndInput = ({
   item,
   showLabels = true,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx

@@ -2,6 +2,9 @@ import { TextAreaInput } from '#components/Input'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupTextAreaInput = ({
   dataField,
   placeholder,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx

@@ -2,6 +2,9 @@ import { TextInput } from '#components/Input'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const PopupTextInput = ({
   dataField,
   placeholder,

src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import type { Item } from '#types/Item'
 
+/**
+ * @category Map
+ */
 export const StartEndView = ({ item }: { item?: Item }) => {
   return (
     <div className='tw-flex tw-flex-row tw-mb-4 tw-mt-1'>

src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -18,6 +18,9 @@ import { fixUrls, mailRegex } from '#utils/ReplaceURLs'
 import type { Item } from '#types/Item'
 import type { Tag } from '#types/Tag'
 
+/**
+ * @category Map
+ */
 export const TextView = ({
   item,
   itemId,

src/Components/Map/Tags.tsx

@@ -7,6 +7,9 @@ import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
 import type { ItemsApi } from '#types/ItemsApi'
 import type { Tag } from '#types/Tag'
 
+/**
+ * @category Map
+ */
 export function Tags({ data, api }: { data?: Tag[]; api?: ItemsApi<Tag> }) {
   const setTagData = useSetTagData()
   const setTagApi = useSetTagApi()

src/Components/Map/UtopiaMap.tsx

@@ -8,6 +8,9 @@ import { UtopiaMapInner } from './UtopiaMapInner'
 import type { UtopiaMapProps } from '#types/UtopiaMapProps'
 import 'react-toastify/dist/ReactToastify.css'
 
+/**
+ * @category Map
+ */
 function UtopiaMap({
   height = '500px',
   width = '100%',

src/Components/Profile/ProfileForm.tsx

@@ -23,6 +23,9 @@ import type { FormState } from '#types/FormState'
 import type { Item } from '#types/Item'
 import type { Tag } from '#types/Tag'
 
+/**
+ * @category Profile
+ */
 export function ProfileForm() {
   const [state, setState] = useState<FormState>({
     color: '',

src/Components/Profile/ProfileView.tsx

@@ -33,6 +33,9 @@ import type { ItemsApi } from '#types/ItemsApi'
 import type { Tag } from '#types/Tag'
 import type { Marker } from 'leaflet'
 
+/**
+ * @category Profile
+ */
 export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any> }) {
   const [item, setItem] = useState<Item>()
   const [updatePermission, setUpdatePermission] = useState<boolean>(false)

src/Components/Profile/UserSettings.tsx

@@ -10,6 +10,9 @@ import { MapOverlayPage } from '#components/Templates'
 
 import type { UserItem } from '#types/UserItem'
 
+/**
+ * @category Profile
+ */
 export function UserSettings() {
   const { user, updateUser, loading /* token */ } = useAuth()
 

src/Components/Templates/AttestationForm.tsx

@@ -11,6 +11,9 @@ import { MapOverlayPage } from './MapOverlayPage'
 import type { Item } from '#types/Item'
 import type { ItemsApi } from '#types/ItemsApi'
 
+/**
+ * @category Templates
+ */
 export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
   const items = useItems()
   const appState = useAppState()

src/Components/Templates/CardPage.tsx

@@ -2,6 +2,9 @@ import { Link } from 'react-router-dom'
 
 import { TitleCard } from './TitleCard'
 
+/**
+ * @category Templates
+ */
 export function CardPage({
   title,
   hideTitle,

src/Components/Templates/MapOverlayPage.tsx

@@ -3,6 +3,9 @@ import { DomEvent } from 'leaflet'
 import { createRef, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
+/**
+ * @category Templates
+ */
 export function MapOverlayPage({
   children,
   className,

src/Components/Templates/MarketView.tsx

@@ -30,6 +30,9 @@ function groupAndCount(arr) {
   return grouped.sort((a, b) => b.count - a.count)
 }
 
+/**
+ * @category Templates
+ */
 export const MarketView = () => {
   const [offers, setOffers] = useState<Tag[]>([])
   const [needs, setNeeds] = useState<Tag[]>([])

src/Components/Templates/MoonCalendar.tsx

@@ -7,6 +7,9 @@ import { LUNAR_MONTH, getLastNewMoon, getNextNewMoon } from '#utils/Moon'
 import { CircleLayout } from './CircleLayout'
 import { MapOverlayPage } from './MapOverlayPage'
 
+/**
+ * @category Templates
+ */
 export const MoonCalendar = () => {
   const today = startOfToday()
 

src/Components/Templates/OverlayItemsIndexPage.tsx

@@ -27,6 +27,9 @@ import { MapOverlayPage } from './MapOverlayPage'
 
 import type { Item } from '#types/Item'
 
+/**
+ * @category Templates
+ */
 export const OverlayItemsIndexPage = ({
   url,
   layerName,

src/Components/Templates/SelectUser.tsx

@@ -7,6 +7,9 @@ import { useItems } from '#components/Map/hooks/useItems'
 
 import { MapOverlayPage } from './MapOverlayPage'
 
+/**
+ * @category Templates
+ */
 export const SelectUser = () => {
   const appState = useAppState()
   const items = useItems()

src/Components/Templates/TitleCard.tsx

@@ -11,6 +11,9 @@ interface TitleCardProps {
   TopSideButtons?: any
 }
 
+/**
+ * @category Templates
+ */
 export function TitleCard({
   title,
   hideTitle,