chore: react component props validation

raaymax · Jan 26, 2024 · 2a7ad3c · 2a7ad3c
1 parent 785ef64
commit 2a7ad3c
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 0 deletions.
diff --git a/packages/app/src/js/components/Files/Files.jsx b/packages/app/src/js/components/Files/Files.jsx
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { getUrl, getThumbnail } from '../../services/file';
+import PropTypes from 'prop-types';
 
 const download = async (fileId) => {
   window.open(getUrl(fileId));
@@ -65,6 +66,14 @@ export const File = ({ data: { fileName, contentType, id } }) => (
   </div>
 );
 
+File.propTypes = {
+  data: {
+    fileName: PropTypes.string,
+    contentType: PropTypes.string,
+    id: PropTypes.string,
+  },
+};
+
 export const Image = ({ raw, data: { fileName, id } }) => (
   <div className='file image' data-id={id} onClick={() => download(id)}>
     {
@@ -75,6 +84,14 @@ export const Image = ({ raw, data: { fileName, id } }) => (
   </div>
 );
 
+Image.propTypes = {
+  raw: PropTypes.bool,
+  data: PropTypes.shape({
+    fileName: PropTypes.string,
+    id: PropTypes.string,
+  }),
+};
+
 export const Files = ({ list }) => (
   <Container>
     <div className='file-list'>
@@ -94,3 +111,11 @@ export const Files = ({ list }) => (
     </div>
   </Container>
 );
+
+Files.propTypes = {
+  list: PropTypes.arrayOf(PropTypes.shape({
+    fileName: PropTypes.string,
+    contentType: PropTypes.string,
+    id: PropTypes.string,
+  })),
+};
diff --git a/packages/app/src/js/components/Input/Input.jsx b/packages/app/src/js/components/Input/Input.jsx
@@ -11,6 +11,7 @@ import { EmojiSelector } from './selectors/EmojiSelector';
 import { ChannelSelector } from './selectors/ChannelSelector';
 import { UserSelector } from './selectors/UserSelector';
 import { InputContainer } from './elements/container';
+import PropTypes from 'prop-types';
 
 export const InputForm = ({children }) => {
   const [showEmojis, setShowEmojis] = useState(false);
@@ -94,8 +95,16 @@ export const InputForm = ({children }) => {
   );
 };
 
+InputForm.propTypes = {
+  children: PropTypes.any,
+};
+
 export const Input = ({ children, ...args }) => (
   <InputContext {...args} >
     <InputForm>{children}</InputForm>
   </InputContext>
 );
+
+Input.propTypes = {
+  children: PropTypes.any,
+};
diff --git a/packages/app/src/js/components/Input/InputContext.jsx b/packages/app/src/js/components/Input/InputContext.jsx
@@ -7,6 +7,7 @@ import * as messageService from '../../services/messages';
 import { uploadMany } from '../../services/file';
 import { fromDom } from './serializer';
 import { useMessage } from '../../hooks/useMessage';
+import PropTypes from 'prop-types';
 
 const Context = createContext({
   input: {},
@@ -251,6 +252,12 @@ export const InputContext = (args) => {
   );
 };
 
+InputContext.propTypes = {
+  children: PropTypes.node,
+  mode: PropTypes.string,
+  messageId: PropTypes.string,
+};
+
 export const useInput = () => {
   const context = useContext(Context);
   return context;

diff --git a/packages/app/src/js/components/Input/TextMenu.jsx b/packages/app/src/js/components/Input/TextMenu.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useInput } from './InputContext';
 import { Menu } from './elements/menu';
+import PropTypes from 'prop-types';
 
 export const TextMenu = ({
   className, options, open = false, select, selected = 0, setSelected,
@@ -63,3 +64,18 @@ export const TextMenu = ({
     </Menu>
   );
 };
+
+TextMenu.propTypes = {
+  className: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    name: PropTypes.string,
+    icon: PropTypes.string,
+    url: PropTypes.string,
+    action: PropTypes.func,
+  })),
+  open: PropTypes.bool,
+  select: PropTypes.func,
+  selected: PropTypes.number,
+  setSelected: PropTypes.func,
+};