fix: Overall Proptypes, linter error, circular dependencies, etc.

.eslintrc.json

@@ -44,6 +44,8 @@
     ],
     "import/no-names-as-default": "off",
     "import/prefer-default-export": "warn",
-    "no-param-reassign": "off"
+    "no-param-reassign": "off",
+    "radix": "off",
+    "no-unused-vars": "warn"
   }
 }

merged_tokens.json

@@ -2348,7 +2348,7 @@
             "y": "0",
             "blur": "4",
             "spread": "0",
-            "color": "rgba({button.background.color.primary.hover}, 0.80)",
+            "color": "{button.background.color.primary.hover}",
             "type": "dropShadow"
           },
           "type": "boxShadow"
@@ -3174,7 +3174,7 @@
             "y": "0",
             "blur": "4",
             "spread": "0",
-            "color": "rgba({buttonIcon.background.color.primary.hover}, 0.80)",
+            "color": "{buttonAction.background.color.primary.hover--reverse-transparent}",
             "type": "dropShadow"
           },
           "type": "boxShadow"

packages/components/src/ThemeProvider.js

@@ -32,26 +32,27 @@ export const BUBBLES_THEME = {
 
 const THEME_PROVIDER_PROP_TYPES = {
   theme: PropTypes.object,
+  children: PropTypes.node,
 };
 const THEME_PROVIDER_DEFAULT_PROPS = {
   theme: BUBBLES_THEME,
 };
 
-const parseTheme = (theme) => {
-  if (isEmpty(theme.other)) return theme;
-  recursiveParse(theme.other);
-  return theme;
-};
-
 const recursiveParse = (object) => {
   if (!isObject(object)) return;
-  for (const property in object) {
+  Object.keys(object).forEach((property) => {
     if (object[property].value) {
       object[property] = object[property].value;
     } else {
       recursiveParse(object[property]);
     }
-  }
+  });
+};
+
+const parseTheme = (theme) => {
+  if (isEmpty(theme.other)) return theme;
+  recursiveParse(theme.other);
+  return theme;
 };
 
 const ThemeProvider = ({ children, theme }) => {

packages/components/src/dates/Calendar/Calendar.js

@@ -83,6 +83,7 @@ export const CALENDAR_PROP_TYPES = {
   firstDayOfWeek: PropTypes.oneOf(CALENDAR_FIRST_DAYS),
   minDate: PropTypes.instanceOf(Date),
   maxDate: PropTypes.instanceOf(Date),
+  size: PropTypes.string,
 };
 
 const Calendar = forwardRef(({ range, size, locale, ...props }, ref) => {
@@ -105,6 +106,7 @@ const Calendar = forwardRef(({ range, size, locale, ...props }, ref) => {
   return <Comp {...props} locale={currentLocale} ref={ref} classNames={classes} />;
 });
 
+Calendar.displayName = 'Calendar';
 Calendar.defaultProps = CALENDAR_DEFAULT_PROPS;
 Calendar.propTypes = CALENDAR_PROP_TYPES;
 

packages/components/src/feedback/Alert/Alert.js

@@ -10,7 +10,8 @@ import {
 } from '@bubbles-ui/icons/solid';
 import { RemoveIcon } from '@bubbles-ui/icons/outline';
 import { AlertStyles } from './Alert.styles';
-import { Button, ActionButton } from '../../form';
+import { Button } from '../../form/Button';
+import { ActionButton } from '../../form/ActionButton';
 
 export const ALERT_SEVERITIES = ['info', 'success', 'warning', 'error'];
 export const ALERT_VARIANTS = ['inline', 'block'];
@@ -38,9 +39,9 @@ const Alert = ({
   severity = ALERT_SEVERITIES.includes(severity) ? severity : 'info';
   const isCloseable = useMemo(
     () => closeable && !isNil(closeable) && closeable !== '',
-    [closeable]
+    [closeable],
   );
-  const { classes, cx } = AlertStyles({ variant, severity }, { name: 'Alert' });
+  const { classes } = AlertStyles({ variant, severity }, { name: 'Alert' });
 
   return (
     <MantineAlert
@@ -75,6 +76,7 @@ const Alert = ({
   );
 };
 
+Alert.displayName = 'Alert';
 Alert.defaultProps = {
   variant: 'inline',
   severity: 'info',
@@ -99,6 +101,7 @@ Alert.propTypes = {
   onClose: PropTypes.func,
   /** Controls if Alert uses aria role */
   useAria: PropTypes.bool,
+  children: PropTypes.node,
 };
 
 export { Alert };

packages/components/src/feedback/Loader/Loader.js

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { isString } from 'lodash';
-import { Loader as MantineLoader, Box } from '@mantine/core';
+import { Loader as MantineLoader } from '@mantine/core';
 import { ContextContainer, CONTEXT_CONTAINER_PROP_TYPES } from '../../layout';
 import { Text } from '../../typography';
-import { LoaderStyles } from './Loader.styles';
 
 export const LOADER_LABEL_POSITIONS = ['right', 'bottom'];
 

packages/components/src/feedback/ScoreFeedback/ScoreFeedback.js

@@ -4,12 +4,12 @@ import { Calification } from '../../informative';
 import { ScoreFeedbackStyles } from './ScoreFeedback.styles';
 import { SCORE_FEEDBACK_DEFAULT_PROPS, SCORE_FEEDBACK_PROP_TYPES } from './ScoreFeedback.constants';
 
-const ScoreFeedback = ({ calification, children, styles, className, useAria, ...props }) => {
+const ScoreFeedback = ({ calification, children, styles, className, useAria }) => {
   const { classes, cx } = ScoreFeedbackStyles({ styles }, { name: 'ScoreFeedback' });
 
   return (
     // Role is left empty, it should be 'comment' but the role is proposed for WAI-ARIA 1.3, which is still being drafted.
-    <Box className={cx(classes.root, className)} role={useAria ? '' : ''}>
+    <Box className={cx(classes.root, className)} role={useAria ? 'comment' : ''}>
       <Calification
         {...calification}
         inverted={true}

packages/components/src/feedback/ScoreFronstage/ScoreFronstage.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { Box } from '../../layout';
+import { Box } from '../../layout/Box';
+import { Avatar } from '../../informative/Avatar';
+import { ImageLoader } from '../../misc/ImageLoader';
+import { TextClamp } from '../../typography/TextClamp';
 import { ScoreFronstageStyles } from './ScoreFronstage.styles';
 import {
   SCORE_FRONSTAGE_DEFAULT_PROPS,
   SCORE_FRONSTAGE_PROP_TYPES,
 } from './ScoreFronstage.constants';
 import { Average } from './Average';
 import { Item } from './Item';
-import { Avatar } from '../../informative';
-import { ImageLoader } from '../../misc';
-import { TextClamp } from '../../typography';
 
 const ScoreFronstage = ({
   title,
@@ -24,7 +24,7 @@ const ScoreFronstage = ({
   locale,
   ...props
 }) => {
-  const { classes, cx } = ScoreFronstageStyles({}, { name: 'ScoreFronstage' });
+  const { classes } = ScoreFronstageStyles({}, { name: 'ScoreFronstage' });
 
   return (
     <Box className={classes.root} {...props}>

packages/components/src/form/FileUpload/FileUpload.js

@@ -2,14 +2,16 @@ import React, { useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Group, Text } from '@mantine/core';
 import { Dropzone as MantineDropzone } from '@mantine/dropzone';
-import { FileUploadStyles } from './FileUpload.styles';
-import { Stack, Box } from '../../layout/';
-import { FileItemDisplay } from '../../informative/FileItemDisplay';
-import { Alert } from '../../feedback/Alert';
-import { InputWrapper, INPUT_WRAPPER_PROP_TYPES, ActionButton, Button } from '../../form';
 import { DeleteBinIcon } from '@bubbles-ui/icons/solid/';
 import { SynchronizeArrowIcon } from '@bubbles-ui/icons/outline';
 import { isEmpty, isFunction } from 'lodash';
+import { FileUploadStyles } from './FileUpload.styles';
+import { Stack, Box } from '../../layout';
+import { FileItemDisplay } from '../../informative/FileItemDisplay';
+import { Alert } from '../../feedback/Alert';
+import { InputWrapper, INPUT_WRAPPER_PROP_TYPES } from '../InputWrapper';
+import { ActionButton } from '../ActionButton';
+import { Button } from '../Button';
 
 export const FILE_UPLOAD_DEFAULT_PROPS = {
   disabled: false,
@@ -69,14 +71,14 @@ const FileUpload = ({
 
   const onDropHandler = (acceptedFiles) => {
     const newFiles = [...files, ...acceptedFiles];
-    isFunction(onChange) && onChange(newFiles.length === 1 ? newFiles[0] : newFiles);
+    if (isFunction(onChange)) onChange(newFiles.length === 1 ? newFiles[0] : newFiles);
     setFiles(newFiles);
     setError(false);
   };
 
   const removeFile = (index) => {
     const newFiles = files.filter((file, fileIndex) => fileIndex !== index);
-    isFunction(onChange) && onChange(newFiles.length === 1 ? newFiles[0] : newFiles);
+    if (isFunction(onChange)) onChange(newFiles.length === 1 ? newFiles[0] : newFiles);
     setFiles(newFiles);
   };
 
@@ -94,7 +96,7 @@ const FileUpload = ({
 
   const { classes, cx } = FileUploadStyles(
     { disabled, single, files, hasError },
-    { name: 'FileUpload' }
+    { name: 'FileUpload' },
   );
   return (
     <Box className={classes.wrapper}>

packages/components/src/form/FileUpload/index.js

@@ -1,3 +1 @@
-import { FileUpload } from './FileUpload';
-
-export { FileUpload };
+export * from './FileUpload';

packages/components/src/form/ImagePreviewInput/ImagePreviewInput.js

@@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { isFunction, isString, isNil } from 'lodash';
 import { CloudUploadIcon, UndoIcon } from '@bubbles-ui/icons/outline/';
-import { Box, Stack } from '../../layout';
-import { Button } from '../../form';
+import { Box } from '../../layout/Box';
+import { Stack } from '../../layout/Stack';
+import { Button } from '../Button';
 import { ImageLoader } from '../../misc/ImageLoader';
 import { ImagePreviewInputStyles } from './ImagePreviewInput.styles';
 
@@ -24,6 +25,9 @@ export const IMAGE_PREVIEW_INPUT_PROP_TYPES = {
   previewStyle: PropTypes.object,
   control: PropTypes.element,
   onChange: PropTypes.func,
+  readonly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  useAria: PropTypes.bool,
 };
 
 const ImagePreviewInput = ({
@@ -36,7 +40,6 @@ const ImagePreviewInput = ({
   readonly,
   disabled,
   useAria,
-  ...props
 }) => {
   const [imagePreview, setImagePreview] = useState(previewURL);
   const [imageValue, setImageValue] = useState(value);
@@ -57,20 +60,20 @@ const ImagePreviewInput = ({
   }, [value]);
 
   const resetImage = () => {
-    isFunction(onChange) && onChange(null);
+    if (isFunction(onChange)) onChange(null);
     setImagePreview(null);
     setImageValue(null);
   };
 
   const openFileBrowser = () => {
-    let input = document.createElement('input');
+    const input = document.createElement('input');
     input.type = 'file';
     input.accept = 'image/*';
     input.onchange = (e) => {
       const file = e.target.files[0];
       file.path = file.name;
       setImageValue(file);
-      isFunction(onChange) && onChange(file);
+      if (isFunction(onChange)) onChange(file);
     };
     input.click();
   };

packages/components/src/form/InputDescription/InputDescription.js

@@ -1,15 +1,15 @@
 import React from 'react';
 import { Text } from '@mantine/core';
+import { AlertInformationCircleIcon } from '@bubbles-ui/icons/solid';
+import { Box } from '../../layout/Box';
 import {
   INPUT_DESCRIPTION_DEFAULT_PROPS,
   INPUT_DESCRIPTION_PROP_TYPES,
 } from './InputDescription.constants';
 import { InputDescriptionStyles } from './InputDescription.styles';
-import { AlertInformationCircleIcon } from '@bubbles-ui/icons/solid';
-import { Box } from '../../layout';
 
-const InputDescription = ({ message, withIcon, ...props }) => {
-  const { classes, cx } = InputDescriptionStyles({ withIcon });
+const InputDescription = ({ message, withIcon }) => {
+  const { classes } = InputDescriptionStyles({ withIcon });
 
   return (
     <Box className={classes.container}>

packages/components/src/form/InputDescription/index.js

@@ -1,3 +1 @@
-import { InputDescription } from './InputDescription';
-
-export { InputDescription };
+export * from './InputDescription';

packages/components/src/form/InputLabel/InputLabel.js

@@ -1,13 +1,13 @@
 import React from 'react';
+import { isEmpty } from 'lodash';
+import { Box } from '../../layout/Box';
+import { Text } from '../../typography/Text';
+import { InputDescription } from '../InputDescription';
 import { InputLabelStyles } from './InputLabel.styles';
 import { INPUT_LABEL_DEFAULT_PROPS, INPUT_LABEL_PROP_TYPES } from './InputLabel.constants';
-import { Text } from '../../typography';
-import { InputDescription } from '../InputDescription';
-import { isEmpty } from 'lodash';
-import { Box } from '../../layout';
 
 const InputLabel = ({ label, description, withDescriptionIcon, required, ...props }) => {
-  const { classes, cx } = InputLabelStyles({}, { name: 'InputLabel' });
+  const { classes } = InputLabelStyles({}, { name: 'InputLabel' });
 
   return (
     <Box className={classes.container}>

packages/components/src/form/InputWrapper/InputWrapper.js

@@ -4,14 +4,14 @@ import { Box } from '../../layout/Box';
 import { Stack } from '../../layout/Stack';
 import { InputError } from '../InputError';
 import { InputHelp } from '../InputHelp';
+import { InputLabel } from '../InputLabel';
 import { InputWrapperStyles } from './InputWrapper.styles';
 import {
   INPUT_WRAPPER_DEFAULT_PROPS,
   INPUT_WRAPPER_PROP_TYPES,
   INPUT_WRAPPER_ORIENTATIONS,
   INPUT_WRAPPER_SIZES,
 } from './InputWrapper.constants';
-import { InputLabel } from '../InputLabel';
 
 const InputWrapper = ({
   orientation: orientationProp,