Merge branch 'frontend-devel'

client/src/components/ui/AssigneeList/index.tsx

@@ -11,6 +11,11 @@ interface Props {
     max: number
 }
 
+/**
+ * This component displays the avatars of the list of users. It will only display a maximum number
+ * of images given in the max property. This component will also add a tooltip to the avatars, that
+ * display the users real name or username if no real name is given.
+ */
 export default function AssigneeList({ assignees, max }: Props) {
     let shownAssignees = assignees, overhead = 0;
     if (assignees.length > max) {

client/src/components/ui/Avatar/index.tsx

@@ -9,6 +9,13 @@ interface Props {
     user?: User;
 }
 
+/**
+ * This helper function extracts the initials of the users real name or username to be used in the
+ * Avatar component. If no user is given, a question mark will be returned.
+ *
+ * @param user The user to get the initials from
+ * @returns The initials of the user
+ */
 function getUserInitials(user?: User): string {
     if (user) {
         if (user.realname) {
@@ -26,6 +33,11 @@ function getUserInitials(user?: User): string {
     }
 }
 
+/**
+ * This component displays the avatar image for the given user. If the user has not set a image,
+ * this component will display the initials of the real name of the user, or if that is not present,
+ * it will display the first character of the username.
+ */
 export default function Avatar({ user }: Props) {
     const [error, setError] = useState(false);
     const avatarSrc = user && getUserImageUri(user.id);

client/src/components/ui/Button/index.tsx

@@ -10,6 +10,11 @@ interface Props {
     onClick?: MouseEventHandler;
 }
 
+/**
+ * This component implements a simple button. The type and onClick, as well as the className
+ * property will be given on to the underlying html button element, while the children will be
+ * display inside said button.
+ */
 export default function Button({children, type, className, onClick}: Props) {
     return (
         <button className={"button " + (className || '')} type={type} onClick={onClick}>

client/src/components/ui/Callout/index.tsx

@@ -5,6 +5,10 @@ interface Props {
     message: string;
 }
 
+/**
+ * This component implements a simple callout field. This component is mainly used for its styling.
+ * The message property will be displayed inside the callout container.
+ */
 export default function Callout({ message }: Props) {
     return (
         <div className="callout-container">

client/src/components/ui/Checkbox/index.tsx

@@ -7,6 +7,11 @@ interface Props {
     onChange: (value: boolean) => any;
 }
 
+/**
+ * This component implements a simple checkbox with a label. The checkbox is checked if the checked
+ * property is true. If the onChange callback is called, the parent component should handle the
+ * change of the checked property.
+ */
 export default function Checkbox({ label, checked, onChange }: Props) {
     return (
         <label htmlFor={label} className="checkbox-item" key={label}>

client/src/components/ui/CheckboxGroup/index.tsx

@@ -12,6 +12,11 @@ interface Props {
     setChosen: Function
 }
 
+/**
+ * This component allows the user to select a set of items from a list of choices. The input is done
+ * using checkboxes, each one corresponding to a different choice. The setChosen called is called if
+ * the selection changes, and the chosen property should be set accordingly by the parent component.
+ */
 export default function CheckboxGroup({ choices, chosen, setChosen }: Props) {
     return (
         <div className="checkbox-group">

client/src/components/ui/Comment/index.tsx

@@ -17,6 +17,11 @@ export interface CommentProps {
     onError?: () => any;
 }
 
+/**
+ * This component displays information on the given comment. If an error happens in the component
+ * the onError callback will be called. If the displayed comment was created by the logged in user,
+ * the component also gives the ability to edit the comment.
+ */
 export default function Comment({ comment: initialComment, onError }: CommentProps) {
     const [comment, setComment] = useState(initialComment);
     const [user, setUser] = useState<User>();

client/src/components/ui/Completion/index.tsx

@@ -11,6 +11,13 @@ export interface CompletionProps {
     color: string;
 }
 
+/**
+ * Parse the given API completion data into the properties required for use with this component. This
+ * means getting the correct color for the status and calculating the percentage.
+ *
+ * @param completion The API completion result
+ * @returns The properties to give to the component
+ */
 export function parseCompletion(completion: ApiCompletion): CompletionProps[] {
     const allAmount = completion.sum ?? 1;
     return [
@@ -37,6 +44,11 @@ export function parseCompletion(completion: ApiCompletion): CompletionProps[] {
     ] 
 }
 
+/**
+ * This element is a completion item display for use in the CompletionGrid component. The component
+ * will display a completion with the given number of percent in the given color and show the given
+ * label property.
+ */
 export default function Completion({ label, percent, color }: CompletionProps) {
     return (
         <div className="completion">

client/src/components/ui/DetailBox/index.tsx

@@ -8,6 +8,10 @@ export interface DetailProps {
     label?: string,
 }
 
+/**
+ * This is a detail bod for use in the detail grid. The box will display information, the given icon
+ * and the given title. The information can either be a number or a label.
+ */
 export default function DetailBox({ number, icon, title, label }: DetailProps) {
     return (
         <div className="detail-box">

client/src/components/ui/EditableTag/index.tsx

 
 import { useEffect, useState } from 'react';
-import Tag from '../Tag';
 
+import Tag from 'components/ui/Tag';
 import './tag.scss';
 
 interface Props<Tag> {
@@ -12,6 +12,11 @@ interface Props<Tag> {
     onChange: (value: Tag) => any;
 }
 
+/**
+ * This component shows a simple tag, and allows the user to edit it by clicking the tag and
+ * selecting from the opening dropdown selection. All options for the tag should be given in the
+ * possible property and the onChange function should change the displayed values.
+ */
 export default function EditableTag<Tag extends string>({ label, icon, color, possible, onChange }: Props<Tag>) {
     const [open, setOpen] = useState(false)
 

client/src/components/ui/ErrorScreen/index.tsx

@@ -6,6 +6,10 @@ interface Props {
     onGoHome?: () => any;
 }
 
+/**
+ * This component shows a simple error message and gives the user the option to reload or go to the
+ * landing page. This component should be used more often in places where data can fail to load.
+ */
 export default function ErrorScreen({ onReload, onGoHome }: Props) {
     return (
         <div className="error-screen">

client/src/components/ui/LoadingScreen/index.tsx

 
 import './loading-screen.scss';
 
+/**
+ * This component implements a simple loading animation. Id does not have to be started and is
+ * visible as soon as the component is displayed.
+ */
 export default function LoadingScreen() {
     return (
         <div className="loading-screen">