@omnsight/osint-entity-components 0.2.0 → 0.2.2

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.2.0",
+  "version": "0.2.2",
   "engines": {
     "node": ">=24.0.0"
   },
@@ -58,6 +58,7 @@
     "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/cards/MonittoringSourceCard.tsx

@@ -1,4 +1,4 @@
-import { Group, Paper, RingProgress, Stack, Text, Title, Textarea, ScrollArea } from "@mantine/core";
+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";

package/src/icons/Event/Select.tsx

@@ -8,12 +8,14 @@ interface EventIconSelectorProps {
   data: Event;
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const EventIconSelector: React.FC<EventIconSelectorProps> = ({
   data,
   value,
   onChange,
+  error,
 }) => {
   const { t } = useTranslation();
 
@@ -26,10 +28,11 @@ 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 }}
+      error={error}
     />
   );
 };
@@ -37,11 +40,13 @@ export const EventIconSelector: React.FC<EventIconSelectorProps> = ({
 interface EventColorSelectorProps {
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const EventColorSelector: React.FC<EventColorSelectorProps> = ({
   value,
   onChange,
+  error,
 }) => {
   const colors = [
     "#0089ff",
@@ -55,10 +60,12 @@ export const EventColorSelector: React.FC<EventColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}
+      error={error}
     />
   );
 };
@@ -90,7 +97,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

@@ -8,11 +8,12 @@ interface OrganizationIconSelectorProps {
   data: Organization;
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const OrganizationIconSelector: React.FC<
   OrganizationIconSelectorProps
-> = ({ data, value, onChange }) => {
+> = ({ data, value, onChange, error }) => {
   const { t } = useTranslation();
 
   const translatedOptions = ICON_OPTIONS.map((option) => ({
@@ -24,9 +25,10 @@ export const OrganizationIconSelector: React.FC<
     <Select
       leftSection={<OrganizationIcon organization={data} />}
       defaultValue={translatedOptions[0].value}
-      value={value}
+      value={value ?? ""}
       onChange={onChange}
       data={translatedOptions}
+      error={error}
       style={{ flex: 1 }}
     />
   );
@@ -35,11 +37,12 @@ export const OrganizationIconSelector: React.FC<
 interface OrganizationColorSelectorProps {
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const OrganizationColorSelector: React.FC<
   OrganizationColorSelectorProps
-> = ({ value, onChange }) => {
+> = ({ value, onChange, error }) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -52,10 +55,12 @@ export const OrganizationColorSelector: React.FC<
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}
+      error={error}
     />
   );
 };

package/src/icons/Person/Select.tsx

@@ -1,19 +1,21 @@
-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;
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const PersonIconSelector: React.FC<PersonIconSelectorProps> = ({
   data,
   value,
   onChange,
+  error,
 }) => {
   const { t } = useTranslation();
 
@@ -26,10 +28,11 @@ 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 }}
+      error={error}
     />
   );
 };
@@ -37,11 +40,13 @@ export const PersonIconSelector: React.FC<PersonIconSelectorProps> = ({
 interface PersonColorSelectorProps {
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const PersonColorSelector: React.FC<PersonColorSelectorProps> = ({
   value,
   onChange,
+  error,
 }) => {
   const colors = [
     "#0089ff",
@@ -55,10 +60,12 @@ export const PersonColorSelector: React.FC<PersonColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}
+      error={error}
     />
   );
 };

package/src/icons/Source/Select.tsx

@@ -8,12 +8,14 @@ interface SourceIconSelectorProps {
   data: Source;
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const SourceIconSelector: React.FC<SourceIconSelectorProps> = ({
   data,
   value,
   onChange,
+  error,
 }) => {
   const { t } = useTranslation();
 
@@ -26,10 +28,11 @@ 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 }}
+      error={error}
     />
   );
 };
@@ -37,11 +40,13 @@ export const SourceIconSelector: React.FC<SourceIconSelectorProps> = ({
 interface SourceColorSelectorProps {
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const SourceColorSelector: React.FC<SourceColorSelectorProps> = ({
   value,
   onChange,
+  error,
 }) => {
   const colors = [
     "#ababab",
@@ -55,10 +60,12 @@ export const SourceColorSelector: React.FC<SourceColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}
+      error={error}
     />
   );
 };
@@ -91,7 +98,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

@@ -8,12 +8,14 @@ interface WebsiteIconSelectorProps {
   data: Website;
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const WebsiteIconSelector: React.FC<WebsiteIconSelectorProps> = ({
   data,
   value,
   onChange,
+  error,
 }) => {
   const { t } = useTranslation();
 
@@ -26,10 +28,11 @@ 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 }}
+      error={error}
     />
   );
 };
@@ -37,11 +40,13 @@ export const WebsiteIconSelector: React.FC<WebsiteIconSelectorProps> = ({
 interface WebsiteColorSelectorProps {
   value?: string | null;
   onChange: (value: string | null) => void;
+  error?: string;
 }
 
 export const WebsiteColorSelector: React.FC<WebsiteColorSelectorProps> = ({
   value,
   onChange,
+  error,
 }) => {
   const colors = [
     "#0089ff",
@@ -55,10 +60,12 @@ export const WebsiteColorSelector: React.FC<WebsiteColorSelectorProps> = ({
 
   return (
     <ColorInput
-      value={value || colors[0]}
+      defaultValue={colors[0]}
+      value={value ?? ""}
       onChange={onChange}
       swatches={colors}
       style={{ flex: 1 }}
+      error={error}
     />
   );
 };