@antimatter-audio/antimatter-ui 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -8
- package/dist/index.js +3 -3
- package/package.json +5 -3
package/README.md
CHANGED
|
@@ -1,22 +1,76 @@
|
|
|
1
1
|
# Antimatter UI
|
|
2
2
|
|
|
3
|
-
A small
|
|
3
|
+
A small library of UI components for Animatter Audio.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[NPM](https://www.npmjs.com/package/@antimatter-audio/antimatter-ui?activeTab=readme)
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
[Github](http://github.com/antimatter-audio/antimatter-ui)
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Getting started
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
1. Clone this repo: `git clone git@github.com:antimatter-audio/antimatter-ui.git`.
|
|
12
|
+
2. Open this project in VS Code, and hit command-j to bring up the terminal.
|
|
13
|
+
3. Run `npm install`.
|
|
12
14
|
|
|
13
|
-
|
|
15
|
+
## Development
|
|
14
16
|
|
|
15
|
-
|
|
17
|
+
This library is intended to be used as a dependency in the [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-plugin-template) React application.
|
|
18
|
+
|
|
19
|
+
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.
|
|
20
|
+
|
|
21
|
+
To view the most recent _published_ version of antimatter-ui:
|
|
22
|
+
|
|
23
|
+
1. Clone the [antimatter-plugin-template](http://github.com/antimatter-audio/antimatter-plugin-template) repo: `git clone git@github.com:antimatter-audio/antimatter-plugin-template.git`
|
|
24
|
+
|
|
25
|
+
2. Go to the **antimatter-plugin-template** folder, and open the `js` folder in VS Code. Hit command-j to bring up the terminal.
|
|
26
|
+
3. Run `npm install`.
|
|
27
|
+
4. Run `npm run start` to start your development server.
|
|
28
|
+
5. Go go [http://localhost:3000](http://localhost:3000) in your browser.
|
|
29
|
+
|
|
30
|
+
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.
|
|
31
|
+
|
|
32
|
+
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](https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557) this project with the **antimatter-plugin-template** front end application.
|
|
33
|
+
|
|
34
|
+
1. In **this project**, run: `npm run link-template`
|
|
35
|
+
2. In the `js` folder in **antimatter-plugin-template**, run: `npm run link-ui`.
|
|
36
|
+
3. If your local development server is running in **antimatter-plugin-template**, hit option-c to shut it down.
|
|
37
|
+
4. Run `npm run start` in **antimatter-plugin-template** to start (or restart) your development server.
|
|
38
|
+
|
|
39
|
+
You should now see your local changes to these components at [http://localhost:3000](http://localhost:3000).
|
|
40
|
+
|
|
41
|
+
### Adding new components
|
|
42
|
+
|
|
43
|
+
If you add a new component to this library, make sure to also add the component to the layout in **antimatter-plugin-template**.
|
|
44
|
+
|
|
45
|
+
## Publish
|
|
46
|
+
|
|
47
|
+
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.
|
|
48
|
+
|
|
49
|
+
First, commit all changes in this repo to git:
|
|
50
|
+
|
|
51
|
+
`git add -A`
|
|
52
|
+
|
|
53
|
+
`git commit -m "your update message here"`
|
|
54
|
+
|
|
55
|
+
`git push`
|
|
56
|
+
|
|
57
|
+
If you are working on your `main` branch, that's all you need to do.
|
|
58
|
+
|
|
59
|
+
If you are working on a feature branch, go to [github](http://github.com/antimatter-audio/antimatter-ui), open a new pull request, and then merge the pull request.
|
|
60
|
+
|
|
61
|
+
Then, you can switch back to your `main` branch:
|
|
62
|
+
`git checkout main`
|
|
63
|
+
|
|
64
|
+
And update your local `main` branch with the changes from github:
|
|
65
|
+
`git pull`
|
|
66
|
+
|
|
67
|
+
When you have gotten everything merged to git, you are ready to publish this project to the npm registry!
|
|
68
|
+
|
|
69
|
+
First, run:
|
|
16
70
|
|
|
17
71
|
`npm run build`
|
|
18
72
|
|
|
19
|
-
Then, depending on whether your update is a major change, minor change, or a patch, run one of the following:
|
|
73
|
+
Then, depending on whether your update is a [major change, minor change, or a patch](https://docs.npmjs.com/about-semantic-versioning#incrementing-semantic-versions-in-published-packages), run one of the following:
|
|
20
74
|
`npm version major` || `npm version minor` || `npm version patch`
|
|
21
75
|
|
|
22
76
|
Finally, run:
|
package/dist/index.js
CHANGED
|
@@ -33,7 +33,7 @@ function styleInject(css, ref) {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
var css_248z$8 = "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\nhtml
|
|
36
|
+
var css_248z$8 = "/* http://meyerweb.com/eric/tools/css/reset/ \n v2.0 | 20110126\n License: none (public domain)\n*/\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\nsection {\n display: block;\n}\n\nbody {\n line-height: 1;\n}\n\nol,\nul {\n list-style: none;\n}\n\nblockquote,\nq {\n quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n content: \"\";\n content: none;\n}\n\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n.flex-align-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.flex-align-center-vertical {\n display: flex;\n align-items: center;\n}\n\n.flex-align-center-horizontal {\n display: flex;\n justify-content: center;\n}\n\n.flex-align-start {\n display: flex;\n justify-content: flex-start;\n}\n\n.flex-align-end {\n display: flex;\n justify-content: flex-end;\n}\n\n.flex-direction-column {\n display: flex;\n flex-direction: column;\n}\n\n.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n\n/* Margin Top */\n.margin-top-none {\n margin-top: 0;\n}\n\n.margin-top-xsmall {\n margin-top: 2px;\n}\n\n.margin-top-small {\n margin-top: 4px;\n}\n\n.margin-top-medium {\n margin-top: 12px;\n}\n\n.margin-top-large {\n margin-top: 20px;\n}\n\n.margin-top-xlarge {\n margin-top: 24px;\n}\n\n/* Margin Bottom */\n.margin-bottom-none {\n margin-bottom: 0;\n}\n\n.margin-bottom-xsmall {\n margin-bottom: 2px;\n}\n\n.margin-bottom-small {\n margin-bottom: 4px;\n}\n\n.margin-bottom-medium {\n margin-bottom: 12px;\n}\n\n.margin-bottom-large {\n margin-bottom: 20px;\n}\n\n.margin-bottom-xlarge {\n margin-bottom: 24px;\n}\n\n/* Margin Left */\n.margin-left-none {\n margin-left: 0;\n}\n\n.margin-left-xsmall {\n margin-left: 2px;\n}\n\n.margin-left-small {\n margin-left: 4px;\n}\n\n.margin-left-medium {\n margin-left: 12px;\n}\n\n.margin-left-large {\n margin-left: 20px;\n}\n\n.margin-left-xlarge {\n margin-left: 24px;\n}\n\n/* Margin Right */\n.margin-right-none {\n margin-right: 0;\n}\n\n.margin-right-xsmall {\n margin-right: 2px;\n}\n\n.margin-right-small {\n margin-right: 4px;\n}\n\n.margin-right-medium {\n margin-right: 12px;\n}\n\n.margin-right-large {\n margin-right: 20px;\n}\n\n.margin-right-xlarge {\n margin-right: 24px;\n}\n\n/* Margin Vertical */\n.margin-vertical-none {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.margin-vertical-xsmall {\n margin-top: 2px;\n margin-bottom: 2px;\n}\n\n.margin-vertical-small {\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.margin-vertical-medium {\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.margin-vertical-large {\n margin-top: 20px;\n margin-bottom: 20px;\n}\n\n.margin-vertical-xlarge {\n margin-top: 24px;\n margin-bottom: 24px;\n}\n\n/* Margin Horizontal */\n.margin-horizontal-none {\n margin-left: 0;\n margin-right: 0;\n}\n\n.margin-horizontal-xsmall {\n margin-left: 2px;\n margin-right: 2px;\n}\n\n.margin-horizontal-small {\n margin-left: 4px;\n margin-right: 4px;\n}\n\n.margin-horizontal-medium {\n margin-left: 12px;\n margin-right: 12px;\n}\n\n.margin-horizontal-large {\n margin-left: 20px;\n margin-right: 20px;\n}\n\n.margin-horizontal-xlarge {\n margin-left: 24px;\n margin-right: 24px;\n}\n\n/* Margin Around */\n.margin-around-none {\n margin-left: 0;\n margin-right: 0;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.margin-around-xsmall {\n margin-left: 2px;\n margin-right: 2px;\n margin-top: 2px;\n margin-bottom: 2px;\n}\n\n.margin-around-small {\n margin-left: 4px;\n margin-right: 4px;\n margin-top: 4px;\n margin-bottom: 4px;\n}\n\n.margin-around-medium {\n margin-left: 12px;\n margin-right: 12px;\n margin-top: 12px;\n margin-bottom: 12px;\n}\n\n.margin-around-large {\n margin-left: 20px;\n margin-right: 20px;\n margin-top: 20px;\n margin-bottom: 20px;\n}\n\n.margin-around-xlarge {\n margin-left: 24px;\n margin-right: 24px;\n margin-top: 24px;\n margin-bottom: 24px;\n}\n\n/* Padding */\n/* Padding Top */\n.padding-top-none {\n padding-top: 0;\n}\n\n.padding-top-xsmall {\n padding-top: 2px;\n}\n\n.padding-top-small {\n padding-top: 4px;\n}\n\n.padding-top-medium {\n padding-top: 12px;\n}\n\n.padding-top-large {\n padding-top: 20px;\n}\n\n.padding-top-xlarge {\n padding-top: 24px;\n}\n\n/* Padding Bottom */\n.padding-bottom-none {\n padding-bottom: 0;\n}\n\n.padding-bottom-xsmall {\n padding-bottom: 2px;\n}\n\n.padding-bottom-small {\n padding-bottom: 4px;\n}\n\n.padding-bottom-medium {\n padding-bottom: 12px;\n}\n\n.padding-bottom-large {\n padding-bottom: 20px;\n}\n\n.padding-bottom-xlarge {\n padding-bottom: 24px;\n}\n\n/* Padding Left */\n.padding-left-none {\n padding-left: 0;\n}\n\n.padding-left-xsmall {\n padding-left: 2px;\n}\n\n.padding-left-small {\n padding-left: 4px;\n}\n\n.padding-left-medium {\n padding-left: 12px;\n}\n\n.padding-left-large {\n padding-left: 20px;\n}\n\n.padding-left-xlarge {\n padding-left: 24px;\n}\n\n/* Padding Right */\n.padding-right-none {\n padding-right: 0;\n}\n\n.padding-right-xsmall {\n padding-right: 2px;\n}\n\n.padding-right-small {\n padding-right: 4px;\n}\n\n.padding-right-medium {\n padding-right: 12px;\n}\n\n.padding-right-large {\n padding-right: 20px;\n}\n\n.padding-right-xlarge {\n padding-right: 24px;\n}\n\n/* Padding Vertical */\n.padding-vertical-none {\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.padding-vertical-xsmall {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n\n.padding-vertical-small {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n.padding-vertical-medium {\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n.padding-vertical-large {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.padding-vertical-xlarge {\n padding-top: 24px;\n padding-bottom: 24px;\n}\n\n/* Padding Horizontal */\n.padding-horizontal-none {\n padding-left: 0;\n padding-right: 0;\n}\n\n.padding-horizontal-xsmall {\n padding-left: 2px;\n padding-right: 2px;\n}\n\n.padding-horizontal-small {\n padding-left: 4px;\n padding-right: 4px;\n}\n\n.padding-horizontal-medium {\n padding-left: 12px;\n padding-right: 12px;\n}\n\n.padding-horizontal-large {\n padding-left: 20px;\n padding-right: 20px;\n}\n\n.padding-horizontal-xlarge {\n padding-left: 24px;\n padding-right: 24px;\n}\n\n/* Padding Around */\n.padding-around-none {\n padding-left: 0;\n padding-right: 0;\n padding-top: 0;\n padding-bottom: 0;\n}\n\n.padding-around-xsmall {\n padding-left: 2px;\n padding-right: 2px;\n padding-top: 2px;\n padding-bottom: 2px;\n}\n\n.padding-around-small {\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 4px;\n padding-bottom: 4px;\n}\n\n.padding-around-medium {\n padding-left: 12px;\n padding-right: 12px;\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n.padding-around-large {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 20px;\n padding-bottom: 20px;\n}\n\n.padding-around-xlarge {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: 24px;\n padding-bottom: 24px;\n}\n\n.height-100-percent {\n height: 100%;\n}\n\n.flex-auto {\n flex: auto;\n}";
|
|
37
37
|
styleInject(css_248z$8);
|
|
38
38
|
|
|
39
39
|
var css_248z$7 = ".Tabs {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #fff;\n background-color: #737373;\n border: 0;\n border-radius: 3px;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item {\n font-size: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4px 8px;\n cursor: pointer;\n vertical-align: middle;\n white-space: nowrap;\n text-decoration: none;\n text-transform: uppercase;\n text-align: center;\n color: #fff;\n background-color: #737373;\n border: 0;\n appearance: none;\n user-select: none;\n}\n.Tabs .Tabs-item:first-child {\n border-radius: 3px 0 0 3px;\n}\n.Tabs .Tabs-item:last-child {\n border-radius: 0 3px 3px 0;\n}\n.Tabs .Tabs-item:hover, .Tabs .Tabs-item:focus, .Tabs .Tabs-item:active {\n outline: 0;\n}\n.Tabs .Tabs-item:hover {\n background-color: #606060;\n color: #eee;\n}\n.Tabs .Tabs-item[data-headlessui-state=selected] {\n background-color: #404040;\n}\n.Tabs .Tabs-item[data-headlessui-state=\"selected hover\"] {\n background-color: #404040;\n}";
|
|
@@ -341,7 +341,7 @@ var Knob = function(param) {
|
|
|
341
341
|
return "".concat(Math.round(valueRaw), "%");
|
|
342
342
|
},
|
|
343
343
|
dragSensitivity: 0.009,
|
|
344
|
-
orientation:
|
|
344
|
+
orientation: 'vertical',
|
|
345
345
|
onValueRawChange: setValue
|
|
346
346
|
}, /*#__PURE__*/ React__default.createElement("div", {
|
|
347
347
|
className: "Knob-inner",
|
|
@@ -413,7 +413,7 @@ var TextLabel = function(param) {
|
|
|
413
413
|
return /*#__PURE__*/ React.createElement("span", {
|
|
414
414
|
id: id,
|
|
415
415
|
style: style,
|
|
416
|
-
className: classnames(
|
|
416
|
+
className: classnames('TextLabel', className, padding.length === 1 && 'padding-around-' + padding, padding.length === 2 && 'padding-vertical-' + padding[0], padding.length === 2 && 'padding-horizontal-' + padding[1], padding.length === 4 && 'padding-top-' + [
|
|
417
417
|
padding[0]
|
|
418
418
|
], padding.length === 4 && 'padding-right-' + [
|
|
419
419
|
padding[1]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@antimatter-audio/antimatter-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "React UI component library for Antimatter Audio.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"scripts": {
|
|
13
13
|
"build": "rollup -c",
|
|
14
14
|
"start": "rollup -c -w",
|
|
15
|
-
"link-
|
|
16
|
-
"unlink-
|
|
15
|
+
"link-template": "npm link && npm link '../antimatter-plugin-template/js/node_modules/react'",
|
|
16
|
+
"unlink-template": "npm unlink -g && npm i"
|
|
17
17
|
},
|
|
18
18
|
"files": [
|
|
19
19
|
"dist"
|
|
@@ -37,7 +37,9 @@
|
|
|
37
37
|
"@types/react-slider": "^1.3.6",
|
|
38
38
|
"babel-core": "^6.26.3",
|
|
39
39
|
"babel-runtime": "^6.26.0",
|
|
40
|
+
"eslint-config-prettier": "^9.1.0",
|
|
40
41
|
"globals": "^15.3.0",
|
|
42
|
+
"prettier": "3.3.2",
|
|
41
43
|
"react": "^18.3.1",
|
|
42
44
|
"react-dom": "^18.3.1",
|
|
43
45
|
"rollup": "^4.18.0",
|