diff --git a/.eslintrc.js b/.eslintrc.js index c6443b0..a6456b8 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -13,10 +13,10 @@ module.exports = { }, ecmaVersion: 12, sourceType: 'module', + "babelOptions": { + "presets": ["@babel/preset-react"] + }, }, - plugins: [ - 'react', - ], rules: { }, } diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 33ef7a5..b8cac62 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -13,7 +13,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: 14 + node-version: 18 - uses: actions/cache@v2 id: yarn-cache with: @@ -31,7 +31,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: 14 + node-version: 18 - uses: actions/cache@v2 id: yarn-cache with: @@ -49,7 +49,7 @@ jobs: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: - node-version: 14 + node-version: 18 - uses: actions/cache@v2 id: yarn-cache with: diff --git a/README.md b/README.md index 629249b..0fd190a 100644 --- a/README.md +++ b/README.md @@ -76,8 +76,7 @@ import '@anvilco/react-signature-modal/dist/styles.css' isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} onLoad={() => setLoading(false)} - onFinishSigning={(payload) => console.log(payload)} - onError={(errorPayload) => console.log(errorPayload)} + onEvent={(eventObject) => console.log(eventObject)} /> ``` diff --git a/lerna.json b/lerna.json index f9a5f69..5d779a6 100644 --- a/lerna.json +++ b/lerna.json @@ -9,5 +9,4 @@ }, "version": "independent", "npmClient": "yarn", - "useWorkspaces": true } diff --git a/package.json b/package.json index 6b7bec8..c4886d5 100644 --- a/package.json +++ b/package.json @@ -8,47 +8,51 @@ "lint": "yarn eslint 'packages/*/src/**.js'", "test": "yarn lerna run test", "prebuild": "git clean -fdx packages -e packages/*/node_modules", - "build": "yarn lerna bootstrap && yarn lerna run build", + "build": "yarn && yarn lerna run build", "build:changelog": "yarn lerna run build:changelog", "release:local": "yarn build && yarn lerna run pack", "release:npm": "yarn build && yarn lerna publish" }, "devDependencies": { - "@babel/core": "^7.17.8", - "@babel/plugin-proposal-class-properties": "^7.16.7", - "@babel/preset-env": "^7.16.11", - "@babel/preset-react": "^7.16.7", - "@babel/register": "^7.17.7", - "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7", + "@babel/core": "^7.22.20", + "@babel/eslint-parser": "^7.22.15", + "@babel/plugin-proposal-class-properties": "^7.18.6", + "@babel/preset-env": "^7.22.20", + "@babel/preset-react": "^7.22.15", + "@babel/register": "^7.22.15", + "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0", "auto-changelog": "^2.4.0", "babel-eslint": "^10.1.0", - "babel-loader": "^8.2.4", + "babel-loader": "^9.1.3", "bdd-lazy-var": "^2.6.1", - "chai": "^4.3.6", + "chai": "^4.3.8", "chai-as-promised": "^7.1.1", "chai-enzyme": "^1.0.0-beta.1", - "css-loader": "^5.2.7", + "css-loader": "^6.8.1", "enzyme": "^3.11.0", - "eslint": "^7.32.0", - "eslint-config-nicenice": "^2.0.0", - "eslint-config-standard": "^16.0.3", - "eslint-config-standard-jsx": "^10.0.0", - "eslint-plugin-import": "^2.25.4", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-mocha": "^9.0.0", - "eslint-plugin-no-only-tests": "^2.6.0", - "eslint-plugin-node": "^11.1.0", - "eslint-plugin-promise": "^4.3.1", - "eslint-plugin-react": "^7.29.4", - "eslint-plugin-react-hooks": "^4.4.0", - "jsdom": "^18.0.0", - "lerna": "^3.22.1", - "mini-css-extract-plugin": "^1.6.2", - "mocha": "^9.2.2", - "sinon": "^11.1.2", + "eslint": "^8.49.0", + "eslint-config-nicenice": "^4.1.1", + "eslint-config-prettier": "^9.0.0", + "eslint-config-standard": "^17.1.0", + "eslint-config-standard-jsx": "^11.0.0", + "eslint-plugin-import": "^2.28.1", + "eslint-plugin-jsx-a11y": "^6.7.1", + "eslint-plugin-mocha": "^10.1.0", + "eslint-plugin-n": "^16.1.0", + "eslint-plugin-no-only-tests": "^3.1.0", + "eslint-plugin-prettier": "^5.0.0", + "eslint-plugin-promise": "^6.1.1", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-svg-jsx": "^1.2.2", + "jsdom": "^22.1.0", + "lerna": "^7.3.0", + "mini-css-extract-plugin": "^2.7.6", + "mocha": "^10.2.0", + "sinon": "^16.0.0", "sinon-chai": "^3.7.0", - "style-loader": "^2.0.0", - "webpack": "^5.70.0", - "webpack-cli": "^4.9.2" + "style-loader": "^3.3.3", + "webpack": "^5.88.2", + "webpack-cli": "^5.1.4" } } diff --git a/packages/anvil-embed-frame/CHANGELOG.md b/packages/anvil-embed-frame/CHANGELOG.md index 6361e43..71aacba 100644 --- a/packages/anvil-embed-frame/CHANGELOG.md +++ b/packages/anvil-embed-frame/CHANGELOG.md @@ -1,3 +1,23 @@ # Changelog All notable changes to this project will be documented in this file. + +## @anvilco/anvil-embed-frame@1.1.0 - 2022-10-05 + +### Merged + +- Add Typescript support to `AnvilEmbedFrame` [`#13`](https://github.com/anvilco/react-ui/pull/13) +- New `@anvilco/anvil-embed-frame` package [`#12`](https://github.com/anvilco/react-ui/pull/12) +- Update Readme [`#11`](https://github.com/anvilco/react-ui/pull/11) +- [1-min] Fix output path for type defs [`#10`](https://github.com/anvilco/react-ui/pull/10) +- Add Typescript typings [`#9`](https://github.com/anvilco/react-ui/pull/9) +- Update dependencies and peer dependencies [`#7`](https://github.com/anvilco/react-ui/pull/7) +- Add onError handler [`#6`](https://github.com/anvilco/react-ui/pull/6) +- Add onFinishSigning prop & upgrade all minor version deps [`#5`](https://github.com/anvilco/react-ui/pull/5) +- Refactor the Docs [`#3`](https://github.com/anvilco/react-ui/pull/3) +- Review Follow Ups and Refactoring [`#2`](https://github.com/anvilco/react-ui/pull/2) +- Setup Linting [`#1`](https://github.com/anvilco/react-ui/pull/1) + +### Commits + +- AnvilSignatureFrame and AnvilSignatureModal [`7ab8fc2`](https://github.com/anvilco/react-ui/commit/7ab8fc2026411cbcc0186d9650290ba3d1afcfa5) diff --git a/packages/anvil-embed-frame/README.md b/packages/anvil-embed-frame/README.md index 2caf5e9..3828269 100644 --- a/packages/anvil-embed-frame/README.md +++ b/packages/anvil-embed-frame/README.md @@ -1,8 +1,8 @@ # AnvilEmbedFrame -A very minimal component that allows you to embed Anvil [Etch e-signatures](https://www.useanvil.com/docs/api/e-signatures#embedding-the-signing-ui-in-an-iframe), [Workflows](https://www.useanvil.com/docs/api/workflows#embedding-workflows-in-your-app), and editors into your app with an `iframe`. It will give you information via callback `onEvent`. +`AnvilEmbedFrame` is a very minimal React component that allows you to embed Anvil [Etch e-signatures](https://www.useanvil.com/docs/api/e-signatures#embedding-the-signing-ui-in-an-iframe), [Workflows](https://www.useanvil.com/docs/api/workflows#embedding-workflows-in-your-app), and [embedded builders](https://www.useanvil.com/blog/engineering/embedded-edit-pdf-experience/) into your app with an `iframe`. It will give you information via callback `onEvent`. -See the Etch e-sign [live demo](https://esign-demo.useanvil.com/) and open-source [demo repository](https://github.com/anvilco/anvil-e-signature-api-node-example) for an embedded Etch e-sign usage example. +See the Etch e-sign [live demo](https://esign-demo.useanvil.com/) and open-source [demo repository](https://github.com/anvilco/anvil-e-signature-api-node-example) for an embedded Etch e-sign usage example using this component. ## What is Anvil? @@ -30,11 +30,16 @@ import AnvilEmbedFrame from '@anvilco/anvil-embed-frame' console.log('Event object:', event)} + onEvent={(eventObject) => console.log('Event object:', eventObject)} className="anvil-embed-frame" + style={{ border: 'none' }} /> ``` +## Upgrading from v1 to v2 + +Beginning in v2.0, the `enableDefaultStyles` prop has been removed. There are now _no_ default styles embedded in the `AnvilEmbedFrame`, the frame will use default browser `iframe` styling. You can style the iframe with CSS and add `className` and `style` props to the component + ## Props ### iframeURL @@ -59,17 +64,11 @@ Example ### onEvent *Function* - This function is called when an event is triggered. -Possible event types for Etch e-sign include: `signerComplete`, `signerError` -Possible event types for Workflwos include: `forgeSubmitPage`, `forgeComplete` +Possible event types for [Etch e-sign include](https://www.useanvil.com/docs/api/e-signatures/#iframe-event-details): `signerComplete`, `signerError`. +Possible event types for [Workflows include](https://www.useanvil.com/docs/api/workflows/#iframe-event-details): `forgeSubmitPage`, `forgeComplete`, `weldComplete`. Defaults to `(eventObject) => {}` -### enableDefaultStyles - -*Boolean* - Set to false to disable the default inline styles of the component. - -Defaults to `true`. - ### scroll *String* - Set scroll to the iframe @@ -78,10 +77,6 @@ Defaults to `true`. * `smooth` smoothly scrolls the window to the iframe when mounted * `null` - disables scrolling -## Styling - -Customize the component by setting the `enableDefaultStyles` prop to false, then import CSS or pass in inline styles. Override IDs or classNames by passing them in as props. - ## Anvil Documentation * [Get started with Anvil API](https://www.useanvil.com/docs/api/getting-started) @@ -91,7 +86,7 @@ Customize the component by setting the `enableDefaultStyles` prop to false, then ## Notes * To enable iframe embedding, go to your organization's settings in Anvil, and enable "Iframe Embedding" in the API section. -* Please contact us at [support@useanvil.com](mailto:support@useanvil.com) to enable iframe embedding for editors. +* Please contact us at [support@useanvil.com](mailto:support@useanvil.com) to enable iframe embedding for our [embedded builders UIs](https://www.useanvil.com/blog/engineering/embedded-edit-pdf-experience/): the PDF template builder, e-sign packet builder, or Workflow builder. * React >= v16.0 required. ## Bugs diff --git a/packages/anvil-embed-frame/package.json b/packages/anvil-embed-frame/package.json index 18b7e52..dd01378 100644 --- a/packages/anvil-embed-frame/package.json +++ b/packages/anvil-embed-frame/package.json @@ -1,6 +1,6 @@ { "name": "@anvilco/anvil-embed-frame", - "version": "1.1.0", + "version": "2.0.0-alpha.0", "description": "The AnvilEmbedFrame React component for embedded Etch signatures and Workflows.", "author": "Anvil Foundry Inc.", "license": "MIT", @@ -35,11 +35,11 @@ "workflow" ], "devDependencies": { - "@types/react": "^18.0.21", + "@types/react": "^18.2.22", "prop-types": "^15.8.1", - "react": "^16.0.0", - "react-dom": "^16.0.0", - "typescript": "^4.8.4" + "react": "^18.2.0", + "react-dom": "^18.2.0", + "typescript": "^5.2.2" }, "peerDependencies": { "prop-types": "^15.6.0", diff --git a/packages/anvil-embed-frame/src/index.js b/packages/anvil-embed-frame/src/index.js index 4600807..c18823f 100644 --- a/packages/anvil-embed-frame/src/index.js +++ b/packages/anvil-embed-frame/src/index.js @@ -6,7 +6,6 @@ import PropTypes from 'prop-types' * @prop {String} iframeURL * @prop {Function} onEvent * @prop {String} anvilURL - * @prop {boolean} enableDefaultStyles * @prop {String} scroll */ @@ -43,20 +42,11 @@ class AnvilEmbedFrame extends React.Component { } render () { - const { iframeURL, onEvent, anvilURL, enableDefaultStyles, scroll, ...others } = this.props + const { iframeURL, onEvent, anvilURL, scroll, ...others } = this.props return (