From 4f4a5ad2b92e5315c15ede4ef2b75c444c383038 Mon Sep 17 00:00:00 2001 From: Marcos Conceicao Date: Wed, 3 Jul 2024 14:54:45 -0300 Subject: [PATCH 01/28] chore(.eslintrc): Lint adjustment to check definition of defaultParams in component props instead of --- .eslintrc.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 99fc4a86a..331b80e1d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -42,7 +42,13 @@ "react/jsx-uses-react": "off", "react/react-in-jsx-scope": "off", "import/prefer-default-export": ["off", { "extensions": [".js"] }], - "react/prop-types": ["off", { "extensions": [".stories.jsx"] }] + "react/prop-types": ["off", { "extensions": [".stories.jsx"] }], + "react/require-default-props": [ + "error", + { + "functions": "defaultArguments" + } + ] }, "globals": { "window": true, From 12cd95fff254cd0dce7eb8a1e2c50f86a4890cad Mon Sep 17 00:00:00 2001 From: Marcos Conceicao Date: Wed, 3 Jul 2024 14:55:44 -0300 Subject: [PATCH 02/28] perf: Using defaultParams in component props instead of defaultProps --- components/Alert/Alert.jsx | 36 ++--- components/AutoComplete/AutoComplete.jsx | 48 ++---- components/Avatar/Avatar.jsx | 18 +-- components/Badge/Badge.jsx | 30 ++-- components/Breadcrumbs/Breadcrumbs.jsx | 6 +- components/Button/Button.jsx | 61 ++++--- components/Card/sub-components/Content.jsx | 16 +- .../Card/sub-components/Description.jsx | 25 +-- components/Card/sub-components/Footer.jsx | 14 +- components/Card/sub-components/Header.jsx | 14 +- components/Card/sub-components/Media.jsx | 19 ++- components/Card/sub-components/Thumbnail.jsx | 15 +- components/Card/sub-components/Title.jsx | 15 +- components/Carousel/Carousel.jsx | 37 ++--- components/Carousel/sub-components/Arrow.jsx | 14 +- .../sub-components/DescriptionCard.jsx | 18 +-- .../Carousel/sub-components/ThumbCard.jsx | 22 ++- components/ChargeBar/ChargeBar.jsx | 50 +++--- components/Checkbox/Checkbox.jsx | 40 ++--- components/Checkbox/CheckboxButton.jsx | 33 ++-- components/Checkbox/CheckboxGroup.jsx | 36 ++--- components/CircularLoader/CircularLoader.jsx | 30 ++-- components/Dialog/Dialog.jsx | 28 ++-- components/Dropdown/Dropdown.jsx | 54 ++----- components/DropdownLight/DropdownLight.jsx | 47 ++---- components/Grid/sub-components/Col.jsx | 14 +- components/Grid/sub-components/Container.jsx | 20 ++- components/Grid/sub-components/Hide.jsx | 14 +- components/Hamburger/Hamburger.jsx | 15 +- components/Icon/Icon.jsx | 15 +- components/InfiniteScroll/InfiniteScroll.jsx | 152 +++++++++--------- .../sub-components/InputErrorMessage.jsx | 13 +- .../Input/sub-components/InputLabel.jsx | 9 +- .../Input/sub-components/RequiredMark.jsx | 11 +- components/Input/sub-components/TextInput.jsx | 11 +- components/Link/Link.jsx | 33 ++-- components/List/sub-components/Header.jsx | 9 +- components/List/sub-components/SubHeader.jsx | 11 +- components/Menu/Menu.jsx | 110 ++++++------- components/Modal/sub-components/Content.jsx | 9 +- components/Modal/sub-components/Header.jsx | 9 +- .../sub-components/ActionButton.jsx | 17 +- .../Pagination/sub-components/Desktop.jsx | 30 ++-- components/Pagination/sub-components/Dots.jsx | 15 +- .../Pagination/sub-components/Mobile.jsx | 33 ++-- .../Pagination/sub-components/PageButton.jsx | 21 ++- components/Popover/Popover.jsx | 19 +-- components/Popover/sub-components/Content.jsx | 35 ++-- components/ProgressBar/ProgressBar.jsx | 46 +++--- components/RadioGroup/Radio.jsx | 24 +-- components/RadioGroup/RadioGroup.jsx | 36 ++--- components/RangeSlider/RangeSlider.jsx | 59 +++---- components/Score/Score.jsx | 24 ++- .../SegmentedControl/SegmentedButton.jsx | 12 +- .../SegmentedControl/SegmentedControl.jsx | 21 ++- components/Skeleton/Skeleton.jsx | 74 +++++++-- components/SocialButton/SocialButton.jsx | 11 +- .../sub-components/FacebookIcon.jsx | 6 +- .../sub-components/GoogleIcon.jsx | 6 +- components/Socials/Socials.jsx | 13 +- .../sub-components/SocialFacebookIcon.jsx | 7 +- .../sub-components/SocialTwitterIcon.jsx | 7 +- .../Socials/sub-components/SocialType.jsx | 7 +- .../sub-components/SocialYoutubeIcon.jsx | 7 +- components/Stepper/Stepper.jsx | 55 ++++--- components/TabbedView/Tab.jsx | 5 - components/Tag/Tag.jsx | 59 ++++--- components/TextArea/TextArea.jsx | 61 +++---- components/Toggle/Toggle.jsx | 28 ++-- components/shared/ErrorMessage.jsx | 9 +- 70 files changed, 840 insertions(+), 1088 deletions(-) diff --git a/components/Alert/Alert.jsx b/components/Alert/Alert.jsx index e4cd02197..d0ae0d02d 100644 --- a/components/Alert/Alert.jsx +++ b/components/Alert/Alert.jsx @@ -84,7 +84,23 @@ const Wrapper = styled.div` `} `; -const Alert = ({ icon, children, theme, onClose, ...rest }) => { +const Alert = ({ + icon = null, + skin = 'neutral', + children, + theme = { + colors, + baseFontSize: defaultBaseFontSize, + spacing, + breakpoints, + components: { + alert: components.alert, + button: components.button, + }, + }, + onClose = undefined, + ...rest +}) => { const [show, setShow] = useState(true); const handleClose = () => { @@ -94,7 +110,7 @@ const Alert = ({ icon, children, theme, onClose, ...rest }) => { return ( show && ( - + {icon && } {children && {children}} @@ -105,22 +121,6 @@ const Alert = ({ icon, children, theme, onClose, ...rest }) => { ); }; -Alert.defaultProps = { - icon: null, - skin: 'neutral', - onClose: undefined, - theme: { - colors, - baseFontSize: defaultBaseFontSize, - spacing, - breakpoints, - components: { - alert: components.alert, - button: components.button, - }, - }, -}; - Alert.propTypes = { /** At least one children is required for Alert component properly works */ children: PropTypes.node.isRequired, diff --git a/components/AutoComplete/AutoComplete.jsx b/components/AutoComplete/AutoComplete.jsx index 3a83bf93e..259e5fb10 100644 --- a/components/AutoComplete/AutoComplete.jsx +++ b/components/AutoComplete/AutoComplete.jsx @@ -143,20 +143,23 @@ const PoliteStatus = styled.div` `; const AutoComplete = ({ - id, - name, - label, - value, - error, - disabled, - helperText, - placeholder, + id = '', + name = '', + label = '', + value = '', + error = '', + disabled = false, + helperText = '', + placeholder = 'Select an option', suggestions, - theme, - onSelectedItem, - onChange, - required, - skin, + theme = { + spacing, + colors, + }, + onSelectedItem = () => {}, + onChange = () => {}, + required = false, + skin = 'default', }) => { const [userTypedValue, setUserTypedValue] = useState(value); const [filterSuggestions, setFilterSuggestions] = useState(suggestions); @@ -412,23 +415,4 @@ AutoComplete.propTypes = { skin: PropTypes.oneOf(['default', 'dark']), }; -AutoComplete.defaultProps = { - theme: { - spacing, - colors, - }, - id: '', - name: '', - label: '', - value: '', - helperText: '', - error: '', - disabled: false, - placeholder: 'Select an option', - onChange: () => {}, - onSelectedItem: () => {}, - required: false, - skin: 'default', -}; - export default AutoComplete; diff --git a/components/Avatar/Avatar.jsx b/components/Avatar/Avatar.jsx index 0e8b5b3bb..0f494ed77 100644 --- a/components/Avatar/Avatar.jsx +++ b/components/Avatar/Avatar.jsx @@ -59,11 +59,11 @@ const IconToggle = styled(Icon)` /** This components is used to display the user picture. */ const Avatar = ({ - picture, - text, - hasNotification, - hasToggle, - href, + picture = '', + text = '', + hasNotification = false, + hasToggle = false, + href = '', ...rest }) => ( ` component instead */ -const Badge = ({ children, number, skin, inverted, dot, theme }) => { +const Badge = ({ + children = '', + number = 0, + skin = 'neutral', + inverted = false, + dot = false, + theme = { + baseFontSize: defaultBaseFontSize, + spacing, + components: { + badge: components.badge, + }, + }, +}) => { const value = number > 99 ? '99+' : number; return ( @@ -143,19 +156,4 @@ Badge.propTypes = { }), }; -Badge.defaultProps = { - skin: 'neutral', - inverted: false, - children: '', - number: 0, - dot: false, - theme: { - baseFontSize: defaultBaseFontSize, - spacing, - components: { - badge: components.badge, - }, - }, -}; - export default Badge; diff --git a/components/Breadcrumbs/Breadcrumbs.jsx b/components/Breadcrumbs/Breadcrumbs.jsx index 3c06d7206..7df60655e 100644 --- a/components/Breadcrumbs/Breadcrumbs.jsx +++ b/components/Breadcrumbs/Breadcrumbs.jsx @@ -109,7 +109,7 @@ const ExpandButton = styled.button.attrs(() => ({ `} `; -const Breadcrumbs = ({ items, theme }) => { +const Breadcrumbs = ({ items, theme = defaultTheme }) => { if (items.length < 2) { // eslint-disable-next-line no-console console.error('Breadcrumbs items should be greater or equal than 2.'); @@ -222,8 +222,4 @@ Breadcrumbs.propTypes = { }), }; -Breadcrumbs.defaultProps = { - theme: defaultTheme, -}; - export default Breadcrumbs; diff --git a/components/Button/Button.jsx b/components/Button/Button.jsx index 8368e94f8..ae4fa77d8 100644 --- a/components/Button/Button.jsx +++ b/components/Button/Button.jsx @@ -197,8 +197,42 @@ const StyledButton = styled.button` }} `; -const Button = ({ children, icon, size, $as, theme, ...rest }) => ( - +const Button = ({ + children = undefined, + icon = '', + size = 'medium', + theme = { + colors: defaultColors, + baseFontSize: defaultBaseFontSize, + spacing, + breakpoints: defaultTheme.breakpoints, + components: { + button: components.button, + }, + }, + center = false, + disabled = false, + stroked = false, + full = false, + skin = 'primary', + type = 'button', + $as = undefined, + onClick = () => {}, + ...rest +}) => ( + {icon && ( ( ); -Button.defaultProps = { - center: false, - disabled: false, - stroked: false, - full: false, - icon: '', - size: 'medium', - skin: 'primary', - type: 'button', - children: undefined, - $as: undefined, - onClick: () => {}, - theme: { - colors: defaultColors, - baseFontSize: defaultBaseFontSize, - spacing, - breakpoints: defaultTheme.breakpoints, - components: { - button: components.button, - }, - }, -}; - Button.propTypes = { center: PropTypes.bool, disabled: PropTypes.bool, diff --git a/components/Card/sub-components/Content.jsx b/components/Card/sub-components/Content.jsx index d0cf4e855..bc593eda5 100644 --- a/components/Card/sub-components/Content.jsx +++ b/components/Card/sub-components/Content.jsx @@ -6,7 +6,14 @@ import { baseFontSize as defaultBaseFontSize, } from '../../shared/theme'; -const Content = styled.div` +const Content = styled.div.attrs(({ theme, ...rest }) => ({ + theme: { + spacing, + baseFontSize: defaultBaseFontSize, + ...theme, + }, + ...rest, +}))` margin: 0; ${({ @@ -27,13 +34,6 @@ Content.propTypes = { }), }; -Content.defaultProps = { - theme: { - spacing, - baseFontSize: defaultBaseFontSize, - }, -}; - Content.displayName = 'Card.Content'; export default Content; diff --git a/components/Card/sub-components/Description.jsx b/components/Card/sub-components/Description.jsx index de8133a7c..c1cda8d57 100644 --- a/components/Card/sub-components/Description.jsx +++ b/components/Card/sub-components/Description.jsx @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import PropTypes from 'prop-types'; import { baseFontSize as defaultBaseFontSize, @@ -19,25 +18,15 @@ const Content = styled.div` `} `; -const Description = ({ ...props }) => ; - -Description.displayName = 'Card.Description'; - -Description.propTypes = { - /** default `font-size` is `14px`, with `small` prop defined the `font-size` is changed to `12px`. */ - small: PropTypes.bool, - theme: PropTypes.shape({ - baseFontSize: PropTypes.number, - spacing: PropTypes.object, - }), -}; - -Description.defaultProps = { - small: false, - theme: { +const Description = ({ + small = false, + theme = { baseFontSize: defaultBaseFontSize, spacing, }, -}; + ...props +}) => ; + +Description.displayName = 'Card.Description'; export default Description; diff --git a/components/Card/sub-components/Footer.jsx b/components/Card/sub-components/Footer.jsx index c97ef344b..c6caf5bf1 100644 --- a/components/Card/sub-components/Footer.jsx +++ b/components/Card/sub-components/Footer.jsx @@ -2,7 +2,13 @@ import styled from 'styled-components'; import PropTypes from 'prop-types'; import { spacing } from '../../shared/theme'; -const Footer = styled.footer` +const Footer = styled.footer.attrs(({ theme, ...rest }) => ({ + theme: { + spacing, + ...theme, + }, + ...rest, +}))` padding: ${({ theme: { spacing: { medium }, @@ -16,12 +22,6 @@ Footer.propTypes = { }), }; -Footer.defaultProps = { - theme: { - spacing, - }, -}; - Footer.displayName = 'Card.Footer'; export default Footer; diff --git a/components/Card/sub-components/Header.jsx b/components/Card/sub-components/Header.jsx index d0cc48df9..995dad8cb 100644 --- a/components/Card/sub-components/Header.jsx +++ b/components/Card/sub-components/Header.jsx @@ -3,7 +3,13 @@ import PropTypes from 'prop-types'; import { spacing } from '../../shared/theme'; -const Header = styled.header` +const Header = styled.header.attrs(({ theme, ...rest }) => ({ + theme: { + spacing, + ...theme, + }, + ...rest, +}))` display: flex; ${({ @@ -29,12 +35,6 @@ Header.propTypes = { }), }; -Header.defaultProps = { - theme: { - spacing, - }, -}; - Header.displayName = 'Card.Header'; export default Header; diff --git a/components/Card/sub-components/Media.jsx b/components/Card/sub-components/Media.jsx index bef4e07a0..a246c66d5 100644 --- a/components/Card/sub-components/Media.jsx +++ b/components/Card/sub-components/Media.jsx @@ -28,7 +28,15 @@ const Image = styled.img` width: 100%; `; -const Media = ({ className, style, theme, ...props }) => ( +const Media = ({ + className = undefined, + style = undefined, + theme = { + colors, + spacing, + }, + ...props +}) => ( @@ -45,13 +53,4 @@ Media.propTypes = { }), }; -Media.defaultProps = { - className: undefined, - style: undefined, - theme: { - colors, - spacing, - }, -}; - export default Media; diff --git a/components/Card/sub-components/Thumbnail.jsx b/components/Card/sub-components/Thumbnail.jsx index 7bc491252..ccc3b656f 100644 --- a/components/Card/sub-components/Thumbnail.jsx +++ b/components/Card/sub-components/Thumbnail.jsx @@ -22,7 +22,13 @@ const Image = styled.img.attrs({ loading: 'lazy' })` `} `; -const Thumbnail = ({ ...props }) => ; +const Thumbnail = ({ + rounded = false, + theme = { + colors, + }, + ...props +}) => ; Thumbnail.displayName = 'Card.Thumbnail'; @@ -36,11 +42,4 @@ Thumbnail.propTypes = { }), }; -Thumbnail.defaultProps = { - rounded: false, - theme: { - colors, - }, -}; - export default Thumbnail; diff --git a/components/Card/sub-components/Title.jsx b/components/Card/sub-components/Title.jsx index 12c7d6ac9..0c21e060c 100644 --- a/components/Card/sub-components/Title.jsx +++ b/components/Card/sub-components/Title.jsx @@ -10,7 +10,13 @@ const Heading = styled.h2` margin: 0; `; -const Title = ({ ...props }) => ; +const Title = ({ + small = false, + theme = { + baseFontSize: defaultBaseFontSize, + }, + ...props +}) => ; Title.displayName = 'Card.Title'; @@ -22,11 +28,4 @@ Title.propTypes = { }), }; -Title.defaultProps = { - small: false, - theme: { - baseFontSize: defaultBaseFontSize, - }, -}; - export default Title; diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx index 05e478430..c6a46968f 100644 --- a/components/Carousel/Carousel.jsx +++ b/components/Carousel/Carousel.jsx @@ -7,17 +7,19 @@ import CarouselCard from './sub-components/CarouselCard'; const MOBILE_BREAKPOINT = breakpoints.medium.width; -const Carousel = (props) => { - const { - theme, - dotsPagination, - cards, - cardSize, - speed, - slidesToScroll, - arrowColor, - } = props; - +const Carousel = ({ + theme = { + colors, + spacing, + baseFontSize, + }, + dotsPagination = true, + cards, + cardSize = 'medium', + speed = 500, + slidesToScroll = 1, + arrowColor = 'secondary', +}) => { const settings = { dots: cardSize !== 'small' ? dotsPagination : false, infinite: true, @@ -60,19 +62,6 @@ const Carousel = (props) => { ); }; -Carousel.defaultProps = { - dotsPagination: true, - speed: 500, - slidesToScroll: 1, - arrowColor: 'secondary', - cardSize: 'medium', - theme: { - colors, - spacing, - baseFontSize, - }, -}; - Carousel.propTypes = { /** this prop enable dots pagination (only for 'medium' and 'large' card sizes) */ dotsPagination: Proptypes.bool, diff --git a/components/Carousel/sub-components/Arrow.jsx b/components/Carousel/sub-components/Arrow.jsx index 41cbfaea3..e74a04a88 100644 --- a/components/Carousel/sub-components/Arrow.jsx +++ b/components/Carousel/sub-components/Arrow.jsx @@ -1,8 +1,13 @@ import Proptypes from 'prop-types'; import Icon from '../../Icon'; -const Arrow = (props) => { - const { className, onClick, theme, targeting, color } = props; +const Arrow = ({ + className = '', + onClick = () => {}, + theme, + targeting, + color, +}) => { const { colors: themeColors } = theme; const setColor = (allThemeColors, arrowColor) => @@ -18,11 +23,6 @@ const Arrow = (props) => { ); }; -Arrow.defaultProps = { - className: '', - onClick: () => {}, -}; - Arrow.propTypes = { className: Proptypes.string, onClick: Proptypes.func, diff --git a/components/Carousel/sub-components/DescriptionCard.jsx b/components/Carousel/sub-components/DescriptionCard.jsx index 9716aae1e..1fe0695d1 100644 --- a/components/Carousel/sub-components/DescriptionCard.jsx +++ b/components/Carousel/sub-components/DescriptionCard.jsx @@ -89,7 +89,15 @@ Description.displayName = 'Description'; const handleCardMeasures = (cardSize) => cardMeasures[cardSize]; -function DescriptionCard({ card, cardSize, theme }) { +function DescriptionCard({ + card, + cardSize, + theme = { + colors, + spacing, + baseFontSize, + }, +}) { const cardMeasure = handleCardMeasures(cardSize); return ( @@ -109,14 +117,6 @@ function DescriptionCard({ card, cardSize, theme }) { ); } -DescriptionCard.defaultProps = { - theme: { - colors, - spacing, - baseFontSize, - }, -}; - DescriptionCard.propTypes = { card: Proptypes.shape({ imagePath: Proptypes.string, diff --git a/components/Carousel/sub-components/ThumbCard.jsx b/components/Carousel/sub-components/ThumbCard.jsx index 00b071d97..e549d3afb 100644 --- a/components/Carousel/sub-components/ThumbCard.jsx +++ b/components/Carousel/sub-components/ThumbCard.jsx @@ -36,27 +36,25 @@ const Thumb = styled.img` height: ${SQUARE_THUMB_SIZE}px; `; -const ThumbCard = ({ card, theme }) => ( - - - - - -); - -ThumbCard.defaultProps = { - card: { +const ThumbCard = ({ + card = { imagePath: 'http://', imageDescription: 'card image a11y description', title: 'card title', description: 'card description', }, - theme: { + theme = { colors, spacing, baseFontSize, }, -}; +}) => ( + + + + + +); ThumbCard.propTypes = { card: Proptypes.shape({ diff --git a/components/ChargeBar/ChargeBar.jsx b/components/ChargeBar/ChargeBar.jsx index 18a3f2226..47951d698 100644 --- a/components/ChargeBar/ChargeBar.jsx +++ b/components/ChargeBar/ChargeBar.jsx @@ -84,24 +84,30 @@ const LabelInfo = styled.span` ProgressLabel.displayName = 'ProgressLabel'; LabelInfo.displayName = 'LabelInfo'; -const ChargeBar = (props) => { +const ChargeBar = ({ + width = '250px', + progressPercent = 50, + label = 'default informative text', + skin = 'primary', + theme = { + components: { + chargeBar: components.chargeBar, + }, + spacing: themeSpacing, + baseFontSize: defaultBaseFontSize, + }, +}) => { const { - width, - progressPercent, - label, - skin, - theme: { - components: { - chargeBar: { - skins: { - [skin]: { background }, - }, + components: { + chargeBar: { + skins: { + [skin]: { background }, }, }, - spacing, - baseFontSize, }, - } = props; + spacing, + baseFontSize, + } = theme; return ( @@ -124,20 +130,6 @@ const ChargeBar = (props) => { ); }; -ChargeBar.defaultProps = { - width: '250px', - progressPercent: 50, - skin: 'primary', - theme: { - components: { - chargeBar: components.chargeBar, - }, - spacing: themeSpacing, - baseFontSize: defaultBaseFontSize, - }, - label: 'default informative text', -}; - ChargeBar.propTypes = { /** This prop sets the color of bar and text. */ skin: PropTypes.oneOf(['neutral', 'primary', 'secondary', 'success']), @@ -153,6 +145,8 @@ ChargeBar.propTypes = { /** This prop receives a number of 1 until 100. Its the progress bar in component */ progressPercent(props, propName) { const percentRange = props[propName]; + if (!percentRange) return null; + return percentRange >= 0 && percentRange <= 100 ? null : new Error('Must be within range of 0 to 100'); diff --git a/components/Checkbox/Checkbox.jsx b/components/Checkbox/Checkbox.jsx index a6f8717cb..2abc0917f 100644 --- a/components/Checkbox/Checkbox.jsx +++ b/components/Checkbox/Checkbox.jsx @@ -186,13 +186,19 @@ const HiddenCheckbox = styled(HiddenInput).attrs({ HiddenCheckbox.displayName = 'HiddenCheckbox'; const Checkbox = ({ - children, - id, - label, - value, - theme, - error: errorProp, - onChange: onChangeProp, + children = '', + id = '', + label = '', + value = '', + theme = { + colors, + spacing, + baseFontSize, + }, + error: errorProp = '', + onChange: onChangeProp = () => {}, + checked = false, + disabled = false, ...props }) => { const context = useContext(CheckboxGroupContext); @@ -203,12 +209,14 @@ const Checkbox = ({ @@ -237,22 +245,6 @@ Checkbox.propTypes = { }), }; -Checkbox.defaultProps = { - checked: false, - disabled: false, - children: '', - error: '', - id: '', - label: '', - value: '', - onChange: () => {}, - theme: { - colors, - spacing, - baseFontSize, - }, -}; - Checkbox.displayName = 'Checkbox'; export default Checkbox; diff --git a/components/Checkbox/CheckboxButton.jsx b/components/Checkbox/CheckboxButton.jsx index f87d86307..4df813fa8 100644 --- a/components/Checkbox/CheckboxButton.jsx +++ b/components/Checkbox/CheckboxButton.jsx @@ -44,17 +44,17 @@ const CheckButton = styled(Button)` `; const CheckboxButton = ({ - children, - id, - label, - value, - checked, - disabled, + children = '', + id = '', + label = '', + value = '', + checked = false, + disabled = false, name, - icon, - skin, - error: errorProp, - onChange: onChangeProp, + icon = undefined, + skin = 'primary', + error: errorProp = '', + onChange: onChangeProp = () => {}, ...props }) => { const { @@ -106,19 +106,6 @@ const CheckboxButton = ({ ); }; -CheckboxButton.defaultProps = { - checked: false, - children: '', - skin: 'primary', - disabled: false, - error: '', - icon: undefined, - id: '', - label: '', - onChange: () => {}, - value: '', -}; - CheckboxButton.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), diff --git a/components/Checkbox/CheckboxGroup.jsx b/components/Checkbox/CheckboxGroup.jsx index 99559f7ff..d1f51902a 100644 --- a/components/Checkbox/CheckboxGroup.jsx +++ b/components/Checkbox/CheckboxGroup.jsx @@ -12,14 +12,17 @@ const Group = styled(FieldGroup)` `; const CheckboxGroup = ({ - children, - onChange, - error, - options, - type, - inline, - theme, - size, + children = undefined, + onChange = () => {}, + error = undefined, + options = [], + type = 'checkbox', + inline = false, + theme = { + colors, + spacing, + }, + size = 'medium', }) => { const _onChange = (event) => { const { @@ -91,21 +94,4 @@ CheckboxGroup.propTypes = { }), }; -/** - * Group for Checkbox components. - */ -CheckboxGroup.defaultProps = { - children: undefined, - error: undefined, - inline: false, - onChange: () => {}, - options: [], - size: 'medium', - type: 'checkbox', - theme: { - colors, - spacing, - }, -}; - export default CheckboxGroup; diff --git a/components/CircularLoader/CircularLoader.jsx b/components/CircularLoader/CircularLoader.jsx index 8cc54a682..53a4f5af2 100644 --- a/components/CircularLoader/CircularLoader.jsx +++ b/components/CircularLoader/CircularLoader.jsx @@ -83,17 +83,20 @@ const Wrapper = styled.div` `} `; -const CircularLoader = (props) => { +const CircularLoader = ({ + size = 'medium', + skin = 'primary', + theme = { + colors, + gutter: defaultGutter, + }, +}) => { const { - size, - skin, - theme: { - colors: { - [skin]: { 700: color }, - }, - gutter, + colors: { + [skin]: { 700: color }, }, - } = props; + gutter, + } = theme; const { cx, cy, r, strokeWidth } = circleProps; @@ -106,15 +109,6 @@ const CircularLoader = (props) => { ); }; -CircularLoader.defaultProps = { - size: 'medium', - skin: 'primary', - theme: { - colors, - gutter: defaultGutter, - }, -}; - CircularLoader.propTypes = { size: PropTypes.oneOf(['medium', 'large', 'xlarge', 'xxlarge', 'xxxlarge']), skin: PropTypes.oneOf(['primary', 'secondary']), diff --git a/components/Dialog/Dialog.jsx b/components/Dialog/Dialog.jsx index 7fce1130f..2930cb298 100644 --- a/components/Dialog/Dialog.jsx +++ b/components/Dialog/Dialog.jsx @@ -32,13 +32,15 @@ const Wrapper = styled.div` `; const Dialog = ({ - onClose, - closeOnTime, - children, - theme, - onClickOutside, - disableClickOutside, - selector, + onClose = () => {}, + closeOnTime = undefined, + children = undefined, + theme = { + colors, + }, + onClickOutside = undefined, + disableClickOutside = false, + selector = 'body', }) => { const dialogOver = useRef(); @@ -198,16 +200,4 @@ Dialog.__docgenInfo = { }, }; -Dialog.defaultProps = { - onClose: () => {}, - selector: 'body', - children: undefined, - closeOnTime: undefined, - onClickOutside: undefined, - disableClickOutside: false, - theme: { - colors, - }, -}; - export default Dialog; diff --git a/components/Dropdown/Dropdown.jsx b/components/Dropdown/Dropdown.jsx index 7f9c18643..873520470 100644 --- a/components/Dropdown/Dropdown.jsx +++ b/components/Dropdown/Dropdown.jsx @@ -181,7 +181,7 @@ const itemPropType = PropTypes.oneOfType([ }), ]); -const List = ({ theme, items, selectedItem, getItemProps }) => ( +const List = ({ theme, items, selectedItem = null, getItemProps }) => ( {items.map((item) => ( ( ); -List.defaultProps = { - selectedItem: null, -}; - List.propTypes = { selectedItem: itemPropType, theme: PropTypes.shape({ @@ -232,21 +228,21 @@ List.propTypes = { }; const Dropdown = ({ - label, - error, - helperText, - required, - disabled, - items, - placeholder, - selectedItem, - onChange, - autocomplete, - theme, - id, - name, - ignoreSpecialChars, - skin, + label = '', + error = '', + helperText = '', + required = false, + disabled = false, + items = [], + placeholder = 'Select an option', + selectedItem = null, + onChange = () => {}, + autocomplete = false, + theme = { colors, spacing, baseFontSize }, + id = '', + name = '', + ignoreSpecialChars = false, + skin = 'default', ...rest }) => { const _buttonLabel = selectedItem ? _getLabel(selectedItem) : placeholder; @@ -394,24 +390,6 @@ const Dropdown = ({ ); }; -Dropdown.defaultProps = { - autocomplete: false, - disabled: false, - required: false, - error: '', - id: '', - name: '', - label: '', - placeholder: 'Select an option', - selectedItem: null, - helperText: '', - items: [], - onChange: () => {}, - theme: { colors, spacing, baseFontSize }, - ignoreSpecialChars: false, - skin: 'default', -}; - Dropdown.propTypes = { /** Displays the list with start typing */ autocomplete: PropTypes.bool, diff --git a/components/DropdownLight/DropdownLight.jsx b/components/DropdownLight/DropdownLight.jsx index 597845583..138d19b9f 100644 --- a/components/DropdownLight/DropdownLight.jsx +++ b/components/DropdownLight/DropdownLight.jsx @@ -184,19 +184,23 @@ const SelectionItemImage = styled.img` `; const DropdownLight = ({ - disabled, + disabled = false, items, - theme, - placeholder, - name, - id, - label, - error, - required, - helperText, - skin, - onChange, - selectedItem, + theme = { + colors: colorsDefault, + spacing: spacingDefault, + baseFontSize: baseFontSizeDefault, + }, + placeholder = 'Select an option', + name = '', + id = '', + label = '', + error = '', + required = false, + helperText = '', + skin = 'default', + onChange = () => {}, + selectedItem = null, }) => { const [isOpen, setIsOpen] = useState(false); const [selectedOptionItem, setSelectedOptionItem] = useState( @@ -408,23 +412,4 @@ DropdownLight.propTypes = { skin: PropTypes.oneOf(['default', 'dark']), }; -DropdownLight.defaultProps = { - id: '', - label: '', - error: '', - required: false, - disabled: false, - theme: { - colors: colorsDefault, - spacing: spacingDefault, - baseFontSize: baseFontSizeDefault, - }, - placeholder: 'Select an option', - name: '', - helperText: '', - skin: 'default', - onChange: () => {}, - selectedItem: null, -}; - export default DropdownLight; diff --git a/components/Grid/sub-components/Col.jsx b/components/Grid/sub-components/Col.jsx index 96bbd6a4d..6768140eb 100644 --- a/components/Grid/sub-components/Col.jsx +++ b/components/Grid/sub-components/Col.jsx @@ -137,7 +137,14 @@ const columnPosition = ( `; }; -const Col = styled.div` +const Col = styled.div.attrs(({ 'no-gutters': noGutters, theme, ...rest }) => ({ + 'no-gutters': !!noGutters, + theme: { + ...defaultTheme, + ...theme, + }, + ...rest, +}))` ${(props) => Object.keys(props.theme.breakpoints).map((breakpoint) => columnPosition(props, breakpoint), @@ -148,11 +155,6 @@ const Col = styled.div` box-sizing: border-box; `; -Col.defaultProps = { - theme: defaultTheme, - 'no-gutters': false, -}; - Col.propTypes = { 'no-gutters': PropTypes.bool, xsmall: PropTypes.number, diff --git a/components/Grid/sub-components/Container.jsx b/components/Grid/sub-components/Container.jsx index 17b09f601..62408cd58 100644 --- a/components/Grid/sub-components/Container.jsx +++ b/components/Grid/sub-components/Container.jsx @@ -47,7 +47,18 @@ const renderResponsives = ({ ), ); -const Container = styled.div` +const Container = styled.div.attrs( + ({ fluid, withBreakpoints, 'no-gutters': noGutters, theme, ...rest }) => ({ + fluid: !!fluid, + withBreakpoints: !!withBreakpoints, + 'no-gutters': !!noGutters, + theme: { + ...defaultTheme, + ...theme, + }, + ...rest, + }), +)` box-sizing: border-box; margin-left: auto; margin-right: auto; @@ -75,13 +86,6 @@ Container.propTypes = { 'no-gutters': PropTypes.bool, }; -Container.defaultProps = { - fluid: false, - withBreakpoints: false, - 'no-gutters': false, - theme: defaultTheme, -}; - Container.displayName = 'Container'; export default Container; diff --git a/components/Grid/sub-components/Hide.jsx b/components/Grid/sub-components/Hide.jsx index ed3213272..7ed320942 100644 --- a/components/Grid/sub-components/Hide.jsx +++ b/components/Grid/sub-components/Hide.jsx @@ -1,9 +1,15 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import { hideQueries } from './shared/media'; -import theme from '../../shared/theme'; - -const Hide = styled.div` +import defaultTheme from '../../shared/theme'; + +const Hide = styled.div.attrs(({ theme, ...rest }) => ({ + theme: { + ...defaultTheme, + ...theme, + }, + ...rest, +}))` ${({ theme: { breakpoints }, xsmall, small, medium, large }) => { let style = ''; @@ -18,8 +24,6 @@ const Hide = styled.div` }} `; -Hide.defaultProps = { theme }; - Hide.propTypes = { large: PropTypes.bool, medium: PropTypes.bool, diff --git a/components/Hamburger/Hamburger.jsx b/components/Hamburger/Hamburger.jsx index d1edd4f6c..aa90344e7 100644 --- a/components/Hamburger/Hamburger.jsx +++ b/components/Hamburger/Hamburger.jsx @@ -29,10 +29,10 @@ const IconDot = styled.span` `; const Hamburger = ({ - showNotification, - isOpened, - inverted, - ariaLabelDescription, + inverted = false, + showNotification = false, + isOpened = false, + ariaLabelDescription = 'There are new notifications', }) => { const Block = ( <> @@ -59,11 +59,4 @@ Hamburger.propTypes = { ariaLabelDescription: PropTypes.string, }; -Hamburger.defaultProps = { - inverted: false, - showNotification: false, - isOpened: false, - ariaLabelDescription: 'There are new notifications', -}; - export default Hamburger; diff --git a/components/Icon/Icon.jsx b/components/Icon/Icon.jsx index 6e9734c91..f28448410 100644 --- a/components/Icon/Icon.jsx +++ b/components/Icon/Icon.jsx @@ -124,7 +124,7 @@ const sizes = { xlarge: baseFontSize * 2.5, // 40 }; -const Icon = ({ name, skin, size, ...props }) => { +const Icon = ({ name, skin = '', style = {}, size = 'medium', ...props }) => { const components = { access_time: AccessTime, accessible_forward: AccessibleForward, @@ -245,7 +245,12 @@ const Icon = ({ name, skin, size, ...props }) => { return ( {name} @@ -253,12 +258,6 @@ const Icon = ({ name, skin, size, ...props }) => { ); }; -Icon.defaultProps = { - style: {}, - skin: '', - size: 'medium', -}; - Icon.propTypes = { name: PropTypes.oneOf(icons).isRequired, style: PropTypes.instanceOf(Object), diff --git a/components/InfiniteScroll/InfiniteScroll.jsx b/components/InfiniteScroll/InfiniteScroll.jsx index e3e902831..5558ae619 100644 --- a/components/InfiniteScroll/InfiniteScroll.jsx +++ b/components/InfiniteScroll/InfiniteScroll.jsx @@ -21,92 +21,95 @@ const InfiniteScrollWrapper = styled.div` overflow-y: auto; `; -const InfiniteScroll = forwardRef( - ({ children, reverse, onScrollEnd, loading }, ref) => { - const [scrollHeight, setScrollHeight] = useState(); - const [dispatchObserverEvent, setDispatchObserverEvent] = useState(false); - const wrapperRef = useRef(); - const triggerRef = useRef(); - - const handleObserver = ([target]) => { - if (target.isIntersecting && target.intersectionRatio) { - setDispatchObserverEvent(true); - } - }; - - const handleMutations = useCallback((mutations) => { - if (mutations?.length > 1) { - const wrapperEl = wrapperRef.current; - setScrollHeight((state) => wrapperEl.scrollHeight - state); - } - }, []); +const InfiniteScrollBase = ( + { children, reverse = false, onScrollEnd = () => {}, loading }, + ref, +) => { + const [scrollHeight, setScrollHeight] = useState(); + const [dispatchObserverEvent, setDispatchObserverEvent] = useState(false); + const wrapperRef = useRef(); + const triggerRef = useRef(); + + const handleObserver = ([target]) => { + if (target.isIntersecting && target.intersectionRatio) { + setDispatchObserverEvent(true); + } + }; - if (reverse) { - useMutationObservable({ - targetEl: wrapperRef.current, - callback: handleMutations, - }); + const handleMutations = useCallback((mutations) => { + if (mutations?.length > 1) { + const wrapperEl = wrapperRef.current; + setScrollHeight((state) => wrapperEl.scrollHeight - state); } + }, []); - const handleScrollToStart = useCallback(() => { - setScrollHeight(wrapperRef?.current?.scrollHeight); - }, []); + if (reverse) { + useMutationObservable({ + targetEl: wrapperRef.current, + callback: handleMutations, + }); + } - useImperativeHandle(ref, () => ({ - scrollToStart: handleScrollToStart, - })); + const handleScrollToStart = useCallback(() => { + setScrollHeight(wrapperRef?.current?.scrollHeight); + }, []); - useEffect(() => { - const wrapperEl = wrapperRef.current; - const triggerEl = triggerRef.current; - - const intersectionObserver = new IntersectionObserver(handleObserver, { - root: wrapperEl, - threshold: 1, - }); - intersectionObserver.observe(triggerEl); - - if (reverse) { - setScrollHeight(wrapperEl.scrollHeight); - } - - return () => { - intersectionObserver.unobserve(triggerEl); - }; - }, []); - - useEffect(() => { - if (reverse) { - InfiniteScroll.handleScrollPosition(wrapperRef.current, scrollHeight); - } - }, [scrollHeight]); - - useEffect(() => { - if (dispatchObserverEvent) { - onScrollEnd(); - setDispatchObserverEvent(false); - } - }, [dispatchObserverEvent]); + useImperativeHandle(ref, () => ({ + scrollToStart: handleScrollToStart, + })); + + useEffect(() => { + const wrapperEl = wrapperRef.current; + const triggerEl = triggerRef.current; + + const intersectionObserver = new IntersectionObserver(handleObserver, { + root: wrapperEl, + threshold: 1, + }); + intersectionObserver.observe(triggerEl); if (reverse) { - return ( - - {loading && } - - {children} - - ); + setScrollHeight(wrapperEl.scrollHeight); } + return () => { + intersectionObserver.unobserve(triggerEl); + }; + }, []); + + useEffect(() => { + if (reverse) { + InfiniteScroll.handleScrollPosition(wrapperRef.current, scrollHeight); + } + }, [scrollHeight]); + + useEffect(() => { + if (dispatchObserverEvent) { + onScrollEnd(); + setDispatchObserverEvent(false); + } + }, [dispatchObserverEvent]); + + if (reverse) { return ( - {children} - {loading && } + + {children} ); - }, -); + } + + return ( + + {children} + + {loading && } + + ); +}; + +const InfiniteScroll = forwardRef(InfiniteScrollBase); InfiniteScroll.handleScrollPosition = (element, height) => { element.scrollTo({ top: height, behavior: 'instant' }); @@ -118,9 +121,4 @@ InfiniteScroll.propTypes = { onScrollEnd: PropTypes.func, }; -InfiniteScroll.defaultProps = { - reverse: false, - onScrollEnd: () => {}, -}; - export default InfiniteScroll; diff --git a/components/Input/sub-components/InputErrorMessage.jsx b/components/Input/sub-components/InputErrorMessage.jsx index 4da36d320..985c22d27 100644 --- a/components/Input/sub-components/InputErrorMessage.jsx +++ b/components/Input/sub-components/InputErrorMessage.jsx @@ -3,7 +3,13 @@ import styled, { css } from 'styled-components'; import { ErrorMessage } from '../../shared'; import { spacing, colors } from '../../shared/theme'; -const InputErrorMessage = styled(ErrorMessage)` +const InputErrorMessage = styled(ErrorMessage).attrs( + ({ skin, theme, ...rest }) => ({ + theme: { spacing, colors, ...theme }, + skin: skin || 'default', + ...rest, + }), +)` ${({ theme: { colors: { neutral }, @@ -26,9 +32,4 @@ InputErrorMessage.propTypes = { skin: PropTypes.oneOf(['default', 'dark']), }; -InputErrorMessage.defaultProps = { - theme: { spacing, colors }, - skin: 'default', -}; - export default InputErrorMessage; diff --git a/components/Input/sub-components/InputLabel.jsx b/components/Input/sub-components/InputLabel.jsx index 870bf8721..bec1dad0a 100644 --- a/components/Input/sub-components/InputLabel.jsx +++ b/components/Input/sub-components/InputLabel.jsx @@ -2,7 +2,10 @@ import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; import { colors, spacing } from '../../shared/theme'; -const InputLabel = styled.label` +const InputLabel = styled.label.attrs(({ theme, ...rest }) => ({ + theme: { spacing, colors, ...theme }, + ...rest, +}))` display: block; font-weight: bold; ${({ @@ -25,8 +28,4 @@ InputLabel.propTypes = { }), }; -InputLabel.defaultProps = { - theme: { spacing, colors }, -}; - export default InputLabel; diff --git a/components/Input/sub-components/RequiredMark.jsx b/components/Input/sub-components/RequiredMark.jsx index 942df8501..6358e7b72 100644 --- a/components/Input/sub-components/RequiredMark.jsx +++ b/components/Input/sub-components/RequiredMark.jsx @@ -2,7 +2,11 @@ import PropTypes from 'prop-types'; import styled, { css } from 'styled-components'; import { colors } from '../../shared/theme'; -const RequiredMark = styled.em` +const RequiredMark = styled.em.attrs(({ skin, theme, ...rest }) => ({ + theme: { colors, ...theme }, + skin: skin || 'default', + ...rest, +}))` ${({ theme: { colors: { error }, @@ -20,9 +24,4 @@ RequiredMark.propTypes = { skin: PropTypes.oneOf(['default', 'dark']), }; -RequiredMark.defaultProps = { - theme: { colors }, - skin: 'default', -}; - export default RequiredMark; diff --git a/components/Input/sub-components/TextInput.jsx b/components/Input/sub-components/TextInput.jsx index b15fda9c6..fde561fe2 100644 --- a/components/Input/sub-components/TextInput.jsx +++ b/components/Input/sub-components/TextInput.jsx @@ -80,7 +80,11 @@ const textInputSkinVariations = { dark: darkSkin, }; -const TextInput = styled.input` +const TextInput = styled.input.attrs(({ theme, ...rest }) => ({ + theme: { spacing, colors, ...theme }, + skin: 'default', + ...rest, +}))` -webkit-appearance: none; border-radius: 4px; box-sizing: border-box; @@ -148,9 +152,4 @@ TextInput.propTypes = { skin: PropTypes.oneOf(['default', 'dark']), }; -TextInput.defaultProps = { - theme: { spacing, colors }, - skin: 'default', -}; - export default TextInput; diff --git a/components/Link/Link.jsx b/components/Link/Link.jsx index 97a25f510..cc72dc57d 100644 --- a/components/Link/Link.jsx +++ b/components/Link/Link.jsx @@ -23,11 +23,30 @@ const StyledLink = styled.a` `} `; -const Link = forwardRef(({ children, skin, underline, ...rest }, ref) => ( - +const LinkBase = ( + { + children, + skin = 'default', + underline = true, + theme = { + colors, + }, + ...rest + }, + ref, +) => ( + {children} -)); +); + +const Link = forwardRef(LinkBase); Link.propTypes = { theme: PropTypes.shape({ @@ -41,12 +60,4 @@ Link.propTypes = { underline: PropTypes.bool, }; -Link.defaultProps = { - theme: { - colors, - }, - skin: 'default', - underline: true, -}; - export default Link; diff --git a/components/List/sub-components/Header.jsx b/components/List/sub-components/Header.jsx index 2b3186aa9..c20e77b06 100644 --- a/components/List/sub-components/Header.jsx +++ b/components/List/sub-components/Header.jsx @@ -14,13 +14,12 @@ const Title = styled.span` Title.displayName = 'Header'; -const Header = ({ children, theme }) => {children}; - -Header.defaultProps = { - theme: { +const Header = ({ + children, + theme = { spacing, }, -}; +}) => {children}; Header.propTypes = { children: PropTypes.oneOfType([ diff --git a/components/List/sub-components/SubHeader.jsx b/components/List/sub-components/SubHeader.jsx index 29a483d91..762cba4a5 100644 --- a/components/List/sub-components/SubHeader.jsx +++ b/components/List/sub-components/SubHeader.jsx @@ -13,15 +13,12 @@ const Description = styled.span` Description.displayName = 'SubHeader'; -const SubHeader = ({ children, theme }) => ( - {children} -); - -SubHeader.defaultProps = { - theme: { +const SubHeader = ({ + children, + theme = { baseFontSize, }, -}; +}) => {children}; SubHeader.propTypes = { children: PropTypes.oneOfType([ diff --git a/components/Menu/Menu.jsx b/components/Menu/Menu.jsx index db90fdb8d..cc4130812 100644 --- a/components/Menu/Menu.jsx +++ b/components/Menu/Menu.jsx @@ -20,52 +20,54 @@ const materialThemeOverride = createTheme({ }, }); -const Menu = (props) => { - const { - open, - anchorEl, - anchorOrigin, - transformOrigin, - onClose, - items, - keepMounted, - } = props; - - return ( - - {items.map((item) => { - const onClickFunc = () => { - const { onClick } = item; - onClose(); - onClick(); - }; - return ( - - {item.content} - - ); - })} - - ); -}; +const Menu = ({ + open = false, + items = [], + anchorEl = null, + anchorOrigin = { + vertical: 'bottom', + horizontal: 'left', + }, + transformOrigin = { + vertical: 'top', + horizontal: 'left', + }, + keepMounted = false, + onClose = () => {}, +}) => ( + + {items.map((item) => { + const onClickFunc = () => { + const { onClick } = item; + onClose(); + onClick(); + }; + return ( + + {item.content} + + ); + })} + +); Menu.propTypes = { /** If true, the component is shown. */ @@ -96,20 +98,4 @@ Menu.propTypes = { onClose: PropTypes.func, }; -Menu.defaultProps = { - open: false, - items: [], - anchorEl: null, - anchorOrigin: { - vertical: 'bottom', - horizontal: 'left', - }, - transformOrigin: { - vertical: 'top', - horizontal: 'left', - }, - keepMounted: false, - onClose: () => {}, -}; - export default Menu; diff --git a/components/Modal/sub-components/Content.jsx b/components/Modal/sub-components/Content.jsx index d9d78e54e..e05ebbabd 100644 --- a/components/Modal/sub-components/Content.jsx +++ b/components/Modal/sub-components/Content.jsx @@ -3,7 +3,10 @@ import PropTypes from 'prop-types'; import Card from '../../Card'; import { spacing } from '../../shared/theme'; -const Content = styled(Card.Content)` +const Content = styled(Card.Content).attrs(({ theme, ...rest }) => ({ + theme: { spacing, ...theme }, + ...rest, +}))` font-size: 16px; max-height: 70vh; overflow-y: auto; @@ -20,8 +23,4 @@ Content.propTypes = { }), }; -Content.defaultProps = { - theme: { spacing }, -}; - export default Content; diff --git a/components/Modal/sub-components/Header.jsx b/components/Modal/sub-components/Header.jsx index 5e33f3047..b9f5cb1ff 100644 --- a/components/Modal/sub-components/Header.jsx +++ b/components/Modal/sub-components/Header.jsx @@ -3,7 +3,10 @@ import PropTypes from 'prop-types'; import Card from '../../Card'; import { spacing } from '../../shared/theme'; -const Header = styled(Card.Header)` +const Header = styled(Card.Header).attrs(({ theme, ...rest }) => ({ + theme: { spacing, ...theme }, + ...rest, +}))` padding: ${({ theme: { spacing: { medium }, @@ -17,8 +20,4 @@ Header.propTypes = { }), }; -Header.defaultProps = { - theme: { spacing }, -}; - export default Header; diff --git a/components/Pagination/sub-components/ActionButton.jsx b/components/Pagination/sub-components/ActionButton.jsx index 30980141c..d91c53536 100644 --- a/components/Pagination/sub-components/ActionButton.jsx +++ b/components/Pagination/sub-components/ActionButton.jsx @@ -3,7 +3,14 @@ import styled from 'styled-components'; import { colors, spacing } from '../../shared/theme'; -const ActionButton = styled.a` +const ActionButton = styled.a.attrs(({ theme, ...rest }) => ({ + theme: { + colors, + spacing, + ...theme, + }, + ...rest, +}))` cursor: pointer; font-weight: normal; outline: none; @@ -53,12 +60,4 @@ ActionButton.propTypes = { }), }; -ActionButton.defaultProps = { - onClick: () => {}, - theme: { - colors, - spacing, - }, -}; - export default ActionButton; diff --git a/components/Pagination/sub-components/Desktop.jsx b/components/Pagination/sub-components/Desktop.jsx index 38a5c62cc..a01cdce29 100644 --- a/components/Pagination/sub-components/Desktop.jsx +++ b/components/Pagination/sub-components/Desktop.jsx @@ -9,16 +9,16 @@ import { createUniqId } from '../../shared/uniqId'; const uniqId = createUniqId('dot-'); const Desktop = ({ - activePage, - handlePageClick, - handleHref, - prevButtonText, - nextButtonText, + tabIndex = 0, + activePage = 1, + activePageAriaLabel = 'Current Page', + handlePageClick = undefined, + handleHref = undefined, + followOnlyFirstPage = false, + prevButtonText = 'Previous', + nextButtonText = 'Next', + pageAriaLabel = 'Page', totalPages, - activePageAriaLabel, - pageAriaLabel, - tabIndex, - followOnlyFirstPage, hideLastPagination, }) => ( <> @@ -81,16 +81,4 @@ Desktop.propTypes = { hideLastPagination: PropTypes.bool.isRequired, }; -Desktop.defaultProps = { - tabIndex: 0, - activePage: 1, - activePageAriaLabel: 'Current Page', - nextButtonText: 'Next', - pageAriaLabel: 'Page', - handleHref: undefined, - prevButtonText: 'Previous', - handlePageClick: undefined, - followOnlyFirstPage: false, -}; - export default Desktop; diff --git a/components/Pagination/sub-components/Dots.jsx b/components/Pagination/sub-components/Dots.jsx index f1f8b154f..e7deecce9 100644 --- a/components/Pagination/sub-components/Dots.jsx +++ b/components/Pagination/sub-components/Dots.jsx @@ -48,7 +48,13 @@ const Dot = styled.span` `} `; -const Dots = ({ theme, ...props }) => ( +const Dots = ({ + theme = { + colors, + spacing, + }, + ...props +}) => ( @@ -61,11 +67,4 @@ Dots.propTypes = { }), }; -Dots.defaultProps = { - theme: { - colors, - spacing, - }, -}; - export default Dots; diff --git a/components/Pagination/sub-components/Mobile.jsx b/components/Pagination/sub-components/Mobile.jsx index bb908367b..2cef0ce9e 100644 --- a/components/Pagination/sub-components/Mobile.jsx +++ b/components/Pagination/sub-components/Mobile.jsx @@ -70,15 +70,18 @@ const StyledActionButton = styled(ActionButton)` Info.displayName = 'Info'; const Mobile = ({ - activePage, - handlePageClick, - handleHref, - prevButtonText, - nextButtonText, + activePage = 1, + handlePageClick = () => {}, + handleHref = () => {}, + prevButtonText = 'Previous', + nextButtonText = 'Next', totalPages, - infoFormatter, - theme, - followOnlyFirstPage, + infoFormatter = (currentPage, lastPage) => `${currentPage} of ${lastPage}`, + theme = { + colors, + spacing, + }, + followOnlyFirstPage = false, }) => ( <> `${activePage} of ${lastPage}`, - handleHref: () => {}, - handlePageClick: () => {}, - theme: { - colors, - spacing, - }, - followOnlyFirstPage: false, -}; - export default Mobile; diff --git a/components/Pagination/sub-components/PageButton.jsx b/components/Pagination/sub-components/PageButton.jsx index 8265585d1..daf421a61 100644 --- a/components/Pagination/sub-components/PageButton.jsx +++ b/components/Pagination/sub-components/PageButton.jsx @@ -7,7 +7,16 @@ import { baseFontSize as defaultBaseFontSize, } from '../../shared/theme'; -const PageButton = styled.a` +const PageButton = styled.a.attrs(({ active, theme, ...rest }) => ({ + active: !!active, + theme: { + baseFontSize: defaultBaseFontSize, + colors, + spacing, + ...theme, + }, + ...rest, +}))` font-weight: bold; align-items: center; border-radius: 10px; @@ -65,14 +74,4 @@ PageButton.propTypes = { }), }; -PageButton.defaultProps = { - active: false, - onClick: () => {}, - theme: { - baseFontSize: defaultBaseFontSize, - colors, - spacing, - }, -}; - export default PageButton; diff --git a/components/Popover/Popover.jsx b/components/Popover/Popover.jsx index 05c1a3a09..26f13ab81 100644 --- a/components/Popover/Popover.jsx +++ b/components/Popover/Popover.jsx @@ -14,9 +14,11 @@ const TriggerBlock = styled.div` `; const Popover = ({ - visible, - onClose, - placement, + visible = false, + inverted = false, + onClose = () => {}, + skin = 'neutral', + placement = 'top', trigger, children, ...rest @@ -37,6 +39,8 @@ const Popover = ({ handleVisible(false)} + inverted={inverted} + skin={skin} {...rest} > {children} @@ -62,13 +66,4 @@ Popover.propTypes = { onClose: PropTypes.func, }; -/* istanbul ignore next */ -Popover.defaultProps = { - inverted: false, - visible: false, - skin: 'neutral', - placement: 'top', - onClose: () => {}, -}; - export default Popover; diff --git a/components/Popover/sub-components/Content.jsx b/components/Popover/sub-components/Content.jsx index e03cbd6d3..8a0cb3b2b 100644 --- a/components/Popover/sub-components/Content.jsx +++ b/components/Popover/sub-components/Content.jsx @@ -117,12 +117,20 @@ const CloseButton = styled(Button.Icon).attrs({ const PopoverChildren = styled.div``; const Content = ({ - placement, + placement = 'top', children, - onPopoverClose, - theme, - skin, - inverted, + onPopoverClose = () => {}, + theme = { + colors, + spacing, + breakpoints, + components: { + popover: components.popover, + button: components.button, + }, + }, + skin = 'neutral', + inverted = false, ...rest }) => ( {}, - skin: 'neutral', - theme: { - colors, - spacing, - breakpoints, - components: { - popover: components.popover, - button: components.button, - }, - }, -}; - export default Content; diff --git a/components/ProgressBar/ProgressBar.jsx b/components/ProgressBar/ProgressBar.jsx index 06c38f1b0..6473986f7 100644 --- a/components/ProgressBar/ProgressBar.jsx +++ b/components/ProgressBar/ProgressBar.jsx @@ -49,24 +49,28 @@ const ProgressLabel = styled.span` ProgressLabel.displayName = 'ProgressLabel'; -const ProgressBar = (props) => { +const ProgressBar = ({ + width = '250px', + height = '8px', + progressText = null, + progressPercent = 0, + label = '%', + skin = 'primary', + theme = { + components: { + progressBar: components.progressBar, + }, + }, +}) => { const { - width, - height, - progressText, - progressPercent, - label, - skin, - theme: { - components: { - progressBar: { - skins: { - [skin]: { background, textColor }, - }, + components: { + progressBar: { + skins: { + [skin]: { background, textColor }, }, }, }, - } = props; + } = theme; const progressLabel = progressText === null ? progressPercent : progressText; @@ -88,20 +92,6 @@ const ProgressBar = (props) => { ); }; -ProgressBar.defaultProps = { - width: '250px', - height: '8px', - progressText: null, - progressPercent: 0, - skin: 'primary', - theme: { - components: { - progressBar: components.progressBar, - }, - }, - label: '%', -}; - ProgressBar.propTypes = { skin: PropTypes.oneOf(['neutral', 'primary', 'secondary']), theme: PropTypes.shape({ diff --git a/components/RadioGroup/Radio.jsx b/components/RadioGroup/Radio.jsx index 116dc9573..d846e1e0f 100644 --- a/components/RadioGroup/Radio.jsx +++ b/components/RadioGroup/Radio.jsx @@ -223,14 +223,14 @@ const RadioLabel = styled(Label)` `; const Radio = ({ - children, - label, - error, - disabled, - onChange, + disabled = false, + error = false, + children = undefined, + label = undefined, + onChange = () => {}, value, - theme, - required, + theme = { colors, spacing }, + required = false, ...rest }) => ( @@ -263,14 +263,4 @@ Radio.propTypes = { required: PropTypes.bool, }; -Radio.defaultProps = { - disabled: false, - error: false, - children: undefined, - label: undefined, - onChange: () => {}, - theme: { colors, spacing }, - required: false, -}; - export default Radio; diff --git a/components/RadioGroup/RadioGroup.jsx b/components/RadioGroup/RadioGroup.jsx index 20f6f2c9d..324e54d29 100644 --- a/components/RadioGroup/RadioGroup.jsx +++ b/components/RadioGroup/RadioGroup.jsx @@ -14,17 +14,17 @@ const Group = styled(FieldGroup).attrs({ `; const RadioGroup = ({ - type, - size, - children, - error, - inline, + type = 'radio', + size = 'medium', + children = undefined, + error = undefined, + inline = false, name, - onChange, - options, - defaultValue, - theme, - required, + onChange = () => {}, + options = [], + defaultValue = undefined, + theme = { colors, spacing }, + required = false, ...rest }) => { const commonProps = { @@ -93,20 +93,4 @@ RadioGroup.propTypes = { required: PropTypes.bool, }; -/** - * Group for Radio components. - */ -RadioGroup.defaultProps = { - type: 'radio', - size: 'medium', - children: undefined, - error: undefined, - inline: false, - onChange: () => {}, - options: [], - defaultValue: undefined, - theme: { colors, spacing }, - required: false, -}; - export default RadioGroup; diff --git a/components/RangeSlider/RangeSlider.jsx b/components/RangeSlider/RangeSlider.jsx index 198b4769a..fd39bff9f 100644 --- a/components/RangeSlider/RangeSlider.jsx +++ b/components/RangeSlider/RangeSlider.jsx @@ -21,24 +21,26 @@ const SliderWrapper = styled.div` `} `; -const RangeSlider = (props) => { - const { - 'aria-labelledby': ariaLabelledby, - defaultValue, - disabled, - marks, - max, - min, - onChange, - onChangeCommitted, - step, - theme, - tipFormatter, - track, - value, - valueLabelDisplay, - } = props; - +const RangeSlider = ({ + 'aria-labelledby': ariaLabelledby = undefined, + defaultValue = 30, + disabled = false, + marks = undefined, + max = 100, + min = 0, + onChange = () => {}, + onChangeCommitted = () => {}, + step = 1, + theme = { + spacing, + colors, + baseFontSize: defaultBaseFontSize, + }, + tipFormatter = (value) => value.toString(), + track = 'normal', + value = undefined, + valueLabelDisplay = 'auto', +}) => { const { colors: { neutral, primary }, spacing: { xxsmall, xsmall, small }, @@ -165,27 +167,6 @@ const RangeSlider = (props) => { }; SliderWrapper.displayName = 'RangeSliderWrapper'; -/* istanbul ignore next */ -RangeSlider.defaultProps = { - step: 1, - max: 100, - min: 0, - value: undefined, - defaultValue: 30, - marks: undefined, - disabled: false, - onChange: () => {}, - onChangeCommitted: () => {}, - tipFormatter: (value) => value.toString(), - track: 'normal', - 'aria-labelledby': undefined, - valueLabelDisplay: 'auto', - theme: { - spacing, - colors, - baseFontSize: defaultBaseFontSize, - }, -}; RangeSlider.propTypes = { /** The number that the slider will use as interval of each value */ diff --git a/components/Score/Score.jsx b/components/Score/Score.jsx index dc2bf33c5..531732983 100644 --- a/components/Score/Score.jsx +++ b/components/Score/Score.jsx @@ -91,7 +91,17 @@ const formatInPercentage = (number) => maximumFractionDigits: 2, }); -const Score = ({ percentage, round, text, skin, theme }) => { +const Score = ({ + percentage = 0, + round = true, + text = 'compatível', + skin = 'primary', + theme = { + colors, + baseFontSize: defaultBaseFontSize, + spacing: defaultSpacing, + }, +}) => { const [compatibilityPercentage, setCompatibilityPercentage] = useState( formatInPercentage(0), ); @@ -143,16 +153,4 @@ Score.propTypes = { }), }; -Score.defaultProps = { - percentage: 0, - text: 'compatível', - round: true, - skin: 'primary', - theme: { - colors, - baseFontSize: defaultBaseFontSize, - spacing: defaultSpacing, - }, -}; - export default Score; diff --git a/components/SegmentedControl/SegmentedButton.jsx b/components/SegmentedControl/SegmentedButton.jsx index 73f2179ce..594ed14c4 100644 --- a/components/SegmentedControl/SegmentedButton.jsx +++ b/components/SegmentedControl/SegmentedButton.jsx @@ -26,10 +26,10 @@ const a11yCheckedIndex = (checked) => const SegmentedButton = ({ label, value, - checked, + checked = undefined, name, - onChange, - icon, + onChange = () => {}, + icon = undefined, darkMode, }) => { const ID = uniqId(); @@ -56,12 +56,6 @@ const SegmentedButton = ({ ); }; -SegmentedButton.defaultProps = { - checked: undefined, - icon: undefined, - onChange: () => {}, -}; - SegmentedButton.propTypes = { name: PropTypes.string.isRequired, icon: PropTypes.string, diff --git a/components/SegmentedControl/SegmentedControl.jsx b/components/SegmentedControl/SegmentedControl.jsx index 37d6a71dc..3c34dc83a 100644 --- a/components/SegmentedControl/SegmentedControl.jsx +++ b/components/SegmentedControl/SegmentedControl.jsx @@ -42,7 +42,16 @@ const SegmentedWrapper = styled.div` } `; -const SegmentedControl = ({ items, name, onChange, theme, darkMode }) => ( +const SegmentedControl = ({ + items, + name = 'segmented-control', + onChange = () => {}, + theme = { + spacing, + colors, + }, + darkMode = false, +}) => ( @@ -57,16 +66,6 @@ const SegmentedControl = ({ items, name, onChange, theme, darkMode }) => ( ); -SegmentedControl.defaultProps = { - name: 'segmented-control', - onChange: () => {}, - theme: { - spacing, - colors, - }, - darkMode: false, -}; - SegmentedControl.propTypes = { /** this prop receives a array of object with all the content */ items: PropTypes.arrayOf( diff --git a/components/Skeleton/Skeleton.jsx b/components/Skeleton/Skeleton.jsx index 2da4d20a9..98d2d7464 100644 --- a/components/Skeleton/Skeleton.jsx +++ b/components/Skeleton/Skeleton.jsx @@ -2,34 +2,78 @@ import PropTypes from 'prop-types'; import { theme as defaultTheme } from '../shared'; import { Circle, Text, Button, Tag, Rect } from './sub-components'; -const Skeleton = ({ type, ...props }) => { +const Skeleton = ({ + type = 'rect', + as = 'div', + width = '100%', + height = '14px', + size = 'medium', + theme = defaultTheme, + ...props +}) => { switch (type) { case 'circle': - return ; + return ( + + ); case 'text': - return ; + return ( + + ); case 'button': - return