Merge pull request #4 from osstotalsoft/remove-defaultProps

remove defaultProps from function components and update env
osstotalsoft · Mar 1, 2023 · d27b844 · d27b844
2 parents a1f7e48 + 829dedd
commit d27b844
Show file tree

Hide file tree

Showing 55 changed files with 1,005 additions and 911 deletions.
diff --git a/.bitmap b/.bitmap
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/rocket-ui/components/buttons/back-to-button/BackToButton.js b/rocket-ui/components/buttons/back-to-button/BackToButton.js
@@ -4,27 +4,28 @@ import { useNavigate } from 'react-router-dom'
 import ArrowBack from '@mui/icons-material/ArrowBack'
 import IconButton from '@totalsoft_oss/rocket-ui.components.buttons.icon-button'
 
-const BackToButton = ({ path, fontSize, ...rest }) => {
+const BackToButton = ({ path, fontSize = 'small', size = 'medium', ...rest }) => {
   const navigate = useNavigate()
 
   const onBackToList = useCallback(() => {
     path && navigate(path)
   }, [history, path])
 
   return (
-    <IconButton aria-label='back' onClick={onBackToList} {...rest}>
+    <IconButton aria-label='back' onClick={onBackToList} size={size} {...rest}>
       <ArrowBack fontSize={fontSize} />
     </IconButton>
   )
 }
 
-BackToButton.defaultProps = {
-  size: 'large',
-  fontSize: 'small'
-}
-
 BackToButton.propTypes = {
   /**
+   * @default 'medium'
+   * Size of the button
+   */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
+  /**
+   * @default 'small'
    * Size of the icon.
    */
   fontSize: PropTypes.oneOf(['inherit', 'small', 'medium', 'large']),

diff --git a/rocket-ui/components/buttons/button/Button.js b/rocket-ui/components/buttons/button/Button.js
@@ -4,7 +4,22 @@ import { createButton, getColorStyles, classes, transformDeprecatedSizes } from
 import { Tooltip } from '@mui/material'
 import cx from 'classnames'
 
-const Button = ({ children, color, size, tooltip, round, right, justIcon, className, disabled, onClick, loading, gradient, ...rest }) => {
+const Button = ({
+  children,
+  color,
+  size = 'medium',
+  tooltip,
+  round,
+  right,
+  justIcon,
+  className,
+  disabled,
+  onClick,
+  loading,
+  gradient,
+  capitalize = true,
+  ...rest
+}) => {
   const buttonStyles = getColorStyles(color)
 
   const btnClasses = cx({
@@ -27,6 +42,7 @@ const Button = ({ children, color, size, tooltip, round, right, justIcon, classN
       disabled={disabled}
       onClick={!disabled ? onClick : undefined}
       component={disabled ? 'div' : 'button'}
+      capitalize={capitalize}
       {...(loading ? { loading } : {})}
       variant='contained' // need to set the default like this in order not to break 'WithBackground' and 'NoBackground' styles
       {...buttonStyles}
@@ -39,11 +55,6 @@ const Button = ({ children, color, size, tooltip, round, right, justIcon, classN
   return tooltip ? <Tooltip title={tooltip}>{baseComp}</Tooltip> : baseComp
 }
 
-Button.defaultProps = {
-  size: 'medium',
-  capitalize: true
-}
-
 Button.propTypes = {
   /**
    * Color of the button.
@@ -103,6 +114,7 @@ Button.propTypes = {
    */
   right: PropTypes.bool,
   /**
+   * @default 'medium'
    * Size of the button.
    */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
@@ -118,7 +130,12 @@ Button.propTypes = {
   /**
    * If true, a gradient background is applied.
    */
-  gradient: PropTypes.bool
+  gradient: PropTypes.bool,
+  /**
+   * @default true
+   * If true, button text is capitalized.
+   */
+  capitalize: PropTypes.bool
 }
 
 export default Button
diff --git a/rocket-ui/components/buttons/icon-button/IconButton.d.ts b/rocket-ui/components/buttons/icon-button/IconButton.d.ts
@@ -1,8 +1,8 @@
-import { ButtonProps } from "@totalsoft_oss/rocket-ui.components.buttons.button"
+import { ButtonProps } from '@totalsoft_oss/rocket-ui.components.buttons.button'
 
 export interface IconButtonProps extends Omit<ButtonProps, 'color' | 'type'> {
   /**
-   * @default 'theme'
+   * @default 'secondary'
    * Color of the button
    */
   color?:

diff --git a/rocket-ui/components/buttons/icon-button/IconButton.js b/rocket-ui/components/buttons/icon-button/IconButton.js
@@ -16,28 +16,23 @@ const iconType = {
   upward: ArrowUpward
 }
 
-const IconButton = ({ children, type, fontSize, loading, ...rest }) => {
+const IconButton = ({ children, type, fontSize = 'small', loading, size = 'medium', color = 'secondary', ...rest }) => {
   const CustomIcon = useMemo(() => iconType[type], [type])
 
   const iconButtonProps = {
     ['aria-label']: type || 'iconButton'
   }
 
   return (
-    <MuiIconButton {...iconButtonProps} {...rest}>
+    <MuiIconButton {...iconButtonProps} size={size} color={color} {...rest}>
       {loading ? <CircularProgress color='inherit' size={24} /> : type ? <CustomIcon fontSize={fontSize} /> : children}
     </MuiIconButton>
   )
 }
 
-IconButton.defaultProps = {
-  color: 'secondary',
-  size: 'medium',
-  fontSize: 'small'
-}
-
 IconButton.propTypes = {
   /**
+   * @default 'secondary'
    * Color of the button
    */
   color: PropTypes.oneOf([
@@ -55,6 +50,7 @@ IconButton.propTypes = {
     'inherit'
   ]),
   /**
+   * @default 'medium'
    * Size of the button
    */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
@@ -87,6 +83,7 @@ IconButton.propTypes = {
    */
   type: PropTypes.oneOf(['add', 'cancel', 'delete', 'download', 'downward', 'edit', 'view', 'save', 'upward']),
   /**
+   * @default 'small'
    * Size of the icon.
    */
   fontSize: PropTypes.oneOf(['inherit', 'small', 'medium', 'large'])

diff --git a/rocket-ui/components/buttons/icon-button/RadioButtonSelect.js b/rocket-ui/components/buttons/icon-button/RadioButtonSelect.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { FormControl, FormLabel, RadioGroup, FormControlLabel, Radio } from '@mui/material'
 import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography'
 
-const RadioButtonSelect = ({ label, options, value, valueKey, labelKey, onSelect }) => {
+const RadioButtonSelect = ({ label, options, value, valueKey = 'id', labelKey = 'name', onSelect }) => {
   return (
     <FormControl>
       <FormLabel id='radio-group-label'>
@@ -26,11 +26,6 @@ const RadioButtonSelect = ({ label, options, value, valueKey, labelKey, onSelect
   )
 }
 
-RadioButtonSelect.defaultProps = {
-  valueKey: 'id',
-  labelKey: 'name'
-}
-
 RadioButtonSelect.propTypes = {
   value: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string, PropTypes.bool]),
   label: PropTypes.string,

diff --git a/rocket-ui/components/buttons/upload-button/UploadButton.js b/rocket-ui/components/buttons/upload-button/UploadButton.js
@@ -7,8 +7,8 @@ import validators from './uploadButtonValidators'
 import { map, __ } from 'ramda'
 
 const UploadButton = ({
-  fontSize,
-  Icon,
+  fontSize = 'small',
+  Icon = BackupIcon,
   accept,
   capture,
   multiple,
@@ -19,6 +19,7 @@ const UploadButton = ({
   onFilesChanged,
   onError,
   disabled,
+  size = 'medium',
   ...rest
 }) => {
   const handleFileSelected = useCallback(
@@ -38,7 +39,7 @@ const UploadButton = ({
   )
 
   return (
-    <IconButton aria-label='upload' disabled={disabled} {...rest} component='label'>
+    <IconButton aria-label='upload' size={size} disabled={disabled} {...rest} component='label'>
       <Input
         disabled={disabled}
         type='file'
@@ -52,18 +53,14 @@ const UploadButton = ({
   )
 }
 
-UploadButton.defaultProps = {
-  Icon: BackupIcon,
-  size: 'large',
-  fontSize: 'small'
-}
-
 UploadButton.propTypes = {
   /**
+   * @default BackupIcon
    * The icon to display
    */
   Icon: PropTypes.elementType,
   /**
+   * @default 'small'
    * Size of the icon.
    */
   fontSize: PropTypes.oneOf(['inherit', 'small', 'medium', 'large']),
@@ -110,7 +107,12 @@ UploadButton.propTypes = {
   /**
    * If `true`, the component is disabled.
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * @default 'medium'
+   * Button size
+   */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large'])
 }
 
 export default UploadButton
diff --git a/rocket-ui/components/charts/stats-chart/StatsChart.js b/rocket-ui/components/charts/stats-chart/StatsChart.js
@@ -18,7 +18,7 @@ import { Divider } from '@mui/material'
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement)
 
 function StatsChart(props) {
-  const { chartColor, iconColor, title, text, statText, StatIcon, type, data, statAction, ...chartProps } = props
+  const { chartColor = 'info', iconColor = 'grey', title, text, statText, StatIcon, type, data, statAction, ...chartProps } = props
 
   return (
     <StyledCard disablePadding>
@@ -43,11 +43,6 @@ function StatsChart(props) {
   )
 }
 
-StatsChart.defaultProps = {
-  iconColor: 'grey',
-  chartColor: 'info'
-}
-
 StatsChart.propTypes = {
   /**
    * Chart type.
@@ -66,10 +61,12 @@ StatsChart.propTypes = {
    */
   StatIcon: PropTypes.any,
   /**
+   * @default 'grey'
    * Chart icon color.
    */
   iconColor: PropTypes.oneOf(['warning', 'primary', 'danger', 'success', 'info', 'rose', 'grey']),
   /**
+   * @default 'info'
    * Chart color.
    */
   chartColor: PropTypes.oneOf(['warning', 'primary', 'danger', 'success', 'info', 'rose', 'grey']),

diff --git a/rocket-ui/components/data-display/expanding-text/ExpandingText.js b/rocket-ui/components/data-display/expanding-text/ExpandingText.js
@@ -3,7 +3,17 @@ import { PropTypes } from 'prop-types'
 import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography'
 import ShowButton from './ExpandingTextStyles'
 
-const ExpandingText = ({ text, minLength, showLessText, showMoreText, display, textProps, buttonProps, expanded, ...rest }) => {
+const ExpandingText = ({
+  text,
+  minLength,
+  showLessText = 'Show less',
+  showMoreText = 'Show more',
+  display = 'block',
+  textProps,
+  buttonProps,
+  expanded = false,
+  ...rest
+}) => {
   const shouldCollapse = text.length > minLength
   const [localExpanded, setLocalExpanded] = useState(expanded)
 
@@ -24,13 +34,6 @@ const ExpandingText = ({ text, minLength, showLessText, showMoreText, display, t
   )
 }
 
-ExpandingText.defaultProps = {
-  showLessText: 'Show less',
-  showMoreText: 'Show more',
-  display: 'block',
-  expanded: false
-}
-
 ExpandingText.propTypes = {
   /**
    * Text to be displayed.

diff --git a/rocket-ui/components/data-display/typography/Typography.d.ts b/rocket-ui/components/data-display/typography/Typography.d.ts
@@ -1,24 +1,6 @@
 import { TypographyProps as MuiTypographyProps } from '@mui/material'
 
 export interface TypographyProps extends MuiTypographyProps {
-  /**
-   * @default "inherit"
-   */
-  variant?:
-    | 'inherit'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'subtitle1'
-    | 'subtitle2'
-    | 'body1'
-    | 'body2'
-    | 'caption'
-    | 'button'
-    | 'overline'
   /**
    * The color of the text
    */

diff --git a/rocket-ui/components/data-display/typography/Typography.js b/rocket-ui/components/data-display/typography/Typography.js
@@ -25,12 +25,12 @@ const transformEmphasisToStyle = R.cond([
 const checkStyle = R.anyPass([R.isNil, R.isEmpty])
 const defaultToEmpty = R.defaultTo({})
 
-const Typography = ({ tooltip, emphasis, style, ...rest }) => {
+const Typography = ({ tooltip, emphasis, style, variant = 'inherit', ...rest }) => {
   const emphasisStyle = transformEmphasisToStyle(emphasis)
   const mergedStyle = R.mergeWithKey(mergeStyles, emphasisStyle, defaultToEmpty(style))
   const cleanStyle = R.when(checkStyle, R.always(undefined), mergedStyle)
 
-  const base = <MuiTypography style={cleanStyle} {...rest} />
+  const base = <MuiTypography style={cleanStyle} variant={variant} {...rest} />
   return tooltip ? (
     <Tooltip title={tooltip} placement='bottom-start'>
       {base}
@@ -40,10 +40,6 @@ const Typography = ({ tooltip, emphasis, style, ...rest }) => {
   )
 }
 
-Typography.defaultProps = {
-  variant: 'inherit'
-}
-
 Typography.propTypes = {
   /**
    * If provided, a text will appear on hover.
@@ -76,6 +72,26 @@ Typography.propTypes = {
   emphasis: PropTypes.oneOfType([
     PropTypes.oneOf(['bold', 'italic', 'underline', 'line-through', 'overline']),
     PropTypes.arrayOf(PropTypes.oneOf(['bold', 'italic', 'underline', 'line-through', 'overline']))
+  ]),
+  /**
+   * @default 'inherit'
+   * Applies the theme typography styles.
+   */
+  variant: PropTypes.oneOf([
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'inherit',
+    'overline',
+    'subtitle1',
+    'subtitle2'
   ])
 }