{"analyzedAt":"2022-07-13T01:53:04.658Z","collected":{"metadata":{"name":"@focus-reactive/react-yaml","scope":"focus-reactive","version":"1.1.2","description":"Yaml input field with validation and syntax highlighting as React Component","keywords":["react","yaml","syntax","highlight","validation","component","input","editor","plugin","extension","addon","custom","field","custom-field","codemirror","js-yaml","react-yaml"],"date":"2022-06-23T13:04:58.486Z","author":{"name":"Oleg Proskurin","email":"oleg@focusreactive.com","url":"https://github.com/focusreactive"},"publisher":{"username":"usulpro","email":"regx@usul.su"},"maintainers":[{"username":"pixelscommander","email":"denis.radin@gmail.com"},{"username":"operatino","email":"robert@focusreactive.com"},{"username":"usulpro","email":"regx@usul.su"},{"username":"alex_hramovich","email":"alex@focusreactive.com"}],"repository":{"type":"git","url":"git+https://github.com/focusreactive/headless-cms-yaml-input.git"},"links":{"npm":"https://www.npmjs.com/package/%40focus-reactive%2Freact-yaml","homepage":"https://headless-cms-yaml-input.vercel.app/","repository":"https://github.com/focusreactive/headless-cms-yaml-input"},"license":"MIT","dependencies":{"@codemirror/basic-setup":"^0.19.0","@codemirror/commands":"^0.19.3","@codemirror/lang-javascript":"^0.19.1","@codemirror/legacy-modes":"^0.19.0","@codemirror/rangeset":"^0.19.1","@codemirror/state":"^0.19.1","@codemirror/stream-parser":"^0.19.2","@codemirror/theme-one-dark":"^0.19.0","@codemirror/tooltip":"^0.19.2","@codemirror/view":"^0.19.4","js-yaml":"^4.1.0"},"devDependencies":{"@babel/cli":"^7.15.4","@babel/core":"^7.15.5","@babel/preset-env":"^7.15.6","@babel/preset-react":"^7.14.5","@usulpro/package-prepare":"^1.3.1","babel-eslint":"^10.1.0","eslint":"7.32.0","eslint-config-airbnb":"^18.2.0","eslint-config-next":"11.1.2","eslint-config-prettier":"^8.1.0","eslint-plugin-import":"^2.21.2","eslint-plugin-jest":"^24.3.2","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","next":"11.1.2","nodemon":"^2.0.12","prettier":"^2.0.5","react":"^17.0.2","react-dom":"17.0.2"},"peerDependencies":{"react":"*"},"releases":[{"from":"2022-06-13T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":4},{"from":"2022-04-14T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":4},{"from":"2022-01-14T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":4},{"from":"2021-07-13T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":7},{"from":"2020-07-13T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":7}],"readme":"# React-Yaml\n\nYaml input field with validation and syntax highlighting as React Component\n\n![Example](https://raw.githubusercontent.com/focusreactive/headless-cms-yaml-input/master/react-yaml/examples/editor-screenshort.png)\n\n[Demo](https://headless-cms-yaml-input.vercel.app/)\n\n## Install\n\n```\nnpm i --save @focus-reactive/react-yaml\nyarn add @focus-reactive/react-yaml\n```\n\n## Usage\n\nYou can pass JS object as initial value:\n\n```jsx\nimport YamlEditor from '@focus-reactive/react-yaml';\n\nconst obj = { foo: 'bar' };\nconst handleChange = ({ json, text }) => {\n console.log(json);\n // { foo: 'bar' }\n};\n\nreturn ;\n```\n\nOr you can pass a text with YAML syntax\n\n```jsx\nimport YamlEditor from '@focus-reactive/react-yaml';\n\nconst text = `\nfoo: bar\n`;\n\nconst handleChange = ({ json, text }) => {\n console.log(text);\n // \"foo: bar\"\n};\n\nreturn ;\n```\n\n## Features\n\n- themable (use Codemirror themes)\n- syntax and errors highlight\n- support working with text in YAML format or regular JS objects\n- controlled and uncontrolled mode\n\n## API\n\nYou can pass the following props to the YamlEditor\n\n**json** - JS object that will be outputted in Editor in YAML syntax\n\n**text** - Text in YAML syntax. Note: if you pass both `json` and `text` props - the `json` will be used.\n\n**Note:** By default the Editor will work in _uncontrolled_ mode. Means that changes in `json` or `text` props wouldn't cause code update. You can control this behavior with `merge` prop, that accept a function with which you can define how to update text in the Editor.\n\n**theme** - Codemirror Theme to style editor. e.g.\n\n```js\nimport { oneDark } from '@codemirror/theme-one-dark';\n```\n\n**onChange** - a callback triggered on **VALID** YAML code changes in the Editor. It will be launched with the following parameters:\n\n```js\nonChange({ json, text });\n```\n\nwhere: `text` is a last valid text editing in Editor, `json` is JS equivalent.\n\n**onSelect** - a callback triggered on text selection. It will be launched with the following parameters:\n\n```js\nonSelect({ selected, from, to });\n```\n\nwhere: `selected` - is a selected text, `from` and `to` - selection positions\n\n**onSetCursor** - a callback triggered when user moves or set cursor on any word in the Editor. It will be launched with the following parameters:\n\n```js\nonSetCursor({ word, from, to });\n```\n\nwhere: `word` - is a word separated by whitespaces, `from` and `to` - word start and end positions\n\n**onError** - a callback triggered on any **INVALID** code changes in the Editor. It will be launched with the following parameters:\n\n```js\nonError(errorObject | null);\n```\n\nwhere `errorObject` is Codemirror error object representing YAML syntax error. Note that after a user fixed syntax error in the Editor, the function will be launched with `null`.\n\n**merge** (optional) - a function launched on `json` or `text` props changes. It can compare the new and the current values and return the result that will appear in the Editor. It will be launched with the following parameters:\n\n```js\nmerge({ json, text, currentText });\n```\n\nwhere `json` - the new json prop, `text` the new text prop, and `currentText` is the current text.\n\nIt should return an object with one of the keys: `json` or `text` which should contain new text of js value.\n\nBy default it returns `currentText`\n\n#### Actions - allow to manipulate Editor in imperative form\n\nAll actions are available by a `ref` prop **after** the Editor is maintained:\n\n```js\nconst EditorWithActions = () => {\n const actions = React.useRef(null);\n\n React.useEffect(() => {\n // Here we have access to imperative actions\n actions.current.replaceValue({ json: { foo: 'updatedValue' } });\n }, []);\n\n return (\n
\n \n
\n );\n};\n```\n\nCurrently available the following actions:\n\n**replaceValue** - replace entire Editor content with a new value (json or text)\n\n```js\nreplaceValue({ json, text });\n```\n\n## Credits\n\n
Created with ❤︎ to React and Open Source community by Oleg Proskurin at FocusReactive\n
\n\n2021\n\n[![FocusReactive](https://raw.githubusercontent.com/focusreactive/storybook-graphql-kit/master/docs/focusreactive-logo.svg?sanitize=true)](https://focusreactive.com)"},"npm":{"downloads":[{"from":"2022-07-12T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":0},{"from":"2022-07-06T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":33},{"from":"2022-06-13T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":286},{"from":"2022-04-14T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":401},{"from":"2022-01-14T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":511},{"from":"2021-07-13T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":696}],"starsCount":0},"github":{"homepage":"headless-cms-yaml-input.vercel.app","starsCount":1,"forksCount":1,"subscribersCount":0,"issues":{"count":1,"openCount":1,"distribution":{"3600":0,"10800":0,"32400":1,"97200":0,"291600":0,"874800":0,"2624400":0,"7873200":0,"23619600":0,"70858800":0,"212576400":0},"isDisabled":false},"contributors":[{"username":"usulpro","commitsCount":26}],"commits":[{"from":"2022-07-06T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":0},{"from":"2022-06-13T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":11},{"from":"2022-04-14T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":12},{"from":"2022-01-14T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":12},{"from":"2021-07-13T00:00:00.000Z","to":"2022-07-13T00:00:00.000Z","count":26}],"statuses":[{"context":"Vercel","state":"success"}]},"source":{"files":{"readmeSize":4472,"testsSize":0,"hasNpmIgnore":true},"linters":["eslint","prettier"],"outdatedDependencies":{"@codemirror/basic-setup":{"required":"^0.19.0","stable":"0.20.0","latest":"0.20.0"},"@codemirror/theme-one-dark":{"required":"^0.19.0","stable":"6.0.0","latest":"6.0.0"},"@codemirror/lang-javascript":{"required":"^0.19.1","stable":"6.0.1","latest":"6.0.1"},"@codemirror/legacy-modes":{"required":"^0.19.0","stable":"6.1.0","latest":"6.1.0"},"@codemirror/commands":{"required":"^0.19.3","stable":"6.0.1","latest":"6.0.1"},"@codemirror/state":{"required":"^0.19.1","stable":"6.1.0","latest":"6.1.0"},"@codemirror/view":{"required":"^0.19.4","stable":"6.0.3","latest":"6.0.3"}}}},"evaluation":{"quality":{"carefulness":0.9199999999999999,"tests":0.25,"health":0.5,"branding":0.4},"popularity":{"communityInterest":3,"downloadsCount":133.66666666666666,"downloadsAcceleration":2.1396308980213092,"dependentsCount":0},"maintenance":{"releasesFrequency":1,"commitsFrequency":0.9035479452054794,"openIssues":0,"issuesDistribution":1}},"score":{"final":0.5714932502591966,"detail":{"quality":0.7614316419531721,"popularity":0.026548171485378934,"maintenance":0.9536339932953211}}}