@omnsight/osint-entity-components 0.2.4 → 0.2.6

package/package.json

@@ -3,7 +3,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.4",
+  "version": "0.2.6",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/omnsight/omni-osint-entity-components.git",
+    "directory": "client"
+  },
   "engines": {
     "node": ">=24.0.0"
   },
@@ -51,20 +56,28 @@
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@mantine/core": "^8.3.18",
+    "@mantine/dates": "^8.3.18",
     "@mantine/hooks": "^8.3.18",
+    "@mantine/modals": "^8.3.18",
+    "@mantine/notifications": "^8.3.18",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-svgo": "^8.1.0",
+    "date-fns-tz": "^3.2.0",
+    "i18n-iso-countries": "^7.14.0",
+    "loadash": "^1.0.0",
     "omni-monitoring-client": "latest",
     "omni-osint-crud-client": "latest",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-hook-form": "^7.72.0",
-    "react-i18next": "^16.6.6"
+    "react-i18next": "^16.6.6",
+    "react-timezone-select": "^3.3.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
     "@iconify/utils": "^3.1.0",
     "@svgr/core": "^8.1.0",
+    "@types/lodash": "^4.17.24",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

package/src/App.tsx

@@ -2,6 +2,7 @@ import {
   ActionIcon,
   Button,
   Card,
+  Divider,
   Group,
   ScrollArea,
   SimpleGrid,
@@ -11,6 +12,17 @@ import {
 } from "@mantine/core";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import type {
+  Person,
+  Organization,
+  Event,
+  Source,
+  Website,
+  Relation,
+  OsintView,
+} from "omni-osint-crud-client";
+import type { MonitoringSource } from "omni-monitoring-client";
 import {
   AvatarDropdown,
   AvatarRowList,
@@ -34,15 +46,6 @@ import {
   WebsiteIcon,
   WebsiteIconSelect,
 } from "./icons";
-import type {
-  Person,
-  Organization,
-  Event,
-  Source,
-  Website,
-  Relation,
-} from "omni-osint-crud-client";
-import type { MonitoringSource } from "omni-monitoring-client";
 import {
   EventCard,
   OrganizationCard,
@@ -51,66 +54,132 @@ import {
   WebsiteCard,
   MonitoringSourceCard,
 } from "./cards";
-import { ArrowRightIcon } from "@heroicons/react/24/solid";
+import {
+  EventForm,
+  InsightForm,
+  MonitoringSourceForm,
+  OrganizationForm,
+  PersonForm,
+  RelationForm,
+  SourceForm,
+  WebsiteForm,
+} from "./forms";
 
 function App() {
   const { i18n } = useTranslation();
   const { colorScheme, setColorScheme } = useMantineColorScheme();
+  const [isAdmin, setIsAdmin] = useState(true);
   const [person, setPerson] = useState<Person>({
-    _id: "person-1",
+    _id: "person/1",
     name: "John Doe",
     role: "professional",
     aliases: ["John", "Johnny"],
     tags: ["tag1", "tag2"],
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
   });
   const [organization, setOrganization] = useState<Organization>({
-    _id: "org-1",
+    _id: "org/1",
     name: "Acme Inc.",
     tags: ["company", "software"],
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
   });
   const [event, setEvent] = useState<Event>({
-    _id: "event-1",
+    _id: "event/1",
     title: "New Product Launch",
     description: "The launch of a new product",
     happened_at: new Date().getTime() / 1000,
     tags: ["new-product", "launch"],
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
   });
   const [source, setSource] = useState<Source>({
-    _id: "source-1",
+    _id: "source/1",
     name: "News Article",
     url: "https://example.com/article",
     description: "A news article about something.",
     tags: ["news", "article"],
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
+  });
+  const [source2, ] = useState<Source>({
+    _id: "source/2",
+    name: "Sample Artical 2",
+    url: "https://example.com/article/2",
+    description: "A news article about something 2",
+    tags: ["news", "article", "2"],
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
   });
   const [website, setWebsite] = useState<Website>({
-    _id: "website-1",
+    _id: "website/1",
     url: "https://example.com",
     title: "Example Website",
     description: "An example website.",
     tags: ["website", "example"],
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
   });
-  const [monitoringSource] = useState<MonitoringSource>({
+  const [relation, setRelation] = useState<Relation>({
+    _id: "relation/1",
+    _from: "person/1",
+    _to: "org/1",
+    label: "相关人物/组织",
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
+  });
+  const [monitoringSource, setMonitoringSource] = useState<MonitoringSource>({
     name: "Test Monitoring Source",
     description:
       "This is a test description for the monitoring source card. It should truncate after a certain point to avoid overflowing the card.",
     reliability: 75,
-    owner: "test-owner",
+    owner: "asj1834s",
   });
-  const [relation] = useState<Relation>({
-    _id: "relation-1",
-    _from: "person-1",
-    _to: "org-1",
-    label: "相关人物/组织",
+  const [insight, setInsight] = useState<OsintView>({
+    _id: "insight/1",
+    name: "My test analysis",
+    description: "Analysis description",
+    owner: "asj1834s",
+    read: ["admin"],
+    write: ["admin"],
   });
 
   const cardStyle = {
     height: 500,
-    width: 400,
+    width: 500,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
   };
 
+  const handleSubmit = (data: any) => {
+    console.log("Submit:", data);
+  };
+
+  const handleUpdate = (setter: Function) => (data: any) => {
+    setter((prev: any) => ({ ...prev, ...data }));
+  };
+
+  const exitButton = (
+    <ActionIcon
+      variant="subtle"
+      color="gray"
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <ArrowRightIcon style={{ width: 18, height: 18 }} />
+    </ActionIcon>
+  );
+
   return (
     <>
       <Group>
@@ -128,135 +197,322 @@ function App() {
         >
           Toggle Theme
         </Button>
+        <Button onClick={() => setIsAdmin((p) => !p)}>Toggle Admin</Button>
       </Group>
       <ScrollArea style={{ height: "100vh" }}>
-        <SimpleGrid
-          cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
-          spacing="lg"
-          p="lg"
-        >
-          <Card withBorder style={cardStyle}>
-            <Text>Avatar List</Text>
-            <AvatarRowList>
-              <EventAvatar data={event} relation={relation} key={1} />
-              <OrganizationAvatar
-                data={organization}
-                relation={relation}
-                key={2}
-              />
-              <PersonAvatar data={person} relation={relation} key={3} />
-              <SourceAvatar data={source} relation={relation} key={4} />
-              <WebsiteAvatar data={website} relation={relation} key={5} />
+        <Stack p="lg" gap="lg">
+          <Text size="xl" fw={700}>
+            Original Components
+          </Text>
+          <SimpleGrid
+            cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
+            spacing="lg"
+          >
+            <Card withBorder style={cardStyle}>
+              <Text>Avatar List</Text>
+              <AvatarRowList>
+                <EventAvatar data={event} relation={relation} key={1} />
+                <OrganizationAvatar
+                  data={organization}
+                  relation={relation}
+                  key={2}
+                />
+                <PersonAvatar data={person} relation={relation} key={3} />
+                <SourceAvatar data={source} relation={relation} key={4} />
+                <WebsiteAvatar data={website} relation={relation} key={5} />
+                <EmptyAvatar />
+              </AvatarRowList>
+            </Card>
+            <Card withBorder style={cardStyle}>
+              <Text>Avatar Dropdown</Text>
+              <AvatarDropdown
+                avatarOnOpen={<Text>+</Text>}
+                avatarOnClose={<Text>-</Text>}
+              >
+                <SourceAvatar data={source} relation={relation} key={1} />
+                <SourceAvatar data={source} relation={relation} key={2} />
+                <SourceAvatar data={source} relation={relation} key={3} />
+              </AvatarDropdown>
+            </Card>
+            <Card withBorder style={cardStyle}>
+              <Text>Avatar Span</Text>
+              <AvatarSpan>
+                <EventAvatar data={event} relation={relation} key={1} />
+                <OrganizationAvatar
+                  data={organization}
+                  relation={relation}
+                  key={2}
+                />
+                <PersonAvatar data={person} relation={relation} key={3} />
+                <SourceAvatar data={source} relation={relation} key={4} />
+                <WebsiteAvatar data={website} relation={relation} key={5} />
+                <EmptyAvatar />
+              </AvatarSpan>
+            </Card>
+
+            <Card withBorder style={cardStyle}>
+              <Text>Avatars: </Text>
               <EmptyAvatar />
-            </AvatarRowList>
-          </Card>
-          <Card withBorder style={cardStyle}>
-            <Text>Avatar Dropdown</Text>
-            <AvatarDropdown
-              avatarOnOpen={<Text>+</Text>}
-              avatarOnClose={<Text>-</Text>}
-            >
-              <SourceAvatar data={source} relation={relation} key={1} />
-              <SourceAvatar data={source} relation={relation} key={2} />
-              <SourceAvatar data={source} relation={relation} key={3} />
-            </AvatarDropdown>
-          </Card>
-          <Card withBorder style={cardStyle}>
-            <Text>Avatar Span</Text>
-            <AvatarSpan>
-              <EventAvatar data={event} relation={relation} key={1} />
-              <OrganizationAvatar
-                data={organization}
-                relation={relation}
-                key={2}
+              <EventAvatar data={event} />
+              <OrganizationAvatar data={organization} />
+              <PersonAvatar data={person} />
+              <SourceAvatar data={source} />
+              <WebsiteAvatar data={website} />
+            </Card>
+
+            <Card withBorder style={cardStyle}>
+              <Text>Icons</Text>
+              <EventIcon event={event} />
+              <OrganizationIcon organization={organization} />
+              <PersonIcon person={person} />
+              <SourceIcon source={source} />
+              <WebsiteIcon website={website} />
+            </Card>
+
+            <Card withBorder style={cardStyle}>
+              <Text>Icon Select</Text>
+              <Text>Person:</Text>
+              <PersonIconSelect value={person} onChange={setPerson} />
+              <Text>Organization:</Text>
+              <OrganizationIconSelect
+                value={organization}
+                onChange={setOrganization}
               />
-              <PersonAvatar data={person} relation={relation} key={3} />
-              <SourceAvatar data={source} relation={relation} key={4} />
-              <WebsiteAvatar data={website} relation={relation} key={5} />
-              <EmptyAvatar />
-            </AvatarSpan>
-          </Card>
+              <Text>Event:</Text>
+              <EventIconSelect value={event} onChange={setEvent} />
+              <Text>Source:</Text>
+              <SourceIconSelect value={source} onChange={setSource} />
+              <Text>Website:</Text>
+              <WebsiteIconSelect value={website} onChange={setWebsite} />
+            </Card>
+          </SimpleGrid>
 
-          <Card withBorder style={cardStyle}>
-            <Text>Avatars: </Text>
-            <EmptyAvatar />
-            <EventAvatar data={event} />
-            <OrganizationAvatar data={organization} />
-            <PersonAvatar data={person} />
-            <SourceAvatar data={source} />
-            <WebsiteAvatar data={website} />
-          </Card>
+          <Divider />
+          <Text size="xl" fw={700}>
+            Entity Cards
+          </Text>
+          <SimpleGrid
+            cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
+            spacing="lg"
+          >
+            <EventCard
+              event={event}
+              action={
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  <ArrowRightIcon style={{ width: 18, height: 18 }} />
+                </ActionIcon>
+              }
+            />
+            <PersonCard person={person} />
+            <OrganizationCard organization={organization} />
+            <SourceCard source={source} />
+            <WebsiteCard website={website} />
+            <MonitoringSourceCard monitoringSource={monitoringSource} />
 
-          <Card withBorder style={cardStyle}>
-            <Text>Icons</Text>
-            <EventIcon event={event} />
-            <OrganizationIcon organization={organization} />
-            <PersonIcon person={person} />
-            <SourceIcon source={source} />
-            <WebsiteIcon website={website} />
-          </Card>
+            <EventCard event={{}} />
+            <PersonCard person={{}} />
+            <OrganizationCard organization={{}} />
+            <SourceCard source={{}} />
+            <WebsiteCard website={{}} />
+            <MonitoringSourceCard monitoringSource={{ owner: "" }} />
+          </SimpleGrid>
 
-          <Card withBorder style={cardStyle}>
-            <Text>Icon Select</Text>
-            <Text>Person:</Text>
-            <PersonIconSelect value={person} onChange={setPerson} />
-            <Text>Organization:</Text>
-            <OrganizationIconSelect
-              value={organization}
-              onChange={setOrganization}
+          <Divider />
+
+          <Text size="xl" fw={700}>
+            Input Forms For Creation
+          </Text>
+          <SimpleGrid
+            cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
+            spacing="lg"
+          >
+            <EventForm event={{}} onSubmit={handleSubmit} isAdmin={isAdmin} />
+            <InsightForm
+              insight={{}}
+              onSubmit={handleSubmit}
+              isAdmin={isAdmin}
+            />
+            <MonitoringSourceForm
+              source={{ owner: "" }}
+              onSubmit={handleSubmit}
+            />
+            <OrganizationForm
+              organization={{}}
+              onSubmit={handleSubmit}
+              isAdmin={isAdmin}
+            />
+            <PersonForm person={{}} onSubmit={handleSubmit} isAdmin={isAdmin} />
+            <RelationForm
+              relation={{ _from: "", _to: "" }}
+              onSubmit={handleSubmit}
+              isAdmin={isAdmin}
             />
-            <Text>Event:</Text>
-            <EventIconSelect value={event} onChange={setEvent} />
-            <Text>Source:</Text>
-            <SourceIconSelect value={source} onChange={setSource} />
-            <Text>Website:</Text>
-            <WebsiteIconSelect value={website} onChange={setWebsite} />
-          </Card>
+            <SourceForm source={{}} onSubmit={handleSubmit} isAdmin={isAdmin} />
+            <WebsiteForm
+              website={{}}
+              onSubmit={handleSubmit}
+              isAdmin={isAdmin}
+            />
+          </SimpleGrid>
 
-          <Card withBorder style={cardStyle}>
-            <Text>Cards</Text>
-            <ScrollArea w={350} h={400}>
-              <Stack>
-                <EventCard
-                  event={event}
-                  action={
-                    <ActionIcon
-                      variant="subtle"
-                      color="gray"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                    >
-                      <ArrowRightIcon style={{ width: 18, height: 18 }} />
-                    </ActionIcon>
-                  }
-                />
-                <PersonCard person={person} />
-                <OrganizationCard organization={organization} />
-                <SourceCard source={source} />
-                <WebsiteCard website={website} />
-              </Stack>
-            </ScrollArea>
-          </Card>
+          <Divider />
+
+          <Text size="xl" fw={700}>
+            Forms Double Clickable To Update
+          </Text>
+          <SimpleGrid
+            cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
+            spacing="lg"
+          >
+            <EventForm
+              event={event}
+              onUpdate={handleUpdate(setEvent)}
+              onUpdatePermissive={handleUpdate(setEvent)}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <InsightForm
+              insight={insight}
+              onUpdate={handleUpdate(setInsight)}
+              onUpdatePermissive={handleUpdate(setInsight)}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <MonitoringSourceForm
+              source={monitoringSource}
+              onUpdate={handleUpdate(setMonitoringSource)}
+              exitButton={exitButton}
+            />
+            <OrganizationForm
+              organization={organization}
+              onUpdate={handleUpdate(setOrganization)}
+              onUpdatePermissive={handleUpdate(setOrganization)}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <PersonForm
+              person={person}
+              onUpdate={handleUpdate(setPerson)}
+              onUpdatePermissive={handleUpdate(setPerson)}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <RelationForm
+              relation={relation}
+              onUpdate={handleUpdate(setRelation)}
+              onUpdatePermissive={handleUpdate(setRelation)}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <SourceForm
+              source={source}
+              onUpdate={handleUpdate(setSource)}
+              onUpdatePermissive={handleUpdate(setSource)}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <WebsiteForm
+              website={website}
+              onUpdate={handleUpdate(setWebsite)}
+              onUpdatePermissive={handleUpdate(setWebsite)}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+          </SimpleGrid>
 
-          <Card withBorder style={cardStyle}>
-            <Text>Empty Cards</Text>
-            <ScrollArea w={350} h={400}>
-              <Stack>
-                <EventCard event={{}} />
-                <PersonCard person={{}} />
-                <OrganizationCard organization={{}} />
-                <SourceCard source={{}} />
-                <WebsiteCard website={{}} />
-                <MonitoringSourceCard monitoringSource={{ owner: "" }} />
-              </Stack>
-            </ScrollArea>
-          </Card>
+          <Divider />
 
-          <Card withBorder style={cardStyle}>
-            <MonitoringSourceCard monitoringSource={monitoringSource} />
-          </Card>
-        </SimpleGrid>
+          <Text size="xl" fw={700}>
+            Read Only Forms
+          </Text>
+          <SimpleGrid
+            cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
+            spacing="lg"
+          >
+            <EventForm
+              event={event}
+              sources={[source, source2]}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <InsightForm
+              insight={insight}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <MonitoringSourceForm
+              source={monitoringSource}
+              exitButton={exitButton}
+            />
+            <OrganizationForm
+              organization={organization}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <PersonForm
+              person={person}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <RelationForm
+              relation={relation}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+            <SourceForm source={source} exitButton={exitButton} />
+            <WebsiteForm
+              website={website}
+              exitButton={exitButton}
+              isAdmin={isAdmin}
+            />
+          </SimpleGrid>
+
+          <Divider />
+
+          <Text size="xl" fw={700}>
+            Borderless Read Only Forms
+          </Text>
+          <SimpleGrid
+            cols={{ base: 1, sm: 2, md: 3, lg: 4, xl: 5 }}
+            spacing="lg"
+          >
+            <EventForm
+              event={event}
+              style={{ border: "none", boxShadow: "none", padding: 0 }}
+              isAdmin={isAdmin}
+            />
+            <OrganizationForm
+              organization={organization}
+              style={{ border: "none", boxShadow: "none", padding: 0 }}
+              isAdmin={isAdmin}
+            />
+            <PersonForm
+              person={person}
+              style={{ border: "none", boxShadow: "none", padding: 0 }}
+              isAdmin={isAdmin}
+            />
+            <RelationForm
+              relation={relation}
+              style={{ border: "none", boxShadow: "none", padding: 0 }}
+              isAdmin={isAdmin}
+            />
+            <SourceForm
+              source={source}
+              style={{ border: "none", boxShadow: "none", padding: 0 }}
+            />
+            <WebsiteForm
+              website={website}
+              style={{ border: "none", boxShadow: "none", padding: 0 }}
+              isAdmin={isAdmin}
+            />
+          </SimpleGrid>
+        </Stack>
       </ScrollArea>
     </>
   );