@react-ui-org/react-ui 0.52.1 → 0.54.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.52.1",
+  "version": "0.54.0",
   "keywords": [
     "react",
     "ui",
@@ -23,95 +23,84 @@
   "bugs": {
     "url": "https://github.com/react-ui-org/react-ui/issues"
   },
-  "main": "dist/lib.js",
+  "main": "dist/react-ui.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/react-ui-org/react-ui"
   },
   "engines": {
-    "node": ">=16.14.0 <17",
-    "npm": ">=8.3.0"
+    "node": ">=18",
+    "npm": ">=9"
+  },
+  "scripts": {
+    "build": "webpack --mode=production && webpack --mode=development",
+    "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",
+    "lint": "npm run eslint && npm run markdownlint && npm run stylelint",
+    "markdownlint": "markdownlint-cli2 \"CONTRIBUTING.md\" \"README.md\" \"RELEASING.md\" \"src/**/*.md\"",
+    "postbuild": "npm run copy",
+    "precopy": "rm -rf dist && mkdir dist",
+    "prepublishOnly": "npm run build",
+    "start": "webpack --watch --mode=development",
+    "stylelint": "stylelint \"src/**/*.scss\" --config stylelint.config.js",
+    "test": "npm run jest"
   },
   "dependencies": {
     "normalize.css": "^8.0.1"
   },
+  "peerDependencies": {
+    "prop-types": "^15.8.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
   "devDependencies": {
-    "@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",
-    "@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": "^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",
-    "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.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",
+    "@babel/cli": "^7.22.10",
+    "@babel/core": "^7.22.11",
+    "@babel/eslint-parser": "^7.22.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-spread": "^7.22.5",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/register": "^7.22.5",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.1.2",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@visionappscz/eslint-config-visionapps": "^1.7.0",
+    "@visionappscz/stylelint-config": "^3.0.0",
+    "autoprefixer": "^10.4.15",
+    "babel-jest": "^29.6.4",
+    "babel-loader": "^9.1.3",
+    "core-js": "^3.32.1",
+    "css-loader": "^6.8.1",
+    "eslint": "^8.48.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-markdown": "^3.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.3.1",
-    "markdownlint-cli2": "~0.3.2",
-    "nodemon": "^2.0.15",
-    "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.47.0",
-    "sass-loader": "^10.2.0",
-    "sinon": "^12.0.1",
-    "style-loader": "^2.0.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"
-  },
-  "peerDependencies": {
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "markdownlint-cli2": "~0.9.2",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.29",
+    "postcss-loader": "^7.3.3",
+    "prop-types": "^15.8.1",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "stylelint": "^14.16.1",
+    "stylelint-webpack-plugin": "^4.1.1",
+    "terser-webpack-plugin": "^5.3.9",
+    "webpack": "^5.69.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-visualizer-plugin2": "^1.0.0"
   },
   "resolutions": {
     "@babel/plugin-transform-spread": "7.12.1"
-  },
-  "scripts": {
-    "build": "concurrently \"npm run lib:build\" \"npm run docs:build\"",
-    "docs:build": "rimraf .docz docs && docz build --dest docs",
-    "docs:dev": "rimraf .docz && docz dev",
-    "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:js": "concurrently \"eslint --ext js,jsx src/lib tests/propTests\" \"npm run lib:jest\"",
-    "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",
-    "start": "concurrently --kill-others \"npm run watch\" \"npm run docs:dev\"",
-    "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 → components}/Alert/Alert.jsx

@@ -70,7 +70,7 @@ Alert.propTypes = {
    */
   children: PropTypes.node.isRequired,
   /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the alert.
+   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the alert.
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

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

@@ -1,22 +1,5 @@
----
-name: Alert
-menu: 'Miscellaneous'
-route: /components/alert
----
-
 # Alert
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import Icon from '../../../docs/_components/Icon'
-import Placeholder from '../../../docs/_components/Placeholder'
-import {
-  Button,
-  Alert,
-} from '../..'
-
 Alert presents feedback or important information to users.
 
 ## Basic Usage
@@ -29,11 +12,11 @@ import { Alert } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  <Alert>
-    <strong>Hello!</strong> This is an alert.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert>
+  <strong>Hello!</strong> This is an alert.
+</Alert>
+```
 
 See [API](#api) for all available options.
 
@@ -48,31 +31,31 @@ See [API](#api) for all available options.
 
 ## Color Variants
 
-All [component colors](/foundation/colors#component-colors) are supported by
+All [component colors](/docs/foundation/colors#component-colors) are supported by
 alert to cover all possible needs of your project.
 
 ### Success
 
 Success alerts confirm that an operation has been processed successfully.
 
-<Playground>
-  <Alert color="success">
-    <strong>Success:</strong> Settings have been successfully saved.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="success">
+  <strong>Success:</strong> Settings have been successfully saved.
+</Alert>
+```
 
 ### Warning
 
 Use warning alerts when a potentially unfavourable situation may occur. You may
 suggest an action to resolve the problem.
 
-<Playground>
-  <Alert color="warning">
-    <strong>Warning:</strong> Your credit card is going to expire soon.
-    {' '}
-    <a href="/">Update my payment options</a>
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="warning">
+  <strong>Warning:</strong> Your credit card is going to expire soon.
+  {' '}
+  <a href="/">Update my payment options</a>
+</Alert>
+```
 
 ### Danger
 
@@ -80,109 +63,110 @@ Danger alerts say there is something that block users from continuing that
 requires their immediate attention. The alert should offer a solution to the
 problem.
 
-<Playground>
-  <Alert color="danger">
-    <strong>Error:</strong> Cannot connect to the server. Is your internet
-    connection working fine?
-    {' '}
-    <a href="/">Try again</a>
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="danger">
+  <strong>Error:</strong> Cannot connect to the server. Is your internet
+  connection working fine?
+  {' '}
+  <a href="/">Try again</a>
+</Alert>
+```
 
 ### Help
 
 This kind of alert can be used to display helpful information.
 
-<Playground>
-  <Alert color="help">
-    <strong>Help:</strong> You should choose a password you don&apos;t use
-    anywhere else.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="help">
+  <strong>Help:</strong> You should choose a password you don&apos;t use
+  anywhere else.
+</Alert>
+```
 
 ### Info
 
 Another common, informative alert.
 
-<Playground>
-  <Alert color="info">
-    <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="info">
+  <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
+</Alert>
+```
 
 ### Note (Default)
 
 Neutral informative alert.
 
-<Playground>
-  <Alert>
-    <strong>Note:</strong> This feature may not be available in all regions.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert>
+  <strong>Note:</strong> This feature may not be available in all regions.
+</Alert>
+```
 
 ### Light
 
 Light alert variant.
 
-<Playground>
-  <Placeholder dark>
-    <Alert color="light">
-      <strong>Light alert:</strong> Stands out on dark backgrounds.
-    </Alert>
-  </Placeholder>
-</Playground>
+```docoff-react-preview
+<docoff-placeholder dark>
+  <Alert color="light">
+    <strong>Light alert:</strong> Stands out on dark backgrounds.
+  </Alert>
+</docoff-placeholder>
+```
 
 ### Dark
 
 Dark alert variant.
 
-<Playground>
-  <Alert color="dark">
-    <strong>Dark alert:</strong> Stands out on light backgrounds.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="dark">
+  <strong>Dark alert:</strong> Stands out on light backgrounds.
+</Alert>
+```
 
 ## Alerts with Icons
 
 An icon can (and should) accompany the message.
 
 👉 Please note there are no icons pre-packed in React UI. Visit
-[Icons](/foundation/icons) to see how it works.
+[Icons](/docs/foundation/icons) to see how it works.
 
-<Playground>
-  <Alert color="success" icon={<Icon icon="success" />}>
-    <strong>Success:</strong> Settings have been successfully saved.
-  </Alert>
-</Playground>
+```docoff-react-preview
+<Alert color="success" icon={<rui-icon icon="success" />}>
+  <strong>Success:</strong> Settings have been successfully saved.
+</Alert>
+```
 
 ## Dismissible Alerts
 
 You can make an alert dismissible by providing a function that closes it on
 click on the close button:
 
-<Playground>
-  {() => {
-    const [isAlertVisible, setIsAlertVisible] = React.useState(true);
+```docoff-react-preview
+React.createElement(() => {
+  const [isAlertVisible, setIsAlertVisible] = React.useState(true);
+
+  if (isAlertVisible) {
     return (
-      <>
-        {isAlertVisible ? (
-          <Alert
-            color="success"
-            icon={<Icon icon="success" />}
-            onClose={() => setIsAlertVisible(false)}
-          >
-            <strong>Success:</strong> Settings have been successfully saved.
-          </Alert>
-        ) : (
-          <Button
-            label="Bring the alert back!"
-            onClick={() => setIsAlertVisible(true)}
-          />
-        )}
-      </>
+      <Alert
+        color="success"
+        icon={<rui-icon icon="success" />}
+        onClose={() => setIsAlertVisible(false)}
+      >
+        <strong>Success:</strong> Settings have been successfully saved.
+      </Alert>
     );
-  }}
-</Playground>
+  }
+
+  return (
+    <Button
+      label="Bring the alert back!"
+      onClick={() => setIsAlertVisible(true)}
+    />
+  );
+});
+```
 
 ## Forwarding HTML Attributes
 
@@ -197,7 +181,7 @@ its accessibility.
 
 ## API
 
-<Props table of={Alert} />
+<docoff-react-props src="/components/Alert/Alert.jsx" />
 
 ## Theming
 
@@ -222,7 +206,7 @@ convention looks as follows:
 Where:
 
 - `<COLOR>` is one of supported
-  [component colors](/foundation/colors#component-colors)
+  [component colors](/docs/foundation/colors#component-colors)
   (see alert [color variants](#color-variants) and [API](#api)),
 - `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
   border, icon, links, and emphasis), or `background-color`.

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

@@ -31,7 +31,7 @@ Badge.defaultProps = {
 
 Badge.propTypes = {
   /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the badge.
+   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the badge.
    */
   color: PropTypes.oneOf(['success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark']),
   /**

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

@@ -71,7 +71,7 @@ $_badge-size: 1.25rem;
 
     padding-top: 0.1875rem;
     padding-bottom: 0.1875rem;
-    border: borders.$width solid currentColor;
+    border: borders.$width solid currentcolor;
 }
 
 .isRootPriorityOutline.isRootColorSuccess {

package/src/components/Badge/README.md

@@ -0,0 +1,103 @@
+# Badge
+
+## Basic Usage
+
+To implement the Badge component, you need to import it first:
+
+```js
+import { Badge } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+```docoff-react-preview
+<Badge label="Hello!" />
+```
+
+See [API](#api) for all available options.
+
+## General Guidelines
+
+Use badges to highlight content with a **short and brief** additional
+information: a number, a word, but no more than two words.
+
+## Priorities
+
+There are two **visual priorities** of badges to choose from, from highest to
+lowest:
+
+1. filled
+2. outline
+
+All priorities come in supported
+[component colors](/docs/foundation/colors#component-colors).
+
+### Filled
+
+High-emphasis priority to draw user's attention.
+
+```docoff-react-preview
+<Badge label="3" color="success" />
+<Badge label="4" color="warning" />
+<Badge label="5" color="danger" />
+<Badge label="10" color="help" />
+<Badge label="34" color="info" />
+<Badge label="99+" />
+<Badge label="365" color="light" />
+<Badge label="999+" color="dark" />
+```
+
+```docoff-react-preview
+<Badge label="Success" color="success" />
+<Badge label="Warning" color="warning" />
+<Badge label="Danger" color="danger" />
+<Badge label="Help" color="help" />
+<Badge label="Info" color="info" />
+<Badge label="Note" />
+<Badge label="Light" color="light" />
+<Badge label="Dark" color="dark" />
+```
+
+### Outline
+
+Medium-emphasis priority to provide additional context in an unobtrusive way.
+
+```docoff-react-preview
+<Badge priority="outline" label="3" color="success" />
+<Badge priority="outline" label="4" color="warning" />
+<Badge priority="outline" label="5" color="danger" />
+<Badge priority="outline" label="10" color="help" />
+<Badge priority="outline" label="34" color="info" />
+<Badge priority="outline" label="99+" />
+<Badge priority="outline" label="365" color="light" />
+<Badge priority="outline" label="999+" color="dark" />
+```
+
+```docoff-react-preview
+<Badge priority="outline" label="Success" color="success" />
+<Badge priority="outline" label="Warning" color="warning" />
+<Badge priority="outline" label="Danger" color="danger" />
+<Badge priority="outline" label="Help" color="help" />
+<Badge priority="outline" label="Info" color="info" />
+<Badge priority="outline" label="Note" />
+<Badge priority="outline" label="Light" color="light" />
+<Badge priority="outline" label="Dark" color="dark" />
+```
+
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the root `<div>`
+HTML element. This enables making the component interactive and helps to improve
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
+## API
+
+<docoff-react-props src="/components/Badge/Badge.jsx" />
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

package/src/{lib/components → components}/Button/Button.jsx

@@ -133,7 +133,7 @@ Button.propTypes = {
    */
   block: PropTypes.bool,
   /**
-   * [Color variant](/foundation/colors#component-colors) to clarify importance and meaning of the button.
+   * [Color variant](/docs/foundation/colors#component-colors) to clarify importance and meaning of the button.
    */
   color: PropTypes.oneOf(
     ['primary', 'secondary', 'selected', 'success', 'warning', 'danger', 'help', 'info', 'note', 'light', 'dark'],