@omnsight/osint-entity-components 0.2.4 → 0.2.6

package/src/forms/WebsiteForm/EditingForm.tsx

@@ -0,0 +1,216 @@
+import React, { useState, type CSSProperties } from 'react';
+import {
+  Stack,
+  Group,
+  Text,
+  ActionIcon,
+  Divider,
+  UnstyledButton,
+  Collapse,
+  Title,
+  TextInput,
+  Textarea,
+  TagsInput,
+} from '@mantine/core';
+import { CustomDatePicker } from '../../inputs/CustomDatePicker';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/react/24/outline';
+import { useTranslation } from 'react-i18next';
+import { type Website } from 'omni-osint-crud-client';
+import { EditableAttributes } from '../EditableAttributes';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { Controller } from 'react-hook-form';
+import { BaseForm } from '../BaseForm';
+import { WebsiteIcon } from '@omnsight/osint-entity-components/icons';
+import { WebsiteIconFormSection } from './IconFormSection';
+
+interface Props {
+  website: Website;
+  onSubmit?: (data: Website) => void;
+  onUpdate?: (data: Partial<Website>) => void;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  style?: CSSProperties;
+}
+
+export const EditingForm: React.FC<Props> = ({
+  website,
+  onSubmit,
+  onUpdate,
+  onClose,
+  children,
+  style,
+}) => {
+  const { t } = useTranslation();
+  const [attributesOpen, setAttributesOpen] = useState(false);
+
+  const handlClose = () => {
+    onClose?.();
+  };
+
+  return (
+    <BaseForm<Website>
+      style={style}
+      icon={<WebsiteIcon website={website} />}
+      title={t('components.forms.WebsiteForm.title')}
+      onClose={handlClose}
+      defaultValues={website}
+      onSubmit={onSubmit}
+      onUpdate={onUpdate}
+      onlyShowEditOnDirty={false}
+    >
+      {({ control, formState: { errors } }) => (
+        <Stack
+          pos="relative"
+          gap="xs"
+          style={{ cursor: 'default' }}
+        >
+          <Group gap="xs">
+            <Text size="sm" fw={500}>
+              {t('placeholder.title')}
+            </Text>
+            <Controller
+              name="title"
+              control={control}
+              rules={{ required: t('common.required') }}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  value={field.value || ''}
+                  placeholder={t('placeholder.title')}
+                  style={{ flex: 'initial' }}
+                  error={errors.title?.message}
+                />
+              )}
+            />
+            {website.url && (
+              <ActionIcon
+                component="a"
+                href={website.url}
+                target="_blank"
+                variant="subtle"
+                size="sm"
+              >
+                <ArrowTopRightOnSquareIcon style={{ width: '70%', height: '70%' }} />
+              </ActionIcon>
+            )}
+          </Group>
+
+          <Group gap={4}>
+            <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 gap={4}>
+            <Text>{t('placeholder.description')}:</Text>
+            <Controller
+              name="description"
+              control={control}
+              render={({ field }) => (
+                <Textarea
+                  {...field}
+                  value={field.value || ''}
+                  placeholder={t('placeholder.description')}
+                />
+              )}
+            />
+          </Group>
+
+          <Group gap={4}>
+            <Text size="sm" c="dimmed">
+              {t('placeholder.type')}:
+            </Text>
+            <WebsiteIconFormSection data={website} />
+          </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/WebsiteForm/IconFormSection.tsx

@@ -0,0 +1,54 @@
+import { Group } from "@mantine/core";
+import {
+  WebsiteColorSelector,
+  WebsiteIconSelector,
+} from "@omnsight/osint-entity-components/icons";
+import type { Website } from "omni-osint-crud-client";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+export const WebsiteIconFormSection = ({ data }: { data: Website }) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<Website>();
+  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 }) => (
+          <WebsiteIconSelector
+            {...field}
+            data={modifiedData}
+            value={field.value}
+            error={errors.type?.message}
+          />
+        )}
+      />
+      <Controller
+        name="attributes.icon_color"
+        control={control}
+        rules={{ required: t("common.required") }}
+        render={({ field }) => (
+          <WebsiteColorSelector
+            {...field}
+            value={field.value as string | undefined}
+            error={errors.attributes?.icon_color?.message}
+          />
+        )}
+      />
+    </Group>
+  );
+};

package/src/forms/WebsiteForm/StaticForm.tsx

@@ -0,0 +1,225 @@
+import React, {
+  useState,
+  type CSSProperties,
+  type PropsWithChildren,
+} from "react";
+import {
+  Stack,
+  Group,
+  Text,
+  ActionIcon,
+  Divider,
+  UnstyledButton,
+  Collapse,
+  Title,
+  rem,
+  Tooltip,
+  Box,
+  Select,
+} from "@mantine/core";
+import {
+  ArrowTopRightOnSquareIcon,
+  UserIcon,
+} from "@heroicons/react/24/outline";
+import { useTranslation } from "react-i18next";
+import { type Website, type Permissive } from "omni-osint-crud-client";
+import { EditableAttributes } from "../EditableAttributes";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import {
+  getAccessLevel,
+  getRoles,
+  useReadOptions,
+  useWriteOptions,
+} from "../accessLevel";
+import { Controller } from "react-hook-form";
+import { BaseForm } from "../BaseForm";
+import { WebsiteIcon } from "@omnsight/osint-entity-components/icons";
+
+interface Props extends PropsWithChildren {
+  website: Website;
+  isAdmin?: boolean;
+  onUpdate?: (data: Permissive) => void;
+  onClose?: () => void;
+  onDoubleClick: () => void;
+  exitButton?: React.ReactNode;
+  style?: CSSProperties;
+  editModeEnabled: boolean;
+}
+
+export const StaticForm: React.FC<Props> = ({
+  website,
+  isAdmin = false,
+  onUpdate,
+  onClose,
+  onDoubleClick,
+  exitButton,
+  children,
+  style,
+  editModeEnabled,
+}) => {
+  const { t } = useTranslation();
+  const [attributesOpen, setAttributesOpen] = useState(false);
+
+  const handlClose = () => {
+    onClose?.();
+  };
+
+  const readOptions = useReadOptions(isAdmin);
+  const writeOptions = useWriteOptions();
+
+  return (
+    <BaseForm<Website>
+      style={style}
+      icon={<WebsiteIcon website={website} />}
+      title={website.title || t("components.forms.WebsiteForm.title")}
+      onClose={handlClose}
+      defaultValues={website}
+      onUpdate={onUpdate}
+      exitButton={exitButton}
+      onlyShowEditOnDirty={true}
+    >
+      {({ control, formState: { errors } }) => (
+        <Stack
+          pos="relative"
+          gap="xs"
+          style={{ cursor: editModeEnabled ? "pointer" : "default" }}
+          onDoubleClick={onDoubleClick}
+        >
+          <Group gap="xs">
+            {website.url && (
+              <ActionIcon
+                component="a"
+                href={website.url}
+                target="_blank"
+                variant="subtle"
+                size="sm"
+              >
+                <ArrowTopRightOnSquareIcon
+                  style={{ width: "70%", height: "70%" }}
+                />
+              </ActionIcon>
+            )}
+          </Group>
+
+          <Group gap={4}>
+            <Text>{website.url}</Text>
+          </Group>
+
+          <Group gap={4}>
+            <Text>{website.description || t("placeholder.description")}</Text>
+          </Group>
+
+          <Group gap={4}>
+            <Text size="sm">{website.type}</Text>
+          </Group>
+
+          <Group gap={4}>
+            <Text size="sm">
+              {website.founded_at
+                ? new Date(website.founded_at * 1000).toLocaleDateString()
+                : t("placeholder.foundedDate")}
+            </Text>
+          </Group>
+
+          <Group gap={4}>
+            <Text size="sm">
+              {website.discovered_at
+                ? new Date(website.discovered_at * 1000).toLocaleDateString()
+                : t("placeholder.discoveredDate")}
+            </Text>
+          </Group>
+
+          <Text size="sm">{(website.tags || []).join(", ")}</Text>
+
+          {children}
+
+          {onUpdate && (
+            <Group gap="xs" w="100%">
+              <Box
+                style={{
+                  flex: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Tooltip label={website.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>
+          )}
+
+          <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={website.attributes || {}}
+              isEditing={false}
+              onChange={() => {}}
+            />
+          </Collapse>
+        </Stack>
+      )}
+    </BaseForm>
+  );
+};

package/src/forms/WebsiteForm/index.ts

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

package/src/forms/accessLevel.ts

@@ -0,0 +1,48 @@
+import { useTranslation } from "react-i18next";
+
+
+export const useReadOptions = (isAdmin: boolean) => {
+  const { t } = useTranslation();
+  return [
+    { value: "private", label: t("access.private") },
+    ...(isAdmin
+      ? [
+        { value: "paid", label: t("access.paid") },
+        { value: "platform", label: t("access.platform") },
+      ]
+      : []),
+    { value: "public", label: t("access.public") },
+  ];
+};
+
+export const useWriteOptions = () => {
+  const { t } = useTranslation();
+  return [
+    { value: "private", label: t("access.private") },
+    { value: "paid", label: t("access.public") },
+  ];
+};
+
+export const getAccessLevel = (roles: string[]) => {
+  if (roles.includes("guest")) {
+    return "public";
+  } else if (roles.includes("user")) {
+    return "platform";
+  } else if (roles.includes("pro")) {
+    return "paid";
+  } else {
+    return "private";
+  }
+}
+
+export const getRoles = (accessLevel: string | null) => {
+  if (accessLevel === "public") {
+    return ["guest", "user", "pro", "admin"];
+  } else if (accessLevel === "platform") {
+    return ["user", "pro", "admin"];
+  } else if (accessLevel === "paid") {
+    return ["pro", "admin"];
+  } else {
+    return ["admin"];
+  }
+}

package/src/forms/index.ts

@@ -0,0 +1,8 @@
+export * from './EventForm';
+export * from './OrganizationForm';
+export * from './PersonForm';
+export * from './RelationForm';
+export * from './SourceForm';
+export * from './WebsiteForm';
+export * from './MonitoringSourceForm';
+export * from './InsightForm';

package/src/icons/Event/Select.tsx

@@ -27,8 +27,8 @@ export const EventIconSelector: React.FC<EventIconSelectorProps> = ({
   return (
     <Select
       leftSection={<EventIcon event={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 EventIconSelector: React.FC<EventIconSelectorProps> = ({
 };
 
 interface EventColorSelectorProps {
-  value?: string | null;
+  value?: string;
   onChange: (value: string | null) => void;
   error?: string;
 }
@@ -47,6 +47,7 @@ export const EventColorSelector: React.FC<EventColorSelectorProps> = ({
   onChange,
   error,
 }) => {
+  const { t } = useTranslation();
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -59,8 +60,8 @@ export const EventColorSelector: React.FC<EventColorSelectorProps> = ({
 
   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 EventIconSelect: React.FC<EventIconSelectProps> = ({
         onChange={handleTypeChange}
       />
       <EventColorSelector
-        value={String(value.attributes?.icon_color)}
+        value={value.attributes?.icon_color as string | undefined}
         onChange={handleColorChange}
       />
     </Group>

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>