Components that are now deprecated are marked as such

scm-ui/ui-components/src/Icon.tsx

@@ -38,6 +38,9 @@ type Props = {
   alt?: string;
 };
 
+/**
+ * @deprecated
+ */
 const Icon: FC<Props> = ({
   iconStyle = "fas",
   color = "secondary",
@@ -48,12 +51,12 @@ const Icon: FC<Props> = ({
   testId,
   tabIndex,
   onEnter,
-  alt = title
+  alt = title,
 }) => {
   return (
     <i
       onClick={onClick}
-      onKeyPress={event => event.key === "Enter" && onEnter && onEnter(event)}
+      onKeyPress={(event) => event.key === "Enter" && onEnter && onEnter(event)}
       title={title}
       className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)}
       tabIndex={tabIndex}

scm-ui/ui-components/src/Tooltip.tsx

@@ -92,7 +92,7 @@ const Arrow = {
   bottom: ArrowBottom,
   left: ArrowLeft,
   right: ArrowRight,
-  top: ArrowTop
+  top: ArrowTop,
 };
 
 const TooltipContainerBase = styled.div<{ multiline?: boolean }>`
@@ -136,7 +136,7 @@ const Container = {
   bottom: TooltipContainerBottom,
   left: TooltipContainerLeft,
   right: TooltipContainerRight,
-  top: TooltipContainerTop
+  top: TooltipContainerTop,
 };
 
 type Props = {
@@ -150,6 +150,9 @@ type Props = {
 
 export type TooltipLocation = "bottom" | "right" | "top" | "left";
 
+/**
+ * @deprecated use {@link ui-overlays/Tooltip} instead
+ */
 const Tooltip: FC<Props> = ({ className, message, location = "right", multiline, children, id }) => {
   const [open, setOpen] = useState(false);
 

scm-ui/ui-components/src/buttons/AddButton.tsx

@@ -24,6 +24,9 @@
 import React from "react";
 import Button, { ButtonProps } from "./Button";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class AddButton extends React.Component<ButtonProps> {
   render() {
     return <Button color="default" icon="plus" {...this.props} />;

scm-ui/ui-components/src/buttons/Button.tsx

@@ -47,6 +47,9 @@ type Props = ButtonProps & {
   color?: string;
 };
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
   (
     {

scm-ui/ui-components/src/buttons/ButtonAddons.tsx

@@ -36,6 +36,9 @@ type Props = {
   children: ReactNode;
 };
 
+/**
+ * @deprecated
+ */
 class ButtonAddons extends React.Component<Props> {
   render() {
     const { className, children } = this.props;

scm-ui/ui-components/src/buttons/ButtonGroup.tsx

@@ -29,6 +29,9 @@ type Props = {
   children: ReactNode;
 };
 
+/**
+ * @deprecated
+ */
 class ButtonGroup extends React.Component<Props> {
   render() {
     const { className, children } = this.props;

scm-ui/ui-components/src/buttons/CreateButton.tsx

@@ -30,6 +30,9 @@ const Wrapper = styled.div`
   border: var(--scm-border);
 `;
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 export default class CreateButton extends React.Component<ButtonProps> {
   render() {
     return (

scm-ui/ui-components/src/buttons/DeleteButton.tsx

@@ -24,6 +24,9 @@
 import React from "react";
 import Button, { ButtonProps } from "./Button";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class DeleteButton extends React.Component<ButtonProps> {
   render() {
     return <Button color="warning" icon="times" {...this.props} />;

scm-ui/ui-components/src/buttons/DownloadButton.tsx

@@ -30,6 +30,9 @@ type Props = {
   onClick?: () => void;
 };
 
+/**
+ * @deprecated
+ */
 class DownloadButton extends React.Component<Props> {
   render() {
     const { displayName, url, disabled, onClick } = this.props;

scm-ui/ui-components/src/buttons/EditButton.tsx

@@ -24,6 +24,9 @@
 import React from "react";
 import Button, { ButtonProps } from "./Button";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class EditButton extends React.Component<ButtonProps> {
   render() {
     return <Button color="default" {...this.props} />;

scm-ui/ui-components/src/buttons/LinkStyleButton.tsx

@@ -25,6 +25,9 @@
 import styled from "styled-components";
 import NoStyleButton from "./NoStyleButton";
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 const LinkStyleButton = styled(NoStyleButton)`
   text-decoration: underline;
 `;

scm-ui/ui-components/src/buttons/NoStyleButton.tsx

@@ -24,6 +24,9 @@
 
 import styled from "styled-components";
 
+/**
+ * @deprecated
+ */
 const NoStyleButton = styled.button`
   background: none;
   color: inherit;

scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx

@@ -41,6 +41,9 @@ const Button = styled.button`
   }
 `;
 
+/**
+ * @deprecated
+ */
 const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody, tooltipStyle = "tooltipComponent" }) => {
   const [t] = useTranslation("repos");
   const [showModal, setShowModal] = useState(false);

scm-ui/ui-components/src/buttons/RemoveEntryOfTableButton.tsx

@@ -34,6 +34,9 @@ type Props = {
 
 type State = {};
 
+/**
+ * @deprecated
+ */
 class RemoveEntryOfTableButton extends React.Component<Props, State> {
   render() {
     const { label, entryname, removeEntry, disabled } = this.props;

scm-ui/ui-components/src/buttons/SubmitButton.tsx

@@ -29,6 +29,9 @@ type SubmitButtonProps = ButtonProps & {
   testId?: string;
 };
 
+/**
+ * @deprecated Use {@link ui-buttons/src/Button.tsx} instead
+ */
 class SubmitButton extends React.Component<SubmitButtonProps> {
   static defaultProps = {
     scrollToTop: true,

scm-ui/ui-components/src/forms/AddEntryToTableField.tsx

@@ -41,6 +41,10 @@ const FullWidthInputField = styled(InputField)`
   width: 100%;
 `;
 
+/**
+ *
+ * @deprecated
+ */
 const AddEntryToTableField: FC<Props> = ({
   addEntry,
   disabled,

scm-ui/ui-components/src/forms/AddKeyValueEntryToTableField.tsx

@@ -54,6 +54,9 @@ const MobileWrappedDiv = styled.div`
   }
 `;
 
+/**
+ * @deprecated
+ */
 const AddKeyValueEntryToTableField: FC<Props> = ({
   keyFieldLabel,
   valueFieldLabel,
@@ -63,7 +66,7 @@ const AddKeyValueEntryToTableField: FC<Props> = ({
   valueHelpText,
   validateEntry,
   errorMessage,
-  addEntry
+  addEntry,
 }) => {
   const [key, setKey] = useState("");
   const [value, setValue] = useState("");

scm-ui/ui-components/src/forms/AutocompleteAddEntryToTableField.tsx

@@ -44,6 +44,9 @@ const FullWidthAutocomplete = styled(Autocomplete)`
   width: 100%;
 `;
 
+/**
+ * @deprecated
+ */
 const AutocompleteAddEntryToTableField: FC<Props> = ({
   addEntry,
   disabled,

scm-ui/ui-components/src/forms/Checkbox.tsx

@@ -132,6 +132,9 @@ const InnerCheckbox: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Checkbox: FieldType<BaseProps, HTMLInputElement, boolean> = createFormFieldWrapper(InnerCheckbox);
 
 export default Checkbox;

scm-ui/ui-components/src/forms/FileInput.tsx

@@ -41,6 +41,9 @@ type Props = {
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
 };
 
+/**
+ * @deprecated
+ */
 const FileInput = React.forwardRef<HTMLInputElement, Props>(
   ({ name, filenamePlaceholder, testId, helpText, placeholder, disabled, label, className, onBlur, onChange }, ref) => {
     const [t] = useTranslation("commons");

scm-ui/ui-components/src/forms/FileUpload.tsx

@@ -31,6 +31,9 @@ type Props = {
   disabled?: boolean;
 };
 
+/**
+ * @deprecated
+ */
 const FileUpload: FC<Props> = ({ handleFile, filenamePlaceholder = "", disabled = false }) => {
   const [t] = useTranslation("commons");
   const [file, setFile] = useState<File | null>(null);

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -41,6 +41,9 @@ const FixedHeightInput = styled.input`
   height: 2.5rem;
 `;
 
+/**
+ * @deprecated
+ */
 const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus, className, id }) => {
   const [stateValue, setStateValue] = useState(value || "");
   const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout>>();
@@ -74,7 +77,7 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus,
           type="search"
           placeholder={placeholder || t("filterEntries")}
           value={stateValue}
-          onChange={event => setStateValue(event.target.value)}
+          onChange={(event) => setStateValue(event.target.value)}
           autoFocus={autoFocus || false}
           aria-describedby={id}
           aria-label={t("filterEntries")}

scm-ui/ui-components/src/forms/FormFieldTypes.tsx

@@ -23,21 +23,33 @@
  */
 import React, { ChangeEvent, FC, FocusEvent } from "react";
 
+/**
+ * @deprecated
+ */
 export type MinimumBaseProps = {
   name?: string;
 };
 
+/**
+ * @deprecated
+ */
 export type LegacyProps<Base extends MinimumBaseProps, ValueType> = Base & {
   onChange?: (value: ValueType, name?: string) => void;
   onBlur?: (value: ValueType, name?: string) => void;
   innerRef?: never;
 };
 
+/**
+ * @deprecated
+ */
 export type RefProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = Base & {
   onChange?: (event: ChangeEvent<ElementType>) => void;
   onBlur?: (event: FocusEvent<ElementType>) => void;
 };
 
+/**
+ * @deprecated
+ */
 export type InnerRefProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = RefProps<
   Base,
   ElementType
@@ -45,31 +57,49 @@ export type InnerRefProps<Base extends MinimumBaseProps, ElementType extends HTM
   innerRef: React.ForwardedRef<ElementType>;
 };
 
+/**
+ * @deprecated
+ */
 export const isUsingRef = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
   props: Partial<FieldProps<Base, ElementType, ValueType>>
 ): props is InnerRefProps<Base, ElementType> => {
   return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef !== undefined;
 };
 
+/**
+ * @deprecated
+ */
 export const isLegacy = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
   props: FieldProps<Base, ElementType, ValueType>
 ): props is LegacyProps<Base, ValueType> => {
   return (props as Partial<InnerRefProps<Base, ElementType>>).innerRef === undefined;
 };
 
+/**
+ * @deprecated
+ */
 export type FieldProps<Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType> =
   | LegacyProps<Base, ValueType>
   | InnerRefProps<Base, ElementType>;
 
+/**
+ * @deprecated
+ */
 export type OuterProps<Base extends MinimumBaseProps, ElementType extends HTMLElement> = RefProps<Base, ElementType> & {
   ref: React.Ref<ElementType>;
 };
 
+/**
+ * @deprecated
+ */
 export type FieldType<Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType> = {
   (props: OuterProps<Base, ElementType>): React.ReactElement<OuterProps<Base, ElementType>> | null;
   (props: LegacyProps<Base, ValueType>): React.ReactElement<LegacyProps<Base, ValueType>> | null;
 };
 
+/**
+ * @deprecated
+ */
 export const createFormFieldWrapper = <Base extends MinimumBaseProps, ElementType extends HTMLElement, ValueType>(
   InnerType: FC<FieldProps<Base, ElementType, ValueType>>
 ) =>

scm-ui/ui-components/src/forms/LabelWithHelpIcon.tsx

@@ -31,6 +31,9 @@ type Props = {
   helpId?: string;
 };
 
+/**
+ * @deprecated
+ */
 class LabelWithHelpIcon extends React.Component<Props> {
   renderHelp() {
     const { helpText, helpId } = this.props;

scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx

@@ -33,6 +33,9 @@ type Props = WithTranslation & {
   helpText?: string;
 };
 
+/**
+ * @deprecated
+ */
 class MemberNameTagGroup extends React.Component<Props> {
   render() {
     const { members, label, helpText, t } = this.props;
@@ -61,4 +64,7 @@ class MemberNameTagGroup extends React.Component<Props> {
   };
 }
 
+/**
+ * @deprecated
+ */
 export default withTranslation("groups")(MemberNameTagGroup);

scm-ui/ui-components/src/forms/PasswordConfirmation.tsx

@@ -101,6 +101,9 @@ const PasswordConfirmation: FC<InnerProps> = ({ passwordChanged, passwordValidat
   );
 };
 
+/**
+ * @deprecated
+ */
 export default React.forwardRef<HTMLInputElement, BaseProps>((props, ref) => (
   <PasswordConfirmation {...props} innerRef={ref} />
 ));

scm-ui/ui-components/src/forms/Radio.tsx

@@ -107,6 +107,9 @@ const InnerRadio: FC<FieldProps<BaseProps, HTMLInputElement, boolean>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Radio: FieldType<BaseProps, HTMLInputElement, boolean> = createFormFieldWrapper(InnerRadio);
 
 export default Radio;

scm-ui/ui-components/src/forms/Select.tsx

@@ -50,6 +50,9 @@ type BaseProps = {
   ariaLabelledby?: string;
 };
 
+/**
+ * @deprecated
+ */
 const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   value,
   defaultValue,
@@ -69,7 +72,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   const field = useInnerRef(props.innerRef);
 
   let opts = options;
-  if (value && addValueToOptions && !options.some(o => o.value === value)) {
+  if (value && addValueToOptions && !options.some((o) => o.value === value)) {
     opts = [{ label: value, value }, ...options];
   }
 
@@ -128,7 +131,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
           aria-describedby={helpText ? helpId : undefined}
           {...createAttributesForTesting(testId)}
         >
-          {opts.map(opt => {
+          {opts.map((opt) => {
             return (
               <option value={opt.value} key={"KEY_" + opt.value}>
                 {opt.label}
@@ -141,6 +144,9 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Select: FieldType<BaseProps, HTMLSelectElement, string> = createFormFieldWrapper(InnerSelect);
 
 export default Select;

scm-ui/ui-components/src/forms/TagGroup.tsx

@@ -32,6 +32,9 @@ type Props = {
   onRemove: (p: DisplayedUser[]) => void;
 };
 
+/**
+ * @deprecated
+ */
 export default class TagGroup extends React.Component<Props> {
   render() {
     const { items, label, helpText } = this.props;

scm-ui/ui-components/src/forms/Textarea.tsx

@@ -45,6 +45,9 @@ type BaseProps = {
   readOnly?: boolean;
 };
 
+/**
+ * @deprecated
+ */
 const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
   placeholder,
   value,
@@ -130,6 +133,9 @@ const InnerTextarea: FC<FieldProps<BaseProps, HTMLTextAreaElement, string>> = ({
   );
 };
 
+/**
+ * @deprecated
+ */
 const Textarea: FieldType<BaseProps, HTMLTextAreaElement, string> = createFormFieldWrapper(InnerTextarea);
 
 export default Textarea;

scm-ui/ui-components/src/forms/TriStateCheckbox.tsx

@@ -32,6 +32,9 @@ type Props = {
   testId?: string;
 };
 
+/**
+ * @deprecated
+ */
 const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label, testId }) => {
   let icon;
   if (indeterminate) {

scm-ui/ui-components/src/forms/useAutofocus.ts

@@ -47,4 +47,7 @@ const useAutofocus = <T extends HTMLElement | null>(enabled?: boolean, innerRef?
   return ref;
 };
 
+/**
+ * @deprecated
+ */
 export default useAutofocus;

scm-ui/ui-components/src/forms/useInnerRef.ts

@@ -40,4 +40,7 @@ const useInnerRef = <T extends HTMLElement | null>(innerRef?: React.ForwardedRef
   return ref;
 };
 
+/**
+ * @deprecated
+ */
 export default useInnerRef;

scm-ui/ui-components/src/popover/Popover.tsx

@@ -43,7 +43,7 @@ type ContainerProps = {
 const PopoverContainer = styled.div<ContainerProps>`
   position: absolute;
   z-index: 100;
-  width: ${props => props.width}px;
+  width: ${(props) => props.width}px;
   display: block;
 
   &:before {
@@ -54,7 +54,7 @@ const PopoverContainer = styled.div<ContainerProps>`
     height: 0;
     width: 0;
     top: 100%;
-    left: ${props => props.width / 2}px;
+    left: ${(props) => props.width / 2}px;
     border-color: transparent;
     border-bottom-color: var(--scm-popover-border-color);
     border-left-color: var(--scm-popover-border-color);
@@ -71,7 +71,10 @@ const PopoverHeading = styled.div`
   height: 1.5em;
 `;
 
-const Popover: FC<Props> = props => {
+/**
+ * @deprecated use {@link ui-overlays/popover} instead
+ */
+const Popover: FC<Props> = (props) => {
   if (!props.show) {
     return null;
   }
@@ -89,13 +92,13 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover"
+      type: "enter-popover",
     });
   };
 
   const onMouseLeave = () => {
     dispatch({
-      type: "leave-popover"
+      type: "leave-popover",
     });
   };
 
@@ -118,7 +121,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 };
 
 Popover.defaultProps = {
-  width: 120
+  width: 120,
 };
 
 export default Popover;

scm-ui/ui-components/src/popover/usePopover.ts

@@ -100,6 +100,9 @@ const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => {
   setTimeout(() => dispatch(action), 250);
 };
 
+/**
+ * @deprecated
+ */
 const usePopover = () => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const triggerRef = useRef<HTMLElement | null>(null);

scm-ui/ui-components/src/table/Column.tsx

@@ -28,6 +28,9 @@ type Props = ColumnProps & {
   children: (row: any, columnIndex: number, rowIndex: number) => ReactNode;
 };
 
+/**
+ * @deprecated
+ */
 const Column: FC<Props> = ({ row, columnIndex, rowIndex, children }) => {
   if (row === undefined) {
     throw new Error("missing row, use column only as child of Table");

scm-ui/ui-components/src/table/InfoTable.tsx

@@ -51,6 +51,9 @@ const StyledTable = styled.table`
   }
 `;
 
+/**
+ * @deprecated
+ */
 const InfoTable: FC<Props> = ({ className, children, ...rest }) => (
   <StyledTable className={classNames("table", className)} {...rest}>
     {children}

scm-ui/ui-components/src/table/SortIcon.tsx

@@ -30,6 +30,9 @@ type Props = {
   isVisible: boolean;
 };
 
+/**
+ * @deprecated
+ */
 const SortIcon: FC<Props> = (props: Props) => {
   return (
     <Icon

scm-ui/ui-components/src/table/Table.tsx

@@ -35,6 +35,9 @@ type Props = {
   className?: string;
 };
 
+/**
+ * @deprecated
+ */
 const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className }) => {
   const [tableData, setTableData] = useState(data);
   useEffect(() => {
@@ -63,7 +66,9 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
         {React.Children.map(children, (child, columnIndex) => {
           const { className: columnClassName, ...childProperties } = (child as ReactElement).props;
           return (
-            <td className={columnClassName}>{React.cloneElement((child as ReactElement), { ...childProperties, columnIndex, rowIndex, row })}</td>
+            <td className={columnClassName}>
+              {React.cloneElement(child as ReactElement, { ...childProperties, columnIndex, rowIndex, row })}
+            </td>
           );
         })}
       </tr>
@@ -112,14 +117,15 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
         <tr>
           {React.Children.map(children, (child, index) => (
             <th
-              className={isSortable((child as ReactElement)) && "is-clickable"}
-              onClick={isSortable((child as ReactElement)) ? () => tableSort(index) : undefined}
+              className={isSortable(child as ReactElement) && "is-clickable"}
+              onClick={isSortable(child as ReactElement) ? () => tableSort(index) : undefined}
               onMouseEnter={() => setHoveredColumnIndex(index)}
               onMouseLeave={() => setHoveredColumnIndex(undefined)}
               key={index}
             >
               {(child as ReactElement).props.header}
-              {isSortable((child as ReactElement)) && renderSortIcon((child as ReactElement), ascending, shouldShowIcon(index))}
+              {isSortable(child as ReactElement) &&
+                renderSortIcon(child as ReactElement, ascending, shouldShowIcon(index))}
             </th>
           ))}
         </tr>
@@ -130,7 +136,7 @@ const Table: FC<Props> = ({ data, sortable, children, emptyMessage, className })
 };
 
 Table.defaultProps = {
-  sortable: true
+  sortable: true,
 };
 
 const renderSortIcon = (child: ReactElement, ascending: boolean, showIcon: boolean) => {

scm-ui/ui-components/src/table/TextColumn.tsx

@@ -29,6 +29,9 @@ type Props = ColumnProps & {
   dataKey: string;
 };
 
+/**
+ * @deprecated
+ */
 const TextColumn: FC<Props> = ({ row, dataKey }) => {
   return row[dataKey];
 };