@omnsight/osint-entity-components 0.1.4 → 0.2.1

package/dist/osint-entity-components.css

@@ -0,0 +1,2 @@
+.entity-avatar{border:2px solid var(--mantine-color-body);transition:all .2s}.entity-avatar:hover{transform:scale(1.25);box-shadow:0 4px 8px #0003;z-index:100!important}
+/*$vite$:1*/

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.4",
+  "version": "0.2.1",
   "engines": {
     "node": ">=24.0.0"
   },
@@ -54,9 +54,11 @@
     "@mantine/hooks": "^8.3.18",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
+    "omni-monitoring-client": "latest",
     "omni-osint-crud-client": "latest",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-hook-form": "^7.72.0",
     "react-i18next": "^16.6.6"
   },
   "devDependencies": {

package/src/App.tsx

@@ -42,12 +42,14 @@ import type {
   Website,
   Relation,
 } from "omni-osint-crud-client";
+import type { MonitoringSource } from "omni-monitoring-client";
 import {
   EventCard,
   OrganizationCard,
   PersonCard,
   SourceCard,
   WebsiteCard,
+  MonitoringSourceCard,
 } from "./cards";
 import { ArrowRightIcon } from "@heroicons/react/24/solid";
 
@@ -87,6 +89,13 @@ function App() {
     description: "An example website.",
     tags: ["website", "example"],
   });
+  const [monitoringSource] = useState<MonitoringSource>({
+    name: "Test Monitoring Source",
+    description:
+      "This is a test description for the monitoring source card. It should truncate after a certain point to avoid overflowing the card.",
+    reliability: 75,
+    owner: "test-owner",
+  });
   const [relation] = useState<Relation>({
     _id: "relation-1",
     _from: "person-1",
@@ -112,7 +121,13 @@ function App() {
         >
           Toggle Language
         </Button>
-        <Button onClick={() => setColorScheme(colorScheme === "dark" ? "light" : "dark")}>Toggle Theme</Button>
+        <Button
+          onClick={() =>
+            setColorScheme(colorScheme === "dark" ? "light" : "dark")
+          }
+        >
+          Toggle Theme
+        </Button>
       </Group>
       <ScrollArea style={{ height: "100vh" }}>
         <SimpleGrid
@@ -233,9 +248,14 @@ function App() {
                 <OrganizationCard organization={{}} />
                 <SourceCard source={{}} />
                 <WebsiteCard website={{}} />
+                <MonitoringSourceCard monitoringSource={{ owner: "" }} />
               </Stack>
             </ScrollArea>
           </Card>
+
+          <Card withBorder style={cardStyle}>
+            <MonitoringSourceCard monitoringSource={monitoringSource} />
+          </Card>
         </SimpleGrid>
       </ScrollArea>
     </>

package/src/cards/EventCard.tsx

@@ -1,4 +1,4 @@
-import { Badge, Group, Paper, Stack, Text, Title } from "@mantine/core";
+import { Badge, Group, Paper, ScrollArea, Stack, Text, Title } from "@mantine/core";
 import { type Event } from "omni-osint-crud-client";
 import { useTranslation } from "react-i18next";
 import React from "react";
@@ -22,15 +22,17 @@ export const EventCard: React.FC<Props> = ({
     <Paper p="xs" bg={background} withBorder={withBorder}>
       <Group justify="space-between" wrap="nowrap" align="flex-start">
         <Stack gap={0}>
-          <Title>{event.title || t("event.title")}</Title>
+          <Title order={2}>{event.title || t("event.title")}</Title>
           {event.happened_at && (
             <Text c="dimmed">
               {new Date(event.happened_at * 1000).toLocaleString()}
             </Text>
           )}
-          <Text truncate="end">
-            {event.description || t("event.description")}
-          </Text>
+          <ScrollArea h={50} type="auto" offsetScrollbars>
+            <Text>
+              {event.description || t("event.description")}
+            </Text>
+          </ScrollArea>
           {event.tags && (
             <Group gap="xs" mt="xs">
               {event.tags.map((tag) => (

package/src/cards/MonittoringSourceCard.tsx

@@ -0,0 +1,61 @@
+import { Group, Paper, RingProgress, Stack, Text, Title, ScrollArea } from "@mantine/core";
+import { type MonitoringSource } from "omni-monitoring-client";
+import { useTranslation } from "react-i18next";
+import React from "react";
+
+interface Props {
+  monitoringSource: MonitoringSource;
+  background?: string;
+  withBorder?: boolean;
+  action?: React.ReactNode;
+}
+
+export const MonitoringSourceCard: React.FC<Props> = ({
+  monitoringSource,
+  background,
+  withBorder = true,
+  action,
+}) => {
+  const { t } = useTranslation();
+
+  const reliability = monitoringSource.reliability || 0;
+  const color = reliability < 50 ? "red" : reliability < 80 ? "yellow" : "green";
+
+  return (
+    <Paper p="xs" bg={background} withBorder={withBorder}>
+      <Group justify="space-between" wrap="nowrap" align="flex-start">
+        <Stack gap={0}>
+          <Group>
+            <Title order={2}>
+              {monitoringSource.name || t("monitoringSource.name")}
+            </Title>
+            {monitoringSource.reliability && (
+              <RingProgress
+                size={36}
+                thickness={3}
+                roundCaps
+                sections={[{ value: reliability, color }]}
+                label={
+                  <Text c={color} fw={700} ta="center" size="xs" style={{ fontSize: 9 }}>
+                    {`${reliability}%`}
+                  </Text>
+                }
+              />
+            )}
+          </Group>
+          {monitoringSource.type && (
+            <Text c="dimmed">
+              {monitoringSource.type || t("monitoringSource.type")}
+            </Text>
+          )}
+          <ScrollArea h={50} type="auto" offsetScrollbars>
+            <Text>
+              {monitoringSource.description || t("monitoringSource.description")}
+            </Text>
+          </ScrollArea>
+        </Stack>
+        {action}
+      </Group>
+    </Paper>
+  );
+};

package/src/cards/OrganizationCard.tsx

@@ -22,7 +22,7 @@ export const OrganizationCard: React.FC<Props> = ({
     <Paper withBorder={withBorder} p="xs" bg={background}>
       <Group justify="space-between" wrap="nowrap" align="flex-start">
         <Stack gap={0}>
-          <Title>{organization.name || t("organization.name")}</Title>
+          <Title order={2}>{organization.name || t("organization.name")}</Title>
           {organization.tags && (
             <Group gap="xs" mt="xs">
               {organization.tags.map((tag) => (

package/src/cards/PersonCard.tsx

@@ -22,7 +22,7 @@ export const PersonCard: React.FC<Props> = ({
     <Paper withBorder={withBorder} p="xs" bg={background}>
       <Group justify="space-between" wrap="nowrap" align="flex-start">
         <Stack gap={0}>
-          <Title>{person.name || t("person.name")}</Title>
+          <Title order={2}>{person.name || t("person.name")}</Title>
           {person.role && (
             <Text c="dimmed">{person.role || t("person.role")}</Text>
           )}

package/src/cards/SourceCard.tsx

@@ -3,6 +3,7 @@ import {
   Badge,
   Group,
   Paper,
+  ScrollArea,
   Stack,
   Text,
   Title,
@@ -32,7 +33,7 @@ export const SourceCard: React.FC<Props> = ({
       <Group justify="space-between" wrap="nowrap" align="flex-start">
         <Stack gap={0}>
           <Group>
-            <Title>{source.name || t("source.name")}</Title>
+            <Title order={2}>{source.name || t("source.name")}</Title>
             {source.url && (
               <ActionIcon
                 variant="subtle"
@@ -45,9 +46,11 @@ export const SourceCard: React.FC<Props> = ({
               </ActionIcon>
             )}
           </Group>
-          <Text truncate="end">
-            {source.description || t("source.description")}
-          </Text>
+          <ScrollArea h={50} type="auto" offsetScrollbars>
+            <Text>
+              {source.description || t("source.description")}
+            </Text>
+          </ScrollArea>
           {source.tags && (
             <Group gap="xs" mt="xs">
               {source.tags.map((tag) => (

package/src/cards/WebsiteCard.tsx

@@ -3,6 +3,7 @@ import {
   Badge,
   Group,
   Paper,
+  ScrollArea,
   Stack,
   Text,
   Title,
@@ -32,7 +33,7 @@ export const WebsiteCard: React.FC<Props> = ({
       <Group justify="space-between" wrap="nowrap" align="flex-start">
         <Stack gap={0}>
           <Group>
-            <Title>{website.title || t("website.title")}</Title>
+            <Title order={2}>{website.title || t("website.title")}</Title>
             {website.url && (
               <ActionIcon
                 variant="subtle"
@@ -45,9 +46,11 @@ export const WebsiteCard: React.FC<Props> = ({
               </ActionIcon>
             )}
           </Group>
-          <Text truncate="end">
-            {website.description || t("website.description")}
-          </Text>
+          <ScrollArea h={50} type="auto" offsetScrollbars>
+            <Text>
+              {website.description || t("website.description")}
+            </Text>
+          </ScrollArea>
           {website.tags && (
             <Group gap="xs" mt="xs">
               {website.tags.map((tag) => (

package/src/cards/index.ts

@@ -3,3 +3,4 @@ export * from './PersonCard';
 export * from './OrganizationCard';
 export * from './WebsiteCard';
 export * from './SourceCard';
+export * from './MonittoringSourceCard';

package/src/icons/Event/Select.tsx

@@ -26,7 +26,7 @@ export const EventIconSelector: React.FC<EventIconSelectorProps> = ({
     <Select
       leftSection={<EventIcon event={data} />}
       defaultValue={translatedOptions[0].value}
-      value={value}
+      value={value ?? ""}
       onChange={onChange}
       data={translatedOptions}
       style={{ flex: 1 }}
@@ -55,7 +55,8 @@ export const EventColorSelector: React.FC<EventColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}
@@ -90,7 +91,7 @@ export const EventIconSelect: React.FC<EventIconSelectProps> = ({
         value={value.type}
         onChange={handleTypeChange}
       />
-      <EventColorSelector 
+      <EventColorSelector
         value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
       />

package/src/icons/Organization/Select.tsx

@@ -24,7 +24,7 @@ export const OrganizationIconSelector: React.FC<
     <Select
       leftSection={<OrganizationIcon organization={data} />}
       defaultValue={translatedOptions[0].value}
-      value={value}
+      value={value ?? ""}
       onChange={onChange}
       data={translatedOptions}
       style={{ flex: 1 }}
@@ -52,7 +52,8 @@ export const OrganizationColorSelector: React.FC<
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}

package/src/icons/Person/Select.tsx

@@ -1,8 +1,8 @@
-import { type Person } from 'omni-osint-crud-client';
-import { useTranslation } from 'react-i18next';
-import { Group, Select, ColorInput } from '@mantine/core';
-import { ICON_OPTIONS } from './icons';
-import { PersonIcon } from './Icon';
+import { type Person } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import { Group, Select, ColorInput } from "@mantine/core";
+import { ICON_OPTIONS } from "./icons";
+import { PersonIcon } from "./Icon";
 
 interface PersonIconSelectorProps {
   data: Person;
@@ -26,7 +26,7 @@ export const PersonIconSelector: React.FC<PersonIconSelectorProps> = ({
     <Select
       leftSection={<PersonIcon person={data} />}
       defaultValue={translatedOptions[0].value}
-      value={value}
+      value={value ?? ""}
       onChange={onChange}
       data={translatedOptions}
       style={{ flex: 1 }}
@@ -55,7 +55,8 @@ export const PersonColorSelector: React.FC<PersonColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}

package/src/icons/Source/Select.tsx

@@ -26,7 +26,7 @@ export const SourceIconSelector: React.FC<SourceIconSelectorProps> = ({
     <Select
       leftSection={<SourceIcon source={data} />}
       defaultValue={translatedOptions[0].value}
-      value={value}
+      value={value ?? ""}
       onChange={onChange}
       data={translatedOptions}
       style={{ flex: 1 }}
@@ -55,7 +55,8 @@ export const SourceColorSelector: React.FC<SourceColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}
@@ -91,7 +92,7 @@ export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
         onChange={handleTypeChange}
       />
       <SourceColorSelector
-        value={String(value.attributes?.icon_color)}
+        value={String(value.attributes?.icon_color ?? "")}
         onChange={handleColorChange}
       />
     </Group>

package/src/icons/Website/Select.tsx

@@ -26,7 +26,7 @@ export const WebsiteIconSelector: React.FC<WebsiteIconSelectorProps> = ({
     <Select
       leftSection={<WebsiteIcon website={data} />}
       defaultValue={translatedOptions[0].value}
-      value={value}
+      value={value ?? ""}
       onChange={onChange}
       data={translatedOptions}
       style={{ flex: 1 }}
@@ -55,7 +55,8 @@ export const WebsiteColorSelector: React.FC<WebsiteColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}

package/src/locales/en.json

@@ -66,6 +66,11 @@
     "title": "Title",
     "description": "Description"
   },
+  "monitoringSource": {
+    "name": "Name",
+    "type": "Type",
+    "description": "Description"
+  },
   "tooltip": {
     "relation": "Related",
     "confidence": "Confidence",

package/src/locales/zh.json

@@ -65,7 +65,11 @@
     },
     "title": "标题",
     "description": "描述"
-  
+  },
+  "monitoringSource": {
+    "name": "名称",
+    "type": "类型",
+    "description": "描述"
   },
   "tooltip": {
     "relation": "相关",