Skip to content
This repository was archived by the owner on Dec 6, 2025. It is now read-only.

Commit c5edef4

Browse files
DasProffiDasProffi
authored
adopt hightide version 0.1.21 (#1278)
* feat: update to hightide v0.1.20 and fix several loading components * feat: adopt hightide version 0.1.21
1 parent 0296772 commit c5edef4

31 files changed

Lines changed: 401 additions & 372 deletions

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tasks/components/KanbanColumn.tsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import clsx from 'clsx'
22
import type { Translation } from '@helpwave/hightide'
3-
import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
3+
import { type PropsForTranslation, TextButton, useTranslation } from '@helpwave/hightide'
44
import { useDroppable } from '@dnd-kit/core'
55
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
66
import { Plus } from 'lucide-react'
@@ -16,10 +16,10 @@ type KanbanColumnsTranslation = {
1616

1717
const defaultKanbanColumnsTranslations: Translation<KanbanColumnsTranslation> = {
1818
en: {
19-
addTask: 'Add new Tasks'
19+
addTask: 'Add'
2020
},
2121
de: {
22-
addTask: 'Aufgabe hinzufügen'
22+
addTask: 'Hinzufügen'
2323
}
2424
}
2525

@@ -35,13 +35,13 @@ type KanbanColumnProps = {
3535
* The Column of the KanbanBoard showing tasks and affording a reorder of these
3636
*/
3737
export const KanbanColumn = ({
38-
overwriteTranslation,
39-
tasks,
40-
type,
41-
isDraggedOver,
42-
draggedTileId,
43-
onEditTask
44-
}: PropsForTranslation<KanbanColumnsTranslation, KanbanColumnProps>) => {
38+
overwriteTranslation,
39+
tasks,
40+
type,
41+
isDraggedOver,
42+
draggedTileId,
43+
onEditTask
44+
}: PropsForTranslation<KanbanColumnsTranslation, KanbanColumnProps>) => {
4545
const translation = useTranslation([defaultKanbanColumnsTranslations], overwriteTranslation)
4646

4747
const { setNodeRef } = useDroppable({
@@ -50,16 +50,33 @@ export const KanbanColumn = ({
5050

5151
return (
5252
<div
53-
className={clsx({ 'border-primary': isDraggedOver, 'border-transparent': !isDraggedOver },
54-
'col gap-y-4 border-2 border-dashed rounded-lg p-2')}
53+
className={clsx(
54+
{ 'border-primary': isDraggedOver, 'border-transparent': !isDraggedOver },
55+
'flex-col-2 border-2 border-dashed rounded-lg p-2',
56+
{
57+
'bg-tag-green-text/5': type === 'done',
58+
'bg-tag-yellow-text/5': type === 'inProgress',
59+
'bg-tag-red-text/5': type === 'todo',
60+
}
61+
)}
5562
>
5663
<PillLabel count={tasks.length} taskStatus={type}/>
5764
<SortableContext
5865
id={type.toString()}
5966
items={tasks}
6067
strategy={verticalListSortingStrategy}
6168
>
62-
<div ref={setNodeRef} className="col gap-y-4">
69+
<div ref={setNodeRef} className="flex-col-2 min-h-64 max-h-64 overflow-y-auto">
70+
<TextButton
71+
onClick={() => onEditTask({
72+
...emptyTask,
73+
status: type,
74+
dueDate: new Date(new Date().getTime() + (24 * 60 * 60 * 1000))
75+
})}
76+
startIcon={<Plus/>}
77+
>
78+
{translation('addTask')}
79+
</TextButton>
6380
{tasks.map((task) => (
6481
<Sortable key={task.id} id={task.id}>
6582
<TaskCard
@@ -71,17 +88,6 @@ export const KanbanColumn = ({
7188
))}
7289
</div>
7390
</SortableContext>
74-
<button
75-
onClick={() => onEditTask({
76-
...emptyTask,
77-
status: type,
78-
dueDate: new Date(new Date().getTime() + (24 * 60 * 60 * 1000))
79-
})}
80-
className="row ml-1 gap-x-1 text-gray-300"
81-
>
82-
<Plus/>
83-
{translation('addTask')}
84-
</button>
8591
</div>
8692
)
8793
}

‎tasks/components/KanbanHeader.tsx‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Translation } from '@helpwave/hightide'
22
import { useTranslation, type PropsForTranslation } from '@helpwave/hightide'
33
import { Input } from '@helpwave/hightide'
4-
import { ChevronDown } from 'lucide-react'
4+
import { ColumnTitle } from '@/components/ColumnTitle'
55

66
type KanbanHeaderTranslation = {
77
tasks: string,
@@ -42,19 +42,16 @@ export const KanbanHeader = ({
4242
}: PropsForTranslation<KanbanHeaderTranslation, KanbanHeaderProps>) => {
4343
const translation = useTranslation([defaultKanbanHeaderTranslations], overwriteTranslation)
4444
return (
45-
<div className="row justify-between items-center">
46-
<span className="textstyle-table-name">{translation('tasks')}</span>
47-
<div className="row gap-x-6">
48-
<div className="row gap-x-2 items-center hidden">
49-
{translation('status')}
50-
<ChevronDown className="stroke-black"/>
51-
</div>
52-
<div className="row gap-x-2 items-center hidden">
53-
{translation('label')}
54-
<ChevronDown className="stroke-black"/>
55-
</div>
56-
<Input id="search" value={searchValue} placeholder={translation('search')} onChangeText={onSearchChange}/>
57-
</div>
58-
</div>
45+
<ColumnTitle
46+
title={translation('tasks')}
47+
actions={(
48+
<Input
49+
value={searchValue}
50+
placeholder={translation('search')}
51+
onChangeText={onSearchChange}
52+
containerClassName="!w-auto"
53+
/>
54+
)}
55+
/>
5956
)
6057
}

‎tasks/components/OrganizationForm.tsx‎

Lines changed: 84 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -156,94 +156,92 @@ export const OrganizationForm = ({
156156
const isDisplayingEmailNameError = emailErrorMessage && organizationForm.touched.email
157157

158158
return (
159-
<LoadingAndErrorComponent
160-
isLoading={!organizationForm}
161-
loadingProps={{ classname: 'border-2 rounded-xl min-h-73' }}
162-
minimumLoadingDuration={200} // prevents errors flickering
163-
>
164-
<div className={clsx('col gap-y-0', className)}>
165-
<ColumnTitle title={translation('general')} type="subtitle"/>
166-
<div className="col gap-y-2">
167-
<div className="col gap-y-1">
168-
<Input
169-
id="shortName"
170-
value={organizationForm.organization.shortName}
171-
label={{ name: translation('shortName') }}
172-
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
173-
...organizationForm.touched,
174-
shortName: true
175-
})}
176-
onChangeText={text => triggerOnChange({
177-
...organizationForm.organization,
178-
shortName: text
179-
}, false, { ...organizationForm.touched })}
180-
onEditCompleted={text => triggerOnChange({
181-
...organizationForm.organization,
182-
shortName: text
183-
}, true, { ...organizationForm.touched, shortName: true })}
184-
maxLength={maxShortNameLength}
185-
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingShortNameError })}
186-
/>
187-
{isDisplayingShortNameError && <span className="textstyle-form-error">{shortNameErrorMessage}</span>}
188-
<span className="textstyle-form-description">{translation('shortNameDescription')}</span>
189-
</div>
190-
<div className="col gap-y-1">
191-
<Input
192-
id="longName"
193-
value={organizationForm.organization.longName}
194-
label={{ name: translation('longName') }}
195-
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
196-
...organizationForm.touched,
197-
longName: true
198-
})}
199-
onChangeText={text => triggerOnChange({
200-
...organizationForm.organization,
201-
longName: text
202-
}, false, { ...organizationForm.touched })}
203-
onEditCompleted={text => triggerOnChange({
204-
...organizationForm.organization,
205-
longName: text
206-
}, true, { ...organizationForm.touched, longName: true })}
207-
maxLength={maxLongNameLength}
208-
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingLongNameError })}
209-
/>
210-
{isDisplayingLongNameError && <span className="textstyle-form-error">{longNameErrorMessage}</span>}
211-
<span className="textstyle-form-description">{translation('longNameDescription')}</span>
212-
</div>
213-
<div className="col gap-y-1">
214-
<div className="row items-end">
215-
<div className="flex-1 mr-2">
216-
<Input
217-
id="email"
218-
value={organizationForm.organization.email}
219-
label={{ name: translation('contactEmail') }}
220-
type="email"
221-
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
222-
...organizationForm.touched,
223-
email: true
224-
})}
225-
onChangeText={text => triggerOnChange({
226-
...organizationForm.organization,
227-
email: text
228-
}, false, { ...organizationForm.touched })}
229-
onEditCompleted={text => triggerOnChange({
230-
...organizationForm.organization,
231-
email: text
232-
}, true, { ...organizationForm.touched, email: true })}
233-
maxLength={maxMailLength}
234-
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingEmailNameError })}
235-
/>
236-
</div>
237-
{
238-
!organizationForm.organization.isVerified &&
239-
<span className="text-negative mb-3">{translation('notVerified')}</span>
240-
}
159+
<div className={clsx('col gap-y-0', className)}>
160+
<ColumnTitle title={translation('general')} type="subtitle"/>
161+
<LoadingAndErrorComponent
162+
isLoading={!organizationForm}
163+
className="min-h-69"
164+
minimumLoadingDuration={200} // prevents errors flickering
165+
>
166+
<div className="col gap-y-1">
167+
<Input
168+
id="shortName"
169+
value={organizationForm.organization.shortName}
170+
label={{ name: translation('shortName') }}
171+
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
172+
...organizationForm.touched,
173+
shortName: true
174+
})}
175+
onChangeText={text => triggerOnChange({
176+
...organizationForm.organization,
177+
shortName: text
178+
}, false, { ...organizationForm.touched })}
179+
onEditCompleted={text => triggerOnChange({
180+
...organizationForm.organization,
181+
shortName: text
182+
}, true, { ...organizationForm.touched, shortName: true })}
183+
maxLength={maxShortNameLength}
184+
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingShortNameError })}
185+
/>
186+
{isDisplayingShortNameError && <span className="textstyle-form-error">{shortNameErrorMessage}</span>}
187+
<span className="textstyle-form-description">{translation('shortNameDescription')}</span>
188+
</div>
189+
<div className="col gap-y-1">
190+
<Input
191+
id="longName"
192+
value={organizationForm.organization.longName}
193+
label={{ name: translation('longName') }}
194+
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
195+
...organizationForm.touched,
196+
longName: true
197+
})}
198+
onChangeText={text => triggerOnChange({
199+
...organizationForm.organization,
200+
longName: text
201+
}, false, { ...organizationForm.touched })}
202+
onEditCompleted={text => triggerOnChange({
203+
...organizationForm.organization,
204+
longName: text
205+
}, true, { ...organizationForm.touched, longName: true })}
206+
maxLength={maxLongNameLength}
207+
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingLongNameError })}
208+
/>
209+
{isDisplayingLongNameError && <span className="textstyle-form-error">{longNameErrorMessage}</span>}
210+
<span className="textstyle-form-description">{translation('longNameDescription')}</span>
211+
</div>
212+
<div className="col gap-y-1">
213+
<div className="row items-end">
214+
<div className="flex-1 mr-2">
215+
<Input
216+
id="email"
217+
value={organizationForm.organization.email}
218+
label={{ name: translation('contactEmail') }}
219+
type="email"
220+
onBlur={() => triggerOnChange({ ...organizationForm.organization }, false, {
221+
...organizationForm.touched,
222+
email: true
223+
})}
224+
onChangeText={text => triggerOnChange({
225+
...organizationForm.organization,
226+
email: text
227+
}, false, { ...organizationForm.touched })}
228+
onEditCompleted={text => triggerOnChange({
229+
...organizationForm.organization,
230+
email: text
231+
}, true, { ...organizationForm.touched, email: true })}
232+
maxLength={maxMailLength}
233+
className={clsx(inputClasses, { [inputErrorClasses]: isDisplayingEmailNameError })}
234+
/>
241235
</div>
242-
{isDisplayingEmailNameError && <span className="textstyle-form-error">{emailErrorMessage}</span>}
243-
<span className="textstyle-form-description">{translation('contactEmailDescription')}</span>
236+
{
237+
!organizationForm.organization.isVerified &&
238+
<span className="text-negative mb-3">{translation('notVerified')}</span>
239+
}
244240
</div>
241+
{isDisplayingEmailNameError && <span className="textstyle-form-error">{emailErrorMessage}</span>}
242+
<span className="textstyle-form-description">{translation('contactEmailDescription')}</span>
245243
</div>
246-
</div>
247-
</LoadingAndErrorComponent>
244+
</LoadingAndErrorComponent>
245+
</div>
248246
)
249247
}

‎tasks/components/OrganizationInvitationList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,8 +122,8 @@ export const OrganizationInvitationList = ({
122122
<LoadingAndErrorComponent
123123
isLoading={isLoading && !!context.state.organizationId}
124124
hasError={isError && !!context.state.organizationId}
125-
errorProps={{ classname: 'border-2 border-gray-500 rounded-xl' }}
126-
loadingProps={{ classname: 'border-2 border-gray-500 rounded-xl' }}
125+
className="min-h-72"
126+
minimumLoadingDuration={200}
127127
>
128128
<InputModal
129129
className="min-w-[400px]"

‎tasks/components/OrganizationMemberList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -209,8 +209,8 @@ export const OrganizationMemberList = ({
209209
<LoadingAndErrorComponent
210210
hasError={(isError || !data) && !members}
211211
isLoading={!members && isLoading}
212-
errorProps={{ classname: 'border-2 border-gray-600 rounded-xl min-h-[300px]' }}
213-
loadingProps={{ classname: 'border-2 border-gray-600 rounded-xl min-h-[300px]' }}
212+
className="min-h-131"
213+
minimumLoadingDuration={200}
214214
>
215215
<ColumnTitle
216216
title={translation('member', { count: 2 /* Always use plural */ }) + ` (${usedMembers.length})`}

‎tasks/components/RoomList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -286,8 +286,8 @@ export const RoomList = ({
286286
<LoadingAndErrorComponent
287287
isLoading={isLoading}
288288
hasError={isError}
289-
loadingProps={{ classname: 'border-2 border-gray-500 rounded-xl min-h-[200px]' }}
290-
errorProps={{ classname: 'border-2 border-gray-500 rounded-xl min-h-[200px]' }}
289+
className="min-h-101"
290+
minimumLoadingDuration={200}
291291
>
292292
<TableWithSelection
293293
data={usedRooms}

0 commit comments

Comments
 (0)