dtinth / webmidicon Goto Github PK

Background

The WebMIDICon project is using Twind to style the app. It is very similar to Tailwind CSS but is a JS-based solution.

However, Twind has no updates and 1.0 is not yet released for a long time.

So I want to migrate the app to use Tailwind CSS, because Tailwind CSS v3 is released with JIT mode and has great integration with Vite and is more popular, meaning that it would be easier for people to contribute to the project.

Task

• Migrate the app from twind to tailwindcss
• Your PR should:
  • Add Tailwind CSS to the project following the guide for Vite.
  • Migrate the theme from index.tsx into tailwind.config.cjs.
  • Remove twind from dependency and migrate the twind syntax to Tailwind CSS.
• Automated builds must be passing.
• Please include a screenshot in your PR to confirm that it is working.

Hacktoberfest

If you would like to work on this task, please write a comment stating your intent. We will then assign the issue to you. To ensure continuity, the issue will be unassigned after 3 days of inactivity — so please keep us updated.

Getting assigned to an issue is NOT a reservation. It is simply to let others know that someone is already working on it to avoid duplicated efforts. The first person who submits a valid Pull Request (PR) that resolves the issue will have their PR merged, regardless of who was assigned to the issue. However, if you are assigned to an issue and start working on it, but someone else submits a valid PR before you, you can still submit a valid PR even if it has conflicts. The PR will be given the "hacktoberfest-accepted" label and the issue will be closed.

If you encounter any problem, please include relevant logs and screenshot so it’s easy to troubleshoot.

See:

• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template-typescript/src/serviceWorker.ts
• https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

This issue has been automatically created by todo-actions based on a TODO comment found in src/index.tsx:7. It will automatically be closed when the TODO comment is removed from the default branch (master).

By putting CSS in JS, this will help achieve more cohesion in the code. I decided to use react-emotion because it is more lightweight.

Right now, BeginnerChordMachine is already implemented with react-emotion.

If I have multiple MIDI outputs, when I start WebMIDICon, it always select the first available output.

In this example screenshot I have two MIDI outputs:

1. Network Network Jam
2. IAC Driver Bus 1

Network Network Jam is selected by default because it is the first available one.

Current behavior

When I select IAC Driver Bus 1 and hit “Refresh” the selection reverts to Network Network Jam.

Expected behavior

When I select a MIDI output device, and hit “Refresh”, WebMIDICon should remember the selection. Use localStorage to remember the selection.

PR requirements

Please test your PR, include a screenshot a video to confirm that it is working.

Useful resources

• WebMIDICon documentation — https://docs.dt.in.th/webmidicon/index.html
• Vite.js — https://vitejs.dev/
• MobX — https://mobx.js.org/README.html

If you need virtual MIDI devices, you can use these:

• Windows — https://www.nerds.de/en/loopbe30.html
• Mac — https://support.apple.com/guide/audio-midi-setup/transfer-midi-information-between-apps-ams1013/mac

Right now, the user interface is touch based. Most controls use touchstart touchmove touchend to respond to events, and so does not work when using mouse.

Following components are not useable with a mouse:

• Buttons on KeyboardToolbar (transpose and octave controls — theses buttons needs to respond when touch start)
• PianoKeyboard
• IsomorphicKeyboard
• DrumPad
• Pedal
• BeginnerChordMachine

At the top right of the app, a list of MIDI devices is displayed.

However, it does not update automatically (requires refreshing the page). Please help to make list of MIDI devices update on-the-fly.

This project is pretty old, may be a good idea to update Babel, webpack, loaders, …

how to use path-to-regexp in this template
when i use path-to-regexp in this template
here wii be a error

node_modules/react-router/esm/react-router.js:9:7: error: No matching export in "node_modules/path-to-regexp/dist.es2015/index.js" for import "default"
9 │ import pathToRegexp from 'path-to-regexp';
╵ ~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
node_modules/react-router/esm/react-router.js:9:7: error: No matching export in "node_modules/path-to-regexp/dist.es2015/index.js" for import "default"

The criteria for Add to Home Screen feature is listed here:
https://developers.google.com/web/fundamentals/app-install-banners/

This issue has been automatically created by todo-actions based on a TODO comment found in public/index.html:11. It will automatically be closed when the TODO comment is removed from the default branch (master).