Arrow functions and so

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/ui/banner/banner.tsx

@@ -8,20 +8,18 @@ interface IBanner {
 }
 
 /** Displays a sticky full-width banner at the bottom of the screen. */
-const Banner: React.FC<IBanner> = ({ theme, children, className }) => {
-  return (
-    <div
-      data-testid='banner'
-      className={clsx('fixed inset-x-0 bottom-0 z-50 py-8', {
-        'backdrop-blur bg-primary-800/80 dark:bg-primary-900/80': theme === 'frosted',
-        'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
-      }, className)}
-    >
-      <div className='mx-auto max-w-4xl px-4'>
-        {children}
-      </div>
+const Banner: React.FC<IBanner> = ({ theme, children, className }) => (
+  <div
+    data-testid='banner'
+    className={clsx('fixed inset-x-0 bottom-0 z-50 py-8', {
+      'backdrop-blur bg-primary-800/80 dark:bg-primary-900/80': theme === 'frosted',
+      'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
+    }, className)}
+  >
+    <div className='mx-auto max-w-4xl px-4'>
+      {children}
     </div>
-  );
-};
+  </div>
+);
 
 export default Banner;

src/components/ui/checkbox/checkbox.tsx

@@ -3,15 +3,13 @@ import React from 'react';
 interface ICheckbox extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'id' | 'name' | 'onChange' | 'checked' | 'required'> { }
 
 /** A pretty checkbox input. */
-const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
-  return (
-    <input
-      {...props}
-      ref={ref}
-      type='checkbox'
-      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
-    />
-  );
-});
+const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
+  <input
+    {...props}
+    ref={ref}
+    type='checkbox'
+    className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
+  />
+));
 
 export default Checkbox;

src/components/ui/counter/counter.tsx

@@ -10,12 +10,10 @@ interface ICounter {
 }
 
 /** A simple counter for notifications, etc. */
-const Counter: React.FC<ICounter> = ({ count, countMax }) => {
-  return (
-    <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
-      <AnimatedNumber value={count} max={countMax} />
-    </span>
-  );
-};
+const Counter: React.FC<ICounter> = ({ count, countMax }) => (
+  <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
+    <AnimatedNumber value={count} max={countMax} />
+  </span>
+);
 
 export default Counter;

src/components/ui/datepicker/datepicker.tsx

@@ -22,9 +22,7 @@ const Datepicker = ({ onChange }: IDatepicker) => {
   const [day, setDay] = useState<number>(new Date().getDate());
   const [year, setYear] = useState<number>(new Date().getFullYear());
 
-  const numberOfDays = useMemo(() => {
-    return getDaysInMonth(month, year);
-  }, [month, year]);
+  const numberOfDays = useMemo(() => getDaysInMonth(month, year), [month, year]);
 
   useEffect(() => {
     onChange(new Date(year, month, day));

src/components/ui/file-input/file-input.tsx

@@ -2,15 +2,13 @@ import React, { forwardRef } from 'react';
 
 interface IFileInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'required' | 'disabled' | 'name' | 'accept'> { }
 
-const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => {
-  return (
-    <input
-      {...props}
-      ref={ref}
-      type='file'
-      className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:px-3 file:py-1.5 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
-    />
-  );
-});
+const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => (
+  <input
+    {...props}
+    ref={ref}
+    type='file'
+    className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:px-3 file:py-1.5 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
+  />
+));
 
 export default FileInput;

src/components/ui/streamfield/streamfield.tsx

@@ -54,12 +54,10 @@ const Streamfield: React.FC<IStreamfield> = ({
 }) => {
   const intl = useIntl();
 
-  const handleChange = (i: number) => {
-    return (value: any) => {
-      const newData = [...values];
-      newData[i] = value;
-      onChange(newData);
-    };
+  const handleChange = (i: number) => (value: any) => {
+    const newData = [...values];
+    newData[i] = value;
+    onChange(newData);
   };
 
   return (

src/components/ui/tag-input/tag.tsx

@@ -11,18 +11,16 @@ interface ITag {
 }
 
 /** A single editable Tag (used by TagInput). */
-const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
-  return (
-    <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
-      <Text theme='white'>{tag}</Text>
+const Tag: React.FC<ITag> = ({ tag, onDelete }) => (
+  <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
+    <Text theme='white'>{tag}</Text>
 
-      <IconButton
-        iconClassName='h-4 w-4'
-        src={require('@tabler/icons/outline/x.svg')}
-        onClick={() => onDelete(tag)}
-      />
-    </div>
-  );
-};
+    <IconButton
+      iconClassName='h-4 w-4'
+      src={require('@tabler/icons/outline/x.svg')}
+      onClick={() => onDelete(tag)}
+    />
+  </div>
+);
 
 export default Tag;

src/components/ui/widget/widget.tsx

@@ -45,23 +45,21 @@ const Widget: React.FC<IWidget> = ({
   actionIcon = require('@tabler/icons/outline/arrow-right.svg'),
   actionTitle,
   action,
-}): JSX.Element => {
-  return (
-    <Stack space={4}>
-      <HStack alignItems='center' justifyContent='between'>
-        <WidgetTitle title={title} />
-        {action || (onActionClick && (
-          <IconButton
-            className='ml-2 h-6 w-6 text-black rtl:rotate-180 dark:text-white'
-            src={actionIcon}
-            onClick={onActionClick}
-            title={actionTitle}
-          />
-        ))}
-      </HStack>
-      <WidgetBody>{children}</WidgetBody>
-    </Stack>
-  );
-};
+}): JSX.Element => (
+  <Stack space={4}>
+    <HStack alignItems='center' justifyContent='between'>
+      <WidgetTitle title={title} />
+      {action || (onActionClick && (
+        <IconButton
+          className='ml-2 h-6 w-6 text-black rtl:rotate-180 dark:text-white'
+          src={actionIcon}
+          onClick={onActionClick}
+          title={actionTitle}
+        />
+      ))}
+    </HStack>
+    <WidgetBody>{children}</WidgetBody>
+  </Stack>
+);
 
 export default Widget;