@omnsight/osint-entity-components 0.2.4 → 0.2.6

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/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/locales/en.json

@@ -1,4 +1,10 @@
 {
+  "access": {
+    "public": "Public",
+    "platform": "Platform User",
+    "paid": "Paid Users",
+    "private": "Private"
+  },
   "source": {
     "type": {
       "news": "News",
@@ -76,5 +82,134 @@
     "confidence": "Confidence",
     "createdDate": "Created Date",
     "updatedDate": "Updated Date"
+  },
+  "common": {
+    "error": "Error",
+    "reset": "Reset",
+    "apply": "Apply",
+    "create": "Create",
+    "entity": {
+      "Person": "Person",
+      "Organization": "Organization",
+      "Event": "Event",
+      "Website": "Website",
+      "Source": "Source"
+    },
+    "required": "This field is required",
+    "types": {
+      "text": "text",
+      "number": "number",
+      "toggle": "toggle"
+    },
+    "remove": "Remove",
+    "add": "Add Attribute",
+    "confirm": "Confirm",
+    "cancel": "Cancel",
+    "save": "Save",
+    "warning": "Warning"
+  },
+  "components": {
+    "inputs": {
+      "TimezoneSelect": {
+        "select": "Select a timezone"
+      },
+      "RangeDatePicker": {
+        "dateLimitExceeded": "Date range exceeds limit",
+        "dateLimitMessage": "Date range exceeds limit, max 1 month",
+        "dateRange": "Date Range",
+        "today": "Today",
+        "yesterday": "Yesterday",
+        "lastWeek": "Last Week",
+        "lastMonth": "Last Month",
+        "selectDateRange": "Select Date Range"
+      },
+      "CountrySelect": {
+        "select": "Select a country"
+      }
+    },
+    "forms": {
+      "WebsiteForm": {
+        "title": "Edit Website"
+      },
+      "SourceForm": {
+        "title": "Source Title",
+        "sourceDescription": "Enter source description"
+      },
+      "RelationForm": {
+        "title": "Edit Relation",
+        "namePattern": "Can only contain letters, underscores, and hyphens"
+      },
+      "PersonForm": {
+        "title": "Edit Person",
+        "name": "Name"
+      },
+      "OrganizationForm": {
+        "title": "Edit Organization",
+        "name": "Organization Name"
+      },
+      "MonitoringSourceForm": {
+        "title": "Edit Monitoring Source",
+        "name": "Source Name"
+      },
+      "InsightForm": {
+        "title": "Edit Insight"
+      },
+      "EventForm": {
+        "title": "Event Title",
+        "eventDescription": "event description",
+        "minLatitude": "Latitude cannot be less than -90",
+        "maxLatitude": "Latitude cannot be greater than 90",
+        "minLongitude": "Longitude cannot be less than -180",
+        "maxLongitude": "Longitude cannot be greater than 180",
+        "mustIncludeAdmin": "Must include admin"
+      },
+      "BaseForm": {
+        "discardChanges": "Discard Changes And Exit",
+        "unsavedChangesWarning": "Are you sure you want to discard the changes?"
+      }
+    }
+  },
+  "input": {
+    "color": "Select A Color",
+    "icon": "Select An Icon"
+  },
+  "placeholder": {
+    "title": "Title",
+    "url": "URL",
+    "description": "Description",
+    "type": "Type",
+    "foundedDate": "Founded Date",
+    "discoveredDate": "Discovered Date",
+    "tags": "Tags",
+    "attributes": "Attributes",
+    "reliability": "Reliability",
+    "label": "Label",
+    "name": "Name",
+    "confidence": "Confidence",
+    "role": "Role",
+    "nationality": "Nationality",
+    "birthDate": "Birth Date",
+    "source": {
+      "type": "Source Type"
+    },
+    "lastReviewed": "Last Reviewed",
+    "enter": "Enter",
+    "date": "Date",
+    "location": "Location",
+    "address": "Address",
+    "locality": "Locality",
+    "subLocality": "Sub Locality (optional)",
+    "adminArea": "Administrative Area",
+    "subAdminArea": "Sub Administrative Area (optional)",
+    "latitude": "Latitude",
+    "longitude": "Longitude",
+    "country": "Country",
+    "postalCode": "Postal Code",
+    "key": "Key",
+    "value": "Value",
+    "unknown": "Unknown",
+    "accessLabel": "Access Control",
+    "readAccess": "Read Access",
+    "writeAccess": "Write Access"
   }
 }

package/src/locales/zh.json

@@ -1,4 +1,10 @@
 {
+  "access": {
+    "public": "公开",
+    "platform": "平台用户",
+    "paid": "付费",
+    "private": "私密"
+  },
   "source": {
     "type": {
       "news": "新闻",
@@ -76,5 +82,134 @@
     "confidence": "置信度",
     "createdDate": "创建日期",
     "updatedDate": "更新日期"
+  },
+  "common": {
+    "error": "错误",
+    "reset": "重置",
+    "apply": "应用",
+    "create": "创建",
+    "entity": {
+      "Person": "个人",
+      "Organization": "组织",
+      "Event": "事件",
+      "Website": "网站",
+      "Source": "信源"
+    },
+    "required": "此项为必填项",
+    "types": {
+      "text": "文本",
+      "number": "数字",
+      "toggle": "开关"
+    },
+    "remove": "删除",
+    "add": "添加",
+    "confirm": "确认",
+    "cancel": "取消",
+    "save": "保存",
+    "warning": "警告"
+  },
+  "components": {
+    "inputs": {
+      "TimezoneSelect": {
+        "select": "请选择时区"
+      },
+      "RangeDatePicker": {
+        "dateLimitExceeded": "日期范围超出限制",
+        "dateLimitMessage": "日期范围超出限制，最多选择一个月",
+        "dateRange": "日期范围",
+        "today": "今天",
+        "yesterday": "昨天",
+        "lastWeek": "上周",
+        "lastMonth": "上个月",
+        "selectDateRange": "选择日期范围"
+      },
+      "CountrySelect": {
+        "select": "请选择国家"
+      }
+    },
+    "forms": {
+      "WebsiteForm": {
+        "title": "编辑网站消息"
+      },
+      "SourceForm": {
+        "title": "编辑信源",
+        "sourceDescription": "请输入信源详情"
+      },
+      "RelationForm": {
+        "title": "编辑关系",
+        "namePattern": "只能包含字母、下划线和减号"
+      },
+      "PersonForm": {
+        "title": "编辑个人信息",
+        "name": "姓名"
+      },
+      "OrganizationForm": {
+        "title": "编辑组织信息",
+        "name": "组织名称"
+      },
+      "MonitoringSourceForm": {
+        "title": "编辑监控信源",
+        "name": "信源名称"
+      },
+      "InsightForm": {
+        "title": "编辑专栏"
+      },
+      "EventForm": {
+        "title": "事件标题",
+        "eventDescription": "事件详细描述",
+        "minLatitude": "纬度不能小于-90",
+        "maxLatitude": "纬度不能大于90",
+        "minLongitude": "经度不能小于-180",
+        "maxLongitude": "经度不能大于180",
+        "mustIncludeAdmin": "必须包含私有权限"
+      },
+      "BaseForm": {
+        "discardChanges": "放弃修改并退出",
+        "unsavedChangesWarning": "是否确认放弃修改？注意：所有未保存的修改将丢失。"
+      }
+    }
+  },
+  "input": {
+    "color": "请选择颜色",
+    "icon": "请选择图标"
+  },
+  "placeholder": {
+    "title": "标题",
+    "url": "链接",
+    "description": "描述",
+    "type": "类型",
+    "foundedDate": "成立日期",
+    "discoveredDate": "发现日期",
+    "tags": "标签",
+    "attributes": "其它属性",
+    "reliability": "可靠性",
+    "label": "标签",
+    "name": "名称",
+    "confidence": "置信度",
+    "role": "角色",
+    "nationality": "国籍",
+    "birthDate": "出生日期",
+    "source": {
+      "type": "信源类型"
+    },
+    "lastReviewed": "上次检查",
+    "enter": "输入",
+    "date": "日期",
+    "location": "位置",
+    "address": "地址",
+    "locality": "城市",
+    "subLocality": "次级区域（可选）",
+    "adminArea": "行政区域",
+    "subAdminArea": "次级行政区域（可选）",
+    "latitude": "纬度",
+    "longitude": "经度",
+    "country": "国家",
+    "postalCode": "邮政编码",
+    "key": "标签",
+    "value": "内容",
+    "unknown": "未知",
+    "accessLabel": "访问权限",
+    "readAccess": "读取权限",
+    "writeAccess": "写入权限"
   }
 }