Add document type field

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

packages/ui/src/Layouts/Layout.tsx

@@ -25,15 +25,14 @@ const LayoutContext = createContext({
 
 export function Layout({ header, sidebar, children }: Props) {
     const [hasDrawer, setDrawer] = useState(false);
+    const layoutContext = useMemo(
+        () => ({
+            setDrawer,
+        }),
+        [],
+    );
     return (
-        <LayoutContext
-            value={useMemo(
-                () => ({
-                    setDrawer,
-                }),
-                [],
-            )}
-        >
+        <LayoutContext value={layoutContext}>
             <div className="text-txt-primary bg-level-0">
                 <header className="absolute z-2 left-0 right-0 px-4 flex items-center border-b border-border-solid h-12 bg-level-1">
                     <Logo className="w-12 h-5" />

packages/ui/src/Molecules/Badge/DocumentTypeBadge.stories.tsx

@@ -0,0 +1,16 @@
+import { DocumentTypeBadge } from "./DocumentTypeBadge";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Molecules/Badges/DocumentTypeBadge",
+    component: DocumentTypeBadge,
+    argTypes: {},
+} satisfies Meta<typeof DocumentTypeBadge>;
+
+type Story = StoryObj<typeof DocumentTypeBadge>;
+
+export const Default: Story = {
+    args: {
+        type: "OTHER",
+    },
+};

packages/ui/src/Molecules/Badge/DocumentTypeBadge.tsx

@@ -0,0 +1,12 @@
+import { Badge } from "../../Atoms/Badge/Badge";
+import { getDocumentTypeLabel } from "@probo/helpers";
+import { useTranslate } from "@probo/i18n";
+
+type Props = {
+    type: string;
+};
+
+export function DocumentTypeBadge({ type }: Props) {
+    const { __ } = useTranslate();
+    return <Badge variant="neutral">{getDocumentTypeLabel(__, type)}</Badge>;
+}

packages/ui/src/index.ts

@@ -61,6 +61,7 @@ export { FileButton } from "./Molecules/FileButton/FileButton";
 export { MeasureBadge } from "./Molecules/Badge/MeasureBadge";
 export { MeasureImplementation } from "./Molecules/MeasureImplementation/MeasureImplementation";
 export { FrameworkSelector } from "./Molecules/FrameworkSelector/FrameworkSelector";
+export { DocumentTypeBadge } from "./Molecules/Badge/DocumentTypeBadge";
 
 // Hooks
 export { useToast, Toasts } from "./Atoms/Toasts/Toasts";