TheoryOfNekomata
/
react-fretboard
1
0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Aktivita
Procházet zdrojové kódy

Initial commits 

Add files. Quick hack but it displays OK so far.
master
TheoryOfNekomata před 4 roky
revize
1f8cd713e5
17 změnil soubory, kde provedl 13117 přidání a 0 odebrání
Rozdělené zobrazení
Diff Options
Zobrazit statistiky Stáhněte soubor opravy Stáhněte rozdílový soubor
  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 Zobrazit soubor

@@ -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 Zobrazit soubor

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

+ 6
- 0
.prettierrc Zobrazit soubor

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

+ 24
- 0
.storybook/main.js Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

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

Fretboard for any stringed instrument, made with React.

## License

[MIT](./LICENSE)

+ 3
- 0
example/.gitignore Zobrazit soubor

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

+ 14
- 0
example/index.html Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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 Zobrazit soubor

@@ -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
Diff nebyl zobrazen, protože je příliš veliký
Zobrazit soubor


Zapsat Náhled
Načítá se…
Zrušit
Uložit