@react-ui-org/react-ui 0.42.0 → 0.44.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "keywords": [
     "react",
     "ui",
@@ -33,69 +33,69 @@
     "npm": ">=6.14.8"
   },
   "dependencies": {
-    "@nejcm/docz-theme-extended": "^2.0.14",
-    "docz": "^2.3.1",
-    "gatsby-plugin-sass": "^3.2.0",
-    "normalize.css": "^8.0.1",
-    "prism-react-renderer": "^1.2.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-keyed-flatten-children": "^1.3.0"
+    "normalize.css": "^8.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-transform-spread": "7.13.0",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/register": "^7.13.16",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-transform-spread": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/register": "^7.16.0",
+    "@nejcm/docz-theme-extended": "^2.0.14",
+    "@testing-library/jest-dom": "^5.15.0",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@visionappscz/eslint-config-visionapps": "^1.5.0",
     "@visionappscz/stylelint-config-visionapps": "^2.0.1",
     "@visionappscz/stylelint-config-visionapps-order": "^2.1.0",
-    "autoprefixer": "^10.2.6",
+    "autoprefixer": "^10.4.0",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.0.2",
-    "babel-loader": "^8.2.2",
-    "concurrently": "^6.2.0",
-    "core-js": "^3.14.0",
-    "css-loader": "^5.2.6",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
-    "eslint": "^7.28.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "babel-jest": "^27.3.1",
+    "babel-loader": "^8.2.3",
+    "concurrently": "^6.4.0",
+    "core-js": "^3.19.1",
+    "css-loader": "^5.2.7",
+    "docz": "^2.3.3-alpha.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^19.0.0",
     "eslint-loader": "^4.0.2",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-markdown": "^2.2.0",
-    "eslint-plugin-mdx": "^1.13.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-markdown": "^2.2.1",
+    "eslint-plugin-mdx": "^1.16.0",
+    "eslint-plugin-react": "^7.27.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "gatsby-plugin-sass": "^3.2.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.4",
-    "markdownlint-cli2": "~0.1.3",
-    "nodemon": "^2.0.7",
-    "postcss": "^8.3.0",
+    "jest": "^27.3.1",
+    "markdownlint-cli2": "~0.3.2",
+    "nodemon": "^2.0.15",
+    "postcss": "^8.3.11",
     "postcss-loader": "^4.3.0",
+    "prism-react-renderer": "^1.2.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "sass": "^1.34.1",
+    "sass": "^1.43.4",
     "sass-loader": "^10.2.0",
-    "sinon": "^11.1.1",
+    "sinon": "^12.0.1",
     "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
-    "stylelint-config-css-modules": "^2.2.0",
-    "stylelint-order": "^4.1.0",
-    "stylelint-webpack-plugin": "^2.1.1",
+    "stylelint-config-css-modules": "^2.3.0",
+    "stylelint-order": "^5.0.0",
+    "stylelint-webpack-plugin": "^3.1.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-visualizer-plugin": "^0.1.11"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "resolutions": {
     "@babel/plugin-transform-spread": "7.12.1"
@@ -107,12 +107,13 @@
     "docs:serve": "rimraf .docz && npm run docs:build && docz serve",
     "lib:build": "concurrently \"webpack --mode development --config webpack.config.js\" \"webpack --mode production --config webpack.config.js\"",
     "lib:jest": "jest",
-    "lib:test": "stylelint \"src/lib/**/*.scss\" --config stylelint.config.js && eslint src/lib --ext js,jsx && npm run lib:jest",
+    "lib:test:js": "concurrently \"eslint --ext js,jsx src/lib tests/propTests\" \"npm run lib:jest\"",
+    "lib:test:css": "stylelint \"src/lib/**/*.scss\" --config stylelint.config.js",
     "markdown:lint": "markdownlint-cli2 \"**/*.md?(x)\" \"#.docz\" \"#dist\" \"#node_modules\" && eslint \"**/*.md?(x)\"",
     "markdown:watch": "nodemon --watch . --ext md,mdx --exec \"npm run markdown:lint\"",
     "prepublishOnly": "npm run lib:build",
     "start": "concurrently --kill-others \"npm run watch\" \"npm run docs:dev\"",
-    "test": "concurrently \"npm run markdown:lint\" \"npm run lib:test\"",
+    "test": "concurrently \"npm run markdown:lint\" \"npm run lib:test:js\" \"npm run lib:test:css\"",
     "watch": "npm run markdown:watch"
   }
 }

package/src/lib/components/{ui/Alert → Alert}/Alert.jsx

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import getRootColorClassName from '../../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../../provider';
+import getRootColorClassName from '../../helpers/getRootColorClassName';
+import { withProviderContext } from '../../provider';
 import styles from './Alert.scss';
 
 export const Alert = ({
   children,
-  closeHandler,
   color,
   icon,
   id,
+  onClose,
   translations,
 }) => (
   <div
@@ -31,13 +31,13 @@ export const Alert = ({
     >
       {children}
     </div>
-    {closeHandler && (
+    {onClose && (
       <button
         type="button"
         {...(id && { id: `${id}__close` })}
         className={styles.close}
-        onClick={() => closeHandler()}
-        onKeyPress={() => closeHandler()}
+        onClick={() => onClose()}
+        onKeyPress={() => onClose()}
         tabIndex="0"
         title={translations.close}
       >
@@ -48,10 +48,10 @@ export const Alert = ({
 );
 
 Alert.defaultProps = {
-  closeHandler: null,
   color: 'note',
   icon: null,
   id: undefined,
+  onClose: null,
 };
 
 Alert.propTypes = {
@@ -59,11 +59,6 @@ Alert.propTypes = {
    * Alert body.
    */
   children: PropTypes.node.isRequired,
-  /**
-   * Function to call when the close button is clicked. If not provided, close buttons will be
-   * hidden.
-   */
-  closeHandler: PropTypes.func,
   /**
    * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the alert.
    */
@@ -75,10 +70,18 @@ Alert.propTypes = {
    */
   icon: PropTypes.node,
   /**
-   * ID of the root HTML element. It also serves as a prefix for alert body and and close button
-   * elements: `<ID>__content` and `<ID>__close`.
+   * ID of the root HTML element.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__close`
+   * * `<ID>__content`
    */
   id: PropTypes.string,
+  /**
+   * Function to call when the close button is clicked. If not provided, close buttons will be
+   * hidden.
+   */
+  onClose: PropTypes.func,
   /**
    * Translations required by the component.
    */

package/src/lib/components/{ui/Alert → Alert}/Alert.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use '../../../styles/theme/typography';
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/reset';
+@use '../../styles/theme/typography';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/reset';
 @use 'settings';
 @use 'theme';
 @use 'tools';

package/src/lib/components/{ui/Alert → Alert}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Alert
-menu: 'UI'
-route: /components/ui/alert
+menu: 'Miscellaneous'
+route: /components/alert
 ---
 
 # Alert
@@ -10,8 +10,8 @@ import {
   Playground,
   Props,
 } from 'docz'
-import Icon from '../../../../docs/_components/Icon'
-import Placeholder from '../../../../docs/_components/Placeholder'
+import Icon from '../../../docs/_components/Icon'
+import Placeholder from '../../../docs/_components/Placeholder'
 import Button from '../Button'
 import {
   AlertWithContext as Alert,
@@ -190,14 +190,14 @@ click on the close button:
           <Alert
             color="success"
             icon={<Icon icon="success" />}
-            closeHandler={() => setIsAlertVisible(false)}
+            onClose={() => setIsAlertVisible(false)}
           >
             <strong>Success:</strong> Settings have been successfully saved.
           </Alert>
         ) : (
           <Button
-            clickHandler={() => setIsAlertVisible(true)}
             label="Bring the alert back!"
+            onClick={() => setIsAlertVisible(true)}
           />
         )}
       </>

package/src/lib/components/{ui/Alert → Alert}/_settings.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../../../styles/theme/typography';
+@use '../../styles/theme/typography';
 @use 'theme';
 
 $font-size: map.get(typography.$size-values, 0);

package/src/lib/components/{ui/Badge → Badge}/Badge.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import getRootColorClassName from '../../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../../provider';
+import getRootColorClassName from '../../helpers/getRootColorClassName';
+import { withProviderContext } from '../../provider';
 import styles from './Badge.scss';
 
 export const Badge = ({

package/src/lib/components/{ui/Badge → Badge}/Badge.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '../../../styles/theme/borders';
-@use '../../../styles/theme/colors';
-@use '../../../styles/theme/typography';
+@use '../../styles/theme/borders';
+@use '../../styles/theme/colors';
+@use '../../styles/theme/typography';
 
 $_badge-size: 1.25rem;
 

package/src/lib/components/{ui/Badge → Badge}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Badge
-menu: 'UI'
-route: /components/ui/badge
+menu: 'Miscellaneous'
+route: /components/badge
 ---
 
 # Badge
@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import Placeholder from '../../../../docs/_components/Placeholder'
+import Placeholder from '../../../docs/_components/Placeholder'
 import { Badge } from './Badge'
 
 ## Basic Usage

package/src/lib/components/Button/Button.jsx

@@ -0,0 +1,198 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import getRootSizeClassName from '../../helpers/getRootSizeClassName';
+import getRootColorClassName from '../../helpers/getRootColorClassName';
+import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
+import { withProviderContext } from '../../provider';
+import transferProps from '../../utils/transferProps';
+import withForwardedRef from '../withForwardedRef';
+import { ButtonGroupContext } from '../ButtonGroup';
+import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
+import getRootPriorityClassName from './helpers/getRootPriorityClassName';
+import styles from './Button.scss';
+
+export const Button = ({
+  afterLabel,
+  beforeLabel,
+  block,
+  disabled,
+  endCorner,
+  feedbackIcon,
+  forwardedRef,
+  id,
+  label,
+  labelVisibility,
+  priority,
+  size,
+  startCorner,
+  type,
+  color,
+  ...restProps
+}) => {
+  const context = useContext(ButtonGroupContext);
+
+  return (
+    /* No worries, `type` is always assigned correctly through props. */
+    /* eslint-disable react/button-has-type */
+    <button
+      {...transferProps(restProps)}
+      className={[
+        styles.root,
+        getRootPriorityClassName(
+          resolveContextOrProp(context && context.priority, priority),
+          styles,
+        ),
+        getRootColorClassName(color, styles),
+        getRootSizeClassName(
+          resolveContextOrProp(context && context.size, size),
+          styles,
+        ),
+        getRootLabelVisibilityClassName(labelVisibility, styles),
+        resolveContextOrProp(context && context.block, block) ? styles.rootBlock : '',
+        context ? styles.rootGrouped : '',
+        feedbackIcon ? styles.hasRootFeedback : '',
+      ].join(' ')}
+      disabled={resolveContextOrProp(context && context.disabled, disabled) || !!feedbackIcon}
+      id={id}
+      ref={forwardedRef}
+      type={type}
+    >
+      {startCorner && (
+        <span className={styles.startCorner}>
+          {startCorner}
+        </span>
+      )}
+      {beforeLabel && (
+        <span className={styles.beforeLabel}>
+          {beforeLabel}
+        </span>
+      )}
+      <span
+        className={styles.label}
+        {...(id && { id: `${id}__labelText` })}
+      >
+        {label}
+      </span>
+      {afterLabel && (
+        <span className={styles.afterLabel}>
+          {afterLabel}
+        </span>
+      )}
+      {endCorner && (
+        <span className={styles.endCorner}>
+          {endCorner}
+        </span>
+      )}
+      {feedbackIcon && (
+        <span className={styles.feedbackIcon}>
+          {feedbackIcon}
+        </span>
+      )}
+    </button>
+    /* eslint-enable react/button-has-type */
+  );
+};
+
+Button.defaultProps = {
+  afterLabel: null,
+  beforeLabel: null,
+  block: false,
+  color: 'primary',
+  disabled: false,
+  endCorner: null,
+  feedbackIcon: null,
+  forwardedRef: undefined,
+  id: undefined,
+  labelVisibility: 'xs',
+  priority: 'filled',
+  size: 'medium',
+  startCorner: null,
+  type: 'button',
+};
+
+Button.propTypes = {
+  /**
+   * Element to be displayed after label, eg. an icon.
+   */
+  afterLabel: PropTypes.node,
+  /**
+   * Element to be displayed before label, eg. an icon.
+   */
+  beforeLabel: PropTypes.node,
+  /**
+   * If `true`, the button will span the full width of its parent.
+   *
+   * Ignored if the component is rendered within `ButtonGroup` component
+   * as the value is inherited in such case.
+   */
+  block: PropTypes.bool,
+  /**
+   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the button.
+   */
+  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
+  /**
+   * If `true`, the button will be disabled.
+   *
+   * Ignored if the component is rendered within `ButtonGroup` component
+   * as the value is inherited in such case.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Element to be displayed in the top right corner.
+   */
+  endCorner: PropTypes.node,
+  /**
+   * Element to be displayed as a feedback icon on top of button label. When defined, it implies the
+   * button is in feedback state.
+   */
+  feedbackIcon: PropTypes.node,
+  /**
+   * Reference forwarded to the `button` element.
+   */
+  forwardedRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  /**
+   * ID of the root HTML element.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__labelText`
+   */
+  id: PropTypes.string,
+  /**
+   * Button label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Defines minimum breakpoint from which the button label will be visible.
+   */
+  labelVisibility: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'none']),
+  /**
+   * Visual priority to highlight or suppress the button.
+   *
+   * Ignored if the component is rendered within `ButtonGroup` component
+   * as the value is inherited in such case.
+   */
+  priority: PropTypes.oneOf(['filled', 'outline', 'flat']),
+  /**
+   * Size of the button.
+   *
+   * Ignored if the component is rendered within `ButtonGroup` component
+   * as the value is inherited in such case.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Element to be displayed in the top left corner.
+   */
+  startCorner: PropTypes.node,
+  /**
+   * Set the HTML `type` attribute of the `button` element.
+   */
+  type: PropTypes.oneOf(['button', 'submit']),
+};
+
+export const ButtonWithContext = withForwardedRef(withProviderContext(Button, 'Button'));
+
+export default ButtonWithContext;