@omnsight/osint-entity-components 0.1.0

package/src/icons/Organization/Icon.tsx

@@ -0,0 +1,41 @@
+import { ThemeIcon } from "@mantine/core";
+import { BuildingOfficeIcon } from "@heroicons/react/24/solid";
+import { type Organization } from "omni-osint-crud-client";
+import { ICON_OPTIONS } from "./icons";
+
+interface Props {
+  organization: Organization;
+  size?: number | string;
+  [key: string]: any;
+}
+
+/**
+ * Renders an icon for an organization based on its type.
+ * @param organization The organization object, must contain 'type' and 'attributes'.
+ * @param props Additional props to pass to the icon.
+ * @returns A component displaying the organization icon.
+ */
+export const OrganizationIcon: React.FC<Props> = ({
+  organization,
+  size = "md",
+  ...props
+}) => {
+  const iconColor = String(
+    (organization.attributes || {}).icon_color || "#0089ff",
+  );
+
+  const selectedType = ICON_OPTIONS.find(
+    (option) => option.value === organization.type,
+  );
+  const Icon =
+    selectedType && selectedType.icon ? selectedType.icon : BuildingOfficeIcon;
+
+  return (
+    <ThemeIcon variant="filled" size={size} radius="xl" color={iconColor}>
+      <Icon
+        style={{ width: "70%", height: "70%", color: "white" }}
+        {...props}
+      />
+    </ThemeIcon>
+  );
+};

package/src/icons/Organization/Select.tsx

@@ -0,0 +1,61 @@
+import { type Organization } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import { Group, Select, ColorInput } from "@mantine/core";
+import { ICON_OPTIONS } from "./icons";
+import { OrganizationIcon } from "./Icon";
+
+interface OrganizationIconSelectProps {
+  value: Organization;
+  onChange: (value: Organization) => void;
+}
+
+export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation();
+  const colors = [
+    "#0089ff",
+    "#ff0000",
+    "#00ba21",
+    "#c18c17",
+    "#be4bdb",
+    "#ababab",
+    "#7950f2",
+  ];
+
+  const handleTypeChange = (type: string | null) => {
+    onChange({ ...value, type: type || undefined });
+  };
+
+  const handleColorChange = (color: string) => {
+    onChange({
+      ...value,
+      attributes: { ...(value.attributes || {}), icon_color: color },
+    });
+  };
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`organization.type.${option.label}`),
+  }));
+
+  return (
+    <Group>
+      <Select
+        leftSection={<OrganizationIcon organization={value} />}
+        defaultValue={translatedOptions[0].value}
+        value={value.type}
+        onChange={handleTypeChange}
+        data={translatedOptions}
+        style={{ flex: 1 }}
+      />
+      <ColorInput
+        value={String((value.attributes || {}).icon_color || colors[0])}
+        onChange={handleColorChange}
+        swatches={colors}
+        style={{ flex: 1 }}
+      />
+    </Group>
+  );
+};

package/src/icons/Organization/icons.ts

@@ -0,0 +1,53 @@
+import { IconRiSeedlingLine } from '@/assets/icons/generated/ri-seedling-line';
+import { IconMingcuteGovernmentLine } from '@/assets/icons/generated/mingcute-government-line';
+import { IconStreamlineFlexDeepfakeTechnology1Solid } from '@/assets/icons/generated/streamline-flex-deepfake-technology-1-solid';
+import { IconPixelTechnology } from '@/assets/icons/generated/pixel-technology';
+import { IconMdiFactory } from '@/assets/icons/generated/mdi-factory';
+import { IconCodiconOrganization } from '@/assets/icons/generated/codicon-organization';
+
+import { BuildingOfficeIcon } from '@heroicons/react/24/solid';
+
+interface IconOption {
+  value: string;
+  label: string;
+  icon?: React.FC<React.ComponentPropsWithoutRef<'svg'>>;
+}
+
+// Find icon items in https://icon-sets.iconify.design
+export const ICON_OPTIONS: IconOption[] = [
+  {
+    value: 'company',
+    label: 'company',
+    icon: BuildingOfficeIcon,
+  },
+  {
+    value: 'government',
+    label: 'government',
+    icon: IconMingcuteGovernmentLine, // icon: mingcute:government-line
+  },
+  {
+    value: 'military',
+    label: 'military',
+    icon: IconCodiconOrganization, // icon: codicon:organization
+  },
+  {
+    value: 'manufacturing',
+    label: 'manufacturing',
+    icon: IconMdiFactory, // icon: mdi:factory
+  },
+  {
+    value: 'agriculture',
+    label: 'agriculture',
+    icon: IconRiSeedlingLine, // icon: ri:seedling-line
+  },
+  {
+    value: 'semi-conductor',
+    label: 'semi-conductor',
+    icon: IconPixelTechnology, // icon: pixel:technology
+  },
+  {
+    value: 'technology',
+    label: 'technology',
+    icon: IconStreamlineFlexDeepfakeTechnology1Solid, // icon: streamline-flex:deepfake-technology-1-solid
+  },
+]

package/src/icons/Person/Icon.tsx

@@ -0,0 +1,34 @@
+import { ThemeIcon } from "@mantine/core";
+import { UserIcon } from "@heroicons/react/24/solid";
+import { type Person } from "omni-osint-crud-client";
+import { ICON_OPTIONS } from "./icons";
+
+interface Props {
+  person: Person;
+  size?: number | string;
+  [key: string]: any;
+}
+
+/**
+ * Renders an icon for a person based on its type.
+ * @param person The person object, must contain 'type' and 'attributes'.
+ * @param props Additional props to pass to the icon.
+ * @returns A component displaying the person icon.
+ */
+export const PersonIcon: React.FC<Props> = ({ person, size = "md", ...props }) => {
+  const iconColor = String((person.attributes || {}).icon_color || "#0089ff");
+
+  const selectedType = ICON_OPTIONS.find(
+    (option) => option.value === person.type,
+  );
+  const Icon = selectedType && selectedType.icon ? selectedType.icon : UserIcon;
+
+  return (
+    <ThemeIcon variant="filled" size={size} radius="xl" color={iconColor}>
+      <Icon
+        style={{ width: "70%", height: "70%", color: "white" }}
+        {...props}
+      />
+    </ThemeIcon>
+  );
+};

package/src/icons/Person/Select.tsx

@@ -0,0 +1,55 @@
+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 PersonIconSelectProps {
+  value: Person;
+  onChange: (value: Person) => void;
+}
+
+export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+  const colors = [
+    "#0089ff",
+    "#ff0000",
+    "#00ba21",
+    "#c18c17",
+    "#be4bdb",
+    "#ababab",
+    "#7950f2",
+  ];
+
+  const handleTypeChange = (type: string | null) => {
+    onChange({ ...value, type: type || undefined });
+  };
+
+  const handleColorChange = (color: string) => {
+    onChange({ ...value, attributes: { ...(value.attributes || {}), icon_color: color } });
+  };
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`person.type.${option.label}`),
+  }));
+
+  return (
+    <Group>
+      <Select
+        leftSection={<PersonIcon person={value} />}
+        defaultValue={translatedOptions[0].value}
+        value={value.type}
+        onChange={handleTypeChange}
+        data={translatedOptions}
+        style={{ flex: 1 }}
+      />
+      <ColorInput
+        value={String((value.attributes || {}).icon_color || colors[0])}
+        onChange={handleColorChange}
+        swatches={colors}
+        style={{ flex: 1 }}
+      />
+    </Group>
+  );
+};

package/src/icons/Person/icons.ts

@@ -0,0 +1,27 @@
+import { IconMdiAccountSchool } from '@/assets/icons/generated/mdi-account-school';
+import { IconMdiAccountTieHat } from '@/assets/icons/generated/mdi-account-tie-hat';
+import { IconMdiAccountTie } from '@/assets/icons/generated/mdi-account-tie';
+interface IconOption {
+  value: string;
+  label: string;
+  icon?: React.FC<React.ComponentPropsWithoutRef<'svg'>>;
+}
+
+// Find icon items in https://icon-sets.iconify.design
+export const ICON_OPTIONS: IconOption[] = [
+  {
+    value: 'professional',
+    label: 'professional',
+    icon: IconMdiAccountTie, // icon: mdi:account-tie
+  },
+  {
+    value: 'gov-official',
+    label: 'gov-official',
+    icon: IconMdiAccountTieHat, // icon: mdi:account-tie-hat
+  },
+  {
+    value: 'school-personel',
+    label: 'school-personel',
+    icon: IconMdiAccountSchool, // icon: mdi:account-school
+  },
+]

package/src/icons/Source/Icon.tsx

@@ -0,0 +1,35 @@
+import { ThemeIcon } from "@mantine/core";
+import { DocumentIcon } from "@heroicons/react/24/solid";
+import { type Source } from "omni-osint-crud-client";
+import { ICON_OPTIONS } from "./icons";
+
+interface Props {
+  source: Source;
+  size?: number | string;
+  [key: string]: any;
+}
+
+/**
+ * Renders an icon for a source based on its type.
+ * @param source The source object, must contain 'type' and 'attributes'.
+ * @param props Additional props to pass to the icon.
+ * @returns A component displaying the source icon.
+ */
+export const SourceIcon: React.FC<Props> = ({ source, size = "md", ...props }) => {
+  const iconColor = String((source.attributes || {}).icon_color || "#ababab");
+
+  const selectedType = ICON_OPTIONS.find(
+    (option) => option.value === source.type,
+  );
+  const Icon =
+    selectedType && selectedType.icon ? selectedType.icon : DocumentIcon;
+
+  return (
+    <ThemeIcon variant="filled" size={size} radius="xl" color={iconColor}>
+      <Icon
+        style={{ width: "70%", height: "70%", color: "white" }}
+        {...props}
+      />
+    </ThemeIcon>
+  );
+};

package/src/icons/Source/Select.tsx

@@ -0,0 +1,61 @@
+import { type Source } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import { Group, Select, ColorInput } from "@mantine/core";
+import { ICON_OPTIONS } from "./icons";
+import { SourceIcon } from "./Icon";
+
+interface SourceIconSelectProps {
+  value: Source;
+  onChange: (value: Source) => void;
+}
+
+export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation();
+  const colors = [
+    "#ababab",
+    "#0089ff",
+    "#ff0000",
+    "#00ba21",
+    "#c18c17",
+    "#be4bdb",
+    "#7950f2",
+  ];
+
+  const handleTypeChange = (type: string | null) => {
+    onChange({ ...value, type: type || undefined });
+  };
+
+  const handleColorChange = (color: string) => {
+    onChange({
+      ...value,
+      attributes: { ...(value.attributes || {}), icon_color: color },
+    });
+  };
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`source.type.${option.label}`),
+  }));
+
+  return (
+    <Group>
+      <Select
+        leftSection={<SourceIcon source={value} />}
+        defaultValue={translatedOptions[0].value}
+        value={value.type}
+        onChange={handleTypeChange}
+        data={translatedOptions}
+        style={{ flex: 1 }}
+      />
+      <ColorInput
+        value={String((value.attributes || {}).icon_color || colors[0])}
+        onChange={handleColorChange}
+        swatches={colors}
+        style={{ flex: 1 }}
+      />
+    </Group>
+  );
+};

package/src/icons/Source/icons.ts

@@ -0,0 +1,40 @@
+import { IconUitSocialMediaLogo } from '@/assets/icons/generated/uit-social-media-logo';
+import { IconStreamlineCyberNewspaper2 } from '@/assets/icons/generated/streamline-cyber-newspaper-2';
+import { IconBasilDocumentSolid } from '@/assets/icons/generated/basil-document-solid';
+import { IconBoxiconsBook } from '@/assets/icons/generated/boxicons-book';
+import { IconGgWebsite } from '@/assets/icons/generated/gg-website';
+
+interface IconOption {
+  value: string;
+  label: string;
+  icon?: React.FC<React.ComponentPropsWithoutRef<'svg'>>;
+}
+
+// Find icon items in https://icon-sets.iconify.design
+export const ICON_OPTIONS: IconOption[] = [
+  {
+    value: 'news',
+    label: 'news',
+    icon: IconStreamlineCyberNewspaper2, // icon: streamline-cyber:newspaper-2
+  },
+  {
+    value: 'website',
+    label: 'website',
+    icon: IconGgWebsite, // icon: gg:website
+  },
+  {
+    value: 'social-media',
+    label: 'social-media',
+    icon: IconUitSocialMediaLogo, // icon: uit:social-media-logo
+  },
+  {
+    value: 'book',
+    label: 'book',
+    icon: IconBoxiconsBook, // icon: boxicons:book
+  },
+  {
+    value: 'paper',
+    label: 'paper',
+    icon: IconBasilDocumentSolid, // icon: basil:document-solid
+  },
+]

package/src/icons/Website/Icon.tsx

@@ -0,0 +1,39 @@
+import { ThemeIcon } from "@mantine/core";
+import { GlobeAltIcon } from "@heroicons/react/24/solid";
+import { type Website } from "omni-osint-crud-client";
+import { ICON_OPTIONS } from "./icons";
+
+interface Props {
+  website: Website;
+  size?: number | string;
+  [key: string]: any;
+}
+
+/**
+ * Renders an icon for a website based on its type.
+ * @param website The website object, must contain 'type' and 'attributes'.
+ * @param props Additional props to pass to the icon.
+ * @returns A component displaying the website icon.
+ */
+export const WebsiteIcon: React.FC<Props> = ({
+  website,
+  size = "md",
+  ...props
+}) => {
+  const iconColor = String((website.attributes || {}).icon_color || "#0089ff");
+
+  const selectedType = ICON_OPTIONS.find(
+    (option) => option.value === website.type,
+  );
+  const Icon =
+    selectedType && selectedType.icon ? selectedType.icon : GlobeAltIcon;
+
+  return (
+    <ThemeIcon variant="filled" size={size} radius="xl" color={iconColor}>
+      <Icon
+        style={{ width: "70%", height: "70%", color: "white" }}
+        {...props}
+      />
+    </ThemeIcon>
+  );
+};

package/src/icons/Website/Select.tsx

@@ -0,0 +1,61 @@
+import { type Website } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import { Group, Select, ColorInput } from "@mantine/core";
+import { ICON_OPTIONS } from "./icons";
+import { WebsiteIcon } from "./Icon";
+
+interface WebsiteIconSelectProps {
+  value: Website;
+  onChange: (value: Website) => void;
+}
+
+export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation();
+  const colors = [
+    "#0089ff",
+    "#ff0000",
+    "#00ba21",
+    "#c18c17",
+    "#be4bdb",
+    "#ababab",
+    "#7950f2",
+  ];
+
+  const handleTypeChange = (type: string | null) => {
+    onChange({ ...value, title: type || undefined });
+  };
+
+  const handleColorChange = (color: string) => {
+    onChange({
+      ...value,
+      attributes: { ...(value.attributes || {}), icon_color: color },
+    });
+  };
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`website.type.${option.label}`),
+  }));
+
+  return (
+    <Group>
+      <Select
+        leftSection={<WebsiteIcon website={value} />}
+        defaultValue={translatedOptions[0].value}
+        value={value.type}
+        onChange={handleTypeChange}
+        data={translatedOptions}
+        style={{ flex: 1 }}
+      />
+      <ColorInput
+        value={String((value.attributes || {}).icon_color || colors[0])}
+        onChange={handleColorChange}
+        swatches={colors}
+        style={{ flex: 1 }}
+      />
+    </Group>
+  );
+};

package/src/icons/Website/icons.ts

@@ -0,0 +1,35 @@
+import { IconMdiForum } from '@/assets/icons/generated/mdi-forum';
+import { IconStreamlineCyberNewspaper2 } from '@/assets/icons/generated/streamline-cyber-newspaper-2';
+import { IconMingcuteGovernmentLine } from '@/assets/icons/generated/mingcute-government-line';
+
+import { BuildingOfficeIcon } from '@heroicons/react/24/solid';
+
+interface IconOption {
+  value: string;
+  label: string;
+  icon?: React.FC<React.ComponentPropsWithoutRef<'svg'>>;
+}
+
+// Find icon items in https://icon-sets.iconify.design
+export const ICON_OPTIONS: IconOption[] = [
+  {
+    value: 'company',
+    label: 'company',
+    icon: BuildingOfficeIcon,
+  },
+  {
+    value: 'government',
+    label: 'government',
+    icon: IconMingcuteGovernmentLine, // icon: mingcute:government-line
+  },
+  {
+    value: 'news',
+    label: 'news',
+    icon: IconStreamlineCyberNewspaper2, // icon: streamline-cyber:newspaper-2
+  },
+  {
+    value: 'forum',
+    label: 'forum',
+    icon: IconMdiForum, // icon: mdi:forum
+  },
+]

package/src/icons/index.ts

@@ -0,0 +1,10 @@
+export { EventIcon} from './Event/Icon';
+export { EventIconSelect } from './Event/Select';
+export { OrganizationIcon } from './Organization/Icon';
+export { OrganizationIconSelect } from './Organization/Select';
+export { PersonIcon } from './Person/Icon';
+export { PersonIconSelect } from './Person/Select';
+export { SourceIcon } from './Source/Icon';
+export { SourceIconSelect } from './Source/Select';
+export { WebsiteIcon } from './Website/Icon';
+export { WebsiteIconSelect } from './Website/Select';

package/src/index.tsx

@@ -0,0 +1,3 @@
+export * from './avatars';
+export * from './cards';
+export * from './icons';

package/src/locales/en.json

@@ -0,0 +1,75 @@
+{
+  "source": {
+    "type": {
+      "news": "News",
+      "website": "Website",
+      "social-media": "Social Media",
+      "book": "Book",
+      "paper": "Paper"
+    },
+    "name": "Name",
+    "description": "Description"
+  },
+  "person": {
+    "type": {
+      "professional": "Professional",
+      "gov-official": "Government Official",
+      "school-personel": "School Personnel"
+    },
+    "name": "Name",
+    "role": "Role",
+    "aliases": "Aliases"
+  },
+  "organization": {
+    "type": {
+      "company": "Company",
+      "government": "Government",
+      "military": "Military",
+      "manufacturing": "Manufacturing",
+      "agriculture": "Agriculture",
+      "semi-conductor": "Semi-conductor",
+      "technology": "Technology"
+    },
+    "name": "Name"
+  },
+  "website": {
+    "type": {
+      "company": "Company",
+      "government": "Government",
+      "news": "News",
+      "forum": "Forum"
+    },
+    "title": "Title",
+    "description": "Description"
+  },
+  "event": {
+    "type": {
+      "announcement": "Announcement",
+      "conversation": "Conversation",
+      "exchange": "Exchange",
+      "oil": "Oil",
+      "trade": "Trade",
+      "supplychain-risk": "Supply Chain Risk",
+      "ship": "Ship",
+      "truck": "Truck",
+      "train": "Train",
+      "crime": "Crime",
+      "shot": "Shot",
+      "bomb": "Bomb",
+      "missile": "Missile",
+      "plane": "Plane",
+      "naval": "Naval",
+      "tank": "Tank",
+      "infantry": "Infantry",
+      "intelligence": "Intelligence"
+    },
+    "title": "Title",
+    "description": "Description"
+  },
+  "tooltip": {
+    "relation": "Related",
+    "confidence": "Confidence",
+    "createdDate": "Created Date",
+    "updatedDate": "Updated Date"
+  }
+}