update tpyse and config

Author: yasenytskyoleh

.npmignore

@@ -0,0 +1,4 @@
+.idea
+.github
+node_modules
+src

package.json

@@ -2,8 +2,8 @@
   "name": "react-image-annotate",
   "version": "2.0.0",
   "type": "module",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "main": "dist/react-image-annotate.js",
+  "types": "dist/lib.d.ts",
   "files": [
     "dist"
   ],
@@ -23,8 +23,8 @@
     "material-survey": "^2.1.0",
     "moment": "^2.30.0",
     "monaco-editor": "^0.47.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-full-screen": "^1.1.1",
     "react-hotkeys": "^2.0.0",
     "react-markdown": "^9.0.0",
@@ -63,10 +63,9 @@
     "vite-tsconfig-paths": "^4.3.2"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
-  "homepage": "/react-image-annotate",
   "repository": {
     "type": "git",
     "url": "https://github.com/UniversalDataTool/react-image-annotate.git"

src/Annotator/index.tsx

@@ -1,6 +1,6 @@
 // @flow
 
-import type { Action, Image, MainLayoutState } from "../MainLayout/types";
+import { Action, Image, MainLayoutState, ToolEnum } from "../MainLayout/types";
 import { ComponentType, FunctionComponent, useEffect, useReducer } from "react";
 import Immutable, { ImmutableObject } from "seamless-immutable";
 
@@ -23,7 +23,7 @@ export type AnnotatorProps = {
   regionClsList?: Array<string | { id: string; label: string }>;
   imageTagList?: Array<string>;
   imageClsList?: Array<string>;
-  enabledTools?: Array<string>;
+  enabledTools?: Array<ToolEnum>;
   selectedTool?: String;
   showTags?: boolean;
   selectedImage?: string | number;
@@ -191,7 +191,7 @@ export const Annotator = ({
   }, [selectedImage, state.annotationType, state.images]);
 
   if (!images && !videoSrc)
-    return 'Missing required prop "images" or "videoSrc"';
+    return <div>Missing required prop "images" or "videoSrc"</div>;
 
   return (
     <SettingsProvider>

src/MainLayout/types.ts

@@ -21,7 +21,6 @@ export type ToolEnum =
   | "create-pixel"
   | "create-expanding-line"
   | "create-keypoints"
-  // TODO: check, added new types
   | "modify-allowed-area"
   | "create-line"
   | "show-tags"
@@ -105,7 +104,7 @@ export type MainLayoutStateBase = {
   regionTagList?: Array<string>;
   imageClsList?: Array<string>;
   imageTagList?: Array<string>;
-  enabledTools: Array<string>;
+  enabledTools: Array<ToolEnum>;
   history: Array<{ time: Date; state: MainLayoutState; name: string }>;
   keypointDefinitions: KeypointsDefinition;
   allowComments?: boolean;

vite.config.ts

@@ -47,13 +47,24 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    resolve: {
+      alias: {
+        react: resolve("./node_modules/react"),
+        "react-dom": resolve("./node_modules/react-dom"),
+      },
+    },
     build: {
       lib: {
         entry: resolve(__dirname, "src/lib.tsx"),
         formats: ["es"],
       },
-      rollupOptions: {
-        external: ["react", "react-dom"],
+      external: ["react", "react-dom", "styled-components"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "styled-components": "styled",
+        },
       },
     },
   };