@react-ui-org/react-ui 0.44.1 → 0.47.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.44.1",
+  "version": "0.47.0",
   "keywords": [
     "react",
     "ui",
@@ -29,8 +29,8 @@
     "url": "https://github.com/react-ui-org/react-ui"
   },
   "engines": {
-    "node": ">=14.15.1",
-    "npm": ">=6.14.8"
+    "node": ">=16.14.0 <17",
+    "npm": ">=8.3.0"
   },
   "dependencies": {
     "normalize.css": "^8.0.1"
@@ -44,14 +44,14 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/register": "^7.16.0",
+    "@floating-ui/react-dom": "^0.7.1",
     "@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.4.0",
+    "@visionappscz/stylelint-config": "^3.0.0-rc1",
+    "autoprefixer": "^10.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
@@ -73,21 +73,19 @@
     "jest": "^27.3.1",
     "markdownlint-cli2": "~0.3.2",
     "nodemon": "^2.0.15",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.5",
     "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.43.4",
+    "sass": "^1.47.0",
     "sass-loader": "^10.2.0",
     "sinon": "^12.0.1",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-css-modules": "^2.3.0",
-    "stylelint-order": "^5.0.0",
-    "stylelint-webpack-plugin": "^3.1.0",
+    "stylelint": "^14.2.0",
+    "stylelint-webpack-plugin": "^2.3.2",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-visualizer-plugin": "^0.1.11"
@@ -108,7 +106,7 @@
     "lib:build": "concurrently \"webpack --mode development --config webpack.config.js\" \"webpack --mode production --config webpack.config.js\"",
     "lib:jest": "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",
+    "lib:test:css": "stylelint \"src/**/*.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",

package/src/lib/components/Alert/Alert.jsx

@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import getRootColorClassName from '../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../provider';
+import React, { useContext } from 'react';
+import {
+  RUIContext,
+  withGlobalProps,
+} from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.scss';
 
 export const Alert = ({
@@ -10,42 +14,45 @@ export const Alert = ({
   icon,
   id,
   onClose,
-  translations,
-}) => (
-  <div
-    className={[
-      styles.root,
-      getRootColorClassName(color, styles),
-    ].join(' ')}
-    id={id}
-    role="alert"
-  >
-    {icon && (
-      <div className={styles.icon}>
-        {icon}
-      </div>
-    )}
+}) => {
+  const { translations } = useContext(RUIContext);
+
+  return (
     <div
-      className={styles.message}
-      {...(id && { id: `${id}__content` })}
+      className={classNames(
+        styles.root,
+        getRootColorClassName(color, styles),
+      )}
+      id={id}
+      role="alert"
     >
-      {children}
-    </div>
-    {onClose && (
-      <button
-        type="button"
-        {...(id && { id: `${id}__close` })}
-        className={styles.close}
-        onClick={() => onClose()}
-        onKeyPress={() => onClose()}
-        tabIndex="0"
-        title={translations.close}
+      {icon && (
+        <div className={styles.icon}>
+          {icon}
+        </div>
+      )}
+      <div
+        className={styles.message}
+        {...(id && { id: `${id}__content` })}
       >
-        <span className={styles.closeSign}>×</span>
-      </button>
-    )}
-  </div>
-);
+        {children}
+      </div>
+      {onClose && (
+        <button
+          type="button"
+          {...(id && { id: `${id}__close` })}
+          className={styles.close}
+          onClick={() => onClose()}
+          onKeyPress={() => onClose()}
+          tabIndex="0"
+          title={translations.Alert.close}
+        >
+          <span className={styles.closeSign}>×</span>
+        </button>
+      )}
+    </div>
+  );
+};
 
 Alert.defaultProps = {
   color: 'note',
@@ -82,14 +89,8 @@ Alert.propTypes = {
    * hidden.
    */
   onClose: PropTypes.func,
-  /**
-   * Translations required by the component.
-   */
-  translations: PropTypes.shape({
-    close: PropTypes.string.isRequired,
-  }).isRequired,
 };
 
-export const AlertWithContext = withProviderContext(Alert, 'Alert');
+export const AlertWithGlobalProps = withGlobalProps(Alert, 'Alert');
 
-export default AlertWithContext;
+export default AlertWithGlobalProps;

package/src/lib/components/Alert/Alert.scss

@@ -1,106 +1,106 @@
-@use 'sass:map';
-@use '../../styles/theme/typography';
-@use '../../styles/tools/accessibility';
-@use '../../styles/tools/reset';
-@use 'settings';
-@use 'theme';
-@use 'tools';
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "settings";
+@use "theme";
+@use "tools";
 
 .root {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  color: var(--rui-local-color);
-  border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width;
-  border-style: solid;
-  border-color: var(--rui-local-foreground-color);
-  border-radius: theme.$border-radius;
-  background-color: var(--rui-local-background-color);
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    color: var(--rui-local-color);
+    border-width: theme.$border-width theme.$border-width theme.$border-width theme.$stripe-width;
+    border-style: solid;
+    border-color: var(--rui-local-foreground-color);
+    border-radius: theme.$border-radius;
+    background-color: var(--rui-local-background-color);
 }
 
 .icon,
 .message {
-  padding: theme.$padding;
+    padding: theme.$padding;
 }
 
 .close,
 .icon {
-  height: settings.$min-height;
-  color: var(--rui-local-foreground-color);
+    height: settings.$min-height;
+    color: var(--rui-local-foreground-color);
 }
 
 .icon {
-  display: flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  padding-right: 0;
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    padding-right: 0;
 }
 
 .message {
-  flex-grow: 1;
-  font-weight: theme.$font-weight;
-  font-size: settings.$font-size;
-  line-height: settings.$line-height;
+    flex-grow: 1;
+    font-weight: theme.$font-weight;
+    font-size: settings.$font-size;
+    line-height: settings.$line-height;
 }
 
 .message a,
 .message strong {
-  font-weight: theme.$emphasis-font-weight;
-  color: var(--rui-local-foreground-color);
+    font-weight: theme.$emphasis-font-weight;
+    color: var(--rui-local-foreground-color);
 }
 
 .close {
-  @include reset.button();
-  @include accessibility.min-tap-target();
+    @include reset.button();
+    @include accessibility.min-tap-target();
 
-  padding: theme.$padding;
-  font-size: map.get(typography.$size-values, 3);
-  line-height: 1;
+    padding: theme.$padding;
+    font-size: map.get(typography.$size-values, 3);
+    line-height: 1;
 }
 
 .closeSign {
-  position: relative;
-  top: -0.1em;
+    position: relative;
+    top: -0.1em;
 }
 
 .rootColorPrimary {
-  @include tools.color(primary);
+    @include tools.color(primary);
 }
 
 .rootColorSecondary {
-  @include tools.color(secondary);
+    @include tools.color(secondary);
 }
 
 .rootColorSuccess {
-  @include tools.color(success);
+    @include tools.color(success);
 }
 
 .rootColorWarning {
-  @include tools.color(warning);
+    @include tools.color(warning);
 }
 
 .rootColorDanger {
-  @include tools.color(danger);
+    @include tools.color(danger);
 }
 
 .rootColorHelp {
-  @include tools.color(help);
+    @include tools.color(help);
 }
 
 .rootColorInfo {
-  @include tools.color(info);
+    @include tools.color(info);
 }
 
 .rootColorNote {
-  @include tools.color(note);
+    @include tools.color(note);
 }
 
 .rootColorLight {
-  @include tools.color(light);
+    @include tools.color(light);
 }
 
 .rootColorDark {
-  @include tools.color(dark);
+    @include tools.color(dark);
 }

package/src/lib/components/Alert/README.mdx

@@ -13,10 +13,7 @@ import {
 import Icon from '../../../docs/_components/Icon'
 import Placeholder from '../../../docs/_components/Placeholder'
 import Button from '../Button'
-import {
-  AlertWithContext as Alert,
-  Alert as ParsableAlert,
-} from './Alert'
+import { Alert } from './Alert'
 
 Alert presents feedback or important information to users.
 
@@ -207,7 +204,7 @@ click on the close button:
 
 ## API
 
-<Props table of={ParsableAlert} />
+<Props table of={Alert} />
 
 ## Theming
 

package/src/lib/components/Alert/_settings.scss

@@ -1,7 +1,7 @@
-@use 'sass:map';
-@use '../../styles/theme/typography';
-@use 'theme';
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "theme";
 
 $font-size: map.get(typography.$size-values, 0);
-$line-height: 1.5;
+$line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});

package/src/lib/components/Alert/_theme.scss

@@ -6,54 +6,54 @@ $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight);
 $stripe-width: var(--rui-Alert__stripe__width);
 
 $colors: (
-  primary: (
-    color: var(--rui-Alert--primary__color),
-    foreground-color: var(--rui-Alert--primary__foreground-color),
-    background-color: var(--rui-Alert--primary__background-color),
-  ),
-  secondary: (
-    color: var(--rui-Alert--secondary__color),
-    foreground-color: var(--rui-Alert--secondary__foreground-color),
-    background-color: var(--rui-Alert--secondary__background-color),
-  ),
-  success: (
-    color: var(--rui-Alert--success__color),
-    foreground-color: var(--rui-Alert--success__foreground-color),
-    background-color: var(--rui-Alert--success__background-color),
-  ),
-  warning: (
-    color: var(--rui-Alert--warning__color),
-    foreground-color: var(--rui-Alert--warning__foreground-color),
-    background-color: var(--rui-Alert--warning__background-color),
-  ),
-  danger: (
-    color: var(--rui-Alert--danger__color),
-    foreground-color: var(--rui-Alert--danger__foreground-color),
-    background-color: var(--rui-Alert--danger__background-color),
-  ),
-  info: (
-    color: var(--rui-Alert--info__color),
-    foreground-color: var(--rui-Alert--info__foreground-color),
-    background-color: var(--rui-Alert--info__background-color),
-  ),
-  help: (
-    color: var(--rui-Alert--help__color),
-    foreground-color: var(--rui-Alert--help__foreground-color),
-    background-color: var(--rui-Alert--help__background-color),
-  ),
-  note: (
-    color: var(--rui-Alert--note__color),
-    foreground-color: var(--rui-Alert--note__foreground-color),
-    background-color: var(--rui-Alert--note__background-color),
-  ),
-  light: (
-    color: var(--rui-Alert--light__color),
-    foreground-color: var(--rui-Alert--light__foreground-color),
-    background-color: var(--rui-Alert--light__background-color),
-  ),
-  dark: (
-    color: var(--rui-Alert--dark__color),
-    foreground-color: var(--rui-Alert--dark__foreground-color),
-    background-color: var(--rui-Alert--dark__background-color),
-  ),
+    primary: (
+        color: var(--rui-Alert--primary__color),
+        foreground-color: var(--rui-Alert--primary__foreground-color),
+        background-color: var(--rui-Alert--primary__background-color),
+    ),
+    secondary: (
+        color: var(--rui-Alert--secondary__color),
+        foreground-color: var(--rui-Alert--secondary__foreground-color),
+        background-color: var(--rui-Alert--secondary__background-color),
+    ),
+    success: (
+        color: var(--rui-Alert--success__color),
+        foreground-color: var(--rui-Alert--success__foreground-color),
+        background-color: var(--rui-Alert--success__background-color),
+    ),
+    warning: (
+        color: var(--rui-Alert--warning__color),
+        foreground-color: var(--rui-Alert--warning__foreground-color),
+        background-color: var(--rui-Alert--warning__background-color),
+    ),
+    danger: (
+        color: var(--rui-Alert--danger__color),
+        foreground-color: var(--rui-Alert--danger__foreground-color),
+        background-color: var(--rui-Alert--danger__background-color),
+    ),
+    info: (
+        color: var(--rui-Alert--info__color),
+        foreground-color: var(--rui-Alert--info__foreground-color),
+        background-color: var(--rui-Alert--info__background-color),
+    ),
+    help: (
+        color: var(--rui-Alert--help__color),
+        foreground-color: var(--rui-Alert--help__foreground-color),
+        background-color: var(--rui-Alert--help__background-color),
+    ),
+    note: (
+        color: var(--rui-Alert--note__color),
+        foreground-color: var(--rui-Alert--note__foreground-color),
+        background-color: var(--rui-Alert--note__background-color),
+    ),
+    light: (
+        color: var(--rui-Alert--light__color),
+        foreground-color: var(--rui-Alert--light__foreground-color),
+        background-color: var(--rui-Alert--light__background-color),
+    ),
+    dark: (
+        color: var(--rui-Alert--dark__color),
+        foreground-color: var(--rui-Alert--dark__foreground-color),
+        background-color: var(--rui-Alert--dark__background-color),
+    ),
 );

package/src/lib/components/Alert/_tools.scss

@@ -1,10 +1,10 @@
-@use 'sass:map';
-@use 'theme';
+@use "sass:map";
+@use "theme";
 
 @mixin color($color) {
-  $color-variant-properties: map.get(theme.$colors, $color);
+    $color-variant-properties: map.get(theme.$colors, $color);
 
-  --rui-local-color: #{map.get($color-variant-properties, color)};
-  --rui-local-foreground-color: #{map.get($color-variant-properties, foreground-color)};
-  --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
+    --rui-local-color: #{map.get($color-variant-properties, color)};
+    --rui-local-foreground-color: #{map.get($color-variant-properties, foreground-color)};
+    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
 }

package/src/lib/components/Badge/Badge.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import getRootColorClassName from '../../helpers/getRootColorClassName';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Badge.scss';
 
 export const Badge = ({
@@ -11,11 +12,11 @@ export const Badge = ({
   priority,
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
-      priority === 'outline' ? styles.rootPriorityOutline : '',
+      priority === 'outline' && styles.rootPriorityOutline,
       getRootColorClassName(color, styles),
-    ].join(' ')}
+    )}
     id={id}
   >
     {label}
@@ -42,16 +43,13 @@ Badge.propTypes = {
   /**
    * Text to be displayed.
    */
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]).isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * Visual priority to highlight or suppress the badge.
    */
   priority: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const BadgeWithContext = withProviderContext(Badge, 'Badge');
+export const BadgeWithGlobalProps = withGlobalProps(Badge, 'Badge');
 
-export default BadgeWithContext;
+export default BadgeWithGlobalProps;