refactor children props destructuring

Signed-off-by: Leonardo Rossi <[email protected]>

Author: leorossi

src/components/BorderedBox.jsx

@@ -3,20 +3,23 @@ import PropTypes from 'prop-types'
 import styles from './BorderedBox.module.css'
 import commonStyles from './Common.module.css'
 import { COLORS_BORDERED_BOX, DARK_BLUE, TRANSPARENT, OPACITIES, OPACITY_100 } from './constants'
-function BorderedBox ({
-  classes = '',
-  color = TRANSPARENT,
-  children,
-  backgroundColor = DARK_BLUE,
-  backgroundColorOpacity = OPACITY_100,
-  borderColorOpacity = OPACITY_100,
-  clickable = false,
-  onClick = () => {},
-  internalOverHandling = false,
-  backgroundColorOver = null,
-  backgroundColorOpacityOver = null,
-  borderColorOpacityOver = null
-}) {
+
+function BorderedBox (props) {
+  const {
+    classes = '',
+    color = TRANSPARENT,
+    children,
+    backgroundColor = DARK_BLUE,
+    backgroundColorOpacity = OPACITY_100,
+    borderColorOpacity = OPACITY_100,
+    clickable = false,
+    onClick = () => {},
+    internalOverHandling = false,
+    backgroundColorOver = null,
+    backgroundColorOpacityOver = null,
+    borderColorOpacityOver = null
+  } = props
+
   const [over, setOver] = useState(false)
   const [className, setClassName] = useState(normalClassName())
 

src/components/Box.jsx

@@ -1,6 +1,8 @@
 import styles from './Box.module.css'
 import React from 'react'
-export default function Box ({ justifyCentered, children }) {
+
+export default function Box (props) {
+  const { justifyCentered, children } = props
   let className = `${styles.box}`
   if (justifyCentered) className += ` ${styles.justifyCentered}`
 

src/components/InfoBox.jsx

@@ -5,13 +5,15 @@ import Button from './Button'
 import PlatformaticIcon from './PlatformaticIcon'
 import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS, MAIN_GREEN } from './constants'
 
-function InfoBox ({
-  children,
-  iconName = '',
-  iconColor = MAIN_GREEN,
-  helpText = '',
-  buttonProps = null
-}) {
+function InfoBox (props) {
+  const {
+    children,
+    iconName = '',
+    iconColor = MAIN_GREEN,
+    helpText = '',
+    buttonProps = null
+  } = props
+
   return (
     <div className={styles.container}>
       <PlatformaticIcon size='extra-large' iconName={iconName} color={iconColor} />

src/components/List.jsx

@@ -1,19 +1,20 @@
 import React from 'react'
 import styles from './List.module.css'
 
-export default function List ({ title, ...props }) {
+export default function List (props) {
+  const { title, children, ...rest } = props
   return (
     <div className={styles.container}>
       {title &&
         <div
           className={styles.title}
           data-testid='list-title'
-          {...props}
+          {...rest}
         >
           {title}
         </div>}
       <div className={styles.elements}>
-        {props.children}
+        {children}
       </div>
     </div>
   )

src/components/SimpleMetric.jsx

@@ -5,7 +5,8 @@ import MetricValue from './MetricValue'
 import ButtonFullRounded from './ButtonFullRounded'
 import { DULLS_BACKGROUND_COLOR, MEDIUM, WHITE } from './constants'
 
-export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
+export default function SimpleMetric (props) {
+  const { title, pre, color, unit, value, tooltip, children } = props
   const withoutChildrenSingleMetric = !children ? styles.centerMetric : ''
   return (
     <BorderedBox>

src/components/SplashScreen.jsx

@@ -3,15 +3,18 @@ import styles from './SplashScreen.module.css'
 import { ERROR_RED, MAIN_GREEN, RICH_BLACK, WHITE } from './constants'
 import Icons from './icons'
 import Button from './Button'
-export default function SplashScreen ({
-  success = true,
-  timeout = 5000,
-  message = '',
-  title = 'Operation completed',
-  blur = false,
-  children,
-  onDestroyed = () => {}
-}) {
+
+export default function SplashScreen (props) {
+  const {
+    success = true,
+    timeout = 5000,
+    message = '',
+    title = 'Operation completed',
+    blur = false,
+    children,
+    onDestroyed = () => {}
+  } = props
+
   const [destroyed, setDestroyed] = useState(false)
   useEffect(() => {
     if (destroyed) {
@@ -52,13 +55,11 @@ export default function SplashScreen ({
             backgroundColor={WHITE}
             onClick={() => setDestroyed(true)}
             label='Dismiss'
-            paddingClass='px-2 py-1'
-            textClass='text-[13px]'
+            paddingClass={styles.buttonPadding}
+            textClass={styles.buttonText}
           />
         </div>
-
       </div>
-
     </div>
   )
 }

src/components/SplashScreen.module.css

@@ -32,4 +32,12 @@
 
 .button {
   @apply flex items-center justify-center;
-}
+}
+
+.buttonPadding {
+  @apply px-2 py-1;
+}
+
+.buttonText {
+  @apply text-[14px];
+}

src/components/TextWithLabel.jsx

@@ -3,13 +3,16 @@ import PropTypes from 'prop-types'
 import { FONT_BASE, FONT_XS, MAIN_DARK_BLUE, WHITE } from './constants'
 import commonStyles from './Common.module.css'
 import styles from './TextWithLabel.module.css'
-function TextWithLabel ({
-  label = '',
-  text = '',
-  children,
-  color = WHITE,
-  fontSize = FONT_BASE
-}) {
+
+function TextWithLabel (props) {
+  const {
+    label = '',
+    text = '',
+    children,
+    color = WHITE,
+    fontSize = FONT_BASE
+  } = props
+
   const className = commonStyles[`text--${color}`] + ' ' + commonStyles[`text--${fontSize}`]
   return (
     <div className={className}>

src/components/layouts/Layout.jsx

@@ -1,10 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-function Layout ({
-  className = 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
-  children = null
-}) {
+function Layout (props) {
+  const {
+    className = 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
+    children = null
+  } = props
+
   return (
     <div className={className}>
       {children}

src/components/layouts/TwoColumnsLayout.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import styles from './TwoColumnsLayout.module.css'
 
-export default function TwoColumnsLayout ({ children, gridTemplate = 'columns' }) {
+export default function TwoColumnsLayout (props) {
+  const { children, gridTemplate = 'columns' } = props
   const className = styles[`${gridTemplate}`]
   return (
     <div className={className}>