From 3eca63a67c898256b711d37607f07cbabb9ed323 Mon Sep 17 00:00:00 2001
From: Treycos <19551067+Treycos@users.noreply.github.com>
Date: Mon, 19 Aug 2024 03:54:30 +0200
Subject: [PATCH] Convert Label to TypeScript

---
 frontend/src/Components/Label.js              | 48 -------------------
 frontend/src/Components/Label.tsx             | 31 ++++++++++++
 .../src/Helpers/Props/{kinds.js => kinds.ts}  |  4 +-
 .../src/Helpers/Props/{sizes.js => sizes.ts}  | 10 +++-
 .../src/System/Status/DiskSpace/DiskSpace.tsx |  2 +-
 5 files changed, 43 insertions(+), 52 deletions(-)
 delete mode 100644 frontend/src/Components/Label.js
 create mode 100644 frontend/src/Components/Label.tsx
 rename frontend/src/Helpers/Props/{kinds.js => kinds.ts} (95%)
 rename frontend/src/Helpers/Props/{sizes.js => sizes.ts} (66%)

diff --git a/frontend/src/Components/Label.js b/frontend/src/Components/Label.js
deleted file mode 100644
index 844da8165..000000000
--- a/frontend/src/Components/Label.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { kinds, sizes } from 'Helpers/Props';
-import styles from './Label.css';
-
-function Label(props) {
-  const {
-    className,
-    kind,
-    size,
-    outline,
-    children,
-    ...otherProps
-  } = props;
-
-  return (
-    <span
-      className={classNames(
-        className,
-        styles[kind],
-        styles[size],
-        outline && styles.outline
-      )}
-      {...otherProps}
-    >
-      {children}
-    </span>
-  );
-}
-
-Label.propTypes = {
-  className: PropTypes.string.isRequired,
-  title: PropTypes.string,
-  kind: PropTypes.oneOf(kinds.all).isRequired,
-  size: PropTypes.oneOf(sizes.all).isRequired,
-  outline: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired
-};
-
-Label.defaultProps = {
-  className: styles.label,
-  kind: kinds.DEFAULT,
-  size: sizes.SMALL,
-  outline: false
-};
-
-export default Label;
diff --git a/frontend/src/Components/Label.tsx b/frontend/src/Components/Label.tsx
new file mode 100644
index 000000000..411cefddf
--- /dev/null
+++ b/frontend/src/Components/Label.tsx
@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import React, { ComponentProps, ReactNode } from 'react';
+import { kinds, sizes } from 'Helpers/Props';
+import styles from './Label.css';
+
+export interface LabelProps extends ComponentProps<'span'> {
+  kind?: Extract<(typeof kinds.all)[number], keyof typeof styles>;
+  size?: Extract<(typeof sizes.all)[number], keyof typeof styles>;
+  outline?: boolean;
+  children: ReactNode;
+}
+
+export default function Label({
+  className = styles.label,
+  kind = kinds.DEFAULT,
+  size = sizes.SMALL,
+  outline = false,
+  ...otherProps
+}: LabelProps) {
+  return (
+    <span
+      className={classNames(
+        className,
+        styles[kind],
+        styles[size],
+        outline && styles.outline
+      )}
+      {...otherProps}
+    />
+  );
+}
diff --git a/frontend/src/Helpers/Props/kinds.js b/frontend/src/Helpers/Props/kinds.ts
similarity index 95%
rename from frontend/src/Helpers/Props/kinds.js
rename to frontend/src/Helpers/Props/kinds.ts
index fd2c17f7b..5d4d53057 100644
--- a/frontend/src/Helpers/Props/kinds.js
+++ b/frontend/src/Helpers/Props/kinds.ts
@@ -19,5 +19,5 @@ export const all = [
   PRIMARY,
   PURPLE,
   SUCCESS,
-  WARNING
-];
+  WARNING,
+] as const;
diff --git a/frontend/src/Helpers/Props/sizes.js b/frontend/src/Helpers/Props/sizes.ts
similarity index 66%
rename from frontend/src/Helpers/Props/sizes.js
rename to frontend/src/Helpers/Props/sizes.ts
index 6ac15f3bd..809f0397a 100644
--- a/frontend/src/Helpers/Props/sizes.js
+++ b/frontend/src/Helpers/Props/sizes.ts
@@ -4,4 +4,12 @@ export const MEDIUM = 'medium';
 export const LARGE = 'large';
 export const EXTRA_LARGE = 'extraLarge';
 export const EXTRA_EXTRA_LARGE = 'extraExtraLarge';
-export const all = [EXTRA_SMALL, SMALL, MEDIUM, LARGE, EXTRA_LARGE, EXTRA_EXTRA_LARGE];
+
+export const all = [
+  EXTRA_SMALL,
+  SMALL,
+  MEDIUM,
+  LARGE,
+  EXTRA_LARGE,
+  EXTRA_EXTRA_LARGE,
+] as const;
diff --git a/frontend/src/System/Status/DiskSpace/DiskSpace.tsx b/frontend/src/System/Status/DiskSpace/DiskSpace.tsx
index 4a19cf1c9..2174e5b1e 100644
--- a/frontend/src/System/Status/DiskSpace/DiskSpace.tsx
+++ b/frontend/src/System/Status/DiskSpace/DiskSpace.tsx
@@ -67,7 +67,7 @@ function DiskSpace() {
               const { freeSpace, totalSpace } = item;
 
               const diskUsage = 100 - (freeSpace / totalSpace) * 100;
-              let diskUsageKind = kinds.PRIMARY;
+              let diskUsageKind: (typeof kinds.all)[number] = kinds.PRIMARY;
 
               if (diskUsage > 90) {
                 diskUsageKind = kinds.DANGER;