Adds component prop annotations

.eslintrc

@@ -14,6 +14,13 @@
 		"@typescript-eslint/ban-ts-comment": "off",
 		"camelcase": "off"
 	},
+	"overrides":
+		[{
+		  "files": ["*.jsx"],
+		  "rules": {
+			"@typescript-eslint/explicit-module-boundary-types": ["off"]
+		  }
+		}],
 	"settings": {
 		"import/resolver": {
 			"alias": {
@@ -26,4 +33,4 @@
 			}
 		}
 	}
-}
+}

package.json

@@ -4,7 +4,8 @@
   "description": "Allows developers to enable / disable features based on flags.",
   "scripts": {
     "start": "wp-scripts start",
-    "build": "wp-scripts build"
+    "build": "wp-scripts build",
+    "lint:js": "wp-scripts lint-js"
   },
   "devDependencies": {
     "@wordpress/eslint-plugin": "^12.0.1",

src/components/DeleteModal.tsx

@@ -1,6 +1,15 @@
 import { Modal, Button } from '@wordpress/components';
-const DeleteModal = (props: any): JSX.Element => {
-	const { closeModal, item, handleDeleteFlag } = props;
+import { Flag } from '../../types';
+interface DeleteModalProps {
+	closeModal: () => void;
+	item: Flag;
+	handleDeleteFlag: (id: number) => void;
+}
+const DeleteModal = ({
+	closeModal,
+	item,
+	handleDeleteFlag,
+}: DeleteModalProps): JSX.Element => {
 	return (
 		<Modal title={`Delete Feature Flag`} onRequestClose={closeModal}>
 			<p>

src/components/Header.tsx

@@ -8,7 +8,7 @@ export default function (): JSX.Element {
 			<FlexItem style={{ marginLeft: 140 }}>
 				<h4>Status</h4>
 			</FlexItem>
-			<FlexItem style={{ marginLeft: 60 }}>
+			<FlexItem style={{ marginLeft: 80 }}>
 				<h4>SDK Settings</h4>
 			</FlexItem>
 			<FlexItem style={{ marginLeft: 30 }}>

src/components/Layout.tsx

@@ -7,7 +7,7 @@ import { getFlags } from '../utils';
 import Header from './Header';
 
 const Layout = (): JSX.Element => {
-	const [flags, setFlags] = useState<Flag[] | undefined>(undefined);
+	const [flags, setFlags] = useState<Flag[]>([]);
 	const [isLoading, setIsLoading] = useState<boolean>(true);
 
 	useEffect(() => {
@@ -55,7 +55,6 @@ const Layout = (): JSX.Element => {
 						<SubmitControls
 							setFlags={setFlags}
 							flags={flags}
-							isNew={false}
 							lastFlag={lastFlag}
 							disableSave={disableSave}
 						/>

src/components/SdkModal.tsx

@@ -2,9 +2,14 @@ import { Modal, Button } from '@wordpress/components';
 import Snippet from './Snippet';
 import { useMemo, useState, useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
+import { Flag } from '../../types';
 
-const SdkModal = (props: any): JSX.Element => {
-	const { item, closeSdkModal } = props;
+interface SdkModalProps {
+	item: Flag;
+	closeSdkModal: () => void;
+}
+
+const SdkModal = ({ item, closeSdkModal }: SdkModalProps): JSX.Element => {
 	const [hasJsCopied, setHasJsCopied] = useState(false);
 	const [hasPhpCopied, setHasPhpCopied] = useState(false);
 

src/components/Snippet.tsx

@@ -1,8 +1,7 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { a11yDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
-const Snippet = (props: any) => {
-	const { data } = props;
+const Snippet = ({ data }: { data: string }): JSX.Element => {
 	return (
 		<SyntaxHighlighter language="javascript" style={a11yDark}>
 			{data}

src/components/SubmitControls.tsx

@@ -5,8 +5,19 @@ import { useState } from '@wordpress/element';
 import Notices from './Snackbar';
 import { dispatch } from '@wordpress/data';
 
-const SubmitControls = (props: any): JSX.Element => {
-	const { isNew, flags, setFlags, lastFlag, disableSave } = props;
+interface SubmitControlsProps {
+	flags: Flag[];
+	setFlags: (flags: Flag[]) => void;
+	lastFlag: number;
+	disableSave: boolean;
+}
+
+const SubmitControls = ({
+	flags,
+	setFlags,
+	lastFlag,
+	disableSave,
+}: SubmitControlsProps): JSX.Element => {
 	const [isSaving, setIsSaving] = useState<boolean>(false);
 
 	const handleNewFlag = () => {
@@ -54,27 +65,24 @@ const SubmitControls = (props: any): JSX.Element => {
 						Add Flag
 					</Button>
 				</FlexItem>
-				{!isNew && (
-					<>
-						<FlexItem>
-							<Button
-								variant="primary"
-								onClick={handleSave}
-								disabled={disableSave || isSaving}
-							>
-								{isSaving ? 'Saving' : 'Save'}
-							</Button>
-						</FlexItem>
-						<FlexItem>
-							<Button
-								variant="tertiary"
-								onClick={() => location.reload()}
-							>
-								Cancel
-							</Button>
-						</FlexItem>
-					</>
-				)}
+
+				<FlexItem>
+					<Button
+						variant="primary"
+						onClick={handleSave}
+						disabled={disableSave || isSaving}
+					>
+						{isSaving ? 'Saving' : 'Save'}
+					</Button>
+				</FlexItem>
+				<FlexItem>
+					<Button
+						variant="tertiary"
+						onClick={() => location.reload()}
+					>
+						Cancel
+					</Button>
+				</FlexItem>
 			</Flex>
 
 			<Notices />

src/utils/index.ts

@@ -1,16 +1,17 @@
 import apiFetch from '@wordpress/api-fetch';
+import { Flag } from '../../types';
 import { FEATURE_FLAG_NAMESPACE, FEATURE_FLAG_ROUTE } from '../constants';
 
-export const getFlags = async (): Promise<any> => {
-	const result: any = await apiFetch({
+export const getFlags = async (): Promise<Flag[]> => {
+	const result: Flag[] = await apiFetch({
 		method: 'GET',
 		path: `${FEATURE_FLAG_NAMESPACE}/${FEATURE_FLAG_ROUTE}`,
 	});
 	return result;
 };
 
 export const updateFlags = async (
-	flags: any
+	flags: Flag[]
 ): Promise<{ status: number; success: boolean } | Error> => {
 	const result: { status: number; success: boolean } | Error = await apiFetch(
 		{

types/index.ts

@@ -4,8 +4,3 @@ export interface Flag {
 	enabled: boolean;
 	preProdEnabled?: boolean;
 }
-
-export interface FlagProps {
-	env: string;
-	flags: Flag[];
-}