[ { "path": ".github/workflows/CI.yml", "content": "name: CI\non: [ push, pull_request ]\njobs:\n Build:\n\n strategy:\n matrix:\n os: [ ubuntu-latest ]\n node-version: [ 16 ]\n\n runs-on: ${{ matrix.os }}\n\n steps:\n - name: Checkout\n uses: actions/checkout@v6\n - name: Use Node.js\n uses: actions/setup-node@v6\n with:\n node-version: ${{ matrix.node-version }}\n cache: 'npm'\n - name: Install dependencies\n run: npm ci\n - name: Build\n run: npm run all\n" }, { "path": ".gitignore", "content": "node_modules\ndist" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\nAll notable changes to [react-bpmn](https://github.com/bpmn-io/react-bpmn) are documented here. We use [semantic versioning](http://semver.org/) for releases.\n\n## Unreleased\n\n___Note:__ Yet to be released changes appear here._\n\n## 0.2.0\n\n* `FEAT`: allow open pre-loaded diagram (via `diagramXML` prop)\n\n## 0.1.1\n\n* `FIX`: correct url update handling\n\n## 0.1.0\n\n_Initial Release._" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2019-present Camunda Services GmbH\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE." }, { "path": "README.md", "content": "# react-bpmn\n\n[![CI](https://github.com/bpmn-io/react-bpmn/workflows/CI/badge.svg)](https://github.com/bpmn-io/react-bpmn/actions?query=workflow%3ACI)\n\nUse [bpmn-js](https://github.com/bpmn-io/bpmn-js) to display BPMN 2.0 diagrams in a [React](https://reactjs.org/) application.\n\n\n## Usage\n\n```javascript\nimport ReactBpmn from 'react-bpmn';\n\n\nfunction App(props) {\n\n function onShown() {\n console.log('diagram shown');\n }\n\n function onLoading() {\n console.log('diagram loading');\n }\n\n function onError(err) {\n console.log('failed to show diagram');\n }\n\n return (\n \n );\n}\n```\n\n## Development\n\nTo get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) installed.\nAs soon as you are set up, clone the project and execute\n\n```\nnpm install\nnpm run all\n```\n\n## Example\n\nTo run the example, execute `npm run start` and open http://localhost:9869/public in your Webbrowser.\n\n## Resources\n\n* [Issues](https://github.com/bpmn-io/react-bpmn/issues)\n* [Example](./example)\n\n\n## License\n\nMIT" }, { "path": "example/README.md", "content": "# react-bpmn Example\n\nAn example how to use [react-bpmn](../) to display a BPMN 2.0 diagram in a React app.\n\n![react-bpmn example screenshot](./docs/screenshot.png)\n\n\n## Run the Example\n\nTo run the example:\n\n```\nnpm install\nnpm start\n```\n\nThis puts up the example to [localhost:9869/public/index.html](http://localhost:9869/public/index.html).\n\n\n## License\n\nMIT" }, { "path": "example/package.json", "content": "{\n \"name\": \"react-bpmn-example\",\n \"version\": \"0.0.0\",\n \"description\": \"An example using react-bpmn inside a React application\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"sirv . start --dev --port=9869\"\n },\n \"license\": \"MIT\",\n \"dependencies\": {\n \"bpmn-js\": \"^18.0.0\",\n \"react-bpmn\": \"^0.2.0\"\n },\n \"devDependencies\": {\n \"sirv-cli\": \"^3.0.0\"\n }\n}" }, { "path": "example/public/diagram.bpmn", "content": "\n\n \n \n \n \n \n \n \n sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26\n sid-E49425CF-8287-4798-B622-D2A7D78EF00B\n sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138\n sid-E433566C-2289-4BEB-A19C-1697048900D2\n sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9\n SCAN_OK\n \n \n \n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D\n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A\n \n \n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB\n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C\n \n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD\n \n \n sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C\n \n \n sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE\n sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D\n \n \n sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A\n sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB\n sid-337A23B9-A923-4CCE-B613-3E247B773CCE\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n" }, { "path": "example/public/index.html", "content": "\n\n\n react-bpmn example\n\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n\n\n
\n

Display BPMN 2.0 Diagrams Using React

\n\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a tincidunt dolor. Nam semper est ut mauris cursus, vel laoreet nunc vehicula. Mauris nec semper ipsum. Integer feugiat mi at elementum fringilla. Nunc malesuada ante sed ligula pretium, eu lobortis lorem rhoncus. Praesent et ipsum ante. Aliquam est mi, ultrices ut neque eget, mollis pulvinar sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam auctor porta sapien in venenatis.\n

\n\n

\n In fringilla suscipit odio quis tincidunt. Morbi felis elit, blandit a volutpat eget, rutrum ut mi. Duis ac orci at nibh semper vehicula. Quisque vulputate, nibh vitae laoreet convallis, urna erat imperdiet eros, et interdum arcu arcu ac risus. Maecenas in tellus nisi. Mauris quis lectus luctus, condimentum orci eu, rhoncus sapien. Aliquam at lobortis mauris, eget facilisis arcu. Quisque metus purus, rhoncus et tortor id, ornare maximus neque. Donec et ex tincidunt, malesuada lacus in, volutpat eros. Cras nisi arcu, dapibus quis odio sit amet, placerat blandit elit. Nullam at dictum mauris. Nulla feugiat elit ex, a pulvinar velit faucibus a. Nulla tincidunt velit purus, in faucibus ligula ornare venenatis.\n

\n\n
\n\n

\n Ut vestibulum, magna at molestie tempus, enim sem molestie est, vel tincidunt orci leo vel sapien. Vivamus convallis, purus in rhoncus ultricies, mauris sapien condimentum sapien, vel porta urna est eu leo. Nam dui erat, venenatis at metus ut, rutrum rutrum lacus. Fusce non eros vehicula, aliquet nibh vitae, bibendum dolor. Sed hendrerit lectus ex. Mauris id venenatis metus. In hac habitasse platea dictumst.\n

\n\n

\n Etiam molestie, erat eget tincidunt rutrum, nulla odio pulvinar nibh, in pulvinar felis mauris a nunc. Sed eu ullamcorper ex, id tincidunt metus. Quisque lectus enim, vehicula eget aliquam sit amet, semper ut nisl. Vivamus ultrices, cras odio massa, sagittis in luctus sed, mattis eu massa. Nam erat nibh, pulvinar vel hendrerit quis, ultricies eu sapien. Integer fringilla sapien ex, et posuere arcu euismod et.\n

\n\n

\n Suspendisse potenti. In ut lorem vitae dolor molestie commodo. Vivamus mattis gravida metus, porttitor ornare augue lacinia suscipit. Duis condimentum fringilla nisl, non consequat odio mollis id. Nulla tincidunt interdum elit, sed tristique ex laoreet lobortis. Suspendisse in felis vitae magna convallis semper. Nullam odio risus, venenatis eget erat ac, pretium aliquet urna. Duis luctus lobortis maximus.\n

\n
\n \n\n\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-bpmn\",\n \"version\": \"0.2.0\",\n \"description\": \"Embed BPMN 2.0 diagrams in your React app\",\n \"main\": \"dist/index.js\",\n \"files\": [\n \"dist\",\n \"src\"\n ],\n \"scripts\": {\n \"all\": \"npm run bundle\",\n \"bundle\": \"cross-env NODE_ENV=production rollup -c --bundleConfigAsCjs\",\n \"prepublishOnly\": \"npm run bundle\",\n \"postinstall\": \"cd example && npm install\",\n \"start\": \"cd example && npm start\"\n },\n \"module\": \"dist/index.esm.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/bpmn-io/react-bpmn.git\"\n },\n \"keywords\": [\n \"bpmn-js\",\n \"bpmn\",\n \"react-js\",\n \"react\"\n ],\n \"author\": {\n \"name\": \"Nico Rehwaldt\",\n \"url\": \"https://github.com/nikku\"\n },\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.19.0\",\n \"@babel/preset-env\": \"^7.19.0\",\n \"@rollup/plugin-babel\": \"^7.0.0\",\n \"@rollup/plugin-commonjs\": \"^29.0.0\",\n \"@rollup/plugin-node-resolve\": \"^16.0.0\",\n \"@rollup/plugin-replace\": \"^6.0.0\",\n \"babel-preset-react-app\": \"^10.0.1\",\n \"cross-env\": \"^10.0.0\",\n \"react\": \"^19.0.0\",\n \"react-dom\": \"^19.0.0\",\n \"rollup\": \"^4.18.0\"\n }\n}\n" }, { "path": "renovate.json", "content": "{\n \"$schema\": \"https://docs.renovatebot.com/renovate-schema.json\",\n \"extends\": [\n \"github>bpmn-io/renovate-config:recommended\"\n ]\n}\n" }, { "path": "rollup.config.js", "content": "import pkg from './package.json';\n\nimport cjs from '@rollup/plugin-commonjs';\n\nimport { babel } from '@rollup/plugin-babel';\n\nimport nodeResolve from '@rollup/plugin-node-resolve';\n\nimport replace from '@rollup/plugin-replace';\n\nfunction pgl() {\n return [\n cjs(),\n nodeResolve(),\n replace({\n 'process.env.NODE_ENV': JSON.stringify( 'production' )\n }),\n babel({\n babelrc: false,\n babelHelpers: 'runtime',\n exclude: 'node_modules/**',\n presets: [\n ['@babel/env', { modules: false }],\n 'react-app'\n ]\n })\n ];\n}\n\nexport default [\n {\n input: './src/index.jsx',\n output: {\n name: 'ReactBpmn',\n file: `dist/react-bpmn.umd.js`,\n format: 'umd'\n },\n plugins: pgl()\n },\n {\n input: './src/index.jsx',\n output: [\n { file: pkg.main, format: 'cjs' },\n { file: pkg.module, format: 'es' }\n ],\n plugins: pgl()\n }\n];" }, { "path": "src/index.jsx", "content": "import React from 'react';\n\nimport BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';\n\n\nexport default class ReactBpmn extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = { };\n\n this.containerRef = React.createRef();\n }\n\n componentDidMount() {\n\n const {\n url,\n diagramXML\n } = this.props;\n\n const container = this.containerRef.current;\n\n this.bpmnViewer = new BpmnJS({ container });\n\n this.bpmnViewer.on('import.done', (event) => {\n const {\n error,\n warnings\n } = event;\n\n if (error) {\n return this.handleError(error);\n }\n\n this.bpmnViewer.get('canvas').zoom('fit-viewport');\n\n return this.handleShown(warnings);\n });\n\n if (url) {\n return this.fetchDiagram(url);\n }\n\n if (diagramXML) {\n return this.displayDiagram(diagramXML);\n }\n }\n\n componentWillUnmount() {\n this.bpmnViewer.destroy();\n }\n\n componentDidUpdate(prevProps, prevState) {\n const {\n props,\n state\n } = this;\n\n if (props.url !== prevProps.url) {\n return this.fetchDiagram(props.url);\n }\n\n const currentXML = props.diagramXML || state.diagramXML;\n\n const previousXML = prevProps.diagramXML || prevState.diagramXML;\n\n if (currentXML && currentXML !== previousXML) {\n return this.displayDiagram(currentXML);\n }\n }\n\n displayDiagram(diagramXML) {\n this.bpmnViewer.importXML(diagramXML);\n }\n\n fetchDiagram(url) {\n\n this.handleLoading();\n\n fetch(url)\n .then(response => response.text())\n .then(text => this.setState({ diagramXML: text }))\n .catch(err => this.handleError(err));\n }\n\n handleLoading() {\n const { onLoading } = this.props;\n\n if (onLoading) {\n onLoading();\n }\n }\n\n handleError(err) {\n const { onError } = this.props;\n\n if (onError) {\n onError(err);\n }\n }\n\n handleShown(warnings) {\n const { onShown } = this.props;\n\n if (onShown) {\n onShown(warnings);\n }\n }\n\n render() {\n return (\n
\n );\n }\n}\n" } ]