@react-ui-org/react-ui 0.59.3 → 0.61.0

package/jest.config-ts.js

@@ -0,0 +1,34 @@
+
+ module.exports = {
+  extensionsToTreatAsEsm: [
+    '.ts',
+    '.tsx',
+  ],
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'ts',
+    'tsx',
+  ],
+  moduleNameMapper: {
+    '\\.scss$': 'identity-obj-proxy',
+    '\\.svg$': '<rootDir>/tests/jest/mocks/svgrMock.jsx',
+  },
+  preset: 'ts-jest',
+  setupFiles: [
+    '<rootDir>/tests/jest/setupJest.js',
+  ],
+  setupFilesAfterEnv: [
+  ],
+  testEnvironment: '@happy-dom/jest-environment',
+  testMatch: [
+    '**/*.test.{ts,tsx}',
+  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      { useESM: true },
+    ],
+  },
+  verbose: true,
+};

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.59.3",
+  "version": "0.61.0",
   "keywords": [
     "react",
     "ui",
@@ -47,17 +47,24 @@
     "copy": "npm run copy:css && npm run copy:js",
     "copy:css": "cp src/docs/_assets/generated/react-ui.css dist && cp src/docs/_assets/generated/react-ui.development.css dist",
     "copy:js": "cp src/docs/_assets/generated/react-ui.js dist && cp src/docs/_assets/generated/react-ui.development.js dist",
-    "eslint": "eslint --ext js,jsx src",
-    "jest": "jest src --coverage",
+    "eslint": "npm run eslint:ts && npm run eslint:js",
+    "eslint:js": "eslint --ext js,jsx src",
+    "eslint:ts": "eslint --ext ts,tsx -c .eslintrc-ts src tests",
     "lint": "npm run eslint && npm run markdownlint && npm run stylelint",
-    "markdownlint": "markdownlint-cli2 \"CONTRIBUTING.md\" \"README.md\" \"RELEASING.md\" \"src/**/*.md\"",
+    "markdownlint": "markdownlint-cli2 \"README.md\" \"src/**/*.md\"",
     "postbuild": "npm run copy",
-    "postinstall": "cp -n .env.dist .env || true",
+    "postinstall": "cp -n .env.dist .env && cp -n .env.playwright.dist .env.playwright || true",
     "precopy": "rm -rf dist && mkdir dist",
     "prepublishOnly": "npm run build",
     "start": "webpack --watch --mode=development",
     "stylelint": "stylelint \"src/**/*.{css,scss}\" \"!src/docs/_assets/generated/**\" --config stylelint.config.js",
-    "test": "npm run jest"
+    "test": "npm run test:jest",
+    "test:jest": "npm run test:jest:ts && npm run test:jest:js",
+    "test:jest:js": "jest --coverage",
+    "test:jest:ts": "jest -c jest.config-ts.js --coverage",
+    "test:playwright-ct:all": "playwright test -c playwright-ct.config.ts",
+    "test:playwright-ct:all-with-update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+    "test:playwright-ct:show-report": "playwright show-report --host=0.0.0.0 --port=9323"
   },
   "dependencies": {
     "normalize.css": "^8.0.1"
@@ -77,11 +84,18 @@
     "@babel/preset-react": "^7.24.7",
     "@babel/register": "^7.24.6",
     "@happy-dom/jest-environment": "^16.6.0",
+    "@playwright/experimental-ct-react": "^1.50.1",
     "@stylistic/stylelint-config": "^1.0.1",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@visionappscz/eslint-config-visionapps": "^1.7.0",
     "@visionappscz/stylelint-config": "^4.0.0",
     "autoprefixer": "^10.4.19",
@@ -89,13 +103,17 @@
     "babel-loader": "^9.1.3",
     "core-js": "^3.37.1",
     "css-loader": "^7.1.2",
+    "dotenv": "^16.4.7",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-plugin-deprecation": "^3.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-markdown": "^3.0.1",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-typescript-sort-keys": "^3.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "markdownlint-cli2": "^0.13.0",
@@ -110,6 +128,7 @@
     "stylelint": "^16.7.0",
     "stylelint-webpack-plugin": "^5.0.1",
     "terser-webpack-plugin": "^5.3.10",
+    "ts-jest": "^29.2.6",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-visualizer-plugin2": "^1.1.0"

package/playwright-ct.config.ts

@@ -0,0 +1,68 @@
+import {
+  defineConfig,
+  devices,
+} from '@playwright/experimental-ct-react';
+import { parseEnvironment } from './tests/playwright/env/parseEnvironment';
+
+const environment = parseEnvironment();
+
+const isCI = !!process.env.CI;
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+module.exports = defineConfig({
+  // Fail the build on CI if you accidentally left test.only in the source code
+  forbidOnly: isCI,
+  // Run tests in files in parallel
+  fullyParallel: true,
+  // Directory where the output generated by Playwright is stored
+  outputDir: './tests/playwright/.temp/playwright-ct-output/',
+  // Run tests for following projects
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  // Retry failed tests once to eliminate flakiness
+  retries: 1,
+  // Directory where the snapshots are located
+  // (must be same as testDir to save snapshots in place where tests are located)
+  snapshotDir: './src/',
+  // Directory where the tests are located
+  testDir: './src/',
+  // Pattern to search for test files
+  testMatch: '*/*.spec.{ts,tsx}',
+  // Timeout for each test
+  timeout: 10 * 1000,
+  // Do not update snapshots automatically
+  updateSnapshots: 'none',
+  // Configuration for Playwright component testing
+  use: {
+    // Directory where the cache is stored
+    ctCacheDir: './tests/playwright/.temp/playwright-ct-cache',
+    // Port to use for Playwright component endpoint
+    ctPort: environment.CT_PORT,
+    // Directory where the templates are stored
+    ctTemplateDir: './tests/playwright/templates',
+    // Launch options for Playwright
+    launchOptions: {
+      args: [
+        '--use-gl=egl',
+        // # Must be set to `new` to enable new version of Chromium Headless to obtain correct snapshots
+        '--headless=new',
+      ],
+      ignoreDefaultArgs: [
+        // # Must be ignored to enable new version of Chromium Headless to obtain correct snapshots
+        '--headless',
+      ],
+    },
+    // Collect trace on all retries
+    trace: 'on-all-retries',
+  },
+  // Number of workers to use
+  workers: environment.WORKERS,
+});

package/src/components/Alert/Alert.jsx

@@ -57,9 +57,9 @@ export const Alert = ({
 
 Alert.defaultProps = {
   color: 'note',
-  icon: null,
+  icon: undefined,
   id: undefined,
-  onClose: null,
+  onClose: undefined,
 };
 
 Alert.propTypes = {

package/src/components/Button/Button.jsx

@@ -101,18 +101,18 @@ export const Button = React.forwardRef((props, ref) => {
 });
 
 Button.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
+  afterLabel: undefined,
+  beforeLabel: undefined,
   block: false,
   color: 'primary',
   disabled: false,
-  endCorner: null,
-  feedbackIcon: null,
+  endCorner: undefined,
+  feedbackIcon: undefined,
   id: undefined,
   labelVisibility: 'xs',
   priority: 'filled',
   size: 'medium',
-  startCorner: null,
+  startCorner: undefined,
   type: 'button',
 };
 

package/src/components/Button/README.md

@@ -28,7 +28,7 @@ See [API](#api) for all available options.
 - **Don't overwhelm your UI** with too many high-emphasis actions. There should
     always be one but chances are that having more of them is not necessary.
 
-- Ensure the **button action is well recognazible** across your target audience.
+- Ensure the **button action is well recognizable** across your target audience.
     This is especially important when using the button [with an icon only](#icon-buttons).
 
 ## Priorities

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -6,7 +6,7 @@ import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import styles from './ButtonGroup.module.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
@@ -48,7 +48,7 @@ export const ButtonGroup = ({
 
 ButtonGroup.defaultProps = {
   block: false,
-  children: null,
+  children: undefined,
   disabled: false,
   priority: 'filled',
   size: 'medium',

package/src/components/Card/Card.module.scss

@@ -35,6 +35,7 @@
     }
 
     .isRootDisabled {
+        border: theme.$disabled-border-width solid var(--rui-local-border-color, theme.$disabled-border-color);
         background-color: theme.$disabled-background-color;
         opacity: theme.$disabled-opacity;
     }

package/src/components/Card/CardFooter.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import styles from './Card.module.scss';
 
 export const CardFooter = ({
@@ -24,7 +24,7 @@ export const CardFooter = ({
 };
 
 CardFooter.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 CardFooter.propTypes = {

package/src/components/Card/README.md

@@ -300,6 +300,8 @@ Separate your card actions with CardFooter. See
 | `--rui-Card--raised__box-shadow`         | Box shadow of raised card                      |
 | `--rui-Card--disabled__background-color` | Card background color in disabled state        |
 | `--rui-Card--disabled__opacity`          | Card opacity in disabled state                 |
+| `--rui-Card--disabled__border-width`     | Card border width in disabled state            |
+| `--rui-Card--disabled__border-color`     | Card border color in disabled state            |
 
 ### Theming Variants
 

package/src/components/Card/_theme.scss

@@ -9,3 +9,5 @@ $raised-box-shadow: var(--rui-Card--raised__box-shadow);
 
 $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
+$disabled-border-width: var(--rui-Card--disabled__border-width);
+$disabled-border-color: var(--rui-Card--disabled__border-color);

package/src/components/CheckboxField/CheckboxField.jsx

@@ -79,14 +79,14 @@ export const CheckboxField = React.forwardRef((props, ref) => {
 
 CheckboxField.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 CheckboxField.propTypes = {

package/src/components/FileInputField/FileInputField.jsx

@@ -78,6 +78,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
   const handleFileChange = (files, event) => {
     if (files.length === 0) {
       setSelectedFileNames([]);
+      onFilesChanged([], event);
       return;
     }
 
@@ -85,6 +86,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
     // does not accept multiple files, no files are processed.
     if (files.length > 1 && !multiple) {
       setSelectedFileNames([]);
+      onFilesChanged([], event);
       return;
     }
 
@@ -198,15 +200,20 @@ export const FileInputField = React.forwardRef((props, ref) => {
             type="button"
           >
             <Text lines={1}>
-              {!selectedFileNames.length && (
+              {isDragging && (
+                <span className={styles.dropFileHereText}>
+                  {translations.FileInputField.dropFileHere}
+                </span>
+              )}
+              {!isDragging && !selectedFileNames.length && (
                 <>
                   <span className={styles.dropZoneLink}>{translations.FileInputField.browse}</span>
                   {' '}
                   {translations.FileInputField.drop}
                 </>
               )}
-              {selectedFileNames.length === 1 && selectedFileNames[0]}
-              {selectedFileNames.length > 1 && (
+              {!isDragging && selectedFileNames.length === 1 && selectedFileNames[0]}
+              {!isDragging && selectedFileNames.length > 1 && (
                 <>
                   {selectedFileNames.length}
                   {' '}
@@ -216,7 +223,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
             </Text>
           </button>
         </div>
-        {helpText && (
+        {(helpText && !inputGroupContext) && (
           <div
             className={styles.helpText}
             id={`${id}__helpText`}
@@ -224,7 +231,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
             {helpText}
           </div>
         )}
-        {validationText && (
+        {(validationText && !inputGroupContext) && (
           <div
             className={styles.validationText}
             id={`${id}__validationText`}
@@ -240,14 +247,14 @@ export const FileInputField = React.forwardRef((props, ref) => {
 FileInputField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   multiple: false,
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 FileInputField.propTypes = {
@@ -261,6 +268,9 @@ FileInputField.propTypes = {
   fullWidth: PropTypes.bool,
   /**
    * Optional help text.
+   *
+   * Help text is never rendered when the component is placed into `InputGroup`.
+   * If a help text is needed, it must be defined on the `InputGroup` component instead.
    */
   helpText: PropTypes.node,
   /**
@@ -314,6 +324,9 @@ FileInputField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`.
+   * If a validation text is needed, it must be defined on the `InputGroup` component instead.
    */
   validationText: PropTypes.node,
 };

package/src/components/FileInputField/FileInputField.module.scss

@@ -64,6 +64,10 @@
         --rui-local-border-color: #{settings.$drop-zone-active-border-color};
     }
 
+    .dropFileHereText {
+        color: var(--rui-local-link-color, var(--rui-color-text-link));
+    }
+
     .dropZoneLink {
         @include links.base();
 

package/src/components/FormLayout/FormLayout.jsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.module.scss';
 
@@ -68,7 +68,7 @@ export const FormLayout = ({
 
 FormLayout.defaultProps = {
   autoWidth: false,
-  children: null,
+  children: undefined,
   fieldLayout: 'vertical',
   labelWidth: 'default',
 };

package/src/components/FormLayout/FormLayoutCustomField.jsx

@@ -5,7 +5,7 @@ import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayoutCustomField.module.scss';
 
@@ -80,15 +80,15 @@ export const FormLayoutCustomField = ({
 };
 
 FormLayoutCustomField.defaultProps = {
-  children: null,
+  children: undefined,
   disabled: false,
   fullWidth: false,
   id: undefined,
-  innerFieldSize: null,
-  label: null,
+  innerFieldSize: undefined,
+  label: undefined,
   labelForId: undefined,
   required: false,
-  validationState: null,
+  validationState: undefined,
 };
 
 FormLayoutCustomField.propTypes = {

package/src/components/Grid/Grid.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';
 
@@ -54,7 +54,7 @@ Grid.defaultProps = {
   alignContent: undefined,
   alignItems: undefined,
   autoFlow: undefined,
-  children: null,
+  children: undefined,
   columnGap: 4,
   columns: '1fr',
   justifyContent: undefined,

package/src/components/Grid/GridSpan.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';
 
@@ -35,7 +35,7 @@ export const GridSpan = ({
 /* eslint-disable sort-keys */
 
 GridSpan.defaultProps = {
-  children: null,
+  children: undefined,
   columns: 1,
   rows: 1,
   tag: 'div',

package/src/components/InputGroup/InputGroup.jsx

@@ -8,7 +8,7 @@ import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { FormLayoutContext } from '../FormLayout';
 import { Text } from '../Text';
@@ -18,6 +18,7 @@ import styles from './InputGroup.module.scss';
 export const InputGroup = ({
   children,
   disabled,
+  helpTexts,
   id,
   isLabelVisible,
   label,
@@ -89,7 +90,21 @@ export const InputGroup = ({
             {children}
           </InputGroupContext.Provider>
         </div>
-        {validationTexts && (
+        {helpTexts && helpTexts.length > 0 && (
+          <ul
+            className={styles.helpText}
+            id={id && `${id}__helpTexts`}
+          >
+            {helpTexts.map((helpText) => (
+              <li key={helpText}>
+                <Text blockLevel>
+                  {helpText}
+                </Text>
+              </li>
+            ))}
+          </ul>
+        )}
+        {validationTexts && validationTexts.length > 0 && (
           <ul
             className={styles.validationText}
             id={id && `${id}__validationTexts`}
@@ -109,14 +124,15 @@ export const InputGroup = ({
 };
 
 InputGroup.defaultProps = {
-  children: null,
+  children: undefined,
   disabled: false,
+  helpTexts: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
-  validationTexts: null,
+  validationTexts: undefined,
 };
 
 InputGroup.propTypes = {
@@ -133,6 +149,10 @@ InputGroup.propTypes = {
    * If `true`, the whole input group with all nested inputs and buttons will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * An array of help texts to be displayed.
+   */
+  helpTexts: PropTypes.arrayOf(PropTypes.node),
   /**
    * ID of the root HTML element.
    *
@@ -171,7 +191,7 @@ InputGroup.propTypes = {
   /**
    * An array of validation messages to be displayed.
    */
-  validationTexts: PropTypes.node,
+  validationTexts: PropTypes.arrayOf(PropTypes.node),
 };
 
 export const InputGroupWithGlobalProps = withGlobalProps(InputGroup, 'InputGroup');

package/src/components/InputGroup/InputGroup.module.scss

@@ -1,4 +1,4 @@
-// 1. The class name is intentionally singular because it's targeted by other mixins too.
+// 1. The class names are intentionally singular because they are also targeted by other mixins.
 // 2. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
 // 3. Let wide input groups honor the minimum input width and overflow horizontally without wrapping and distorting
 //    the inputs.
@@ -39,6 +39,7 @@
     }
 
     // 1.
+    .helpText,
     .validationText {
         @include reset.list();
         @include foundation.help-text();