@omnsight/osint-entity-components 0.1.2 → 0.1.4

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.2",
+  "version": "0.1.4",
   "engines": {
     "node": ">=24.0.0"
   },

package/src/icons/Event/Select.tsx

@@ -4,16 +4,45 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { EventIcon } from "./Icon";
 
-interface EventIconSelectProps {
-  value: Event;
-  onChange: (value: Event) => void;
+interface EventIconSelectorProps {
+  data: Event;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const EventIconSelect: React.FC<EventIconSelectProps> = ({
+export const EventIconSelector: React.FC<EventIconSelectorProps> = ({
+  data,
   value,
   onChange,
 }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`event.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<EventIcon event={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface EventColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const EventColorSelector: React.FC<EventColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -24,37 +53,46 @@ export const EventIconSelect: React.FC<EventIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface EventIconSelectProps {
+  value: Event;
+  onChange: (value: Event) => void;
+}
+
+export const EventIconSelect: React.FC<EventIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`event.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<EventIcon event={value} />}
-        defaultValue={translatedOptions[0].value}
+      <EventIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <EventColorSelector 
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Organization/Select.tsx

@@ -4,16 +4,42 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { OrganizationIcon } from "./Icon";
 
-interface OrganizationIconSelectProps {
-  value: Organization;
-  onChange: (value: Organization) => void;
+interface OrganizationIconSelectorProps {
+  data: Organization;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
-  value,
-  onChange,
-}) => {
+export const OrganizationIconSelector: React.FC<
+  OrganizationIconSelectorProps
+> = ({ data, value, onChange }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`organization.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<OrganizationIcon organization={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface OrganizationColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const OrganizationColorSelector: React.FC<
+  OrganizationColorSelectorProps
+> = ({ value, onChange }) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -24,37 +50,46 @@ export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface OrganizationIconSelectProps {
+  value: Organization;
+  onChange: (value: Organization) => void;
+}
+
+export const OrganizationIconSelect: React.FC<OrganizationIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`organization.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<OrganizationIcon organization={value} />}
-        defaultValue={translatedOptions[0].value}
+      <OrganizationIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <OrganizationColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Person/Select.tsx

@@ -4,13 +4,45 @@ import { Group, Select, ColorInput } from '@mantine/core';
 import { ICON_OPTIONS } from './icons';
 import { PersonIcon } from './Icon';
 
-interface PersonIconSelectProps {
-  value: Person;
-  onChange: (value: Person) => void;
+interface PersonIconSelectorProps {
+  data: Person;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({ value, onChange }) => {
+export const PersonIconSelector: React.FC<PersonIconSelectorProps> = ({
+  data,
+  value,
+  onChange,
+}) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`person.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<PersonIcon person={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface PersonColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const PersonColorSelector: React.FC<PersonColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -21,34 +53,46 @@ export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({ value, onCha
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface PersonIconSelectProps {
+  value: Person;
+  onChange: (value: Person) => void;
+}
+
+export const PersonIconSelect: React.FC<PersonIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
-    onChange({ ...value, attributes: { ...(value.attributes || {}), icon_color: color } });
+  const handleColorChange = (color: string | null) => {
+    onChange({
+      ...value,
+      attributes: { ...(value.attributes || {}), icon_color: color },
+    });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`person.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<PersonIcon person={value} />}
-        defaultValue={translatedOptions[0].value}
+      <PersonIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <PersonColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Source/Select.tsx

@@ -4,16 +4,45 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { SourceIcon } from "./Icon";
 
-interface SourceIconSelectProps {
-  value: Source;
-  onChange: (value: Source) => void;
+interface SourceIconSelectorProps {
+  data: Source;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
+export const SourceIconSelector: React.FC<SourceIconSelectorProps> = ({
+  data,
   value,
   onChange,
 }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`source.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<SourceIcon source={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface SourceColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const SourceColorSelector: React.FC<SourceColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#ababab",
     "#0089ff",
@@ -24,37 +53,46 @@ export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface SourceIconSelectProps {
+  value: Source;
+  onChange: (value: Source) => void;
+}
+
+export const SourceIconSelect: React.FC<SourceIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, type: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`source.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<SourceIcon source={value} />}
-        defaultValue={translatedOptions[0].value}
+      <SourceIconSelector
+        data={value}
         value={value.type}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <SourceColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/Website/Select.tsx

@@ -4,16 +4,45 @@ import { Group, Select, ColorInput } from "@mantine/core";
 import { ICON_OPTIONS } from "./icons";
 import { WebsiteIcon } from "./Icon";
 
-interface WebsiteIconSelectProps {
-  value: Website;
-  onChange: (value: Website) => void;
+interface WebsiteIconSelectorProps {
+  data: Website;
+  value?: string | null;
+  onChange: (value: string | null) => void;
 }
 
-export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
+export const WebsiteIconSelector: React.FC<WebsiteIconSelectorProps> = ({
+  data,
   value,
   onChange,
 }) => {
   const { t } = useTranslation();
+
+  const translatedOptions = ICON_OPTIONS.map((option) => ({
+    ...option,
+    label: t(`website.type.${option.label}`),
+  }));
+
+  return (
+    <Select
+      leftSection={<WebsiteIcon website={data} />}
+      defaultValue={translatedOptions[0].value}
+      value={value}
+      onChange={onChange}
+      data={translatedOptions}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface WebsiteColorSelectorProps {
+  value?: string | null;
+  onChange: (value: string | null) => void;
+}
+
+export const WebsiteColorSelector: React.FC<WebsiteColorSelectorProps> = ({
+  value,
+  onChange,
+}) => {
   const colors = [
     "#0089ff",
     "#ff0000",
@@ -24,37 +53,46 @@ export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
     "#7950f2",
   ];
 
+  return (
+    <ColorInput
+      value={value || colors[0]}
+      onChange={onChange}
+      swatches={colors}
+      style={{ flex: 1 }}
+    />
+  );
+};
+
+interface WebsiteIconSelectProps {
+  value: Website;
+  onChange: (value: Website) => void;
+}
+
+export const WebsiteIconSelect: React.FC<WebsiteIconSelectProps> = ({
+  value,
+  onChange,
+}) => {
   const handleTypeChange = (type: string | null) => {
     onChange({ ...value, title: type || undefined });
   };
 
-  const handleColorChange = (color: string) => {
+  const handleColorChange = (color: string | null) => {
     onChange({
       ...value,
       attributes: { ...(value.attributes || {}), icon_color: color },
     });
   };
 
-  const translatedOptions = ICON_OPTIONS.map((option) => ({
-    ...option,
-    label: t(`website.type.${option.label}`),
-  }));
-
   return (
     <Group>
-      <Select
-        leftSection={<WebsiteIcon website={value} />}
-        defaultValue={translatedOptions[0].value}
-        value={value.type}
+      <WebsiteIconSelector
+        data={value}
+        value={value.title}
         onChange={handleTypeChange}
-        data={translatedOptions}
-        style={{ flex: 1 }}
       />
-      <ColorInput
-        value={String((value.attributes || {}).icon_color || colors[0])}
+      <WebsiteColorSelector
+        value={String(value.attributes?.icon_color)}
         onChange={handleColorChange}
-        swatches={colors}
-        style={{ flex: 1 }}
       />
     </Group>
   );

package/src/icons/index.ts

@@ -1,10 +1,10 @@
 export { EventIcon} from './Event/Icon';
-export { EventIconSelect } from './Event/Select';
+export { EventIconSelect, EventColorSelector, EventIconSelector } from './Event/Select';
 export { OrganizationIcon } from './Organization/Icon';
-export { OrganizationIconSelect } from './Organization/Select';
+export { OrganizationIconSelect, OrganizationColorSelector, OrganizationIconSelector } from './Organization/Select';
 export { PersonIcon } from './Person/Icon';
-export { PersonIconSelect } from './Person/Select';
+export { PersonIconSelect, PersonColorSelector, PersonIconSelector } from './Person/Select';
 export { SourceIcon } from './Source/Icon';
-export { SourceIconSelect } from './Source/Select';
+export { SourceIconSelect, SourceColorSelector, SourceIconSelector } from './Source/Select';
 export { WebsiteIcon } from './Website/Icon';
-export { WebsiteIconSelect } from './Website/Select';
+export { WebsiteIconSelect, WebsiteColorSelector, WebsiteIconSelector } from './Website/Select';