Remove usage of the PropTypes dependency (#2723)

* Remove usage of the PropTypes dependency

* Prettified Code!

---------

Co-authored-by: dhanusaputra <dhanusaputra@users.noreply.github.com>

web/.storybook/stories-category-doc-pages/colors/Color.tsx

@@ -1,9 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { FC } from 'react';
 
 export type ColorProps = {
-  color: any; // TODO specify better type
+  color: string;
 };
 
 export const Color: FC<ColorProps> = ({ color }) => {
@@ -55,10 +54,6 @@ export const Color: FC<ColorProps> = ({ color }) => {
   );
 };
 
-Color.propTypes = {
-  color: PropTypes.string.isRequired,
-};
-
 const rowStyle = {
   display: 'flex',
   flexDirection: 'row' as 'row',
@@ -66,7 +61,11 @@ const rowStyle = {
   alignItems: 'center',
 };
 
-export const ColorRow = props => {
+export type ColorRowProps = {
+  colors: string[];
+};
+
+export const ColorRow: FC<ColorRowProps> = (props: ColorRowProps) => {
   const { colors } = props;
 
   return (
@@ -78,10 +77,6 @@ export const ColorRow = props => {
   );
 };
 
-ColorRow.propTypes = {
-  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
-
 export const getColor = color => {
   const colorValue = getComputedStyle(document.documentElement).getPropertyValue(`--${color}`);
   return { [color]: colorValue };

web/components/admin/MainLayout.tsx

@@ -1,5 +1,4 @@
 import React, { FC, ReactNode, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import Link from 'next/link';
 import Head from 'next/head';
 import { differenceInSeconds } from 'date-fns';
@@ -338,7 +337,3 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
     </Layout>
   );
 };
-
-MainLayout.propTypes = {
-  children: PropTypes.element.isRequired,
-};

web/pages/admin/config-federation.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-unescaped-entities */
 import { Typography, Modal, Button, Row, Col, Alert } from 'antd';
-import React, { ReactElement, useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactElement, useContext, useEffect, useState, FC } from 'react';
 import {
   TEXTFIELD_TYPE_TEXT,
   TEXTFIELD_TYPE_TEXTAREA,
@@ -29,7 +28,12 @@ import { createInputStatus, STATUS_ERROR, STATUS_SUCCESS } from '../../utils/inp
 
 import { AdminLayout } from '../../components/layouts/AdminLayout';
 
-const FederationInfoModal = ({ cancelPressed, okPressed }) => (
+export type FederationInfoModalProps = {
+  cancelPressed: () => void;
+  okPressed: () => void;
+};
+
+const FederationInfoModal: FC<FederationInfoModalProps> = ({ cancelPressed, okPressed }) => (
   <Modal
     width="70%"
     title="Enable Social Features"
@@ -87,11 +91,6 @@ const FederationInfoModal = ({ cancelPressed, okPressed }) => (
   </Modal>
 );
 
-FederationInfoModal.propTypes = {
-  cancelPressed: PropTypes.func.isRequired,
-  okPressed: PropTypes.func.isRequired,
-};
-
 const ConfigFederation = () => {
   const { Title } = Typography;
   const [formDataValues, setFormDataValues] = useState(null);

web/utils/alert-message-context.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, FC, ReactElement } from 'react';
 
 export const AlertMessageContext = React.createContext({
   message: null,
@@ -7,7 +6,11 @@ export const AlertMessageContext = React.createContext({
   setMessage: (text?: string) => null,
 });
 
-const AlertMessageProvider = ({ children }) => {
+export type AlertMessageProviderProps = {
+  children: ReactElement;
+};
+
+const AlertMessageProvider: FC<AlertMessageProviderProps> = ({ children }) => {
   const [message, setMessage] = useState('');
 
   const providerValue = {
@@ -19,8 +22,4 @@ const AlertMessageProvider = ({ children }) => {
   );
 };
 
-AlertMessageProvider.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
 export default AlertMessageProvider;

web/utils/server-status-context.tsx

@@ -1,7 +1,6 @@
 // TODO: add a notication after updating info that changes will take place either on a new stream or server restart. may be different for each field.
 
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
+import React, { useState, useEffect, FC, ReactElement } from 'react';
 
 import { STATUS, fetchData, FETCH_INTERVAL, SERVER_CONFIG } from './apis';
 import { ConfigDetails, UpdateArgs } from '../types/config-section';
@@ -101,7 +100,11 @@ export const ServerStatusContext = React.createContext({
   setFieldInConfigState: (args: UpdateArgs) => null,
 });
 
-const ServerStatusProvider = ({ children }) => {
+export type ServerStatusProviderProps = {
+  children: ReactElement;
+};
+
+const ServerStatusProvider: FC<ServerStatusProviderProps> = ({ children }) => {
   const [status, setStatus] = useState(initialServerStatusState);
   const [config, setConfig] = useState(initialServerConfigState);
 
@@ -164,8 +167,4 @@ const ServerStatusProvider = ({ children }) => {
   );
 };
 
-ServerStatusProvider.propTypes = {
-  children: PropTypes.element.isRequired,
-};
-
 export default ServerStatusProvider;