TheoryOfNekomata
/
react-fretboard
1
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

Initial commits 

Add files. Quick hack but it displays OK so far.
master
TheoryOfNekomata 4 лет назад
Сommit
1f8cd713e5
17 измененных файлов: 13117 добавлений и 0 удалений
Разделённый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +11
    -0
      .editorconfig
  2. +7
    -0
      .gitignore
  3. +6
    -0
      .prettierrc
  4. +24
    -0
      .storybook/main.js
  5. +21
    -0
      LICENSE
  6. +7
    -0
      README.md
  7. +3
    -0
      example/.gitignore
  8. +14
    -0
      example/index.html
  9. +14
    -0
      example/index.tsx
  10. +24
    -0
      example/package.json
  11. +18
    -0
      example/tsconfig.json
  12. +56
    -0
      package.json
  13. +10
    -0
      src/components/Fretboard/Fretboard.stories.tsx
  14. +185
    -0
      src/components/Fretboard/Fretboard.tsx
  15. +11
    -0
      src/index.tsx
  16. +19
    -0
      tsconfig.json
  17. +12687
    -0
      yarn.lock

+ 11
- 0
.editorconfig Просмотреть файл

@@ -0,0 +1,11 @@
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 120
tab_width = 8
trim_trailing_whitespace = true

+ 7
- 0
.gitignore Просмотреть файл

@@ -0,0 +1,7 @@
*.log
.DS_Store
node_modules
.cache
dist
.idea/
coverage/

+ 6
- 0
.prettierrc Просмотреть файл

@@ -0,0 +1,6 @@
{
"jsxSingleQuote": false,
"singleQuote": true,
"semi": false,
"trailingComma": "es5"
}

+ 24
- 0
.storybook/main.js Просмотреть файл

@@ -0,0 +1,24 @@
module.exports = {
stories: ['../src/**/*.stories.(ts|tsx)'],
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
use: [
{
loader: require.resolve('ts-loader'),
options: {
transpileOnly: true,
},
},
{
loader: require.resolve('react-docgen-typescript-loader'),
},
],
});

config.resolve.extensions.push('.ts', '.tsx');

return config;
},
};

+ 21
- 0
LICENSE Просмотреть файл

@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2020 TheoryOfNekomata

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.

+ 7
- 0
README.md Просмотреть файл

@@ -0,0 +1,7 @@
# React Fretboard

Fretboard for any stringed instrument, made with React.

## License

[MIT](./LICENSE)

+ 3
- 0
example/.gitignore Просмотреть файл

@@ -0,0 +1,3 @@
node_modules
.cache
dist

+ 14
- 0
example/index.html Просмотреть файл

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Playground</title>
</head>

<body>
<div id="root"></div>
<script src="./index.tsx"></script>
</body>
</html>

+ 14
- 0
example/index.tsx Просмотреть файл

@@ -0,0 +1,14 @@
import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Fretboard from '../.';

const App = () => {
return (
<div>
<Fretboard />
</div>
);
};

ReactDOM.render(<App />, document.getElementById('root'));

+ 24
- 0
example/package.json Просмотреть файл

@@ -0,0 +1,24 @@
{
"name": "example",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},
"dependencies": {
"react-app-polyfill": "^1.0.0"
},
"alias": {
"react": "../node_modules/react",
"react-dom": "../node_modules/react-dom/profiling",
"scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
},
"devDependencies": {
"@types/react": "^16.9.11",
"@types/react-dom": "^16.8.4",
"parcel": "^1.12.3",
"typescript": "^3.4.5"
}
}

+ 18
- 0
example/tsconfig.json Просмотреть файл

@@ -0,0 +1,18 @@
{
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"target": "es5",
"module": "commonjs",
"jsx": "react",
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"removeComments": true,
"strictNullChecks": true,
"preserveConstEnums": true,
"sourceMap": true,
"lib": ["es2015", "es2016", "dom"],
"types": ["node"]
}
}

+ 56
- 0
package.json Просмотреть файл

@@ -0,0 +1,56 @@
{
"version": "0.1.0",
"license": "MIT",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"files": [
"dist",
"src"
],
"engines": {
"node": ">=10"
},
"scripts": {
"start": "tsdx watch",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"lint": "tsdx lint",
"prepare": "tsdx build",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"peerDependencies": {
"react": ">=16"
},
"husky": {
"hooks": {
"pre-commit": "tsdx lint"
}
},
"name": "@theoryofnekomata/react-fretboard",
"author": "TheoryOfNekomata <allan.crisostomo@outlook.com>",
"module": "dist/react-fretboard.esm.js",
"devDependencies": {
"@babel/core": "^7.11.6",
"@storybook/addon-actions": "^6.0.22",
"@storybook/addon-docs": "^6.0.22",
"@storybook/addon-info": "^5.3.21",
"@storybook/addon-links": "^6.0.22",
"@storybook/addons": "^6.0.22",
"@storybook/react": "^6.0.22",
"@types/prop-types": "^15.7.3",
"@types/react": "^16.9.49",
"@types/react-dom": "^16.9.8",
"babel-loader": "^8.1.0",
"husky": "^4.3.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-docgen-typescript-loader": "^3.7.2",
"react-dom": "^16.13.1",
"react-is": "^16.13.1",
"ts-loader": "^8.0.4",
"tsdx": "^0.14.0",
"tslib": "^2.0.1",
"typescript": "^4.0.3"
}
}

+ 10
- 0
src/components/Fretboard/Fretboard.stories.tsx Просмотреть файл

@@ -0,0 +1,10 @@
import React from 'react'
import Fretboard, { Props } from './Fretboard'

export default {
title: 'Welcome',
}

// By passing optional props to this story, you can control the props of the component when
// you consume the story in a test.
export const Default = (props?: Partial<Props>) => <Fretboard {...props} />

+ 185
- 0
src/components/Fretboard/Fretboard.tsx Просмотреть файл

@@ -0,0 +1,185 @@
import React, { FC } from 'react'
import * as PropTypes from 'prop-types'

const propTypes = {
tunings: PropTypes.arrayOf(PropTypes.number),
frets: PropTypes.number,
leftHanded: PropTypes.bool,
}

export type Props = PropTypes.InferProps<typeof propTypes>

const PITCHES = 'C C# D D# E F F# G G# A A# B'.split(' ')

const Fretboard: FC<Props> = ({ tunings = [64, 59, 55, 50, 45, 40], frets = 24, leftHanded = false }) => {
if (!Array.isArray(tunings!)) {
return null
}

const strings = tunings!.map(t => new Array(frets).fill(0).map((_, i) => t! + i + 1))

return (
<div
style={{
border: '0.0625rem solid',
boxSizing: 'border-box',
transform: leftHanded
? 'perspective(6rem) rotateY(2deg) scaleX(1.375)'
: 'perspective(6rem) rotateY(-2deg) scaleX(1.375)',
transformOrigin: leftHanded ? 'left' : 'right',
}}
>
{strings!.map((pitches, stringNumber) => (
<div
style={{
display: 'flex',
flexDirection: leftHanded ? 'row-reverse' : 'row',
}}
>
<div
style={{
display: 'flex',
flexDirection: leftHanded ? 'row-reverse' : 'row',
width: '5rem',
height: '1rem',
padding: 0,
boxSizing: 'border-box',
}}
>
<input
type="number"
style={{
display: 'block',
width: '3rem',
height: '1rem',
padding: 0,
boxSizing: 'border-box',
}}
defaultValue={tunings[stringNumber]!}
min={0}
max={127}
/>
<span
style={{
display: 'block',
width: '2rem',
height: '1rem',
textAlign: leftHanded ? 'left' : 'right',
}}
>
{PITCHES[tunings[stringNumber]! % 12]}
{Math.floor(tunings[stringNumber]! / 12)}
</span>
</div>
<div
style={{
display: 'block',
position: 'relative',
width: '1rem',
height: '1rem',
flexShrink: 0,
padding: 0,
borderWidth: '0 0.0625rem',
borderStyle: 'none solid',
}}
>
<button
type="button"
style={{
position: 'relative',
display: 'block',
width: '1rem',
height: '1rem',
flexShrink: 0,
padding: 0,
border: 0,
backgroundColor: 'transparent',
}}
>
<span
style={{
display: 'block',
width: '100%',
height: `${0.03125 + stringNumber * 0.03125}rem`,
backgroundColor: 'currentColor',
}}
/>
</button>
</div>
{pitches.map((_, i) => (
<div
style={{
width: `${(frets! - i + frets! / 2) * 100}%`,
height: '1rem',
position: 'relative',
}}
>
{(i % 12 === 2 || i % 12 === 4 || i % 12 === 6 || i % 12 === 8 || i % 12 === 11) && stringNumber === 0 && (
<div
style={{
position: 'absolute',
top: 0,
height: `${tunings.length * 100}%`,
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-around',
flexDirection: 'column',
}}
>
<div
style={{
width: `${0.75 - i * (1 / 80)}rem`,
height: `${0.75 - i * (1 / 256)}rem`,
backgroundColor: 'currentColor',
opacity: 0.5,
borderRadius: '50%',
}}
/>
{i % 12 === 11 && (
<div
style={{
width: `${0.75 - i * (1 / 80)}rem`,
height: `${0.75 - i * (1 / 256)}rem`,
backgroundColor: 'currentColor',
opacity: 0.5,
borderRadius: '50%',
}}
/>
)}
</div>
)}
<button
key={i}
type="button"
style={{
position: 'relative',
display: 'block',
width: '100%',
height: '1rem',
padding: 0,
borderWidth: '0 0.0625rem',
borderStyle: 'none solid',
backgroundColor: 'transparent',
}}
>
<span
style={{
display: 'block',
width: '100%',
height: `${0.03125 + stringNumber * 0.03125}rem`,
backgroundColor: 'currentColor',
}}
/>
</button>
</div>
))}
</div>
))}
</div>
)
}

Fretboard.propTypes = propTypes

export default Fretboard

+ 11
- 0
src/index.tsx Просмотреть файл

@@ -0,0 +1,11 @@
import React, { FC, HTMLAttributes, ReactChild } from 'react'

export interface Props extends HTMLAttributes<HTMLDivElement> {
children?: ReactChild
}

// Please do not use types off of a default export module or else Storybook Docs will suffer.
// see: https://github.com/storybookjs/storybook/issues/9556
export const Thing: FC<Props> = ({ children }) => {
return <div>{children || `the snozzberries taste like snozzberries`}</div>
}

+ 19
- 0
tsconfig.json Просмотреть файл

@@ -0,0 +1,19 @@
{
"include": ["src", "types"],
"compilerOptions": {
"module": "esnext",
"lib": ["dom", "esnext"],
"importHelpers": true,
"declaration": true,
"sourceMap": true,
"rootDir": "./src",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"jsx": "react",
"esModuleInterop": true
}
}

+ 12687
- 0
yarn.lock
Разница между файлами не показана из-за своего большого размера
Просмотреть файл


Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить