feat(ffe-file-upload-react): rewrite to ts

Some Props where wrong

BREAKING CHANGE: default export -> named export

packages/ffe-file-upload-react/package.json

@@ -23,8 +23,8 @@
     "scripts": {
         "build": "ffe-buildtool babel",
         "watch": "ffe-buildtool babel-watch",
-        "lint": "eslint src",
-        "lint:fix": "eslint src --fix",
+        "lint": "eslint src --ext ts,tsx",
+        "lint:fix": "eslint src --fix --ext ts,tsx",
         "test": "ffe-buildtool jest",
         "test:watch": "ffe-buildtool jest --watch"
     },
@@ -37,16 +37,15 @@
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.6.1",
+        "@types/sinon": "^17.0.3",
         "react": "^16.9.0",
-        "react-dom": "^16.9.0"
+        "react-dom": "^16.9.0",
+        "sinon": "^7.2.3"
     },
     "peerDependencies": {
         "react": ">=16.9.0"
     },
     "publishConfig": {
         "access": "public"
-    },
-    "depencencies": {
-        "prop-types": "^15.6.0"
     }
 }

packages/ffe-file-upload-react/src/FileItem.js → packages/ffe-file-upload-react/src/FileItem.tsx

@@ -1,8 +1,29 @@
 import React from 'react';
-import { func, shape, object, string as stringType } from 'prop-types';
 import { Icon } from '@sb1/ffe-icons-react';
 
-const FileItem = ({ file, onFileDeleted, cancelText, deleteText }) => {
+export interface FileItemProps<Document> {
+    /** Shape of the file type, name is required, error and document.content is optional */
+    file: {
+        name: string;
+        document?: Document;
+        error?: string;
+    };
+    /**
+     * Called when the user clicks the delete button for a given file. Is called with the name of the file in question.
+     */
+    onFileDeleted: React.MouseEventHandler<HTMLButtonElement>;
+    /** Label for the cancel button */
+    cancelText?: string;
+    /** Label for the delete button */
+    deleteText?: string;
+}
+
+export function FileItem<Document>({
+    file,
+    onFileDeleted,
+    cancelText,
+    deleteText,
+}: FileItemProps<Document>) {
     const closeIcon =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik00ODAtNDM3Ljg0NyAyNzcuMDc2LTIzNC45MjRxLTguMzA3IDguMzA4LTIwLjg4NCA4LjUtMTIuNTc2LjE5My0yMS4yNjgtOC41LTguNjkzLTguNjkyLTguNjkzLTIxLjA3NnQ4LjY5My0yMS4wNzZMNDM3Ljg0Ny00ODAgMjM0LjkyNC02ODIuOTI0cS04LjMwOC04LjMwNy04LjUtMjAuODg0LS4xOTMtMTIuNTc2IDguNS0yMS4yNjggOC42OTItOC42OTMgMjEuMDc2LTguNjkzdDIxLjA3NiA4LjY5M0w0ODAtNTIyLjE1M2wyMDIuOTI0LTIwMi45MjNxOC4zMDctOC4zMDggMjAuODg0LTguNSAxMi41NzYtLjE5MyAyMS4yNjggOC41IDguNjkzIDguNjkyIDguNjkzIDIxLjA3NnQtOC42OTMgMjEuMDc2TDUyMi4xNTMtNDgwbDIwMi45MjMgMjAyLjkyNHE4LjMwOCA4LjMwNyA4LjUgMjAuODg0LjE5MyAxMi41NzYtOC41IDIxLjI2OC04LjY5MiA4LjY5My0yMS4wNzYgOC42OTN0LTIxLjA3Ni04LjY5M0w0ODAtNDM3Ljg0N1oiLz48L3N2Zz4=';
 
@@ -102,23 +123,4 @@ const FileItem = ({ file, onFileDeleted, cancelText, deleteText }) => {
             }
         </li>
     );
-};
-
-FileItem.propTypes = {
-    /** Shape of the file type, name is required, error and document.content is optional */
-    file: shape({
-        name: stringType.isRequired,
-        document: object,
-        error: stringType,
-    }).isRequired,
-    /**
-     * Called when the user clicks the delete button for a given file. Is called with the name of the file in question.
-     */
-    onFileDeleted: func.isRequired,
-    /** Label for the cancel button */
-    cancelText: stringType,
-    /** Label for the delete button */
-    deleteText: stringType,
-};
-
-export default FileItem;
+}