@kanda-libs/ks-component-ts 0.2.209 → 0.2.210

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanda-libs/ks-component-ts",
-  "version": "0.2.209",
+  "version": "0.2.210",
   "description": "Kanda form component library",
   "main": "dist/index.esm.js",
   "module": "dist/index.esm.js",

package/src/components/CompanyRiskFlag/constants.ts

@@ -0,0 +1,11 @@
+import type { StringIndexedObject } from "~/types";
+
+// Without explicitly mentioning this class, it won't appear in the tailwind
+// config build as COMPANY_RISK_FLAG_STROKES passes to Icon which uses string concatenation
+export const COMPANY_RISK_YELLOW = "text-yellow";
+
+export const COMPANY_RISK_FLAG_STROKES: StringIndexedObject<string> = {
+  red: "red-200",
+  yellow: "yellow",
+  green: "green-500",
+};

package/src/components/CompanyRiskFlag/index.tsx

@@ -0,0 +1,31 @@
+import React, { type FunctionComponent } from "react";
+import { Icon } from "@kanda-libs/ks-design-library";
+import type { Monitor } from "generated/components/schemas";
+import type { StringIndexedObject } from "~/types";
+import { COMPANY_RISK_FLAG_STROKES } from "./constants";
+import useCompanyRiskFlag from "./useCompanyRiskFlag";
+
+export interface CompanyRiskFlagProps {
+  id?: string;
+  monitors?: StringIndexedObject<Monitor>;
+  className?: string;
+}
+
+const CompanyRiskFlag: FunctionComponent<CompanyRiskFlagProps> = function ({
+  id,
+  monitors = {},
+  className = "",
+}) {
+  const { level } = useCompanyRiskFlag(id, monitors);
+
+  return (
+    <Icon
+      icon="flag"
+      size={18}
+      stroke={COMPANY_RISK_FLAG_STROKES[level as string]}
+      className={className}
+    />
+  );
+};
+
+export default CompanyRiskFlag;

package/src/components/CompanyRiskFlag/useCompanyRiskFlag.ts

@@ -0,0 +1,17 @@
+import type { Flag, Monitor } from "@kanda-libs/ks-frontend-services";
+import type { StringIndexedObject } from "~/types";
+
+export interface CompanyRiskFlagHook {
+  level?: Flag["level"];
+}
+
+export default function useCompanyRiskFlag(
+  id: string = "",
+  monitors: StringIndexedObject<Monitor>
+): CompanyRiskFlagHook {
+  const monitor = monitors[id];
+
+  return {
+    level: monitor?.flag?.level || "green",
+  };
+}

package/src/components/index.ts

@@ -1,4 +1,5 @@
 export { default as AddFieldButton } from "./AddFieldButton";
+export { default as CompanyRiskFlag } from "./CompanyRiskFlag";
 export { default as Dropzone } from "./Dropzone";
 export { default as DropzoneContext } from "./Dropzone/DropzoneContext";
 export { default as FieldHandle } from "./Handle";