Skip to content

Commit

Permalink
ChordFiddle V2
Browse files Browse the repository at this point in the history
- rewritten without React+Redux
- uses the latest ChordSheetJS
- shows parsing errors
  • Loading branch information
martijnversluis committed May 18, 2021
1 parent aef98e5 commit a15d3da
Show file tree
Hide file tree
Showing 107 changed files with 2,944 additions and 10,861 deletions.
2 changes: 1 addition & 1 deletion .eslintignore
Original file line number Diff line number Diff line change
@@ -1 +1 @@
static/**/*
dist/**/*
13 changes: 7 additions & 6 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,17 @@
},

"env": {
"amd": true,
"browser": true,
"es6": true,
"jest": true
"browser": true
},

"extends": "airbnb",
"extends": "airbnb-base",

"rules": {
"max-len": [2, 120, 2],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
"no-underscore-dangle": "off",
"class-methods-use-this": "off",
"no-console": ["error", { "allow": ["warn", "error"] }],
"func-names": "off",
"arrow-parens": ["error", "always"]
}
}
6 changes: 0 additions & 6 deletions asset-manifest.json

This file was deleted.

16 changes: 16 additions & 0 deletions config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"publicUrl": "/ChordFiddle",
"assetDir": "dist",
"toolbar": {
"transposeDown": "Transpose down",
"transposeUp": "Transpose up",
"switchToSharp": "Use ♯",
"switchToFlat": "Use ♭",
"importChordSheet": "Import chord sheet"
},
"displayModes": {
"html": "Markup",
"text": "Plain"
},
"defaultDisplayMode": "html"
}
1 change: 1 addition & 0 deletions dist/main.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions dist/main.js

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions dist/main.js.LICENSE.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**!

@license
handlebars v4.7.7

Copyright (C) 2011-2019 by Yehuda Katz

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

*/
1 change: 1 addition & 0 deletions example_chord_pro_sheet.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
"{title: Let it be}\n{subtitle: ChordSheetJS example version}\n{Chorus}\n\nLet it [Am]be, let it [C/G]be, let it [F]be, let it [C]be\n[C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm] [C]\n"
132 changes: 131 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
@@ -1 +1,131 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><meta name="keywords" content="javascript, chords, parsing, convert, chord-sheet, chordpro"><meta name="description" content="ChordPro editor. Transpose your chord sheet. Convert ChordPro to chord sheet."><link rel="manifest" href="./manifest.json"><link rel="shortcut icon" href="./favicon.ico"><title>ChordFiddle</title><link href="./static/css/main.fba4c45d.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script async src="https://www.googletagmanager.com/gtag/js?id=UA-105335431-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-105335431-1")</script><script type="text/javascript" src="./static/js/main.4e766c10.js"></script></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<meta name="keywords" content="javascript,chords,parsing,convert,chord-sheet,chordpro">
<meta name="description" content="ChordPro editor. Transpose your chord sheet. Convert ChordPro to chord sheet.">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="dist/main.css">
<title>ChordFiddle</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<form id="root">
<div class="App">
<header class="Header">
<div class="Header__wrapper">
<h1 class="Header__site-name">
<a href="/ChordFiddle">ChordFiddle</a></h1>
<ul class="Header__navigation">
<li>Version 2.0</li>
<li>
<span>Built with</span>
<a
href="https://github.com/martijnversluis/ChordSheetJS"
target="_blank"
rel="noopener noreferrer"
>ChordSheetJS</a>
<span>and</span>
<a
href="https://github.com/martijnversluis/ChordJS"
target="_blank"
rel="noopener noreferrer"
>ChordJS</a>
</li>
<li>
<a href="https://github.com/martijnversluis/ChordFiddle" target="_blank" rel="noopener noreferrer">GitHub</a>
</li>
<li>
<a href="https://github.com/martijnversluis/chordfiddle/issues" target="_blank" rel="noopener noreferrer">Issues</a>
</li>
<li>
<a href="https://github.com/martijnversluis/ChordFiddle/blob/master/README.md#chordfiddle" target="_blank" rel="noopener noreferrer">About</a>
</li>
</ul>
</div>
</header>
<main class="App__container">
<div class="App__columns">
<section class="App__column">
<ul class="Toolbar" id="toolbar">
<li>
<button id="toolbar__transposeDown" type="button">Transpose down</button>
</li>
<li>
<button id="toolbar__transposeUp" type="button">Transpose up</button>
</li>
<li>
<button id="toolbar__switchToSharp" type="button">Use ♯</button>
</li>
<li>
<button id="toolbar__switchToFlat" type="button">Use ♭</button>
</li>
<li>
<button id="toolbar__importChordSheet" type="button">Import chord sheet</button>
</li>
</ul>
<div class="EditorContainer">
<div class="ChordSheetEditor LineNumbers EditorContainer__lineNumbers" id="chordSheetEditor__lineNumbers" data-mode="text"></div>
<textarea class="ChordSheetEditor EditorContainer__editor" id="chordSheetEditor" data-mode="text">{title: Let it be}
{subtitle: ChordSheetJS example version}
{Chorus}

Let it [Am]be, let it [C/G]be, let it [F]be, let it [C]be
[C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm] [C]
</textarea>
</div>
<div class="EditorContainer__errorMessage" id="chordSheetEditor__errorMessage"></div>
</section>
<section class="App__column" id="chordSheetViewer">
<ul class="RadioGroup">
<li class="RadioGroup__option">
<input
type="radio"
class="RadioGroup__radio"
id="chordSheetViewer__displayModeHtml"
name="display_mode"
value="html"
checked="checked"
>
<label
class="RadioGroup__label"
for="chordSheetViewer__displayModeHtml"
>Markup</label>
</li>
<li class="RadioGroup__option">
<input
type="radio"
class="RadioGroup__radio"
id="chordSheetViewer__displayModeText"
name="display_mode"
value="text"
>
<label
class="RadioGroup__label"
for="chordSheetViewer__displayModeText"
>Plain</label>
</li>
</ul>
<div class="ChordSheetViewer" id="chordSheetViewer__outlet"></div>
</section>
</div>
</main>
</div>

<section class="ImportDialog" id="importDialog">
<button class="ImportDialog__close-button" id="importDialog__closeButton" type="button">×</button>
<div class="ImportDialog__contents"><h1>Import chord sheet</h1>
<textarea class="ChordSheetEditor ImportDialog__editor" id="importDialog__editor"></textarea>
<div class="ImportDialog__buttons">
<button class="large" id="importDialog__confirmButton" type="button">Import chord sheet</button>
</div>
</div>
</section>
</form>
<script src="dist/main.js"></script>
</body>
</html>
82 changes: 32 additions & 50 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "ChordFiddle",
"version": "1.5.2",
"version": "2.0",
"description": "ChordPro editor. Transpose your chord sheet. Convert ChordPro to chord sheet.",
"main": "index.html",
"private": true,
"scripts": {
"start": "REACT_APP_DESCRIPTION=$(node -p 'require(\"./package.json\").description') REACT_APP_NAME=$(node -p 'require(\"./package.json\").name') REACT_APP_KEYWORDS=$(node -p 'require(\"./package.json\").keywords.join(\", \")') react-scripts-x start",
"build": "rm -rf static/ && REACT_APP_DESCRIPTION=$(node -p 'require(\"./package.json\").description') REACT_APP_NAME=$(node -p 'require(\"./package.json\").name') REACT_APP_KEYWORDS=$(node -p 'require(\"./package.json\").keywords.join(\", \")') react-scripts-x build && mv ./build/* ./ && rm -rf build/ service-worker.js",
"test": "react-scripts-x test --env=jsdom",
"eject": "react-scripts-x eject",
"lint": "eslint ."
"test": "yarn lint",
"lint": "node_modules/.bin/eslint --ext .js .",
"lint:fix": "node_modules/.bin/eslint --fix --ext .js .",
"build": "npx webpack",
"prepublishOnly": "yarn install && yarn test && yarn build"
},
"repository": {
"type": "git",
Expand All @@ -32,54 +32,36 @@
"about": "https://github.com/martijnversluis/ChordFiddle/blob/master/README.md#chordfiddle",
"dependencies": {
"chordjs": "^1.2.0",
"chordsheetjs": "^2.4.4",
"chordsheetjs": "^4.3.1",
"lz-string": "^1.4.4",
"postcss-calc": "^7.0.5",
"postcss-custom-properties": "^9.1.1",
"postcss-import": "^12.0.1",
"prop-types": "^15.6.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.4",
"react-scripts": "1.0.17",
"react-scripts-x": "^0.1.3",
"redux": "^4.1.0"
"query-string": "^7.0.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-jest": "^23.6.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "^4.19.0",
"expect": "^24.9.0",
"jest-plugin-context": "^2.9.0",
"redux-mock-store": "^1.5.4"
"babel-eslint": "^10.1.0",
"css-loader": "^5.2.4",
"eslint": "^7.2.0",
"eslint-config-airbnb-base": "^14.2.0",
"eslint-plugin-import": "^2.21.2",
"handlebars-webpack-plugin": "^2.2.1",
"mini-css-extract-plugin": "^1.6.0",
"sass": "^1.32.12",
"sass-loader": "^11.0.1",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0"
},
"react-scripts-x": {
"postcss": [
{
"name": "postcss-import"
},
{
"name": "postcss-custom-properties",
"config": {
"preserve": true
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
},
{
"name": "postcss-calc"
}
]
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/*.test.{js,jsx}",
"!src/test/**"
],
"coverageReporters": [
"lcov",
"text"
]
]
}
}
52 changes: 0 additions & 52 deletions public/index.html

This file was deleted.

Loading

0 comments on commit a15d3da

Please sign in to comment.