fix(lib): fix labels (#278)

* fix labels * more lables * and the rest of the lables * updated snapshots * fix linting
2025-12-12 23:36:00 +00:00 · 2025-07-04 08:36:11 +02:00 · 2025-07-04 08:36:11 +02:00 · 12aba6a67e
commit 12aba6a67e
parent 045ec726eb
15 changed files with 268 additions and 266 deletions
--- a/lib/src/Components/Input/InputLabel.tsx
+++ b/lib/src/Components/Input/InputLabel.tsx
@ -0,0 +1,9 @@
+export const InputLabel = ({ label }: { label: string }) => {
+  return (
+    <label className='tw:label tw:pb-1'>
+      <span className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'>
+        {label}:
+      </span>
+    </label>
+  )
+}
--- a/lib/src/Components/Input/RichTextEditor.tsx
+++ b/lib/src/Components/Input/RichTextEditor.tsx
@ -10,6 +10,7 @@ import { StarterKit } from '@tiptap/starter-kit'
 import { useEffect } from 'react'
 import { Markdown } from 'tiptap-markdown'

+import { InputLabel } from './InputLabel'
 import { TextEditorMenu } from './TextEditorMenu'

 interface RichTextEditorProps {
@ -27,7 +28,6 @@ interface RichTextEditorProps {
 */
 export function RichTextEditor({
  labelTitle,
-  labelStyle,
  containerStyle,
  defaultValue,
  placeholder,
@ -88,13 +88,7 @@ export function RichTextEditor({
    <div
      className={`tw:form-control tw:w-full tw:flex tw:flex-col tw:min-h-0 ${containerStyle ?? ''}`}
    >
-      {labelTitle ? (
-        <label className='tw:label tw:pb-1'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
      <div
        className={`editor-wrapper tw:border-base-content/20 tw:rounded-box tw:border tw:flex tw:flex-col tw:flex-1 tw:min-h-0`}
      >
--- a/lib/src/Components/Input/TextAreaInput.tsx
+++ b/lib/src/Components/Input/TextAreaInput.tsx
@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react'

+import { InputLabel } from './InputLabel'
+
 interface TextAreaProps {
  labelTitle?: string
-  labelStyle?: string
  containerStyle?: string
  dataField?: string
  inputStyle?: string
@ -18,7 +19,6 @@ interface TextAreaProps {
 export function TextAreaInput({
  labelTitle,
  dataField,
-  labelStyle,
  containerStyle,
  inputStyle,
  defaultValue,
@ -43,13 +43,7 @@ export function TextAreaInput({

  return (
    <div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
      <textarea
        required={required}
        ref={ref}
--- a/lib/src/Components/Input/TextInput.tsx
+++ b/lib/src/Components/Input/TextInput.tsx
@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'

+import { InputLabel } from './InputLabel'
+
 interface InputTextProps {
  labelTitle?: string
-  labelStyle?: string
  type?: string
  dataField?: string
  containerStyle?: string
@ -20,7 +21,6 @@ interface InputTextProps {
 */
 export function TextInput({
  labelTitle,
-  labelStyle,
  type,
  dataField,
  containerStyle,
@ -48,13 +48,7 @@ export function TextInput({

  return (
    <div className={`tw:form-control ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
      <input
        required={required}
        pattern={pattern}
--- a/lib/src/Components/Input/snapshots/TextAreaInput.spec.tsx.snap
+++ b/lib/src/Components/Input/snapshots/TextAreaInput.spec.tsx.snap
@ -5,12 +5,13 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
  class="tw:form-control tw:w-full "
 >
  <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
  >
    <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
    >
      My Title
+      :
    </span>
  </label>
  <textarea
--- a/lib/src/Components/Input/snapshots/TextInput.spec.tsx.snap
+++ b/lib/src/Components/Input/snapshots/TextInput.spec.tsx.snap
@ -5,12 +5,13 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
  class="tw:form-control "
 >
  <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
  >
    <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
    >
      My Title
+      :
    </span>
  </label>
  <input
--- a/lib/src/Components/Input/index.tsx
+++ b/lib/src/Components/Input/index.tsx
@ -1,2 +1,4 @@
 export { TextAreaInput } from './TextAreaInput'
 export { TextInput } from './TextInput'
+export { InputLabel } from './InputLabel'
+export { RichTextEditor } from './RichTextEditor'
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@ -6,7 +6,6 @@ import type { Item } from '#types/Item'
 export interface StartEndInputProps {
  item?: Item
  showLabels?: boolean
-  labelStyle?: string
  updateStartValue?: (value: string) => void
  updateEndValue?: (value: string) => void
  containerStyle?: string
@ -18,7 +17,6 @@ export interface StartEndInputProps {
 export const PopupStartEndInput = ({
  item,
  showLabels = true,
-  labelStyle,
  updateStartValue,
  updateEndValue,
  containerStyle,
@ -31,7 +29,6 @@ export const PopupStartEndInput = ({
        dataField='start'
        inputStyle='tw:text-sm tw:px-2'
        labelTitle={showLabels ? 'Start' : ''}
-        labelStyle={labelStyle}
        defaultValue={item && item.start ? item.start.substring(0, 10) : ''}
        autocomplete='one-time-code'
        updateFormValue={updateStartValue}
@ -42,7 +39,6 @@ export const PopupStartEndInput = ({
        dataField='end'
        inputStyle='tw:text-sm tw:px-2'
        labelTitle={showLabels ? 'End' : ''}
-        labelStyle={labelStyle}
        defaultValue={item && item.end ? item.end.substring(0, 10) : ''}
        autocomplete='one-time-code'
        updateFormValue={updateEndValue}
--- a/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { InputLabel, TextInput } from '#components/Input'

 import type { FormState } from '#types/FormState'

@ -12,12 +12,7 @@ export const ContactInfoForm = ({
  return (
    <div className='tw:mt-2 tw:space-y-2'>
      <div>
-        <label
-          htmlFor='email'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Email-Adresse (Kontakt):
-        </label>
+        <InputLabel label='Email-Adresse (Kontakt)' />
        <TextInput
          placeholder='Email'
          type='email'
@ -33,12 +28,7 @@ export const ContactInfoForm = ({
      </div>

      <div>
-        <label
-          htmlFor='telephone'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Telefonnummer (Kontakt):
-        </label>
+        <InputLabel label='Telefonnummer (Kontakt)' />
        <TextInput
          placeholder='Telefonnummer'
          type='tel'
--- a/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { TextInput, InputLabel } from '#components/Input'

 import type { FormState } from '#types/FormState'

@ -12,12 +12,7 @@ export const CrowdfundingForm = ({
  return (
    <div className='tw:mt-4 tw:space-y-4'>
      <div>
-        <label
-          htmlFor='OpenCollectiveSlug'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Open Collective Slug:
-        </label>
+        <InputLabel label='Open Collective Slug' />
        <TextInput
          placeholder='Open Collective Slug'
          type='text'
--- a/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
@ -5,6 +5,7 @@ import { useDropzone } from 'react-dropzone'
 import { BiSolidImage } from 'react-icons/bi'

 import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { InputLabel } from '#components/Input/InputLabel'
 import DialogModal from '#components/Templates/DialogModal'
 import { getImageDimensions } from '#utils/getImageDimensions'

@ -13,6 +14,7 @@ import type { FormState } from '#types/FormState'
 interface Props {
  state: FormState
  setState: React.Dispatch<React.SetStateAction<FormState>>
+  hideInputLabel?: boolean
 }

 const compressionOptions = {
@ -21,7 +23,7 @@ const compressionOptions = {
  useWebWorker: true,
 }

-export const GalleryForm = ({ state, setState }: Props) => {
+export const GalleryForm = ({ state, setState, hideInputLabel = false }: Props) => {
  const appState = useAppState()

  const [imageSelectedToDelete, setImageSelectedToDelete] = useState<number | null>(null)
@ -96,8 +98,9 @@ export const GalleryForm = ({ state, setState }: Props) => {
  }

  return (
-    <>
-      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
+    <div className='tw:mt-3'>
+      {!hideInputLabel && <InputLabel label='Media' />}
+      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4'>
        {images.map((image, index) => (
          <div key={index} className='tw:relative'>
            <img
@ -161,6 +164,6 @@ export const GalleryForm = ({ state, setState }: Props) => {
          </div>
        </div>
      </DialogModal>
-    </>
+    </div>
  )
 }
--- a/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { useEffect } from 'react'

+import { InputLabel } from '#components/Input'
 import ComboBoxInput from '#components/Input/ComboBoxInput'

 import type { FormState } from '#types/FormState'
@ -51,12 +52,7 @@ export const GroupSubheaderForm = ({
  return (
    <div className='tw:grid tw:grid-cols-1 tw:@sm:grid-cols-2 tw:gap-2'>
      <div>
-        <label
-          htmlFor='status'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenstatus:
-        </label>
+        <InputLabel label='Gruppenstatus' />
        <ComboBoxInput
          id='status'
          options={groupStates || []}
@ -70,12 +66,7 @@ export const GroupSubheaderForm = ({
        />
      </div>
      <div>
-        <label
-          htmlFor='groupType'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenart:
-        </label>
+        <InputLabel label='Gruppenart' />
        <ComboBoxInput
          id='groupType'
          options={groupTypes?.map((gt) => gt.groupTypes_id.name) || []}
--- a/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@ -4,7 +4,7 @@

 import { useEffect, useState } from 'react'

-import { RichTextEditor } from '#components/Input/RichTextEditor'
+import { InputLabel, RichTextEditor } from '#components/Input'

 import { MarkdownHint } from './MarkdownHint'

@ -13,11 +13,9 @@ import type { FormState } from '#types/FormState'
 export const ProfileTextForm = ({
  state,
  setState,
-  // Is this really used?
  dataField,
  heading,
  size,
-  hideInputLabel,
 }: {
  state: FormState
  setState: React.Dispatch<React.SetStateAction<FormState>>
@ -36,15 +34,10 @@ export const ProfileTextForm = ({

  return (
    <div
-      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-28 tw:flex-none'}`}
+      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-3 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-30 tw:flex-none'}`}
    >
      <div className='tw:flex tw:justify-between tw:items-center'>
-        <label
-          htmlFor='nextAppointment'
-          className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'
-        >
-          {heading || 'Text'}:
-        </label>
+        <InputLabel label={heading || 'Text'} />
        <MarkdownHint />
      </div>
      <RichTextEditor
@ -58,7 +51,6 @@ export const ProfileTextForm = ({
          }))
        }
        showMenu={size === 'full'}
-        labelStyle={hideInputLabel ? 'tw:hidden' : ''}
        containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-24 tw:flex-none'}
      />
    </div>
--- a/lib/src/Components/Profile/Subcomponents/snapshots/GalleryForm.spec.tsx.snap
+++ b/lib/src/Components/Profile/Subcomponents/snapshots/GalleryForm.spec.tsx.snap
@ -3,7 +3,20 @@
 exports[`GalleryForm > with previous images > renders 1`] = `
 <div>
  <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
+  >
+    <label
+      class="tw:label tw:pb-1"
+    >
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
+    <div
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
    >
      <div
        class="tw:relative"
@ -100,12 +113,26 @@ exports[`GalleryForm > with previous images > renders 1`] = `
      </div>
    </div>
  </div>
+</div>
 `;

 exports[`GalleryForm > with uploading images > renders 1`] = `
 <div>
  <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
+  >
+    <label
+      class="tw:label tw:pb-1"
+    >
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
+    <div
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
    >
      <div
        class="tw:relative"
@ -180,12 +207,26 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
      </div>
    </div>
  </div>
+</div>
 `;

 exports[`GalleryForm > without previous images > renders 1`] = `
 <div>
  <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
+  >
+    <label
+      class="tw:label tw:pb-1"
+    >
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
+    <div
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
    >
      <div
        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
@ -224,4 +265,5 @@ exports[`GalleryForm > without previous images > renders 1`] = `
      </div>
    </div>
  </div>
+</div>
 `;
--- a/lib/src/Components/Profile/Templates/TabsForm.tsx
+++ b/lib/src/Components/Profile/Templates/TabsForm.tsx
@ -44,7 +44,6 @@ export const TabsForm = ({
                  <PopupStartEndInput
                    item={item}
                    showLabels={true}
-                    labelStyle={'tw:text-base-content/50'}
                    updateEndValue={(e) =>
                      setState((prevState) => ({
                        ...prevState,
@ -62,7 +61,6 @@ export const TabsForm = ({

                <RichTextEditor
                  labelTitle='About'
-                  labelStyle={'tw:text-base-content/50'}
                  placeholder='about ...'
                  defaultValue={item?.text ? item.text : ''}
                  updateFormValue={(v) =>