@omnsight/osint-entity-components 0.2.5 → 0.2.7

package/src/icons/Event/icons.ts

@@ -1,3 +1,20 @@
+import { IconTypcnFlash } from '../../assets/icons/generated/typcn-flash';
+import { IconMaterialSymbolsSatelliteAlt } from '../../assets/icons/generated/material-symbols-satellite-alt';
+import { IconMaterialSymbolsLightDrone } from '../../assets/icons/generated/material-symbols-light-drone';
+import { IconBxPlusMedical } from '../../assets/icons/generated/bx-plus-medical';
+import { IconIconParkGreatWall } from '../../assets/icons/generated/icon-park-great-wall';
+import { IconFaSolidFistRaised } from '../../assets/icons/generated/fa-solid-fist-raised';
+import { IconBxRun } from '../../assets/icons/generated/bx-run';
+import { IconPhMaskHappyFill } from '../../assets/icons/generated/ph-mask-happy-fill';
+import { IconIconoirCommodity } from '../../assets/icons/generated/iconoir-commodity';
+import { IconGlyphsHandshakeBold } from '../../assets/icons/generated/glyphs-handshake-bold';
+import { IconIconParkCurrency } from '../../assets/icons/generated/icon-park-currency';
+import { IconFluentEmojiHighContrastBallotBoxWithBallot } from '../../assets/icons/generated/fluent-emoji-high-contrast-ballot-box-with-ballot';
+import { IconTablerBarrierBlock } from '../../assets/icons/generated/tabler-barrier-block';
+import { IconLsiconWorkOrderAbnormalOutline } from '../../assets/icons/generated/lsicon-work-order-abnormal-outline';
+import { IconBoxiconsFileReport } from '../../assets/icons/generated/boxicons-file-report';
+import { IconMdiAnchor } from '../../assets/icons/generated/mdi-anchor';
+import { IconStreamlineUltimateMeetingRemoteBold } from '../../assets/icons/generated/streamline-ultimate-meeting-remote-bold';
 import { IconRiSpyFill } from '../../assets/icons/generated/ri-spy-fill';
 import { IconFluentEmojiHighContrastMilitaryHelmet } from '../../assets/icons/generated/fluent-emoji-high-contrast-military-helmet';
 import { IconMdiTank } from '../../assets/icons/generated/mdi-tank';
@@ -16,6 +33,7 @@ import { IconIcSharpOilBarrel } from '../../assets/icons/generated/ic-sharp-oil-
 import { IconRiExchangeBoxFill } from '../../assets/icons/generated/ri-exchange-box-fill';
 import { IconMingcutePhoneCallFill } from '../../assets/icons/generated/mingcute-phone-call-fill';
 import { IconBoxiconsAnnouncement } from '../../assets/icons/generated/boxicons-announcement';
+import { IconMdiFactory } from '../../assets/icons/generated/mdi-factory';
 
 interface IconOption {
   value: string;
@@ -30,30 +48,85 @@ export const ICON_OPTIONS: IconOption[] = [
     label: 'announcement',
     icon: IconBoxiconsAnnouncement, // icon: boxicons:announcement
   },
+  {
+    value: 'conference',
+    label: 'conference',
+    icon: IconStreamlineUltimateMeetingRemoteBold, // icon: streamline-ultimate:meeting-remote-bold
+  },
   {
     value: 'conversation',
     label: 'conversation',
     icon: IconMingcutePhoneCallFill, // icon: mingcute:phone-call-fill
   },
+  {
+    value: 'policy',
+    label: 'policy',
+    icon: IconLsiconWorkOrderAbnormalOutline, // icon: lsicon:work-order-abnormal-outline
+  },
+  {
+    value: 'border',
+    label: 'border',
+    icon: IconTablerBarrierBlock, // icon: tabler:barrier-block
+  },
+  {
+    value: 'report',
+    label: 'report',
+    icon: IconBoxiconsFileReport, // icon: boxicons:file-report
+  },
+  {
+    value: 'election',
+    label: 'election',
+    icon: IconFluentEmojiHighContrastBallotBoxWithBallot, // icon: fluent-emoji-high-contrast:ballot-box-with-ballot
+  },
   {
     value: 'trade',
     label: 'trade',
     icon: IconRiExchangeBoxFill, // icon: ri:exchange-box-fill
   },
   {
-    value: 'oil',
-    label: 'oil',
-    icon: IconIcSharpOilBarrel, // icon: ic:sharp-oil-barrel
+    value: 'currency',
+    label: 'currency',
+    icon: IconIconParkCurrency, // icon: icon-park:currency
   },
   {
     value: 'exchange',
     label: 'exchange',
     icon: IconHugeiconsTradeUp, // icon: hugeicons:trade-up
   },
+  {
+    value: 'acquisition',
+    label: 'acquisition',
+    icon: IconGlyphsHandshakeBold, // icon: glyphs:handshake-bold
+  },
+  {
+    value: 'oil',
+    label: 'oil',
+    icon: IconIcSharpOilBarrel, // icon: ic:sharp-oil-barrel
+  },
+  {
+    value: 'commodity',
+    label: 'commodity',
+    icon: IconIconoirCommodity, // icon: iconoir:commodity
+  },
+  {
+    value: 'manufacturing',
+    label: 'manufacturing',
+    icon: IconMdiFactory, // icon: mdi:factory
+  },
   {
     value: 'supplychain-risk',
     label: 'supplychain-risk',
-    icon: IconFluentEmojiHighContrastBrokenChain, // icon: fluent-emoji-high-contrast:broken-chain
+    icon: IconFluentEmojiHighContrastBrokenChain, // icon: fluent-emoji-high-contrast:broken-chain fa/flash
+  },
+  {
+    value: 'electricity',
+    label: 'electricity',
+    icon: IconTypcnFlash, // icon: typcn:flash
+  },
+  {
+    value: 'harbor',
+    label: 'harbor',
+    icon: IconMdiAnchor, // icon: mdi:anchor
   },
   {
     value: 'ship',
@@ -75,11 +148,36 @@ export const ICON_OPTIONS: IconOption[] = [
     label: 'crime',
     icon: IconMdiHandcuffs, // icon: mdi:handcuffs
   },
+  {
+    value: 'cyber',
+    label: 'cyber',
+    icon: IconPhMaskHappyFill, // icon: ph:mask-happy-fill
+  },
   {
     value: 'shot',
     label: 'shot',
     icon: IconGameIconsPistolGun, // icon: game-icons:pistol-gun
   },
+  {
+    value: 'evacuation',
+    label: 'evacuation',
+    icon: IconBxRun, // icon: bx:run
+  },
+  {
+    value: 'civil-unrest',
+    label: 'civil-unrest',
+    icon: IconFaSolidFistRaised, // icon: fa-solid:fist-raised
+  },
+  {
+    value: 'defense',
+    label: 'defense',
+    icon: IconIconParkGreatWall, // icon: icon-park:great-wall
+  },
+  {
+    value: 'medical',
+    label: 'medical',
+    icon: IconBxPlusMedical, // icon: bx:plus-medical
+  },
   {
     value: 'bomb',
     label: 'bomb',
@@ -95,6 +193,11 @@ export const ICON_OPTIONS: IconOption[] = [
     label: 'plane',
     icon: IconMdiAirplane, // icon: mdi:airplane
   },
+  {
+    value: 'drone',
+    label: 'drone',
+    icon: IconMaterialSymbolsLightDrone, // icon: material-symbols-light:drone
+  },
   {
     value: 'naval',
     label: 'naval',
@@ -115,4 +218,9 @@ export const ICON_OPTIONS: IconOption[] = [
     label: 'intelligence',
     icon: IconRiSpyFill, // icon: ri:spy-fill
   },
+  {
+    value: 'satellite',
+    label: 'satellite',
+    icon: IconMaterialSymbolsSatelliteAlt, // icon: material-symbols:satellite-alt
+  },
 ]

package/src/icons/Organization/Select.tsx

@@ -24,8 +24,8 @@ export const OrganizationIconSelector: React.FC<
   return (
     <Select
       leftSection={<OrganizationIcon organization={data} />}
-      defaultValue={translatedOptions[0].value}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.icon")}
       onChange={onChange}
       data={translatedOptions}
       error={error}
@@ -34,7 +34,7 @@ export const OrganizationIconSelector: React.FC<
 };
 
 interface OrganizationColorSelectorProps {
-  value?: string | null;
+  value?: string;
   onChange: (value: string | null) => void;
   error?: string;
 }
@@ -42,6 +42,7 @@ interface OrganizationColorSelectorProps {
 export const OrganizationColorSelector: React.FC<
   OrganizationColorSelectorProps
 > = ({ value, onChange, error }) => {
+  const { t } = useTranslation();
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -54,8 +55,8 @@ export const OrganizationColorSelector: React.FC<
 
   return (
     <ColorInput
-      defaultValue={colors[0]}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.color")}
       onChange={onChange}
       swatches={colors}
       error={error}
@@ -91,7 +92,7 @@ export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
         onChange={handleTypeChange}
       />
       <OrganizationColorSelector
-        value={String(value.attributes?.icon_color)}
+        value={value.attributes?.icon_color as string | undefined}
         onChange={handleColorChange}
       />
     </Group>

package/src/icons/Person/Select.tsx

@@ -27,8 +27,8 @@ export const PersonIconSelector: React.FC<PersonIconSelectorProps> = ({
   return (
     <Select
       leftSection={<PersonIcon person={data} />}
-      defaultValue={translatedOptions[0].value}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.icon")}
       onChange={onChange}
       data={translatedOptions}
       error={error}
@@ -37,7 +37,7 @@ export const PersonIconSelector: React.FC<PersonIconSelectorProps> = ({
 };
 
 interface PersonColorSelectorProps {
-  value?: string | null;
+  value?: string;
   onChange: (value: string | null) => void;
   error?: string;
 }
@@ -47,6 +47,7 @@ export const PersonColorSelector: React.FC<PersonColorSelectorProps> = ({
   onChange,
   error,
 }) => {
+  const { t } = useTranslation();
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -59,8 +60,8 @@ export const PersonColorSelector: React.FC<PersonColorSelectorProps> = ({
 
   return (
     <ColorInput
-      defaultValue={colors[0]}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.color")}
       onChange={onChange}
       swatches={colors}
       error={error}
@@ -96,7 +97,7 @@ export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({
         onChange={handleTypeChange}
       />
       <PersonColorSelector
-        value={String(value.attributes?.icon_color)}
+        value={value.attributes?.icon_color as string | undefined}
         onChange={handleColorChange}
       />
     </Group>

package/src/icons/Source/Select.tsx

@@ -27,8 +27,8 @@ export const SourceIconSelector: React.FC<SourceIconSelectorProps> = ({
   return (
     <Select
       leftSection={<SourceIcon source={data} />}
-      defaultValue={translatedOptions[0].value}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.icon")}
       onChange={onChange}
       data={translatedOptions}
       error={error}
@@ -37,7 +37,7 @@ export const SourceIconSelector: React.FC<SourceIconSelectorProps> = ({
 };
 
 interface SourceColorSelectorProps {
-  value?: string | null;
+  value?: string;
   onChange: (value: string | null) => void;
   error?: string;
 }
@@ -47,6 +47,7 @@ export const SourceColorSelector: React.FC<SourceColorSelectorProps> = ({
   onChange,
   error,
 }) => {
+  const { t } = useTranslation();
   const colors = [
     "#ababab",
     "#0089ff",
@@ -59,8 +60,8 @@ export const SourceColorSelector: React.FC<SourceColorSelectorProps> = ({
 
   return (
     <ColorInput
-      defaultValue={colors[0]}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.color")}
       onChange={onChange}
       swatches={colors}
       error={error}
@@ -96,7 +97,7 @@ export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
         onChange={handleTypeChange}
       />
       <SourceColorSelector
-        value={String(value.attributes?.icon_color ?? "")}
+        value={value.attributes?.icon_color as string | undefined}
         onChange={handleColorChange}
       />
     </Group>

package/src/icons/Website/Select.tsx

@@ -27,8 +27,8 @@ export const WebsiteIconSelector: React.FC<WebsiteIconSelectorProps> = ({
   return (
     <Select
       leftSection={<WebsiteIcon website={data} />}
-      defaultValue={translatedOptions[0].value}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.icon")}
       onChange={onChange}
       data={translatedOptions}
       error={error}
@@ -37,7 +37,7 @@ export const WebsiteIconSelector: React.FC<WebsiteIconSelectorProps> = ({
 };
 
 interface WebsiteColorSelectorProps {
-  value?: string | null;
+  value?: string;
   onChange: (value: string | null) => void;
   error?: string;
 }
@@ -47,6 +47,7 @@ export const WebsiteColorSelector: React.FC<WebsiteColorSelectorProps> = ({
   onChange,
   error,
 }) => {
+  const { t } = useTranslation();
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -59,8 +60,8 @@ export const WebsiteColorSelector: React.FC<WebsiteColorSelectorProps> = ({
 
   return (
     <ColorInput
-      defaultValue={colors[0]}
-      value={value ?? ""}
+      value={value}
+      placeholder={t("input.color")}
       onChange={onChange}
       swatches={colors}
       error={error}
@@ -78,7 +79,7 @@ export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
   onChange,
 }) => {
   const handleTypeChange = (type: string | null) => {
-    onChange({ ...value, title: type || undefined });
+    onChange({ ...value, type: type || undefined });
   };
 
   const handleColorChange = (color: string | null) => {
@@ -92,11 +93,11 @@ export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
     <Group>
       <WebsiteIconSelector
         data={value}
-        value={value.title}
+        value={value.type}
         onChange={handleTypeChange}
       />
       <WebsiteColorSelector
-        value={String(value.attributes?.icon_color)}
+        value={value.attributes?.icon_color as string | undefined}
         onChange={handleColorChange}
       />
     </Group>

package/src/icons/index.ts

@@ -8,3 +8,4 @@ export { SourceIcon } from './Source/Icon';
 export { SourceIconSelect, SourceColorSelector, SourceIconSelector } from './Source/Select';
 export { WebsiteIcon } from './Website/Icon';
 export { WebsiteIconSelect, WebsiteColorSelector, WebsiteIconSelector } from './Website/Select';
+export { IconMdiAnchor } from '../assets/icons/generated/mdi-anchor';

package/src/inputs/CountrySelect.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from 'react';
+import { Select } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import countries from 'i18n-iso-countries';
+import enLocale from 'i18n-iso-countries/langs/en.json';
+import zhLocale from 'i18n-iso-countries/langs/zh.json';
+
+// Register locales
+countries.registerLocale(enLocale);
+countries.registerLocale(zhLocale);
+
+interface Props {
+  country?: string;
+  setCountry: (country: string) => void;
+}
+
+export const CountrySelect: React.FC<Props> = ({ country, setCountry }) => {
+  const { i18n, t } = useTranslation();
+
+  const countryOptions = useMemo(() => {
+    // Map i18next language code to i18n-iso-countries language code
+    // 'zh' in i18next -> 'zh' in i18n-iso-countries
+    const lang = i18n.language.startsWith('zh') ? 'zh' : 'en';
+    const countryObj = countries.getNames(lang, { select: 'official' });
+
+    return Object.entries(countryObj)
+      .map(([code, name]) => ({
+        value: code,
+        label: name,
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label));
+  }, [i18n.language]);
+
+  return (
+    <Select
+      placeholder={t('components.inputs.CountrySelect.select')}
+      data={countryOptions}
+      value={country}
+      onChange={(val) => val && setCountry(val)}
+      searchable
+      clearable
+      style={{ width: 200 }}
+    />
+  );
+};

package/src/inputs/CustomDatePicker.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { DatePickerInput } from '@mantine/dates';
+import { Group } from '@mantine/core';
+import { TimezoneSelectComponent } from './TimezoneSelect';
+import { toZonedTime, fromZonedTime } from 'date-fns-tz';
+
+interface Props {
+  value: Date | null;
+  onChange: (date: Date | null) => void;
+  placeholder?: string;
+  error?: string;
+}
+
+export const CustomDatePicker: React.FC<Props> = ({ value, onChange, placeholder, error }) => {
+  const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  const [zonedDate, setZonedDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (value) {
+      setZonedDate(toZonedTime(value, timezone));
+    } else {
+      setZonedDate(null);
+    }
+  }, [value, timezone]);
+
+  const handleDateChange = (date: Date | string | null) => {
+    if (date) {
+      const dateObj = new Date(date);
+      if (!isNaN(dateObj.getTime())) {
+        const utcDate = fromZonedTime(dateObj, timezone);
+        onChange(utcDate);
+      } else {
+        onChange(null);
+      }
+    } else {
+      onChange(null);
+    }
+  };
+
+  return (
+    <Group grow>
+      <DatePickerInput
+        value={zonedDate}
+        onChange={handleDateChange}
+        placeholder={placeholder}
+        error={error}
+      />
+      <TimezoneSelectComponent timezone={timezone} setTimezone={setTimezone} />
+    </Group>
+  );
+};

package/src/inputs/CustomDateTimePicker.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import { DateTimePicker } from '@mantine/dates';
+import { Group } from '@mantine/core';
+import { TimezoneSelectComponent } from './TimezoneSelect';
+import { toZonedTime, fromZonedTime } from 'date-fns-tz';
+
+interface Props {
+  value: Date | null;
+  onChange: (date: Date | null) => void;
+  placeholder?: string;
+  error?: string;
+}
+
+export const CustomDateTimePicker: React.FC<Props> = ({ value, onChange, placeholder, error }) => {
+  const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  const [zonedDate, setZonedDate] = useState<Date | null>(null);
+
+  useEffect(() => {
+    if (value) {
+      setZonedDate(toZonedTime(value, timezone));
+    } else {
+      setZonedDate(null);
+    }
+  }, [value, timezone]);
+
+  const handleDateChange = (date: string | null) => {
+    if (date) {
+      const dateObj = new Date(date);
+      if (!isNaN(dateObj.getTime())) {
+        const utcDate = fromZonedTime(dateObj, timezone);
+        onChange(utcDate);
+      } else {
+        onChange(null);
+      }
+    } else {
+      onChange(null);
+    }
+  };
+
+  return (
+    <Group grow>
+      <DateTimePicker
+        value={zonedDate}
+        onChange={handleDateChange}
+        placeholder={placeholder}
+        error={error}
+      />
+      <TimezoneSelectComponent timezone={timezone} setTimezone={setTimezone} />
+    </Group>
+  );
+};

package/src/inputs/RangeDatePicker.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Group, Button, Stack, Text } from '@mantine/core';
+import { DatePicker } from '@mantine/dates';
+import { notifications } from '@mantine/notifications';
+import { useTranslation } from 'react-i18next';
+
+interface Props {
+  dateRange: [Date | undefined, Date | undefined];
+  setDateRange: (val: [Date | undefined, Date | undefined]) => void;
+}
+
+export const RangeDatePicker: React.FC<Props> = ({ dateRange, setDateRange }) => {
+  const { i18n, t } = useTranslation();
+
+  const handleDateChange = (val: [string | null, string | null]) => {
+    if (val[0] && val[1]) {
+      const [sYear, sMonth, sDay] = val[0].split('-').map(Number);
+      const [eYear, eMonth, eDay] = val[1].split('-').map(Number);
+      const start = new Date(sYear, sMonth - 1, sDay);
+      const end = new Date(eYear, eMonth - 1, eDay);
+      end.setHours(23, 59, 59, 999);
+
+      const maxEndDate = new Date(start);
+      maxEndDate.setMonth(maxEndDate.getMonth() + 1);
+
+      if (end > maxEndDate) {
+        notifications.show({
+          title: t('components.inputs.RangeDatePicker.dateLimitExceeded'),
+          message: t('components.inputs.RangeDatePicker.dateLimitMessage'),
+          color: 'orange',
+        });
+        setDateRange([start, maxEndDate]);
+      } else {
+        setDateRange([start, end]);
+      }
+    } else {
+      setDateRange([undefined, undefined]);
+    }
+  };
+
+  const applyPreset = (type: 'today' | 'yesterday' | 'lastWeek' | 'lastMonth') => {
+    const end = new Date();
+    const start = new Date();
+
+    start.setHours(0, 0, 0, 0);
+    end.setHours(23, 59, 59, 999);
+
+    switch (type) {
+      case 'today':
+        // start and end are already today
+        break;
+      case 'yesterday':
+        start.setDate(start.getDate() - 1);
+        end.setDate(end.getDate() - 1);
+        break;
+      case 'lastWeek':
+        start.setDate(start.getDate() - 7);
+        break;
+      case 'lastMonth':
+        start.setMonth(start.getMonth() - 1);
+        break;
+    }
+    setDateRange([start, end]);
+  };
+
+  return (
+    <Group align="flex-start">
+      <Stack gap="xs">
+        <Text size="sm" fw={500} mb={5}>
+          {t('components.inputs.RangeDatePicker.dateRange')}
+        </Text>
+        <Button variant="light" size="xs" onClick={() => applyPreset('today')}>
+          {t('components.inputs.RangeDatePicker.today')}
+        </Button>
+        <Button variant="light" size="xs" onClick={() => applyPreset('yesterday')}>
+          {t('components.inputs.RangeDatePicker.yesterday')}
+        </Button>
+        <Button variant="light" size="xs" onClick={() => applyPreset('lastWeek')}>
+          {t('components.inputs.RangeDatePicker.lastWeek')}
+        </Button>
+        <Button variant="light" size="xs" onClick={() => applyPreset('lastMonth')}>
+          {t('components.inputs.RangeDatePicker.lastMonth')}
+        </Button>
+      </Stack>
+      <Stack gap="xs">
+        <Text size="sm" fw={500} mb={5}>
+          {t('components.inputs.RangeDatePicker.selectDateRange')}
+        </Text>
+        <DatePicker
+          type="range"
+          locale={i18n.language}
+          value={dateRange[0] && dateRange[1] && [dateRange[0], dateRange[1]]}
+          onChange={handleDateChange}
+          numberOfColumns={2}
+        />
+      </Stack>
+    </Group>
+  );
+};

package/src/inputs/TimezoneSelect.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import TimezoneSelect from 'react-timezone-select';
+
+interface Props {
+  timezone: string;
+  setTimezone: (timezone: string) => void;
+}
+
+export const TimezoneSelectComponent: React.FC<Props> = ({ timezone, setTimezone }) => {
+  const { t } = useTranslation();
+
+  return (
+    <TimezoneSelect
+      value={timezone}
+      onChange={(tz) => setTimezone(tz.value)}
+      placeholder={t('components.inputs.TimezoneSelect.select')}
+    />
+  );
+};

package/src/inputs/index.ts

@@ -0,0 +1,5 @@
+export * from './CountrySelect';
+export * from './CustomDatePicker';
+export * from './CustomDateTimePicker';
+export * from './RangeDatePicker';
+export * from './TimezoneSelect';