@omnsight/osint-entity-components 0.2.4 → 0.2.6

package/src/forms/MonitoringSourceForm/EditingForm.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react';
+import {
+  Stack,
+  Group,
+  Text,
+  Divider,
+  Title,
+  Collapse,
+  UnstyledButton,
+  TextInput,
+  Textarea,
+  Select,
+  Slider,
+} from '@mantine/core';
+import { CustomDatePicker } from '../../inputs/CustomDatePicker';
+import { type MonitoringSource } from 'omni-monitoring-client';
+import { useTranslation } from 'react-i18next';
+import { EditableAttributes } from '../EditableAttributes';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import { Controller } from 'react-hook-form';
+import { BaseForm } from '../BaseForm';
+
+interface Props {
+  source: MonitoringSource;
+  onSubmit?: (data: MonitoringSource) => void;
+  onUpdate?: (data: Partial<MonitoringSource>) => void;
+  onClose?: () => void;
+}
+
+export const EditingForm: React.FC<Props> = ({
+  source,
+  onSubmit,
+  onUpdate,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const [attributesOpen, setAttributesOpen] = useState(false);
+
+  const handlClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <BaseForm<MonitoringSource>
+      title={t('components.forms.MonitoringSourceForm.title')}
+      onClose={handlClose}
+      defaultValues={source}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+      onlyShowEditOnDirty={false}
+    >
+      {({ control, formState: { errors } }) => (
+        <Stack
+          pos="relative"
+          gap="xs"
+          style={{ cursor: 'default' }}
+        >
+            <Text size="sm" fw={500}>
+              {t('components.forms.MonitoringSourceForm.name')}
+            </Text>
+            <Controller
+              name="name"
+              control={control}
+              rules={{ required: t('common.required') }}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder={t('components.forms.MonitoringSourceForm.name')}
+                  error={errors.name?.message}
+                />
+              )}
+            />
+
+            <Text size="sm" fw={500}>
+              {t('placeholder.description')}
+            </Text>
+            <Controller
+              name="description"
+              control={control}
+              rules={{ required: t('common.required') }}
+              render={({ field }) => (
+                <Textarea
+                  {...field}
+                  value={field.value || ''}
+                  placeholder={t('placeholder.description')}
+                  error={errors.description?.message}
+                />
+              )}
+            />
+
+          <Group>
+            <Text>{t('placeholder.source.type')}:</Text>
+            <Controller
+              name="type"
+              control={control}
+              rules={{ required: t('common.required') }}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  value={field.value || ''}
+                  data={['website', 'twitter', 'telegram'].map((type) => ({
+                    value: type,
+                    label: type,
+                  }))}
+                  placeholder={t('placeholder.source.type')}
+                  error={errors.type?.message}
+                />
+              )}
+            />
+          </Group>
+          <Group>
+            <Text>{t('placeholder.url')}:</Text>
+            <Controller
+              name="url"
+              control={control}
+              rules={{ required: t('common.required') }}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder={t('placeholder.url')}
+                  error={errors.url?.message}
+                />
+              )}
+            />
+          </Group>
+
+          <Group>
+            <Text>{t('placeholder.reliability')}:</Text>
+            <Controller
+              name="reliability"
+              control={control}
+              rules={{ required: t('common.required') }}
+              render={({ field }) => (
+                <Slider
+                  {...field}
+                  value={field.value || 0}
+                  min={0}
+                  max={100}
+                  style={{ flex: 1 }}
+                  label={(value) => `${value}%`}
+                />
+              )}
+            />
+          </Group>
+          <Group>
+            <Text>{t('placeholder.lastReviewed')}:</Text>
+            <Controller
+              name="last_reviewed"
+              control={control}
+              rules={{ required: t('common.required') }}
+              render={({ field }) => (
+                <CustomDatePicker
+                  value={field.value ? new Date(field.value * 1000) : null}
+                  onChange={(date) => field.onChange(date ? date.getTime() / 1000 : 0)}
+                  placeholder={t('placeholder.lastReviewed')}
+                  error={errors.last_reviewed?.message}
+                />
+              )}
+            />
+          </Group>
+
+          <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}>
+            <Controller
+              name="attributes"
+              control={control}
+              render={({ field }) => (
+                <EditableAttributes {...field} value={field.value || {}} isEditing={true} />
+              )}
+            />
+          </Collapse>
+        </Stack>
+      )}
+    </BaseForm>
+  );
+};

package/src/forms/MonitoringSourceForm/StaticForm.tsx

@@ -0,0 +1,107 @@
+import React, { useState, type PropsWithChildren } from 'react';
+import {
+  Stack,
+  Group,
+  Text,
+  Divider,
+  Title,
+  Collapse,
+  UnstyledButton,
+} from '@mantine/core';
+import { type MonitoringSource } from 'omni-monitoring-client';
+import { useTranslation } from 'react-i18next';
+import { EditableAttributes } from '../EditableAttributes';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import { BaseForm } from '../BaseForm';
+
+interface Props extends PropsWithChildren {
+  source: MonitoringSource;
+  onClose?: () => void;
+  onDoubleClick: () => void;
+  editModeEnabled: boolean;
+  exitButton?: React.ReactNode;
+}
+
+export const StaticForm: React.FC<Props> = ({
+  source,
+  onClose,
+  onDoubleClick,
+  editModeEnabled,
+  exitButton,
+  children,
+}) => {
+  const { t } = useTranslation();
+  const [attributesOpen, setAttributesOpen] = useState(false);
+
+  const handlClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <BaseForm<MonitoringSource>
+      title={source.name || t('components.forms.MonitoringSourceForm.title')}
+      onClose={handlClose}
+      defaultValues={source}
+      exitButton={exitButton}
+      onlyShowEditOnDirty={true}
+    >
+      {() => (
+        <Stack
+          pos="relative"
+          gap="xs"
+          style={{ cursor: editModeEnabled ? 'pointer' : 'default' }}
+          onDoubleClick={onDoubleClick}
+        >
+          <Text>{source.description || t('placeholder.description')}</Text>
+
+          <Group>
+            <Text>{t('placeholder.source.type')}:</Text>
+            <Text>{source.type}</Text>
+          </Group>
+          <Group>
+            <Text>{t('placeholder.url')}:</Text>
+            <Text>{source.url}</Text>
+          </Group>
+
+          <Group>
+            <Text>{t('placeholder.reliability')}:</Text>
+            <Text>{source.reliability}</Text>
+          </Group>
+          <Group>
+            <Text>{t('placeholder.lastReviewed')}:</Text>
+            <Text>
+              {source.last_reviewed
+                ? new Date(source.last_reviewed * 1000).toLocaleDateString()
+                : ''}
+            </Text>
+          </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={source.attributes || {}}
+              isEditing={false}
+              onChange={() => {}}
+            />
+          </Collapse>
+        </Stack>
+      )}
+    </BaseForm>
+  );
+};

package/src/forms/MonitoringSourceForm/index.ts

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

package/src/forms/OrganizationForm/EditableForm.tsx

@@ -0,0 +1,74 @@
+import { useState, type PropsWithChildren, type CSSProperties } from "react";
+import type { Organization, Permissive } from "omni-osint-crud-client";
+import { EditingForm } from "./EditingForm";
+import { StaticForm } from "./StaticForm";
+
+interface Props extends PropsWithChildren {
+  organization: Organization;
+  isAdmin?: boolean;
+  onSubmit?: (data: Organization) => void;
+  onUpdate?: (data: Partial<Organization>) => void;
+  onUpdatePermissive?: (data: Permissive) => void;
+  onClose?: () => void;
+  exitButton?: React.ReactNode;
+  style?: CSSProperties;
+}
+
+export const OrganizationForm: React.FC<Props> = ({
+  organization,
+  isAdmin = false,
+  onSubmit,
+  onUpdate,
+  onUpdatePermissive,
+  onClose,
+  exitButton,
+  children,
+  style,
+}) => {
+  const [isEditing, setIsEditing] = useState(onSubmit !== undefined);
+
+  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
+      organization={organization}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+      onClose={handlClose}
+      style={style}
+    />
+  ) : (
+    <StaticForm
+      organization={organization}
+      isAdmin={isAdmin}
+      onUpdate={onUpdatePermissive}
+      onClose={handlClose}
+      onDoubleClick={handleDoubleClick}
+      exitButton={exitButton || <></>}
+      style={style}
+      editModeEnabled={onUpdate !== undefined}
+    >
+      {children}
+    </StaticForm>
+  );
+};

package/src/forms/OrganizationForm/EditingForm.tsx

@@ -0,0 +1,177 @@
+import {
+  Group,
+  Text,
+  Stack,
+  Divider,
+  UnstyledButton,
+  Collapse,
+  Title,
+  TextInput,
+  TagsInput,
+} from "@mantine/core";
+import { CustomDatePicker } from "../../inputs/CustomDatePicker";
+import { useTranslation } from "react-i18next";
+import { type Organization } from "omni-osint-crud-client";
+import { EditableAttributes } from "../EditableAttributes";
+import { type CSSProperties, useState } from "react";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { Controller } from "react-hook-form";
+import { BaseForm } from "../BaseForm";
+import { OrganizationIcon } from "@omnsight/osint-entity-components/icons";
+import { OrganizationIconFormSection } from "./IconFormSection";
+
+interface Props {
+  organization: Organization;
+  onSubmit?: (data: Organization) => void;
+  onUpdate?: (data: Partial<Organization>) => void;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  style?: CSSProperties;
+}
+
+export const EditingForm: React.FC<Props> = ({
+  organization,
+  onSubmit,
+  onUpdate,
+  onClose,
+  children,
+  style,
+}) => {
+  const { t } = useTranslation();
+  const [attributesOpen, setAttributesOpen] = useState(false);
+
+  const handlClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <BaseForm<Organization>
+      style={style}
+      icon={<OrganizationIcon organization={organization} />}
+      title={t("components.forms.OrganizationForm.title")}
+      onClose={handlClose}
+      defaultValues={organization}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+      onlyShowEditOnDirty={false}
+    >
+      {({ control, formState: { errors } }) => {
+        return (
+          <Stack pos="relative" gap="xs" style={{ cursor: "default" }}>
+            <Group gap={4}>
+              <Text size="sm" fw={500}>
+                {t("placeholder.name")}
+              </Text>
+              <Controller
+                name="name"
+                control={control}
+                rules={{ required: t("common.required") }}
+                render={({ field }) => (
+                  <TextInput
+                    {...field}
+                    value={field.value || ""}
+                    placeholder={t("components.forms.OrganizationForm.name")}
+                    error={errors.name?.message}
+                  />
+                )}
+              />
+            </Group>
+
+            <Group gap={4}>
+              <Text size="sm" c="dimmed">
+                {t("placeholder.type")}:
+              </Text>
+              <OrganizationIconFormSection data={organization} />
+            </Group>
+
+            <Group gap={4}>
+              <Text size="sm" c="dimmed">
+                {t("placeholder.foundedDate")}:
+              </Text>
+              <Controller
+                name="founded_at"
+                control={control}
+                render={({ field }) => (
+                  <CustomDatePicker
+                    value={field.value ? new Date(field.value * 1000) : null}
+                    onChange={(date) =>
+                      field.onChange(date ? date.getTime() / 1000 : 0)
+                    }
+                    placeholder={t("placeholder.foundedDate")}
+                  />
+                )}
+              />
+            </Group>
+
+            <Group gap={4}>
+              <Text size="sm" c="dimmed">
+                {t("placeholder.discoveredDate")}:
+              </Text>
+              <Controller
+                name="discovered_at"
+                control={control}
+                render={({ field }) => (
+                  <CustomDatePicker
+                    value={field.value ? new Date(field.value * 1000) : null}
+                    onChange={(date) =>
+                      field.onChange(date ? date.getTime() / 1000 : 0)
+                    }
+                    placeholder={t("placeholder.discoveredDate")}
+                  />
+                )}
+              />
+            </Group>
+
+            <Text size="sm" fw={500}>
+              {t("placeholder.tags")}
+            </Text>
+            <Controller
+              name="tags"
+              control={control}
+              render={({ field }) => (
+                <TagsInput
+                  {...field}
+                  value={field.value || []}
+                  placeholder={t("placeholder.tags")}
+                />
+              )}
+            />
+
+            {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}>
+              <Controller
+                name="attributes"
+                control={control}
+                render={({ field }) => (
+                  <EditableAttributes
+                    {...field}
+                    value={field.value || {}}
+                    isEditing={true}
+                  />
+                )}
+              />
+            </Collapse>
+          </Stack>
+        );
+      }}
+    </BaseForm>
+  );
+};

package/src/forms/OrganizationForm/IconFormSection.tsx

@@ -0,0 +1,60 @@
+import { Group, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { type Organization } from "omni-osint-crud-client";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import {
+  OrganizationIconSelector,
+  OrganizationColorSelector,
+} from "@omnsight/osint-entity-components/icons";
+
+export const OrganizationIconFormSection = ({
+  data,
+}: {
+  data: Organization;
+}) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<Organization>();
+  const { t } = useTranslation();
+  const type = useWatch({ control, name: "type" });
+  const iconColor = useWatch({ control, name: "attributes.icon_color" });
+
+  const modifiedData = {
+    ...data,
+    type: type,
+    attributes: { ...data.attributes, icon_color: iconColor },
+  };
+
+  return (
+    <Group grow>
+      <Controller
+        name="type"
+        control={control}
+        rules={{ required: t("common.required") }}
+        render={({ field }) => (
+          <Stack gap={0}>
+            <OrganizationIconSelector
+              {...field}
+              data={modifiedData}
+              value={field.value}
+              error={errors.type?.message}
+            />
+          </Stack>
+        )}
+      />
+      <Controller
+        name="attributes.icon_color"
+        control={control}
+        rules={{ required: t("common.required") }}
+        render={({ field }) => (
+          <OrganizationColorSelector
+            {...field}
+            value={field.value as string | undefined}
+            error={errors.attributes?.icon_color?.message}
+          />
+        )}
+      />
+    </Group>
+  );
+};