Add document type field

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

packages/helpers/src/documents.ts

@@ -0,0 +1,14 @@
+type Translator = (s: string) => string;
+
+export const documentTypes = ["OTHER", "ISMS", "POLICY"] as const;
+
+export function getDocumentTypeLabel(__: Translator, type: string) {
+    switch (type) {
+        case "OTHER":
+            return __("Other");
+        case "ISMS":
+            return __("ISMS");
+        case "POLICY":
+            return __("Policy");
+    }
+}

packages/helpers/src/index.ts

@@ -1,5 +1,5 @@
 export { objectKeys, objectEntries } from "./object";
-export { sprintf, faviconUrl } from "./string";
+export { sprintf, faviconUrl, slugify } from "./string";
 export {
     getTreatment,
     getRiskImpacts,
@@ -13,3 +13,4 @@ export { getMeasureStateLabel, measureStates } from "./measure";
 export { getRole, getRoles, peopleRoles } from "./people";
 export { certificationCategoryLabel, certifications } from "./certifications";
 export { availableFrameworks } from "./frameworks";
+export { getDocumentTypeLabel, documentTypes } from "./documents";

packages/helpers/src/string.ts

@@ -20,3 +20,13 @@ export function faviconUrl(url?: string | null): string | null {
         return null;
     }
 }
+
+export function slugify(str: string): string {
+    return str
+        .normalize("NFD") // split an accented letter in the base letter and the acent
+        .replace(/[\u0300-\u036f]/g, "") // remove all previously split accents
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9 ]/g, "") // remove all chars not letters, numbers and spaces (to be replaced)
+        .replace(/\s+/g, "-");
+}

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";