feat: add import for config files from oldmarr (#1019)

* wip: add oldmarr config import

* wip: add support for wrong amount of categories / sections with autofix, color mapping, position adjustments of wrappers

* fix: lockfile broken

* feat: add support for form data trpc requests

* wip: improve file upload

* refactor: restructure import, add import configuration

* wip: add configurations for import to modal

* refactor: move oldmarr import to old-import package

* fix: column count not respects screen size for board

* feat: add beta badge for oldmarr config import

* chore: address pull request feedback

* fix: format issues

* fix: inconsistent versions

* fix: deepsource issues

* fix: revert {} to Record<string, never> convertion to prevent typecheck issue

* fix: inconsistent zod version

* fix: format issue

* chore: address pull request feedback

* fix: wrong import

* fix: broken lock file

* fix: inconsistent versions

* fix: format issues

packages/ui/src/components/beta-badge.tsx

@@ -0,0 +1,17 @@
+import type { BadgeProps } from "@mantine/core";
+import { Badge } from "@mantine/core";
+
+import { useI18n } from "@homarr/translation/client";
+
+interface BetaBadgeProps {
+  size: BadgeProps["size"];
+}
+
+export const BetaBadge = ({ size }: BetaBadgeProps) => {
+  const t = useI18n();
+  return (
+    <Badge size={size} color="green" variant="outline">
+      {t("common.beta")}
+    </Badge>
+  );
+};

packages/ui/src/components/index.tsx

@@ -8,3 +8,4 @@ export { TextMultiSelect } from "./text-multi-select";
 export { UserAvatar } from "./user-avatar";
 export { UserAvatarGroup } from "./user-avatar-group";
 export { CustomPasswordInput } from "./password-input/password-input";
+export { BetaBadge } from "./beta-badge";

packages/ui/src/components/select-with-custom-items.tsx

@@ -13,6 +13,8 @@ interface BaseSelectItem {
 export interface SelectWithCustomItemsProps<TSelectItem extends BaseSelectItem>
   extends Pick<SelectProps, "label" | "error" | "defaultValue" | "value" | "onChange" | "placeholder"> {
   data: TSelectItem[];
+  description?: string;
+  withAsterisk?: boolean;
   onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 }