@react-ui-org/react-ui 0.56.0 → 0.58.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.56.0",
+  "version": "0.58.0",
   "keywords": [
     "react",
     "ui",
@@ -31,6 +31,17 @@
   "engines": {
     "node": ">=20"
   },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": "22.x",
+      "onFail": "error"
+    },
+    "packageManager": {
+      "name": "npm",
+      "onFail": "error"
+    }
+  },
   "scripts": {
     "build": "webpack --mode=production && webpack --mode=development",
     "copy": "npm run copy:css && npm run copy:js",
@@ -71,7 +82,7 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
-    "@visionappscz/stylelint-config": "^4.0.0-beta1",
+    "@visionappscz/stylelint-config": "^4.0.0",
     "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",

package/src/CNAME

@@ -0,0 +1 @@
+react-ui.io

package/src/components/Alert/Alert.jsx

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
+import { TranslationsContext } from '../../providers/translations';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
@@ -17,7 +15,7 @@ export const Alert = ({
   onClose,
   ...restProps
 }) => {
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <div
@@ -70,7 +68,8 @@ Alert.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the alert.
+   * Color variant to clarify importance and meaning of the alert. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

package/src/components/Alert/Alert.module.scss

@@ -1,10 +1,10 @@
 @use "sass:map";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/accessibility";
+@use "../../styles/tools/collections";
 @use "../../styles/tools/reset";
 @use "settings";
 @use "theme";
-@use "tools";
 
 @layer components.alert {
     .root {
@@ -25,8 +25,8 @@
         padding: theme.$padding;
     }
 
-    .close,
-    .icon {
+    .icon,
+    .close {
         height: settings.$min-height;
         color: var(--rui-local-foreground-color);
     }
@@ -46,7 +46,6 @@
         line-height: settings.$line-height;
     }
 
-    .message a,
     .message strong {
         font-weight: theme.$emphasis-font-weight;
         color: var(--rui-local-foreground-color);
@@ -66,35 +65,14 @@
         top: -0.1em;
     }
 
-    .isRootColorSuccess {
-        @include tools.color(success);
-    }
-
-    .isRootColorWarning {
-        @include tools.color(warning);
-    }
-
-    .isRootColorDanger {
-        @include tools.color(danger);
-    }
-
-    .isRootColorHelp {
-        @include tools.color(help);
-    }
-
-    .isRootColorInfo {
-        @include tools.color(info);
-    }
-
-    .isRootColorNote {
-        @include tools.color(note);
-    }
-
-    .isRootColorLight {
-        @include tools.color(light);
-    }
-
-    .isRootColorDark {
-        @include tools.color(dark);
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Alert",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties,
+            $inherit-link-color: true,
+        );
     }
 }

package/src/components/Alert/README.md

@@ -31,8 +31,8 @@ See [API](#api) for all available options.
 
 ## Color Variants
 
-All [component colors](/docs/foundation/colors#component-colors) are supported by
-alert to cover all possible needs of your project.
+To cover all possible needs of your project, Alert is available in colors from
+[Feedback and Neutral color collections](/docs/foundation/collections#colors).
 
 ### Success
 
@@ -41,6 +41,8 @@ Success alerts confirm that an operation has been processed successfully.
 ```docoff-react-preview
 <Alert color="success">
   <strong>Success:</strong> Settings have been successfully saved.
+  {' '}
+  <TextLink href="/" label="Undo" />
 </Alert>
 ```
 
@@ -53,7 +55,7 @@ suggest an action to resolve the problem.
 <Alert color="warning">
   <strong>Warning:</strong> Your credit card is going to expire soon.
   {' '}
-  <a href="/">Update my payment options</a>
+  <TextLink href="/" label="Update my payment options" />
 </Alert>
 ```
 
@@ -68,7 +70,7 @@ problem.
   <strong>Error:</strong> Cannot connect to the server. Is your internet
   connection working fine?
   {' '}
-  <a href="/">Try again</a>
+  <TextLink href="/" label="Try again" />
 </Alert>
 ```
 
@@ -80,6 +82,8 @@ This kind of alert can be used to display helpful information.
 <Alert color="help">
   <strong>Help:</strong> You should choose a password you don&apos;t use
   anywhere else.
+  {' '}
+  <TextLink href="/" label="Help me choose" />
 </Alert>
 ```
 
@@ -90,6 +94,8 @@ Another common, informative alert.
 ```docoff-react-preview
 <Alert color="info">
   <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
+  {' '}
+  <TextLink href="/" label="Open preferences" />
 </Alert>
 ```
 
@@ -100,6 +106,8 @@ Neutral informative alert.
 ```docoff-react-preview
 <Alert>
   <strong>Note:</strong> This feature may not be available in all regions.
+  {' '}
+  <TextLink href="/" label="Show list of regions" />
 </Alert>
 ```
 
@@ -111,6 +119,8 @@ Light alert variant.
 <docoff-placeholder dark>
   <Alert color="light">
     <strong>Light alert:</strong> Stands out on dark backgrounds.
+    {' '}
+    <TextLink href="/" label="This is a link" />
   </Alert>
 </docoff-placeholder>
 ```
@@ -122,6 +132,8 @@ Dark alert variant.
 ```docoff-react-preview
 <Alert color="dark">
   <strong>Dark alert:</strong> Stands out on light backgrounds.
+  {' '}
+  <TextLink href="/" label="This is a link" />
 </Alert>
 ```
 
@@ -190,14 +202,14 @@ helps to improve its accessibility.
 
 ### Common Theming Options
 
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-Alert__padding`                               | Padding between border and message                           |
-| `--rui-Alert__font-weight`                           | Message font weight                                          |
-| `--rui-Alert__border-width`                          | Border width                                                 |
-| `--rui-Alert__border-radius`                         | Corner radius                                                |
-| `--rui-Alert__emphasis__font-weight`                 | Font weight of text emphasised with `<strong>`               |
-| `--rui-Alert__stripe__width`                         | Width of the border at the start of the Alert                |
+| Custom Property                      | Description                                    |
+|--------------------------------------|------------------------------------------------|
+| `--rui-Alert__padding`               | Padding between border and message             |
+| `--rui-Alert__font-weight`           | Message font weight                            |
+| `--rui-Alert__border-width`          | Border width                                   |
+| `--rui-Alert__border-radius`         | Corner radius                                  |
+| `--rui-Alert__emphasis__font-weight` | Font weight of text emphasised with `<strong>` |
+| `--rui-Alert__stripe__width`         | Width of the border at the start of the Alert  |
 
 ### Theming Variants
 
@@ -208,9 +220,10 @@ convention looks as follows:
 
 Where:
 
-- `<COLOR>` is one of supported
-  [component colors](/docs/foundation/colors#component-colors)
-  (see alert [color variants](#color-variants) and [API](#api)),
+- `<COLOR>` is a value from supported
+  [color collections](/docs/foundation/collections#colors)
+  (check [color variants](#color-variants) and [API](#api) to see which
+  collections are supported),
 - `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
   border, icon, links, and emphasis), or `background-color`.
 

package/src/components/Alert/_settings.scss

@@ -1,7 +1,12 @@
+@use "sass:list";
 @use "sass:map";
+@use "../../styles/settings/collections";
 @use "../../styles/theme/typography";
 @use "theme";
 
 $font-size: map.get(typography.$font-size-values, 1);
 $line-height: typography.$line-height-base;
 $min-height: calc(#{$font-size} * #{$line-height} + 2 * #{theme.$padding});
+
+$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$themeable-properties: color, foreground-color, background-color;

package/src/components/Alert/_theme.scss

@@ -4,46 +4,3 @@ $border-width: var(--rui-Alert__border-width);
 $border-radius: var(--rui-Alert__border-radius);
 $emphasis-font-weight: var(--rui-Alert__emphasis__font-weight);
 $stripe-width: var(--rui-Alert__stripe__width);
-
-$colors: (
-    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/components/Badge/Badge.jsx

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import styles from './Badge.module.scss';
 
 export const Badge = ({
@@ -16,7 +17,7 @@ export const Badge = ({
     {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      priority === 'outline' && styles.isRootPriorityOutline,
+      getRootPriorityClassName(priority, styles),
       getRootColorClassName(color, styles),
     )}
   >
@@ -31,7 +32,8 @@ Badge.defaultProps = {
 
 Badge.propTypes = {
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the badge.
+   * Color to clarify importance and meaning of the badge. Implements
+   * [Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

package/src/components/Badge/Badge.module.scss

@@ -2,14 +2,14 @@
 @use "sass:math";
 @use "../../styles/theme/borders";
 @use "../../styles/theme/typography";
-
-$_badge-size: 1.25rem;
+@use "../../styles/tools/collections";
+@use "settings";
 
 @layer components.badge {
     .root {
         display: inline-block;
-        min-width: $_badge-size;
-        height: $_badge-size;
+        min-width: settings.$badge-size;
+        height: settings.$badge-size;
         padding: 0.25rem 0.35rem;
         overflow: hidden;
         font-weight: map.get(typography.$font-weight-values, bold);
@@ -19,91 +19,46 @@ $_badge-size: 1.25rem;
         white-space: nowrap;
         vertical-align: baseline;
         color: var(--rui-local-color);
-        border-radius: math.div($_badge-size, 2);
-        background-color: var(--rui-local-background-color);
-        box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
-    }
-
-    .isRootColorSuccess {
-        --rui-local-color: var(--rui-color-feedback-on-success);
-        --rui-local-background-color: var(--rui-color-feedback-success);
-    }
-
-    .isRootColorWarning {
-        --rui-local-color: var(--rui-color-feedback-on-warning);
-        --rui-local-background-color: var(--rui-color-feedback-warning);
-    }
-
-    .isRootColorDanger {
-        --rui-local-color: var(--rui-color-feedback-on-danger);
-        --rui-local-background-color: var(--rui-color-feedback-danger);
-    }
-
-    .isRootColorHelp {
-        --rui-local-color: var(--rui-color-feedback-on-help);
-        --rui-local-background-color: var(--rui-color-feedback-help);
-    }
-
-    .isRootColorInfo {
-        --rui-local-color: var(--rui-color-feedback-on-info);
-        --rui-local-background-color: var(--rui-color-feedback-info);
+        border-radius: math.div(settings.$badge-size, 2);
     }
 
-    .isRootColorNote {
-        --rui-local-color: var(--rui-color-feedback-on-note);
-        --rui-local-background-color: var(--rui-color-feedback-note);
+    .isRootPriorityFilled {
+        background-color: var(--rui-local-background-color);
+        box-shadow: var(--rui-local-box-shadow, #{0 0 0 2px rgb(255 255 255 / 80%)});
     }
 
-    .isRootColorLight {
-        --rui-local-color: var(--rui-color-neutral-on-light);
-        --rui-local-background-color: var(--rui-color-neutral-light);
-        --rui-local-box-shadow: none;
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Badge",
+            $modifier-name: "priority",
+            $modifier-value: "filled",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties-filled,
+        );
     }
 
+    .isRootColorLight,
     .isRootColorDark {
-        --rui-local-color: var(--rui-color-neutral-on-dark);
-        --rui-local-background-color: var(--rui-color-neutral-dark);
         --rui-local-box-shadow: none;
     }
 
     .isRootPriorityOutline {
-        --rui-local-background-color: transparent;
-        --rui-local-box-shadow: none;
-
         padding-top: 0.1875rem;
         padding-bottom: 0.1875rem;
         border: borders.$width solid currentcolor;
     }
 
-    .isRootPriorityOutline.isRootColorSuccess {
-        --rui-local-color: var(--rui-color-feedback-success);
-    }
-
-    .isRootPriorityOutline.isRootColorWarning {
-        --rui-local-color: var(--rui-color-feedback-warning);
-    }
-
-    .isRootPriorityOutline.isRootColorDanger {
-        --rui-local-color: var(--rui-color-feedback-danger);
-    }
-
-    .isRootPriorityOutline.isRootColorHelp {
-        --rui-local-color: var(--rui-color-feedback-help);
-    }
-
-    .isRootPriorityOutline.isRootColorInfo {
-        --rui-local-color: var(--rui-color-feedback-info);
-    }
-
-    .isRootPriorityOutline.isRootColorNote {
-        --rui-local-color: var(--rui-color-feedback-note);
-    }
-
-    .isRootPriorityOutline.isRootColorLight {
-        --rui-local-color: var(--rui-color-neutral-light);
-    }
-
-    .isRootPriorityOutline.isRootColorDark {
-        --rui-local-color: var(--rui-color-neutral-dark);
+    @each $color in settings.$colors {
+        @include collections.generate-class(
+            $prefix: "rui-",
+            $component-name: "Badge",
+            $modifier-name: "priority",
+            $modifier-value: "outline",
+            $variant-name: "color",
+            $variant-value: $color,
+            $properties: settings.$themeable-properties-outline,
+        );
     }
 }

package/src/components/Badge/README.md

@@ -29,8 +29,9 @@ lowest:
 1. filled
 2. outline
 
-All priorities come in supported
-[component colors](/docs/foundation/colors#component-colors).
+All priorities are available in colors from supported
+[color collections](/docs/foundation/collections#colors).
+Check [API](#api) to see which collections are supported.
 
 ### Filled
 
@@ -102,5 +103,21 @@ helps to improve its accessibility.
 
 <docoff-react-props src="/components/Badge/Badge.jsx" />
 
+## Theming
+
+It's possible to adjust the theme of specific badge color variant. Naming
+convention looks as follows:
+
+`--rui-Badge--<PRIORITY>--<COLOR>__<PROPERTY>`
+
+Where:
+
+- `<PRIORITY>` is one of `filled` or `outline`,
+- `<COLOR>` is a value from supported
+  [color collections](/docs/foundation/collections#colors)
+  (check [API](#api) to see which collections are supported),
+- `<PROPERTY>` is one of `color` (color of text) or `background-color` for the
+  filled priority, or just `color` for the outline priority.
+
 [div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Badge/_settings.scss

@@ -0,0 +1,8 @@
+@use "sass:list";
+@use "../../styles/settings/collections";
+
+$badge-size: 1.25rem;
+
+$colors: list.join(collections.$feedback-colors, collections.$neutral-colors);
+$themeable-properties-filled: color, background-color;
+$themeable-properties-outline: color;

package/src/components/Button/Button.jsx

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
+import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { ButtonGroupContext } from '../ButtonGroup';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
-import getRootPriorityClassName from '../_helpers/getRootPriorityClassName';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
 import styles from './Button.module.scss';
 
@@ -133,7 +133,8 @@ Button.propTypes = {
    */
   block: PropTypes.bool,
   /**
-   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the button.
+   * Color variant to clarify importance and meaning of the alert. Implements
+   * [Action, Feedback and Neutral color collections](/docs/foundation/collections#colors).
    */
   color: PropTypes.oneOf(
     ['primary', 'secondary', 'selected', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],