@omnsight/osint-entity-components 0.2.4 → 0.2.6

package/src/forms/EventForm/StaticForm.tsx

@@ -0,0 +1,272 @@
+import { useState, type PropsWithChildren, type CSSProperties } from "react";
+import {
+  CalendarDaysIcon,
+  ChevronDownIcon,
+  MapPinIcon,
+  UserIcon,
+} from "@heroicons/react/24/outline";
+import {
+  Box,
+  Collapse,
+  Divider,
+  Group,
+  Stack,
+  Title,
+  UnstyledButton,
+  rem,
+  Text,
+  Badge,
+  Select,
+  Tooltip,
+} from "@mantine/core";
+import {
+  type Event,
+  type Source,
+  type Permissive,
+} from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import countries from "i18n-iso-countries";
+import { Controller } from "react-hook-form";
+import { EditableAttributes } from "../EditableAttributes";
+import { BaseForm } from "../BaseForm";
+import { EventIcon } from "@omnsight/osint-entity-components/icons";
+import {
+  SourceLink,
+  AvatarSpan,
+} from "@omnsight/osint-entity-components/avatars";
+import {
+  getAccessLevel,
+  getRoles,
+  useReadOptions,
+  useWriteOptions,
+} from "../accessLevel";
+
+interface Props extends PropsWithChildren {
+  event: Event;
+  sources?: Source[];
+  isAdmin?: boolean;
+  onUpdate?: (data: Permissive) => void;
+  onClose?: () => void;
+  onDoubleClick: () => void;
+  editModeEnabled: boolean;
+  exitButton?: React.ReactNode;
+  style?: CSSProperties;
+}
+
+export const StaticForm: React.FC<Props> = ({
+  event,
+  sources = [],
+  isAdmin = false,
+  onUpdate,
+  onClose,
+  onDoubleClick,
+  editModeEnabled,
+  exitButton,
+  children,
+  style,
+}) => {
+  const { t, i18n } = useTranslation();
+  const [attributesOpen, setAttributesOpen] = useState(false);
+  const readOptions = useReadOptions(isAdmin);
+  const writeOptions = useWriteOptions();
+
+  return (
+    <BaseForm<Event>
+      style={style}
+      icon={<EventIcon event={event} />}
+      title={event.title || t("placeholder.title")}
+      titleRight={
+        sources && (
+          <AvatarSpan showEmptyAvatar={false}>
+            {sources.map((source) => (
+              <SourceLink key={source._id || source._key} data={source} />
+            ))}
+          </AvatarSpan>
+        )
+      }
+      onlyShowEditOnDirty={true}
+      onClose={() => onClose?.()}
+      defaultValues={{
+        ...event,
+        location: {
+          ...event.location,
+          sub_locality: event?.location?.sub_locality || "",
+          sub_administrative_area:
+            event?.location?.sub_administrative_area || "",
+        },
+      }}
+      onUpdate={onUpdate}
+      exitButton={exitButton}
+    >
+      {({ control, formState: { errors } }) => {
+        return (
+          <Stack
+            pos="relative"
+            gap="xs"
+            style={{
+              cursor: editModeEnabled ? "pointer" : "default",
+            }}
+            onDoubleClick={onDoubleClick}
+          >
+            <Group gap={4}>
+              <Text size="sm" c="dimmed">
+                {t("placeholder.type")}:
+              </Text>
+              <Text size="sm">{event.type}</Text>
+            </Group>
+
+            <Group gap="xs" c="dimmed">
+              <CalendarDaysIcon style={{ width: rem(18), height: rem(18) }} />
+              <Text size="sm">
+                {event.happened_at
+                  ? new Date(event.happened_at * 1000).toLocaleDateString()
+                  : t("placeholder.date")}
+              </Text>
+            </Group>
+
+            <Group gap="xs" c="dimmed" align="flex-start" wrap="nowrap">
+              <MapPinIcon
+                style={{
+                  width: rem(18),
+                  height: rem(18),
+                  flexShrink: 0,
+                  marginTop: rem(2),
+                }}
+              />
+              <Stack gap={0} style={{ flex: 1 }}>
+                <Text size="sm">
+                  {[
+                    event.location?.address,
+                    event.location?.sub_locality,
+                    event.location?.locality,
+                    event.location?.sub_administrative_area,
+                    event.location?.administrative_area,
+                    event.location?.country_code
+                      ? countries.getName(
+                          event.location.country_code,
+                          i18n.language.startsWith("zh") ? "zh" : "en",
+                          { select: "official" },
+                        )
+                      : undefined,
+                    event.location?.postal_code,
+                  ]
+                    .filter(Boolean)
+                    .join(", ") || t("placeholder.address")}
+                </Text>
+                <Group>
+                  <Text size="sm">
+                    Lat: {event.location?.latitude ?? "N/A"}
+                  </Text>
+                  <Text size="sm">
+                    Lon: {event.location?.longitude ?? "N/A"}
+                  </Text>
+                </Group>
+              </Stack>
+            </Group>
+
+            <Text size="sm">
+              {event.description ||
+                t("components.forms.EventForm.eventDescription")}
+            </Text>
+
+            <Group gap="xs">
+              {(event.tags || []).map((tag) => (
+                <Badge key={tag}>{tag}</Badge>
+              ))}
+            </Group>
+
+            {onUpdate && (
+              <Group gap="xs" w="100%">
+                <Box
+                  style={{
+                    flex: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Tooltip label={event.owner?.toUpperCase()[0] || ""}>
+                    <UserIcon style={{ width: rem(18), height: rem(18) }} />
+                  </Tooltip>
+                </Box>
+                <Box
+                  style={{
+                    flex: 3,
+                    display: "flex",
+                  }}
+                >
+                  {t("placeholder.accessLabel")}:
+                </Box>
+                <Controller
+                  name="read"
+                  control={control}
+                  rules={{ required: t("common.required") }}
+                  render={({ field }) => {
+                    return (
+                      <Box style={{ flex: 4 }}>
+                        <Select
+                          value={getAccessLevel(field.value ?? [])}
+                          onChange={(value) => field.onChange(getRoles(value))}
+                          placeholder={t("placeholder.readAccess")}
+                          data={readOptions}
+                          clearable
+                          error={errors.read?.message}
+                        />
+                      </Box>
+                    );
+                  }}
+                />
+                <Controller
+                  name="write"
+                  control={control}
+                  rules={{ required: t("common.required") }}
+                  render={({ field }) => {
+                    return (
+                      <Box style={{ flex: 4 }}>
+                        <Select
+                          value={getAccessLevel(field.value ?? [])}
+                          onChange={(value) => field.onChange(getRoles(value))}
+                          placeholder={t("placeholder.writeAccess")}
+                          data={writeOptions}
+                          clearable
+                          error={errors.write?.message}
+                        />
+                      </Box>
+                    );
+                  }}
+                />
+              </Group>
+            )}
+
+            {children}
+
+            <Divider my="sm" />
+
+            <UnstyledButton onClick={() => setAttributesOpen((o) => !o)}>
+              <Group justify="space-between">
+                <Title order={5}>{t("placeholder.attributes")}</Title>
+                <ChevronDownIcon
+                  style={{
+                    width: 16,
+                    transform: attributesOpen
+                      ? "rotate(180deg)"
+                      : "rotate(0deg)",
+                    transition: "transform 200ms ease",
+                  }}
+                />
+              </Group>
+            </UnstyledButton>
+
+            <Collapse in={attributesOpen}>
+              <EditableAttributes
+                value={event.attributes || {}}
+                isEditing={false}
+                onChange={() => {}}
+              />
+            </Collapse>
+          </Stack>
+        );
+      }}
+    </BaseForm>
+  );
+};

package/src/forms/EventForm/index.ts

@@ -0,0 +1 @@
+export { EventForm } from './EditableForm';

package/src/forms/InsightForm/EditableForm.tsx

@@ -0,0 +1,70 @@
+import { useState, type PropsWithChildren } from "react";
+import type { OsintView, Permissive } from "omni-osint-crud-client";
+import { EditingForm } from "./EditingForm";
+import { StaticForm } from "./StaticForm";
+
+interface Props extends PropsWithChildren {
+  insight: OsintView;
+  isAdmin?: boolean;
+  onSubmit?: (data: OsintView) => void;
+  onUpdate?: (data: Partial<OsintView>) => void;
+  onUpdatePermissive?: (data: Permissive) => void;
+  onClose?: () => void;
+  exitButton?: React.ReactNode;
+}
+
+export const InsightForm: React.FC<Props> = ({
+  insight,
+  isAdmin = false,
+  onSubmit,
+  onUpdate,
+  onUpdatePermissive,
+  onClose,
+  exitButton,
+  children,
+}) => {
+  const [isEditing, setIsEditing] = useState(onSubmit !== undefined || false);
+
+  if (
+    onSubmit !== undefined &&
+    (onUpdate !== undefined || onUpdatePermissive !== undefined)
+  ) {
+    throw new Error(
+      "onSubmit cannot be defined at the same time with onUpdate or onUpdatePermissive",
+    );
+  }
+
+  const handlClose = () => {
+    if (onUpdate !== undefined) {
+      setIsEditing(false);
+    }
+    onClose?.();
+  };
+
+  const handleDoubleClick = () => {
+    if (onUpdate !== undefined) {
+      setIsEditing(true);
+    }
+  };
+
+  return isEditing ? (
+    <EditingForm
+      insight={insight}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+      onClose={handlClose}
+    />
+  ) : (
+    <StaticForm
+      insight={insight}
+      isAdmin={isAdmin}
+      onUpdate={onUpdatePermissive}
+      onClose={handlClose}
+      onDoubleClick={handleDoubleClick}
+      exitButton={exitButton || <></>}
+      editModeEnabled={onUpdate !== undefined}
+    >
+      {children}
+    </StaticForm>
+  );
+};

package/src/forms/InsightForm/EditingForm.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Stack, Text, Textarea, TextInput } from '@mantine/core';
+import type { OsintView } from 'omni-osint-crud-client';
+import { useTranslation } from 'react-i18next';
+import { Controller } from 'react-hook-form';
+import { BaseForm } from '../BaseForm';
+
+interface Props {
+  insight: OsintView;
+  onSubmit?: (data: OsintView) => void;
+  onUpdate?: (data: Partial<OsintView>) => void;
+  onClose?: () => void;
+}
+
+export const EditingForm: React.FC<Props> = ({
+  insight,
+  onSubmit,
+  onUpdate,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+
+  const handlClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <BaseForm<OsintView>
+      title={t('components.forms.InsightForm.title')}
+      onClose={handlClose}
+      onlyShowEditOnDirty={false}
+      defaultValues={insight}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+    >
+      {({ control, formState: { errors } }) => (
+        <Stack
+          pos="relative"
+          gap="xs"
+          style={{ cursor: 'default' }}
+        >
+          <Text size="sm" fw={500}>
+            {t('placeholder.title')}
+          </Text>
+          <Controller
+            name="name"
+            control={control}
+            rules={{ required: t('common.required') }}
+            render={({ field }) => (
+              <TextInput
+                {...field}
+                autoFocus
+                value={field.value || ''}
+                placeholder={`${t('placeholder.enter')}${t('placeholder.title')}...`}
+                error={errors.name?.message}
+              />
+            )}
+          />
+
+          <Text size="sm">{t('placeholder.description')}</Text>
+          <Controller
+            name="description"
+            control={control}
+            rules={{ required: t('common.required') }}
+            render={({ field }) => (
+              <Textarea
+                {...field}
+                autosize
+                value={field.value || ''}
+                placeholder={`${t('placeholder.enter')}${t('placeholder.description')}...`}
+                error={errors.description?.message}
+              />
+            )}
+          />
+        </Stack>
+      )}
+    </BaseForm>
+  );
+};

package/src/forms/InsightForm/StaticForm.tsx

@@ -0,0 +1,139 @@
+import React, { type PropsWithChildren } from "react";
+import { Group, rem, Stack, Text, Tooltip, Box, Select } from "@mantine/core";
+import { UserIcon } from "@heroicons/react/24/outline";
+import type { OsintView, Permissive } from "omni-osint-crud-client";
+import { useTranslation } from "react-i18next";
+import { Controller } from "react-hook-form";
+import {
+  getAccessLevel,
+  getRoles,
+  useReadOptions,
+  useWriteOptions,
+} from "../accessLevel";
+import { BaseForm } from "../BaseForm";
+
+interface Props extends PropsWithChildren {
+  insight: OsintView;
+  isAdmin?: boolean;
+  onUpdate?: (data: Permissive) => void;
+  onClose?: () => void;
+  onDoubleClick: () => void;
+  editModeEnabled: boolean;
+  exitButton?: React.ReactNode;
+}
+
+export const StaticForm: React.FC<Props> = ({
+  insight,
+  isAdmin = false,
+  onUpdate,
+  onClose,
+  onDoubleClick,
+  editModeEnabled,
+  exitButton,
+  children,
+}) => {
+  const { t } = useTranslation();
+
+  const handlClose = () => {
+    onClose?.();
+  };
+
+  const readOptions = useReadOptions(isAdmin);
+  const writeOptions = useWriteOptions();
+
+  return (
+    <BaseForm<OsintView>
+      title={insight.name || t("placeholder.title")}
+      onClose={handlClose}
+      defaultValues={insight}
+      onUpdate={onUpdate}
+      exitButton={exitButton}
+      onlyShowEditOnDirty={true}
+    >
+      {({ control, formState: { errors } }) => (
+        <Stack
+          pos="relative"
+          gap="xs"
+          style={{ cursor: editModeEnabled ? "pointer" : "default" }}
+          onDoubleClick={onDoubleClick}
+        >
+          <Text
+            size="sm"
+            style={{
+              color: insight.description
+                ? "var(--mantine-color-text)"
+                : "var(--mantine-color-dimmed)",
+              fontStyle: insight.description ? "normal" : "italic",
+            }}
+          >
+            {insight.description || t("placeholder.description")}
+          </Text>
+          {children}
+
+          {onUpdate && (
+            <Group gap="xs" w="100%">
+              <Box
+                style={{
+                  flex: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Tooltip label={insight.owner?.toUpperCase()[0] || ""}>
+                  <UserIcon style={{ width: rem(18), height: rem(18) }} />
+                </Tooltip>
+              </Box>
+              <Box
+                style={{
+                  flex: 3,
+                  display: "flex",
+                }}
+              >
+                {t("placeholder.accessLabel")}:
+              </Box>
+              <Controller
+                name="read"
+                control={control}
+                rules={{ required: t("common.required") }}
+                render={({ field }) => {
+                  return (
+                    <Box style={{ flex: 4 }}>
+                      <Select
+                        value={getAccessLevel(field.value ?? [])}
+                        onChange={(value) => field.onChange(getRoles(value))}
+                        placeholder={t("placeholder.readAccess")}
+                        data={readOptions}
+                        clearable
+                        error={errors.read?.message}
+                      />
+                    </Box>
+                  );
+                }}
+              />
+              <Controller
+                name="write"
+                control={control}
+                rules={{ required: t("common.required") }}
+                render={({ field }) => {
+                  return (
+                    <Box style={{ flex: 4 }}>
+                      <Select
+                        value={getAccessLevel(field.value ?? [])}
+                        onChange={(value) => field.onChange(getRoles(value))}
+                        placeholder={t("placeholder.writeAccess")}
+                        data={writeOptions}
+                        clearable
+                        error={errors.write?.message}
+                      />
+                    </Box>
+                  );
+                }}
+              />
+            </Group>
+          )}
+        </Stack>
+      )}
+    </BaseForm>
+  );
+};

package/src/forms/InsightForm/index.ts

@@ -0,0 +1 @@
+export { InsightForm } from './EditableForm';

package/src/forms/MonitoringSourceForm/EditableForm.tsx

@@ -0,0 +1,59 @@
+import { useState, type PropsWithChildren } from "react";
+import type { MonitoringSource } from "omni-monitoring-client";
+import { EditingForm } from "./EditingForm";
+import { StaticForm } from "./StaticForm";
+
+interface Props extends PropsWithChildren {
+  source: MonitoringSource;
+  onSubmit?: (data: MonitoringSource) => void;
+  onUpdate?: (data: Partial<MonitoringSource>) => void;
+  onClose?: () => void;
+  exitButton?: React.ReactNode;
+}
+
+export const MonitoringSourceForm: React.FC<Props> = ({
+  source,
+  onSubmit,
+  onUpdate,
+  onClose,
+  exitButton,
+  children,
+}) => {
+  const [isEditing, setIsEditing] = useState(onSubmit !== undefined || false);
+
+  if (onSubmit !== undefined && onUpdate !== undefined) {
+    throw new Error("onSubmit cannot be defined at the same time with onUpdate");
+  }
+
+  const handlClose = () => {
+    if (onUpdate !== undefined) {
+      setIsEditing(false);
+    }
+    onClose?.();
+  };
+
+  const handleDoubleClick = () => {
+    if (onUpdate !== undefined) {
+      setIsEditing(true);
+    }
+  };
+
+  return isEditing ? (
+    <EditingForm
+      source={source}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+      onClose={handlClose}
+    />
+  ) : (
+    <StaticForm
+      source={source}
+      onClose={handlClose}
+      onDoubleClick={handleDoubleClick}
+      exitButton={exitButton || <></>}
+      editModeEnabled={onUpdate !== undefined}
+    >
+      {children}
+    </StaticForm>
+  );
+};