Antimatter UI

A small library of UI components and styles for Animatter Audio.

Github

File structure

antimatter-plugin-template/
├── Assets // Shared assets between the js and Juce apps.
├── js // The React front end.
├───── node_modules/@antimatter-audio/antimatter-ui // The UI component library <-- You are here.
├── juce // The Juce plugin application.

Getting started

This project is intended to be used as a dependency in the antimatter-plugin-template repository.

To use antimatter-ui within the context of antimatter-plugin-template, follow the setup instructions here.

Development

antimatter-plugin-template contains a demo of all antimatter-ui components.

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

To view a demo of these components, follow the instructions for setting up antimatter-plugin-template here

Adding new components

If you build a new component for this library, 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 core/Buttons/Button.tsx, core/Input/Dropdown.tsx, and core/Input/Slider.tsx for examples of how to get and set Juce's ToggleState, ComboBoxState, and SliderState.

See the main project README file for more information.

Theming

See the main project README file for more information.

Publishing

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