├── tests ├── .eslintrc └── index.test.js ├── .gitignore ├── .prettierrc ├── tests.webpack.js ├── nwb.config.js ├── .travis.yml ├── LICENSE ├── demo └── src │ └── index.js ├── CONTRIBUTING.md ├── src └── index.js ├── README.md └── package.json /tests/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /coverage 2 | /demo/dist 3 | /es 4 | /lib 5 | /node_modules 6 | /umd 7 | npm-debug.log* 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true, 4 | "trailingComma": "es5", 5 | "semi": false 6 | } 7 | -------------------------------------------------------------------------------- /tests.webpack.js: -------------------------------------------------------------------------------- 1 | import Enzyme from 'enzyme' 2 | import Adapter from 'enzyme-adapter-react-16' 3 | 4 | Enzyme.configure({ adapter: new Adapter() }) 5 | 6 | let context = require.context('./tests', true, /\.test\.js$/) 7 | context.keys().forEach(context) -------------------------------------------------------------------------------- /nwb.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | type: 'react-component', 3 | npm: { 4 | esModules: true, 5 | umd: { 6 | global: 'ReactAbcjs', 7 | externals: { 8 | react: 'React' 9 | } 10 | } 11 | }, 12 | karma: { 13 | testContext: 'tests.webpack.js' 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | cache: 4 | directories: 5 | - ~/.npm 6 | notifications: 7 | email: false 8 | node_js: 9 | - '12' 10 | - '10' 11 | - '8' 12 | before_install: 13 | - npm install codecov.io coveralls 14 | after_success: 15 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js 16 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js 17 | - npm run build 18 | - npm run travis-deploy-once "npm run semantic-release" 19 | branches: 20 | only: 21 | - master 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 A. Iglesias 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /tests/index.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { shallow, mount, render } from 'enzyme' 3 | import { expect } from 'chai' 4 | import sinon from 'sinon' 5 | 6 | import Abcjs from 'src/' 7 | 8 | describe('Abcjs', () => { 9 | it('shallow renders with default parameters', () => { 10 | const wrapper = shallow() 11 | const id = wrapper 12 | .find('div') 13 | .at(1) 14 | .prop('id') 15 | expect(wrapper.html()).to.equal( 16 | `
` 17 | ) 18 | }) 19 | 20 | it('mounts with a simple abcNotation', () => { 21 | sinon.spy(Abcjs.prototype, 'render') 22 | sinon.spy(Abcjs.prototype, 'componentDidMount') 23 | sinon.spy(Abcjs.prototype, 'componentDidUpdate') 24 | const wrapper = mount() 25 | expect(Abcjs.prototype.render.calledOnce).to.equal(true) 26 | expect(Abcjs.prototype.componentDidMount.calledOnce).to.equal(true) 27 | wrapper.setProps({ renderParams: { viewportHorizontal: true } }) 28 | expect(Abcjs.prototype.componentDidUpdate.calledOnce).to.equal(true) 29 | }) 30 | }) 31 | -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { render } from 'react-dom' 3 | 4 | import Abcjs from '../../src' 5 | 6 | class Demo extends Component { 7 | state = { 8 | abcNotation: 'X:1\nT:Test\nM:4/4\nC:Trad.\nK:G\n|:GABc dedB', 9 | parserParams: {}, 10 | engraverParams: { responsive: 'resize' }, 11 | renderParams: { viewportHorizontal: true } 12 | } 13 | 14 | componentDidMount() { 15 | setTimeout(() => { 16 | this.setState({ 17 | abcNotation: 18 | 'X:1\nT:Test\nM:4/4\nC:Trad.\nK:G\n|:GcAB dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|' 19 | }) 20 | }, 5000) 21 | } 22 | 23 | render() { 24 | const { 25 | abcNotation, 26 | parserParams, 27 | engraverParams, 28 | renderParams 29 | } = this.state 30 | 31 | return ( 32 |
33 | 39 |
40 | ) 41 | } 42 | } 43 | 44 | render(, document.querySelector('#demo')) 45 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | [Node.js](http://nodejs.org/) >= v8 must be installed. 4 | 5 | ## Installation 6 | 7 | - Running `npm install` in the component's root directory will install everything you need for development. 8 | 9 | ## Demo Development Server 10 | 11 | - `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading. 12 | 13 | ## Running Tests 14 | 15 | - `npm test` will run the tests once. 16 | 17 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`. 18 | 19 | - `npm run test:watch` will run the tests on every change. 20 | 21 | ## Building 22 | 23 | - `npm run build` will build the component for publishing to npm and also bundle the demo app. 24 | 25 | - `npm run clean` will delete built resources. 26 | 27 | ## Commiting 28 | 29 | This repository is "commitizen friendly", so commits should be formated using this tool. Instead of 'git commit' you should run this: 30 | 31 | - `npm run cm` you'll be prompted to fill out any required commit fields at commit time. 32 | 33 | Check [commitizen/cz-cli](https://github.com/commitizen/cz-cli) for more info about this tool. -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react' 2 | import PropTypes from 'prop-types' 3 | import abcjsObj from 'abcjs' 4 | 5 | class Abcjs extends PureComponent { 6 | uniqueNumber = Date.now() + Math.random() 7 | 8 | renderAbcNotation(abcNotation, parserParams, engraverParams, renderParams) { 9 | const res = abcjsObj.renderAbc( 10 | 'abcjs-result-' + this.uniqueNumber, 11 | abcNotation, 12 | parserParams, 13 | engraverParams, 14 | renderParams 15 | ) 16 | } 17 | 18 | componentDidMount() { 19 | const { abcNotation, parserParams, engraverParams, renderParams } = this.props 20 | this.renderAbcNotation(abcNotation, parserParams, engraverParams, renderParams) 21 | } 22 | 23 | componentDidUpdate() { 24 | const { abcNotation, parserParams, engraverParams, renderParams } = this.props 25 | this.renderAbcNotation(abcNotation, parserParams, engraverParams, renderParams) 26 | } 27 | 28 | render() { 29 | return ( 30 |
31 |
32 |
33 | ) 34 | } 35 | } 36 | 37 | Abcjs.propTypes = { 38 | abcNotation: PropTypes.string, 39 | parserParams: PropTypes.object, 40 | engraverParams: PropTypes.object, 41 | renderParams: PropTypes.object, 42 | } 43 | 44 | Abcjs.defaultProps = { 45 | abcNotation: '', 46 | parserParams: {}, 47 | engraverParams: { responsive: 'resize' }, 48 | renderParams: { viewportHorizontal: true }, 49 | } 50 | 51 | export default Abcjs 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-abcjs 2 | 3 | [![Travis][build-badge]][build] 4 | [![Coveralls][coveralls-badge]][coveralls] 5 | [![Commitizen friendly][commitizen-badge]][commitizen] 6 | [![npm package][npm-badge]][npm] 7 | [![npm downloads][npm-downloads-badge]][npm-downloads] 8 | [![Prettier][prettier-badge]][prettier] 9 | [![License][license-badge]][license] 10 | 11 | A React component that uses the awesome [abc2js](https://github.com/paulrosen/abcjs) to render music notation written using the [ABC notation](http://abcnotation.com). 12 | 13 | ### Usage 14 | 15 | ```js 16 | 24 | ``` 25 | 26 | [build-badge]: https://img.shields.io/travis/rigobauer/react-abcjs/master.svg?style=flat-square 27 | [build]: https://travis-ci.org/rigobauer/react-abcjs 28 | [coveralls-badge]: https://img.shields.io/coveralls/rigobauer/react-abcjs/master.svg?style=flat-square 29 | [coveralls]: https://coveralls.io/github/rigobauer/react-abcjs 30 | [commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square 31 | [commitizen]: http://commitizen.github.io/cz-cli/ 32 | [npm-badge]: https://img.shields.io/npm/v/react-abcjs.svg?style=flat-square 33 | [npm]: https://www.npmjs.org/package/react-abcjs 34 | [npm-downloads-badge]: https://img.shields.io/npm/dm/react-abcjs.svg?style=flat-square 35 | [npm-downloads]: https://npm-stat.com/charts.html?package=react-abcjs 36 | [prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square 37 | [prettier]: https://github.com/prettier/prettier 38 | [license-badge]: https://img.shields.io/npm/l/react-abcjs.svg?style=flat-square 39 | [license]: https://opensource.org/licenses/MIT 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-abcjs", 3 | "version": "0.0.0-development", 4 | "description": "react-abcjs React component", 5 | "main": "lib/index.js", 6 | "module": "es/index.js", 7 | "files": [ 8 | "css", 9 | "es", 10 | "lib", 11 | "umd" 12 | ], 13 | "scripts": { 14 | "build": "nwb build-react-component", 15 | "clean": "nwb clean-module && nwb clean-demo", 16 | "start": "nwb serve-react-demo", 17 | "test": "nwb test-react", 18 | "test:coverage": "nwb test-react --coverage", 19 | "test:watch": "nwb test-react --server", 20 | "semantic-release": "semantic-release", 21 | "travis-deploy-once": "travis-deploy-once", 22 | "cm": "git-cz" 23 | }, 24 | "husky": { 25 | "hooks": { 26 | "pre-commit": "lint-staged" 27 | } 28 | }, 29 | "lint-staged": { 30 | "*.{js,json,css,md}": [ 31 | "prettier --print-width 100 --single-quote --trailing-comma es5 --no-semi --write" 32 | ] 33 | }, 34 | "dependencies": { 35 | "abcjs": "^5.12.0", 36 | "prop-types": "^15.7.2" 37 | }, 38 | "peerDependencies": { 39 | "react": "16.x" 40 | }, 41 | "devDependencies": { 42 | "chai": "^4.2.0", 43 | "commitizen": "^4.0.3", 44 | "cz-conventional-changelog": "^3.0.2", 45 | "enzyme": "^3.11.0", 46 | "enzyme-adapter-react-16": "^1.15.2", 47 | "husky": "^4.0.10", 48 | "lint-staged": "^10.0.1", 49 | "nwb": "^0.23.0", 50 | "prettier": "^1.19.1", 51 | "react": "^16.12.0", 52 | "react-dom": "^16.12.0", 53 | "semantic-release": "^16.0.2", 54 | "sinon": "^8.1.0", 55 | "travis-deploy-once": "^5.0.11" 56 | }, 57 | "author": "Alberto Iglesias", 58 | "homepage": "", 59 | "license": "MIT", 60 | "repository": { 61 | "type": "git", 62 | "url": "https://github.com/rigobauer/react-abcjs.git" 63 | }, 64 | "keywords": [ 65 | "react-component", 66 | "abcjs" 67 | ], 68 | "config": { 69 | "commitizen": { 70 | "path": "./node_modules/cz-conventional-changelog" 71 | } 72 | } 73 | } 74 | --------------------------------------------------------------------------------