Antimatter UI

A small library of UI components for Animatter Audio.

NPM

Github

Getting started

1. Clone this repo: git clone [email protected]:antimatter-audio/antimatter-ui.git.

2. Open this project in VS Code, and hit command-j to bring up the terminal.

3. Run npm install.

Development

This library is intended to be used as a dependency in antimatter-plugin-template.

antimatter-plugin-template is made to bootstrap Juce plugins, but the front end application in the js folder can also be viewed in a web browser. That way, you do not need to worry about running Juce while working on UI components.

To view the most recent published version of antimatter-ui:

1. Clone the antimatter-plugin-template repo: git clone [email protected]:antimatter-audio/antimatter-plugin-template.git

2. Go to the antimatter-plugin-template folder, and open the js folder in VS Code. Hit command-j to bring up the terminal.

3. Run npm install.

4. Run npm run start to start your development server.

5. Go go http://localhost:3000 in your browser.

The default antimatter-plugin-template layout should now be viewable. This layout is a demo of all of the antimatter-ui components, and includes the latest published version of this library.

NOTE: You will not see any local changes you have made to this library yet. To preview your changes locally before publishing, you will need to npm link this project with the antimatter-plugin-template front end application.

1. In this project, run: npm run link-template.

2. In the js folder in antimatter-plugin-template, run: npm run link-ui.

3. If your local development server is running in antimatter-plugin-template, hit option-c to shut it down.

4. Run npm run start in antimatter-plugin-template to start (or restart) your development server.

5. Run npm run start in this project to build your local changes.

You should now see your local changes to these components at http://localhost:3000.

Adding new components

If you add a new component to this library, make sure to also add the component to the demo in antimatter-plugin-template.

If your new component controls an AudioProcessorValueTreeState paramater in Juce, you will need to handle getting and setting that state in your React component, and you will also need to set up a parameter for that state in the demo Juce app in antimatter-plugin-template.

See components/Buttons/Button.tsx, components/Input/Dropdown.tsx, and components/Input/Slider.tsx for examples of how to get and set Juce's ToggleState, ComboBoxState, and SliderState.

See the README file in the /juce directory in the antimatter-plugin-template repo for more information on setting up an AudioProcessorValueTreeState parameter in the demo app.

Publish

After making updates in this repo, you will want to publish your changes to npm. This will allow all projects that use the Antimatter UI library to upgrade to the latest version.

First, commit all changes in this repo to git:

git add -A

git commit -m "your update message here"

git push

If you are working on your main branch, that's all you need to do.

If you are working on a feature branch, go to github, open a new pull request, and then merge the pull request.

Then, you can switch back to your main branch: git checkout main

And update your local main branch with the changes from github: git pull

When you have gotten everything merged to git, you are ready to publish this project to the npm registry!

First, run:

npm run build

Then, depending on whether your update is a major change, minor change, or a patch, run one of the following: npm version major || npm version minor || npm version patch

Finally, run: npm publish