Merge branch 'main' into fancy-button-content-fitting-mode

.babelrc

@@ -1,6 +1,3 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-typescript"
-    ]
+    "presets": ["@babel/preset-env", "@babel/preset-typescript"]
 }

.eslintrc.json

@@ -14,7 +14,10 @@
         }
     },
     "rules": {
-        "@typescript-eslint/no-unused-expressions": [1, {"allowShortCircuit": true, "allowTernary": true}],
+        "@typescript-eslint/no-unused-expressions": [
+            1,
+            { "allowShortCircuit": true, "allowTernary": true }
+        ],
         "no-mixed-operators": "off",
         "no-mixed-operators/no-mixed-operators": 1,
         "@typescript-eslint/type-annotation-spacing": 1,
@@ -35,10 +38,7 @@
         "jsdoc/require-param": 1,
         "jsdoc/require-param-description": 0,
         "jsdoc/require-param-name": 1,
-        "jsdoc/require-param-type": [
-            "warn",
-            { "contexts": ["TSMethodSignature"] }
-        ],
+        "jsdoc/require-param-type": ["warn", { "contexts": ["TSMethodSignature"] }],
         "jsdoc/require-property": 1,
         "jsdoc/require-property-description": 1,
         "jsdoc/require-property-name": 1,

.github/CONTRIBUTING.md

@@ -10,16 +10,16 @@ To report a bug, request a feature, or even ask a question, make use of the GitH
 section for [PixiUI][issues]. When submitting an issue please take the following steps:
 
 1. **Search for existing issues.** Your question or bug may have already been answered or fixed,
-be sure to search the issues first before putting in a duplicate issue.
+   be sure to search the issues first before putting in a duplicate issue.
 
 2. **Create an isolated and reproducible test case.** If you are reporting a bug, make sure you
-also have a minimal, runnable, code example that reproduces the problem you have.
+   also have a minimal, runnable, code example that reproduces the problem you have.
 
 3. **Include a live example.** After narrowing your code down to only the problem areas, make use
-of [jsFiddle][fiddle], [jsBin][jsbin], or a link to your live site so that we can view a live example of the problem.
+   of [jsFiddle][fiddle], [jsBin][jsbin], or a link to your live site so that we can view a live example of the problem.
 
 4. **Share as much information as possible.** Include browser version affected, your OS, version of
-the library, steps to reproduce, etc. "X isn't working!!!1!" will probably just be closed.
+   the library, steps to reproduce, etc. "X isn't working!!!1!" will probably just be closed.
 
 > NOTE: if you are looking for support, please visit the [FAQ][faq], [forums][forums], [wiki][wiki]
 > or go through the [tutorials][tutorials].
@@ -31,14 +31,13 @@ the library, steps to reproduce, etc. "X isn't working!!!1!" will probably just
 To setup for making changes you will need to take a few steps, we've outlined them below:
 
 1. Ensure you have node.js installed. You can download node.js from [nodejs.org][node]. Because
-PixiUI uses modern JS features, you will need a modern version of node. v4+ is recommended.
+   PixiUI uses modern JS features, you will need a modern version of node. v4+ is recommended.
 
 2. Fork the **[ui][ui]** repository, if you are unsure how to do this GitHub has a guides
-for the [command line][fork-cli] and for the [GitHub Client][fork-gui].
+   for the [command line][fork-cli] and for the [GitHub Client][fork-gui].
 
 3. Next, run `npm install` from within your clone of your fork. That will install dependencies
-necessary to build PixiUI.
-
+   necessary to build PixiUI.
 
 ### Making a Change
 
@@ -48,9 +47,9 @@ make your change to (and send a PR to) depends on the type of change you are mak
 
 Here is our branch breakdown:
 
-- `main` - Make your change to the `main` branch if it is an *urgent* hotfix.
-- `dev` - Make your change to `dev` if it is a *non-urgent* bugfix or a backwards-compatible feature.
-- `v4.x`, `v5.3.x`, `v5.2.x`, etc - Make your change to legacy branches to patch old releases if your fix *only* applies to older versions.
+-   `main` - Make your change to the `main` branch if it is an _urgent_ hotfix.
+-   `dev` - Make your change to `dev` if it is a _non-urgent_ bugfix or a backwards-compatible feature.
+-   `v4.x`, `v5.3.x`, `v5.2.x`, etc - Make your change to legacy branches to patch old releases if your fix _only_ applies to older versions.
 
 Your change should be made directly to the branch in your fork, or to a branch in your fork made off of
 one of the above branches.
@@ -62,13 +61,13 @@ from your fork to the main **ui** repository on the branch you used in the `Maki
 
 ## Quickie Code Style Guide
 
-- Use 4 spaces for tabs, never tab characters.
-- No trailing whitespace, blank lines should have no whitespace.
-- Always favor strict equals `===` unless you *need* to use type coercion.
-- Follow conventions already in the code, and listen to eslint.
-- **Ensure changes are eslint validated.** After making a change be sure to run the build process
-to ensure that you didn't break anything. You can do this with `npm test` which will run
-eslint, rebuild, then run the test suite.
+-   Use 4 spaces for tabs, never tab characters.
+-   No trailing whitespace, blank lines should have no whitespace.
+-   Always favor strict equals `===` unless you _need_ to use type coercion.
+-   Follow conventions already in the code, and listen to eslint.
+-   **Ensure changes are eslint validated.** After making a change be sure to run the build process
+    to ensure that you didn't break anything. You can do this with `npm test` which will run
+    eslint, rebuild, then run the test suite.
 
 ## Contributor Code of Conduct
 

.github/ISSUE_TEMPLATE/bug-report.md

@@ -4,7 +4,6 @@ about: Create a report to help us improve
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
 <!--
@@ -18,6 +17,7 @@ Links to a running example of the problem are best!
 -->
 
 <!-- Bug Report (delete if not applicable) -->
+
 ### Expected Behavior
 
 ### Current Behavior
@@ -28,7 +28,7 @@ Links to a running example of the problem are best!
 
 ### Environment
 
-- **version**: _e.g. 8.0.0_
-- **Browser & Version**: _e.g. Chrome 67_
-- **OS & Version**: _e.g. Ubuntu 18.04_
-- **Running Example**: _url_
+-   **version**: _e.g. 8.0.0_
+-   **Browser & Version**: _e.g. Chrome 67_
+-   **OS & Version**: _e.g. Ubuntu 18.04_
+-   **Running Example**: _url_

.github/ISSUE_TEMPLATE/feature-request.md

@@ -4,15 +4,16 @@ about: Suggest an idea for this project
 title: ''
 labels: enhancement
 assignees: ''
-
 ---
 
 **Please Describe The Problem To Be Solved**
+
 <!--
 (Please present a concise description of the problem to be addressed by this feature request.)
 -->
 
 **(Optional): Suggest A Solution**
+
 <!--
 (Please describe your preferred solution to the problem. Include an example of the public facing API so it can be discussed)
 -->

.github/workflows/doc.yml

@@ -1,27 +1,27 @@
 name: Build and Deploy Docs
 on: [push]
 permissions:
-  contents: write
+    contents: write
 jobs:
-  build-and-deploy:
-    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
-    runs-on: ubuntu-latest
-    if: contains(github.ref, 'refs/tags/v') || github.ref == 'refs/heads/docs'  || github.ref == 'refs/heads/main'
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v3
+    build-and-deploy:
+        concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
+        runs-on: ubuntu-latest
+        if: contains(github.ref, 'refs/tags/v') || github.ref == 'refs/heads/docs'  || github.ref == 'refs/heads/main'
+        steps:
+            - name: Checkout 🛎️
+              uses: actions/checkout@v3
 
-      - name: Configure Node
-        uses: actions/setup-node@v1
-        with:
-            node-version: "18.x"
+            - name: Configure Node
+              uses: actions/setup-node@v1
+              with:
+                  node-version: '18.x'
 
-      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
-        run: |
-          npm ci
-          npm run docs
+            - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+              run: |
+                  npm ci
+                  npm run docs
 
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          folder: docs # The folder the action should deploy.
+            - name: Deploy 🚀
+              uses: JamesIves/github-pages-deploy-action@v4
+              with:
+                  folder: docs # The folder the action should deploy.

.github/workflows/release.yml

@@ -3,17 +3,17 @@ name: Release Notes
 on: [push]
 
 jobs:
-  release:
-    runs-on: macos-latest
-    if: contains(github.ref, 'refs/tags/v')
-    steps:
-      - name: Check out repository code
-        uses: actions/checkout@v2
-      - name: Install GitHub CLI
-        run: |
-          brew update
-          brew install gh
-      - name: Generate Release
-        run: gh release create ${{github.ref_name}} --generate-notes
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    release:
+        runs-on: macos-latest
+        if: contains(github.ref, 'refs/tags/v')
+        steps:
+            - name: Check out repository code
+              uses: actions/checkout@v2
+            - name: Install GitHub CLI
+              run: |
+                  brew update
+                  brew install gh
+            - name: Generate Release
+              run: gh release create ${{github.ref_name}} --generate-notes
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/testing.yml

@@ -3,20 +3,20 @@ name: Testing
 on: [pull_request]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-            node-version: "18.x"
-      - run: npm ci
-      - run: npm run lint
-      - run: npm run types
-    #   TODO: add tests
-    #   - run: npm run test
-        env:
-          CI: true
-      - run: npm run docs
-      - run: npm run build
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v2
+            - name: Use Node.js
+              uses: actions/setup-node@v1
+              with:
+                  node-version: '18.x'
+            - run: npm ci
+            - run: npm run lint
+            - run: npm run types
+              #   TODO: add tests
+              #   - run: npm run test
+              env:
+                  CI: true
+            - run: npm run docs
+            - run: npm run build

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "printWidth": 100
+}

.storybook/main.js

@@ -12,7 +12,7 @@ module.exports = {
         '@storybook/addon-highlight',
         '@storybook/addon-storysource',
         '@storybook/addon-webpack5-compiler-babel',
-        '@chromatic-com/storybook'
+        '@chromatic-com/storybook',
     ],
     core: {
         channelOptions: { allowFunction: false, maxDepth: 10 },

README.md

@@ -16,11 +16,10 @@ Here are some useful resources:
 
 Depending on your version of PixiJS, you'll need to figure out which major version of PixiUI to use.
 
-| PixiJS      | PixiUI         |
-|-------------|----------------|
-| v7.x        | v1.x           |
-| v8.x        | v2.x           |
-
+| PixiJS | PixiUI |
+| ------ | ------ |
+| v7.x   | v1.x   |
+| v8.x   | v2.x   |
 
 ## Install
 
@@ -31,33 +30,34 @@ npm install @pixi/ui
 There is no default export. The correct way to import pixi-ui is:
 
 ## Usage
+
 ```js
 import { Button } from '@pixi/ui';
 
 const button = new Button();
 
-button.onPress.connect(() => console.log('Button pressed!') );
+button.onPress.connect(() => console.log('Button pressed!'));
 ```
 
 To use any of the components you can go to it's page in the [sandbox](https://pixijs.io/ui/storybook/),
 and copy/paste the example code to your project (check the `Code` tab):
 
 ## Components
 
--  [Switcher](https://pixijs.io/ui/storybook/?path=/story/components-switcher-sprites--sprites)
--  [Button](https://pixijs.io/ui/storybook/?path=/story/components-button-button-container-sprite--button-container-sprite)
--  [CheckBox](https://pixijs.io/ui/storybook/?path=/story/components-checkbox-use-graphics--use-graphics)
--  [FancyButton](https://pixijs.io/ui/storybook/?path=/story/components-fancybutton-using-sprite-and-bitmaptext--using-sprite-and-bitmap-text)
--  [Input](https://pixijs.io/ui/storybook/?path=/story/components-input-use-graphics--use-graphics)
--  [List](https://pixijs.io/ui/storybook/?path=/story/components-list-use-graphics--use-graphics)
--  [MaskedFrame](https://pixijs.io/ui/storybook/?path=/story/components-maskedframe-use-graphics--use-graphics)
--  [ProgressBar](https://pixijs.io/ui/storybook/?path=/story/components-progressbar-circular--circular)
--  [RadioGroup](https://pixijs.io/ui/storybook/?path=/story/components-radiogroup-use-graphics--use-graphics)
--  [ScrollBox](https://pixijs.io/ui/storybook/?path=/story/components-scrollbox-use-graphics--use-graphics)
--  [Select](https://pixijs.io/ui/storybook/?path=/story/components-select-use-graphics--use-graphics)
--  [Slider](https://pixijs.io/ui/storybook/?path=/story/components-slider-graphics--double)
-
-### Contribute ###
+-   [Switcher](https://pixijs.io/ui/storybook/?path=/story/components-switcher-sprites--sprites)
+-   [Button](https://pixijs.io/ui/storybook/?path=/story/components-button-button-container-sprite--button-container-sprite)
+-   [CheckBox](https://pixijs.io/ui/storybook/?path=/story/components-checkbox-use-graphics--use-graphics)
+-   [FancyButton](https://pixijs.io/ui/storybook/?path=/story/components-fancybutton-using-sprite-and-bitmaptext--using-sprite-and-bitmap-text)
+-   [Input](https://pixijs.io/ui/storybook/?path=/story/components-input-use-graphics--use-graphics)
+-   [List](https://pixijs.io/ui/storybook/?path=/story/components-list-use-graphics--use-graphics)
+-   [MaskedFrame](https://pixijs.io/ui/storybook/?path=/story/components-maskedframe-use-graphics--use-graphics)
+-   [ProgressBar](https://pixijs.io/ui/storybook/?path=/story/components-progressbar-circular--circular)
+-   [RadioGroup](https://pixijs.io/ui/storybook/?path=/story/components-radiogroup-use-graphics--use-graphics)
+-   [ScrollBox](https://pixijs.io/ui/storybook/?path=/story/components-scrollbox-use-graphics--use-graphics)
+-   [Select](https://pixijs.io/ui/storybook/?path=/story/components-select-use-graphics--use-graphics)
+-   [Slider](https://pixijs.io/ui/storybook/?path=/story/components-slider-graphics--double)
+
+### Contribute
 
 Want to be part of the PixiUI project? Great! All are welcome! We will get there quicker
 together :) Whether you find a bug, have a great feature request, or you fancy owning a task
@@ -66,7 +66,7 @@ from the road map above, feel free to get in touch.
 Make sure to read the [Contributing Guide](.github/CONTRIBUTING.md)
 before submitting changes.
 
-### License ###
+### License
 
 This content is released under the (http://opensource.org/licenses/MIT) MIT License.