fix(lib): fix labels (#278)

* fix labels

* more lables

* and the rest of the lables

* updated snapshots

* fix linting

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>
+  )
+}

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 ? (
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
-        <label className='tw:label tw:pb-1'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : 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`}
       >

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 ? (
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
       <textarea
         required={required}
         ref={ref}

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 ? (
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
       <input
         required={required}
         pattern={pattern}

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

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

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'

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}

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
+        <InputLabel label='Email-Adresse (Kontakt)' />
-          htmlFor='email'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Email-Adresse (Kontakt):
-        </label>
         <TextInput
           placeholder='Email'
           type='email'
@@ -33,12 +28,7 @@ export const ContactInfoForm = ({
       </div>
 
       <div>
-        <label
+        <InputLabel label='Telefonnummer (Kontakt)' />
-          htmlFor='telephone'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Telefonnummer (Kontakt):
-        </label>
         <TextInput
           placeholder='Telefonnummer'
           type='tel'

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
+        <InputLabel label='Open Collective Slug' />
-          htmlFor='OpenCollectiveSlug'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Open Collective Slug:
-        </label>
         <TextInput
           placeholder='Open Collective Slug'
           type='text'

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:mt-3'>
-      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
+      {!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>
   )
 }

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
+        <InputLabel label='Gruppenstatus' />
-          htmlFor='status'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenstatus:
-        </label>
         <ComboBoxInput
           id='status'
           options={groupStates || []}
@@ -70,12 +66,7 @@ export const GroupSubheaderForm = ({
         />
       </div>
       <div>
-        <label
+        <InputLabel label='Gruppenart' />
-          htmlFor='groupType'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenart:
-        </label>
         <ComboBoxInput
           id='groupType'
           options={groupTypes?.map((gt) => gt.groupTypes_id.name) || []}

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
+        <InputLabel label={heading || 'Text'} />
-          htmlFor='nextAppointment'
-          className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'
-        >
-          {heading || 'Text'}:
-        </label>
         <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>

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"
@@ -99,13 +112,27 @@ exports[`GalleryForm > with previous images > renders 1`] = `
         </div>
       </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"
@@ -179,13 +206,27 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
         </div>
       </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"
@@ -223,5 +264,6 @@ exports[`GalleryForm > without previous images > renders 1`] = `
         </div>
       </div>
     </div>
+  </div>
 </div>
 `;

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) =>