diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 235d8b73c41..00000000000 --- a/.eslintignore +++ /dev/null @@ -1,50 +0,0 @@ -# Javascript builds -node_modules -dist -__tests__ -thirdparty -tsc_out -.out -.changelog -.DS_Store -coverage -.cache -.tmp -**/Generated -**/build -css -packages/react-docs/.cache -packages/react-docs/static -packages/react-docs/public -packages/react-integration/results -packages/react-integration/demo-app-ts/public - -# package managers -yarn-error.log -lerna-debug.log - -# IDEs and editors -.idea -.project -.classpath -.c9 -*.launch -.settings -*.sublime-workspace -.history -.vscode - -# IDE - VSCode -.vscode -# For vim -*.swp - -# Deploy directory -docs - -# Copied types -DeprecatedPopperTypes.ts -DeprecatedTippyTypes.ts - -# Copied thirdparty -packages/react-core/src/helpers/Popper/thirdparty/**/* diff --git a/.eslintrc-md.json b/.eslintrc-md.json index 55768e68adc..9016f102667 100644 --- a/.eslintrc-md.json +++ b/.eslintrc-md.json @@ -26,5 +26,5 @@ "react/no-unknown-property": 2, "react/jsx-no-undef": 2 }, - "extends": "plugin:markdown/recommended" -} \ No newline at end of file + "extends": "plugin:markdown/recommended-legacy" +} diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index b78d47c5ef8..00000000000 --- a/.eslintrc.json +++ /dev/null @@ -1,132 +0,0 @@ -{ - "env": { - "browser": true, - "node": true, - "es6": true - }, - "plugins": [ - "@typescript-eslint", - "prettier", - "patternfly-react" - ], - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:react/recommended", - "plugin:react-hooks/recommended" - ], - "parserOptions": { - "sourceType": "module", - "ecmaFeatures": { - "jsx": true - } - }, - "settings": { - "react": { - "version": "detect" - } - }, - "globals": { - "describe": "readonly", - "test": "readonly", - "jest": "readonly", - "expect": "readonly", - "require": "readonly", - "global": "writable", - "it": "readonly", - "afterEach": "readonly", - "beforeEach": "readonly" - }, - "rules": { - "@typescript-eslint/adjacent-overload-signatures": "error", - "@typescript-eslint/array-type": "error", - "@typescript-eslint/ban-types": "off", - "@typescript-eslint/consistent-type-assertions": "error", - "@typescript-eslint/consistent-type-definitions": "error", - "@typescript-eslint/explicit-member-accessibility": "off", - "@typescript-eslint/explicit-module-boundary-types": "off", - "@typescript-eslint/indent": "off", - "@typescript-eslint/no-empty-function": "off", - "@typescript-eslint/no-empty-interface": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-misused-new": "error", - "@typescript-eslint/no-namespace": "error", - "@typescript-eslint/no-unused-vars": ["error", { - "argsIgnorePattern": "^_" - }], - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-var-requires": "off", - "@typescript-eslint/prefer-for-of": "error", - "@typescript-eslint/prefer-function-type": "error", - "@typescript-eslint/prefer-namespace-keyword": "error", - "@typescript-eslint/unified-signatures": "error", - "@typescript-eslint/explicit-function-return-type": "off", - "arrow-body-style": "error", - "camelcase": ["error", { - "ignoreDestructuring": true - }], - "constructor-super": "error", - "curly": "error", - "dot-notation": "error", - "eqeqeq": [ - "error", - "smart" - ], - "guard-for-in": "error", - "max-classes-per-file": [ - "error", - 1 - ], - "max-len": "off", - "no-nested-ternary": "error", - "no-bitwise": "error", - "no-caller": "error", - "no-cond-assign": "error", - "no-console": "error", - "no-debugger": "error", - "no-empty": "error", - "no-eval": "error", - "no-new-wrappers": "error", - "no-prototype-builtins": "off", - "no-shadow": "off", - "no-throw-literal": "error", - "no-trailing-spaces": "off", - "no-undef-init": "error", - "no-unsafe-finally": "error", - "no-unused-expressions": ["error", { - "allowTernary": true, - "allowShortCircuit": true - }], - "no-unused-labels": "error", - "no-var": "error", - "object-shorthand": "error", - "one-var": [ - "error", - "never" - ], - "patternfly-react/import-tokens-icons": "error", - "patternfly-react/no-anonymous-functions": "error", - "prefer-const": "error", - "prettier/prettier": "error", - "radix": [ - "error", - "as-needed" - ], - "react/prop-types": 0, - "react/display-name": 0, - "react-hooks/exhaustive-deps": "warn", - "react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}], - "spaced-comment": "error", - "use-isnan": "error", - "patternfly-react/no-layout-effect": "error" - }, - "overrides": [ - { - "files": ["**/examples/*", "**/demos/examples/**/*"], - "rules": { - "patternfly-react/no-anonymous-functions": "off" - } - } - ] -} diff --git a/.github/ISSUE_TEMPLATE/PF6_alpha_bug_request.md b/.github/ISSUE_TEMPLATE/PF6_alpha_bug_request.md new file mode 100644 index 00000000000..1251cfa2a1f --- /dev/null +++ b/.github/ISSUE_TEMPLATE/PF6_alpha_bug_request.md @@ -0,0 +1,17 @@ +--- +name: PF6 alpha bug +about: Report a bug discovered while testing the PatternFly 6 alphas +title: "[short description]" +labels: 'v6 alpha bug' +assignees: '' + +--- + +**Please describe the issue** + +**Are there visuals for this issue? Please provide screenshots** +Include screenshots or links to Marvel or other mockups. + +**Could you point to a branch or draft PR where this issue exists? Please provide a link to the code** + +**Any other information?** diff --git a/.github/actions/setup-project/action.yml b/.github/actions/setup-project/action.yml new file mode 100644 index 00000000000..f47422f31c7 --- /dev/null +++ b/.github/actions/setup-project/action.yml @@ -0,0 +1,69 @@ +name: Set up and build project +inputs: + skip-build: + description: Skip the build step + required: false + default: 'false' + skip-build-cache: + description: Skip the build cache step + required: false + default: 'false' +runs: + using: composite + steps: + - name: Set up Node.js + uses: actions/setup-node@v4 + with: + node-version: 20 + check-latest: true + + - name: Enable Corepack + shell: bash + run: corepack enable + + - name: Get Yarn configuration + id: yarn-config + shell: bash + run: | + echo "cache-folder=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT + + # TODO: This can be simplified to use the `cache` option of the `actions/setup-node` action when it supports Corepack. + # See: https://github.com/actions/setup-node/issues/531 + - uses: actions/cache@v4 + name: Setup Yarn cache + with: + # Also cache Cypress binary. + path: | + ~/.cache/Cypress + ${{ steps.yarn-config.outputs.cache-folder }} + key: ${{ runner.os }}-yarn-cache-${{ hashFiles('yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn-cache- + + - name: Install dependencies + shell: bash + run: yarn install --immutable + + - uses: actions/cache@v4 + if: inputs.skip-build != 'true' && inputs.skip-build-cache != 'true' + id: cache-build + name: Cache build + with: + path: | + packages/*/dist + packages/*/next + packages/*/deprecated + packages/*/components + packages/react-styles/css + packages/react-core/layouts + packages/react-core/helpers + key: ${{ runner.os }}-build-${{ hashFiles('yarn.lock', '**/package.json', 'packages/**', '!**/node_modules', '!**/dist') }} + + - name: Run build + if: inputs.skip-build != 'true' && steps.cache-build.outputs.cache-hit != 'true' + shell: bash + run: yarn build && yarn build:umd + env: + # Disable V8 compile cache to hard crashes in Node.js. This can likely be removed once upgraded to the next LTS version (version 22). + # See: https://github.com/nodejs/node/issues/51555 + DISABLE_V8_COMPILE_CACHE: 1 diff --git a/.github/promote.sh b/.github/promote.sh index c284182687e..3b362000571 100755 --- a/.github/promote.sh +++ b/.github/promote.sh @@ -12,14 +12,14 @@ echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc # Update their versions and changelogs according to angular commit guidelines # https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit -if [[ ! -z "${CORE_VERSION}" ]]; then - echo "Updating to @patternfly/patternfly: ${CORE_VERSION}" - npm pkg set dependencies.@patternfly/patternfly=${CORE_VERSION} --workspace @patternfly/react-docs - npm pkg set devDependencies.@patternfly/patternfly=${CORE_VERSION} --workspace @patternfly/react-core --workspace @patternfly/react-styles --workspace @patternfly/react-tokens --workspace @patternfly/react-icons -fi +# if [[ ! -z "${PATTERNFLY_VERSION}" ]]; then +# echo "Updating to @patternfly/patternfly: ${PATTERNFLY_VERSION}" +# npm pkg set dependencies.@patternfly/patternfly=${PATTERNFLY_VERSION} --workspace @patternfly/react-docs +# npm pkg set devDependencies.@patternfly/patternfly=${PATTERNFLY_VERSION} --workspace @patternfly/react-core --workspace @patternfly/react-styles --workspace @patternfly/react-tokens --workspace @patternfly/react-icons +# fi # publish to npm -yarn run lerna publish --conventional-commits --conventional-graduate --no-private --dist-tag=latest --yes +# yarn run lerna publish --conventional-commits --conventional-graduate --no-private --dist-tag=latest --yes # immediately after promote - set up repo for next prerelease yarn run lerna version preminor --force-publish --conventional-commits --no-private --yes --preid prerelease diff --git a/.github/release.sh b/.github/release.sh index 534a95074cf..506097c32a9 100755 --- a/.github/release.sh +++ b/.github/release.sh @@ -20,7 +20,7 @@ PR_NUM=${LOG:1} yarn run lerna publish prerelease --preid=prerelease --dist-tag=prerelease --yes 2>&1 | tee lerna-output.txt # use lerna command below for dry run -# yarn run lerna version prerelease --preid=prerelease --yes --no-git-tag-version --no-push | tee lerna-output.txt +#yarn run lerna version prerelease --preid=prerelease --yes --no-git-tag-version --no-push | tee lerna-output.txt if grep -i "Successfully published" lerna-output.txt; # Leave a Github comment then diff --git a/.github/renovate.json b/.github/renovate.json index 6008bb83845..40c9e921143 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -1,93 +1,16 @@ { + "$schema": "https://docs.renovatebot.com/renovate-schema.json", "extends": [ - "config:base" + "config:recommended" ], - "enabledManagers": ["npm"], + "rangeStrategy": "bump", "packageRules": [ { - "packagePatterns": ["*"], - "excludePackagePatterns": [ - "@babel/*", - "@octokit/rest", - "@patternfly/patternfly", - "@patternfly/patternfly-a11y", - "@patternfly/documentation-framework", - "@rollup/*", - "@testing-library/jest-dom", - "@testing-library/user-event", - "@types/jest", - "@types/react", - "@types/react-dom", - "@typescript-eslint/eslint-plugin", - "@typescript-eslint/parser", - "eslint", - "eslint-plugin-prettier", - "eslint-plugin-react", - "fs-extra", - "lint-staged", - "mutation-observer", - "plop", - "prettier", - "react-dropzone", - "rollup", - "rollup-plugin-scss", - "rollup-plugin-terser", - "shx", - "surge", - "ts-patch" + "matchUpdateTypes": [ + "major" ], "enabled": false - }, - { - "groupName": "devDependencies", - "matchDatasources": ["npm"], - "automerge": true, - "matchPackagePatterns": [ - "@babel/*", - "@octokit/rest", - "@patternfly/patternfly-a11y", - "@patternfly/documentation-framework", - "@rollup/*", - "@testing-library/jest-dom", - "@testing-library/react-hooks", - "@testing-library/user-event", - "@types/jest", - "@types/react", - "@types/react-dom", - "@typescript-eslint/eslint-plugin", - "@typescript-eslint/parser", - "eslint", - "eslint-plugin-prettier", - "eslint-plugin-react", - "focus-trap", - "fs-extra", - "lint-staged", - "mutation-observer", - "plop", - "prettier", - "react-dropzone", - "rollup", - "rollup-plugin-scss", - "rollup-plugin-terser", - "shx", - "surge", - "ts-patch" - ] - }, - { - "matchDatasources": ["npm"], - "matchPackageNames": [ - "focus-trap", - "react-dropzone" - ] - }, - { - "matchDatasources": ["npm"], - "matchPackageNames": [ - "@patternfly/patternfly" - ], - "automerge": true, - "followTag": "prerelease" } - ] + ], + "baseBranches": ["main", "v5"] } diff --git a/.github/split.js b/.github/split.js deleted file mode 100644 index 11a6610de7c..00000000000 --- a/.github/split.js +++ /dev/null @@ -1,14 +0,0 @@ -const fs = require('fs'); -const path = require('path'); - -const BASE_DIR = path.join(__dirname, '../packages/react-integration/cypress/integration'); -const WORKER_NUM = +process.env['WORKER_NUM']; -const WORKER_COUNT = +process.env['WORKER_COUNT']; - -const testFiles = fs.readdirSync(BASE_DIR) - .sort() - .filter((_, i) => i % WORKER_COUNT === WORKER_NUM) - .map(f => path.join(BASE_DIR, f)); - -console.log(testFiles.join(' ')); - diff --git a/.github/split.mjs b/.github/split.mjs new file mode 100644 index 00000000000..46e12072955 --- /dev/null +++ b/.github/split.mjs @@ -0,0 +1,15 @@ +/* eslint-disable no-console */ +import fs from 'node:fs'; +import path from 'node:path'; + +const BASE_DIR = path.resolve(import.meta.dirname, '../packages/react-integration/cypress/integration'); +const WORKER_NUM = +process.env.WORKER_NUM; +const WORKER_COUNT = +process.env.WORKER_COUNT; + +const testFiles = fs + .readdirSync(BASE_DIR) + .sort() + .filter((_, i) => i % WORKER_COUNT === WORKER_NUM) + .map((f) => path.join(BASE_DIR, f)); + +console.log(testFiles.join(' ')); diff --git a/.github/stale.yml b/.github/stale.yml deleted file mode 100644 index f4e6ae06a53..00000000000 --- a/.github/stale.yml +++ /dev/null @@ -1,28 +0,0 @@ -# Configuration for probot-stale - https://github.com/probot/stale -# Number of days of inactivity before an Issue or Pull Request becomes stale -daysUntilStale: 60 - -# Number of days of inactivity before an Issue or Pull Request with the stale label is closed. -# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. -daysUntilClose: 14 - -# Issues with these labels will never be considered stale -exemptLabels: - - pinned - - security - - accessibility - - "breaking change :boom:" - -# Label to use when marking as stale -staleLabel: wontfix - -# Comment to post when marking as stale. Set to `false` to disable -markComment: > - This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. - -# Comment to post when closing a stale issue. Set to `false` to disable -closeComment: false - -# Limit the number of actions per hour, from 1-30. Default is 30 -limitPerRun: 30 diff --git a/.github/upload-preview.js b/.github/upload-preview.js deleted file mode 100644 index fafe1a2c797..00000000000 --- a/.github/upload-preview.js +++ /dev/null @@ -1,97 +0,0 @@ -const fs = require('fs'); -const path = require('path'); -const { Octokit } = require('@octokit/rest'); -const octokit = new Octokit({ auth: process.env.GH_PR_TOKEN }); -const surge = require('surge'); -const publishFn = surge().publish(); - -// From github actions -const ghrepo = process.env.GITHUB_REPOSITORY || ''; - -const owner = process.env.CIRCLE_PROJECT_USERNAME || ghrepo.split('/')[0]; // patternfly -const repo = process.env.CIRCLE_PROJECT_REPONAME || ghrepo.split('/')[1]; -const prnum = process.env.CIRCLE_PR_NUMBER || process.env.GH_PR_NUM; -const prbranch = process.env.CIRCLE_BRANCH || process.env.GITHUB_REF.split('/').pop(); - -const uploadFolder = process.argv[2]; -if (!uploadFolder) { - console.log('Usage: upload-preview uploadFolder'); - process.exit(1); -} - -const uploadFolderName = path.basename(uploadFolder); -let uploadURL = `${repo}-${prnum ? `pr-${prnum}` : prbranch}`.replace(/[\/|\.]/g, '-'); - -switch(uploadFolderName) { - case 'coverage': - uploadURL += '-a11y.surge.sh'; - break; - case 'public': - if (!prnum && prbranch === 'main') { - uploadURL = 'react-staging.patternfly.org'; - } - else { - uploadURL += '.surge.sh'; - } - break; - default: - uploadURL += `-${uploadFolderName}`; - uploadURL += '.surge.sh'; - break; -} - -publishFn({ - project: uploadFolder, - p: uploadFolder, - domain: uploadURL, - d: uploadURL, - e: 'https://surge.surge.sh', - endpoint: 'https://surge.surge.sh' -}); - -function tryAddComment(comment, commentBody) { - if (!commentBody.includes(comment)) { - return comment; - } - return ''; -} - -if (prnum) { - octokit.issues.listComments({ - owner, - repo, - issue_number: prnum - }) - .then(res => res.data) - .then(comments => { - let commentBody = ''; - const existingComment = comments.find(comment => comment.user.login === 'patternfly-build'); - if (existingComment) { - commentBody += existingComment.body.trim(); - commentBody += '\n\n'; - } - - if (uploadFolderName === 'public') { - commentBody += tryAddComment(`Preview: https://${uploadURL}`, commentBody); - } - else if (uploadFolderName === 'coverage') { - commentBody += tryAddComment(`A11y report: https://${uploadURL}`, commentBody); - } - - if (existingComment) { - octokit.issues.updateComment({ - owner, - repo, - comment_id: existingComment.id, - body: commentBody - }).then(() => console.log('Updated comment!')); - } else { - octokit.issues.createComment({ - owner, - repo, - issue_number: prnum, - body: commentBody - }).then(() => console.log('Created comment!')); - } - }); -} diff --git a/.github/upload-preview.mjs b/.github/upload-preview.mjs new file mode 100644 index 00000000000..056f705cf1c --- /dev/null +++ b/.github/upload-preview.mjs @@ -0,0 +1,98 @@ +/* eslint-disable no-console, camelcase */ +import { Octokit } from '@octokit/rest'; +import path from 'node:path'; +import surge from 'surge'; + +const octokit = new Octokit({ auth: process.env.GH_PR_TOKEN }); +const publishFn = surge().publish(); + +// From github actions +const ghrepo = process.env.GITHUB_REPOSITORY || ''; +const [owner, repo] = ghrepo.split('/'); +const prnum = process.env.GH_PR_NUM; +const prbranch = process.env.GITHUB_REF.split('/').pop(); + +const uploadFolder = process.argv[2]; +if (!uploadFolder) { + process.exit(1); +} + +const uploadFolderName = path.basename(uploadFolder); +let uploadURL = `${repo}-${prnum ? `pr-${prnum}` : prbranch}`.replace(/[/|.]/g, '-'); + +switch (uploadFolderName) { + case 'coverage': + uploadURL += '-a11y.surge.sh'; + break; + case 'public': + if (!prnum && prbranch === 'main') { + uploadURL = 'react-staging.patternfly.org'; + } else { + uploadURL += '.surge.sh'; + } + break; + default: + uploadURL += `-${uploadFolderName}`; + uploadURL += '.surge.sh'; + break; +} + +publishFn({ + project: uploadFolder, + p: uploadFolder, + domain: uploadURL, + d: uploadURL, + e: 'https://surge.surge.sh', + endpoint: 'https://surge.surge.sh' +}); + +function tryAddComment(comment, commentBody) { + if (!commentBody.includes(comment)) { + return comment; + } + return ''; +} + +if (prnum) { + octokit.issues + .listComments({ + owner, + repo, + issue_number: prnum + }) + .then((res) => res.data) + .then((comments) => { + let commentBody = ''; + const existingComment = comments.find((comment) => comment.user.login === 'patternfly-build'); + if (existingComment) { + commentBody += existingComment.body.trim(); + commentBody += '\n\n'; + } + + if (uploadFolderName === 'public') { + commentBody += tryAddComment(`Preview: https://${uploadURL}`, commentBody); + } else if (uploadFolderName === 'coverage') { + commentBody += tryAddComment(`A11y report: https://${uploadURL}`, commentBody); + } + + if (existingComment) { + octokit.issues + .updateComment({ + owner, + repo, + comment_id: existingComment.id, + body: commentBody + }) + .then(() => console.log('Updated comment!')); + } else { + octokit.issues + .createComment({ + owner, + repo, + issue_number: prnum, + body: commentBody + }) + .then(() => console.log('Created comment!')); + } + }); +} diff --git a/.github/workflows/add-new-issues-to-project.yml b/.github/workflows/add-new-issues-to-project.yml index fb7b6f2f3fc..114f1cce430 100644 --- a/.github/workflows/add-new-issues-to-project.yml +++ b/.github/workflows/add-new-issues-to-project.yml @@ -1,16 +1,38 @@ name: Add new issues to PatternFly Issues project - on: issues: types: - opened - jobs: add-to-project: name: Add issue to project runs-on: ubuntu-latest steps: - - uses: actions/add-to-project@v0.3.0 + - uses: actions/add-to-project@v1.0.2 with: project-url: https://github.com/orgs/patternfly/projects/7 github-token: ${{ secrets.GH_PROJECTS }} + label-issue: + runs-on: ubuntu-latest + steps: + - name: Team Membership Checker + # You may pin to the exact commit or the version. + # uses: TheModdingInquisition/actions-team-membership@a69636a92bc927f32c3910baac06bacc949c984c + uses: TheModdingInquisition/actions-team-membership@v1.0 + with: + # Repository token. GitHub Action token is used by default(recommended). But you can also use the other token(e.g. personal access token). + token: ${{ secrets.GH_READ_ORG_TOKEN }} + # The team to check for. + team: 'frequent-flyers' + # The organization of the team to check for. Defaults to the context organization. + organization: 'patternfly' + # If the action should exit if the user is not part of the team. + exit: true + + - name: Add label if user is a team member + run: | + curl -X POST \ + -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \ + -H "Accept: application/vnd.github.v3+json" \ + https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/labels \ + -d '{"labels":["PF Team"]}' diff --git a/.github/workflows/documentation.yml b/.github/workflows/documentation.yml new file mode 100644 index 00000000000..ba9dbe11555 --- /dev/null +++ b/.github/workflows/documentation.yml @@ -0,0 +1,49 @@ +name: Documentation +on: + pull_request_target: + workflow_call: + secrets: + SURGE_LOGIN: + required: true + SURGE_TOKEN: + required: true + GH_PR_TOKEN: + required: true +jobs: + deploy: + name: Build, test & deploy + runs-on: ubuntu-latest + env: + SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} + SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} + GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} + GH_PR_NUM: ${{ github.event.number }} + steps: + - name: Check out project from PR branch + if: github.event_name == 'pull_request_target' + uses: actions/checkout@v4 + with: + # Checkout the merge commit so that we can access the PR's changes. + # This is nessesary because `pull_request_target` checks out the base branch (e.g. `main`) by default. + ref: refs/pull/${{ env.GH_PR_NUM }}/head + + - name: Check out project + if: github.event_name != 'pull_request_target' + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Build documentation + run: yarn build:docs + + - name: Upload documentation + if: always() + run: node .github/upload-preview.mjs packages/react-docs/public + + - name: Run accessibility tests + run: yarn serve:docs & yarn test:a11y + + - name: Upload accessibility results + if: always() + run: node .github/upload-preview.mjs packages/react-docs/coverage diff --git a/.github/workflows/extensions.yml b/.github/workflows/extensions.yml index 3a436d5cf22..3f5632da74f 100644 --- a/.github/workflows/extensions.yml +++ b/.github/workflows/extensions.yml @@ -1,17 +1,15 @@ name: Add relevant issues to extensions project board - on: issues: types: - labeled - jobs: add-to-extensions: if: github.event.label.name == 'extension' name: Add issue to extensions board runs-on: ubuntu-latest steps: - - uses: actions/add-to-project@v0.3.0 + - uses: actions/add-to-project@v1.0.2 with: project-url: https://github.com/orgs/patternfly/projects/12 github-token: ${{ secrets.GH_PROJECTS }} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 00000000000..f0e9552023e --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,99 @@ +name: CI +on: + pull_request: + workflow_call: +jobs: + lint: + name: Lint + runs-on: ubuntu-latest + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up project + uses: ./.github/actions/setup-project + with: + skip-build: true + + - uses: actions/cache@v4 + name: Cache files proccesed by ESLint + with: + path: .eslintcache + key: ${{ runner.os }}-eslint-cache + + - name: Run linter + run: yarn lint:all + + build: + name: Build + runs-on: ubuntu-latest + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + unit-tests: + name: Unit tests + runs-on: ubuntu-latest + needs: build + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Run tests + run: yarn test --maxWorkers=2 + + demo-app: + name: Build demo app + runs-on: ubuntu-latest + needs: build + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Build demo app + run: yarn build:integration + + - name: Upload demo app + uses: actions/upload-artifact@v4 + with: + name: demo-app + path: packages/react-integration/demo-app-ts/dist + + integration-tests: + name: Integration tests + runs-on: ubuntu-latest + needs: demo-app + strategy: + fail-fast: false + matrix: + worker: [0, 1, 2, 3, 4] + steps: + - name: Check out project + uses: actions/checkout@v4 + + - name: Set up and build project + uses: ./.github/actions/setup-project + + - name: Download demo app + uses: actions/download-artifact@v4 + with: + name: demo-app + path: packages/react-integration/demo-app-ts/dist + + - name: Print environment variables + run: printenv + + - name: Run Cypress tests + run: yarn serve:integration & yarn test:integration -s $(node .github/split.mjs) + env: + WORKER_NUM: ${{ matrix.worker }} + WORKER_COUNT: 5 diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml deleted file mode 100644 index 2f400db2655..00000000000 --- a/.github/workflows/pr-preview.yml +++ /dev/null @@ -1,308 +0,0 @@ -### WARNING -- this file was generated by generate-workflows.js -name: build-test-deploy -on: pull_request_target -jobs: - build: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - lint: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: lint-cache - name: Load lint cache - with: - path: '.eslintcache' - key: ${{ runner.os }}-lint-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: ESLint - run: yarn lint:ts - - name: MDLint - run: yarn lint:md - - name: '@patternfly/patternfly versions match' - run: yarn lint:versions - test_jest: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: PF4 Jest Tests - run: yarn test --maxWorkers=2 - docs: - runs-on: ubuntu-latest - needs: build - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: docs-cache - name: Cache webpack - with: - path: '.cache' - key: ${{ runner.os }}-v4-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: Build docs - run: yarn build:docs - - name: Upload docs - run: node .github/upload-preview.js packages/react-docs/public - if: always() - - name: a11y tests - run: yarn serve:docs & yarn test:a11y - - name: Upload a11y results - run: node .github/upload-preview.js packages/react-docs/coverage - if: always() - demo_app: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Build demo app - run: yarn build:integration - - name: Upload demo app - uses: actions/upload-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - test_integration: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: demo_app - strategy: - fail-fast: false - matrix: - worker_num: [0, 1, 2, 3, 4] - worker_count: [5] - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Download demo app - uses: actions/download-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - - run: printenv - - name: Cypress tests - run: yarn serve:integration & yarn test:integration -s $(node .github/split.js) - env: - WORKER_NUM: ${{ matrix.worker_num }} - WORKER_COUNT: ${{ matrix.worker_count }} - diff --git a/.github/workflows/promote.yml b/.github/workflows/promote.yml index 8386cc2a3ad..7d85ee4d25f 100644 --- a/.github/workflows/promote.yml +++ b/.github/workflows/promote.yml @@ -1,28 +1,27 @@ -name: promote +name: Promote on: workflow_dispatch: inputs: - core-version: - description: 'The PatternFly core version' + patternfly-version: + description: The version of PatternFly (`@patternfly/patternfly`) to promote to. required: false jobs: deploy: runs-on: ubuntu-latest - env: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - CORE_VERSION: ${{ github.event.inputs.core-version }} - RELEASE_VERSION: ${{ github.event.inputs.version }} - GH_TOKEN: ${{ secrets.GH_TOKEN_REDALLEN }} steps: - - uses: actions/checkout@v3 + - name: Check out project + uses: actions/checkout@v4 with: - token: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - - uses: actions/setup-node@v3 + # Pass in an administrator token to get around branch protection. + token: ${{ secrets.GH_TOKEN_REDALLEN }} + + - name: Set up and build project + uses: ./.github/actions/setup-project with: - node-version: '18' - - name: Install deps - run: yarn install --frozen-lockfile - - name: Build dist - run: yarn build && yarn build:umd + skip-build-cache: true + - name: Deploy to NPM and Github run: .github/promote.sh + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + PATTERNFLY_VERSION: ${{ github.event.inputs.patternfly-version }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 6285416ac42..66e9c84d2df 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -1,356 +1,42 @@ -### WARNING -- this file was generated by generate-workflows.js -name: release +name: Release on: push: branches: - main +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true jobs: - build: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - lint: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: lint-cache - name: Load lint cache - with: - path: '.eslintcache' - key: ${{ runner.os }}-lint-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: ESLint - run: yarn lint:ts - - name: MDLint - run: yarn lint:md - - name: '@patternfly/patternfly versions match' - run: yarn lint:versions - test_jest: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: PF4 Jest Tests - run: yarn test --maxWorkers=2 + ci: + name: CI + uses: ./.github/workflows/main.yml + docs: - runs-on: ubuntu-latest - needs: build - env: - SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }} - SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }} - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} - GH_PR_NUM: ${{ github.event.number }} - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: docs-cache - name: Cache webpack - with: - path: '.cache' - key: ${{ runner.os }}-v4-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - name: Build docs - run: yarn build:docs - - name: Upload docs - run: node .github/upload-preview.js packages/react-docs/public - - name: a11y tests - run: yarn serve:docs & yarn test:a11y - if: "!contains(github.event.head_commit.message, 'skip-a11y')" - - name: Upload a11y results - run: node .github/upload-preview.js packages/react-docs/coverage - if: "!contains(github.event.head_commit.message, 'skip-a11y')" - demo_app: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: build - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Build demo app - run: yarn build:integration - - name: Upload demo app - uses: actions/upload-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - test_integration: - runs-on: ubuntu-latest - env: - GH_PR_NUM: ${{ github.event.number }} - needs: demo_app - strategy: - fail-fast: false - matrix: - worker_num: [0, 1, 2, 3, 4] - worker_count: [5] - steps: - - uses: actions/checkout@v2 - # Yes, we really want to checkout the PR - - run: | - if [[ ! -z "${GH_PR_NUM}" ]]; then - echo "Checking out PR" - git fetch origin pull/$GH_PR_NUM/head:tmp - git checkout tmp - fi - - uses: actions/setup-node@v1 - with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist - with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' - - name: Download demo app - uses: actions/download-artifact@v2 - with: - name: demo-app - path: packages/react-integration/demo-app-ts/public - - run: printenv - - name: Cypress tests - run: yarn serve:integration & yarn test:integration -s $(node .github/split.js) - env: - WORKER_NUM: ${{ matrix.worker_num }} - WORKER_COUNT: ${{ matrix.worker_count }} + name: Documentation + uses: ./.github/workflows/documentation.yml + secrets: inherit + deploy: + name: Deploy release runs-on: ubuntu-latest - needs: [lint, test_jest, docs, test_integration] - env: - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - GH_TOKEN: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} + needs: [ci, docs] steps: - - uses: actions/checkout@v2 - with: - token: ${{ secrets.GH_TOKEN_REDALLEN }} # needs to be an admin token to get around branch protection - fetch-depth: "0" - - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/* - - uses: actions/setup-node@v1 + - name: Check out project + uses: actions/checkout@v4 with: - node-version: '18' - - uses: actions/cache@v2 - id: yarn-cache - name: Cache npm deps - with: - path: | - node_modules - **/node_modules - ~/.cache/Cypress - key: ${{ runner.os }}-yarn-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock') }} - - run: yarn install --frozen-lockfile - if: steps.yarn-cache.outputs.cache-hit != 'true' - - uses: actions/cache@v2 - id: dist - name: Cache dist + # Fetch all history for all branches and tags, which is needed for the release script. + fetch-depth: 0 + # Pass in an administrator token to get around branch protection. + token: ${{ secrets.GH_TOKEN_REDALLEN }} + + - name: Set up and build project + uses: ./.github/actions/setup-project with: - path: | - packages/*/dist - packages/*/next - packages/*/deprecated - packages/*/components - packages/react-styles/css - packages/react-core/layouts - packages/react-core/helpers - key: ${{ runner.os }}-dist-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('yarn.lock', 'package.json', 'packages/*/*', '!packages/*/dist', '!packages/*/node_modules') }} - - name: Build dist - run: yarn build && yarn build:umd - if: steps.dist.outputs.cache-hit != 'true' + skip-build-cache: true + - name: Deploy to NPM and Github run: .github/release.sh - + env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }} + \ No newline at end of file diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 00000000000..f5642d8c9ad --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,18 @@ +name: Close stale issues and PRs +on: + schedule: + - cron: 37 11 * * * +jobs: + stale: + runs-on: ubuntu-latest + steps: + - uses: actions/stale@v9 + with: + days-before-stale: 60 + days-before-close: 14 + exempt-issue-labels: accessibility,breaking change :boom:,security,pinned + stale-issue-label: wontfix + stale-issue-message: This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. + stale-pr-message: This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. + close-issue-message: 'This issue has been closed because it has not had activity since being marked as stale.' + close-pr-message: 'This PR has been closed because it has not had activity since being marked as stale.' diff --git a/.gitignore b/.gitignore index ac4282c4b23..07168936c32 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,4 @@ lerna-debug.log .vscode # For vim *.swp +.yarn diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100644 index 00000000000..081c653b345 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1 @@ +yarn exec lint-staged diff --git a/.yarnrc.yml b/.yarnrc.yml new file mode 100644 index 00000000000..3186f3f0795 --- /dev/null +++ b/.yarnrc.yml @@ -0,0 +1 @@ +nodeLinker: node-modules diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b0b8205c972..a97a77bec58 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -130,7 +130,7 @@ To make contributing components and packages easier a generator utility has been To start the generator run: -```bash +```sh yarn generate ``` @@ -179,9 +179,9 @@ Please ensure that all React UI components contributed meet the following guidel Adhering to the following process is the best way to get your work included in the project: -1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: +1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, and configure the remotes: -```bash +```sh # Clone your fork of the repo into the current directory git clone https://github.com//patternfly-react.git # Navigate to the newly cloned directory @@ -192,15 +192,24 @@ git remote add upstream https://github.com/patternfly/patternfly-react.git git fetch upstream ``` -2. Create a branch: +2. Set up tooling -```text -$ git checkout -b my-branch upstream/main +[Install Node.js](https://nodejs.org/en/download/package-manager) version 20 (or higher), and make sure to [enable Corepack](https://nodejs.org/api/corepack.html). Then install the project dependencies and build it by running: + +```sh +yarn install +yarn build ``` -3. Generate your component +3. Create a branch: + +```sh +git checkout -b my-branch upstream/main +``` -```bash +4. Generate your component + +```sh # Run the tool to Generate the component scaffolding yarn generate ``` @@ -214,37 +223,37 @@ $ git checkout -b my-branch upstream/main ComponentName.md - Component Docs ``` -4. Develop your component. After development is complete, run build and ensure tests and lint standards pass. +5. Develop your component. After development is complete, run build and ensure tests and lint standards pass. -```text -$ yarn build -$ yarn test +```sh +yarn build +yarn test ``` Ensure no lint errors are introduced in `yarn-error.log` after running this command. ***Note to Windows users:*** you may need to change the path for the lint script in package.json to be `node_modules/eslint/bin/eslint` -5. Add a commit using `git commit`: +6. Add a commit using `git commit`: This project uses [`lerna`](https://lernajs.io/) to do automatic releases and generate a changelog based on the commit history. So we follow [a convention][3] for commit messages. Please follow this convention for your commit messages. -6. Rebase +7. Rebase Use `git rebase` (not `git merge`) to sync your work from time to time. Ensure all commits related to a single issue have been [squashed](https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit). -```text -$ git fetch upstream -$ git rebase upstream/main +```sh +git fetch upstream +git rebase upstream/main ``` -7. Push +8. Push -```text -$ git push origin my-branch +```sh +git push origin my-branch ``` -8. Create a pull request +9. Create a pull request [Open a pull request](https://help.github.com/articles/using-pull-requests/) with a clear title and description against the `main` branch. Please be sure to include all of the following in your PR: diff --git a/GETTING-STARTED.md b/GETTING-STARTED.md index 1b12f973a3c..abd574d3573 100644 --- a/GETTING-STARTED.md +++ b/GETTING-STARTED.md @@ -38,7 +38,3 @@ PatternFly React has 3 linters you can run all at once using `yarn lint:all`. Th ### ESLint ESLint is run on .js, .jsx, .ts, and .tsx files. It uses the [@typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) parser with custom config added over the years. We write some of our own ESLint rules in `eslint-plugin-patternfly-react`. You can run this linter with `yarn lint:ts` or on specific files with `yarn lint `. - -### Version lint - -The `@patternfly` version linter is run on all `package.json` files to ensure that versions of all `@patternfly/*` packages match. This is done to prevent mismatching versions of essential PatternFly packages from accidentally being published. You can run this linter with `yarn lint:versions`. diff --git a/README.md b/README.md index 2266457010f..860aaec83aa 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ This project provides a set of React components for the [PatternFly project](htt 1. [PatternFly React packages](#patternfly-react-packages) 2. [Setup](#Setup) 3. [Contribution guidelines](#Contribution-guidelines) -4. [License](#License) +4. [License](#License) Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/blob/patternfly-3/README.md). @@ -44,8 +44,8 @@ Before you begin, check out this [overview of PatternFly](http://patternfly.org/ #### Install a package manager Install a package manager before using the PatternFly libraries. -* [Use npm](https://nodejs.org/en/download) -* [Use Yarn](https://yarnpkg.com/en/docs/getting-started) +* [Use npm](https://nodejs.org/en/download/package-manager) +* [Use Yarn](https://yarnpkg.com/getting-started/install) #### Start with PatternFly React seed @@ -70,7 +70,7 @@ If you want to start with your existing project, skip to [Install and configure ``` npm install @patternfly/react-core --save ``` - + **OR** * Using yarn, run the following command to install: @@ -81,7 +81,8 @@ If you want to start with your existing project, skip to [Install and configure Once the library is installed, use the specific setup instructions for that library to access the components it contains. These can be found in the readme for each [library](#patternfly-react-packages). ### Contribution guidelines -All React contributors must first be [PatternFly community contributors](https://www.patternfly.org/contribute/about). If you're already a PatternFly community contributor, check out the [React contribution guidelines](https://github.com/patternfly/patternfly-react/tree/main/CONTRIBUTING.md) to make React contributions. +All React contributors must first be [PatternFly community contributors](https://www.patternfly.org/get-started/contribute/contributing-to-patternfly). If you're already a PatternFly community contributor, check out the [React contribution guidelines](https://github.com/patternfly/patternfly-react/tree/main/CONTRIBUTING.md) to make React contributions. ### License PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE). + diff --git a/babel.config.js b/babel.config.js index c03fd5c5ab3..a5caef7249f 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,20 +1,4 @@ module.exports = { - presets: [ - [ - '@babel/preset-env', - { - targets: { - esmodules: true - } - } - ], - '@babel/preset-typescript', - '@babel/preset-react' - ], - plugins: [ - ['@babel/plugin-proposal-decorators', { legacy: true }], - '@babel/plugin-proposal-optional-chaining', - '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-object-rest-spread' - ] + presets: ['@babel/preset-typescript', '@babel/preset-react'], + plugins: ['@babel/plugin-transform-modules-commonjs'] }; diff --git a/eslint.config-md.mjs b/eslint.config-md.mjs new file mode 100644 index 00000000000..9fcc90a813d --- /dev/null +++ b/eslint.config-md.mjs @@ -0,0 +1,36 @@ +import markdown from 'eslint-plugin-markdown'; +import patternflyReact from 'eslint-plugin-patternfly-react'; +import react from 'eslint-plugin-react'; +import tseslint from 'typescript-eslint'; + +export default [ + { + ignores: ['.history/*'] + }, + ...markdown.configs.recommended, + { + plugins: { + react, + 'patternfly-react': patternflyReact + }, + languageOptions: { + parser: tseslint.parser + }, + settings: { + react: { + version: 'detect' + } + }, + rules: { + 'eol-last': 'error', + 'spaced-comment': 'error', + 'no-unused-vars': 'off', + 'no-this-before-super': 'error', + 'patternfly-react/import-tokens-icons': 'error', + 'react/jsx-uses-react': 'error', + 'react/jsx-uses-vars': 'error', + 'react/no-unknown-property': 'error', + 'react/jsx-no-undef': 'error' + } + } +]; diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000000..3ba59a8a05e --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,157 @@ +import { fixupPluginRules } from '@eslint/compat'; +import js from '@eslint/js'; +import patternflyReact from 'eslint-plugin-patternfly-react'; +import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'; +import reactHooks from 'eslint-plugin-react-hooks'; +import reactRecommended from 'eslint-plugin-react/configs/recommended.js'; +import testingLibrary from 'eslint-plugin-testing-library'; +import globals from 'globals'; +import tseslint from 'typescript-eslint'; + +export default [ + { + ignores: [ + '**/dist', + '**/css', + 'packages/react-core/src/helpers/Popper/thirdparty', + 'packages/react-docs/patternfly-docs/generated', + '.history/*', + 'packages/react-docs/static' + ] + }, + js.configs.recommended, + ...tseslint.configs.recommended, + reactRecommended, + eslintPluginPrettierRecommended, + { + plugins: { + 'patternfly-react': fixupPluginRules(patternflyReact), + 'react-hooks': fixupPluginRules(reactHooks) + }, + languageOptions: { + globals: { + ...globals.browser, + ...globals.node, + ...globals.jest + } + }, + settings: { + react: { + version: 'detect' + } + }, + rules: { + ...reactHooks.configs.recommended.rules, + '@typescript-eslint/ban-ts-comment': 'off', + '@typescript-eslint/adjacent-overload-signatures': 'error', + '@typescript-eslint/array-type': 'error', + '@typescript-eslint/ban-types': 'off', + '@typescript-eslint/consistent-type-assertions': 'error', + '@typescript-eslint/consistent-type-definitions': 'error', + '@typescript-eslint/explicit-member-accessibility': 'off', + '@typescript-eslint/explicit-module-boundary-types': 'off', + '@typescript-eslint/indent': 'off', + '@typescript-eslint/no-duplicate-enum-values': 'off', + '@typescript-eslint/no-empty-function': 'off', + '@typescript-eslint/no-empty-interface': 'off', + '@typescript-eslint/no-explicit-any': 'off', + '@typescript-eslint/no-inferrable-types': 'off', + '@typescript-eslint/no-misused-new': 'error', + '@typescript-eslint/no-namespace': 'error', + '@typescript-eslint/no-unused-vars': [ + 'error', + { + argsIgnorePattern: '^_' + } + ], + '@typescript-eslint/no-use-before-define': 'off', + '@typescript-eslint/no-var-requires': 'off', + '@typescript-eslint/prefer-for-of': 'error', + '@typescript-eslint/prefer-function-type': 'error', + '@typescript-eslint/prefer-namespace-keyword': 'error', + '@typescript-eslint/unified-signatures': 'error', + '@typescript-eslint/explicit-function-return-type': 'off', + 'arrow-body-style': 'error', + camelcase: [ + 'error', + { + ignoreDestructuring: true + } + ], + 'constructor-super': 'error', + curly: 'error', + 'dot-notation': 'error', + eqeqeq: ['error', 'smart'], + 'guard-for-in': 'error', + 'max-classes-per-file': ['error', 1], + 'max-len': 'off', + 'no-nested-ternary': 'error', + 'no-bitwise': 'error', + 'no-caller': 'error', + 'no-cond-assign': 'error', + 'no-console': 'error', + 'no-debugger': 'error', + 'no-empty': 'error', + 'no-eval': 'error', + 'no-new-wrappers': 'error', + 'no-prototype-builtins': 'off', + 'no-shadow': 'off', + 'no-throw-literal': 'error', + 'no-trailing-spaces': 'off', + 'no-undef-init': 'error', + 'no-constant-binary-expression': 'off', + 'no-unsafe-finally': 'error', + 'no-unused-expressions': [ + 'error', + { + allowTernary: true, + allowShortCircuit: true + } + ], + 'no-unused-labels': 'error', + 'no-var': 'error', + 'object-shorthand': 'error', + 'one-var': ['error', 'never'], + 'patternfly-react/import-tokens-icons': 'error', + 'patternfly-react/no-anonymous-functions': 'error', + 'prefer-const': 'error', + radix: ['error', 'as-needed'], + 'react/prop-types': 0, + 'react/display-name': 0, + 'react-hooks/exhaustive-deps': 'warn', + 'react/no-unescaped-entities': ['error', { forbid: ['>', '}'] }], + 'spaced-comment': 'error', + 'use-isnan': 'error', + 'patternfly-react/no-layout-effect': 'error', + 'valid-typeof': 'off' + } + }, + { + files: ['**/examples/*', '**/demos/examples/**/*'], + rules: { + 'patternfly-react/no-anonymous-functions': 'off' + } + }, + { + files: ['**/*.test.[jt]s?(x)'], + plugins: { + 'testing-library': fixupPluginRules(testingLibrary) + }, + rules: { + ...testingLibrary.configs.react.rules, + '@typescript-eslint/no-unused-vars': 'off', + 'testing-library/no-node-access': 'off', + 'react/jsx-key': 'off', + 'react/no-children-prop': 'off', + 'no-console': 'off' + } + }, + { + files: ['packages/react-integration/demo-app-ts/**/*'], + rules: { + 'patternfly-react/no-anonymous-functions': 'off', + 'react/react-in-jsx-scope': 'off', + 'spaced-comment': 'off' + } + } +]; diff --git a/jest.config.js b/jest.config.js deleted file mode 100644 index 620b84b3b63..00000000000 --- a/jest.config.js +++ /dev/null @@ -1,24 +0,0 @@ -module.exports = { - collectCoverage: true, - coverageReporters: ['lcov'], - clearMocks: true, - testMatch: ['**/__tests__/**/*.{js,ts}?(x)', '**/*.test.{js,ts}?(x)'], - modulePathIgnorePatterns: [ - '/packages/*.*/dist/*.*', - '/packages/*.*/public/*.*', - '/packages/*.*/.cache/*.*' - ], - roots: ['/packages'], - transform: { - '^.+\\.[jt]sx?$': 'babel-jest', - '^.+\\.svg$': 'jest-transform-stub' - }, - setupFilesAfterEnv: ['/packages/testSetup.ts'], - transformIgnorePatterns: ['node_modules/(?!@patternfly|@novnc|@popperjs|lodash|monaco-editor|react-monaco-editor)'], - testPathIgnorePatterns: ['/packages/react-integration/'], - coveragePathIgnorePatterns: ['/dist/'], - moduleNameMapper: { - '\\.(css|less)$': '/packages/react-styles/__mocks__/styleMock.js' - }, - testEnvironment: 'jsdom' -}; diff --git a/jest.config.ts b/jest.config.ts new file mode 100644 index 00000000000..fb0926a5ee7 --- /dev/null +++ b/jest.config.ts @@ -0,0 +1,32 @@ +/** + * For a detailed explanation regarding each configuration property, visit: + * https://jestjs.io/docs/configuration + */ +import type { Config } from 'jest'; + +const config: Config = { + collectCoverage: true, + coverageReporters: ['lcov'], + clearMocks: true, + testMatch: ['**/__tests__/**/*.{js,ts}?(x)', '**/*.test.{js,ts}?(x)'], + modulePathIgnorePatterns: [ + '/packages/*.*/dist/*.*', + '/packages/*.*/public/*.*', + '/packages/*.*/.cache/*.*' + ], + roots: ['/packages'], + transform: { + '^.+\\.m?[jt]sx?$': 'babel-jest', + '^.+\\.svg$': 'jest-transform-stub' + }, + setupFilesAfterEnv: ['/packages/testSetup.ts'], + testPathIgnorePatterns: ['/packages/react-integration/'], + transformIgnorePatterns: ['node_modules/victory-*/', '/node_modules/(?!(case-anything)/)'], + coveragePathIgnorePatterns: ['/dist/'], + moduleNameMapper: { + '\\.(css|less)$': '/packages/react-styles/__mocks__/styleMock.js' + }, + testEnvironment: 'jsdom' +}; + +export default config; diff --git a/lerna.json b/lerna.json index 96a1d87ef8b..69ac0a90549 100644 --- a/lerna.json +++ b/lerna.json @@ -24,7 +24,7 @@ } }, "version": "independent", - "allowBranch": ["main", "v4", "5.0.x"], + "allowBranch": ["main", "v4", "5.0.x", "v5"], "packages": ["packages/*", "packages/react-integration/demo-app-ts"], "$schema": "node_modules/lerna/schemas/lerna-schema.json" } diff --git a/package.json b/package.json index 45f13ae3a79..e6cd04e6367 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,9 @@ "url": "https://github.com/patternfly/patternfly-react.git" }, "engines": { - "node": ">=18.0.0", - "yarn": ">=1.6.0" + "node": ">=20.17.0" }, + "packageManager": "yarn@4.5.0", "keywords": [ "react", "patternfly", @@ -24,53 +24,65 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "devDependencies": { - "@babel/core": "^7.21.8", - "@babel/plugin-proposal-class-properties": "^7.18.6", - "@babel/plugin-proposal-decorators": "^7.21.0", - "@babel/plugin-proposal-object-rest-spread": "^7.20.7", - "@babel/plugin-proposal-optional-chaining": "^7.21.0", - "@babel/plugin-proposal-private-methods": "^7.18.6", - "@babel/plugin-proposal-private-property-in-object": "^7.21.0", - "@babel/preset-env": "^7.21.5", - "@babel/preset-react": "^7.18.6", - "@babel/preset-typescript": "^7.21.5", - "@octokit/rest": "^20.0.0", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "14.5.1", - "@types/jest": "29.5.5", - "@types/react": "^18", - "@types/react-dom": "^18", - "@typescript-eslint/eslint-plugin": "^5.59.2", - "@typescript-eslint/parser": "^5.59.2", - "babel-jest": "^27.2.5", + "@babel/core": "^7.24.7", + "@babel/plugin-transform-modules-commonjs": "^7.24.7", + "@babel/preset-react": "^7.24.7", + "@babel/preset-typescript": "^7.24.7", + "@eslint/compat": "^1.1.1", + "@eslint/js": "^9.11.1", + "@octokit/rest": "^20.1.1", + "@rollup/plugin-commonjs": "^26.0.3", + "@rollup/plugin-node-resolve": "^15.3.0", + "@rollup/plugin-replace": "^5.0.7", + "@rollup/plugin-terser": "^0.4.4", + "@testing-library/dom": "^10.4.0", + "@testing-library/jest-dom": "^6.5.0", + "@testing-library/react": "^16.0.1", + "@testing-library/user-event": "^14.5.2", + "@types/jest": "29.5.13", + "@types/node": "^20.16.9", + "@types/react": "^18.3.9", + "@types/react-dom": "^18.3.0", + "babel-jest": "^29.7.0", + "concurrently": "^8.2.2", + "eslint": "^9.11.1", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-markdown": "^5.1.0", + "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-react": "^7.36.1", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-testing-library": "^6.3.0", + "fs-extra": "^11.2.0", + "glob": "^10.4.5", + "globals": "^15.9.0", + "husky": "^9.1.6", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "jest-transform-stub": "^2.0.0", - "concurrently": "^7.6.0", - "eslint": "^8.39.0", - "eslint-plugin-markdown": "^3.0.0", - "eslint-plugin-prettier": "^5.0.0", - "eslint-plugin-react": "^7.32.2", - "fs-extra": "^11.1.1", - "glob": "^9.3.0", - "husky": "^4.3.0", - "jest": "27.2.5", - "jest-cli": "27.2.5", - "lerna": "^7.1.5", - "lint-staged": "^14.0.0", + "lerna": "^8.1.8", + "lint-staged": "^15.2.10", "mutation-observer": "^1.0.3", - "plop": "^3.1.2", - "prettier": "^3.0.0", - "react": "^18", - "react-dom": "^18", - "surge": "^0.23.1", - "ts-patch": "^2.1.0", - "typescript": "^4.7.4" + "plop": "^4.0.1", + "prettier": "^3.3.3", + "publint": "^0.2.11", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "rimraf": "^5.0.10", + "rollup": "^4.22.4", + "rollup-plugin-scss": "^4.0.0", + "rollup-plugin-svg": "^2.0.0", + "sass": "^1.79.3", + "surge": "^0.24.6", + "ts-node": "^10.9.2", + "ts-patch": "^3.2.1", + "typescript": "^5.4.5", + "typescript-eslint": "^7.18.0" }, "scripts": { "build": "yarn clean && yarn build:generate && yarn build:esm && yarn build:cjs && yarn build:subpaths && yarn build:single:packages", "build:cjs": "tsc --build --verbose packages/tsconfig.cjs.json", "build:esm": "tsc --build --verbose packages/tsconfig.json", - "build:integration": "lerna run build:demo-app --stream", + "build:integration": "lerna run build --scope=demo-app-ts --stream", "build:docs": "yarn workspace @patternfly/react-docs build:docs", "build:generate": "lerna run generate --parallel --stream", "build:subpaths": "lerna run subpaths --parallel --stream", @@ -79,18 +91,18 @@ "clean": "yarn clean:build && lerna run clean --parallel", "clean:build": "rimraf .cache .eslintcache coverage", "generate": "yarn plop", - "lint": "node --max-old-space-size=4096 node_modules/.bin/eslint --ext js,jsx,ts,tsx --cache", - "lint:all": "yarn lint:md && yarn lint:versions && yarn lint:ts", - "lint:md": "yarn eslint packages --ext md --no-eslintrc --config .eslintrc-md.json --cache", + "lint": "eslint . --cache --cache-strategy content", + "lint:all": "yarn lint:md && yarn lint:ts", + "lint:md": "eslint \"**/*.md\" --config eslint.config-md.mjs --cache --cache-strategy content --no-warn-ignored", "lint:ts": "yarn lint packages/*/src", - "lint:versions": "node scripts/verifyPatternflyVersions.js", - "prepare": "ts-patch install -s", + "lint:tests": "yarn lint packages/*/src/components/*/__tests__/*.test.*", + "lint:publication": "yarn workspaces foreach --all --no-private --parallel exec publint --strict", + "postinstall": "ts-patch install -s && husky", "serve:docs": "yarn workspace @patternfly/react-docs serve", - "serve:integration": "lerna run serve:demo-app", + "serve:integration": "lerna run preview --scope=demo-app-ts", "start": "yarn build && concurrently --kill-others \"yarn watch\" \"yarn workspace @patternfly/react-docs develop\"", "start:cypress": "lerna run cypress:open", - "start:demo-app": "lerna run start:demo-app --stream", - "start:demo-app:hot": "lerna run start:demo-app:hot --stream", + "start:demo-app": "lerna run dev --scope=demo-app-ts --stream", "test": "TZ=EST LC_ALL=en_US.UTF8 jest packages", "test:a11y": "lerna run test:a11y --stream", "test:integration": "yarn workspace @patternfly/react-integration test:integration", @@ -98,20 +110,14 @@ "watch": "yarn build:esm --watch", "screenshots": "yarn workspace @patternfly/react-docs screenshots" }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } - }, "lint-staged": { "*.md": "yarn lint:md --fix", - "*.{js,jsx,ts,tsx}": "yarn lint --fix", - "*.json": "yarn lint:versions --fix" + "*.{js,jsx,ts,tsx}": "yarn lint --fix" }, "workspaces": { "packages": [ - "packages/**" + "packages/*", + "packages/react-integration/demo-app-ts" ] - }, - "dependencies": {} + } } diff --git a/packages/eslint-plugin-patternfly-react/CHANGELOG.md b/packages/eslint-plugin-patternfly-react/CHANGELOG.md index 8cf872d3407..41da0941a3d 100644 --- a/packages/eslint-plugin-patternfly-react/CHANGELOG.md +++ b/packages/eslint-plugin-patternfly-react/CHANGELOG.md @@ -3,6 +3,92 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [6.0.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@6.0.0-prerelease.1...eslint-plugin-patternfly-react@6.0.0-prerelease.2) (2024-09-10) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# [6.0.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.2.0-alpha.7...eslint-plugin-patternfly-react@6.0.0-prerelease.1) (2024-09-07) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# [5.2.0-alpha.7](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.2.0-alpha.6...eslint-plugin-patternfly-react@5.2.0-alpha.7) (2024-08-12) + +- chore(eslint-plugin)!: remove dependencies from ESLint plugin (#10752) ([61a6194](https://github.com/patternfly/patternfly-react/commit/61a61941022d19f8c120db2d2712d1d707e9d5f6)), closes [#10752](https://github.com/patternfly/patternfly-react/issues/10752) [#10740](https://github.com/patternfly/patternfly-react/issues/10740) + +### BREAKING CHANGES + +- this removes the bundled dependencies and pre-defined rules from the ESLint 'reccomended' configuration. + +Signed-off-by: Jon Koops + +# [5.2.0-alpha.6](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.2.0-alpha.5...eslint-plugin-patternfly-react@5.2.0-alpha.6) (2024-08-08) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# [5.2.0-alpha.5](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.2.0-alpha.4...eslint-plugin-patternfly-react@5.2.0-alpha.5) (2024-07-22) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# [5.2.0-alpha.4](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.2.0-alpha.3...eslint-plugin-patternfly-react@5.2.0-alpha.4) (2024-06-25) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# [5.2.0-alpha.3](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.2.0-alpha.2...eslint-plugin-patternfly-react@5.2.0-alpha.3) (2024-05-31) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# 5.2.0-alpha.2 (2024-04-22) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# 5.3.0-prerelease.0 (2024-02-02) + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +## 5.2.1 (2024-02-02) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +## 5.2.1-prerelease.0 (2024-02-02) + +### Reverts + +- Revert release attempt (#10062) ([1cd0691](https://github.com/patternfly/patternfly-react/commit/1cd0691ebc90b323682c54b43295a6afd174a120)), closes [#10062](https://github.com/patternfly/patternfly-react/issues/10062) + +# 5.2.0-alpha.1 (2024-03-08) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +# [5.2.0-alpha.0](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@6.0.0-alpha.1...eslint-plugin-patternfly-react@5.2.0-alpha.0) (2023-11-16) + +### Reverts + +- Revert "Merge remote-tracking branch 'upstream/main' into v6" (#9791) ([b7e8065](https://github.com/patternfly/patternfly-react/commit/b7e80650d3e4cad7a657f6e5a3177485ca4f8c26)), closes [#9791](https://github.com/patternfly/patternfly-react/issues/9791) + +# 6.0.0-alpha.1 (2023-09-29) + +### Bug Fixes + +- Release alphas from v6 and rebase from main ([#9692](https://github.com/patternfly/patternfly-react/issues/9692)) ([bb022ff](https://github.com/patternfly/patternfly-react/commit/bb022ffc65da8e8c5b5c984412f936cea9424676)), closes [#9651](https://github.com/patternfly/patternfly-react/issues/9651) [#9627](https://github.com/patternfly/patternfly-react/issues/9627) [#9555](https://github.com/patternfly/patternfly-react/issues/9555) [#9543](https://github.com/patternfly/patternfly-react/issues/9543) [#9578](https://github.com/patternfly/patternfly-react/issues/9578) [#9519](https://github.com/patternfly/patternfly-react/issues/9519) [#9603](https://github.com/patternfly/patternfly-react/issues/9603) [#9655](https://github.com/patternfly/patternfly-react/issues/9655) [#9614](https://github.com/patternfly/patternfly-react/issues/9614) [#9606](https://github.com/patternfly/patternfly-react/issues/9606) [#9628](https://github.com/patternfly/patternfly-react/issues/9628) [#9635](https://github.com/patternfly/patternfly-react/issues/9635) [#9649](https://github.com/patternfly/patternfly-react/issues/9649) [#9642](https://github.com/patternfly/patternfly-react/issues/9642) [#9633](https://github.com/patternfly/patternfly-react/issues/9633) [#9637](https://github.com/patternfly/patternfly-react/issues/9637) [#9584](https://github.com/patternfly/patternfly-react/issues/9584) [#9284](https://github.com/patternfly/patternfly-react/issues/9284) + +# 5.3.0-prerelease.0 (2024-02-02) + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +## 5.2.1 (2024-02-02) + +**Note:** Version bump only for package eslint-plugin-patternfly-react + +## 5.2.1-prerelease.0 (2024-02-02) + +### Reverts + +- Revert release attempt (#10062) ([1cd0691](https://github.com/patternfly/patternfly-react/commit/1cd0691ebc90b323682c54b43295a6afd174a120)), closes [#10062](https://github.com/patternfly/patternfly-react/issues/10062) + # [5.2.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/eslint-plugin-patternfly-react@5.1.1...eslint-plugin-patternfly-react@5.2.0-prerelease.0) (2023-10-05) **Note:** Version bump only for package eslint-plugin-patternfly-react diff --git a/packages/eslint-plugin-patternfly-react/README.md b/packages/eslint-plugin-patternfly-react/README.md index f60a9ae6b58..33f126e2893 100644 --- a/packages/eslint-plugin-patternfly-react/README.md +++ b/packages/eslint-plugin-patternfly-react/README.md @@ -4,13 +4,13 @@ This package provides PatternFly React all ESLint rules bundled together for use ### Installing -``` +```sh yarn add -D eslint-plugin-patternfly-react ``` or -``` +```sh npm install eslint-plugin-patternfly-react --save-dev ``` @@ -34,17 +34,3 @@ module.exports = { extends: ['plugin:patternfly-react/recommended'] }; ``` - -### Building - -``` -yarn build -``` - -Note the build scripts for this are located in the root package.json under `yarn build`. - -### Publishing - -``` -yarn publish -``` diff --git a/packages/eslint-plugin-patternfly-react/lib/config/recommended.js b/packages/eslint-plugin-patternfly-react/lib/config/recommended.js index 23907a127aa..e415e98ac69 100644 --- a/packages/eslint-plugin-patternfly-react/lib/config/recommended.js +++ b/packages/eslint-plugin-patternfly-react/lib/config/recommended.js @@ -1,4 +1,5 @@ module.exports = { + plugins: ['patternfly-react'], rules: { 'patternfly-react/import-default-name': [ 'error', @@ -6,67 +7,6 @@ module.exports = { classnames: 'classNames', 'prop-types': 'PropTypes' } - ], - 'jsx-a11y/heading-has-content': 'off', - 'jsx-a11y/anchor-has-content': 'off', - 'jsx-a11y/anchor-is-valid': 'off', - 'jsx-a11y/label-has-for': 'off', - 'jsx-a11y/click-events-have-key-events': 'off', - 'jsx-a11y/no-static-element-interactions': 'off', - 'jsx-a11y/no-noninteractive-element-interactions': 'off', - 'import/no-extraneous-dependencies': [ - 'error', - { - devDependencies: true - } - ], - 'import/no-named-default': 'off', - 'import/prefer-default-export': 'off', - 'no-alert': 'off', - 'no-param-reassign': 'off', - 'no-plusplus': 'off', - 'no-prototype-builtins': 'off', - 'no-restricted-syntax': 'off', - 'no-underscore-dangle': 'off', - 'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }], - 'no-unused-vars': [ - 'error', - { - vars: 'all', - args: 'none', - ignoreRestSiblings: true - } - ], - 'no-use-before-define': 'off', - 'prettier/prettier': [ - 'error', - { semi: true, singleQuote: true, tabWidth: 2, trailingComma: 'none', useTabs: false, printWidth: 120 } - ], - 'react/no-array-index-key': 'off', - 'react/forbid-prop-types': 'off', - 'react/jsx-filename-extension': 'off', - 'react/jsx-uses-vars': 'error', - 'react/no-danger': 'off', - 'react/sort-comp': 'off', - 'react-hooks/rules-of-hooks': 'error', - 'react-hooks/exhaustive-deps': 'warn' - }, - extends: [ - 'standard', - 'standard-react', - 'standard-jsx', - 'airbnb', - 'plugin:jest/recommended', - 'prettier', - 'prettier/react', - 'plugin:react-hooks/recommended' - ], - env: { - es6: true, - browser: true, - node: true, - jest: true - }, - plugins: ['prettier', 'jest', 'react', 'react-hooks', 'patternfly-react'], - parser: '@babel/eslint-parser' + ] + } }; diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js b/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js index cf07f26733d..e0df907dcc2 100644 --- a/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js +++ b/packages/eslint-plugin-patternfly-react/lib/rules/import-default-name.js @@ -15,10 +15,11 @@ module.exports = { ] }, create(context) { + const sourceCode = context.sourceCode ?? context.getSourceCode(); const [importMap = {}] = context.options; return { ImportDeclaration(node) { - const defaultImport = node.specifiers.find(spec => spec.type === 'ImportDefaultSpecifier'); + const defaultImport = node.specifiers.find((spec) => spec.type === 'ImportDefaultSpecifier'); if (!defaultImport) { return; } @@ -33,9 +34,11 @@ module.exports = { received: receivedName }, fix(fixer) { - const [varDecl] = context.getDeclaredVariables(node); + const [varDecl] = sourceCode.getDeclaredVariables + ? sourceCode.getDeclaredVariables(node, fixer) + : context.getDeclaredVariables(); return [ - ...varDecl.references.map(ref => fixer.replaceText(ref.identifier, expectedName)), + ...varDecl.references.map((ref) => fixer.replaceText(ref.identifier, expectedName)), fixer.replaceText(defaultImport, expectedName) ]; } diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js b/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js index b15e733481f..911876d2ac3 100644 --- a/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js +++ b/packages/eslint-plugin-patternfly-react/lib/rules/import-tokens-icons.js @@ -12,7 +12,7 @@ function makeImport(specifier, moduleName) { res += '/dist/esm'; if (moduleName.includes('icon')) { res += '/icons/'; - res += specifier.imported.name.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`).replace(/^-/, ''); + res += specifier.imported.name.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`).replace(/^-/, ''); } else { res += `/${specifier.imported.name}`; } @@ -42,7 +42,7 @@ module.exports = { ImportDeclaration(node) { if (/@patternfly\/react-(tokens|icons)(\/dist\/(js|esm))?/.test(node.source.value)) { const esmSpecifiers = node.specifiers.filter( - specifier => + (specifier) => specifier.type === 'ImportSpecifier' && !( node.source.value.startsWith('@patternfly/react-icons') && @@ -56,7 +56,7 @@ module.exports = { fix(fixer) { return fixer.replaceText( node, - esmSpecifiers.map(spec => makeImport(spec, node.source.value)).join('\n') + esmSpecifiers.map((spec) => makeImport(spec, node.source.value)).join('\n') ); } }); diff --git a/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js b/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js index cd782a46a39..404922593c6 100644 --- a/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js +++ b/packages/eslint-plugin-patternfly-react/lib/rules/no-anonymous-functions.js @@ -16,6 +16,7 @@ module.exports = { ] }, create(context) { + const sourceCode = context.sourceCode ?? context.getSourceCode(); return { ExportNamedDeclaration(node) { if (!node.declaration) { @@ -39,12 +40,11 @@ module.exports = { typeAnnotation.typeAnnotation.typeName.left.name === 'React' && ['FunctionComponent', 'FC', 'SFC'].includes(typeAnnotation.typeAnnotation.typeName.right.name) ) { - const displayNameNode = context - .getSourceCode() - .ast.body.filter(n => n.type === 'ExpressionStatement') - .filter(n => n.expression.left) + const displayNameNode = sourceCode.ast.body + .filter((n) => n.type === 'ExpressionStatement') + .filter((n) => n.expression.left) .find( - n => n.expression.left.object.name === displayName && n.expression.left.property.name === 'displayName' + (n) => n.expression.left.object.name === displayName && n.expression.left.property.name === 'displayName' ); if (!displayNameNode) { context.report({ @@ -64,7 +64,7 @@ module.exports = { declaration.superClass.property.name === 'Component' ) { const classBody = declaration.body.body; - const displayNameNode = classBody.find(n => n.type === 'ClassProperty' && n.key.name === 'displayName'); + const displayNameNode = classBody.find((n) => n.type === 'ClassProperty' && n.key.name === 'displayName'); if (!displayNameNode) { context.report({ node, diff --git a/packages/eslint-plugin-patternfly-react/package.json b/packages/eslint-plugin-patternfly-react/package.json index 4b913dac375..a5529c005f3 100644 --- a/packages/eslint-plugin-patternfly-react/package.json +++ b/packages/eslint-plugin-patternfly-react/package.json @@ -1,15 +1,18 @@ { "name": "eslint-plugin-patternfly-react", - "version": "5.2.0-prerelease.0", - "private": false, - "main": "./lib/index.js", + "version": "6.0.0-prerelease.2", + "type": "commonjs", + "exports": { + ".": "./lib/index.js" + }, "license": "MIT", "publishConfig": { - "access": "public" + "access": "public", + "tag": "prerelease" }, "repository": { "type": "git", - "url": "https://github.com/patternfly/patternfly-react.git" + "url": "git+https://github.com/patternfly/patternfly-react.git" }, "author": "Red Hat", "keywords": [ @@ -21,25 +24,7 @@ "url": "https://github.com/patternfly/patternfly-react/issues" }, "homepage": "https://github.com/patternfly/patternfly-react/blob/main/packages/eslint-plugin/README.md", - "dependencies": { - "@babel/eslint-parser": "^7.19.1", - "eslint-config-airbnb": "^19.0.4", - "eslint-config-prettier": "^9.0.0", - "eslint-config-standard": "^17.0.0", - "eslint-config-standard-jsx": "^11.0.0", - "eslint-config-standard-react": "^13.0.0", - "eslint-plugin-import": "^2.13.0", - "eslint-plugin-jest": "^27.0.0", - "eslint-plugin-jsx-a11y": "^6.0.3", - "eslint-plugin-node": "^11.0.0", - "eslint-plugin-prettier": "^5.0.0", - "eslint-plugin-promise": "^6.0.0", - "eslint-plugin-react": "^7.7.0", - "eslint-plugin-react-hooks": "^4.1.2", - "eslint-plugin-rulesdir": "^0.2.0", - "eslint-plugin-standard": "^4.0.0" - }, "peerDependencies": { - "eslint": ">=5" + "eslint": ">=5.16.0" } } diff --git a/packages/react-charts/.gitignore b/packages/react-charts/.gitignore new file mode 100644 index 00000000000..3e0402f878e --- /dev/null +++ b/packages/react-charts/.gitignore @@ -0,0 +1,4 @@ +/deprecated +/echarts +/next +/victory diff --git a/packages/react-charts/CHANGELOG.md b/packages/react-charts/CHANGELOG.md index 26b119e9536..aef3cc890e4 100644 --- a/packages/react-charts/CHANGELOG.md +++ b/packages/react-charts/CHANGELOG.md @@ -3,6 +3,405 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [8.0.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.13...@patternfly/react-charts@8.0.0-prerelease.14) (2024-10-02) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.12...@patternfly/react-charts@8.0.0-prerelease.13) (2024-09-30) + +### Features + +- **charts:** import charts from @patternfly/react-charts/victory ([#11091](https://github.com/patternfly/patternfly-react/issues/11091)) ([2d3921b](https://github.com/patternfly/patternfly-react/commit/2d3921b7dab1733fce0a640e7d64d01fc21dbac1)) + +# [8.0.0-prerelease.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.11...@patternfly/react-charts@8.0.0-prerelease.12) (2024-09-26) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.10...@patternfly/react-charts@8.0.0-prerelease.11) (2024-09-24) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.9...@patternfly/react-charts@8.0.0-prerelease.10) (2024-09-19) + +### Bug Fixes + +- **charts:** defaultProps deprecation warning ([#11019](https://github.com/patternfly/patternfly-react/issues/11019)) ([#11027](https://github.com/patternfly/patternfly-react/issues/11027)) ([fc44673](https://github.com/patternfly/patternfly-react/commit/fc44673efe193d37e400b4e87c0f300a205eefbc)) + +# [8.0.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.8...@patternfly/react-charts@8.0.0-prerelease.9) (2024-09-18) + +### Bug Fixes + +- **generate tokens:** prefix tokens with a t\_ ([#11002](https://github.com/patternfly/patternfly-react/issues/11002)) ([0dac6b8](https://github.com/patternfly/patternfly-react/commit/0dac6b88b9f560975627c80c6e8ab816d8b78ac9)) + +# [8.0.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.7...@patternfly/react-charts@8.0.0-prerelease.8) (2024-09-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.6...@patternfly/react-charts@8.0.0-prerelease.7) (2024-09-11) + +### Bug Fixes + +- **charts:** victoryCreateContainer breakage (v6) ([#10925](https://github.com/patternfly/patternfly-react/issues/10925)) ([4a815fb](https://github.com/patternfly/patternfly-react/commit/4a815fb80f0c53c53947fcc53002111bfbf02a4d)) + +# [8.0.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.5...@patternfly/react-charts@8.0.0-prerelease.6) (2024-09-10) + +### Bug Fixes + +- **deps:** update dependency victory-chart to ^37.1.1 ([#10956](https://github.com/patternfly/patternfly-react/issues/10956)) ([ece3987](https://github.com/patternfly/patternfly-react/commit/ece39872f3b7ef6893d3deeedefb64baa60fbd67)) + +# [8.0.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.4...@patternfly/react-charts@8.0.0-prerelease.5) (2024-09-10) + +### Bug Fixes + +- **deps:** update dependency victory-box-plot to ^37.1.1 ([#10954](https://github.com/patternfly/patternfly-react/issues/10954)) ([fa15a66](https://github.com/patternfly/patternfly-react/commit/fa15a66a71f6bac482173bb01ced9b70101530f8)) + +# [8.0.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.3...@patternfly/react-charts@8.0.0-prerelease.4) (2024-09-10) + +### Bug Fixes + +- **deps:** update dependency victory-area to ^37.1.1 ([#10951](https://github.com/patternfly/patternfly-react/issues/10951)) ([4491d63](https://github.com/patternfly/patternfly-react/commit/4491d630cf58bb7729a66b93bda2f62a6b94e012)) +- **deps:** update dependency victory-bar to ^37.1.1 ([#10953](https://github.com/patternfly/patternfly-react/issues/10953)) ([8564fff](https://github.com/patternfly/patternfly-react/commit/8564fffd3deff057b52aac5d3dbbd0b2cb06ac0e)) + +# [8.0.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.2...@patternfly/react-charts@8.0.0-prerelease.3) (2024-09-10) + +### Bug Fixes + +- **deps:** update dependency victory-axis to ^37.1.1 ([#10952](https://github.com/patternfly/patternfly-react/issues/10952)) ([879e1e8](https://github.com/patternfly/patternfly-react/commit/879e1e88da35382d7475da63c89ecfa061ecf5a9)) + +# [8.0.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-prerelease.1...@patternfly/react-charts@8.0.0-prerelease.2) (2024-09-10) + +### Bug Fixes + +- **deps:** update dependency tslib to ^2.7.0 ([#10949](https://github.com/patternfly/patternfly-react/issues/10949)) ([024b3cc](https://github.com/patternfly/patternfly-react/commit/024b3cc4b1afd4ba9f2dc774c0842712d4fbab1a)) + +# [8.0.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.39...@patternfly/react-charts@8.0.0-prerelease.1) (2024-09-07) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.39](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.38...@patternfly/react-charts@8.0.0-alpha.39) (2024-08-27) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.38](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.37...@patternfly/react-charts@8.0.0-alpha.38) (2024-08-19) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.37](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.36...@patternfly/react-charts@8.0.0-alpha.37) (2024-08-08) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.35...@patternfly/react-charts@8.0.0-alpha.36) (2024-07-29) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.34...@patternfly/react-charts@8.0.0-alpha.35) (2024-07-29) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.33...@patternfly/react-charts@8.0.0-alpha.34) (2024-07-29) + +### Features + +- **MenuToggle:** replaced custom styles with text modifier V6 ([#10793](https://github.com/patternfly/patternfly-react/issues/10793)) ([95a204c](https://github.com/patternfly/patternfly-react/commit/95a204c166019a433facfdc77204ccb33ce1726e)) + +# [8.0.0-alpha.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.32...@patternfly/react-charts@8.0.0-alpha.33) (2024-07-22) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.31...@patternfly/react-charts@8.0.0-alpha.32) (2024-07-15) + +### Bug Fixes + +- **Toolbar:** updated for parity with Core updates ([#10674](https://github.com/patternfly/patternfly-react/issues/10674)) ([d508325](https://github.com/patternfly/patternfly-react/commit/d50832554af01c6beeb3a5a03f2cdfb41daffbf4)) + +# [8.0.0-alpha.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.30...@patternfly/react-charts@8.0.0-alpha.31) (2024-07-03) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.29...@patternfly/react-charts@8.0.0-alpha.30) (2024-07-03) + +### Bug Fixes + +- **Switch:** updated a11y by removing dynamic labeling ([#10646](https://github.com/patternfly/patternfly-react/issues/10646)) ([730ac69](https://github.com/patternfly/patternfly-react/commit/730ac69eb9544d4831b9eb5fac693fc76a5fe06c)) + +# [8.0.0-alpha.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.28...@patternfly/react-charts@8.0.0-alpha.29) (2024-07-02) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.27...@patternfly/react-charts@8.0.0-alpha.28) (2024-06-26) + +### Features + +- **Banner,Label:** rename cyan/gold to teal/yellow ([#10661](https://github.com/patternfly/patternfly-react/issues/10661)) ([3e76f17](https://github.com/patternfly/patternfly-react/commit/3e76f173f62b0f5e9aef9e43c597ae5b7fffee92)) + +# [8.0.0-alpha.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.26...@patternfly/react-charts@8.0.0-alpha.27) (2024-06-25) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.25...@patternfly/react-charts@8.0.0-alpha.26) (2024-06-12) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.24...@patternfly/react-charts@8.0.0-alpha.25) (2024-06-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.23...@patternfly/react-charts@8.0.0-alpha.24) (2024-06-05) + +### Bug Fixes + +- **charts:** renamed cyan to teal, gold to yellow ([#10518](https://github.com/patternfly/patternfly-react/issues/10518)) ([d407554](https://github.com/patternfly/patternfly-react/commit/d4075543aa02e6987abacde96011df2d0347e54a)) + +# [8.0.0-alpha.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.22...@patternfly/react-charts@8.0.0-alpha.23) (2024-05-31) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.22 (2024-05-23) + +### Features + +- **Toolbar:** updated spacer props to gap ([#10418](https://github.com/patternfly/patternfly-react/issues/10418)) ([29578a2](https://github.com/patternfly/patternfly-react/commit/29578a2f937456c07fb9c2d8f8ae23a1ad0b2b34)) + +# 8.0.0-alpha.21 (2024-05-21) + +### Features + +- **misc, TextContent:** update core version & text content updates ([#10378](https://github.com/patternfly/patternfly-react/issues/10378)) ([1f1b93c](https://github.com/patternfly/patternfly-react/commit/1f1b93c9f5f8bfeb686f7344bfc70152d5453df1)) + +# [8.0.0-alpha.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.19...@patternfly/react-charts@8.0.0-alpha.20) (2024-04-22) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.6 (2024-03-26) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.5 (2024-03-22) + +**Note:** Version bump only for package @patternfly/react-charts + +# [7.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.3.0-prerelease.3...@patternfly/react-charts@7.3.0-prerelease.4) (2024-03-05) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.3 (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.2 (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.1 (2024-02-14) + +### Bug Fixes + +- **charts:** adjust for Victory types changes ([#10082](https://github.com/patternfly/patternfly-react/issues/10082)) ([714eaca](https://github.com/patternfly/patternfly-react/commit/714eaca02f99f709a6aadc1d9dd58d25940f7403)) + +# 7.3.0-prerelease.0 (2024-02-02) + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.10 (2024-01-15) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.9 (2024-01-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.8 (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.7 (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.6 (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.19 (2024-04-02) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.18 (2024-03-27) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.16...@patternfly/react-charts@8.0.0-alpha.17) (2024-03-22) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.16 (2024-03-18) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.15 (2024-03-08) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.13...@patternfly/react-charts@8.0.0-alpha.14) (2024-02-21) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.13 (2024-02-21) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.12 (2024-02-16) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.11 (2024-01-31) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.9...@patternfly/react-charts@8.0.0-alpha.10) (2024-01-26) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.9 (2024-01-22) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.8 (2024-01-18) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.7 (2024-01-16) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.6 (2024-01-04) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.4...@patternfly/react-charts@8.0.0-alpha.5) (2023-12-20) + +**Note:** Version bump only for package @patternfly/react-charts + +# 8.0.0-alpha.4 (2023-12-13) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.2...@patternfly/react-charts@8.0.0-alpha.3) (2023-12-04) + +**Note:** Version bump only for package @patternfly/react-charts + +# [8.0.0-alpha.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@8.0.0-alpha.1...@patternfly/react-charts@8.0.0-alpha.2) (2023-11-16) + +### Reverts + +- Revert "Merge remote-tracking branch 'upstream/main' into v6" (#9791) ([b7e8065](https://github.com/patternfly/patternfly-react/commit/b7e80650d3e4cad7a657f6e5a3177485ca4f8c26)), closes [#9791](https://github.com/patternfly/patternfly-react/issues/9791) + +# 8.0.0-alpha.1 (2023-09-29) + +### Bug Fixes + +- Release alphas from v6 and rebase from main ([#9692](https://github.com/patternfly/patternfly-react/issues/9692)) ([bb022ff](https://github.com/patternfly/patternfly-react/commit/bb022ffc65da8e8c5b5c984412f936cea9424676)), closes [#9651](https://github.com/patternfly/patternfly-react/issues/9651) [#9627](https://github.com/patternfly/patternfly-react/issues/9627) [#9555](https://github.com/patternfly/patternfly-react/issues/9555) [#9543](https://github.com/patternfly/patternfly-react/issues/9543) [#9578](https://github.com/patternfly/patternfly-react/issues/9578) [#9519](https://github.com/patternfly/patternfly-react/issues/9519) [#9603](https://github.com/patternfly/patternfly-react/issues/9603) [#9655](https://github.com/patternfly/patternfly-react/issues/9655) [#9614](https://github.com/patternfly/patternfly-react/issues/9614) [#9606](https://github.com/patternfly/patternfly-react/issues/9606) [#9628](https://github.com/patternfly/patternfly-react/issues/9628) [#9635](https://github.com/patternfly/patternfly-react/issues/9635) [#9649](https://github.com/patternfly/patternfly-react/issues/9649) [#9642](https://github.com/patternfly/patternfly-react/issues/9642) [#9633](https://github.com/patternfly/patternfly-react/issues/9633) [#9637](https://github.com/patternfly/patternfly-react/issues/9637) [#9584](https://github.com/patternfly/patternfly-react/issues/9584) [#9284](https://github.com/patternfly/patternfly-react/issues/9284) + +## [7.1.1-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@7.1.1-prerelease.8...@patternfly/react-charts@7.1.1-prerelease.9) (2023-09-22) + +### Features + +- **charts:** add RTL legend support ([#9570](https://github.com/patternfly/patternfly-react/issues/9570)) ([99d8d97](https://github.com/patternfly/patternfly-react/commit/99d8d975eeb2d562357cdcaa37502748d5794564)) + +## 7.1.1-prerelease.8 (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.7 (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.6 (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.8 (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.7 (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.6 (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.10 (2024-01-15) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.9 (2024-01-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.8 (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.7 (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.6 (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.3 (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.2 (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.3.0-prerelease.1 (2024-02-14) + +### Bug Fixes + +- **charts:** adjust for Victory types changes ([#10082](https://github.com/patternfly/patternfly-react/issues/10082)) ([714eaca](https://github.com/patternfly/patternfly-react/commit/714eaca02f99f709a6aadc1d9dd58d25940f7403)) + +# 7.3.0-prerelease.0 (2024-02-02) + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.10 (2024-01-15) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.9 (2024-01-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.8 (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.7 (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-charts + +# 7.2.0-prerelease.6 (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-charts + # 7.2.0-prerelease.5 (2023-10-26) **Note:** Version bump only for package @patternfly/react-charts diff --git a/packages/react-charts/README.md b/packages/react-charts/README.md index f4afdae7292..ddbd5732424 100644 --- a/packages/react-charts/README.md +++ b/packages/react-charts/README.md @@ -2,30 +2,15 @@ This package provides PatternFly charting components for [PatternFly][patternfly]. -### Prerequisite - -#### Node Environment - -This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react. - -For example, to develop with Node 8, use the following: - -``` -nvm install 8 -nvm use 8 -``` - -This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/). - ### Installing -``` +```sh yarn add @patternfly/react-charts ``` or -``` +```sh npm install @patternfly/react-charts --save ``` @@ -42,7 +27,7 @@ import '@patternfly/react-core/dist/styles/base.css'; #### Example Component Usage ```js -import { Area } from '@patternfly/react-charts'; +import { Area } from '@patternfly/react-charts/victory'; export default ; diff --git a/packages/react-charts/package.json b/packages/react-charts/package.json index 077d857ed12..4ef95f342a7 100644 --- a/packages/react-charts/package.json +++ b/packages/react-charts/package.json @@ -1,17 +1,25 @@ { "name": "@patternfly/react-charts", - "version": "7.2.0-prerelease.5", + "version": "8.0.0-prerelease.14", "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.", "main": "dist/js/index.js", "module": "dist/esm/index.js", "types": "dist/esm/index.d.ts", + "typesVersions": { + "*": { + "victory": [ + "dist/esm/victory/index.d.ts" + ] + } + }, "patternfly:src": "src/", "sideEffects": [ "*.css", "*.scss" ], "publishConfig": { - "access": "public" + "access": "public", + "tag": "prerelase" }, "repository": { "type": "git", @@ -28,43 +36,40 @@ }, "homepage": "https://github.com/patternfly/patternfly-react#readme", "dependencies": { - "@patternfly/react-styles": "^5.2.0-prerelease.3", - "@patternfly/react-tokens": "^5.2.0-prerelease.4", - "hoist-non-react-statics": "^3.3.0", - "lodash": "^4.17.19", - "tslib": "^2.5.0", - "victory-area": "^36.6.11", - "victory-axis": "^36.6.11", - "victory-bar": "^36.6.11", - "victory-box-plot": "^36.6.11", - "victory-chart": "^36.6.11", - "victory-core": "^36.6.11", - "victory-create-container": "^36.6.11", - "victory-cursor-container": "^36.6.11", - "victory-group": "^36.6.11", - "victory-legend": "^36.6.11", - "victory-line": "^36.6.11", - "victory-pie": "^36.6.11", - "victory-scatter": "^36.6.11", - "victory-stack": "^36.6.11", - "victory-tooltip": "^36.6.11", - "victory-voronoi-container": "^36.6.11", - "victory-zoom-container": "^36.6.11" + "@patternfly/react-styles": "workspace:^", + "@patternfly/react-tokens": "workspace:^", + "hoist-non-react-statics": "^3.3.2", + "lodash": "^4.17.21", + "tslib": "^2.7.0" }, "peerDependencies": { "react": "^17 || ^18", - "react-dom": "^17 || ^18" + "react-dom": "^17 || ^18", + "victory-area": "^37.1.1", + "victory-axis": "^37.1.1", + "victory-bar": "^37.1.1", + "victory-box-plot": "^37.1.1", + "victory-chart": "^37.1.1", + "victory-core": "^37.1.1", + "victory-create-container": "^37.1.1", + "victory-cursor-container": "^37.1.1", + "victory-group": "^37.1.1", + "victory-legend": "^37.1.1", + "victory-line": "^37.1.1", + "victory-pie": "^37.1.1", + "victory-scatter": "^37.1.1", + "victory-stack": "^37.1.1", + "victory-tooltip": "^37.1.1", + "victory-voronoi-container": "^37.1.1", + "victory-zoom-container": "^37.1.1" }, "scripts": { - "clean": "rimraf dist", - "build:single:packages": "node ../../scripts/build-single-packages.js --config single-packages.config.json" + "clean": "rimraf dist echarts victory", + "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json", + "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json" }, "devDependencies": { - "@types/lodash": "^4.14.157", - "css": "^2.2.3", - "fs-extra": "^11.0.0", - "glob": "^7.1.2", - "rimraf": "^2.6.2", - "typescript": "^4.7.4" + "@types/lodash": "^4.17.9", + "fs-extra": "^11.2.0" } } diff --git a/packages/react-charts/single-packages.config.json b/packages/react-charts/single-packages.config.json index 3f8a214d194..4a9651bb17d 100644 --- a/packages/react-charts/single-packages.config.json +++ b/packages/react-charts/single-packages.config.json @@ -1,7 +1,4 @@ { - "packageName": "@patternfly/react-charts", - "exclude": [ - "dist/esm/deprecated/index.js", - "dist/esm/next/index.js" - ] -} \ No newline at end of file + "packageName": "@patternfly/react-charts", + "exclude": ["dist/esm/deprecated/index.js", "dist/esm/next/index.js"] +} diff --git a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap deleted file mode 100644 index 509277c0199..00000000000 --- a/packages/react-charts/src/components/Chart/__snapshots__/Chart.test.tsx.snap +++ /dev/null @@ -1,1228 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Chart 1`] = ` - -
- - - - - - - - 0.2 - - - - - - - - 0.4 - - - - - - - - 0.6 - - - - - - - - 0.8 - - - - - - - - 1.0 - - - - - - - - - - - 0.2 - - - - - - - - 0.4 - - - - - - - - 0.6 - - - - - - - - 0.8 - - - - - - - - 1.0 - - - - - -
- -
-
- -`; - -exports[`Chart 2`] = ` - -
- - - - - - - - 0.2 - - - - - - - - 0.4 - - - - - - - - 0.6 - - - - - - - - 0.8 - - - - - - - - 1.0 - - - - - - - - - - - 0.2 - - - - - - - - 0.4 - - - - - - - - 0.6 - - - - - - - - 0.8 - - - - - - - - 1.0 - - - - - -
- -
-
- -`; - -exports[`renders axis and component children 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1.0 - - - - - - - - 1.5 - - - - - - - - 2.0 - - - - - - - - 2.5 - - - - - - - - 3.0 - - - - - - - - 3.5 - - - - - - - - 4.0 - - - - - - - - - - - 2 - - - - - - - - 4 - - - - - - - - 6 - - - - - - - - 8 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap deleted file mode 100644 index 8008576ac03..00000000000 --- a/packages/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap +++ /dev/null @@ -1,157 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartArea 1`] = ` - -
- - - - - - - - - - -
- -
-
- -`; - -exports[`ChartArea 2`] = ` - -
- - - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap deleted file mode 100644 index 1eecd213cff..00000000000 --- a/packages/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap +++ /dev/null @@ -1,789 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartAxis 1`] = ` - -
- - - - - - - 0.0 - - - - - - - - 0.2 - - - - - - - - 0.4 - - - - - - - - 0.6 - - - - - - - - 0.8 - - - - - - - - 1.0 - - - - -
- -
-
- -`; - -exports[`ChartAxis 2`] = ` - -
- - - - - - - 0.0 - - - - - - - - 0.2 - - - - - - - - 0.4 - - - - - - - - 0.6 - - - - - - - - 0.8 - - - - - - - - 1.0 - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2 - - - - - - - - 3 - - - - - - - - 4 - - - - - - - - - - - 2 - - - - - - - - 5 - - - - - - - - 8 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap deleted file mode 100644 index 296636a5fa1..00000000000 --- a/packages/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap +++ /dev/null @@ -1,747 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBar 1`] = ` - -
- - - - - - - - -
- -
-
- -`; - -exports[`ChartBar 2`] = ` - -
- - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Cats - - - - - - - - Dogs - - - - - - - - Birds - - - - - - - - Mice - - - - - - - - - - - 2 - - - - - - - - 4 - - - - - - - - 6 - - - - - - - - 8 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/components/ChartBar/examples/ChartBar.md deleted file mode 100644 index a441a78b924..00000000000 --- a/packages/react-charts/src/components/ChartBar/examples/ChartBar.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -id: Bar chart -section: charts -propComponents: [ - 'Chart', - 'ChartAxis', - 'ChartBar', - 'ChartGroup', - 'ChartVoronoiContainer' -] -hideDarkMode: true ---- - -import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts'; -import { VictoryZoomContainer } from 'victory-zoom-container'; - -## Introduction -Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! - -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. - -## Examples -### Basic with right aligned legend -```js -import React from 'react'; -import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts'; - -
- `${datum.name}: ${datum.y}`} constrainToVisibleArea />} - domain={{y: [0,9]}} - domainPadding={{ x: [30, 25] }} - legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} - legendOrientation="vertical" - legendPosition="right" - height={250} - name="chart1" - padding={{ - bottom: 50, - left: 50, - right: 200, // Adjusted to accommodate legend - top: 50 - }} - width={600} - > - - - - - - - - - -
-``` - -### Purple with bottom aligned legend - -This demonstrates an alternate way of applying tooltips using data labels. - -```js -import React from 'react'; -import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts'; - -class EmbeddedLegend extends React.Component { - render() { - const label = ({ datum }) => `${datum.name}: ${datum.y}`; - - return ( -
- - - - - } - /> - } - /> - } - /> - } - /> - - -
- ); - } -} -``` - -### Multi-color (ordered) with bottom-left aligned legend - -This demonstrates zoom for both the x and y axis. - -```js -import React from 'react'; -import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts'; -import { VictoryZoomContainer } from 'victory-zoom-container'; - -
- } - domainPadding={{ x: [30, 25] }} - legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} - legendPosition="bottom-left" - height={400} - name="chart3" - padding={{ - bottom: 75, // Adjusted to accommodate legend - left: 50, - right: 100, // Adjusted to accommodate tooltip - top: 50 - }} - themeColor={ChartThemeColor.multiOrdered} - width={450} - > - - - - - - - - - -
-``` - -### Single with right aligned legend -```js -import React from 'react'; -import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts'; - -
- `${datum.name}: ${datum.y}`} constrainToVisibleArea />} - domain={{y: [0,9]}} - domainPadding={{ x: [30, 25] }} - legendData={[{ name: 'Cats' }]} - legendOrientation="vertical" - legendPosition="right" - height={250} - name="chart4" - padding={{ - bottom: 50, - left: 50, - right: 200, // Adjusted to accommodate legend - top: 50 - }} - width={600} - > - - -
-``` - -## Documentation -### Tips -- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) -- For single data points or zero values, you may want to set the `domain` prop -- `ChartLegend` may be used as a standalone component, instead of using `legendData` -- The `theme` and `themeColor` props should be applied at the most top level component -- Use `ChartGroup` to apply theme color scales and other properties to multiple components - -### Note -Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the -components used in the examples above, Victory pass-thru props are also documented here: - -- For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart) -- For `ChartAxis` props, see [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis) -- For `ChartBar` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar) -- For `ChartGroup` props, see [VictoryGroup](https://formidable.com/open-source/victory/docs/victory-group) -- For `ChartVoronoiContainer` props, see [VictoryVoronoiContainer](https://formidable.com/open-source/victory/docs/victory-voronoi-container) diff --git a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap b/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap deleted file mode 100644 index af52fc87d1f..00000000000 --- a/packages/react-charts/src/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap +++ /dev/null @@ -1,996 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBar 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- -`; - -exports[`ChartBar 2`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 2015 - - - - - - - - 2016 - - - - - - - - 2017 - - - - - - - - 2018 - - - - - - - - - - - 2 - - - - - - - - 4 - - - - - - - - 6 - - - - - - - - 8 - - - - - - - - 10 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap deleted file mode 100644 index 77f6d68a424..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap +++ /dev/null @@ -1,468 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletQualitativeRange 1`] = ` - -
- - - - - - - - 0 - - - - - - - - -
- -
-
- -`; - -exports[`ChartBulletQualitativeRange 2`] = ` - -
- - - - - - - - 0 - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - Bullet chart example - - - Storage capacity - - - - - - - - 0 - - - - - - - - 100 - - - - - - - - 25 - - - - - - - - 50 - - - - - - - - 75 - - - - - - - - - - - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap deleted file mode 100644 index 8239f892627..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap +++ /dev/null @@ -1,102 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletComparativeErrorMeasure 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletComparativeErrorMeasure 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap deleted file mode 100644 index b508d211b9f..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap +++ /dev/null @@ -1,102 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletComparativeMeasure 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletComparativeMeasure 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap deleted file mode 100644 index 4a15d5900e2..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap +++ /dev/null @@ -1,102 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletComparativeZeroMeasure 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletComparativeZeroMeasure 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap deleted file mode 100644 index 177e6375c06..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap +++ /dev/null @@ -1,117 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletGroupTitle 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletGroupTitle 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - Text label - - - Measure details - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap deleted file mode 100644 index 5637c335815..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap +++ /dev/null @@ -1,116 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletPrimaryDotMeasure 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletPrimaryDotMeasure 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap deleted file mode 100644 index 96b65bb4cb8..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap +++ /dev/null @@ -1,140 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletPrimarySegmentedMeasure 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletPrimarySegmentedMeasure 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap deleted file mode 100644 index a00541b5691..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap +++ /dev/null @@ -1,140 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletQualitativeRange 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletQualitativeRange 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap deleted file mode 100644 index 78f98938eeb..00000000000 --- a/packages/react-charts/src/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap +++ /dev/null @@ -1,109 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartBulletTitle 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartBulletTitle 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - Text label - - - Measure details - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap b/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap deleted file mode 100644 index 7ad45d26e82..00000000000 --- a/packages/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.tsx.snap +++ /dev/null @@ -1,154 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartContainer 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartContainer 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders container via ChartLegend 1`] = ` - -
- - - - - - - - Average number of pets - - - - - Cats - - - - - Dogs - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap b/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap deleted file mode 100644 index 2d8070d8ef9..00000000000 --- a/packages/react-charts/src/components/ChartCursorContainer/__snapshots__/ChartCursorContainer.test.tsx.snap +++ /dev/null @@ -1,123 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartVoronoiContainer 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartVoronoiContainer 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders container via ChartGroup 1`] = ` - -
- - - - - - - - - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap deleted file mode 100644 index 527145168bf..00000000000 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap +++ /dev/null @@ -1,81 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartTooltip 1`] = ``; - -exports[`ChartTooltip 2`] = ``; - -exports[`allows tooltip via container component 1`] = ` - -
- - - - - - - - - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap deleted file mode 100644 index bab9d448e17..00000000000 --- a/packages/react-charts/src/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap +++ /dev/null @@ -1,81 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartCursorTooltip 1`] = ``; - -exports[`ChartCursorTooltip 2`] = ``; - -exports[`allows tooltip via container component 1`] = ` - -
- - - - - - - - - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap deleted file mode 100644 index 4426b2cfebd..00000000000 --- a/packages/react-charts/src/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap +++ /dev/null @@ -1,182 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartDonut 1`] = ` - -
- - - - - - - - - -
- -
-
- -`; - -exports[`ChartDonut 2`] = ` - -
- - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap deleted file mode 100644 index 9c805ef5304..00000000000 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap +++ /dev/null @@ -1,133 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartDonutThreshold 1`] = ` - -
- - - - - -
- -
-
- -`; - -exports[`ChartDonutThreshold 2`] = ` - -
- - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap deleted file mode 100644 index 9b036a9ae78..00000000000 --- a/packages/react-charts/src/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap +++ /dev/null @@ -1,133 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartDonutUtilization 1`] = ` - -
- - - - - - -
- -
-
- -`; - -exports[`ChartDonutUtilization 2`] = ` - -
- - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap deleted file mode 100644 index 585eb2efd5e..00000000000 --- a/packages/react-charts/src/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap +++ /dev/null @@ -1,131 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartGroup 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartGroup 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders container children 1`] = ` - -
- - - - - - - - - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap deleted file mode 100644 index dbd695e645f..00000000000 --- a/packages/react-charts/src/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartLabel 1`] = ``; - -exports[`ChartLabel 2`] = ``; - -exports[`renders component text 1`] = ` - - - - This is a test - - - -`; diff --git a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap deleted file mode 100644 index 83a167ae46e..00000000000 --- a/packages/react-charts/src/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap +++ /dev/null @@ -1,294 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartLegend 1`] = ` - -
- - - - - - - Series 1 - - - - - Series 2 - - - -
- -
-
- -`; - -exports[`ChartLegend 2`] = ` - -
- - - - - - - Series 1 - - - - - Series 2 - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - Average number of pets - - - - - Cats - - - - - Dogs - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap deleted file mode 100644 index 9c03f7ef419..00000000000 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap +++ /dev/null @@ -1,542 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartLegendTooltip 1`] = ``; - -exports[`ChartLegendTooltip 2`] = ``; - -exports[`allows tooltip via container component 1`] = ` - -
- - - Average number of pets - - - - - - - - 2015 - - - - - - - - 2016 - - - - - - - - 2017 - - - - - - - - 2018 - - - - - - - - - - - - 2 - - - - - - - - - 5 - - - - - - - - - 8 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Cats - - - - - Dogs - - - - - Birds - - - - - Mice - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap deleted file mode 100644 index 4200c756991..00000000000 --- a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap +++ /dev/null @@ -1,44 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartLegendTooltipLabel 1`] = ``; - -exports[`ChartLegendTooltipLabel 2`] = ``; - -exports[`renders component text 1`] = ` - - - - Cats - - - - - 1, 2, 3, 4 - - - -`; diff --git a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap deleted file mode 100644 index f2ecdfdd881..00000000000 --- a/packages/react-charts/src/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap +++ /dev/null @@ -1,600 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartLine 1`] = ` - -
- - - - - - - - - - -
- -
-
- -`; - -exports[`ChartLine 2`] = ` - -
- - - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1.0 - - - - - - - - 1.5 - - - - - - - - 2.0 - - - - - - - - 2.5 - - - - - - - - 3.0 - - - - - - - - 3.5 - - - - - - - - 4.0 - - - - - - - - - - - 2 - - - - - - - - 4 - - - - - - - - 6 - - - - - - - - 8 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap deleted file mode 100644 index 929d6a369c0..00000000000 --- a/packages/react-charts/src/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap +++ /dev/null @@ -1,182 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartPie 1`] = ` - -
- - - - - - - - - -
- -
-
- -`; - -exports[`ChartPie 2`] = ` - -
- - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartPie/examples/ChartPie.md b/packages/react-charts/src/components/ChartPie/examples/ChartPie.md deleted file mode 100644 index 883c9435a28..00000000000 --- a/packages/react-charts/src/components/ChartPie/examples/ChartPie.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -id: Pie chart -section: charts -propComponents: ['ChartPie'] -hideDarkMode: true ---- - -import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; - -## Introduction -Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! - -PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. - -## Examples -### Basic with right aligned legend -```js -import React from 'react'; -import { ChartPie } from '@patternfly/react-charts'; - -
- `${datum.x}: ${datum.y}`} - legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} - legendOrientation="vertical" - legendPosition="right" - name="chart1" - padding={{ - bottom: 20, - left: 20, - right: 140, // Adjusted to accommodate legend - top: 20 - }} - width={350} - /> -
-``` - -### Orange with right aligned legend -```js -import React from 'react'; -import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; - -
- `${datum.x}: ${datum.y}`} - legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} - legendOrientation="vertical" - legendPosition="right" - name="chart2" - padding={{ - bottom: 20, - left: 20, - right: 140, // Adjusted to accommodate legend - top: 20 - }} - themeColor={ChartThemeColor.orange} - width={350} - /> -
-``` - -### Multi-color (ordered) with bottom aligned legend -```js -import React from 'react'; -import { ChartPie, ChartThemeColor } from '@patternfly/react-charts'; - -
- `${datum.x}: ${datum.y}`} - legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} - legendPosition="bottom" - name="chart3" - padding={{ - bottom: 65, - left: 20, - right: 20, - top: 20 - }} - themeColor={ChartThemeColor.multiOrdered} - width={300} - /> -
-``` - -## Documentation -### Tips -- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) -- For single data points or zero values, you may want to set the `domain` prop -- `ChartLegend` may be used as a standalone component, instead of using `legendData` - -### Note -Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the -components used in the examples above, Victory pass-thru props are also documented here: - -- For `ChartPie` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) diff --git a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap deleted file mode 100644 index efd1cf1a18a..00000000000 --- a/packages/react-charts/src/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap +++ /dev/null @@ -1,304 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartPoint 1`] = ` - -
- - - - - - - Series 1 - - - - - Series 2 - - - -
- -
-
- -`; - -exports[`ChartPoint 2`] = ` - -
- - - - - - - Series 1 - - - - - Series 2 - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - Average number of pets - - - - - Cats - - - - - Dogs - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap deleted file mode 100644 index 52b97bf7767..00000000000 --- a/packages/react-charts/src/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap +++ /dev/null @@ -1,1623 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartScatter 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- -`; - -exports[`ChartScatter 2`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1.0 - - - - - - - - 2.0 - - - - - - - - 3.0 - - - - - - - - 4.0 - - - - - - - - 5.0 - - - - - - - - 6.0 - - - - - - - - 7.0 - - - - - - - - - - - 1.0 - - - - - - - - 2.0 - - - - - - - - 3.0 - - - - - - - - 4.0 - - - - - - - - 5.0 - - - - - - - - 6.0 - - - - - - - - 7.0 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap b/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap deleted file mode 100644 index ac23405c615..00000000000 --- a/packages/react-charts/src/components/ChartStack/__snapshots__/ChartStack.test.tsx.snap +++ /dev/null @@ -1,648 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartStack 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartStack 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Cats - - - - - - - - Dogs - - - - - - - - Birds - - - - - - - - Mice - - - - - - - - - - - 5 - - - - - - - - 10 - - - - - - - - 15 - - - - - - - - 20 - - - - - - - - 25 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartTheme/ChartTheme.ts b/packages/react-charts/src/components/ChartTheme/ChartTheme.ts deleted file mode 100644 index fcd2b214015..00000000000 --- a/packages/react-charts/src/components/ChartTheme/ChartTheme.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { VictoryThemeDefinition } from 'victory-core'; - -// Note: Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps -export interface ChartThemeDefinitionInterface extends VictoryThemeDefinition {} - -/** - * Chart theme definition - * @public - */ -export type ChartThemeDefinition = ChartThemeDefinitionInterface; diff --git a/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts b/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts deleted file mode 100644 index e2cf585e630..00000000000 --- a/packages/react-charts/src/components/ChartTheme/ChartThemeTypes.ts +++ /dev/null @@ -1,120 +0,0 @@ -import { ChartThemeDefinition } from './ChartTheme'; -import { AxisTheme } from './themes/components/axis-theme'; -import { BaseTheme } from './themes/base-theme'; -import { - BulletTheme, - BulletComparativeErrorMeasureTheme, - BulletComparativeMeasureTheme, - BulletComparativeWarningMeasureTheme, - BulletGroupTitleTheme, - BulletPrimaryDotMeasureTheme, - BulletPrimaryNegativeMeasureTheme, - BulletPrimarySegmentedMeasureTheme, - BulletQualitativeRangeTheme -} from './themes/components/bullet-theme'; -import { DonutTheme } from './themes/components/donut-theme'; -import { DonutThresholdDynamicTheme, DonutThresholdStaticTheme } from './themes/components/donut-threshold-theme'; -import { DonutUtilizationDynamicTheme, DonutUtilizationStaticTheme } from './themes/components/donut-utilization-theme'; -import { ThresholdTheme } from './themes/components/threshold-theme'; - -/** - * Axis theme - * @private - */ -export const ChartAxisTheme: ChartThemeDefinition = AxisTheme; - -/** - * Base theme - * @private - */ -export const ChartBaseTheme: ChartThemeDefinition = BaseTheme; - -/** - * Bullet comparative error measure theme - * @private - */ -export const ChartBulletComparativeErrorMeasureTheme: ChartThemeDefinition = BulletComparativeErrorMeasureTheme; - -/** - * Bullet comparative measure theme - * @private - */ -export const ChartBulletComparativeMeasureTheme: ChartThemeDefinition = BulletComparativeMeasureTheme; - -/** - * Bullet comparative measure warning theme - * @private - */ -export const ChartBulletComparativeWarningMeasureTheme: ChartThemeDefinition = BulletComparativeWarningMeasureTheme; - -/** - * Bullet group title theme - * @private - */ -export const ChartBulletGroupTitleTheme: ChartThemeDefinition = BulletGroupTitleTheme; - -/** - * Bullet primary dot measure theme - * @private - */ -export const ChartBulletPrimaryDotMeasureTheme: ChartThemeDefinition = BulletPrimaryDotMeasureTheme; - -/** - * Bullet primary negative measure theme - * @private - */ -export const ChartBulletPrimaryNegativeMeasureTheme: ChartThemeDefinition = BulletPrimaryNegativeMeasureTheme; - -/** - * Bullet primary segmented measure theme - * @private - */ -export const ChartBulletPrimarySegmentedMeasureTheme: ChartThemeDefinition = BulletPrimarySegmentedMeasureTheme; - -/** - * Bullet qualitative range theme - * @private - */ -export const ChartBulletQualitativeRangeTheme: ChartThemeDefinition = BulletQualitativeRangeTheme; - -/** - * Bullet theme - * @private - */ -export const ChartBulletTheme: ChartThemeDefinition = BulletTheme; - -/** - * Donut utilization dynamic theme - * @private - */ -export const ChartDonutUtilizationDynamicTheme: ChartThemeDefinition = DonutUtilizationDynamicTheme; - -/** - * Donut utilization static theme - * @private - */ -export const ChartDonutUtilizationStaticTheme: ChartThemeDefinition = DonutUtilizationStaticTheme; - -/** - * Donut theme - * @private - */ -export const ChartDonutTheme: ChartThemeDefinition = DonutTheme; - -/** - * Donut threshold dynamic theme - * @private - */ -export const ChartDonutThresholdDynamicTheme: ChartThemeDefinition = DonutThresholdDynamicTheme; - -/** - * ChartDonutThresholdStatic theme - * @private - */ -export const ChartDonutThresholdStaticTheme: ChartThemeDefinition = DonutThresholdStaticTheme; - -/** - * Donut threshold static theme - * @private - */ -export const ChartThresholdTheme: ChartThemeDefinition = ThresholdTheme; diff --git a/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts deleted file mode 100644 index 0bd3ff673b7..00000000000 --- a/packages/react-charts/src/components/ChartTheme/styles/box-plot-tooltip-styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable camelcase */ -import global_FontWeight_bold from '@patternfly/react-tokens/dist/esm/global_FontWeight_bold'; -import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; - -/** - * Box plot tooltip styles - * @private - */ -export const BoxPlotTooltipStyles = { - flyout: { - padding: 40 - }, - label: { - fill: chart_voronoi_labels_Fill.var, - fontWeight: global_FontWeight_bold.value - } as any -}; diff --git a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts b/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts deleted file mode 100644 index f304575681a..00000000000 --- a/packages/react-charts/src/components/ChartTheme/styles/legend-tooltip-styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable camelcase */ -import global_FontWeight_bold from '@patternfly/react-tokens/dist/esm/global_FontWeight_bold'; -import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; - -/** - * Legend tooltip styles - * @private - */ -export const LegendTooltipStyles = { - flyout: { - padding: 40 - }, - label: { - fill: chart_voronoi_labels_Fill.var, - fontWeight: global_FontWeight_bold.value - } as any -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts deleted file mode 100644 index dd5233d0188..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/base-theme.ts +++ /dev/null @@ -1,373 +0,0 @@ -/* eslint-disable camelcase */ -import chart_global_FontFamily from '@patternfly/react-tokens/dist/esm/chart_global_FontFamily'; -import chart_global_letter_spacing from '@patternfly/react-tokens/dist/esm/chart_global_letter_spacing'; -import chart_global_FontSize_sm from '@patternfly/react-tokens/dist/esm/chart_global_FontSize_sm'; -import chart_global_label_Padding from '@patternfly/react-tokens/dist/esm/chart_global_label_Padding'; -import chart_global_label_stroke from '@patternfly/react-tokens/dist/esm/chart_global_label_stroke'; -import chart_global_label_text_anchor from '@patternfly/react-tokens/dist/esm/chart_global_label_text_anchor'; -import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill'; -import chart_global_layout_Padding from '@patternfly/react-tokens/dist/esm/chart_global_layout_Padding'; -import chart_global_layout_Height from '@patternfly/react-tokens/dist/esm/chart_global_layout_Height'; -import chart_global_layout_Width from '@patternfly/react-tokens/dist/esm/chart_global_layout_Width'; -import chart_global_stroke_line_cap from '@patternfly/react-tokens/dist/esm/chart_global_stroke_line_cap'; -import chart_global_stroke_line_join from '@patternfly/react-tokens/dist/esm/chart_global_stroke_line_join'; -import chart_area_data_Fill from '@patternfly/react-tokens/dist/esm/chart_area_data_Fill'; -import chart_area_Opacity from '@patternfly/react-tokens/dist/esm/chart_area_Opacity'; -import chart_area_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_area_stroke_Width'; -import chart_axis_axis_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_axis_axis_stroke_Width'; -import chart_axis_axis_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_axis_stroke_Color'; -import chart_axis_axis_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_axis_Fill'; -import chart_axis_axis_label_Padding from '@patternfly/react-tokens/dist/esm/chart_axis_axis_label_Padding'; -import chart_axis_axis_label_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_axis_label_stroke_Color'; -import chart_axis_grid_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_grid_Fill'; -import chart_axis_grid_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_axis_grid_PointerEvents'; -import chart_axis_tick_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_tick_Fill'; -import chart_axis_tick_Size from '@patternfly/react-tokens/dist/esm/chart_axis_tick_Size'; -import chart_axis_tick_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_tick_stroke_Color'; -import chart_axis_tick_Width from '@patternfly/react-tokens/dist/esm/chart_axis_tick_Width'; -import chart_axis_tick_label_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_tick_label_Fill'; -import chart_bar_Width from '@patternfly/react-tokens/dist/esm/chart_bar_Width'; -import chart_bar_data_stroke from '@patternfly/react-tokens/dist/esm/chart_bar_data_stroke'; -import chart_bar_data_Fill from '@patternfly/react-tokens/dist/esm/chart_bar_data_Fill'; -import chart_bar_data_Padding from '@patternfly/react-tokens/dist/esm/chart_bar_data_Padding'; -import chart_bar_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bar_data_stroke_Width'; -import chart_boxplot_max_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_max_Padding'; -import chart_boxplot_max_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_boxplot_max_stroke_Color'; -import chart_boxplot_max_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_max_stroke_Width'; -import chart_boxplot_median_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_median_Padding'; -import chart_boxplot_median_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_boxplot_median_stroke_Color'; -import chart_boxplot_median_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_median_stroke_Width'; -import chart_boxplot_min_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_min_Padding'; -import chart_boxplot_min_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_min_stroke_Width'; -import chart_boxplot_min_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_boxplot_min_stroke_Color'; -import chart_boxplot_lower_quartile_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_lower_quartile_Padding'; -import chart_boxplot_lower_quartile_Fill from '@patternfly/react-tokens/dist/esm/chart_boxplot_lower_quartile_Fill'; -import chart_boxplot_upper_quartile_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_upper_quartile_Padding'; -import chart_boxplot_upper_quartile_Fill from '@patternfly/react-tokens/dist/esm/chart_boxplot_upper_quartile_Fill'; -import chart_boxplot_box_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_box_Width'; -import chart_candelstick_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_candelstick_data_stroke_Width'; -import chart_candelstick_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_candelstick_data_stroke_Color'; -import chart_candelstick_candle_positive_Color from '@patternfly/react-tokens/dist/esm/chart_candelstick_candle_positive_Color'; -import chart_candelstick_candle_negative_Color from '@patternfly/react-tokens/dist/esm/chart_candelstick_candle_negative_Color'; -import chart_errorbar_BorderWidth from '@patternfly/react-tokens/dist/esm/chart_errorbar_BorderWidth'; -import chart_errorbar_data_Fill from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_Fill'; -import chart_errorbar_data_Opacity from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_Opacity'; -import chart_errorbar_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_stroke_Width'; -import chart_errorbar_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_stroke_Color'; -import chart_legend_gutter_Width from '@patternfly/react-tokens/dist/esm/chart_legend_gutter_Width'; -import chart_legend_orientation from '@patternfly/react-tokens/dist/esm/chart_legend_orientation'; -import chart_legend_title_orientation from '@patternfly/react-tokens/dist/esm/chart_legend_title_orientation'; -import chart_legend_data_type from '@patternfly/react-tokens/dist/esm/chart_legend_data_type'; -import chart_legend_title_Padding from '@patternfly/react-tokens/dist/esm/chart_legend_title_Padding'; -import chart_line_data_Fill from '@patternfly/react-tokens/dist/esm/chart_line_data_Fill'; -import chart_line_data_Opacity from '@patternfly/react-tokens/dist/esm/chart_line_data_Opacity'; -import chart_line_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_line_data_stroke_Width'; -import chart_line_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_line_data_stroke_Color'; -import chart_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_pie_Padding'; -import chart_pie_data_Padding from '@patternfly/react-tokens/dist/esm/chart_pie_data_Padding'; -import chart_pie_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_pie_data_stroke_Width'; -import chart_pie_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_pie_data_stroke_Color'; -import chart_pie_labels_Padding from '@patternfly/react-tokens/dist/esm/chart_pie_labels_Padding'; -import chart_pie_Height from '@patternfly/react-tokens/dist/esm/chart_pie_Height'; -import chart_pie_Width from '@patternfly/react-tokens/dist/esm/chart_pie_Width'; -import chart_scatter_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_scatter_data_stroke_Color'; -import chart_scatter_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_scatter_data_stroke_Width'; -import chart_scatter_data_Opacity from '@patternfly/react-tokens/dist/esm/chart_scatter_data_Opacity'; -import chart_scatter_data_Fill from '@patternfly/react-tokens/dist/esm/chart_scatter_data_Fill'; -import chart_stack_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_stack_data_stroke_Width'; -import chart_tooltip_corner_radius from '@patternfly/react-tokens/dist/esm/chart_tooltip_corner_radius'; -import chart_tooltip_pointer_length from '@patternfly/react-tokens/dist/esm/chart_tooltip_pointer_length'; -import chart_tooltip_Fill from '@patternfly/react-tokens/dist/esm/chart_tooltip_Fill'; -import chart_tooltip_flyoutStyle_corner_radius from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_corner_radius'; -import chart_tooltip_flyoutStyle_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_stroke_Width'; -import chart_tooltip_flyoutStyle_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_PointerEvents'; -import chart_tooltip_flyoutStyle_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_stroke_Color'; -import chart_tooltip_flyoutStyle_Fill from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_Fill'; -import chart_tooltip_pointer_Width from '@patternfly/react-tokens/dist/esm/chart_tooltip_pointer_Width'; -import chart_tooltip_Padding from '@patternfly/react-tokens/dist/esm/chart_tooltip_Padding'; -import chart_tooltip_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_tooltip_PointerEvents'; -import chart_voronoi_data_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_data_Fill'; -import chart_voronoi_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_voronoi_data_stroke_Color'; -import chart_voronoi_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_voronoi_data_stroke_Width'; -import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; -import chart_voronoi_labels_Padding from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Padding'; -import chart_voronoi_labels_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_PointerEvents'; -import chart_voronoi_flyout_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_stroke_Width'; -import chart_voronoi_flyout_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_PointerEvents'; -import chart_voronoi_flyout_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_stroke_Color'; -import chart_voronoi_flyout_stroke_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_stroke_Fill'; - -// Note: Values must be in pixles - -// Typography -// -// Note: Victory's approximateTextSize function uses specific character widths and does not work with font variables -// See https://github.com/patternfly/patternfly-react/issues/5300 -const TYPOGRAPHY_FONT_FAMILY = chart_global_FontFamily.value.replace(/ /g, ''); -const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.value; -const TYPOGRAPHY_FONT_SIZE = chart_global_FontSize_sm.value; - -// Labels -const LABEL_PROPS = { - fontFamily: TYPOGRAPHY_FONT_FAMILY, - fontSize: TYPOGRAPHY_FONT_SIZE, - letterSpacing: TYPOGRAPHY_LETTER_SPACING, - padding: chart_global_label_Padding.value, - stroke: chart_global_label_stroke.var, - fill: chart_global_label_Fill.var -}; -const LABEL_CENTERED_PROPS = { - ...LABEL_PROPS, - textAnchor: chart_global_label_text_anchor.value -}; - -// Layout -const LAYOUT_PROPS = { - padding: chart_global_layout_Padding.value, - height: chart_global_layout_Height.value, - width: chart_global_layout_Width.value -}; - -// Strokes -const STROKE_LINE_CAP = chart_global_stroke_line_cap.value; -const STROKE_LINE_JOIN = chart_global_stroke_line_join.value; - -/** - * Victory theme properties only - * @private - */ -export const BaseTheme = { - area: { - ...LAYOUT_PROPS, - style: { - data: { - fill: chart_area_data_Fill.var, - fillOpacity: chart_area_Opacity.value, - // Omit stroke to add a line border from color scale - // stroke: chart_global_label_stroke.value, - strokeWidth: chart_area_stroke_Width.value - }, - labels: LABEL_CENTERED_PROPS - } - }, - axis: { - ...LAYOUT_PROPS, - style: { - axis: { - fill: chart_axis_axis_Fill.var, - strokeWidth: chart_axis_axis_stroke_Width.value, - stroke: chart_axis_axis_stroke_Color.var, - strokeLinecap: STROKE_LINE_CAP, - strokeLinejoin: STROKE_LINE_JOIN - }, - axisLabel: { - ...LABEL_CENTERED_PROPS, - padding: chart_axis_axis_label_Padding.value, - stroke: chart_axis_axis_label_stroke_Color.var - }, - grid: { - fill: chart_axis_grid_Fill.var, - stroke: 'none', - pointerEvents: chart_axis_grid_PointerEvents.value, - strokeLinecap: STROKE_LINE_CAP, - strokeLinejoin: STROKE_LINE_JOIN - }, - ticks: { - fill: chart_axis_tick_Fill.var, - size: chart_axis_tick_Size.value, - stroke: chart_axis_tick_stroke_Color.var, - strokeLinecap: STROKE_LINE_CAP, - strokeLinejoin: STROKE_LINE_JOIN, - strokeWidth: chart_axis_tick_Width.value - }, - tickLabels: { - ...LABEL_PROPS, - fill: chart_axis_tick_label_Fill.var - } - } - }, - bar: { - ...LAYOUT_PROPS, - barWidth: chart_bar_Width.value, - style: { - data: { - fill: chart_bar_data_Fill.var, - padding: chart_bar_data_Padding.value, - stroke: chart_bar_data_stroke.var, - strokeWidth: chart_bar_data_stroke_Width.value - }, - labels: LABEL_PROPS - } - }, - boxplot: { - ...LAYOUT_PROPS, - style: { - max: { - padding: chart_boxplot_max_Padding.value, - stroke: chart_boxplot_max_stroke_Color.var, - strokeWidth: chart_boxplot_max_stroke_Width.value - }, - maxLabels: LABEL_PROPS, - median: { - padding: chart_boxplot_median_Padding.value, - stroke: chart_boxplot_median_stroke_Color.var, - strokeWidth: chart_boxplot_median_stroke_Width.value - }, - medianLabels: LABEL_PROPS, - min: { - padding: chart_boxplot_min_Padding.value, - stroke: chart_boxplot_min_stroke_Color.var, - strokeWidth: chart_boxplot_min_stroke_Width.value - }, - minLabels: LABEL_PROPS, - q1: { - fill: chart_boxplot_lower_quartile_Fill.var, - padding: chart_boxplot_lower_quartile_Padding.value - }, - q1Labels: LABEL_PROPS, - q3: { - fill: chart_boxplot_upper_quartile_Fill.var, - padding: chart_boxplot_upper_quartile_Padding.value - }, - q3Labels: LABEL_PROPS - }, - boxWidth: chart_boxplot_box_Width.value - }, - candlestick: { - ...LAYOUT_PROPS, - candleColors: { - positive: chart_candelstick_candle_positive_Color.var, - negative: chart_candelstick_candle_negative_Color.var - }, - style: { - data: { - stroke: chart_candelstick_data_stroke_Color.var, - strokeWidth: chart_candelstick_data_stroke_Width.value - }, - labels: LABEL_CENTERED_PROPS - } - }, - chart: { - ...LAYOUT_PROPS - }, - errorbar: { - ...LAYOUT_PROPS, - borderWidth: chart_errorbar_BorderWidth.value, - style: { - data: { - fill: chart_errorbar_data_Fill.var, - opacity: chart_errorbar_data_Opacity.value, - stroke: chart_errorbar_data_stroke_Color.var, - strokeWidth: chart_errorbar_data_stroke_Width.value - }, - labels: LABEL_CENTERED_PROPS - } - }, - group: { - ...LAYOUT_PROPS - }, - legend: { - gutter: chart_legend_gutter_Width.value, - orientation: chart_legend_orientation.value, - titleOrientation: chart_legend_title_orientation.value, - style: { - data: { - type: chart_legend_data_type.value - }, - labels: LABEL_PROPS, - title: { - ...LABEL_PROPS, - fontSize: TYPOGRAPHY_FONT_SIZE, - padding: chart_legend_title_Padding.value - } - } - }, - line: { - ...LAYOUT_PROPS, - style: { - data: { - fill: chart_line_data_Fill.var, - opacity: chart_line_data_Opacity.value, - stroke: chart_line_data_stroke_Color.var, - strokeWidth: chart_line_data_stroke_Width.value - }, - labels: LABEL_CENTERED_PROPS - } - }, - pie: { - padding: chart_pie_Padding.value, - style: { - data: { - padding: chart_pie_data_Padding.value, - stroke: chart_pie_data_stroke_Color.var, - strokeWidth: chart_pie_data_stroke_Width.value - }, - labels: { - ...LABEL_PROPS, - padding: chart_pie_labels_Padding.value - } - }, - height: chart_pie_Height.value, - width: chart_pie_Width.value - }, - scatter: { - ...LAYOUT_PROPS, - style: { - data: { - fill: chart_scatter_data_Fill.var, - opacity: chart_scatter_data_Opacity.value, - stroke: chart_scatter_data_stroke_Color.var, - strokeWidth: chart_scatter_data_stroke_Width.value - }, - labels: LABEL_CENTERED_PROPS - } - }, - stack: { - ...LAYOUT_PROPS, - style: { - data: { - strokeWidth: chart_stack_data_stroke_Width.value - } - } - }, - tooltip: { - cornerRadius: chart_tooltip_corner_radius.value, - flyoutPadding: chart_tooltip_Padding.value, - flyoutStyle: { - cornerRadius: chart_tooltip_flyoutStyle_corner_radius.value, - fill: chart_tooltip_flyoutStyle_Fill.var, // background - pointerEvents: chart_tooltip_flyoutStyle_PointerEvents.var, - stroke: chart_tooltip_flyoutStyle_stroke_Color.var, // border - strokeWidth: chart_tooltip_flyoutStyle_stroke_Width.var - }, - pointerLength: chart_tooltip_pointer_length.value, - pointerWidth: chart_tooltip_pointer_Width.value, - style: { - fill: chart_tooltip_Fill.var, // text - pointerEvents: chart_tooltip_PointerEvents.var - } - }, - voronoi: { - ...LAYOUT_PROPS, - style: { - data: { - fill: chart_voronoi_data_Fill.var, - stroke: chart_voronoi_data_stroke_Color.var, - strokeWidth: chart_voronoi_data_stroke_Width.value - }, - labels: { - ...LABEL_CENTERED_PROPS, - fill: chart_voronoi_labels_Fill.var, // text - padding: chart_voronoi_labels_Padding.value, - pointerEvents: chart_voronoi_labels_PointerEvents.value - }, - // Note: These properties override tooltip - flyout: { - fill: chart_voronoi_flyout_stroke_Fill.var, // background - pointerEvents: chart_voronoi_flyout_PointerEvents.var, - stroke: chart_voronoi_flyout_stroke_Color.var, // border - strokeWidth: chart_voronoi_flyout_stroke_Width.var - } - } - } -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/color-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/color-theme.ts deleted file mode 100644 index 46c9dff6264..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/color-theme.ts +++ /dev/null @@ -1,79 +0,0 @@ -interface ColorThemeInterface { - COLOR_SCALE: string[]; -} - -/** - * Victory theme properties only - * @private - */ -export const ColorTheme = (props: ColorThemeInterface) => { - const { COLOR_SCALE } = props; - - return { - area: { - colorScale: COLOR_SCALE, - style: { - data: { - fill: COLOR_SCALE[0] - } - } - }, - axis: { - colorScale: COLOR_SCALE - }, - bar: { - colorScale: COLOR_SCALE, - style: { - data: { - fill: COLOR_SCALE[0] - } - } - }, - boxplot: { - colorScale: COLOR_SCALE, - style: { - q1: { - fill: COLOR_SCALE[0] - }, - q3: { - fill: COLOR_SCALE[0] - } - } - }, - candlestick: { - colorScale: COLOR_SCALE - }, - chart: { - colorScale: COLOR_SCALE - }, - errorbar: { - colorScale: COLOR_SCALE - }, - group: { - colorScale: COLOR_SCALE - }, - legend: { - colorScale: COLOR_SCALE - }, - line: { - colorScale: COLOR_SCALE, - style: { - data: { - stroke: COLOR_SCALE[0] - } - } - }, - pie: { - colorScale: COLOR_SCALE - }, - scatter: { - colorScale: COLOR_SCALE - }, - stack: { - colorScale: COLOR_SCALE - }, - voronoi: { - colorScale: COLOR_SCALE - } - }; -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/cyan-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/cyan-theme.ts deleted file mode 100644 index d08e05c7112..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/cyan-theme.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable camelcase */ -import chart_theme_cyan_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_100'; -import chart_theme_cyan_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_200'; -import chart_theme_cyan_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_300'; -import chart_theme_cyan_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_400'; -import chart_theme_cyan_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_cyan_ColorScale_500'; -import { ColorTheme } from '../color-theme'; - -// Color scale -// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit -const COLOR_SCALE = [ - chart_theme_cyan_ColorScale_100.var, - chart_theme_cyan_ColorScale_200.var, - chart_theme_cyan_ColorScale_300.var, - chart_theme_cyan_ColorScale_400.var, - chart_theme_cyan_ColorScale_500.var -]; - -/** - * Cyan color theme - * @private - */ -export const CyanColorTheme = ColorTheme({ - COLOR_SCALE -}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/gold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/colors/gold-theme.ts deleted file mode 100644 index 86e87745a95..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/gold-theme.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* eslint-disable camelcase */ -import chart_theme_gold_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_100'; -import chart_theme_gold_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_200'; -import chart_theme_gold_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_300'; -import chart_theme_gold_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_400'; -import chart_theme_gold_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gold_ColorScale_500'; -import { ColorTheme } from '../color-theme'; - -// Color scale -// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit -const COLOR_SCALE = [ - chart_theme_gold_ColorScale_100.var, - chart_theme_gold_ColorScale_200.var, - chart_theme_gold_ColorScale_300.var, - chart_theme_gold_ColorScale_400.var, - chart_theme_gold_ColorScale_500.var -]; - -/** - * Gold color theme - * @private - */ -export const GoldColorTheme = ColorTheme({ - COLOR_SCALE -}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/axis-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/axis-theme.ts deleted file mode 100644 index 4e34d1d1273..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/components/axis-theme.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* eslint-disable camelcase */ -import chart_axis_grid_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_grid_stroke_Color'; -import chart_axis_tick_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_tick_stroke_Color'; - -/** - * Axis theme - * @private - */ -export const AxisTheme = { - axis: { - style: { - grid: { - stroke: chart_axis_grid_stroke_Color.var - }, - ticks: { - stroke: chart_axis_tick_stroke_Color.var - } - } - } -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/bullet-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/bullet-theme.ts deleted file mode 100644 index ec4b73c59eb..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/components/bullet-theme.ts +++ /dev/null @@ -1,167 +0,0 @@ -/* eslint-disable camelcase */ -import chart_bullet_Height from '@patternfly/react-tokens/dist/esm/chart_bullet_Height'; -import chart_bullet_comparative_measure_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_Fill_Color'; -import chart_bullet_comparative_measure_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_stroke_Color'; -import chart_bullet_comparative_measure_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_stroke_Width'; -import chart_bullet_comparative_measure_error_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_error_Fill_Color'; -import chart_bullet_comparative_measure_error_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_error_stroke_Color'; -import chart_bullet_comparative_measure_error_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_error_stroke_Width'; -import chart_bullet_comparative_measure_warning_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_warning_Fill_Color'; -import chart_bullet_comparative_measure_warning_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_warning_stroke_Color'; -import chart_bullet_comparative_measure_warning_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_warning_stroke_Width'; -import chart_bullet_group_title_divider_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_Fill_Color'; -import chart_bullet_group_title_divider_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_stroke_Color'; -import chart_bullet_group_title_divider_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_stroke_Width'; -import chart_bullet_qualitative_range_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_100'; -import chart_bullet_qualitative_range_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_200'; -import chart_bullet_qualitative_range_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_300'; -import chart_bullet_qualitative_range_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_400'; -import chart_bullet_qualitative_range_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_500'; -import chart_bullet_negative_measure_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_100'; -import chart_bullet_negative_measure_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_200'; -import chart_bullet_negative_measure_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_300'; -import chart_bullet_negative_measure_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_400'; -import chart_bullet_negative_measure_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_500'; -import chart_global_layout_Padding from '@patternfly/react-tokens/dist/esm/chart_global_layout_Padding'; - -// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit# -// See https://www.patternfly.org/v3/pattern-library/data-visualization/bullet-chart/#design - -/** - * Bullet theme - * @private - */ -export const BulletTheme = { - chart: { - height: chart_bullet_Height.value - } -}; - -/** - * Bullet comparative error measure theme - * @private - */ -export const BulletComparativeErrorMeasureTheme = { - bar: { - height: chart_bullet_Height.value, - style: { - data: { - fill: chart_bullet_comparative_measure_error_Fill_Color.var, - stroke: chart_bullet_comparative_measure_error_stroke_Color.var, - strokeWidth: chart_bullet_comparative_measure_error_stroke_Width.value - } - } - } -}; - -/** - * Bullet comparative measure theme - * @private - */ -export const BulletComparativeMeasureTheme = { - bar: { - height: chart_bullet_Height.value, - style: { - data: { - fill: chart_bullet_comparative_measure_Fill_Color.var, - stroke: chart_bullet_comparative_measure_stroke_Color.var, - strokeWidth: chart_bullet_comparative_measure_stroke_Width.value - } - } - } -}; - -/** - * Bullet comparative measure warning theme - * @private - */ -export const BulletComparativeWarningMeasureTheme = { - bar: { - height: chart_bullet_Height.value, - style: { - data: { - fill: chart_bullet_comparative_measure_warning_Fill_Color.var, - stroke: chart_bullet_comparative_measure_warning_stroke_Color.var, - strokeWidth: chart_bullet_comparative_measure_warning_stroke_Width.value - } - } - } -}; - -/** - * Bullet group title theme - * @private - */ -export const BulletGroupTitleTheme = { - chart: { - padding: { - bottom: 0, - left: 0, - right: 0, - top: chart_global_layout_Padding.value - } as any // Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps - }, - line: { - style: { - data: { - fill: chart_bullet_group_title_divider_Fill_Color.var, - stroke: chart_bullet_group_title_divider_stroke_Color.var, - strokeWidth: chart_bullet_group_title_divider_stroke_Width.value - } - } - } -}; - -/** - * Bullet primary dot measure theme - * @private - */ -export const BulletPrimaryDotMeasureTheme = { - group: { - height: chart_bullet_Height.value - } -}; - -/** - * Bullet primary negative measure theme - * @private - */ -export const BulletPrimaryNegativeMeasureTheme = { - group: { - colorScale: [ - chart_bullet_negative_measure_ColorScale_100.var, - chart_bullet_negative_measure_ColorScale_200.var, - chart_bullet_negative_measure_ColorScale_300.var, - chart_bullet_negative_measure_ColorScale_400.var, - chart_bullet_negative_measure_ColorScale_500.var - ], - height: chart_bullet_Height.value - } -}; - -/** - * Bullet primary segmented measure theme - * @private - */ -export const BulletPrimarySegmentedMeasureTheme = { - group: { - height: chart_bullet_Height.value - } -}; - -/** - * Bullet qualitative range theme - * @private - */ -export const BulletQualitativeRangeTheme = { - group: { - colorScale: [ - chart_bullet_qualitative_range_ColorScale_100.var, - chart_bullet_qualitative_range_ColorScale_200.var, - chart_bullet_qualitative_range_ColorScale_300.var, - chart_bullet_qualitative_range_ColorScale_400.var, - chart_bullet_qualitative_range_ColorScale_500.var - ], - height: chart_bullet_Height.value - } -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/donut-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/donut-theme.ts deleted file mode 100644 index 50409084ee4..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/components/donut-theme.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint-disable camelcase */ -import chart_donut_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_pie_Height'; -import chart_donut_pie_angle_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_pie_angle_Padding'; -import chart_donut_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_pie_Padding'; -import chart_donut_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_pie_Width'; - -/** - * Donut theme - * @private - */ -export const DonutTheme = { - pie: { - height: chart_donut_pie_Height.value, - padding: chart_donut_pie_Padding.value, - padAngle: chart_donut_pie_angle_Padding.value, - width: chart_donut_pie_Width.value - } -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/donut-threshold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/donut-threshold-theme.ts deleted file mode 100644 index 35ff8458818..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/components/donut-threshold-theme.ts +++ /dev/null @@ -1,44 +0,0 @@ -/* eslint-disable camelcase */ -import chart_donut_threshold_first_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_first_Color'; -import chart_donut_threshold_second_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_second_Color'; -import chart_donut_threshold_third_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_third_Color'; -import chart_donut_threshold_dynamic_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_dynamic_pie_Height'; -import chart_donut_threshold_dynamic_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_dynamic_pie_Padding'; -import chart_donut_threshold_dynamic_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_dynamic_pie_Width'; -import chart_donut_threshold_static_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_Height'; -import chart_donut_threshold_static_pie_angle_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_angle_Padding'; -import chart_donut_threshold_static_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_Padding'; -import chart_donut_threshold_static_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_Width'; - -/** - * Donut threshold dynamic theme - * @private - */ -export const DonutThresholdDynamicTheme = { - legend: { - colorScale: [chart_donut_threshold_second_Color.var, chart_donut_threshold_third_Color.var] - }, - pie: { - height: chart_donut_threshold_dynamic_pie_Height.value, - padding: chart_donut_threshold_dynamic_pie_Padding.value, - width: chart_donut_threshold_dynamic_pie_Width.value - } -}; - -/** - * Donut threshold static theme - * @private - */ -export const DonutThresholdStaticTheme = { - pie: { - colorScale: [ - chart_donut_threshold_first_Color.var, - chart_donut_threshold_second_Color.var, - chart_donut_threshold_third_Color.var - ], - height: chart_donut_threshold_static_pie_Height.value, - padAngle: chart_donut_threshold_static_pie_angle_Padding.value, - padding: chart_donut_threshold_static_pie_Padding.value, - width: chart_donut_threshold_static_pie_Width.value - } -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/donut-utilization-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/donut-utilization-theme.ts deleted file mode 100644 index c8f5dd2208c..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/components/donut-utilization-theme.ts +++ /dev/null @@ -1,40 +0,0 @@ -/* eslint-disable camelcase */ -import chart_donut_threshold_first_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_first_Color'; -import chart_donut_threshold_second_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_second_Color'; -import chart_donut_threshold_third_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_third_Color'; -import chart_donut_utilization_dynamic_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_Height'; -import chart_donut_utilization_dynamic_pie_angle_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_angle_Padding'; -import chart_donut_utilization_dynamic_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_Padding'; -import chart_donut_utilization_dynamic_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_Width'; -import chart_donut_utilization_static_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_static_pie_Padding'; - -/** - * Donut utilization dynamic theme - * @private - */ -export const DonutUtilizationDynamicTheme = { - pie: { - height: chart_donut_utilization_dynamic_pie_Height.value, - padding: chart_donut_utilization_dynamic_pie_Padding.value, - padAngle: chart_donut_utilization_dynamic_pie_angle_Padding.value, - width: chart_donut_utilization_dynamic_pie_Width.value - } -}; - -/** - * Donut utilization static theme - * @private - */ -export const DonutUtilizationStaticTheme = { - legend: { - colorScale: [ - chart_donut_threshold_first_Color.var, - chart_donut_threshold_second_Color.var, - chart_donut_threshold_third_Color.var - ] - }, - pie: { - colorScale: [chart_donut_threshold_first_Color.var], - padding: chart_donut_utilization_static_pie_Padding.value - } -}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/components/threshold-theme.ts b/packages/react-charts/src/components/ChartTheme/themes/components/threshold-theme.ts deleted file mode 100644 index ac16660a0d6..00000000000 --- a/packages/react-charts/src/components/ChartTheme/themes/components/threshold-theme.ts +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint-disable camelcase */ -import chart_threshold_stroke_dash_array from '@patternfly/react-tokens/dist/esm/chart_threshold_stroke_dash_array'; -import chart_threshold_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_threshold_stroke_Width'; - -/** - * Threshold theme - * @private - */ -export const ThresholdTheme = { - line: { - style: { - data: { - strokeDasharray: chart_threshold_stroke_dash_array.value, - strokeWidth: chart_threshold_stroke_Width.value - } - } - } -}; diff --git a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap deleted file mode 100644 index ca10435834b..00000000000 --- a/packages/react-charts/src/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap +++ /dev/null @@ -1,528 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartThreshold 1`] = ` - -
- - - - - - - - - - -
- -
-
- -`; - -exports[`ChartThreshold 2`] = ` - -
- - - - - - - - - - -
- -
-
- -`; - -exports[`renders component data 1`] = ` - -
- - - - - - - - - - - - - - - - - - 1.0 - - - - - - - - 2.0 - - - - - - - - 3.0 - - - - - - - - 4.0 - - - - - - - - 5.0 - - - - - - - - - - - 0.5 - - - - - - - - 1.0 - - - - - - - - 1.5 - - - - - - - - 2.0 - - - - - - - - 2.5 - - - - - - - - 3.0 - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap deleted file mode 100644 index 4ca7526b65f..00000000000 --- a/packages/react-charts/src/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap +++ /dev/null @@ -1,81 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartTooltip 1`] = ``; - -exports[`ChartTooltip 2`] = ``; - -exports[`allows tooltip via container component 1`] = ` - -
- - - - - - - - - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/components/ChartUtils/chart-container.tsx deleted file mode 100644 index c5d28afde97..00000000000 --- a/packages/react-charts/src/components/ChartUtils/chart-container.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* eslint-disable camelcase */ -import chart_container_cursor_line_Fill from '@patternfly/react-tokens/dist/esm/chart_container_cursor_line_Fill'; - -import * as React from 'react'; -import { ContainerType, createContainer as victoryCreateContainer } from 'victory-create-container'; -import { ChartCursorTooltip } from '../ChartCursorTooltip/ChartCursorTooltip'; -import { ChartLabel } from '../ChartLabel/ChartLabel'; -import { LineSegment } from 'victory-core'; - -/** - * Makes a container component with multiple behaviors. It allows you to effectively combine any two - * containers of type 'brush', 'cursor', 'selection', 'voronoi', or 'zoom'. Default container props are applied to - * support the PatternFly theme. - * - * Each behavior must be one of the following strings: 'brush', 'cursor', 'selection', 'voronoi', and 'zoom'. The - * resulting container uses the events from both behaviors. For example, if both behaviors use the click event (like - * zoom and selection) the combined container will trigger both behaviors' events on each click. - * - * Note: Order of the behaviors matters in a few cases. It is recommended to use 'zoom' before any other behaviors: for - * example, createContainer('zoom', 'voronoi') instead of createContainer('voronoi', 'zoom'). - * - * See https://formidable.com/open-source/victory/docs/create-container - * - * @param {string} behaviorA 'brush', 'cursor', 'selection', 'voronoi', or 'zoom' - * @param {string} behaviorB 'brush', 'cursor', 'selection', 'voronoi', or 'zoom' - * @public - */ -export const createContainer = (behaviorA: ContainerType, behaviorB: ContainerType) => { - const container: any = victoryCreateContainer(behaviorA, behaviorB); - const isCursor = behaviorA === 'cursor' || behaviorB === 'cursor'; - const isVoronoi = behaviorA === 'voronoi' || behaviorB === 'voronoi'; - - if (isCursor) { - container.defaultProps.cursorLabelComponent = ; - container.defaultProps.cursorComponent = ( - - ); - } - if (isVoronoi) { - container.defaultProps.labelComponent = ; - } - return container; -}; diff --git a/packages/react-charts/src/components/ChartUtils/chart-helpers.ts b/packages/react-charts/src/components/ChartUtils/chart-helpers.ts deleted file mode 100644 index a2fb26ea9fa..00000000000 --- a/packages/react-charts/src/components/ChartUtils/chart-helpers.ts +++ /dev/null @@ -1,30 +0,0 @@ -// Misc util functions - -interface ChartClassNameInterface { - className?: string; -} - -/** - * Copied from exenv - * @private - */ -export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); - -/** - * Returns the class name that will be applied to the outer-most div rendered by the chart's container - * @private - */ -export const getClassName = ({ className }: ChartClassNameInterface) => { - let cleanClassName; - - // Workaround for VictoryContainer class name - if (className) { - cleanClassName = className - .replace(/VictoryContainer/g, '') - .replace(/pf-v5-c-chart/g, '') - .replace(/pf-c-chart/g, '') - .replace(/\s+/g, ' ') - .trim(); - } - return cleanClassName && cleanClassName.length ? `pf-v5-c-chart ${cleanClassName}` : 'pf-v5-c-chart'; -}; diff --git a/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts b/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts deleted file mode 100644 index baeab5caae6..00000000000 --- a/packages/react-charts/src/components/ChartUtils/chart-theme-types.ts +++ /dev/null @@ -1,164 +0,0 @@ -import cloneDeep from 'lodash/cloneDeep'; - -import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; -import { - ChartAxisTheme, - ChartBulletComparativeErrorMeasureTheme, - ChartBulletComparativeMeasureTheme, - ChartBulletComparativeWarningMeasureTheme, - ChartBulletGroupTitleTheme, - ChartBulletPrimaryDotMeasureTheme, - ChartBulletPrimaryNegativeMeasureTheme, - ChartBulletPrimarySegmentedMeasureTheme, - ChartBulletTheme, - ChartBulletQualitativeRangeTheme, - ChartDonutTheme, - ChartDonutUtilizationDynamicTheme, - ChartDonutUtilizationStaticTheme, - ChartDonutThresholdDynamicTheme, - ChartDonutThresholdStaticTheme, - ChartThresholdTheme -} from '../ChartTheme/ChartThemeTypes'; -import { getTheme, getCustomTheme } from './chart-theme'; - -/** - * Returns axis theme - * @private - */ -export const getAxisTheme = (themeColor: string): ChartThemeDefinition => getCustomTheme(themeColor, ChartAxisTheme); - -/** - * Returns bullet chart theme - * @private - */ -export const getBulletTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletTheme); - -/** - * Returns comparative error measure theme for bullet chart - * @private - */ -export const getBulletComparativeErrorMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletComparativeErrorMeasureTheme); - -/** - * Returns comparative measure theme for bullet chart - * @private - */ -export const getBulletComparativeMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletComparativeMeasureTheme); - -/** - * Returns comparative warning measure theme for bullet chart - * @private - */ -export const getBulletComparativeWarningMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletComparativeWarningMeasureTheme); - -/** - * Returns group title theme for bullet chart - * @private - */ -export const getBulletGroupTitleTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletGroupTitleTheme); - -/** - * Returns primary dot measure theme for bullet chart - * @private - */ -export const getBulletPrimaryDotMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletPrimaryDotMeasureTheme); - -/** - * Returns primary negative measure theme for bullet chart - * @private - */ -export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletPrimaryNegativeMeasureTheme); - -/** - * Returns primary segmented measure theme for bullet chart - * @private - */ -export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletPrimarySegmentedMeasureTheme); - -/** - * Returns qualitative range theme for bullet chart - * @private - */ -export const getBulletQualitativeRangeTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartBulletQualitativeRangeTheme); - -/** - * Returns theme for Chart component - * @private - */ -export const getChartTheme = (themeColor: string, showAxis: boolean): ChartThemeDefinition => { - const theme = getTheme(themeColor); - - if (!showAxis) { - theme.axis.padding = 0; - theme.axis.style.axis.fill = 'none'; - theme.axis.style.axis.stroke = 'none'; - theme.axis.style.grid.fill = 'none'; - theme.axis.style.grid.stroke = 'none'; - theme.axis.style.ticks.fill = 'none'; - theme.axis.style.ticks.stroke = 'none'; - theme.axis.style.tickLabels.fill = 'none'; - } - return theme; -}; - -/** - * Returns donut theme - * @private - */ -export const getDonutTheme = (themeColor: string): ChartThemeDefinition => getCustomTheme(themeColor, ChartDonutTheme); - -/** - * Returns dynamic donut threshold theme - * @private - */ -export const getDonutThresholdDynamicTheme = (themeColor: string): ChartThemeDefinition => { - const theme = getCustomTheme(themeColor, ChartDonutThresholdDynamicTheme); - - // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale - theme.legend.colorScale = [theme.pie.colorScale[0], ...ChartDonutThresholdDynamicTheme.legend.colorScale]; - - // Merge the threshold colors in case users want to show the unused data - theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartDonutThresholdStaticTheme.pie.colorScale]; - return theme; -}; - -/** - * Returns static donut threshold theme - * @private - */ -export const getDonutThresholdStaticTheme = (themeColor: string, invert?: boolean): ChartThemeDefinition => { - const staticTheme = cloneDeep(ChartDonutThresholdStaticTheme); - if (invert && staticTheme.pie.colorScale instanceof Array) { - staticTheme.pie.colorScale = staticTheme.pie.colorScale.reverse(); - } - return getCustomTheme(themeColor, staticTheme); -}; - -/** - * Returns donut utilization theme - * @private - */ -export const getDonutUtilizationTheme = (themeColor: string): ChartThemeDefinition => { - const theme = getCustomTheme(themeColor, ChartDonutUtilizationDynamicTheme); - - // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale - theme.pie.colorScale = [theme.pie.colorScale[0], ...ChartDonutUtilizationStaticTheme.pie.colorScale]; - theme.legend.colorScale = [theme.legend.colorScale[0], ...ChartDonutUtilizationStaticTheme.legend.colorScale]; - return theme; -}; - -/** - * Returns threshold theme - * @private - */ -export const getThresholdTheme = (themeColor: string): ChartThemeDefinition => - getCustomTheme(themeColor, ChartThresholdTheme); diff --git a/packages/react-charts/src/components/ChartUtils/chart-theme.ts b/packages/react-charts/src/components/ChartUtils/chart-theme.ts deleted file mode 100644 index b8f7e41b0b7..00000000000 --- a/packages/react-charts/src/components/ChartUtils/chart-theme.ts +++ /dev/null @@ -1,65 +0,0 @@ -import merge from 'lodash/merge'; -import { ChartThemeColor } from '../ChartTheme/ChartThemeColor'; -import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; -import { ChartBaseTheme } from '../ChartTheme/ChartThemeTypes'; -import { BlueColorTheme } from '../ChartTheme/themes/colors/blue-theme'; -import { CyanColorTheme } from '../ChartTheme/themes/colors/cyan-theme'; -import { GoldColorTheme } from '../ChartTheme/themes/colors/gold-theme'; -import { GrayColorTheme } from '../ChartTheme/themes/colors/gray-theme'; -import { GreenColorTheme } from '../ChartTheme/themes/colors/green-theme'; -import { MultiColorOrderedTheme } from '../ChartTheme/themes/colors/multi-ordered-theme'; -import { MultiColorUnorderedTheme } from '../ChartTheme/themes/colors/multi-unordered-theme'; -import { OrangeColorTheme } from '../ChartTheme/themes/colors/orange-theme'; -import { PurpleColorTheme } from '../ChartTheme/themes/colors/purple-theme'; - -/** - * Apply custom properties to base and color themes - * - * @param themeColor The theme color to merge with custom theme - * @param customTheme The custom theme to merge - * @public - */ -export const getCustomTheme = (themeColor: string, customTheme: ChartThemeDefinition): ChartThemeDefinition => - merge(getTheme(themeColor), customTheme); - -/** - * Returns base theme for given color - * @public - */ -export const getTheme = (themeColor: string): ChartThemeDefinition => { - // Deep clone - const baseTheme = { - ...JSON.parse(JSON.stringify(ChartBaseTheme)) - }; - return merge(baseTheme, getThemeColors(themeColor)); -}; - -/** - * Returns theme colors - * @public - */ -export const getThemeColors = (themeColor: string) => { - switch (themeColor) { - case ChartThemeColor.blue: - return BlueColorTheme; - case ChartThemeColor.cyan: - return CyanColorTheme; - case ChartThemeColor.gold: - return GoldColorTheme; - case ChartThemeColor.gray: - return GrayColorTheme; - case ChartThemeColor.green: - return GreenColorTheme; - case ChartThemeColor.multi: - case ChartThemeColor.multiOrdered: - return MultiColorOrderedTheme; - case ChartThemeColor.multiUnordered: - return MultiColorUnorderedTheme; - case ChartThemeColor.orange: - return OrangeColorTheme; - case ChartThemeColor.purple: - return PurpleColorTheme; - default: - return BlueColorTheme; - } -}; diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap b/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap deleted file mode 100644 index 2d8070d8ef9..00000000000 --- a/packages/react-charts/src/components/ChartVoronoiContainer/__snapshots__/ChartVoronoContainer.test.tsx.snap +++ /dev/null @@ -1,123 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ChartVoronoiContainer 1`] = ` - -
- -
- -
-
- -`; - -exports[`ChartVoronoiContainer 2`] = ` - -
- -
- -
-
- -`; - -exports[`renders container via ChartGroup 1`] = ` - -
- - - - - - - - - - - - - - - - - - -
- -
-
- -`; diff --git a/packages/react-charts/src/components/Chart/Chart.test.tsx b/packages/react-charts/src/victory/components/Chart/Chart.test.tsx similarity index 100% rename from packages/react-charts/src/components/Chart/Chart.test.tsx rename to packages/react-charts/src/victory/components/Chart/Chart.test.tsx diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/victory/components/Chart/Chart.tsx similarity index 97% rename from packages/react-charts/src/components/Chart/Chart.tsx rename to packages/react-charts/src/victory/components/Chart/Chart.tsx index 4c5882dbad1..0cc62b87a48 100644 --- a/packages/react-charts/src/components/Chart/Chart.tsx +++ b/packages/react-charts/src/victory/components/Chart/Chart.tsx @@ -33,6 +33,7 @@ import { getChartTheme } from '../ChartUtils/chart-theme-types'; import { useEffect } from 'react'; import { ChartLabel } from '../ChartLabel/ChartLabel'; import { ChartPoint } from '../ChartPoint/ChartPoint'; +import { ChartThemeColor } from '../ChartTheme/ChartThemeColor'; /** * Chart is a wrapper component that reconciles the domain for all its children, controls the layout of the chart, @@ -234,7 +235,7 @@ export interface ChartProps extends VictoryChartProps { */ innerRadius?: number; /** - * @beta Allows legend items to wrap onto the next line if the chart is not wide enough. + * Allows legend items to wrap onto the next line if the chart is not wide enough. * * Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you * define the height and width of the chart's parent container, you must accommodate for extra legend height due to @@ -287,7 +288,7 @@ export interface ChartProps extends VictoryChartProps { */ legendPosition?: 'bottom' | 'bottom-left' | 'right'; /** - * @beta Text direction of the legend labels. + * Text direction of the legend labels. */ legendDirection?: 'ltr' | 'rtl'; /** @@ -473,7 +474,7 @@ export const Chart: React.FunctionComponent = ({ children, colorScale, hasPatterns, - legendAllowWrap = false, + legendAllowWrap, legendComponent = , legendData, legendPosition = ChartCommonStyles.legend.position, @@ -526,7 +527,8 @@ export const Chart: React.FunctionComponent = ({ theme, ...containerComponent.props, className: getClassName({ className: containerComponent.props.className }), // Override VictoryContainer class name - ...(labelComponent && { labelComponent }) // Override label component props + ...(labelComponent && { labelComponent }), // Override label component props + ...(themeColor === ChartThemeColor.skeleton && { labelComponent: }) // Omit cursor and tooltips }); let legendXOffset = 0; @@ -539,6 +541,7 @@ export const Chart: React.FunctionComponent = ({ ...(name && { name: `${name}-${(legendComponent as any).type.displayName}` }), orientation: legendOrientation, theme, + themeColor, ...(legendDirection === 'rtl' && { dataComponent: legendComponent.props.dataComponent ? ( React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` }) @@ -568,7 +571,7 @@ export const Chart: React.FunctionComponent = ({ // Adjust for axis label React.Children.toArray(children).map((child: any) => { - if (child.type.role === 'axis' && child.props.label && !child.props.dependentAxis) { + if (child.type.role === 'axis' && child.props.label && child.props.fixAxisLabelHeight) { xAxisLabelHeight = getLabelTextSize({ text: child.props.label, theme }).height + 10; legendTitleHeight = 0; } @@ -597,6 +600,7 @@ export const Chart: React.FunctionComponent = ({ padding: defaultPadding, position: legendPosition, theme, + themeColor, width, ...(defaultPatternScale && { patternScale: defaultPatternScale }) }); @@ -615,6 +619,7 @@ export const Chart: React.FunctionComponent = ({ name: `${name}-${(child as any).type.displayName}-${index}` }), theme, + themeColor, ...childProps, ...((child as any).type.displayName === 'ChartPie' && { data: mergePatternData(childProps.data, defaultPatternScale) diff --git a/packages/react-charts/src/victory/components/Chart/__snapshots__/Chart.test.tsx.snap b/packages/react-charts/src/victory/components/Chart/__snapshots__/Chart.test.tsx.snap new file mode 100644 index 00000000000..2f7a44f4d3c --- /dev/null +++ b/packages/react-charts/src/victory/components/Chart/__snapshots__/Chart.test.tsx.snap @@ -0,0 +1,1228 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Chart 1`] = ` + +
+ + + + + + + + 0.2 + + + + + + + + 0.4 + + + + + + + + 0.6 + + + + + + + + 0.8 + + + + + + + + 1.0 + + + + + + + + + + + 0.2 + + + + + + + + 0.4 + + + + + + + + 0.6 + + + + + + + + 0.8 + + + + + + + + 1.0 + + + + + +
+ +
+
+ +`; + +exports[`Chart 2`] = ` + +
+ + + + + + + + 0.2 + + + + + + + + 0.4 + + + + + + + + 0.6 + + + + + + + + 0.8 + + + + + + + + 1.0 + + + + + + + + + + + 0.2 + + + + + + + + 0.4 + + + + + + + + 0.6 + + + + + + + + 0.8 + + + + + + + + 1.0 + + + + + +
+ +
+
+ +`; + +exports[`renders axis and component children 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1.0 + + + + + + + + 1.5 + + + + + + + + 2.0 + + + + + + + + 2.5 + + + + + + + + 3.0 + + + + + + + + 3.5 + + + + + + + + 4.0 + + + + + + + + + + + 2 + + + + + + + + 4 + + + + + + + + 6 + + + + + + + + 8 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.test.tsx b/packages/react-charts/src/victory/components/ChartArea/ChartArea.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartArea/ChartArea.test.tsx rename to packages/react-charts/src/victory/components/ChartArea/ChartArea.test.tsx diff --git a/packages/react-charts/src/components/ChartArea/ChartArea.tsx b/packages/react-charts/src/victory/components/ChartArea/ChartArea.tsx similarity index 100% rename from packages/react-charts/src/components/ChartArea/ChartArea.tsx rename to packages/react-charts/src/victory/components/ChartArea/ChartArea.tsx diff --git a/packages/react-charts/src/victory/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap b/packages/react-charts/src/victory/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap new file mode 100644 index 00000000000..3515ae343bf --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartArea/__snapshots__/ChartArea.test.tsx.snap @@ -0,0 +1,157 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartArea 1`] = ` + +
+ + + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartArea 2`] = ` + +
+ + + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md similarity index 96% rename from packages/react-charts/src/components/ChartArea/examples/ChartArea.md rename to packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md index 6041a95f4d2..ca653b02301 100644 --- a/packages/react-charts/src/components/ChartArea/examples/ChartArea.md +++ b/packages/react-charts/src/victory/components/ChartArea/examples/ChartArea.md @@ -12,7 +12,7 @@ propComponents: [ hideDarkMode: true --- -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThreshold, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; ## Introduction @@ -24,7 +24,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic with right aligned legend ```js import React from 'react'; -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property
@@ -83,13 +83,13 @@ import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '
``` -### Cyan with bottom aligned legend and axis label +### Teal with bottom aligned legend and axis label This demonstrates how to combine cursor and voronoi containers to display tooltips along with a cursor. ```js import React from 'react'; -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartLegendTooltip, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartThemeColor, ChartLegendTooltip, createContainer } from '@patternfly/react-charts/victory'; // import '@patternfly/patternfly/patternfly-charts.css'; // Required for mix-blend-mode CSS property class BottomAlignedLegend extends React.Component { @@ -124,10 +124,10 @@ class BottomAlignedLegend extends React.Component { top: 50, }} maxDomain={{y: 9}} - themeColor={ChartThemeColor.cyan} + themeColor={ChartThemeColor.teal} width={650} > - + []; + /** + * When true, this prop adjusts the height between the axis label and bottom positioned legend + */ + fixAxisLabelHeight?: boolean; /** * When true, this prop reduces the number of tick labels to fit the length of the axis. * Labels are removed at approximately even intervals from the original array of labels. @@ -451,6 +455,8 @@ export const ChartAxis: React.FunctionComponent = ({ theme = getTheme(themeColor), ...rest }: ChartAxisProps) => { + const componentTheme = getComponentTheme(themeColor); + // Clone so users can override container props const container = React.cloneElement(containerComponent, { theme, @@ -462,7 +468,8 @@ export const ChartAxis: React.FunctionComponent = ({ ...(name && { id: () => `${name}-${(axisLabelComponent as any).type.displayName}` }), - ...axisLabelComponent.props + ...axisLabelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); const getTickLabelComponent = () => @@ -470,7 +477,8 @@ export const ChartAxis: React.FunctionComponent = ({ ...(name && { id: (props: any) => `${name}-${(tickLabelComponent as any).type.displayName}-${props.index}` }), - ...tickLabelComponent.props + ...tickLabelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); // Note: containerComponent is required for theme diff --git a/packages/react-charts/src/victory/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap b/packages/react-charts/src/victory/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap new file mode 100644 index 00000000000..9d63fdfa12c --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartAxis/__snapshots__/ChartAxis.test.tsx.snap @@ -0,0 +1,789 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartAxis 1`] = ` + +
+ + + + + + + 0.0 + + + + + + + + 0.2 + + + + + + + + 0.4 + + + + + + + + 0.6 + + + + + + + + 0.8 + + + + + + + + 1.0 + + + + +
+ +
+
+ +`; + +exports[`ChartAxis 2`] = ` + +
+ + + + + + + 0.0 + + + + + + + + 0.2 + + + + + + + + 0.4 + + + + + + + + 0.6 + + + + + + + + 0.8 + + + + + + + + 1.0 + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2 + + + + + + + + 3 + + + + + + + + 4 + + + + + + + + + + + 2 + + + + + + + + 5 + + + + + + + + 8 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.test.tsx b/packages/react-charts/src/victory/components/ChartBar/ChartBar.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartBar/ChartBar.test.tsx rename to packages/react-charts/src/victory/components/ChartBar/ChartBar.test.tsx diff --git a/packages/react-charts/src/components/ChartBar/ChartBar.tsx b/packages/react-charts/src/victory/components/ChartBar/ChartBar.tsx similarity index 100% rename from packages/react-charts/src/components/ChartBar/ChartBar.tsx rename to packages/react-charts/src/victory/components/ChartBar/ChartBar.tsx diff --git a/packages/react-charts/src/victory/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap new file mode 100644 index 00000000000..93022e5629a --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBar/__snapshots__/ChartBar.test.tsx.snap @@ -0,0 +1,747 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBar 1`] = ` + +
+ + + + + + + + +
+ +
+
+ +`; + +exports[`ChartBar 2`] = ` + +
+ + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Cats + + + + + + + + Dogs + + + + + + + + Birds + + + + + + + + Mice + + + + + + + + + + + 2 + + + + + + + + 4 + + + + + + + + 6 + + + + + + + + 8 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md b/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md new file mode 100644 index 00000000000..bdeed8c426b --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBar/examples/ChartBar.md @@ -0,0 +1,475 @@ +--- +id: Bar chart +section: charts +propComponents: ['Chart', 'ChartAxis', 'ChartBar', 'ChartGroup', 'ChartLabel', 'ChartVoronoiContainer'] +hideDarkMode: true +--- + +import { Chart, ChartAxis, ChartBar, ChartGroup, ChartLabel, ChartThemeColor, ChartTooltip, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; +import { VictoryZoomContainer } from 'victory-zoom-container'; +import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100'; +import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100'; +import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100'; + +## Introduction + +Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! + +PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. + +## Examples + +### Basic with right aligned legend + +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBar, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea /> + } + domain={{ y: [0, 9] }} + domainPadding={{ x: [30, 25] }} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + name="chart1" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + width={600} + > + + + + + + + + + +
; +``` + +### Purple with bottom aligned legend + +This demonstrates an alternate way of applying tooltips using data labels. + +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory'; + +class EmbeddedLegend extends React.Component { + render() { + const label = ({ datum }) => `${datum.name}: ${datum.y}`; + + return ( +
+ + + + + } + /> + } + /> + } + /> + } + /> + + +
+ ); + } +} +``` + +### Multi-color (ordered) with bottom-left aligned legend + +This demonstrates zoom for both the x and y axis. + +```js +import React from 'react'; +import { Chart, ChartAxis, ChartBar, ChartGroup, ChartThemeColor } from '@patternfly/react-charts/victory'; +import { VictoryZoomContainer } from 'victory-zoom-container'; + +
+ } + domainPadding={{ x: [30, 25] }} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} + legendPosition="bottom-left" + height={400} + name="chart3" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 50, + right: 100, // Adjusted to accommodate tooltip + top: 50 + }} + themeColor={ChartThemeColor.multiOrdered} + width={450} + > + + + + + + + + + +
; +``` + +### Single with right aligned legend + +```js +import React from 'react'; +import { Chart, ChartBar, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea /> + } + domain={{ y: [0, 9] }} + domainPadding={{ x: [30, 25] }} + legendData={[{ name: 'Cats' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + name="chart4" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + width={600} + > + + +
; +``` + +### Alerts timeline + +A gnatt-like chart using `y` and `y0` data properties for alert start/end dates + +```js +import React from 'react'; +import { + Chart, + ChartAxis, + ChartBar, + ChartGroup, + ChartLabel, + ChartTooltip, + ChartVoronoiContainer +} from '@patternfly/react-charts/victory'; +import t_global_color_status_danger_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_danger_100'; +import t_global_color_status_info_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_info_100'; +import t_global_color_status_warning_100 from '@patternfly/react-tokens/dist/esm/t_global_color_status_warning_100'; + +class Timeline extends React.Component { + render() { + // Start = y0, end = y + const alerts = [ + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-09T02:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'danger' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' } + ], + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-07T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'danger' } + ], + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'danger' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'info' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } + ], + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'info' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'info' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'info' } + ], + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-09T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } + ], + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } + ], + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-07T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-07T04:30:00'), y: new Date('2024-08-08T05:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-10T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-11T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } + ], + [ + { y0: new Date('2024-08-06T01:30:00'), y: new Date('2024-08-08T02:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-08T07:30:00'), y: new Date('2024-08-09T09:30:00'), severity: 'warn' }, + { y0: new Date('2024-08-10T05:30:00'), y: new Date('2024-08-11T20:00:00'), severity: 'warn' }, + { y0: new Date('2024-08-12T10:00:00'), y: new Date('2024-08-13T10:30:00'), severity: 'warn' } + ] + ]; + + const formatDate = (date, isTime) => { + const dateString = date?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); + const timeString = date?.toLocaleTimeString('en-US', { hour12: false }); + return isTime ? `${dateString} ${timeString}` : dateString; + }; + + const getChart = (alert, index) => { + const data = []; + + alert?.map((datum) => { + data.push({ + ...datum, + x: alerts.length - index, + fill: + datum.severity === 'danger' + ? t_global_color_status_danger_100.var + : datum.severity === 'warn' + ? t_global_color_status_warning_100.var + : t_global_color_status_info_100.var + }); + }); + + if (data?.length === 0) { + return null; + } + return ( + datum.fill, + stroke: ({ datum }) => datum.fill + } + }} + /> + ); + }; + + return ( +
+ } /> + } + labels={({ datum }) => + `Severity: ${datum.severity}\nStart: ${formatDate(new Date(datum.y0), true)}\nEnd: ${formatDate(new Date(datum.y), true)}` + } + /> + } + domainPadding={{ x: [20, 20], y: [20, 20] }} + legendData={[ + { name: 'Danger', symbol: { fill: t_global_color_status_danger_100.var } }, + { name: 'Info', symbol: { fill: t_global_color_status_info_100.var } }, + { name: 'Warning', symbol: { fill: t_global_color_status_warning_100.var } } + ]} + legendPosition="bottom-left" + height={400} + name="chart5" + padding={{ + bottom: 75, // Adjusted to accommodate legend + left: 100, + right: 50, // Adjusted to accommodate tooltip + top: 50 + }} + width={450} + > + new Date(t).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} + tickValues={[ + new Date('2024-08-06T00:00:00'), + new Date('2024-08-08T00:00:00'), + new Date('2024-08-10T00:00:00'), + new Date('2024-08-12T00:00:00') + ]} + /> + } + label="Incidents" + padding={{ top: 20, bottom: 60 }} + style={{ + axis: { + stroke: 'transparent' + }, + ticks: { + stroke: 'transparent' + }, + tickLabels: { + fill: 'transparent' + } + }} + /> + {alerts.map((alert, index) => getChart(alert, index))} + +
+ ); + } +} +``` + +## Documentation + +### Tips + +- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) +- For single data points or zero values, you may want to set the `domain` prop +- `ChartLegend` may be used as a standalone component, instead of using `legendData` +- The `theme` and `themeColor` props should be applied at the most top level component +- Use `ChartGroup` to apply theme color scales and other properties to multiple components + +### Note + +Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here: + +- For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart) +- For `ChartAxis` props, see [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis) +- For `ChartBar` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar) +- For `ChartGroup` props, see [VictoryGroup](https://formidable.com/open-source/victory/docs/victory-group) +- For `ChartVoronoiContainer` props, see [VictoryVoronoiContainer](https://formidable.com/open-source/victory/docs/victory-voronoi-container) diff --git a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.test.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.test.tsx rename to packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.test.tsx diff --git a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx b/packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx similarity index 99% rename from packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx rename to packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx index a5b396b2098..3a69f53a43c 100644 --- a/packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/ChartBoxPlot.tsx @@ -36,7 +36,6 @@ import { getTheme } from '../ChartUtils/chart-theme'; * * See https://github.com/FormidableLabs/victory/blob/main/packages/victory-bar/src/index.d.ts * - * @beta */ export interface ChartBoxPlotProps extends VictoryBoxPlotProps { /** diff --git a/packages/react-charts/src/victory/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap new file mode 100644 index 00000000000..a5fe7944808 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/__snapshots__/ChartBoxPlot.test.tsx.snap @@ -0,0 +1,996 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBar 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartBar 2`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 2015 + + + + + + + + 2016 + + + + + + + + 2017 + + + + + + + + 2018 + + + + + + + + + + + 2 + + + + + + + + 4 + + + + + + + + 6 + + + + + + + + 8 + + + + + + + + 10 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md similarity index 90% rename from packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md rename to packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md index fe4d4194141..b54a7690896 100644 --- a/packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md +++ b/packages/react-charts/src/victory/components/ChartBoxPlot/examples/ChartBoxPlot.md @@ -10,10 +10,9 @@ propComponents: [ 'ChartVoronoiContainer' ] hideDarkMode: true -beta: true --- -import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory'; import { VictoryZoomContainer } from 'victory-zoom-container'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; @@ -27,7 +26,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic with right aligned legend ```js import React from 'react'; -import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory';
@@ -116,7 +115,7 @@ This demonstrates how to embed a legend within a tooltip. Combining cursor and v ```js import React from 'react'; -import { Chart, ChartAxis, ChartBoxPlot, ChartLegendTooltip, ChartThemeColor, ChartThreshold, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBoxPlot, ChartLegendTooltip, ChartThemeColor, ChartThreshold, createContainer } from '@patternfly/react-charts/victory'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; class EmbeddedLegend extends React.Component { @@ -124,19 +123,31 @@ class EmbeddedLegend extends React.Component { // Note: Container order is important const CursorVoronoiContainer = createContainer("voronoi", "cursor"); const legendData = [ - { childName: 'cats', name: 'Cats' }, { childName: 'limit', name: 'Limit', symbol: { fill: chart_color_orange_300.var, type: 'threshold' } }, + { childName: 'cats', name: 'Cats' }, + // Force extra space below for line wrapping + { + childName: 'cats', + name: '', + symbol: { fill: 'none' } + }, + { + childName: 'cats', + name: '', + symbol: { fill: 'none' } + }, ]; const labelFormatter = (datum) => { // With box plot data, datum.y will also be an array if (datum && (datum._min || datum._median || datum._max || datum._q1 || datum._q3)) { - return `q1: ${datum._q1}, q3: ${datum._q3}`; + return `Min: ${datum._min}, Max: ${datum._max}\nMedian: ${datum._median}\nQ1: ${datum._q1}, Q3: ${datum._q3}`; } - return `${datum.y !== null ? datum.y : 'no data'}`; + const yVal = Array.isArray(datum.y) ? datum.y[0] : datum.y; + return yVal !== null ? yVal : 'no data'; } return (
@@ -147,19 +158,7 @@ class EmbeddedLegend extends React.Component { labelFormatter(datum)} - labelComponent={ - datum.x} - /> - } + labelComponent={ datum.x} />} mouseFollowTooltips voronoiDimension="x" voronoiPadding={50} @@ -182,15 +181,6 @@ class EmbeddedLegend extends React.Component { > - +
); @@ -218,7 +217,7 @@ This demonstrates how to embed HTML within a tooltip. Combining cursor and voron ```js import React from 'react'; -import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBoxPlot, ChartCursorTooltip, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory'; class EmbeddedHtml extends React.Component { constructor(props) { @@ -292,8 +291,6 @@ class EmbeddedHtml extends React.Component { labels={({ datum }) => `${datum.y}`} labelComponent={ width > center.x + flyoutWidth + 10 ? offset : -offset}} - flyout={} flyoutHeight={145} flyoutWidth={110} labelComponent={ datum.x} />} diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx b/packages/react-charts/src/victory/components/ChartBullet/ChartBullet.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartBullet/ChartBullet.test.tsx rename to packages/react-charts/src/victory/components/ChartBullet/ChartBullet.test.tsx diff --git a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx b/packages/react-charts/src/victory/components/ChartBullet/ChartBullet.tsx similarity index 97% rename from packages/react-charts/src/components/ChartBullet/ChartBullet.tsx rename to packages/react-charts/src/victory/components/ChartBullet/ChartBullet.tsx index 42ab60edcd5..fd79bc04547 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBullet.tsx +++ b/packages/react-charts/src/victory/components/ChartBullet/ChartBullet.tsx @@ -212,7 +212,7 @@ export interface ChartBulletProps { */ labels?: string[] | number[] | ((data: any) => string | number | null); /** - * @beta Allows legend items to wrap onto the next line if the chart is not wide enough. + * Allows legend items to wrap onto the next line if the chart is not wide enough. * * Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you * define the height and width of the chart's parent container, you must accommodate for extra legend height due to @@ -255,7 +255,7 @@ export interface ChartBulletProps { */ legendPosition?: 'bottom' | 'bottom-left' | 'right'; /** - * @beta Text direction of the legend labels. + * Text direction of the legend labels. */ legendDirection?: 'ltr' | 'rtl'; /** @@ -594,6 +594,7 @@ export const ChartBullet: React.FunctionComponent = ({ standalone: false, subTitle: groupSubTitle, title: groupTitle, + themeColor, width, ...groupTitleComponent.props }); @@ -608,6 +609,7 @@ export const ChartBullet: React.FunctionComponent = ({ standalone: false, subTitle, theme, + themeColor, title, titlePosition, width, @@ -617,7 +619,12 @@ export const ChartBullet: React.FunctionComponent = ({ // Comparative error measure const comparativeErrorMeasure = React.cloneElement(comparativeErrorMeasureComponent, { allowTooltip, - barWidth: getComparativeMeasureErrorWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getComparativeMeasureErrorWidth({ + height: chartSize.height, + horizontal, + themeColor, + width: chartSize.width + }), constrainToVisibleArea, data: comparativeErrorMeasureData, domain, @@ -627,6 +634,7 @@ export const ChartBullet: React.FunctionComponent = ({ labels, padding, standalone: false, + themeColor, width: chartSize.width, y: comparativeErrorMeasureDataY, ...comparativeErrorMeasureComponent.props @@ -635,7 +643,12 @@ export const ChartBullet: React.FunctionComponent = ({ // Comparative warning measure const comparativeWarningMeasure = React.cloneElement(comparativeWarningMeasureComponent, { allowTooltip, - barWidth: getComparativeMeasureWarningWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getComparativeMeasureWarningWidth({ + height: chartSize.height, + horizontal, + themeColor, + width: chartSize.width + }), constrainToVisibleArea, data: comparativeWarningMeasureData, domain, @@ -645,6 +658,7 @@ export const ChartBullet: React.FunctionComponent = ({ labels, padding, standalone: false, + themeColor, width: chartSize.width, y: comparativeWarningMeasureDataY, ...comparativeWarningMeasureComponent.props @@ -652,13 +666,14 @@ export const ChartBullet: React.FunctionComponent = ({ // Comparative zero measure const comparativeZeroMeasure = React.cloneElement(comparativeZeroMeasureComponent, { - barWidth: getComparativeMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getComparativeMeasureWidth({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), data: [{ y: 0 }], domain, height: chartSize.height, horizontal, padding, standalone: false, + themeColor, width: chartSize.width, ...comparativeZeroMeasureComponent.props }); @@ -691,6 +706,7 @@ export const ChartBullet: React.FunctionComponent = ({ orientation: legendOrientation, position: legendPosition, theme, + themeColor, ...(legendDirection === 'rtl' && { dataComponent: legendComponent.props.dataComponent ? ( React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` }) @@ -700,7 +716,10 @@ export const ChartBullet: React.FunctionComponent = ({ }), ...(legendDirection === 'rtl' && { labelComponent: legendComponent.props.labelComponent ? ( - React.cloneElement(legendComponent.props.labelComponent, { direction: 'rtl', dx: legendXOffset - 30 }) + React.cloneElement(legendComponent.props.labelComponent, { + direction: 'rtl', + dx: legendXOffset - 30 + }) ) : ( ) @@ -720,7 +739,7 @@ export const ChartBullet: React.FunctionComponent = ({ labelComponent: allowTooltip ? : undefined, labels, padding, - size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, width: chartSize.width }), + size: getPrimaryDotMeasureSize({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), standalone: false, themeColor, width: chartSize.width, @@ -732,7 +751,12 @@ export const ChartBullet: React.FunctionComponent = ({ const primarySegmentedMeasure = React.cloneElement(primarySegmentedMeasureComponent, { allowTooltip, constrainToVisibleArea, - barWidth: getPrimarySegmentedMeasureWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getPrimarySegmentedMeasureWidth({ + height: chartSize.height, + horizontal, + themeColor, + width: chartSize.width + }), data: primarySegmentedMeasureData, domain, height: chartSize.height, @@ -752,7 +776,7 @@ export const ChartBullet: React.FunctionComponent = ({ const qualitativeRange = React.cloneElement(qualitativeRangeComponent, { allowTooltip, constrainToVisibleArea, - barWidth: getQualitativeRangeBarWidth({ height: chartSize.height, horizontal, width: chartSize.width }), + barWidth: getQualitativeRangeBarWidth({ height: chartSize.height, horizontal, themeColor, width: chartSize.width }), data: qualitativeRangeData, domain, height: chartSize.height, @@ -762,6 +786,7 @@ export const ChartBullet: React.FunctionComponent = ({ labels, padding, standalone: false, + themeColor, width: chartSize.width, y: qualitativeRangeDataY, y0: qualitativeRangeDataY0, @@ -868,6 +893,7 @@ export const ChartBullet: React.FunctionComponent = ({ offsetY: horizontal ? 80 - defaultPadding.top * 0.5 + (defaultPadding.bottom * 0.5 - 25) : 0, padding, standalone: false, + themeColor, tickCount: ChartBulletStyles.axisTickCount, tickValues: getTickValues((domain as any).y[0], (domain as any).y[1]), width: chartSize.width, diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx b/packages/react-charts/src/victory/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx rename to packages/react-charts/src/victory/components/ChartBullet/ChartBulletComparativeErrorMeasure.test.tsx diff --git a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx b/packages/react-charts/src/victory/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx similarity index 99% rename from packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx rename to packages/react-charts/src/victory/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx index 9fb745700e0..9e90749308b 100644 --- a/packages/react-charts/src/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx +++ b/packages/react-charts/src/victory/components/ChartBullet/ChartBulletComparativeErrorMeasure.tsx @@ -201,6 +201,7 @@ export const ChartBulletComparativeErrorMeasure: React.FunctionComponent { + const componentTheme = getComponentTheme(themeColor); const titleProps = titleComponent ? titleComponent.props : {}; const showBoth = title && subTitle; return React.cloneElement(titleComponent, { @@ -183,7 +185,8 @@ export const ChartBulletGroupTitle: React.FunctionComponent = // Returns title const getTitle = () => { + const componentTheme = getComponentTheme(themeColor); const showBoth = title && subTitle; let labelPosition: 'bottom' | 'left' | 'top-left' = horizontal ? 'left' : 'bottom'; @@ -215,7 +217,8 @@ export const ChartBulletTitle: React.FunctionComponent = dy, labelPosition }), - ...titleComponent.props + ...titleComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); }; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap new file mode 100644 index 00000000000..35959e4a231 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBullet.test.tsx.snap @@ -0,0 +1,468 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletQualitativeRange 1`] = ` + +
+ + + + + + + + 0 + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartBulletQualitativeRange 2`] = ` + +
+ + + + + + + + 0 + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + Bullet chart example + + + Storage capacity + + + + + + + + 0 + + + + + + + + 100 + + + + + + + + 25 + + + + + + + + 50 + + + + + + + + 75 + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap new file mode 100644 index 00000000000..75180d1bb27 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeErrorMeasure.test.tsx.snap @@ -0,0 +1,102 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletComparativeErrorMeasure 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletComparativeErrorMeasure 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap new file mode 100644 index 00000000000..af43094b9b8 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeMeasure.test.tsx.snap @@ -0,0 +1,102 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletComparativeMeasure 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletComparativeMeasure 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap new file mode 100644 index 00000000000..9149f42388a --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletComparativeWarningMeasure.test.tsx.snap @@ -0,0 +1,102 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletComparativeZeroMeasure 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletComparativeZeroMeasure 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap new file mode 100644 index 00000000000..01c4dc97c33 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletGroupTitle.test.tsx.snap @@ -0,0 +1,117 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletGroupTitle 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletGroupTitle 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + Text label + + + Measure details + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap new file mode 100644 index 00000000000..24245b39c2b --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletPrimaryDotMeasure.test.tsx.snap @@ -0,0 +1,116 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletPrimaryDotMeasure 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletPrimaryDotMeasure 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap new file mode 100644 index 00000000000..6bda69b6a2b --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletPrimarySegmentedMeasure.test.tsx.snap @@ -0,0 +1,140 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletPrimarySegmentedMeasure 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletPrimarySegmentedMeasure 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap new file mode 100644 index 00000000000..2f317537431 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletQualitativeRange.test.tsx.snap @@ -0,0 +1,140 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletQualitativeRange 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletQualitativeRange 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap new file mode 100644 index 00000000000..c4decf7d44e --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartBullet/__snapshots__/ChartBulletTitle.test.tsx.snap @@ -0,0 +1,109 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartBulletTitle 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartBulletTitle 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + Text label + + + Measure details + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md b/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md similarity index 96% rename from packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md rename to packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md index 6bfac2a2571..78ff60aa8dd 100644 --- a/packages/react-charts/src/components/ChartBullet/examples/ChartBullet.md +++ b/packages/react-charts/src/victory/components/ChartBullet/examples/ChartBullet.md @@ -9,7 +9,7 @@ propComponents: [ hideDarkMode: true --- -import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor } from '@patternfly/react-charts'; +import { ChartAxis, ChartBullet, ChartContainer, ChartThemeColor } from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; ## Introduction @@ -21,7 +21,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic ```js import React from 'react'; -import { ChartBullet } from '@patternfly/react-charts'; +import { ChartBullet } from '@patternfly/react-charts/victory';
@@ -453,7 +453,7 @@ import { ChartBullet } from '@patternfly/react-charts'; ### Custom labels ```js import React from 'react'; -import { ChartAxis, ChartBullet } from '@patternfly/react-charts'; +import { ChartAxis, ChartBullet } from '@patternfly/react-charts/victory';
+
+ +
+ +
+
+ +`; + +exports[`ChartContainer 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders container via ChartLegend 1`] = ` + +
+ + + + + + + + Average number of pets + + + + + Cats + + + + + Dogs + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx b/packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.test.tsx rename to packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.test.tsx diff --git a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx b/packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx similarity index 97% rename from packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx rename to packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx index a5790a3523c..d9ff309148b 100644 --- a/packages/react-charts/src/components/ChartCursorContainer/ChartCursorContainer.tsx +++ b/packages/react-charts/src/victory/components/ChartCursorContainer/ChartCursorContainer.tsx @@ -11,7 +11,7 @@ import { } from 'victory-cursor-container'; import { ChartLabel } from '../ChartLabel/ChartLabel'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; -import { getTheme } from '../ChartUtils/chart-theme'; +import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme'; import { getClassName } from '../ChartUtils/chart-helpers'; /** @@ -33,7 +33,7 @@ export interface ChartCursorContainerProps extends VictoryCursorContainerProps { */ children?: React.ReactElement | React.ReactElement[]; /** - * The className prop specifies a className that will be applied to the outer-most div rendered by the container + * The className prop specifies a className that will be applied to the outermost div rendered by the container */ className?: string; /** @@ -210,10 +210,12 @@ export const ChartCursorContainer: React.FunctionComponent, // Note that Victory provides its own label component here ...rest }: ChartCursorContainerProps) => { + const componentTheme = getComponentTheme(themeColor); const chartClassName = getClassName({ className }); const chartCursorLabelComponent = React.cloneElement(cursorLabelComponent, { theme, - ...cursorLabelComponent.props + ...cursorLabelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); // Clone so users can override cursor container props @@ -237,7 +239,6 @@ export const ChartCursorContainer: React.FunctionComponent +
+ +
+ +
+
+ +`; + +exports[`ChartVoronoiContainer 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders container via ChartGroup 1`] = ` + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx rename to packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorFlyout.test.tsx diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorFlyout.tsx similarity index 84% rename from packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx rename to packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorFlyout.tsx index 1a0e58277f4..d2a135c0812 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorFlyout.tsx +++ b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorFlyout.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import PropTypes from 'prop-types'; -import { Helpers, CommonProps, Path } from 'victory-core'; +import { Helpers, OrientationTypes, Path, VictoryCommonPrimitiveProps } from 'victory-core'; import isPlainObject from 'lodash/isPlainObject'; const getVerticalPath = (props: any) => { @@ -92,8 +91,32 @@ const evaluateProps = (props: any) => { return Object.assign({}, props, { id, style }); }; -const ChartCursorFlyout = (props: any) => { - props = evaluateProps(props); +interface ChartCursorFlyoutProps extends VictoryCommonPrimitiveProps { + center?: { + x: number; + y: number; + }; + cornerRadius?: number; + datum?: object; + dx?: number; + dy?: number; + height?: number; + orientation?: OrientationTypes; + pathComponent?: React.ReactElement; + pointerLength?: number; + pointerWidth?: number; + width?: number; + x?: number; + y?: number; +} + +const ChartCursorFlyout = (props: ChartCursorFlyoutProps) => { + props = evaluateProps({ + pathComponent: , + role: 'presentation', + shapeRendering: 'auto', + ...props + }); return React.cloneElement(props.pathComponent, { ...props.events, @@ -107,27 +130,4 @@ const ChartCursorFlyout = (props: any) => { }); }; -ChartCursorFlyout.propTypes = { - ...CommonProps.primitiveProps, - center: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }), - cornerRadius: PropTypes.number, - datum: PropTypes.object, - dx: PropTypes.number, - dy: PropTypes.number, - height: PropTypes.number, - orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), - pathComponent: PropTypes.element, - pointerLength: PropTypes.number, - pointerWidth: PropTypes.number, - width: PropTypes.number, - x: PropTypes.number, - y: PropTypes.number -}; - -ChartCursorFlyout.defaultProps = { - pathComponent: , - role: 'presentation', - shapeRendering: 'auto' -}; - export { ChartCursorFlyout }; diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx rename to packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.test.tsx diff --git a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.tsx similarity index 98% rename from packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx rename to packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.tsx index 85d617a406b..83e600ad0a5 100644 --- a/packages/react-charts/src/components/ChartCursorTooltip/ChartCursorTooltip.tsx +++ b/packages/react-charts/src/victory/components/ChartCursorTooltip/ChartCursorTooltip.tsx @@ -32,7 +32,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -226,7 +226,7 @@ export interface ChartCursorTooltipProps extends ChartTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. @@ -287,9 +287,9 @@ export const ChartCursorTooltip: React.FunctionComponent { - let _pointerLength = Helpers.evaluateProp(pointerLength); + let _pointerLength = Helpers.evaluateProp(pointerLength, undefined); if (showPointer && _pointerLength === 0) { - _pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + _pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; } return React.cloneElement(flyoutComponent, { pointerLength: _pointerLength, diff --git a/packages/react-charts/src/victory/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap b/packages/react-charts/src/victory/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap new file mode 100644 index 00000000000..b655956fd5d --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartCursorTooltip/__snapshots__/ChartCursorFlyout.test.tsx.snap @@ -0,0 +1,81 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartTooltip 1`] = ``; + +exports[`ChartTooltip 2`] = ``; + +exports[`allows tooltip via container component 1`] = ` + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap b/packages/react-charts/src/victory/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap new file mode 100644 index 00000000000..3ff505314c0 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartCursorTooltip/__snapshots__/ChartCursorTooltip.test.tsx.snap @@ -0,0 +1,81 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartCursorTooltip 1`] = ``; + +exports[`ChartCursorTooltip 2`] = ``; + +exports[`allows tooltip via container component 1`] = ` + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.test.tsx b/packages/react-charts/src/victory/components/ChartDonut/ChartDonut.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartDonut/ChartDonut.test.tsx rename to packages/react-charts/src/victory/components/ChartDonut/ChartDonut.test.tsx diff --git a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx b/packages/react-charts/src/victory/components/ChartDonut/ChartDonut.tsx similarity index 97% rename from packages/react-charts/src/components/ChartDonut/ChartDonut.tsx rename to packages/react-charts/src/victory/components/ChartDonut/ChartDonut.tsx index d5b3aa74b27..3fb5974533b 100644 --- a/packages/react-charts/src/components/ChartDonut/ChartDonut.tsx +++ b/packages/react-charts/src/victory/components/ChartDonut/ChartDonut.tsx @@ -26,6 +26,7 @@ import { ChartCommonStyles } from '../ChartTheme/ChartStyles'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; import { getPaddingForSide } from '../ChartUtils/chart-padding'; import { getPieLabelX, getPieLabelY } from '../ChartUtils/chart-label'; +import { getComponentTheme } from '../ChartUtils/chart-theme'; interface ChartDonutSubTitleInterface { dy?: number; @@ -293,7 +294,7 @@ export interface ChartDonutProps extends ChartPieProps { */ labels?: string[] | number[] | ((data: any) => string | number | null); /** - * @beta Allows legend items to wrap onto the next line if the chart is not wide enough. + * Allows legend items to wrap onto the next line if the chart is not wide enough. * * Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you * define the height and width of the chart's parent container, you must accommodate for extra legend height due to @@ -346,7 +347,7 @@ export interface ChartDonutProps extends ChartPieProps { */ legendPosition?: 'bottom' | 'right'; /** - * @beta Text direction of the legend labels. + * Text direction of the legend labels. */ legendDirection?: 'ltr' | 'rtl'; /** @@ -596,6 +597,8 @@ export const ChartDonut: React.FunctionComponent = ({ width = theme.pie.width, ...rest }: ChartDonutProps) => { + const componentTheme = getComponentTheme(themeColor); + const defaultPadding = { bottom: getPaddingForSide('bottom', padding, theme.pie.padding), left: getPaddingForSide('left', padding, theme.pie.padding), @@ -603,13 +606,13 @@ export const ChartDonut: React.FunctionComponent = ({ top: getPaddingForSide('top', padding, theme.pie.padding) }; const chartRadius = radius - ? radius + ? Helpers.evaluateProp(radius, undefined) : Helpers.getRadius({ height, width, padding: defaultPadding }); - const chartInnerRadius = innerRadius ? innerRadius : chartRadius - 9; // Todo: Add pf-core variable + const chartInnerRadius = innerRadius ? Helpers.evaluateProp(innerRadius, undefined) : chartRadius - 9; // Todo: Add pf-core variable const centerSubTitle = subTitle && subTitlePosition === 'center'; // Returns title and subtitle @@ -659,7 +662,8 @@ export const ChartDonut: React.FunctionComponent = ({ padding: defaultPadding, width }), - ...subTitleProps + ...subTitleProps, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); }; @@ -692,7 +696,8 @@ export const ChartDonut: React.FunctionComponent = ({ padding: defaultPadding, width }), - ...titleProps + ...titleProps, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); }; @@ -710,6 +715,7 @@ export const ChartDonut: React.FunctionComponent = ({ radius={chartRadius > 0 ? chartRadius : 0} standalone={false} theme={theme} + themeColor={themeColor} width={width} {...rest} /> diff --git a/packages/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap b/packages/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap new file mode 100644 index 00000000000..57ce9f32e2a --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartDonut/__snapshots__/ChartDonut.test.tsx.snap @@ -0,0 +1,182 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartDonut 1`] = ` + +
+ + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartDonut 2`] = ` + +
+ + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md b/packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonut.md similarity index 93% rename from packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md rename to packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonut.md index b8a74f4541d..63e2917cad9 100644 --- a/packages/react-charts/src/components/ChartDonut/examples/ChartDonut.md +++ b/packages/react-charts/src/victory/components/ChartDonut/examples/ChartDonut.md @@ -7,7 +7,7 @@ propComponents: [ hideDarkMode: true --- -import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts'; +import { ChartDonut, ChartThemeColor } from '@patternfly/react-charts/victory'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! @@ -18,7 +18,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic ```js import React from 'react'; -import { ChartDonut } from '@patternfly/react-charts'; +import { ChartDonut } from '@patternfly/react-charts/victory';
diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx rename to packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.test.tsx diff --git a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.tsx similarity index 99% rename from packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx rename to packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.tsx index 90b8cf1ee03..66ffc28dccb 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx +++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/ChartDonutUtilization.tsx @@ -265,7 +265,7 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { */ isStatic?: boolean; /** - * @beta Allows legend items to wrap onto the next line if the chart is not wide enough. + * Allows legend items to wrap onto the next line if the chart is not wide enough. * * Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you * define the height and width of the chart's parent container, you must accommodate for extra legend height due to @@ -338,7 +338,7 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps { */ legendPosition?: 'bottom' | 'right'; /** - * @beta Text direction of the legend labels. + * Text direction of the legend labels. */ legendDirection?: 'ltr' | 'rtl'; /** @@ -688,6 +688,7 @@ export const ChartDonutUtilization: React.FunctionComponent diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap new file mode 100644 index 00000000000..9313a70e4cc --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutThreshold.test.tsx.snap @@ -0,0 +1,133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartDonutThreshold 1`] = ` + +
+ + + + + +
+ +
+
+ +`; + +exports[`ChartDonutThreshold 2`] = ` + +
+ + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap new file mode 100644 index 00000000000..4068fd9ac80 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/__snapshots__/ChartDonutUtilization.test.tsx.snap @@ -0,0 +1,133 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartDonutUtilization 1`] = ` + +
+ + + + + + +
+ +
+
+ +`; + +exports[`ChartDonutUtilization 2`] = ` + +
+ + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md b/packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md similarity index 95% rename from packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md rename to packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md index 512e3b26458..c92e0521a57 100644 --- a/packages/react-charts/src/components/ChartDonutUtilization/examples/ChartDonutUtilization.md +++ b/packages/react-charts/src/victory/components/ChartDonutUtilization/examples/ChartDonutUtilization.md @@ -8,7 +8,7 @@ propComponents: [ hideDarkMode: true --- -import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts'; +import { ChartDonutThreshold, ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory'; ## Introduction Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! @@ -19,7 +19,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic ```js import React from 'react'; -import { ChartDonutUtilization } from '@patternfly/react-charts'; +import { ChartDonutUtilization } from '@patternfly/react-charts/victory';
= ({ {renderChildrenWithPatterns({ children, - patternScale: defaultPatternScale + patternScale: defaultPatternScale, + themeColor })} {isPatternDefs && getPatternDefs({ patternId, colorScale: defaultColorScale })} diff --git a/packages/react-charts/src/victory/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap b/packages/react-charts/src/victory/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap new file mode 100644 index 00000000000..bbc3264e6c1 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartGroup/__snapshots__/ChartGroup.test.tsx.snap @@ -0,0 +1,131 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartGroup 1`] = ` + +
+ +
+ +
+
+ +`; + +exports[`ChartGroup 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders container children 1`] = ` + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartLabel/ChartLabel.test.tsx b/packages/react-charts/src/victory/components/ChartLabel/ChartLabel.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartLabel/ChartLabel.test.tsx rename to packages/react-charts/src/victory/components/ChartLabel/ChartLabel.test.tsx diff --git a/packages/react-charts/src/components/ChartLabel/ChartLabel.tsx b/packages/react-charts/src/victory/components/ChartLabel/ChartLabel.tsx similarity index 100% rename from packages/react-charts/src/components/ChartLabel/ChartLabel.tsx rename to packages/react-charts/src/victory/components/ChartLabel/ChartLabel.tsx diff --git a/packages/react-charts/src/victory/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap new file mode 100644 index 00000000000..0e7841ee941 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartLabel/__snapshots__/ChartLabel.test.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLabel 1`] = ``; + +exports[`ChartLabel 2`] = ``; + +exports[`renders component text 1`] = ` + + + + This is a test + + + +`; diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx b/packages/react-charts/src/victory/components/ChartLegend/ChartLegend.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartLegend/ChartLegend.test.tsx rename to packages/react-charts/src/victory/components/ChartLegend/ChartLegend.test.tsx diff --git a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx b/packages/react-charts/src/victory/components/ChartLegend/ChartLegend.tsx similarity index 97% rename from packages/react-charts/src/components/ChartLegend/ChartLegend.tsx rename to packages/react-charts/src/victory/components/ChartLegend/ChartLegend.tsx index 1f4dae53015..c2af1359289 100644 --- a/packages/react-charts/src/components/ChartLegend/ChartLegend.tsx +++ b/packages/react-charts/src/victory/components/ChartLegend/ChartLegend.tsx @@ -21,7 +21,7 @@ import { ChartContainer } from '../ChartContainer/ChartContainer'; import { ChartLabel } from '../ChartLabel/ChartLabel'; import { ChartPoint } from '../ChartPoint/ChartPoint'; import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; -import { getTheme } from '../ChartUtils/chart-theme'; +import { getComponentTheme, getTheme } from '../ChartUtils/chart-theme'; /** * ChartLegend renders a chart legend component. @@ -317,6 +317,8 @@ export const ChartLegend: React.FunctionComponent = ({ theme = getTheme(themeColor), ...rest }: ChartLegendProps) => { + const componentTheme = getComponentTheme(themeColor); + // Merge pattern IDs with `style.data.fill` property const getDefaultStyle = () => { if (!patternScale) { @@ -350,14 +352,16 @@ export const ChartLegend: React.FunctionComponent = ({ const getLabelComponent = () => React.cloneElement(labelComponent, { ...(name && { id: (props: any) => `${name}-${(labelComponent as any).type.displayName}-${props.index}` }), - ...labelComponent.props + ...labelComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); const getTitleComponent = () => React.cloneElement(titleComponent, { // Victory doesn't appear to call the id function here, but it's valid for label components ...(name && { id: () => `${name}-${(titleComponent as any).type.displayName}` }), - ...titleComponent.props + ...titleComponent.props, + ...(componentTheme?.label && componentTheme.label) // override backgroundStyle }); // Note: containerComponent is required for theme diff --git a/packages/react-charts/src/victory/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap new file mode 100644 index 00000000000..52ecc575645 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartLegend/__snapshots__/ChartLegend.test.tsx.snap @@ -0,0 +1,294 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLegend 1`] = ` + +
+ + + + + + + Series 1 + + + + + Series 2 + + + +
+ +
+
+ +`; + +exports[`ChartLegend 2`] = ` + +
+ + + + + + + Series 1 + + + + + Series 2 + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + Average number of pets + + + + + Cats + + + + + Dogs + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md b/packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md similarity index 98% rename from packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md rename to packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md index e98fdc29276..5d824d7f6e0 100644 --- a/packages/react-charts/src/components/ChartLegend/examples/ChartLegend.md +++ b/packages/react-charts/src/victory/components/ChartLegend/examples/ChartLegend.md @@ -40,7 +40,7 @@ import { createContainer, getInteractiveLegendEvents, getInteractiveLegendItemStyles -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; import '@patternfly/patternfly/patternfly-charts.css'; @@ -54,7 +54,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic with right aligned legend ```js import React from 'react'; -import { ChartDonut } from '@patternfly/react-charts'; +import { ChartDonut } from '@patternfly/react-charts/victory';
{ /** * The active prop specifies whether the tooltip component should be displayed. */ @@ -49,7 +49,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -275,7 +275,7 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. @@ -295,11 +295,11 @@ export interface ChartLegendTooltipProps extends ChartCursorTooltipProps { themeColor?: string; /** * The title prop specifies a title to render with the legend. - * This prop should be given as a string, or an array of strings for multi-line titles. * - * Example: title={(datum) => datum.x} + * @propType number | string | Function | string[] + * @example title={(datum) => datum.x} */ - title?: string | string[] | Function; + title?: string[] | StringOrNumberOrCallback; /** * This prop refers to the width of the svg that ChartLegendTooltip is rendered within. This prop is passed from * parents of ChartLegendTooltip, and should not be set manually. In versions before ^33.0.0 this prop referred to the @@ -346,7 +346,7 @@ export const ChartLegendTooltip: React.FunctionComponent { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const legendTooltipProps = () => ({ legendData: getLegendTooltipVisibleData({ activePoints, legendData, text, theme }), legendProps: getLegendTooltipDataProps( @@ -401,6 +401,7 @@ export const ChartLegendTooltip: React.FunctionComponent { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const legendProps = getLegendTooltipDataProps(legendComponent.props); const visibleLegendData = getLegendTooltipVisibleData({ activePoints, @@ -230,7 +230,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent center.x + _flyoutWidth + pointerLength) { return center.x + ChartLegendTooltipStyles.flyout.padding / 2; } else if (center.x < _flyoutWidth + pointerLength) { @@ -246,7 +246,7 @@ export const ChartLegendTooltipContent: React.FunctionComponent height - _flyoutHeight / 2) { @@ -290,8 +290,8 @@ export const ChartLegendTooltipContent: React.FunctionComponent { - const _x = x + Helpers.evaluateProp(dx); + const _x = x + (Helpers.evaluateProp(dx, undefined) as number); return React.cloneElement(valueLabelComponent, { style: getStyle(style), diff --git a/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap new file mode 100644 index 00000000000..97be52c4df5 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltip.test.tsx.snap @@ -0,0 +1,542 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLegendTooltip 1`] = ``; + +exports[`ChartLegendTooltip 2`] = ``; + +exports[`allows tooltip via container component 1`] = ` + +
+ + + Average number of pets + + + + + + + + 2015 + + + + + + + + 2016 + + + + + + + + 2017 + + + + + + + + 2018 + + + + + + + + + + + + 2 + + + + + + + + + 5 + + + + + + + + + 8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Cats + + + + + Dogs + + + + + Birds + + + + + Mice + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap similarity index 100% rename from packages/react-charts/src/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap rename to packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipContent.test.tsx.snap diff --git a/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap new file mode 100644 index 00000000000..d74aac8b820 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartLegendTooltip/__snapshots__/ChartLegendTooltipLabel.test.tsx.snap @@ -0,0 +1,44 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLegendTooltipLabel 1`] = ``; + +exports[`ChartLegendTooltipLabel 2`] = ``; + +exports[`renders component text 1`] = ` + + + + Cats + + + + + 1, 2, 3, 4 + + + +`; diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.test.tsx b/packages/react-charts/src/victory/components/ChartLine/ChartLine.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartLine/ChartLine.test.tsx rename to packages/react-charts/src/victory/components/ChartLine/ChartLine.test.tsx diff --git a/packages/react-charts/src/components/ChartLine/ChartLine.tsx b/packages/react-charts/src/victory/components/ChartLine/ChartLine.tsx similarity index 100% rename from packages/react-charts/src/components/ChartLine/ChartLine.tsx rename to packages/react-charts/src/victory/components/ChartLine/ChartLine.tsx diff --git a/packages/react-charts/src/victory/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap b/packages/react-charts/src/victory/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap new file mode 100644 index 00000000000..cdd3838d42b --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartLine/__snapshots__/ChartLine.test.tsx.snap @@ -0,0 +1,600 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartLine 1`] = ` + +
+ + + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartLine 2`] = ` + +
+ + + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1.0 + + + + + + + + 1.5 + + + + + + + + 2.0 + + + + + + + + 2.5 + + + + + + + + 3.0 + + + + + + + + 3.5 + + + + + + + + 4.0 + + + + + + + + + + + 2 + + + + + + + + 4 + + + + + + + + 6 + + + + + + + + 8 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md b/packages/react-charts/src/victory/components/ChartLine/examples/ChartLine.md similarity index 98% rename from packages/react-charts/src/components/ChartLine/examples/ChartLine.md rename to packages/react-charts/src/victory/components/ChartLine/examples/ChartLine.md index ac2155d2cb2..c4f4294940d 100644 --- a/packages/react-charts/src/components/ChartLine/examples/ChartLine.md +++ b/packages/react-charts/src/victory/components/ChartLine/examples/ChartLine.md @@ -11,7 +11,7 @@ propComponents: [ hideDarkMode: true --- -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartLegendTooltip, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; import { VictoryZoomContainer } from 'victory-zoom-container'; @@ -24,7 +24,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic with right aligned legend ```js import React from 'react'; -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
string | number | null); /** - * @beta Allows legend items to wrap onto the next line if the chart is not wide enough. + * Allows legend items to wrap onto the next line if the chart is not wide enough. * * Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you * define the height and width of the chart's parent container, you must accommodate for extra legend height due to @@ -336,7 +336,7 @@ export interface ChartPieProps extends VictoryPieProps { */ legendPosition?: 'bottom' | 'right'; /** - * @beta Text direction of the legend labels. + * Text direction of the legend labels. */ legendDirection?: 'ltr' | 'rtl'; /** @@ -593,6 +593,7 @@ export const ChartPie: React.FunctionComponent = ({ key: 'pf-chart-pie-legend', orientation: legendOrientation, theme, + themeColor, ...(legendDirection === 'rtl' && { dataComponent: legendComponent.props.dataComponent ? ( React.cloneElement(legendComponent.props.dataComponent, { transform: `translate(${legendXOffset})` }) diff --git a/packages/react-charts/src/victory/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap b/packages/react-charts/src/victory/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap new file mode 100644 index 00000000000..ab0a988a765 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartPie/__snapshots__/ChartPie.test.tsx.snap @@ -0,0 +1,182 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartPie 1`] = ` + +
+ + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartPie 2`] = ` + +
+ + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/victory/components/ChartPie/examples/ChartPie.md b/packages/react-charts/src/victory/components/ChartPie/examples/ChartPie.md new file mode 100644 index 00000000000..41fb26fd255 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartPie/examples/ChartPie.md @@ -0,0 +1,121 @@ +--- +id: Pie chart +section: charts +propComponents: ['ChartPie'] +hideDarkMode: true +--- + +import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; +import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100'; +import chart_theme_yellow_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_100'; +import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; + +## Introduction +Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! + +PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. + +## Examples +### Basic with right aligned legend +```js +import React from 'react'; +import { ChartPie } from '@patternfly/react-charts/victory'; + +
+ `${datum.x}: ${datum.y}`} + legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} + legendOrientation="vertical" + legendPosition="right" + name="chart1" + padding={{ + bottom: 20, + left: 20, + right: 140, // Adjusted to accommodate legend + top: 20 + }} + width={350} + /> +
+``` + +### Multi-color (ordered) with bottom aligned legend +```js +import React from 'react'; +import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; + +
+ `${datum.x}: ${datum.y}`} + legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} + legendPosition="bottom" + name="chart3" + padding={{ + bottom: 65, + left: 20, + right: 20, + top: 20 + }} + themeColor={ChartThemeColor.multiOrdered} + width={300} + /> +
+``` + +### Custom color scale + +This demonstrates how to apply a custom color scale. + +```js +import React from 'react'; +import { ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; +import chart_theme_blue_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_100'; +import chart_theme_yellow_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_100'; +import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; + +
+ `${datum.x}`} + legendData={[{ name: 'Sky' }, { name: 'Shady side of pyramid' }, { name: 'Sunny side of pyramid' }]} + legendOrientation="vertical" + legendPosition="right" + name="chart2" + padding={{ + bottom: 20, + left: 20, + right: 240, // Adjusted to accommodate legend + top: 20 + }} + themeColor={ChartThemeColor.orange} + width={450} + /> +
+``` + +## Documentation +### Tips +- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) +- For single data points or zero values, you may want to set the `domain` prop +- `ChartLegend` may be used as a standalone component, instead of using `legendData` + +### Note +Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here: + +- For `ChartPie` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) diff --git a/packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx b/packages/react-charts/src/victory/components/ChartPoint/ChartPoint.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartPoint/ChartPoint.test.tsx rename to packages/react-charts/src/victory/components/ChartPoint/ChartPoint.test.tsx diff --git a/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx b/packages/react-charts/src/victory/components/ChartPoint/ChartPoint.tsx similarity index 98% rename from packages/react-charts/src/components/ChartPoint/ChartPoint.tsx rename to packages/react-charts/src/victory/components/ChartPoint/ChartPoint.tsx index 14f6010b8c3..8768f990c66 100644 --- a/packages/react-charts/src/components/ChartPoint/ChartPoint.tsx +++ b/packages/react-charts/src/victory/components/ChartPoint/ChartPoint.tsx @@ -133,7 +133,7 @@ const getPath = (props: ChartPointProps) => { threshold: PathHelpers.threshold }; const symbol = Helpers.evaluateProp(props.symbol, props); - const key: keyof PathHelpersInterface = symbol; + const key = symbol as keyof PathHelpersInterface; const symbolFunction = typeof pathFunctions[key] === 'function' ? pathFunctions[key] : pathFunctions.square; return symbolFunction(x, y, size); }; diff --git a/packages/react-charts/src/victory/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap b/packages/react-charts/src/victory/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap new file mode 100644 index 00000000000..406bb853093 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartPoint/__snapshots__/ChartPoint.test.tsx.snap @@ -0,0 +1,304 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartPoint 1`] = ` + +
+ + + + + + + Series 1 + + + + + Series 2 + + + +
+ +
+
+ +`; + +exports[`ChartPoint 2`] = ` + +
+ + + + + + + Series 1 + + + + + Series 2 + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + Average number of pets + + + + + Cats + + + + + Dogs + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartPoint/assets/Eyecon.svg b/packages/react-charts/src/victory/components/ChartPoint/assets/Eyecon.svg similarity index 100% rename from packages/react-charts/src/components/ChartPoint/assets/Eyecon.svg rename to packages/react-charts/src/victory/components/ChartPoint/assets/Eyecon.svg diff --git a/packages/react-charts/src/components/ChartPoint/path-helpers.ts b/packages/react-charts/src/victory/components/ChartPoint/path-helpers.ts similarity index 100% rename from packages/react-charts/src/components/ChartPoint/path-helpers.ts rename to packages/react-charts/src/victory/components/ChartPoint/path-helpers.ts diff --git a/packages/react-charts/src/components/ChartScatter/ChartScatter.test.tsx b/packages/react-charts/src/victory/components/ChartScatter/ChartScatter.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartScatter/ChartScatter.test.tsx rename to packages/react-charts/src/victory/components/ChartScatter/ChartScatter.test.tsx diff --git a/packages/react-charts/src/components/ChartScatter/ChartScatter.tsx b/packages/react-charts/src/victory/components/ChartScatter/ChartScatter.tsx similarity index 100% rename from packages/react-charts/src/components/ChartScatter/ChartScatter.tsx rename to packages/react-charts/src/victory/components/ChartScatter/ChartScatter.tsx diff --git a/packages/react-charts/src/victory/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap b/packages/react-charts/src/victory/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap new file mode 100644 index 00000000000..df3cb5869c0 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartScatter/__snapshots__/ChartScatter.test.tsx.snap @@ -0,0 +1,1623 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartScatter 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartScatter 2`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1.0 + + + + + + + + 2.0 + + + + + + + + 3.0 + + + + + + + + 4.0 + + + + + + + + 5.0 + + + + + + + + 6.0 + + + + + + + + 7.0 + + + + + + + + + + + 1.0 + + + + + + + + 2.0 + + + + + + + + 3.0 + + + + + + + + 4.0 + + + + + + + + 5.0 + + + + + + + + 6.0 + + + + + + + + 7.0 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md b/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatter.md similarity index 98% rename from packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md rename to packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatter.md index 7a30806b291..6feb3210e7c 100644 --- a/packages/react-charts/src/components/ChartScatter/examples/ChartScatter.md +++ b/packages/react-charts/src/victory/components/ChartScatter/examples/ChartScatter.md @@ -22,7 +22,7 @@ ChartLine, ChartScatter, ChartThemeColor, ChartVoronoiContainer, -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; ## Introduction @@ -34,7 +34,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic ```js import React from 'react'; -import { Chart, ChartAxis, ChartGroup, ChartScatter, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartScatter, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
+
+ +
+ +
+
+ +`; + +exports[`ChartStack 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Cats + + + + + + + + Dogs + + + + + + + + Birds + + + + + + + + Mice + + + + + + + + + + + 5 + + + + + + + + 10 + + + + + + + + 15 + + + + + + + + 20 + + + + + + + + 25 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartStack/examples/ChartStack.md b/packages/react-charts/src/victory/components/ChartStack/examples/ChartStack.md similarity index 97% rename from packages/react-charts/src/components/ChartStack/examples/ChartStack.md rename to packages/react-charts/src/victory/components/ChartStack/examples/ChartStack.md index 80adc5c2c10..20340f2ef4d 100644 --- a/packages/react-charts/src/components/ChartStack/examples/ChartStack.md +++ b/packages/react-charts/src/victory/components/ChartStack/examples/ChartStack.md @@ -22,7 +22,7 @@ import { ChartTooltip, ChartVoronoiContainer, createContainer -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; ## Introduction @@ -34,7 +34,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic with right aligned legend ```js import React from 'react'; -import { Chart, ChartAxis, ChartBar, ChartStack, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBar, ChartStack, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
@@ -109,7 +109,7 @@ This demonstrates an alternate way of applying tooltips using data labels. ```js import React from 'react'; -import { Chart, ChartBar, ChartAxis, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts'; +import { Chart, ChartBar, ChartAxis, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
@@ -229,7 +229,7 @@ import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_colo }, { name: 'Dogs', - symbol: { fill: chart_color_gold_300.var } + symbol: { fill: chart_color_yellow_300.var } }, { name: 'Birds', @@ -260,7 +260,7 @@ import chart_color_purple_300 from '@patternfly/react-tokens/dist/esm/chart_colo horizontal colorScale={[ chart_color_blue_300.var, - chart_color_gold_300.var, + chart_color_yellow_300.var, chart_color_green_300.var, chart_color_purple_300.var ]} @@ -312,7 +312,7 @@ This demonstrates an alternate way of applying custom stroke and fill colors to ```js import React from 'react'; -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300';
@@ -392,11 +392,11 @@ This demonstrates custom theme properties, which may be applied across multiple ```js import React from 'react'; -import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts'; +import { Chart, ChartBar, ChartAxis, ChartGroup, ChartThemeColor, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts/victory'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; +import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300'; +import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300'; class MultiColorChart extends React.Component { constructor(props) { @@ -406,8 +406,8 @@ class MultiColorChart extends React.Component { this.colorScale = [ chart_color_blue_300.var, chart_color_green_300.var, - chart_color_cyan_300.var, - chart_color_gold_300.var + chart_color_teal_300.var, + chart_color_yellow_300.var ]; // Layout diff --git a/packages/react-charts/src/victory/components/ChartTheme/styles/box-plot-tooltip-styles.ts b/packages/react-charts/src/victory/components/ChartTheme/styles/box-plot-tooltip-styles.ts new file mode 100644 index 00000000000..180b58c1096 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/styles/box-plot-tooltip-styles.ts @@ -0,0 +1,17 @@ +/* eslint-disable camelcase */ +import t_global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/t_global_font_weight_heading_bold'; +import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; + +/** + * Box plot tooltip styles + * @private + */ +export const BoxPlotTooltipStyles = { + flyout: { + padding: 40 + }, + label: { + fill: chart_voronoi_labels_Fill.var, + fontWeight: t_global_font_weight_heading_bold.value + } as any +}; diff --git a/packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts b/packages/react-charts/src/victory/components/ChartTheme/styles/bullet-styles.ts similarity index 100% rename from packages/react-charts/src/components/ChartTheme/styles/bullet-styles.ts rename to packages/react-charts/src/victory/components/ChartTheme/styles/bullet-styles.ts diff --git a/packages/react-charts/src/components/ChartTheme/styles/common-styles.ts b/packages/react-charts/src/victory/components/ChartTheme/styles/common-styles.ts similarity index 100% rename from packages/react-charts/src/components/ChartTheme/styles/common-styles.ts rename to packages/react-charts/src/victory/components/ChartTheme/styles/common-styles.ts diff --git a/packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts b/packages/react-charts/src/victory/components/ChartTheme/styles/donut-styles.ts similarity index 100% rename from packages/react-charts/src/components/ChartTheme/styles/donut-styles.ts rename to packages/react-charts/src/victory/components/ChartTheme/styles/donut-styles.ts diff --git a/packages/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts b/packages/react-charts/src/victory/components/ChartTheme/styles/donut-utilization-styles.ts similarity index 100% rename from packages/react-charts/src/components/ChartTheme/styles/donut-utilization-styles.ts rename to packages/react-charts/src/victory/components/ChartTheme/styles/donut-utilization-styles.ts diff --git a/packages/react-charts/src/victory/components/ChartTheme/styles/legend-tooltip-styles.ts b/packages/react-charts/src/victory/components/ChartTheme/styles/legend-tooltip-styles.ts new file mode 100644 index 00000000000..2b9037a8b2b --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/styles/legend-tooltip-styles.ts @@ -0,0 +1,17 @@ +/* eslint-disable camelcase */ +import t_global_font_weight_heading_bold from '@patternfly/react-tokens/dist/esm/t_global_font_weight_heading_bold'; +import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; + +/** + * Legend tooltip styles + * @private + */ +export const LegendTooltipStyles = { + flyout: { + padding: 40 + }, + label: { + fill: chart_voronoi_labels_Fill.var, + fontWeight: t_global_font_weight_heading_bold.value + } as any +}; diff --git a/packages/react-charts/src/components/ChartTheme/styles/scatter-styles.ts b/packages/react-charts/src/victory/components/ChartTheme/styles/scatter-styles.ts similarity index 100% rename from packages/react-charts/src/components/ChartTheme/styles/scatter-styles.ts rename to packages/react-charts/src/victory/components/ChartTheme/styles/scatter-styles.ts diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts new file mode 100644 index 00000000000..03f1615522f --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/base-theme.ts @@ -0,0 +1,521 @@ +/* eslint-disable camelcase */ +import chart_global_FontFamily from '@patternfly/react-tokens/dist/esm/chart_global_FontFamily'; +import chart_global_letter_spacing from '@patternfly/react-tokens/dist/esm/chart_global_letter_spacing'; +import chart_global_FontSize_sm from '@patternfly/react-tokens/dist/esm/chart_global_FontSize_sm'; +import chart_global_label_Padding from '@patternfly/react-tokens/dist/esm/chart_global_label_Padding'; +import chart_global_label_stroke from '@patternfly/react-tokens/dist/esm/chart_global_label_stroke'; +import chart_global_label_text_anchor from '@patternfly/react-tokens/dist/esm/chart_global_label_text_anchor'; +import chart_global_label_Fill from '@patternfly/react-tokens/dist/esm/chart_global_label_Fill'; +import chart_global_layout_Padding from '@patternfly/react-tokens/dist/esm/chart_global_layout_Padding'; +import chart_global_layout_Height from '@patternfly/react-tokens/dist/esm/chart_global_layout_Height'; +import chart_global_layout_Width from '@patternfly/react-tokens/dist/esm/chart_global_layout_Width'; +import chart_global_stroke_line_cap from '@patternfly/react-tokens/dist/esm/chart_global_stroke_line_cap'; +import chart_global_stroke_line_join from '@patternfly/react-tokens/dist/esm/chart_global_stroke_line_join'; +import chart_area_data_Fill from '@patternfly/react-tokens/dist/esm/chart_area_data_Fill'; +import chart_area_Opacity from '@patternfly/react-tokens/dist/esm/chart_area_Opacity'; +import chart_area_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_area_stroke_Width'; +import chart_axis_axis_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_axis_axis_stroke_Width'; +import chart_axis_axis_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_axis_stroke_Color'; +import chart_axis_axis_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_axis_Fill'; +import chart_axis_axis_label_Padding from '@patternfly/react-tokens/dist/esm/chart_axis_axis_label_Padding'; +import chart_axis_axis_label_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_axis_label_stroke_Color'; +import chart_axis_grid_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_grid_Fill'; +import chart_axis_grid_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_axis_grid_PointerEvents'; +import chart_axis_tick_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_tick_Fill'; +import chart_axis_tick_Size from '@patternfly/react-tokens/dist/esm/chart_axis_tick_Size'; +import chart_axis_tick_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_tick_stroke_Color'; +import chart_axis_tick_Width from '@patternfly/react-tokens/dist/esm/chart_axis_tick_Width'; +import chart_axis_tick_label_Fill from '@patternfly/react-tokens/dist/esm/chart_axis_tick_label_Fill'; +import chart_bar_Width from '@patternfly/react-tokens/dist/esm/chart_bar_Width'; +import chart_bar_data_stroke from '@patternfly/react-tokens/dist/esm/chart_bar_data_stroke'; +import chart_bar_data_Fill from '@patternfly/react-tokens/dist/esm/chart_bar_data_Fill'; +import chart_bar_data_Padding from '@patternfly/react-tokens/dist/esm/chart_bar_data_Padding'; +import chart_bar_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bar_data_stroke_Width'; +import chart_boxplot_max_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_max_Padding'; +import chart_boxplot_max_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_boxplot_max_stroke_Color'; +import chart_boxplot_max_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_max_stroke_Width'; +import chart_boxplot_median_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_median_Padding'; +import chart_boxplot_median_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_boxplot_median_stroke_Color'; +import chart_boxplot_median_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_median_stroke_Width'; +import chart_boxplot_min_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_min_Padding'; +import chart_boxplot_min_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_min_stroke_Width'; +import chart_boxplot_min_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_boxplot_min_stroke_Color'; +import chart_boxplot_lower_quartile_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_lower_quartile_Padding'; +import chart_boxplot_lower_quartile_Fill from '@patternfly/react-tokens/dist/esm/chart_boxplot_lower_quartile_Fill'; +import chart_boxplot_upper_quartile_Padding from '@patternfly/react-tokens/dist/esm/chart_boxplot_upper_quartile_Padding'; +import chart_boxplot_upper_quartile_Fill from '@patternfly/react-tokens/dist/esm/chart_boxplot_upper_quartile_Fill'; +import chart_boxplot_box_Width from '@patternfly/react-tokens/dist/esm/chart_boxplot_box_Width'; +import chart_candelstick_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_candelstick_data_stroke_Width'; +import chart_candelstick_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_candelstick_data_stroke_Color'; +import chart_candelstick_candle_positive_Color from '@patternfly/react-tokens/dist/esm/chart_candelstick_candle_positive_Color'; +import chart_candelstick_candle_negative_Color from '@patternfly/react-tokens/dist/esm/chart_candelstick_candle_negative_Color'; +import chart_errorbar_BorderWidth from '@patternfly/react-tokens/dist/esm/chart_errorbar_BorderWidth'; +import chart_errorbar_data_Fill from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_Fill'; +import chart_errorbar_data_Opacity from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_Opacity'; +import chart_errorbar_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_stroke_Width'; +import chart_errorbar_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_errorbar_data_stroke_Color'; +import chart_legend_gutter_Width from '@patternfly/react-tokens/dist/esm/chart_legend_gutter_Width'; +import chart_legend_orientation from '@patternfly/react-tokens/dist/esm/chart_legend_orientation'; +import chart_legend_title_orientation from '@patternfly/react-tokens/dist/esm/chart_legend_title_orientation'; +import chart_legend_data_type from '@patternfly/react-tokens/dist/esm/chart_legend_data_type'; +import chart_legend_title_Padding from '@patternfly/react-tokens/dist/esm/chart_legend_title_Padding'; +import chart_line_data_Fill from '@patternfly/react-tokens/dist/esm/chart_line_data_Fill'; +import chart_line_data_Opacity from '@patternfly/react-tokens/dist/esm/chart_line_data_Opacity'; +import chart_line_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_line_data_stroke_Width'; +import chart_line_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_line_data_stroke_Color'; +import chart_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_pie_Padding'; +import chart_pie_data_Padding from '@patternfly/react-tokens/dist/esm/chart_pie_data_Padding'; +import chart_pie_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_pie_data_stroke_Width'; +import chart_pie_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_pie_data_stroke_Color'; +import chart_pie_labels_Padding from '@patternfly/react-tokens/dist/esm/chart_pie_labels_Padding'; +import chart_pie_Height from '@patternfly/react-tokens/dist/esm/chart_pie_Height'; +import chart_pie_Width from '@patternfly/react-tokens/dist/esm/chart_pie_Width'; +import chart_scatter_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_scatter_data_stroke_Color'; +import chart_scatter_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_scatter_data_stroke_Width'; +import chart_scatter_data_Opacity from '@patternfly/react-tokens/dist/esm/chart_scatter_data_Opacity'; +import chart_scatter_data_Fill from '@patternfly/react-tokens/dist/esm/chart_scatter_data_Fill'; +import chart_stack_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_stack_data_stroke_Width'; +import chart_tooltip_corner_radius from '@patternfly/react-tokens/dist/esm/chart_tooltip_corner_radius'; +import chart_tooltip_pointer_length from '@patternfly/react-tokens/dist/esm/chart_tooltip_pointer_length'; +import chart_tooltip_Fill from '@patternfly/react-tokens/dist/esm/chart_tooltip_Fill'; +import chart_tooltip_flyoutStyle_corner_radius from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_corner_radius'; +import chart_tooltip_flyoutStyle_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_stroke_Width'; +import chart_tooltip_flyoutStyle_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_PointerEvents'; +import chart_tooltip_flyoutStyle_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_stroke_Color'; +import chart_tooltip_flyoutStyle_Fill from '@patternfly/react-tokens/dist/esm/chart_tooltip_flyoutStyle_Fill'; +import chart_tooltip_pointer_Width from '@patternfly/react-tokens/dist/esm/chart_tooltip_pointer_Width'; +import chart_tooltip_Padding from '@patternfly/react-tokens/dist/esm/chart_tooltip_Padding'; +import chart_tooltip_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_tooltip_PointerEvents'; +import chart_voronoi_data_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_data_Fill'; +import chart_voronoi_data_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_voronoi_data_stroke_Color'; +import chart_voronoi_data_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_voronoi_data_stroke_Width'; +import chart_voronoi_labels_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Fill'; +import chart_voronoi_labels_Padding from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_Padding'; +import chart_voronoi_labels_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_voronoi_labels_PointerEvents'; +import chart_voronoi_flyout_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_stroke_Width'; +import chart_voronoi_flyout_PointerEvents from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_PointerEvents'; +import chart_voronoi_flyout_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_stroke_Color'; +import chart_voronoi_flyout_stroke_Fill from '@patternfly/react-tokens/dist/esm/chart_voronoi_flyout_stroke_Fill'; +import chart_donut_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_pie_Height'; +import chart_donut_pie_angle_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_pie_angle_Padding'; +import chart_donut_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_pie_Padding'; +import chart_donut_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_pie_Width'; +import chart_donut_threshold_dynamic_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_dynamic_pie_Height'; +import chart_donut_threshold_dynamic_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_dynamic_pie_Padding'; +import chart_donut_threshold_dynamic_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_dynamic_pie_Width'; +import chart_donut_threshold_static_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_Height'; +import chart_donut_threshold_static_pie_angle_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_angle_Padding'; +import chart_donut_threshold_static_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_Padding'; +import chart_donut_threshold_static_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_static_pie_Width'; +import chart_donut_utilization_dynamic_pie_Height from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_Height'; +import chart_donut_utilization_dynamic_pie_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_Padding'; +import chart_donut_utilization_dynamic_pie_angle_Padding from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_angle_Padding'; +import chart_donut_utilization_dynamic_pie_Width from '@patternfly/react-tokens/dist/esm/chart_donut_utilization_dynamic_pie_Width'; +import chart_threshold_stroke_dash_array from '@patternfly/react-tokens/dist/esm/chart_threshold_stroke_dash_array'; +import chart_threshold_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_threshold_stroke_Width'; +import chart_bullet_Height from '@patternfly/react-tokens/dist/esm/chart_bullet_Height'; +import chart_bullet_comparative_measure_error_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_error_stroke_Width'; +import chart_bullet_comparative_measure_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_stroke_Width'; +import chart_bullet_comparative_measure_warning_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_warning_stroke_Width'; +import chart_bullet_group_title_divider_stroke_Width from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_stroke_Width'; +import { ChartComponentThemeDefinition, ChartThemeDefinition } from '../ChartTheme'; + +// Note: Values must be in pixles + +// Typography +// +// Note: Victory's approximateTextSize function uses specific character widths and does not work with font variables +// See https://github.com/patternfly/patternfly-react/issues/5300 +const TYPOGRAPHY_FONT_FAMILY = chart_global_FontFamily.value.replace(/ /g, ''); +const TYPOGRAPHY_LETTER_SPACING = chart_global_letter_spacing.value; +const TYPOGRAPHY_FONT_SIZE = chart_global_FontSize_sm.value; + +// Labels +const LABEL_PROPS = { + fontFamily: TYPOGRAPHY_FONT_FAMILY, + fontSize: TYPOGRAPHY_FONT_SIZE, + letterSpacing: TYPOGRAPHY_LETTER_SPACING, + padding: chart_global_label_Padding.value, + stroke: chart_global_label_stroke.var, + fill: chart_global_label_Fill.var +}; + +const LABEL_CENTERED_PROPS = { + ...LABEL_PROPS, + textAnchor: chart_global_label_text_anchor.value +}; + +// Layout +const LAYOUT_PROPS = { + padding: chart_global_layout_Padding.value, + height: chart_global_layout_Height.value, + width: chart_global_layout_Width.value +}; + +// Strokes +const STROKE_LINE_CAP = chart_global_stroke_line_cap.value; +const STROKE_LINE_JOIN = chart_global_stroke_line_join.value; + +/** + * Base theme containing Victory properties only + * @private + */ +export const BaseTheme: ChartThemeDefinition = { + area: { + ...LAYOUT_PROPS, + style: { + data: { + fill: chart_area_data_Fill.var, + fillOpacity: chart_area_Opacity.value, + // Omit stroke to add a line border from color scale + // stroke: chart_global_label_stroke.value, + strokeWidth: chart_area_stroke_Width.value + }, + labels: LABEL_CENTERED_PROPS + } + }, + axis: { + ...LAYOUT_PROPS, + style: { + axis: { + fill: chart_axis_axis_Fill.var, + strokeWidth: chart_axis_axis_stroke_Width.value, + stroke: chart_axis_axis_stroke_Color.var, + strokeLinecap: STROKE_LINE_CAP, + strokeLinejoin: STROKE_LINE_JOIN + }, + axisLabel: { + ...LABEL_CENTERED_PROPS, + padding: chart_axis_axis_label_Padding.value, + stroke: chart_axis_axis_label_stroke_Color.var + }, + grid: { + fill: chart_axis_grid_Fill.var, + stroke: 'transparent', + pointerEvents: chart_axis_grid_PointerEvents.value, + strokeLinecap: STROKE_LINE_CAP, + strokeLinejoin: STROKE_LINE_JOIN + }, + ticks: { + fill: chart_axis_tick_Fill.var, + size: chart_axis_tick_Size.value, + stroke: chart_axis_tick_stroke_Color.var, + strokeLinecap: STROKE_LINE_CAP, + strokeLinejoin: STROKE_LINE_JOIN, + strokeWidth: chart_axis_tick_Width.value + }, + tickLabels: { + ...LABEL_PROPS, + fill: chart_axis_tick_label_Fill.var + } + } + }, + bar: { + ...LAYOUT_PROPS, + barWidth: chart_bar_Width.value, + style: { + data: { + fill: chart_bar_data_Fill.var, + padding: chart_bar_data_Padding.value, + stroke: chart_bar_data_stroke.var, + strokeWidth: chart_bar_data_stroke_Width.value + }, + labels: LABEL_PROPS + } + } as any, // Victory is missing barWidth + boxplot: { + ...LAYOUT_PROPS, + style: { + max: { + padding: chart_boxplot_max_Padding.value, + stroke: chart_boxplot_max_stroke_Color.var, + strokeWidth: chart_boxplot_max_stroke_Width.value + }, + maxLabels: LABEL_PROPS, + median: { + padding: chart_boxplot_median_Padding.value, + stroke: chart_boxplot_median_stroke_Color.var, + strokeWidth: chart_boxplot_median_stroke_Width.value + }, + medianLabels: LABEL_PROPS, + min: { + padding: chart_boxplot_min_Padding.value, + stroke: chart_boxplot_min_stroke_Color.var, + strokeWidth: chart_boxplot_min_stroke_Width.value + }, + minLabels: LABEL_PROPS, + q1: { + fill: chart_boxplot_lower_quartile_Fill.var, + padding: chart_boxplot_lower_quartile_Padding.value + }, + q1Labels: LABEL_PROPS, + q3: { + fill: chart_boxplot_upper_quartile_Fill.var, + padding: chart_boxplot_upper_quartile_Padding.value + }, + q3Labels: LABEL_PROPS + }, + boxWidth: chart_boxplot_box_Width.value + }, + candlestick: { + ...LAYOUT_PROPS, + candleColors: { + positive: chart_candelstick_candle_positive_Color.var, + negative: chart_candelstick_candle_negative_Color.var + }, + style: { + data: { + stroke: chart_candelstick_data_stroke_Color.var, + strokeWidth: chart_candelstick_data_stroke_Width.value + }, + labels: LABEL_CENTERED_PROPS + } + }, + chart: { + ...LAYOUT_PROPS + }, + errorbar: { + ...LAYOUT_PROPS, + borderWidth: chart_errorbar_BorderWidth.value, + style: { + data: { + fill: chart_errorbar_data_Fill.var, + opacity: chart_errorbar_data_Opacity.value, + stroke: chart_errorbar_data_stroke_Color.var, + strokeWidth: chart_errorbar_data_stroke_Width.value + }, + labels: LABEL_CENTERED_PROPS + } + }, + group: { + ...LAYOUT_PROPS + }, + legend: { + gutter: chart_legend_gutter_Width.value, + orientation: chart_legend_orientation.value, + titleOrientation: chart_legend_title_orientation.value, + style: { + data: { + type: chart_legend_data_type.value + }, + labels: LABEL_PROPS, + title: { + ...LABEL_PROPS, + fontSize: TYPOGRAPHY_FONT_SIZE, + padding: chart_legend_title_Padding.value + } + } + }, + line: { + ...LAYOUT_PROPS, + style: { + data: { + fill: chart_line_data_Fill.var, + opacity: chart_line_data_Opacity.value, + stroke: chart_line_data_stroke_Color.var, + strokeWidth: chart_line_data_stroke_Width.value + }, + labels: LABEL_CENTERED_PROPS + } + }, + pie: { + padding: chart_pie_Padding.value, + style: { + data: { + padding: chart_pie_data_Padding.value, + stroke: chart_pie_data_stroke_Color.var, + strokeWidth: chart_pie_data_stroke_Width.value + }, + labels: { + ...LABEL_PROPS, + padding: chart_pie_labels_Padding.value + } + }, + height: chart_pie_Height.value, + width: chart_pie_Width.value + }, + scatter: { + ...LAYOUT_PROPS, + style: { + data: { + fill: chart_scatter_data_Fill.var, + opacity: chart_scatter_data_Opacity.value, + stroke: chart_scatter_data_stroke_Color.var, + strokeWidth: chart_scatter_data_stroke_Width.value + }, + labels: LABEL_CENTERED_PROPS + } + }, + stack: { + ...LAYOUT_PROPS, + style: { + data: { + strokeWidth: chart_stack_data_stroke_Width.value + } + } + } as any, // Victory is missing style + tooltip: { + cornerRadius: chart_tooltip_corner_radius.value, + flyoutPadding: chart_tooltip_Padding.value, + flyoutStyle: { + cornerRadius: chart_tooltip_flyoutStyle_corner_radius.value, + fill: chart_tooltip_flyoutStyle_Fill.var, // background + pointerEvents: chart_tooltip_flyoutStyle_PointerEvents.var, + stroke: chart_tooltip_flyoutStyle_stroke_Color.var, // border + strokeWidth: chart_tooltip_flyoutStyle_stroke_Width.var + }, + pointerLength: chart_tooltip_pointer_length.value, + pointerWidth: chart_tooltip_pointer_Width.value, + style: { + fill: chart_tooltip_Fill.var, // text + pointerEvents: chart_tooltip_PointerEvents.var + } + } as any, // Victory is missing cornerRadius and pointerWidth + voronoi: { + ...LAYOUT_PROPS, + style: { + data: { + fill: chart_voronoi_data_Fill.var, + stroke: chart_voronoi_data_stroke_Color.var, + strokeWidth: chart_voronoi_data_stroke_Width.value + }, + labels: { + ...LABEL_CENTERED_PROPS, + fill: chart_voronoi_labels_Fill.var, // text + padding: chart_voronoi_labels_Padding.value, + pointerEvents: chart_voronoi_labels_PointerEvents.value + }, + // Note: These properties override tooltip + flyout: { + fill: chart_voronoi_flyout_stroke_Fill.var, // background + pointerEvents: chart_voronoi_flyout_PointerEvents.var, + stroke: chart_voronoi_flyout_stroke_Color.var, // border + strokeWidth: chart_voronoi_flyout_stroke_Width.var + } + } + } +}; + +/** + * Base component theme + * @private + * @beta + */ +export const BaseComponentTheme: ChartComponentThemeDefinition = { + axis: { + // TBD... + }, + bullet: { + chart: { + height: chart_bullet_Height.value + } + }, + bulletComparativeErrorMeasure: { + bar: { + height: chart_bullet_Height.value, + style: { + data: { + strokeWidth: chart_bullet_comparative_measure_error_stroke_Width.value + } + } + } + }, + bulletComparativeMeasure: { + bar: { + height: chart_bullet_Height.value, + style: { + data: { + strokeWidth: chart_bullet_comparative_measure_stroke_Width.value + } + } + } + }, + bulletComparativeWarningMeasure: { + bar: { + height: chart_bullet_Height.value, + style: { + data: { + strokeWidth: chart_bullet_comparative_measure_warning_stroke_Width.value + } + } + } + }, + bulletGroupTitle: { + chart: { + padding: { + bottom: 0, + left: 0, + right: 0, + top: chart_global_layout_Padding.value + } as any // Victory incorrectly typed ThemeBaseProps.padding as number instead of PaddingProps + }, + line: { + style: { + data: { + strokeWidth: chart_bullet_group_title_divider_stroke_Width.value + } + } + } + }, + bulletPrimaryDotMeasure: { + group: { + height: chart_bullet_Height.value + } + }, + bulletPrimaryNegativeMeasure: { + group: { + height: chart_bullet_Height.value + } + }, + bulletPrimarySegmentedMeasure: { + group: { + height: chart_bullet_Height.value + } + }, + bulletQualitativeRange: { + group: { + height: chart_bullet_Height.value + } + }, + donut: { + pie: { + height: chart_donut_pie_Height.value, + padding: chart_donut_pie_Padding.value, + padAngle: chart_donut_pie_angle_Padding.value, + width: chart_donut_pie_Width.value + } as any // Victory is missing padAngle + }, + donutThresholdDynamic: { + pie: { + height: chart_donut_threshold_dynamic_pie_Height.value, + padding: chart_donut_threshold_dynamic_pie_Padding.value, + width: chart_donut_threshold_dynamic_pie_Width.value + } + }, + donutThresholdStatic: { + pie: { + height: chart_donut_threshold_static_pie_Height.value, + padAngle: chart_donut_threshold_static_pie_angle_Padding.value, + padding: chart_donut_threshold_static_pie_Padding.value, + width: chart_donut_threshold_static_pie_Width.value + } as any // Victory is missing padAngle + }, + donutUtilization: { + pie: { + height: chart_donut_utilization_dynamic_pie_Height.value, + padding: chart_donut_utilization_dynamic_pie_Padding.value, + padAngle: chart_donut_utilization_dynamic_pie_angle_Padding.value, + width: chart_donut_utilization_dynamic_pie_Width.value + } as any // Victory is missing padAngle + }, + threshold: { + line: { + style: { + data: { + strokeDasharray: chart_threshold_stroke_dash_array.value, + strokeWidth: chart_threshold_stroke_Width.value + } + } + } + } +}; diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/color-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/color-theme.ts new file mode 100644 index 00000000000..fda4be8b3c2 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/color-theme.ts @@ -0,0 +1,249 @@ +/* eslint-disable camelcase */ +import chart_donut_threshold_second_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_second_Color'; +import chart_donut_threshold_third_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_third_Color'; +import chart_donut_threshold_first_Color from '@patternfly/react-tokens/dist/esm/chart_donut_threshold_first_Color'; +import chart_axis_grid_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_grid_stroke_Color'; +import chart_axis_tick_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_axis_tick_stroke_Color'; +import chart_bullet_comparative_measure_error_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_error_Fill_Color'; +import chart_bullet_comparative_measure_error_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_error_stroke_Color'; +import chart_bullet_Height from '@patternfly/react-tokens/dist/esm/chart_bullet_Height'; +import chart_bullet_comparative_measure_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_Fill_Color'; +import chart_bullet_comparative_measure_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_stroke_Color'; +import chart_bullet_comparative_measure_warning_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_warning_Fill_Color'; +import chart_bullet_comparative_measure_warning_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_comparative_measure_warning_stroke_Color'; +import chart_bullet_group_title_divider_Fill_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_Fill_Color'; +import chart_bullet_group_title_divider_stroke_Color from '@patternfly/react-tokens/dist/esm/chart_bullet_group_title_divider_stroke_Color'; +import chart_bullet_negative_measure_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_100'; +import chart_bullet_negative_measure_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_200'; +import chart_bullet_negative_measure_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_300'; +import chart_bullet_negative_measure_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_400'; +import chart_bullet_negative_measure_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_negative_measure_ColorScale_500'; +import chart_bullet_qualitative_range_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_100'; +import chart_bullet_qualitative_range_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_200'; +import chart_bullet_qualitative_range_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_300'; +import chart_bullet_qualitative_range_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_400'; +import chart_bullet_qualitative_range_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_500'; +import { ChartComponentThemeDefinition, ChartThemeDefinition } from '../ChartTheme'; + +interface ColorThemeInterface { + COLOR_SCALE: string[]; +} + +/** + * Victory color theme + * @private + */ +export const ColorTheme = (props: ColorThemeInterface): ChartThemeDefinition => { + const { COLOR_SCALE } = props; + + return { + area: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0] + } + } + }, + axis: { + colorScale: COLOR_SCALE + }, + bar: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0] + } + } + }, + boxplot: { + colorScale: COLOR_SCALE, + style: { + q1: { + fill: COLOR_SCALE[0] + }, + q3: { + fill: COLOR_SCALE[0] + } + } + }, + candlestick: { + colorScale: COLOR_SCALE + }, + chart: { + colorScale: COLOR_SCALE + }, + errorbar: { + colorScale: COLOR_SCALE + }, + group: { + colorScale: COLOR_SCALE + }, + legend: { + colorScale: COLOR_SCALE + }, + line: { + colorScale: COLOR_SCALE, + style: { + data: { + stroke: COLOR_SCALE[0] + } + } + }, + pie: { + colorScale: COLOR_SCALE + }, + scatter: { + colorScale: COLOR_SCALE + }, + stack: { + colorScale: COLOR_SCALE + }, + voronoi: { + colorScale: COLOR_SCALE + } + }; +}; + +/** + * Component color theme + * @private + * @beta + */ +export const ColorComponentTheme = (props: ColorThemeInterface): ChartComponentThemeDefinition => { + const { COLOR_SCALE } = props; + + return { + axis: { + axis: { + style: { + grid: { + stroke: chart_axis_grid_stroke_Color.var + }, + ticks: { + stroke: chart_axis_tick_stroke_Color.var + } + } + } + }, + bullet: { + // TBD... + }, + bulletComparativeErrorMeasure: { + bar: { + style: { + data: { + fill: chart_bullet_comparative_measure_error_Fill_Color.var, + stroke: chart_bullet_comparative_measure_error_stroke_Color.var + } + } + } + }, + bulletComparativeMeasure: { + bar: { + height: chart_bullet_Height.value, + style: { + data: { + fill: chart_bullet_comparative_measure_Fill_Color.var, + stroke: chart_bullet_comparative_measure_stroke_Color.var + } + } + } + }, + bulletComparativeWarningMeasure: { + bar: { + height: chart_bullet_Height.value, + style: { + data: { + fill: chart_bullet_comparative_measure_warning_Fill_Color.var, + stroke: chart_bullet_comparative_measure_warning_stroke_Color.var + } + } + } + }, + bulletGroupTitle: { + line: { + style: { + data: { + fill: chart_bullet_group_title_divider_Fill_Color.var, + stroke: chart_bullet_group_title_divider_stroke_Color.var + } + } + } + }, + bulletPrimaryDotMeasure: { + // TBD... + }, + bulletPrimarySegmentedMeasure: { + // TBD... + }, + bulletQualitativeRange: { + group: { + colorScale: [ + chart_bullet_qualitative_range_ColorScale_100.var, + chart_bullet_qualitative_range_ColorScale_200.var, + chart_bullet_qualitative_range_ColorScale_300.var, + chart_bullet_qualitative_range_ColorScale_400.var, + chart_bullet_qualitative_range_ColorScale_500.var + ] + } + }, + bulletPrimaryNegativeMeasure: { + group: { + colorScale: [ + chart_bullet_negative_measure_ColorScale_100.var, + chart_bullet_negative_measure_ColorScale_200.var, + chart_bullet_negative_measure_ColorScale_300.var, + chart_bullet_negative_measure_ColorScale_400.var, + chart_bullet_negative_measure_ColorScale_500.var + ] + } + }, + donut: { + // TBD... + }, + donutThresholdDynamic: { + legend: { + // Merge just the first color of dynamic (blue, green, etc.) with static (grey) for expected colorScale + colorScale: [COLOR_SCALE[0], chart_donut_threshold_second_Color.var, chart_donut_threshold_third_Color.var] + }, + // Merge the threshold colors in case users want to show the unused data + pie: { + colorScale: [ + COLOR_SCALE[0], + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var + ] + } + }, + donutThresholdStatic: { + pie: { + colorScale: [ + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var + ] + } + }, + donutUtilization: { + legend: { + colorScale: [ + COLOR_SCALE[0], + chart_donut_threshold_first_Color.var, + chart_donut_threshold_second_Color.var, + chart_donut_threshold_third_Color.var + ] + }, + pie: { + colorScale: [COLOR_SCALE[0], chart_donut_threshold_first_Color.var] + } + }, + label: { + // TBD... + }, + threshold: { + // TBD... + } + }; +}; diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/blue-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/blue-theme.ts similarity index 83% rename from packages/react-charts/src/components/ChartTheme/themes/colors/blue-theme.ts rename to packages/react-charts/src/victory/components/ChartTheme/themes/colors/blue-theme.ts index 5263fc4b02d..7f5d45e8f78 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/blue-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/blue-theme.ts @@ -4,7 +4,7 @@ import chart_theme_blue_ColorScale_200 from '@patternfly/react-tokens/dist/esm/c import chart_theme_blue_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_300'; import chart_theme_blue_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_400'; import chart_theme_blue_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_blue_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const BlueColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Blue color component theme + * @private + * @beta + */ +export const BlueColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/gray-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/gray-theme.ts similarity index 83% rename from packages/react-charts/src/components/ChartTheme/themes/colors/gray-theme.ts rename to packages/react-charts/src/victory/components/ChartTheme/themes/colors/gray-theme.ts index ffe32a26632..b84cb9d9a49 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/gray-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/gray-theme.ts @@ -4,7 +4,7 @@ import chart_theme_gray_ColorScale_200 from '@patternfly/react-tokens/dist/esm/c import chart_theme_gray_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_300'; import chart_theme_gray_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_400'; import chart_theme_gray_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_gray_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const GrayColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Gray component theme + * @private + * @beta + */ +export const GrayColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/green-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/green-theme.ts similarity index 83% rename from packages/react-charts/src/components/ChartTheme/themes/colors/green-theme.ts rename to packages/react-charts/src/victory/components/ChartTheme/themes/colors/green-theme.ts index 1220467981e..21fe9d393c2 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/green-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/green-theme.ts @@ -4,7 +4,7 @@ import chart_theme_green_ColorScale_200 from '@patternfly/react-tokens/dist/esm/ import chart_theme_green_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_300'; import chart_theme_green_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_400'; import chart_theme_green_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_green_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const GreenColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Green color component theme + * @private + * @beta + */ +export const GreenColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-ordered-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-ordered-theme.ts similarity index 96% rename from packages/react-charts/src/components/ChartTheme/themes/colors/multi-ordered-theme.ts rename to packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-ordered-theme.ts index 2ce1ad1e5ab..dc383575975 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-ordered-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-ordered-theme.ts @@ -24,7 +24,7 @@ import chart_theme_multi_color_ordered_ColorScale_2200 from '@patternfly/react-t import chart_theme_multi_color_ordered_ColorScale_2300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2300'; import chart_theme_multi_color_ordered_ColorScale_2400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2400'; import chart_theme_multi_color_ordered_ColorScale_2500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_ordered_ColorScale_2500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // The color order below (minus the purple color family) improves the color contrast in ordered charts; donut, pie, bar, & stack // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -63,3 +63,12 @@ const COLOR_SCALE = [ export const MultiColorOrderedTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Multi-color ordered component theme + * @private + * @beta + */ +export const MultiColorOrderedComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-unordered-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-unordered-theme.ts similarity index 97% rename from packages/react-charts/src/components/ChartTheme/themes/colors/multi-unordered-theme.ts rename to packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-unordered-theme.ts index eeff0952a38..dd524d32ab4 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/multi-unordered-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/multi-unordered-theme.ts @@ -34,7 +34,7 @@ import chart_theme_multi_color_unordered_ColorScale_3200 from '@patternfly/react import chart_theme_multi_color_unordered_ColorScale_3300 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3300'; import chart_theme_multi_color_unordered_ColorScale_3400 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3400'; import chart_theme_multi_color_unordered_ColorScale_3500 from '@patternfly/react-tokens/dist/esm/chart_theme_multi_color_unordered_ColorScale_3500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // The color order below improves the color contrast in unordered charts; area & line // See https://github.com/patternfly/patternfly-next/issues/1551 @@ -83,3 +83,12 @@ const COLOR_SCALE = [ export const MultiColorUnorderedTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Multi-color unordered component theme + * @private + * @beta + */ +export const MultiColorUnorderedComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/orange-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/orange-theme.ts similarity index 83% rename from packages/react-charts/src/components/ChartTheme/themes/colors/orange-theme.ts rename to packages/react-charts/src/victory/components/ChartTheme/themes/colors/orange-theme.ts index ca81d6608db..cb29dcbba91 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/orange-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/orange-theme.ts @@ -4,7 +4,7 @@ import chart_theme_orange_ColorScale_200 from '@patternfly/react-tokens/dist/esm import chart_theme_orange_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_300'; import chart_theme_orange_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_400'; import chart_theme_orange_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_orange_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const OrangeColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Orange color component theme + * @private + * @beta + */ +export const OrangeColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/components/ChartTheme/themes/colors/purple-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/purple-theme.ts similarity index 83% rename from packages/react-charts/src/components/ChartTheme/themes/colors/purple-theme.ts rename to packages/react-charts/src/victory/components/ChartTheme/themes/colors/purple-theme.ts index 1982c9c6c51..21ffef53f35 100644 --- a/packages/react-charts/src/components/ChartTheme/themes/colors/purple-theme.ts +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/purple-theme.ts @@ -4,7 +4,7 @@ import chart_theme_purple_ColorScale_200 from '@patternfly/react-tokens/dist/esm import chart_theme_purple_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_300'; import chart_theme_purple_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_400'; import chart_theme_purple_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_purple_ColorScale_500'; -import { ColorTheme } from '../color-theme'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; // Color scale // See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit @@ -23,3 +23,12 @@ const COLOR_SCALE = [ export const PurpleColorTheme = ColorTheme({ COLOR_SCALE }); + +/** + * Purple color component theme + * @private + * @beta + */ +export const PurpleColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/skeleton-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/skeleton-theme.ts new file mode 100644 index 00000000000..9b58ce91fbf --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/skeleton-theme.ts @@ -0,0 +1,35 @@ +/* eslint-disable camelcase */ +import { ColorTheme, ColorComponentTheme } from '../skeleton-theme'; +import chart_bullet_qualitative_range_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_100'; +import chart_bullet_qualitative_range_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_200'; +import chart_bullet_qualitative_range_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_300'; +import chart_bullet_qualitative_range_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_400'; +import chart_bullet_qualitative_range_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_bullet_qualitative_range_ColorScale_500'; + +// Color scale +// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit +const COLOR_SCALE = [ + chart_bullet_qualitative_range_ColorScale_100.var, + chart_bullet_qualitative_range_ColorScale_200.var, + chart_bullet_qualitative_range_ColorScale_300.var, + chart_bullet_qualitative_range_ColorScale_400.var, + chart_bullet_qualitative_range_ColorScale_500.var +]; + +/** + * Skeleton color theme + * @private + * @beta + */ +export const SkeletonColorTheme = ColorTheme({ + COLOR_SCALE +}); + +/** + * Skeleton color theme + * @private + * @beta + */ +export const SkeletonColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/teal-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/teal-theme.ts new file mode 100644 index 00000000000..3c6f0c5c5b2 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/teal-theme.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import chart_theme_teal_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_teal_ColorScale_100'; +import chart_theme_teal_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_teal_ColorScale_200'; +import chart_theme_teal_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_teal_ColorScale_300'; +import chart_theme_teal_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_teal_ColorScale_400'; +import chart_theme_teal_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_teal_ColorScale_500'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; + +// Color scale +// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit +const COLOR_SCALE = [ + chart_theme_teal_ColorScale_100.var, + chart_theme_teal_ColorScale_200.var, + chart_theme_teal_ColorScale_300.var, + chart_theme_teal_ColorScale_400.var, + chart_theme_teal_ColorScale_500.var +]; + +/** + * Teal color theme + * @private + */ +export const TealColorTheme = ColorTheme({ + COLOR_SCALE +}); + +/** + * Teal color component theme + * @private + * @beta + */ +export const TealColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/colors/yellow-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/yellow-theme.ts new file mode 100644 index 00000000000..5a512442d3d --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/colors/yellow-theme.ts @@ -0,0 +1,34 @@ +/* eslint-disable camelcase */ +import chart_theme_yellow_ColorScale_100 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_100'; +import chart_theme_yellow_ColorScale_200 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_200'; +import chart_theme_yellow_ColorScale_300 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_300'; +import chart_theme_yellow_ColorScale_400 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_400'; +import chart_theme_yellow_ColorScale_500 from '@patternfly/react-tokens/dist/esm/chart_theme_yellow_ColorScale_500'; +import { ColorTheme, ColorComponentTheme } from '../color-theme'; + +// Color scale +// See https://docs.google.com/document/d/1cw10pJFXWruB1SA8TQwituxn5Ss6KpxYPCOYGrH8qAY/edit +const COLOR_SCALE = [ + chart_theme_yellow_ColorScale_100.var, + chart_theme_yellow_ColorScale_200.var, + chart_theme_yellow_ColorScale_300.var, + chart_theme_yellow_ColorScale_400.var, + chart_theme_yellow_ColorScale_500.var +]; + +/** + * Yellow color theme + * @private + */ +export const YellowColorTheme = ColorTheme({ + COLOR_SCALE +}); + +/** + * Yellow color component theme + * @private + * @beta + */ +export const YellowColorComponentTheme = ColorComponentTheme({ + COLOR_SCALE +}); diff --git a/packages/react-charts/src/victory/components/ChartTheme/themes/skeleton-theme.ts b/packages/react-charts/src/victory/components/ChartTheme/themes/skeleton-theme.ts new file mode 100644 index 00000000000..21863aed04f --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTheme/themes/skeleton-theme.ts @@ -0,0 +1,307 @@ +import { ChartComponentThemeDefinition, ChartThemeDefinition } from '../ChartTheme'; + +interface ColorThemeInterface { + COLOR_SCALE: string[]; +} + +// Labels +const LABEL_PROPS = { + fill: 'transparent', + stroke: 'transparent' +}; + +const LABEL_CENTERED_PROPS = { + ...LABEL_PROPS +}; + +/** + * Victory color theme + * @private + */ +export const ColorTheme = (props: ColorThemeInterface): ChartThemeDefinition => { + const { COLOR_SCALE } = props; + + return { + area: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + axis: { + colorScale: COLOR_SCALE, + style: { + axis: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + axisLabel: { + ...LABEL_CENTERED_PROPS, + fill: COLOR_SCALE[0], + stroke: 'transparent' + }, + grid: { + fill: 'transparent', + stroke: 'transparent' + }, + ticks: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + tickLabels: { + ...LABEL_PROPS, + fill: 'transparent' + } + } + }, + bar: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + }, + labels: LABEL_PROPS + } + }, + boxplot: { + colorScale: COLOR_SCALE, + style: { + max: { + stroke: COLOR_SCALE[0] + }, + maxLabels: LABEL_PROPS, + median: { + stroke: COLOR_SCALE[0] + }, + medianLabels: LABEL_PROPS, + min: { + stroke: COLOR_SCALE[0] + }, + minLabels: LABEL_PROPS, + q1: { + fill: COLOR_SCALE[0] + }, + q1Labels: LABEL_PROPS, + q3: { + fill: COLOR_SCALE[0] + }, + q3Labels: LABEL_PROPS + } + }, + candlestick: { + colorScale: COLOR_SCALE, + style: { + data: { + stroke: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + chart: { + colorScale: COLOR_SCALE + }, + errorbar: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + group: { + colorScale: COLOR_SCALE + }, + legend: { + colorScale: COLOR_SCALE, + style: { + labels: LABEL_PROPS, + title: { + ...LABEL_PROPS + } + } + }, + line: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: 'transparent', + stroke: COLOR_SCALE[0] + }, + labels: LABEL_CENTERED_PROPS + } + }, + pie: { + colorScale: COLOR_SCALE, + style: { + data: { + stroke: 'transparent' + }, + labels: { + ...LABEL_PROPS + } + } + }, + scatter: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0], + stroke: 'transparent' + }, + labels: LABEL_CENTERED_PROPS + } + }, + stack: { + colorScale: COLOR_SCALE + }, + tooltip: { + flyoutStyle: { + fill: 'transparent', // background + stroke: 'transparent' // border + }, + style: { + fill: 'transparent' // text + } + }, + voronoi: { + colorScale: COLOR_SCALE, + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + }, + labels: { + ...LABEL_CENTERED_PROPS, + fill: 'transparent' // text + }, + // Note: These properties override tooltip + flyout: { + fill: 'transparent', // background + stroke: 'transparent' // border + } + } + } + }; +}; + +/** + * Component color theme + * @private + * @beta + */ +export const ColorComponentTheme = (props: ColorThemeInterface): ChartComponentThemeDefinition => { + const { COLOR_SCALE } = props; + + return { + axis: { + axis: { + style: { + grid: { + stroke: COLOR_SCALE[0] + }, + ticks: { + stroke: COLOR_SCALE[0] + } + } + } + }, + bullet: { + // TBD... + }, + bulletComparativeErrorMeasure: { + bar: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletComparativeMeasure: { + bar: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletComparativeWarningMeasure: { + bar: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletGroupTitle: { + line: { + style: { + data: { + fill: COLOR_SCALE[0], + stroke: COLOR_SCALE[0] + } + } + } + }, + bulletPrimaryDotMeasure: { + // TBD... + }, + bulletPrimaryNegativeMeasure: { + group: { + colorScale: COLOR_SCALE + } + }, + bulletPrimarySegmentedMeasure: { + // TBD... + }, + bulletQualitativeRange: { + group: { + colorScale: COLOR_SCALE + } + }, + donut: { + // TBD... + }, + donutThresholdDynamic: { + legend: { + colorScale: COLOR_SCALE + }, + pie: { + colorScale: COLOR_SCALE + } + }, + donutThresholdStatic: { + pie: { + colorScale: COLOR_SCALE + } + }, + donutUtilization: { + legend: { + colorScale: COLOR_SCALE + }, + pie: { + colorScale: COLOR_SCALE + } + }, + label: { + backgroundStyle: { + fill: COLOR_SCALE[0] + }, + style: LABEL_CENTERED_PROPS + }, + threshold: { + // TBD... + } + }; +}; diff --git a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx b/packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartThreshold/ChartThreshold.test.tsx rename to packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.test.tsx diff --git a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx b/packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.tsx similarity index 99% rename from packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx rename to packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.tsx index 971cdc6af11..9d6566d8a3d 100644 --- a/packages/react-charts/src/components/ChartThreshold/ChartThreshold.tsx +++ b/packages/react-charts/src/victory/components/ChartThreshold/ChartThreshold.tsx @@ -456,7 +456,7 @@ export const ChartThreshold: React.FunctionComponent = ({ strokeWidth: getStrokeWidth() }; } - return ; + return ; }; ChartThreshold.displayName = 'ChartThreshold'; diff --git a/packages/react-charts/src/victory/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap b/packages/react-charts/src/victory/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap new file mode 100644 index 00000000000..b5c5bc8fa33 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartThreshold/__snapshots__/ChartThreshold.test.tsx.snap @@ -0,0 +1,528 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartThreshold 1`] = ` + +
+ + + + + + + + + + +
+ +
+
+ +`; + +exports[`ChartThreshold 2`] = ` + +
+ + + + + + + + + + +
+ +
+
+ +`; + +exports[`renders component data 1`] = ` + +
+ + + + + + + + + + + + + + + + + + 1.0 + + + + + + + + 2.0 + + + + + + + + 3.0 + + + + + + + + 4.0 + + + + + + + + 5.0 + + + + + + + + + + + 0.5 + + + + + + + + 1.0 + + + + + + + + 1.5 + + + + + + + + 2.0 + + + + + + + + 2.5 + + + + + + + + 3.0 + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md b/packages/react-charts/src/victory/components/ChartThreshold/examples/ChartThreshold.md similarity index 98% rename from packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md rename to packages/react-charts/src/victory/components/ChartThreshold/examples/ChartThreshold.md index 128ee54a7c5..b76b8781ca7 100644 --- a/packages/react-charts/src/components/ChartThreshold/examples/ChartThreshold.md +++ b/packages/react-charts/src/victory/components/ChartThreshold/examples/ChartThreshold.md @@ -20,7 +20,7 @@ import { ChartThreshold, ChartThemeColor, ChartVoronoiContainer -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; @@ -45,7 +45,7 @@ import { ChartThreshold, ChartThemeColor, ChartVoronoiContainer -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_orange_300 from '@patternfly/react-tokens/dist/esm/chart_color_orange_300'; @@ -116,6 +116,7 @@ class MultiColorChart extends React.Component { top: 50 }} maxDomain={{ y: 9 }} + name="chart1" themeColor={ChartThemeColor.multiUnordered} width={width} > diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx b/packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartTooltip/ChartTooltip.test.tsx rename to packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.test.tsx diff --git a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx b/packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.tsx similarity index 99% rename from packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx rename to packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.tsx index a75c483d5ec..05a890bea57 100644 --- a/packages/react-charts/src/components/ChartTooltip/ChartTooltip.tsx +++ b/packages/react-charts/src/victory/components/ChartTooltip/ChartTooltip.tsx @@ -36,7 +36,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps { /** * The angle prop specifies the angle to rotate the tooltip around its origin point. */ - angle?: string | number; + angle?: number; /** * The center prop determines the position of the center of the tooltip flyout. This prop should be given as an object * that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for @@ -225,7 +225,7 @@ export interface ChartTooltipProps extends VictoryTooltipProps { * * @propType number | string | Function | string[] | number[] */ - text?: StringOrNumberOrCallback | string[] | number[]; + text?: string[] | StringOrNumberOrCallback; /** * The theme prop specifies a theme to use for determining styles and layout properties for a component. Any styles or * props defined in theme may be overwritten by props specified on the component instance. diff --git a/packages/react-charts/src/victory/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap b/packages/react-charts/src/victory/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap new file mode 100644 index 00000000000..b655956fd5d --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartTooltip/__snapshots__/ChartTooltip.test.tsx.snap @@ -0,0 +1,81 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ChartTooltip 1`] = ``; + +exports[`ChartTooltip 2`] = ``; + +exports[`allows tooltip via container component 1`] = ` + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md similarity index 91% rename from packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md rename to packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md index a9274b57602..eceab742288 100644 --- a/packages/react-charts/src/components/ChartTooltip/examples/ChartTooltip.md +++ b/packages/react-charts/src/victory/components/ChartTooltip/examples/ChartTooltip.md @@ -31,7 +31,7 @@ import { ChartVoronoiContainer, createContainer, getCustomTheme -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import './chart-tooltip.css'; ## Introduction @@ -46,7 +46,7 @@ This demonstrates how to use a voronoi container to display tooltips. ```js import React from 'react'; -import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
( - - {} + + + + { + + } + + {legendData[index].name} @@ -356,8 +369,9 @@ class EmbeddedHtml extends React.Component { labels={({ datum }) => `${datum.y !== null ? datum.y : 'no data'}`} labelComponent={ width > center.x + flyoutWidth + 10 ? offset : -offset}} - flyout={} + // The offset and flyout component are not necessary here, but included for completeness + // centerOffset={{x: ({ center, flyoutWidth, width, offset = flyoutWidth / 2 + 10 }) => width > center.x + flyoutWidth + 10 ? offset : -offset}} + // flyoutComponent={} flyoutHeight={110} flyoutWidth={({ datum }) => datum.y === null ? 160 : 125 } labelComponent={ datum.x} />} @@ -429,7 +443,7 @@ This demonstrates how to embed a legend within a tooltip, but with a custom font ```js import React from 'react'; -import { Chart, ChartAxis, ChartGroup, ChartLegendTooltip, ChartLegend, ChartLine, ChartLegendTooltipContent, ChartLegendTooltipLabel, ChartThemeColor, createContainer } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLegendTooltip, ChartLegend, ChartLine, ChartLegendTooltipContent, ChartLegendTooltipLabel, ChartThemeColor, createContainer } from '@patternfly/react-charts/victory'; class EmbeddedLegendAlt extends React.Component { render() { @@ -468,7 +482,7 @@ class EmbeddedLegendAlt extends React.Component { right: 50, top: 50 }} - themeColor={ChartThemeColor.gold} + themeColor={ChartThemeColor.yellow} width={450} > @@ -529,7 +543,7 @@ This demonstrates an alternate way of applying tooltips using data labels. ```js import React from 'react'; -import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBar, ChartStack, ChartThemeColor, ChartTooltip } from '@patternfly/react-charts/victory';
``` +### Fixed tooltip +This demonstrates how to adjust the tooltip position and label radius +```js +import React from 'react'; +import { ChartDonut, ChartTooltip } from '@patternfly/react-charts/victory'; + +
+ } + labelRadius={46} + labels={({ datum }) => `${datum.x}: ${datum.y}%`} + name="chart5" + subTitle="Pets" + title="100" + themeColor={ChartThemeColor.teal} + width={150} + /> +
+``` + ### Legend -This demonstrates an approach for applying tooltips to a legend using a custom label component. +This demonstrates an approach for applying tooltips to a legend using a custom legend label component. ```js import React from 'react'; -import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts'; +import { ChartLabel, ChartLegend, ChartPie, ChartThemeColor } from '@patternfly/react-charts/victory'; import { Tooltip } from '@patternfly/react-core'; class TooltipPieChart extends React.Component { @@ -665,7 +704,7 @@ This demonstrates how to customize tooltip label alignment using theme propertie ```js import React from 'react'; -import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartGroup, ChartLine, ChartThemeColor, ChartVoronoiContainer, getCustomTheme } from '@patternfly/react-charts/victory'; class TooltipThemeChart extends React.Component { constructor(props) { @@ -766,7 +805,7 @@ This demonstrates an alternate way of applying tooltips using CSS overflow inste ```js import React from 'react'; -import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { ChartArea, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
@@ -801,7 +840,7 @@ This demonstrates an alternate way of applying tooltips by wrapping charts with ```js import React from 'react'; -import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts'; +import { ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory'; import { Button, Tooltip, TooltipPosition } from '@patternfly/react-core'; class TooltipChart extends React.Component { diff --git a/packages/react-charts/src/components/ChartTooltip/examples/chart-tooltip.css b/packages/react-charts/src/victory/components/ChartTooltip/examples/chart-tooltip.css similarity index 100% rename from packages/react-charts/src/components/ChartTooltip/examples/chart-tooltip.css rename to packages/react-charts/src/victory/components/ChartTooltip/examples/chart-tooltip.css diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx b/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx new file mode 100644 index 00000000000..c3e58f0b1db --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-container.tsx @@ -0,0 +1,55 @@ +/* eslint-disable camelcase */ +import chart_container_cursor_line_Fill from '@patternfly/react-tokens/dist/esm/chart_container_cursor_line_Fill'; + +import * as React from 'react'; +import { ContainerType, createContainer as victoryCreateContainer } from 'victory-create-container'; +import { ChartCursorTooltip } from '../ChartCursorTooltip/ChartCursorTooltip'; +import { ChartLabel } from '../ChartLabel/ChartLabel'; +import { LineSegment } from 'victory-core'; + +/** + * Makes a container component with multiple behaviors. It allows you to effectively combine any two + * containers of type 'brush', 'cursor', 'selection', 'voronoi', or 'zoom'. Default container props are applied to + * support the PatternFly theme. + * + * Each behavior must be one of the following strings: 'brush', 'cursor', 'selection', 'voronoi', and 'zoom'. The + * resulting container uses the events from both behaviors. For example, if both behaviors use the click event (like + * zoom and selection) the combined container will trigger both behaviors' events on each click. + * + * Note: Order of the behaviors matters in a few cases. It is recommended to use 'zoom' before any other behaviors: for + * example, createContainer('zoom', 'voronoi') instead of createContainer('voronoi', 'zoom'). + * + * See https://formidable.com/open-source/victory/docs/create-container + * + * @param {string} behaviorA 'brush', 'cursor', 'selection', 'voronoi', or 'zoom' + * @param {string} behaviorB 'brush', 'cursor', 'selection', 'voronoi', or 'zoom' + * @public + */ +export const createContainer = (behaviorA: ContainerType, behaviorB: ContainerType) => { + const Container: any = victoryCreateContainer(behaviorA, behaviorB); + const isCursor = behaviorA === 'cursor' || behaviorB === 'cursor'; + const isVoronoi = behaviorA === 'voronoi' || behaviorB === 'voronoi'; + + const containerWrapper = (props: any) => { + const containerProps = { + ...(isCursor && { + cursorLabelComponent: , + cursorComponent: ( + + ) + }), + ...(isVoronoi && { labelComponent: }), + ...props + }; + return ; + }; + containerWrapper.defaultEvents = Container.defaultEvents; + containerWrapper.displayName = Container.displayName; + containerWrapper.role = Container.role; + + return containerWrapper; +}; diff --git a/packages/react-charts/src/components/ChartUtils/chart-domain.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-domain.ts similarity index 100% rename from packages/react-charts/src/components/ChartUtils/chart-domain.ts rename to packages/react-charts/src/victory/components/ChartUtils/chart-domain.ts diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-helpers.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-helpers.ts new file mode 100644 index 00000000000..d73f7b17c6b --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-helpers.ts @@ -0,0 +1,30 @@ +// Misc util functions + +interface ChartClassNameInterface { + className?: string; +} + +/** + * Copied from exenv + * @private + */ +export const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); + +/** + * Returns the class name that will be applied to the outermost div rendered by the chart's container + * @private + */ +export const getClassName = ({ className }: ChartClassNameInterface) => { + let cleanClassName; + + // Workaround for VictoryContainer class name + if (className) { + cleanClassName = className + .replace(/VictoryContainer/g, '') + .replace(/pf-v6-c-chart/g, '') + .replace(/pf-c-chart/g, '') + .replace(/\s+/g, ' ') + .trim(); + } + return cleanClassName && cleanClassName.length ? `pf-v6-c-chart ${cleanClassName}` : 'pf-v6-c-chart'; +}; diff --git a/packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-interactive-legend.ts similarity index 100% rename from packages/react-charts/src/components/ChartUtils/chart-interactive-legend.ts rename to packages/react-charts/src/victory/components/ChartUtils/chart-interactive-legend.ts diff --git a/packages/react-charts/src/components/ChartUtils/chart-label.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-label.ts similarity index 100% rename from packages/react-charts/src/components/ChartUtils/chart-label.ts rename to packages/react-charts/src/victory/components/ChartUtils/chart-label.ts diff --git a/packages/react-charts/src/components/ChartUtils/chart-legend.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts similarity index 99% rename from packages/react-charts/src/components/ChartUtils/chart-legend.ts rename to packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts index 3bbd51bda43..d2e07752e95 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-legend.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-legend.ts @@ -21,6 +21,7 @@ interface ChartLegendInterface { patternScale?: string[]; // Legend symbol patterns position: 'bottom' | 'bottom-left' | 'right'; // The legend position theme: ChartThemeDefinition; // The theme that will be applied to the chart + themeColor?: string; // The theme color that will be applied to the chart width: number; // Overall width of SVG } @@ -82,6 +83,7 @@ export const getComputedLegend = ({ patternScale, position = ChartCommonStyles.legend.position, theme, + themeColor, width, // destructure last @@ -142,6 +144,7 @@ export const getComputedLegend = ({ patternScale, standalone: false, theme, + themeColor, x: legendX > 0 ? legendX : 0, y: legendY > 0 ? legendY : 0 }); diff --git a/packages/react-charts/src/components/ChartUtils/chart-origin.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-origin.ts similarity index 100% rename from packages/react-charts/src/components/ChartUtils/chart-origin.ts rename to packages/react-charts/src/victory/components/ChartUtils/chart-origin.ts diff --git a/packages/react-charts/src/components/ChartUtils/chart-padding.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-padding.ts similarity index 100% rename from packages/react-charts/src/components/ChartUtils/chart-padding.ts rename to packages/react-charts/src/victory/components/ChartUtils/chart-padding.ts diff --git a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx b/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx similarity index 98% rename from packages/react-charts/src/components/ChartUtils/chart-patterns.tsx rename to packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx index 08944b00b1c..4eb229483b1 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-patterns.tsx +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-patterns.tsx @@ -10,6 +10,7 @@ interface PatternPropsInterface { patternId?: string; patternScale?: string[]; patternUnshiftIndex?: number; + themeColor?: string; themeColorScale?: string[]; } @@ -359,7 +360,7 @@ export const useDefaultPatternProps = ({ * Helper function to render children with patterns * @private */ -export const renderChildrenWithPatterns = ({ children, patternScale }: PatternPropsInterface) => +export const renderChildrenWithPatterns = ({ children, patternScale, themeColor }: PatternPropsInterface) => React.Children.toArray(children).map((child, index) => { if (React.isValidElement(child)) { const { ...childProps } = child.props; @@ -375,6 +376,7 @@ export const renderChildrenWithPatterns = ({ children, patternScale }: PatternPr } const _child = React.cloneElement(child, { ...(patternScale && { patternScale }), + ...(themeColor && { themeColor }), ...childProps, style // Override child props }); diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-theme-types.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-theme-types.ts new file mode 100644 index 00000000000..17fbae280b3 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-theme-types.ts @@ -0,0 +1,179 @@ +import { ChartThemeDefinition } from '../ChartTheme/ChartTheme'; +import { getComponentTheme, getTheme } from './chart-theme'; +import merge from 'lodash/merge'; + +/** + * Returns axis theme + * @private + */ +export const getAxisTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.axis); +}; + +/** + * Returns bullet chart theme + * @private + */ +export const getBulletTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bullet); +}; + +/** + * Returns comparative error measure theme for bullet chart + * @private + */ +export const getBulletComparativeErrorMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletComparativeErrorMeasure); +}; + +/** + * Returns comparative measure theme for bullet chart + * @private + */ +export const getBulletComparativeMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletComparativeMeasure); +}; + +/** + * Returns comparative warning measure theme for bullet chart + * @private + */ +export const getBulletComparativeWarningMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletComparativeWarningMeasure); +}; + +/** + * Returns group title theme for bullet chart + * @private + */ +export const getBulletGroupTitleTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletGroupTitle); +}; + +/** + * Returns primary dot measure theme for bullet chart + * @private + */ +export const getBulletPrimaryDotMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletPrimaryDotMeasure); +}; + +/** + * Returns primary negative measure theme for bullet chart + * @private + */ +export const getBulletPrimaryNegativeMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletPrimaryNegativeMeasure); +}; + +/** + * Returns primary segmented measure theme for bullet chart + * @private + */ +export const getBulletPrimarySegmentedMeasureTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletPrimarySegmentedMeasure); +}; + +/** + * Returns qualitative range theme for bullet chart + * @private + */ +export const getBulletQualitativeRangeTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.bulletQualitativeRange); +}; + +/** + * Returns theme for Chart component + * @private + */ +export const getChartTheme = (themeColor: string, showAxis: boolean): ChartThemeDefinition => { + const theme = getTheme(themeColor); + + if (!showAxis) { + theme.axis.padding = 0; + theme.axis.style.axis.fill = 'transparent'; + theme.axis.style.axis.stroke = 'transparent'; + theme.axis.style.grid.fill = 'transparent'; + theme.axis.style.grid.stroke = 'transparent'; + theme.axis.style.ticks.fill = 'transparent'; + theme.axis.style.ticks.stroke = 'transparent'; + theme.axis.style.tickLabels.fill = 'transparent'; + } + return theme; +}; + +/** + * Returns donut theme + * @private + */ +export const getDonutTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.donut); +}; + +/** + * Returns dynamic donut threshold theme + * @private + */ +export const getDonutThresholdDynamicTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.donutThresholdDynamic); +}; + +/** + * Returns static donut threshold theme + * @private + */ +export const getDonutThresholdStaticTheme = (themeColor: string, invert?: boolean): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + const theme = merge(baseTheme, componentTheme.donutThresholdStatic); + + if (invert && baseTheme.pie.colorScale instanceof Array) { + const colorScale = [...componentTheme.donutThresholdStatic.pie.colorScale]; + theme.pie.colorScale = merge(baseTheme.pie.colorScale, colorScale.reverse()); + } + return theme; +}; + +/** + * Returns donut utilization theme + * @private + */ +export const getDonutUtilizationTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.donutUtilization); +}; + +/** + * Returns threshold theme + * @private + */ +export const getThresholdTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = getTheme(themeColor); + const componentTheme = getComponentTheme(themeColor); + return merge(baseTheme, componentTheme.threshold); +}; diff --git a/packages/react-charts/src/victory/components/ChartUtils/chart-theme.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-theme.ts new file mode 100644 index 00000000000..c0c4ed54a54 --- /dev/null +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-theme.ts @@ -0,0 +1,115 @@ +import cloneDeep from 'lodash/cloneDeep'; +import merge from 'lodash/merge'; +import { ChartThemeColor } from '../ChartTheme/ChartThemeColor'; +import { ChartThemeDefinition, ChartComponentThemeDefinition } from '../ChartTheme/ChartTheme'; +import { ChartBaseTheme, ChartBaseComponentTheme } from '../ChartTheme/ChartThemeTypes'; +import { BlueColorTheme, BlueColorComponentTheme } from '../ChartTheme/themes/colors/blue-theme'; +import { TealColorTheme, TealColorComponentTheme } from '../ChartTheme/themes/colors/teal-theme'; +import { YellowColorTheme, YellowColorComponentTheme } from '../ChartTheme/themes/colors/yellow-theme'; +import { GrayColorTheme, GrayColorComponentTheme } from '../ChartTheme/themes/colors/gray-theme'; +import { GreenColorTheme, GreenColorComponentTheme } from '../ChartTheme/themes/colors/green-theme'; +import { SkeletonColorTheme, SkeletonColorComponentTheme } from '../ChartTheme/themes/colors/skeleton-theme'; +import { + MultiColorOrderedTheme, + MultiColorOrderedComponentTheme +} from '../ChartTheme/themes/colors/multi-ordered-theme'; +import { + MultiColorUnorderedTheme, + MultiColorUnorderedComponentTheme +} from '../ChartTheme/themes/colors/multi-unordered-theme'; +import { OrangeColorTheme, OrangeColorComponentTheme } from '../ChartTheme/themes/colors/orange-theme'; +import { PurpleColorTheme, PurpleColorComponentTheme } from '../ChartTheme/themes/colors/purple-theme'; + +/** + * Apply custom properties to base and color themes + * + * @param themeColor The theme color to merge with custom theme + * @param customTheme The custom theme to merge + * @public + */ +export const getCustomTheme = (themeColor: string, customTheme: ChartThemeDefinition): ChartThemeDefinition => + merge(getTheme(themeColor), customTheme); + +/** + * Returns base theme for given color + * @public + */ +export const getTheme = (themeColor: string): ChartThemeDefinition => { + const baseTheme = cloneDeep(ChartBaseTheme); + return merge(baseTheme, getThemeColors(themeColor)); +}; + +/** + * Returns base component theme for given color + * @private + * @beta + */ +export const getComponentTheme = (themeColor: string): ChartComponentThemeDefinition => { + const theme = cloneDeep(ChartBaseComponentTheme); + return merge(theme, getThemeComponentColors(themeColor)); +}; + +/** + * Returns theme colors + * @public + */ +export const getThemeColors = (themeColor: string) => { + switch (themeColor) { + case ChartThemeColor.blue: + return BlueColorTheme; + case ChartThemeColor.teal: + return TealColorTheme; + case ChartThemeColor.yellow: + return YellowColorTheme; + case ChartThemeColor.gray: + return GrayColorTheme; + case ChartThemeColor.green: + return GreenColorTheme; + case ChartThemeColor.multi: + case ChartThemeColor.multiOrdered: + return MultiColorOrderedTheme; + case ChartThemeColor.multiUnordered: + return MultiColorUnorderedTheme; + case ChartThemeColor.orange: + return OrangeColorTheme; + case ChartThemeColor.purple: + return PurpleColorTheme; + case ChartThemeColor.skeleton: + return SkeletonColorTheme; + default: + return BlueColorTheme; + } +}; + +/** + * Returns theme component colors + * @private + * @beta + */ +export const getThemeComponentColors = (themeColor: string) => { + switch (themeColor) { + case ChartThemeColor.blue: + return BlueColorComponentTheme; + case ChartThemeColor.teal: + return TealColorComponentTheme; + case ChartThemeColor.yellow: + return YellowColorComponentTheme; + case ChartThemeColor.gray: + return GrayColorComponentTheme; + case ChartThemeColor.green: + return GreenColorComponentTheme; + case ChartThemeColor.multi: + case ChartThemeColor.multiOrdered: + return MultiColorOrderedComponentTheme; + case ChartThemeColor.multiUnordered: + return MultiColorUnorderedComponentTheme; + case ChartThemeColor.orange: + return OrangeColorComponentTheme; + case ChartThemeColor.purple: + return PurpleColorComponentTheme; + case ChartThemeColor.skeleton: + return SkeletonColorComponentTheme; + default: + return BlueColorComponentTheme; + } +}; diff --git a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts b/packages/react-charts/src/victory/components/ChartUtils/chart-tooltip.ts similarity index 92% rename from packages/react-charts/src/components/ChartUtils/chart-tooltip.ts rename to packages/react-charts/src/victory/components/ChartUtils/chart-tooltip.ts index 5d7bf819b75..fe7c369365f 100644 --- a/packages/react-charts/src/components/ChartUtils/chart-tooltip.ts +++ b/packages/react-charts/src/victory/components/ChartUtils/chart-tooltip.ts @@ -55,7 +55,7 @@ export const getCursorTooltipCenterOffset = ({ offsetCursorDimensionY = false, theme }: ChartCursorTooltipCenterOffsetInterface) => { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const offsetX = ({ center, flyoutWidth, width }: any) => { const offset = flyoutWidth / 2 + pointerLength; return width > center.x + flyoutWidth + pointerLength ? offset : -offset; @@ -80,7 +80,7 @@ export const getCursorTooltipPoniterOrientation = ({ horizontal = true, theme }: ChartCursorTooltipPoniterOrientationInterface): ((props: any) => OrientationTypes) => { - const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength) : 10; + const pointerLength = theme && theme.tooltip ? Helpers.evaluateProp(theme.tooltip.pointerLength, undefined) : 10; const orientationX = ({ center, flyoutWidth, width }: any): OrientationTypes => width > center.x + flyoutWidth + pointerLength ? 'left' : 'right'; const orientationY = ({ center, flyoutHeight, height }: any): OrientationTypes => @@ -92,7 +92,7 @@ export const getCursorTooltipPoniterOrientation = ({ * Returns props associated with legend data * @private */ -export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) => +export const getLegendTooltipDataProps = (props: ChartLegendProps) => merge( { borderPadding: 0, @@ -112,7 +112,7 @@ export const getLegendTooltipDataProps = (defaultProps: ChartLegendProps) => } } }, - { ...defaultProps } + { ...props } ); /** @@ -127,13 +127,17 @@ export const getLegendTooltipSize = ({ text = '', theme }: ChartLegendTooltipFlyoutInterface) => { - const textEvaluated = Helpers.evaluateProp(text); + const textEvaluated = Helpers.evaluateProp(text, undefined); const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; // Find max char lengths let maxDataLength = 0; let maxTextLength = 0; - _text.map((item: string, index: number) => { + _text.map((item, index) => { + if (typeof item === 'number') { + return; + } + if (item) { if (item.length > maxTextLength) { maxTextLength = item.length; @@ -153,7 +157,7 @@ export const getLegendTooltipSize = ({ // Get spacing to help align legend labels and text values const spacer = 'x'; const getSpacing = (legendLabel: string, textLabel: string) => { - let spacing = ''; + let spacing = '\u00A0'; if (maxLength === 0) { return spacing; } @@ -174,7 +178,11 @@ export const getLegendTooltipSize = ({ // {name: "Dogs 1"} // {name: "Birds 4"} // {name: "Mice 3"} - const data = _text.map((label: string, index: number) => { + const data = _text.map((label, index) => { + if (typeof label === 'number') { + return; + } + const hasData = legendData && legendData[index] && legendData[index].name !== undefined; const spacing = hasData ? getSpacing(legendData[index].name, label) : ''; @@ -197,7 +205,7 @@ export const getLegendTooltipSize = ({ }); // This should only use text. The row gutter changes when displaying all "no data" messages const heightDimensions = getLegendDimensions({ - legendData: _text.map((name: string) => ({ name })), + legendData: _text.map((name) => ({ name })), legendOrientation, legendProps, theme @@ -222,7 +230,7 @@ export const getLegendTooltipVisibleData = ({ textAsLegendData = false, theme }: ChartLegendTooltipVisibleDataInterface) => { - const textEvaluated = Helpers.evaluateProp(text); + const textEvaluated = Helpers.evaluateProp(text, undefined); const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; const result = []; @@ -267,7 +275,7 @@ export const getLegendTooltipVisibleText = ({ legendData, text }: ChartLegendTooltipVisibleTextInterface) => { - const textEvaluated = Helpers.evaluateProp(text); + const textEvaluated = Helpers.evaluateProp(text, undefined); const _text = Array.isArray(textEvaluated) ? textEvaluated : [textEvaluated]; const result = []; if (legendData) { @@ -285,5 +293,5 @@ export const getLegendTooltipVisibleText = ({ } } } - return result; + return result as string[] | number[]; }; diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx b/packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx similarity index 100% rename from packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx rename to packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoContainer.test.tsx diff --git a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx b/packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx similarity index 98% rename from packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx rename to packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx index 307ff55014b..8ba01f5ed74 100644 --- a/packages/react-charts/src/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx +++ b/packages/react-charts/src/victory/components/ChartVoronoiContainer/ChartVoronoiContainer.tsx @@ -43,7 +43,7 @@ export interface ChartVoronoiContainerProps extends VictoryVoronoiContainerProps */ children?: React.ReactElement | React.ReactElement[]; /** - * The className prop specifies a className that will be applied to the outer-most div rendered by the container + * The className prop specifies a className that will be applied to the outermost div rendered by the container */ className?: string; /** @@ -249,7 +249,6 @@ export const ChartVoronoiContainer: React.FunctionComponent +
+ +
+ +
+
+ +`; + +exports[`ChartVoronoiContainer 2`] = ` + +
+ +
+ +
+
+ +`; + +exports[`renders container via ChartGroup 1`] = ` + +
+ + + + + + + + + + + + + + + + + + +
+ +
+
+ +`; diff --git a/packages/react-charts/src/components/Patterns/examples/patterns.md b/packages/react-charts/src/victory/components/Patterns/examples/patterns.md similarity index 96% rename from packages/react-charts/src/components/Patterns/examples/patterns.md rename to packages/react-charts/src/victory/components/Patterns/examples/patterns.md index 3a34b8168b5..22b8200dd75 100644 --- a/packages/react-charts/src/components/Patterns/examples/patterns.md +++ b/packages/react-charts/src/victory/components/Patterns/examples/patterns.md @@ -39,13 +39,13 @@ import { createContainer, getInteractiveLegendEvents, getInteractiveLegendItemStyles -} from '@patternfly/react-charts'; +} from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; import chart_color_black_500 from '@patternfly/react-tokens/dist/esm/chart_color_black_500'; import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; import chart_color_green_300 from '@patternfly/react-tokens/dist/esm/chart_color_green_300'; -import chart_color_cyan_300 from '@patternfly/react-tokens/dist/esm/chart_color_cyan_300'; -import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300'; +import chart_color_teal_300 from '@patternfly/react-tokens/dist/esm/chart_color_teal_300'; +import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300'; import '@patternfly/patternfly/patternfly-charts.css'; ## Introduction @@ -57,7 +57,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic pie chart ```js import React from 'react'; -import { ChartPie } from '@patternfly/react-charts'; +import { ChartPie } from '@patternfly/react-charts/victory';
@@ -195,7 +195,7 @@ This demonstrates how to hide a pattern for the static, unused portion of the do ```js import React from 'react'; -import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts'; +import { ChartDonutUtilization, ChartThemeColor } from '@patternfly/react-charts/victory';
{}; this.state = { + extraHeight: 0, width: 0 }; this.handleResize = () => { @@ -294,7 +295,7 @@ This demonstrates how to use a `ResizeObserver` to update the chart's width, whi ```js import React from 'react'; -import { Chart, ChartAxis, ChartBar, ChartStack, ChartTooltip } from '@patternfly/react-charts'; +import { Chart, ChartAxis, ChartBar, ChartStack, ChartTooltip } from '@patternfly/react-charts/victory'; import { getResizeObserver } from '@patternfly/react-core'; class MonthlyResponsiveStack extends React.Component { diff --git a/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md b/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md new file mode 100644 index 00000000000..44b2d49331e --- /dev/null +++ b/packages/react-charts/src/victory/components/Skeletons/examples/skeletons.md @@ -0,0 +1,799 @@ +--- +id: Skeletons +section: charts +propComponents: [ + 'Chart', + 'ChartArea', + 'ChartAxis', + 'ChartBar', + 'ChartBoxPlot', + 'ChartBullet', + 'ChartDonut', + 'ChartDonutThreshold', + 'ChartDonutUtilization', + 'ChartLegend', + 'ChartLine', + 'ChartGroup', + 'ChartPie', + 'ChartScatter', + 'ChartStack', + 'ChartThreshold', + 'ChartVoronoiContainer' +] +hideDarkMode: true +beta: true +--- + +import { Chart, ChartArea, ChartAxis, ChartBar, ChartBoxPlot, ChartBullet, ChartDonut, ChartDonutThreshold, ChartDonutUtilization, ChartLegend, ChartLine, ChartGroup, ChartPie, ChartScatter, ChartStack, ChartThemeColor, ChartThreshold, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; +import { getResizeObserver } from '@patternfly/react-core'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; + +## Introduction +Note: PatternFly React charts live in its own package at [@patternfly/react-charts](https://www.npmjs.com/package/@patternfly/react-charts)! + +PatternFly React charts are based on the [Victory](https://formidable.com/open-source/victory/docs/victory-chart/) chart library, along with additional functionality, custom components, and theming for PatternFly. This provides a collection of React based components you can use to build PatternFly patterns with consistent markup, styling, and behavior. + +## Examples +### Area chart +```js +import React from 'react'; +import { Chart, ChartArea, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; +import { Switch } from '@patternfly/react-core'; + +export const ChartAreaSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }]} + legendOrientation="vertical" + legendPosition="right" + height={200} + maxDomain={{y: 9}} + name="chart1" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={800} + > + + + + + + + + +
+ + ); +} +``` + +### Bar chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartBar, ChartAxis, ChartGroup, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; + +export const ChartBarSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + domain={{y: [0,9]}} + domainPadding={{ x: [30, 25] }} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + name="chart2" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + > + + + + + + + + + +
+ + ); +} +``` + +### Box plot chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-charts/victory' +import { Chart, ChartAxis, ChartBoxPlot } from '@patternfly/react-charts/victory'; + +export const ChartBoxPlotSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ + + + + +
+ + ); +} +``` + +### Bullet chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartBullet, ChartLegend } from '@patternfly/react-charts/victory'; + +export const ChartBulletSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} + legendComponent={} + maxDomain={{y: 100}} + name="chart4" + padding={{ + bottom: 50, + left: 150, // Adjusted to accommodate labels + right: 50, + top: 50 + }} + primarySegmentedMeasureData={[{ name: 'Measure', y: 25 }, { name: 'Measure', y: 60 }]} + primarySegmentedMeasureLegendData={[{ name: 'Measure' }, { name: 'Measure' }]} + qualitativeRangeData={[{ name: 'Range', y: 50 }, { name: 'Range', y: 75 }]} + qualitativeRangeLegendData={[{ name: 'Range' }, { name: 'Range' }]} + subTitle="Details" + title="Text label" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + /> +
+ + ); +} +``` + +### Donut chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartDonut } from '@patternfly/react-charts/victory'; + +export const ChartDonutSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.x}: ${datum.y}%`} + name="chart5" + subTitle="Pets" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + title="100" + /> +
+ + ); +} +``` + +### Donut utilization chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartDonutUtilization } from '@patternfly/react-charts/victory'; + +export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ datum.x ? `${datum.x}: ${datum.y}%` : null} + legendData={[{ name: `Storage capacity: 75%` }, { name: 'Unused' }]} + legendOrientation="vertical" + name="chart6" + padding={{ + bottom: 20, + left: 20, + right: 225, // Adjusted to accommodate legend + top: 20 + }} + subTitle="of 100 GBps" + title="35%" + thresholds={[{ value: 60 }, { value: 90 }]} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={435} + /> +
+ + ); +} +``` + +### Donut utilization threshold +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartDonutThreshold, ChartDonutUtilization } from '@patternfly/react-charts/victory'; + +export const ChartDonutUtilizationSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ datum.x ? datum.x : null} + name="chart7" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + > + datum.x ? `${datum.x}: ${datum.y}%` : null} + subTitle="of 100 GBps" + title="45%" + /> + +
+ + ); +} +``` + +### Line chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartLine } from '@patternfly/react-charts/victory'; + +export const ChartLineSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + legendData={[{ name: 'Cats' }, { name: 'Dogs', symbol: { type: 'dash' } }, { name: 'Birds' }, { name: 'Mice' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + maxDomain={{y: 10}} + minDomain={{y: 0}} + name="chart8" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + > + + + + + + + + + +
+ + ); +} +``` + +### Pie chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartAxis, ChartPie } from '@patternfly/react-charts/victory'; + +export const ChartPieSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.x}: ${datum.y}`} + legendData={[{ name: 'Cats: 35' }, { name: 'Dogs: 55' }, { name: 'Birds: 10' }]} + legendOrientation="vertical" + legendPosition="right" + name="chart9" + padding={{ + bottom: 20, + left: 20, + right: 140, // Adjusted to accommodate legend + top: 20 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={350} + /> +
+ + ); +} +``` + +### Scatter chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartVoronoiContainer, ChartGroup, ChartAxis, ChartScatter } from '@patternfly/react-charts/victory'; + +export const ChartScatterSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} + constrainToVisibleArea + /> + } + height={275} + maxDomain={{y: 8}} + minDomain={{y: 0}} + name="chart10" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={450} + > + + + + + + +
+ + ); +} +``` + +### Stack chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartVoronoiContainer, ChartAxis, ChartStack, ChartBar } from '@patternfly/react-charts/victory'; + +export const ChartStackSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} constrainToVisibleArea />} + domainPadding={{ x: [30, 25] }} + legendData={[{ name: 'Cats' }, { name: 'Dogs' }, { name: 'Birds' }, { name: 'Mice' }]} + legendOrientation="vertical" + legendPosition="right" + height={250} + name="chart11" + padding={{ + bottom: 50, + left: 50, + right: 200, // Adjusted to accommodate legend + top: 50 + }} + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={600} + > + + + + + + + + + +
+ + ); +} +``` + +### Threshold chart +```js +import React from 'react'; +import { Switch } from '@patternfly/react-core'; +import { Chart, ChartVoronoiContainer, ChartLegend, ChartAxis, ChartThreshold, ChartGroup, ChartArea } from '@patternfly/react-charts/victory'; +import chart_color_blue_300 from '@patternfly/react-tokens/dist/esm/chart_color_blue_300'; + +export const ChartThresholdSkeleton: React.FunctionComponent = () => { + const [isChecked, setIsChecked] = React.useState(true); + + const handleChange = (_event: React.FormEvent, checked: boolean) => { + setIsChecked(checked); + }; + + return ( + <> + +
+ `${datum.name}: ${datum.y}`} + constrainToVisibleArea + /> + } + legendPosition="bottom-left" + legendComponent={ + + } + height={250} + padding={{ + bottom: 100, // Adjusted to accomodate legend + left: 50, + right: 50, + top: 50 + }} + maxDomain={{ y: 9 }} + name="chart12" + themeColor={isChecked ? ChartThemeColor.skeleton : ChartThemeColor.blue} + width={800} + > + + + + + + + + +
+ + ); +} +``` + +## Documentation +### Tips +- It's best for skeletons not to include interactions such as tooltips, cursors, interactive legends, etc. +- See Victory's [FAQ](https://formidable.com/open-source/victory/docs/faq) +- For single data points or zero values, you may want to set the `domain` prop +- `ChartLegend` may be used as a standalone component, instead of using `legendData` +- The `theme` and `themeColor` props should be applied at the most top level component +- Use `ChartGroup` to apply theme color scales and other properties to multiple components + +### Note +Currently, the generated documentation below is not able to resolve type definitions from Victory imports. For the +components used in the examples above, Victory pass-thru props are also documented here: + +- For `Chart` props, see [VictoryChart](https://formidable.com/open-source/victory/docs/victory-chart) +- For `ChartArea` props, see [VictoryArea](https://formidable.com/open-source/victory/docs/victory-area) +- For `ChartAxis` props, see [VictoryAxis](https://formidable.com/open-source/victory/docs/victory-axis) +- For `ChartBar` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar) +- For `ChartBoxPlot` props, see [VictoryBoxPlot](https://formidable.com/open-source/victory/docs/victory-box-plot) +- For `ChartBullet` props, see [VictoryBar](https://formidable.com/open-source/victory/docs/victory-bar) +- For `ChartDonut` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartDonutThreshold` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartDonutUtilization` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartLine` props, see [Victoryline](https://formidable.com/open-source/victory/docs/victory-line) +- For `ChartGroup` props, see [VictoryGroup](https://formidable.com/open-source/victory/docs/victory-group) +- For `ChartPie` props, see [VictoryPie](https://formidable.com/open-source/victory/docs/victory-pie) +- For `ChartScatter` props, see [VictoryScatter](https://formidable.com/open-source/victory/docs/victory-scatter) +- For `ChartStack` props, see [VictoryStack](https://formidable.com/open-source/victory/docs/victory-stack) +- For `ChartThreshold` props, see [VictoryLine](https://formidable.com/open-source/victory/docs/victory-line) +- For `ChartVoronoiContainer` props, see [VictoryVoronoiContainer](https://formidable.com/open-source/victory/docs/victory-voronoi-container) diff --git a/packages/react-charts/src/components/Sparkline/examples/sparkline.css b/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.css similarity index 100% rename from packages/react-charts/src/components/Sparkline/examples/sparkline.css rename to packages/react-charts/src/victory/components/Sparkline/examples/sparkline.css diff --git a/packages/react-charts/src/components/Sparkline/examples/sparkline.md b/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md similarity index 97% rename from packages/react-charts/src/components/Sparkline/examples/sparkline.md rename to packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md index ca9bc2b6f9c..468489ce5a6 100644 --- a/packages/react-charts/src/components/Sparkline/examples/sparkline.md +++ b/packages/react-charts/src/victory/components/Sparkline/examples/sparkline.md @@ -11,7 +11,7 @@ propComponents: [ hideDarkMode: true --- -import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory'; import './sparkline.css'; ## Introduction @@ -23,7 +23,7 @@ PatternFly React charts are based on the [Victory](https://formidable.com/open-s ### Basic ```js import React from 'react'; -import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
@@ -59,7 +59,7 @@ This demonstrates an alternate way of applying tooltips using CSS overflow ```js import React from 'react'; -import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts'; +import { ChartArea, ChartContainer, ChartGroup, ChartLabel, ChartThemeColor, ChartVoronoiContainer } from '@patternfly/react-charts/victory';
diff --git a/packages/react-charts/src/components/index.ts b/packages/react-charts/src/victory/components/index.ts similarity index 100% rename from packages/react-charts/src/components/index.ts rename to packages/react-charts/src/victory/components/index.ts diff --git a/packages/react-charts/src/index.ts b/packages/react-charts/src/victory/index.ts similarity index 100% rename from packages/react-charts/src/index.ts rename to packages/react-charts/src/victory/index.ts diff --git a/packages/react-charts/src/typings/hoist.d.ts b/packages/react-charts/src/victory/typings/hoist.d.ts similarity index 100% rename from packages/react-charts/src/typings/hoist.d.ts rename to packages/react-charts/src/victory/typings/hoist.d.ts diff --git a/packages/react-charts/src/typings/victory.d.ts b/packages/react-charts/src/victory/typings/victory.d.ts similarity index 100% rename from packages/react-charts/src/typings/victory.d.ts rename to packages/react-charts/src/victory/typings/victory.d.ts diff --git a/packages/react-charts/subpaths.config.json b/packages/react-charts/subpaths.config.json new file mode 100644 index 00000000000..5c5e5d1baff --- /dev/null +++ b/packages/react-charts/subpaths.config.json @@ -0,0 +1,4 @@ +{ + "packageName": "@patternfly/react-charts", + "paths": ["victory"] +} diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md index 55c62e41830..1f4a85faaa4 100644 --- a/packages/react-code-editor/CHANGELOG.md +++ b/packages/react-code-editor/CHANGELOG.md @@ -3,6 +3,1232 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [6.0.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.20...@patternfly/react-code-editor@6.0.0-prerelease.21) (2024-10-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.19...@patternfly/react-code-editor@6.0.0-prerelease.20) (2024-09-30) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.18...@patternfly/react-code-editor@6.0.0-prerelease.19) (2024-09-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.17...@patternfly/react-code-editor@6.0.0-prerelease.18) (2024-09-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.16...@patternfly/react-code-editor@6.0.0-prerelease.17) (2024-09-24) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.15...@patternfly/react-code-editor@6.0.0-prerelease.16) (2024-09-24) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.14...@patternfly/react-code-editor@6.0.0-prerelease.15) (2024-09-23) + +### Bug Fixes + +- **table:** update v5 to v6 for docs, description list, draggable, Th ([#10968](https://github.com/patternfly/patternfly-react/issues/10968)) ([db72b52](https://github.com/patternfly/patternfly-react/commit/db72b5287c18d023c094be247a46f9352d50fd7b)) + +# [6.0.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.13...@patternfly/react-code-editor@6.0.0-prerelease.14) (2024-09-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.12...@patternfly/react-code-editor@6.0.0-prerelease.13) (2024-09-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.11...@patternfly/react-code-editor@6.0.0-prerelease.12) (2024-09-18) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.10...@patternfly/react-code-editor@6.0.0-prerelease.11) (2024-09-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.9...@patternfly/react-code-editor@6.0.0-prerelease.10) (2024-09-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.8...@patternfly/react-code-editor@6.0.0-prerelease.9) (2024-09-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.7...@patternfly/react-code-editor@6.0.0-prerelease.8) (2024-09-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.6...@patternfly/react-code-editor@6.0.0-prerelease.7) (2024-09-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.5...@patternfly/react-code-editor@6.0.0-prerelease.6) (2024-09-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.4...@patternfly/react-code-editor@6.0.0-prerelease.5) (2024-09-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.3...@patternfly/react-code-editor@6.0.0-prerelease.4) (2024-09-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.2...@patternfly/react-code-editor@6.0.0-prerelease.3) (2024-09-10) + +### Bug Fixes + +- **deps:** update dependency tslib to ^2.7.0 ([#10949](https://github.com/patternfly/patternfly-react/issues/10949)) ([024b3cc](https://github.com/patternfly/patternfly-react/commit/024b3cc4b1afd4ba9f2dc774c0842712d4fbab1a)) + +# [6.0.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-prerelease.1...@patternfly/react-code-editor@6.0.0-prerelease.2) (2024-09-09) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.106...@patternfly/react-code-editor@6.0.0-prerelease.1) (2024-09-07) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.106](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.105...@patternfly/react-code-editor@6.0.0-alpha.106) (2024-08-30) + +### Bug Fixes + +- **Button:** rendered position modifier only when children are passed ([#10864](https://github.com/patternfly/patternfly-react/issues/10864)) ([3ed73d3](https://github.com/patternfly/patternfly-react/commit/3ed73d3dc78ba229b184bc4e91cc11f45ccc94c3)) + +# [6.0.0-alpha.105](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.104...@patternfly/react-code-editor@6.0.0-alpha.105) (2024-08-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.104](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.103...@patternfly/react-code-editor@6.0.0-alpha.104) (2024-08-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.103](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.102...@patternfly/react-code-editor@6.0.0-alpha.103) (2024-08-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.102](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.101...@patternfly/react-code-editor@6.0.0-alpha.102) (2024-08-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.101](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.100...@patternfly/react-code-editor@6.0.0-alpha.101) (2024-08-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.100](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.99...@patternfly/react-code-editor@6.0.0-alpha.100) (2024-08-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.99](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.98...@patternfly/react-code-editor@6.0.0-alpha.99) (2024-08-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.98](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.97...@patternfly/react-code-editor@6.0.0-alpha.98) (2024-08-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.97](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.96...@patternfly/react-code-editor@6.0.0-alpha.97) (2024-08-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.96](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.95...@patternfly/react-code-editor@6.0.0-alpha.96) (2024-08-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.95](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.94...@patternfly/react-code-editor@6.0.0-alpha.95) (2024-08-01) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.94](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.93...@patternfly/react-code-editor@6.0.0-alpha.94) (2024-07-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.93](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.92...@patternfly/react-code-editor@6.0.0-alpha.93) (2024-07-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.92](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.91...@patternfly/react-code-editor@6.0.0-alpha.92) (2024-07-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.91](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.90...@patternfly/react-code-editor@6.0.0-alpha.91) (2024-07-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.90](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.89...@patternfly/react-code-editor@6.0.0-alpha.90) (2024-07-23) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.89](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.88...@patternfly/react-code-editor@6.0.0-alpha.89) (2024-07-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.88](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.87...@patternfly/react-code-editor@6.0.0-alpha.88) (2024-07-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.87](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.86...@patternfly/react-code-editor@6.0.0-alpha.87) (2024-07-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.86](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.85...@patternfly/react-code-editor@6.0.0-alpha.86) (2024-07-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.85](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.84...@patternfly/react-code-editor@6.0.0-alpha.85) (2024-07-18) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.84](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.83...@patternfly/react-code-editor@6.0.0-alpha.84) (2024-07-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.83](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.82...@patternfly/react-code-editor@6.0.0-alpha.83) (2024-07-15) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.82](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.81...@patternfly/react-code-editor@6.0.0-alpha.82) (2024-07-15) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.81](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.80...@patternfly/react-code-editor@6.0.0-alpha.81) (2024-07-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.80](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.79...@patternfly/react-code-editor@6.0.0-alpha.80) (2024-07-09) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.79](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.78...@patternfly/react-code-editor@6.0.0-alpha.79) (2024-07-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.78](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.77...@patternfly/react-code-editor@6.0.0-alpha.78) (2024-07-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.77](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.76...@patternfly/react-code-editor@6.0.0-alpha.77) (2024-07-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.76](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.75...@patternfly/react-code-editor@6.0.0-alpha.76) (2024-07-02) + +### Features + +- **Button:** add text wrapper, update icon usage ([#10663](https://github.com/patternfly/patternfly-react/issues/10663)) ([eca5878](https://github.com/patternfly/patternfly-react/commit/eca58789d1f07753657372a46a20c147f984b998)) + +# [6.0.0-alpha.75](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.74...@patternfly/react-code-editor@6.0.0-alpha.75) (2024-07-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.74](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.73...@patternfly/react-code-editor@6.0.0-alpha.74) (2024-07-01) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.73](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.72...@patternfly/react-code-editor@6.0.0-alpha.73) (2024-06-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.72](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.71...@patternfly/react-code-editor@6.0.0-alpha.72) (2024-06-25) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.71](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.70...@patternfly/react-code-editor@6.0.0-alpha.71) (2024-06-25) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.70](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.69...@patternfly/react-code-editor@6.0.0-alpha.70) (2024-06-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.69](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.68...@patternfly/react-code-editor@6.0.0-alpha.69) (2024-06-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.68](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.67...@patternfly/react-code-editor@6.0.0-alpha.68) (2024-06-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.67](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.66...@patternfly/react-code-editor@6.0.0-alpha.67) (2024-06-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.66](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.65...@patternfly/react-code-editor@6.0.0-alpha.66) (2024-06-06) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.65](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.64...@patternfly/react-code-editor@6.0.0-alpha.65) (2024-06-06) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.64](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.63...@patternfly/react-code-editor@6.0.0-alpha.64) (2024-06-05) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.63](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.62...@patternfly/react-code-editor@6.0.0-alpha.63) (2024-06-05) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.62](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.61...@patternfly/react-code-editor@6.0.0-alpha.62) (2024-06-04) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.61](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.60...@patternfly/react-code-editor@6.0.0-alpha.61) (2024-05-31) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 6.0.0-alpha.60 (2024-05-23) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.59](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.58...@patternfly/react-code-editor@6.0.0-alpha.59) (2024-05-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.58](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.57...@patternfly/react-code-editor@6.0.0-alpha.58) (2024-05-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.57](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.56...@patternfly/react-code-editor@6.0.0-alpha.57) (2024-05-15) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.56](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.55...@patternfly/react-code-editor@6.0.0-alpha.56) (2024-05-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.55](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.54...@patternfly/react-code-editor@6.0.0-alpha.55) (2024-05-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.54](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.53...@patternfly/react-code-editor@6.0.0-alpha.54) (2024-04-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 6.0.0-alpha.53 (2024-04-26) + +### Bug Fixes + +- **helpers:** Updated OUIA ID prefix to PF6 ([#10292](https://github.com/patternfly/patternfly-react/issues/10292)) ([1c7af7a](https://github.com/patternfly/patternfly-react/commit/1c7af7ab9f352b9ad02caabb1deef08cf69e0950)) + +# [6.0.0-alpha.52](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.51...@patternfly/react-code-editor@6.0.0-alpha.52) (2024-04-24) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.51](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.50...@patternfly/react-code-editor@6.0.0-alpha.51) (2024-04-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.26...@patternfly/react-code-editor@5.3.0-prerelease.27) (2024-04-09) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.25...@patternfly/react-code-editor@5.3.0-prerelease.26) (2024-04-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.24...@patternfly/react-code-editor@5.3.0-prerelease.25) (2024-04-01) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.3.0-prerelease.24 (2024-03-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.22...@patternfly/react-code-editor@5.3.0-prerelease.23) (2024-03-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.21...@patternfly/react-code-editor@5.3.0-prerelease.22) (2024-03-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.20...@patternfly/react-code-editor@5.3.0-prerelease.21) (2024-03-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.19...@patternfly/react-code-editor@5.3.0-prerelease.20) (2024-03-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.18...@patternfly/react-code-editor@5.3.0-prerelease.19) (2024-03-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.17...@patternfly/react-code-editor@5.3.0-prerelease.18) (2024-03-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.3.0-prerelease.17 (2024-03-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.15...@patternfly/react-code-editor@5.3.0-prerelease.16) (2024-03-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.14...@patternfly/react-code-editor@5.3.0-prerelease.15) (2024-03-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.13...@patternfly/react-code-editor@5.3.0-prerelease.14) (2024-03-25) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.12...@patternfly/react-code-editor@5.3.0-prerelease.13) (2024-03-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.3.0-prerelease.12 (2024-03-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.10...@patternfly/react-code-editor@5.3.0-prerelease.11) (2024-03-15) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.9...@patternfly/react-code-editor@5.3.0-prerelease.10) (2024-03-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.3.0-prerelease.9 (2024-03-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.7...@patternfly/react-code-editor@5.3.0-prerelease.8) (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.6...@patternfly/react-code-editor@5.3.0-prerelease.7) (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.5...@patternfly/react-code-editor@5.3.0-prerelease.6) (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.4...@patternfly/react-code-editor@5.3.0-prerelease.5) (2024-02-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.3...@patternfly/react-code-editor@5.3.0-prerelease.4) (2024-02-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.2...@patternfly/react-code-editor@5.3.0-prerelease.3) (2024-02-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.1...@patternfly/react-code-editor@5.3.0-prerelease.2) (2024-02-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.3.0-prerelease.1 (2024-02-15) + +### Features + +- **CodeEditor:** pass additional props to monaco-editor, update readme ([#10080](https://github.com/patternfly/patternfly-react/issues/10080)) ([8c43ef7](https://github.com/patternfly/patternfly-react/commit/8c43ef7bfc044396a0bf31985b2ba3e4b4de91ef)) + +# 5.3.0-prerelease.0 (2024-02-02) + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0-prerelease.51 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0-prerelease.50 (2024-01-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.49](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.48...@patternfly/react-code-editor@5.2.0-prerelease.49) (2024-01-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0-prerelease.48 (2024-01-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.47](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.46...@patternfly/react-code-editor@5.2.0-prerelease.47) (2024-01-15) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.46](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.45...@patternfly/react-code-editor@5.2.0-prerelease.46) (2024-01-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.44...@patternfly/react-code-editor@5.2.0-prerelease.45) (2024-01-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.43...@patternfly/react-code-editor@5.2.0-prerelease.44) (2024-01-09) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.43](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.42...@patternfly/react-code-editor@5.2.0-prerelease.43) (2024-01-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.42](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.41...@patternfly/react-code-editor@5.2.0-prerelease.42) (2024-01-05) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.41](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.40...@patternfly/react-code-editor@5.2.0-prerelease.41) (2024-01-05) + +### Features + +- **CodeEditor:** use new monaco package ([#9842](https://github.com/patternfly/patternfly-react/issues/9842)) ([54dd134](https://github.com/patternfly/patternfly-react/commit/54dd134d6c67c4fc1d7630fd1e7c718f66061342)) + +# [5.2.0-prerelease.40](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.39...@patternfly/react-code-editor@5.2.0-prerelease.40) (2024-01-04) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.39](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.38...@patternfly/react-code-editor@5.2.0-prerelease.39) (2024-01-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.38](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.37...@patternfly/react-code-editor@5.2.0-prerelease.38) (2024-01-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.37](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.36...@patternfly/react-code-editor@5.2.0-prerelease.37) (2023-12-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.35...@patternfly/react-code-editor@5.2.0-prerelease.36) (2023-12-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.34...@patternfly/react-code-editor@5.2.0-prerelease.35) (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.33...@patternfly/react-code-editor@5.2.0-prerelease.34) (2023-12-07) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.32...@patternfly/react-code-editor@5.2.0-prerelease.33) (2023-12-06) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.31...@patternfly/react-code-editor@5.2.0-prerelease.32) (2023-11-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.30...@patternfly/react-code-editor@5.2.0-prerelease.31) (2023-11-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.29...@patternfly/react-code-editor@5.2.0-prerelease.30) (2023-11-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.28...@patternfly/react-code-editor@5.2.0-prerelease.29) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.27...@patternfly/react-code-editor@5.2.0-prerelease.28) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.26...@patternfly/react-code-editor@5.2.0-prerelease.27) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.25...@patternfly/react-code-editor@5.2.0-prerelease.26) (2023-11-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.24...@patternfly/react-code-editor@5.2.0-prerelease.25) (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.23...@patternfly/react-code-editor@5.2.0-prerelease.24) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.22...@patternfly/react-code-editor@5.2.0-prerelease.23) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.21...@patternfly/react-code-editor@5.2.0-prerelease.22) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.20...@patternfly/react-code-editor@5.2.0-prerelease.21) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.19...@patternfly/react-code-editor@5.2.0-prerelease.20) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.50](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.49...@patternfly/react-code-editor@6.0.0-alpha.50) (2024-04-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.49](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.48...@patternfly/react-code-editor@6.0.0-alpha.49) (2024-03-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.48](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.47...@patternfly/react-code-editor@6.0.0-alpha.48) (2024-03-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.47](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.46...@patternfly/react-code-editor@6.0.0-alpha.47) (2024-03-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.46](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.45...@patternfly/react-code-editor@6.0.0-alpha.46) (2024-03-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.44...@patternfly/react-code-editor@6.0.0-alpha.45) (2024-03-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.43...@patternfly/react-code-editor@6.0.0-alpha.44) (2024-03-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.43](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.42...@patternfly/react-code-editor@6.0.0-alpha.43) (2024-03-18) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.42](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.41...@patternfly/react-code-editor@6.0.0-alpha.42) (2024-03-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.41](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.40...@patternfly/react-code-editor@6.0.0-alpha.41) (2024-03-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.40](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.39...@patternfly/react-code-editor@6.0.0-alpha.40) (2024-03-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.39](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.38...@patternfly/react-code-editor@6.0.0-alpha.39) (2024-03-01) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.38](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.37...@patternfly/react-code-editor@6.0.0-alpha.38) (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 6.0.0-alpha.37 (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.35...@patternfly/react-code-editor@6.0.0-alpha.36) (2024-02-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.34...@patternfly/react-code-editor@6.0.0-alpha.35) (2024-02-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.33...@patternfly/react-code-editor@6.0.0-alpha.34) (2024-02-19) + +### Features + +- **Chip:** use Label internally, deprecate Chip ([#10049](https://github.com/patternfly/patternfly-react/issues/10049)) ([5cdb725](https://github.com/patternfly/patternfly-react/commit/5cdb72536f8dd291e42be09bc6454ac591adc606)) + +# [6.0.0-alpha.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.32...@patternfly/react-code-editor@6.0.0-alpha.33) (2024-02-16) + +### Features + +- **CodeEditor,Divider:** consume penta & update core version ([#10081](https://github.com/patternfly/patternfly-react/issues/10081)) ([addda04](https://github.com/patternfly/patternfly-react/commit/addda044d7f6d91f3511c7a769b2707140df86d4)) + +# [6.0.0-alpha.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.31...@patternfly/react-code-editor@6.0.0-alpha.32) (2024-02-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.30...@patternfly/react-code-editor@6.0.0-alpha.31) (2024-02-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.29...@patternfly/react-code-editor@6.0.0-alpha.30) (2024-02-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.28...@patternfly/react-code-editor@6.0.0-alpha.29) (2024-02-09) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.27...@patternfly/react-code-editor@6.0.0-alpha.28) (2024-02-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.26...@patternfly/react-code-editor@6.0.0-alpha.27) (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.25...@patternfly/react-code-editor@6.0.0-alpha.26) (2024-02-01) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.24...@patternfly/react-code-editor@6.0.0-alpha.25) (2024-02-01) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.23...@patternfly/react-code-editor@6.0.0-alpha.24) (2024-01-31) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.22...@patternfly/react-code-editor@6.0.0-alpha.23) (2024-01-31) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.21...@patternfly/react-code-editor@6.0.0-alpha.22) (2024-01-31) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.20...@patternfly/react-code-editor@6.0.0-alpha.21) (2024-01-31) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.19...@patternfly/react-code-editor@6.0.0-alpha.20) (2024-01-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.18...@patternfly/react-code-editor@6.0.0-alpha.19) (2024-01-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.17...@patternfly/react-code-editor@6.0.0-alpha.18) (2024-01-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 6.0.0-alpha.17 (2024-01-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.15...@patternfly/react-code-editor@6.0.0-alpha.16) (2024-01-18) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.14...@patternfly/react-code-editor@6.0.0-alpha.15) (2024-01-18) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.13...@patternfly/react-code-editor@6.0.0-alpha.14) (2024-01-17) + +### Features + +- **EmptyState:** update EmptyState with updates for penta ([#9947](https://github.com/patternfly/patternfly-react/issues/9947)) ([07cbb82](https://github.com/patternfly/patternfly-react/commit/07cbb8270627f9ade299b90eaf5dd4fd5fa6fe95)) + +# [6.0.0-alpha.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.12...@patternfly/react-code-editor@6.0.0-alpha.13) (2024-01-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.11...@patternfly/react-code-editor@6.0.0-alpha.12) (2024-01-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.10...@patternfly/react-code-editor@6.0.0-alpha.11) (2024-01-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.9...@patternfly/react-code-editor@6.0.0-alpha.10) (2024-01-12) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.8...@patternfly/react-code-editor@6.0.0-alpha.9) (2024-01-04) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.7...@patternfly/react-code-editor@6.0.0-alpha.8) (2024-01-04) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.6...@patternfly/react-code-editor@6.0.0-alpha.7) (2023-12-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.5...@patternfly/react-code-editor@6.0.0-alpha.6) (2023-12-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.4...@patternfly/react-code-editor@6.0.0-alpha.5) (2023-12-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.3...@patternfly/react-code-editor@6.0.0-alpha.4) (2023-12-06) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.0.0-alpha.2...@patternfly/react-code-editor@6.0.0-alpha.3) (2023-12-04) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [6.0.0-alpha.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.19...@patternfly/react-code-editor@6.0.0-alpha.2) (2023-11-16) + +### Reverts + +- Revert "Merge remote-tracking branch 'upstream/main' into v6" (#9791) ([b7e8065](https://github.com/patternfly/patternfly-react/commit/b7e80650d3e4cad7a657f6e5a3177485ca4f8c26)), closes [#9791](https://github.com/patternfly/patternfly-react/issues/9791) + +# [6.0.0-alpha.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.13...@patternfly/react-code-editor@6.0.0-alpha.1) (2023-09-29) + +### Bug Fixes + +- Release alphas from v6 and rebase from main ([#9692](https://github.com/patternfly/patternfly-react/issues/9692)) ([bb022ff](https://github.com/patternfly/patternfly-react/commit/bb022ffc65da8e8c5b5c984412f936cea9424676)), closes [#9651](https://github.com/patternfly/patternfly-react/issues/9651) [#9627](https://github.com/patternfly/patternfly-react/issues/9627) [#9555](https://github.com/patternfly/patternfly-react/issues/9555) [#9543](https://github.com/patternfly/patternfly-react/issues/9543) [#9578](https://github.com/patternfly/patternfly-react/issues/9578) [#9519](https://github.com/patternfly/patternfly-react/issues/9519) [#9603](https://github.com/patternfly/patternfly-react/issues/9603) [#9655](https://github.com/patternfly/patternfly-react/issues/9655) [#9614](https://github.com/patternfly/patternfly-react/issues/9614) [#9606](https://github.com/patternfly/patternfly-react/issues/9606) [#9628](https://github.com/patternfly/patternfly-react/issues/9628) [#9635](https://github.com/patternfly/patternfly-react/issues/9635) [#9649](https://github.com/patternfly/patternfly-react/issues/9649) [#9642](https://github.com/patternfly/patternfly-react/issues/9642) [#9633](https://github.com/patternfly/patternfly-react/issues/9633) [#9637](https://github.com/patternfly/patternfly-react/issues/9637) [#9584](https://github.com/patternfly/patternfly-react/issues/9584) [#9284](https://github.com/patternfly/patternfly-react/issues/9284) + +## [5.1.1-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.21...@patternfly/react-code-editor@5.1.1-prerelease.22) (2023-09-25) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.20...@patternfly/react-code-editor@5.1.1-prerelease.21) (2023-09-25) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.19...@patternfly/react-code-editor@5.1.1-prerelease.20) (2023-09-22) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.18...@patternfly/react-code-editor@5.1.1-prerelease.19) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.17...@patternfly/react-code-editor@5.1.1-prerelease.18) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.16...@patternfly/react-code-editor@5.1.1-prerelease.17) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.15...@patternfly/react-code-editor@5.1.1-prerelease.16) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.14...@patternfly/react-code-editor@5.1.1-prerelease.15) (2023-09-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +## [5.1.1-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.1.1-prerelease.13...@patternfly/react-code-editor@5.1.1-prerelease.14) (2023-09-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.30...@patternfly/react-code-editor@5.2.0-prerelease.31) (2023-11-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.29...@patternfly/react-code-editor@5.2.0-prerelease.30) (2023-11-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.28...@patternfly/react-code-editor@5.2.0-prerelease.29) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.27...@patternfly/react-code-editor@5.2.0-prerelease.28) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.26...@patternfly/react-code-editor@5.2.0-prerelease.27) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.25...@patternfly/react-code-editor@5.2.0-prerelease.26) (2023-11-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.24...@patternfly/react-code-editor@5.2.0-prerelease.25) (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.23...@patternfly/react-code-editor@5.2.0-prerelease.24) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.22...@patternfly/react-code-editor@5.2.0-prerelease.23) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.21...@patternfly/react-code-editor@5.2.0-prerelease.22) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.20...@patternfly/react-code-editor@5.2.0-prerelease.21) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.19...@patternfly/react-code-editor@5.2.0-prerelease.20) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.35...@patternfly/react-code-editor@5.2.0-prerelease.36) (2023-12-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.34...@patternfly/react-code-editor@5.2.0-prerelease.35) (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.33...@patternfly/react-code-editor@5.2.0-prerelease.34) (2023-12-07) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.32...@patternfly/react-code-editor@5.2.0-prerelease.33) (2023-12-06) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.31...@patternfly/react-code-editor@5.2.0-prerelease.32) (2023-11-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.30...@patternfly/react-code-editor@5.2.0-prerelease.31) (2023-11-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.29...@patternfly/react-code-editor@5.2.0-prerelease.30) (2023-11-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.28...@patternfly/react-code-editor@5.2.0-prerelease.29) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.27...@patternfly/react-code-editor@5.2.0-prerelease.28) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.26...@patternfly/react-code-editor@5.2.0-prerelease.27) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.25...@patternfly/react-code-editor@5.2.0-prerelease.26) (2023-11-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.24...@patternfly/react-code-editor@5.2.0-prerelease.25) (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.23...@patternfly/react-code-editor@5.2.0-prerelease.24) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.22...@patternfly/react-code-editor@5.2.0-prerelease.23) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.21...@patternfly/react-code-editor@5.2.0-prerelease.22) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.20...@patternfly/react-code-editor@5.2.0-prerelease.21) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.19...@patternfly/react-code-editor@5.2.0-prerelease.20) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.49](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.48...@patternfly/react-code-editor@5.2.0-prerelease.49) (2024-01-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0-prerelease.48 (2024-01-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.47](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.46...@patternfly/react-code-editor@5.2.0-prerelease.47) (2024-01-15) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.46](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.45...@patternfly/react-code-editor@5.2.0-prerelease.46) (2024-01-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.44...@patternfly/react-code-editor@5.2.0-prerelease.45) (2024-01-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.43...@patternfly/react-code-editor@5.2.0-prerelease.44) (2024-01-09) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.43](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.42...@patternfly/react-code-editor@5.2.0-prerelease.43) (2024-01-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.42](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.41...@patternfly/react-code-editor@5.2.0-prerelease.42) (2024-01-05) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.41](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.40...@patternfly/react-code-editor@5.2.0-prerelease.41) (2024-01-05) + +### Features + +- **CodeEditor:** use new monaco package ([#9842](https://github.com/patternfly/patternfly-react/issues/9842)) ([54dd134](https://github.com/patternfly/patternfly-react/commit/54dd134d6c67c4fc1d7630fd1e7c718f66061342)) + +# [5.2.0-prerelease.40](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.39...@patternfly/react-code-editor@5.2.0-prerelease.40) (2024-01-04) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.39](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.38...@patternfly/react-code-editor@5.2.0-prerelease.39) (2024-01-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.38](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.37...@patternfly/react-code-editor@5.2.0-prerelease.38) (2024-01-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.37](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.36...@patternfly/react-code-editor@5.2.0-prerelease.37) (2023-12-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.35...@patternfly/react-code-editor@5.2.0-prerelease.36) (2023-12-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.34...@patternfly/react-code-editor@5.2.0-prerelease.35) (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.33...@patternfly/react-code-editor@5.2.0-prerelease.34) (2023-12-07) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.32...@patternfly/react-code-editor@5.2.0-prerelease.33) (2023-12-06) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.31...@patternfly/react-code-editor@5.2.0-prerelease.32) (2023-11-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.30...@patternfly/react-code-editor@5.2.0-prerelease.31) (2023-11-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.29...@patternfly/react-code-editor@5.2.0-prerelease.30) (2023-11-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.28...@patternfly/react-code-editor@5.2.0-prerelease.29) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.27...@patternfly/react-code-editor@5.2.0-prerelease.28) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.26...@patternfly/react-code-editor@5.2.0-prerelease.27) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.25...@patternfly/react-code-editor@5.2.0-prerelease.26) (2023-11-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.24...@patternfly/react-code-editor@5.2.0-prerelease.25) (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.23...@patternfly/react-code-editor@5.2.0-prerelease.24) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.22...@patternfly/react-code-editor@5.2.0-prerelease.23) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.21...@patternfly/react-code-editor@5.2.0-prerelease.22) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.20...@patternfly/react-code-editor@5.2.0-prerelease.21) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.19...@patternfly/react-code-editor@5.2.0-prerelease.20) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.7...@patternfly/react-code-editor@5.3.0-prerelease.8) (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.6...@patternfly/react-code-editor@5.3.0-prerelease.7) (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.5...@patternfly/react-code-editor@5.3.0-prerelease.6) (2024-02-28) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.4...@patternfly/react-code-editor@5.3.0-prerelease.5) (2024-02-27) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.3...@patternfly/react-code-editor@5.3.0-prerelease.4) (2024-02-26) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.2...@patternfly/react-code-editor@5.3.0-prerelease.3) (2024-02-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.3.0-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.3.0-prerelease.1...@patternfly/react-code-editor@5.3.0-prerelease.2) (2024-02-19) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.3.0-prerelease.1 (2024-02-15) + +### Features + +- **CodeEditor:** pass additional props to monaco-editor, update readme ([#10080](https://github.com/patternfly/patternfly-react/issues/10080)) ([8c43ef7](https://github.com/patternfly/patternfly-react/commit/8c43ef7bfc044396a0bf31985b2ba3e4b4de91ef)) + +# 5.3.0-prerelease.0 (2024-02-02) + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0-prerelease.51 (2024-02-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0-prerelease.50 (2024-01-29) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.49](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.48...@patternfly/react-code-editor@5.2.0-prerelease.49) (2024-01-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# 5.2.0-prerelease.48 (2024-01-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.47](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.46...@patternfly/react-code-editor@5.2.0-prerelease.47) (2024-01-15) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.46](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.45...@patternfly/react-code-editor@5.2.0-prerelease.46) (2024-01-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.45](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.44...@patternfly/react-code-editor@5.2.0-prerelease.45) (2024-01-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.44](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.43...@patternfly/react-code-editor@5.2.0-prerelease.44) (2024-01-09) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.43](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.42...@patternfly/react-code-editor@5.2.0-prerelease.43) (2024-01-08) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.42](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.41...@patternfly/react-code-editor@5.2.0-prerelease.42) (2024-01-05) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.41](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.40...@patternfly/react-code-editor@5.2.0-prerelease.41) (2024-01-05) + +### Features + +- **CodeEditor:** use new monaco package ([#9842](https://github.com/patternfly/patternfly-react/issues/9842)) ([54dd134](https://github.com/patternfly/patternfly-react/commit/54dd134d6c67c4fc1d7630fd1e7c718f66061342)) + +# [5.2.0-prerelease.40](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.39...@patternfly/react-code-editor@5.2.0-prerelease.40) (2024-01-04) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.39](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.38...@patternfly/react-code-editor@5.2.0-prerelease.39) (2024-01-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.38](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.37...@patternfly/react-code-editor@5.2.0-prerelease.38) (2024-01-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.37](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.36...@patternfly/react-code-editor@5.2.0-prerelease.37) (2023-12-20) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.36](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.35...@patternfly/react-code-editor@5.2.0-prerelease.36) (2023-12-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.34...@patternfly/react-code-editor@5.2.0-prerelease.35) (2023-12-11) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.33...@patternfly/react-code-editor@5.2.0-prerelease.34) (2023-12-07) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.33](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.32...@patternfly/react-code-editor@5.2.0-prerelease.33) (2023-12-06) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.31...@patternfly/react-code-editor@5.2.0-prerelease.32) (2023-11-21) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.30...@patternfly/react-code-editor@5.2.0-prerelease.31) (2023-11-17) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.29...@patternfly/react-code-editor@5.2.0-prerelease.30) (2023-11-16) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.28...@patternfly/react-code-editor@5.2.0-prerelease.29) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.27...@patternfly/react-code-editor@5.2.0-prerelease.28) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.26...@patternfly/react-code-editor@5.2.0-prerelease.27) (2023-11-14) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.25...@patternfly/react-code-editor@5.2.0-prerelease.26) (2023-11-13) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.24...@patternfly/react-code-editor@5.2.0-prerelease.25) (2023-11-10) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.23...@patternfly/react-code-editor@5.2.0-prerelease.24) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.22...@patternfly/react-code-editor@5.2.0-prerelease.23) (2023-11-03) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.21...@patternfly/react-code-editor@5.2.0-prerelease.22) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.20...@patternfly/react-code-editor@5.2.0-prerelease.21) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + +# [5.2.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.19...@patternfly/react-code-editor@5.2.0-prerelease.20) (2023-11-02) + +**Note:** Version bump only for package @patternfly/react-code-editor + # [5.2.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@5.2.0-prerelease.18...@patternfly/react-code-editor@5.2.0-prerelease.19) (2023-10-30) **Note:** Version bump only for package @patternfly/react-code-editor diff --git a/packages/react-code-editor/README.md b/packages/react-code-editor/README.md index 24c18f4ec32..b488240a459 100644 --- a/packages/react-code-editor/README.md +++ b/packages/react-code-editor/README.md @@ -1,32 +1,41 @@ # @patternfly/react-code-editor -This package provides a PatternFly wrapper for the Monaco code editor +This package provides a PatternFly wrapper for the Monaco code editor, using the `@monaco-editor/react` package. -### Prerequisite - -#### Node Environment +### Installing -This project currently supports Node [Active LTS](https://github.com/nodejs/Release#release-schedule) releases. Please stay current with Node Active LTS when developing patternfly-react. +```sh +yarn add @patternfly/react-code-editor +``` -For example, to develop with Node 18, use the following: +or +```sh +npm install @patternfly/react-code-editor ``` -nvm install 18 -nvm use 18 + +[!NOTE] For TypeScript type definitions, this package uses the `monaco-editor` package as a peer dependency. So, if you need types and don't already have the `monaco-editor` package installed, you will need to do so: + +```sh +yarn add --dev monaco-editor ``` -This project also requires a Yarn version of >=1.6.0. The latest version can be installed [here](https://yarnpkg.com/). +or -### Installing +```sh +npm install --dev monaco-editor +``` + +[!NOTE] For TypeScript type definitions, this package uses the `monaco-editor` package as a peer dependency. So, if you need types and don't already have the `monaco-editor package` installed, you will need to do so: ``` -yarn add @patternfly/react-code-editor +yarn add --dev monaco-editor ``` or ``` -npm install @patternfly/react-code-editor --save +npm install --dev monaco-editor ``` ### Usage @@ -43,26 +52,18 @@ import '@patternfly/react-core/dist/styles/base.css'; import { CodeEditor } from '@patternfly/react-code-editor'; ``` -Install peer deps -```json -"monaco-editor": "^0.21.3", -"monaco-editor-webpack-plugin": "^2.1.0", -"react": "^17 || ^18", -"react-dom": "^17 || ^18", -"react-monaco-editor": "^0.51.0" -``` - -To properly install the library `monaco-editor-webpack-plugin` be sure to follow the [plugin instructions](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin) - #### With create-react-app Projects + If you created your project with `create-react-app` you'll have some extra work to do, or you wont have syntax highlighting. Using the webpack plugin requires updating your webpack config, which `create-react-app` abstracts away. You can `npm eject` your project, but you may not want to do that. To keep your app set up in the `create-react-app` style but to get access to your webpack config you can use `react-app-rewired`. First, install `react-app-rewired` as a development dependency: + ```sh $ npm install -D react-app-rewired ``` Next, replace all of the `react-script` references in your `package.json` `scripts` section with `react-app-required`: + ```json "scripts": { "start": "react-app-rewired start", @@ -72,32 +73,33 @@ Next, replace all of the `react-script` references in your `package.json` `scrip } ``` -Next, create a `config-overrides.js` file at the root of your project and add the following: +You can now start your app with `npm start` and syntax highlighting should work. -```javascript -const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); +#### To use monaco-editor as an npm package and avoid using CDN + +The `@monaco-editor/react` package is built on the `monaco-editor` package, which will fetch some additional files using CDN by default. To avoid this, include `monaco-editor` as a dependency and insert the following into your code: -module.exports = function override(config, env) { - config.plugins.push(new MonacoWebpackPlugin({ - languages: ['json', 'yaml', 'shell'] - })); - return config; -} ``` +import * as monaco from 'monaco-editor'; +import { loader } from '@monaco-editor/react'; -Note: You should change the `languages` array based on your needs. +loader.config({ monaco }); +``` -You can now start your app with `npm start` and syntax highlighting should work. +This may require the additonal `webpack` plugins such as `monaco-editor-webpack-plugin`. To properly install the library `monaco-editor-webpack-plugin` be sure to follow the [plugin instructions](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin) #### Enable YAML Syntax Highlighting -The Monaco editor doesn't ship with full YAML support. You can configure your code editor with `Languages.yaml` but there will be no highlighting, even i you have the webpack plugin working correctly. To enable YAML support you need to do the following: + +The Monaco editor doesn't ship with full YAML support. You can configure your code editor with `Languages.yaml` but there will be no highlighting. To enable YAML support you need to do the following: First, install `monaco-yaml`: + ```shell $ npm install --save monaco-yaml ``` Next, at the entrypoint of your app enable it: + ```javascript import { setDiagnosticsOptions } from 'monaco-yaml'; @@ -107,8 +109,16 @@ setDiagnosticsOptions({ completion: true, validate: true, format: true, - schemas: [], + schemas: [] }); ``` +Finally, to allow the `monaco-yaml` autocomplete to function properly with `@monaco-editor/react`, you should configure your YAML schema in a `beforeMount` call with the `monaco-yaml` `configureMonacoYaml` function. This `beforeMount` function should be passed to `CodeEditor` via the `editorProps` property like so: + +``` +editorProps: { + beforeMount: yourBeforeMountHandler +} +``` + The `monaco-yaml` plugin has a lot of options so check out their docs to see what else you may want to add. diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json index b59a65da512..9c7ae4f8359 100644 --- a/packages/react-code-editor/package.json +++ b/packages/react-code-editor/package.json @@ -1,6 +1,6 @@ { "name": "@patternfly/react-code-editor", - "version": "5.2.0-prerelease.19", + "version": "6.0.0-prerelease.21", "description": "This package provides a PatternFly wrapper for the Monaco code editor\n", "main": "dist/js/index.js", "module": "dist/esm/index.js", @@ -8,7 +8,8 @@ "patternfly:src": "src/", "sideEffects": false, "publishConfig": { - "access": "public" + "access": "public", + "tag": "prerelease" }, "repository": { "type": "git", @@ -29,19 +30,18 @@ "clean": "rimraf dist" }, "dependencies": { - "@patternfly/react-core": "^5.2.0-prerelease.19", - "@patternfly/react-icons": "^5.2.0-prerelease.5", - "@patternfly/react-styles": "^5.2.0-prerelease.3", + "@monaco-editor/react": "^4.6.0", + "@patternfly/react-core": "workspace:^", + "@patternfly/react-icons": "workspace:^", + "@patternfly/react-styles": "workspace:^", "react-dropzone": "14.2.3", - "tslib": "^2.5.0" + "tslib": "^2.7.0" }, "peerDependencies": { "react": "^17 || ^18", - "react-dom": "^17 || ^18", - "react-monaco-editor": "^0.51.0" + "react-dom": "^17 || ^18" }, "devDependencies": { - "rimraf": "^2.6.2", - "typescript": "^4.7.4" + "monaco-editor": "^0.52.0" } } diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index 2dcbacc83b2..ac7fc3f5d4b 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -7,18 +7,16 @@ import { ButtonVariant, EmptyState, EmptyStateBody, - EmptyStateIcon, EmptyStateActions, EmptyStateVariant, EmptyStateFooter, getResizeObserver, Popover, PopoverProps, - TooltipPosition, - EmptyStateHeader + TooltipPosition } from '@patternfly/react-core'; -import MonacoEditor, { ChangeHandler, EditorDidMount } from 'react-monaco-editor'; -import { editor } from 'monaco-editor/esm/vs/editor/editor.api'; +import Editor, { EditorProps, Monaco } from '@monaco-editor/react'; +import type { editor } from 'monaco-editor'; import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon'; @@ -28,6 +26,9 @@ import Dropzone, { FileRejection } from 'react-dropzone'; import { CodeEditorContext } from './CodeEditorUtils'; import { CodeEditorControl } from './CodeEditorControl'; +export type ChangeHandler = (value: string, event: editor.IModelContentChangedEvent) => void; +export type EditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void; + export interface Shortcut { description: string; keys: string[]; @@ -134,6 +135,8 @@ export interface CodeEditorProps extends Omit, ' downloadButtonToolTipText?: string; /** Name of the file if user downloads code to local file. */ downloadFileName?: string; + /** Additional props to pass to the monaco editor. */ + editorProps?: EditorProps; /** Content to display in space of the code editor when there is no code to display. */ emptyState?: React.ReactNode; /** Override default empty state body text. */ @@ -154,6 +157,8 @@ export interface CodeEditorProps extends Omit, ' isCopyEnabled?: boolean; /** Flag indicating the editor is styled using monaco's dark theme. */ isDarkTheme?: boolean; + /** Flag indicating the editor has a plain header. */ + isHeaderPlain?: boolean; /** Flag to add download button to code editor actions. */ isDownloadEnabled?: boolean; /** Flag to include a label indicating the currently configured editor language. */ @@ -260,6 +265,7 @@ class CodeEditor extends React.Component { isUploadEnabled: false, isDownloadEnabled: false, isCopyEnabled: false, + isHeaderPlain: false, copyButtonAriaLabel: 'Copy code to clipboard', uploadButtonAriaLabel: 'Upload code', downloadButtonAriaLabel: 'Download code', @@ -491,12 +497,14 @@ class CodeEditor extends React.Component { emptyStateLink, customControls, isMinimapVisible, + isHeaderPlain, headerMainContent, shortcutsPopoverButtonText, shortcutsPopoverProps: shortcutsPopoverPropsProp, showEditor, options: optionsProp, - overrideServices + overrideServices, + editorProps } = this.props; const shortcutsPopoverProps: PopoverProps = { ...CodeEditor.defaultProps.shortcutsPopoverProps, @@ -520,12 +528,7 @@ class CodeEditor extends React.Component { const emptyState = providedEmptyState || (isUploadEnabled ? ( - - } - headingLevel="h4" - /> + {emptyStateBody} {!isReadOnly && ( @@ -543,12 +546,7 @@ class CodeEditor extends React.Component { )} ) : ( - - } - headingLevel="h4" - /> + {!isReadOnly && ( @@ -569,45 +567,50 @@ class CodeEditor extends React.Component { trigger: 'mouseenter focus' }; - const editorHeader = ( -
- { -
- - {isCopyEnabled && (!showEmptyState || !!value) && ( - } - aria-label={copyButtonAriaLabel} - tooltipProps={{ - ...tooltipProps, - 'aria-live': 'polite', - content:
{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}
, - exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay, - onTooltipHidden: () => this.setState({ copied: false }) - }} - onClick={this.copyCode} - /> - )} - {isUploadEnabled && ( - } - aria-label={uploadButtonAriaLabel} - tooltipProps={{ content:
{uploadButtonToolTipText}
, ...tooltipProps }} - onClick={open} - /> - )} - {isDownloadEnabled && (!showEmptyState || !!value) && ( - } - aria-label={downloadButtonAriaLabel} - tooltipProps={{ content:
{downloadButtonToolTipText}
, ...tooltipProps }} - onClick={this.download} - /> - )} - {customControls && customControls} - -
- } + const hasEditorHeaderContent = + ((isCopyEnabled || isDownloadEnabled) && (!showEmptyState || !!value)) || + isUploadEnabled || + customControls || + headerMainContent || + !!shortcutsPopoverProps.bodyContent; + + const editorHeaderContent = ( + +
+ + {isCopyEnabled && (!showEmptyState || !!value) && ( + } + aria-label={copyButtonAriaLabel} + tooltipProps={{ + ...tooltipProps, + 'aria-live': 'polite', + content:
{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}
, + exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay, + onTooltipHidden: () => this.setState({ copied: false }) + }} + onClick={this.copyCode} + /> + )} + {isUploadEnabled && ( + } + aria-label={uploadButtonAriaLabel} + tooltipProps={{ content:
{uploadButtonToolTipText}
, ...tooltipProps }} + onClick={open} + /> + )} + {isDownloadEnabled && (!showEmptyState || !!value) && ( + } + aria-label={downloadButtonAriaLabel} + tooltipProps={{ content:
{downloadButtonToolTipText}
, ...tooltipProps }} + onClick={this.download} + /> + )} + {customControls && customControls} + +
{
{headerMainContent}
} {!!shortcutsPopoverProps.bodyContent && (
@@ -618,6 +621,14 @@ class CodeEditor extends React.Component {
)} + + ); + + const editorHeader = ( +
+ {hasEditorHeaderContent && ( +
{editorHeaderContent}
+ )} {isLanguageLabelVisible && (
@@ -631,7 +642,7 @@ class CodeEditor extends React.Component { const editor = (
- { options={options} overrideServices={overrideServices} onChange={this.onChange} - editorDidMount={this.editorDidMount} + onMount={this.editorDidMount} theme={isDarkTheme ? 'vs-dark' : 'vs-light'} + {...editorProps} />
); @@ -652,14 +664,14 @@ class CodeEditor extends React.Component { {...getRootProps({ onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog })} - className={`${fileUploadStyles.fileUpload} ${isDragActive && fileUploadStyles.modifiers.dragHover} ${ - isLoading && fileUploadStyles.modifiers.loading - }`} + className={css(isLoading && fileUploadStyles.modifiers.loading)} > {editorHeader} -
- - {(showEmptyState || providedEmptyState) && !value ? emptyState : editor} +
+
+ + {(showEmptyState || providedEmptyState) && !value ? emptyState : editor} +
) : ( diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx index 132448c50ad..f07c9eca00a 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditorControl.tsx @@ -38,9 +38,14 @@ export const CodeEditorControl: React.FunctionComponent return isVisible ? ( - +
} />); + expect(screen.getByText('empty')).toBeInTheDocument(); +}); + +test(`Renders with empty state when isUploadEnabled = true and code = undefined`, () => { + render(empty
} isUploadEnabled />); + expect(screen.getByText('empty')).toBeInTheDocument(); +}); + +test(`Renders with language label when isLanguageLabelVisible`, () => { + render(); + expect(screen.getByText('JAVA')).toBeInTheDocument(); +}); + +test(`Renders with custom controls when customControls is passed`, () => { + render(control
} />); + expect(screen.getByText('control')).toBeInTheDocument(); +}); + +test(`Renders with custom header content when headerMainContent is passed`, () => { + render(); + expect(screen.getByText('header content')).toBeInTheDocument(); +}); - test('matches snapshot with all props', () => { - const { asFragment } = render( - - ); - expect(asFragment()).toMatchSnapshot(); +test(`Renders with shortcuts when shortcutsPopoverButtonText is passed`, () => { + render( + + ); + expect(screen.getByText('shortcuts-button')).toBeInTheDocument(); + act(() => { + screen.getByText('shortcuts-button').click(); }); + expect(screen.getByText('shortcuts')).toBeInTheDocument(); }); diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx new file mode 100644 index 00000000000..754d0bb296d --- /dev/null +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { CodeEditorControl } from '../CodeEditorControl'; + +test('Matches snapshot', () => { + const { asFragment } = render(icon
} onClick={jest.fn()} />); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Renders with custom class when className is passed', () => { + render(icon
} onClick={jest.fn()} />); + expect(screen.getByText('icon').parentElement?.parentElement).toHaveClass('custom'); +}); + +test('Renders with accessible name when aria-label is passed', () => { + render(icon
} onClick={jest.fn()} />); + expect(screen.getByLabelText('aria-test')); +}); diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap index a81731992c9..5fe4b80e31e 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap @@ -1,354 +1,142 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CodeEditor matches snapshot with all props 1`] = ` +exports[`Matches snapshot with control buttons enabled 1`] = `