add prettier

Author: snewcomer

.eslintrc.js

@@ -11,11 +11,7 @@ module.exports = {
     },
   },
   plugins: ['ember'],
-  extends: [
-    'eslint:recommended',
-    'plugin:ember/recommended',
-    'plugin:prettier/recommended',
-  ],
+  extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
   env: {
     browser: true,
   },

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,15 +1,15 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-labels: 
-
+labels:
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

.github/workflows/github_ci.yml

@@ -6,9 +6,9 @@ name: build
 on:
   workflow_dispatch:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   main-test:
@@ -34,11 +34,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        scenario: [
-          ember-lts-3.20,
-          ember-lts-3.24,
-          ember-lts-3.28,
-        ]
+        scenario: [ember-lts-3.20, ember-lts-3.24, ember-lts-3.28]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js 12

.prettierrc.js

@@ -2,4 +2,5 @@
 
 module.exports = {
   singleQuote: true,
+  printWidth: 120,
 };

CHANGELOG.md

@@ -2,25 +2,25 @@
 
 ## Installation
 
-* `git clone <repository-url>`
-* `cd ember-sortable`
-* `yarn install`
+- `git clone <repository-url>`
+- `cd ember-sortable`
+- `yarn install`
 
 ## Linting
 
-* `yarn lint:hbs`
-* `yarn lint:js`
-* `yarn lint:js --fix`
+- `yarn lint:hbs`
+- `yarn lint:js`
+- `yarn lint:js --fix`
 
 ## Running tests
 
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+- `ember test` – Runs the test suite on the current Ember version
+- `ember test --server` – Runs the test suite in "watch mode"
+- `ember try:each` – Runs the test suite against multiple Ember versions
 
 ## Running the dummy application
 
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+- `ember serve`
+- Visit the dummy application at [http://localhost:4200](http://localhost:4200).
 
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

CONTRIBUTING.md

@@ -5,16 +5,20 @@
 To use modifiers, you must use angle-bracket syntax
 
 ### New Root component
-1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier 
-any element. You no longer need to tell `sortable-group` about the models, so the `each`
-uses the models directly.
+
+1. Instead of using `sortable-group` as a component, use `sortable-group` as a modifier
+   any element. You no longer need to tell `sortable-group` about the models, so the `each`
+   uses the models directly.
 
 **Old Component**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |item|}}
 ```
+
 **New Component**
+
 ```hbs
 <ol {{sortable-group onChange=(action "reorderItems")}}>
   {{#each model.items as |item|}}
@@ -23,19 +27,21 @@ uses the models directly.
 2. Each `item` can be represented by any dom element or component using angle-bracket syntax
 
 **Old Component**
+
 ```hbs
-{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+{{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
   {{#each group.model as |item|}}
     {{#group.item model=item}}
-       {{tem.name}}
+      {{tem.name}}
     {{/group.item}}
   {{/each}}
 {{/sortable-group}}
 ```
 
 **New Component with modifier**
+
 ```hbs
-<ol {{sortable-group onChange=(action "reorderItems")}}>
+<ol {{sortable-group onChange=(action 'reorderItems')}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
       {{tem.name}}
@@ -47,6 +53,7 @@ uses the models directly.
 3. The Handle is also any element with a `sortable-handle` applied to it.
 
 **Old Component**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |modelItem|}}
@@ -61,28 +68,28 @@ uses the models directly.
 ```
 
 **New Component with modifier**
+
 ```hbs
-<ol {{sortable-group onChange=(action "reorderItems")}}>
+<ol {{sortable-group onChange=(action 'reorderItems')}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
       {{tem.name}}
-      <span class="handle" {{sortable-handle}}>&varr;</span>
+      <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
 ```
 
-4. The modifier `groupModel` property is no longer supported. The equivalent can 
-be accomplished by the `action` helper or the new `fn` helper.
+4. The modifier `groupModel` property is no longer supported. The equivalent can
+   be accomplished by the `action` helper or the new `fn` helper.
 
 ```hbs
-<ol {{sortable-group onChange=(action "reorderItems" model)}}>
+<ol {{sortable-group onChange=(action 'reorderItems' model)}}>
   {{#each model.items as |item|}}
     <li {{sortable-item model=item}}>
       {{tem.name}}
-      <span class="handle" {{sortable-handle}}>&varr;</span>
+      <span class='handle' {{sortable-handle}}>&varr;</span>
     </li>
   {{/each}}
 </ol>
 ```
-

MIGRATION_GUIDE_MODIFIERS.md

@@ -5,16 +5,20 @@
 [High Order Components](#Higher Order Components) or [Modifiers](/MIGRATION_GUIDE_MODIFIERS.md)
 
 ### Higher Order Components
+
 `Ember-sortable` can now be built using [higher order components](https://v4.chriskrycho.com/2018/higher-order-components-in-emberjs.html)
 
 1. The array of models are now yielded out by `sortable-group`
 
 **V1**
+
 ```hbs
 {{#sortable-group onChange=(action "reorderItems") as |group|}}
   {{#each model.items as |item|}}
 ```
+
 **V2**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |item|}}
@@ -23,23 +27,25 @@
 2. Each `item` can be represented by the yielded `sortable-item` instead of directly using `sortable-item` and passing the `group` manually.
 
 **V1**
+
 ```hbs
-{{#sortable-group onChange=(action "reorderItems") as |group|}}
+{{#sortable-group onChange=(action 'reorderItems') as |group|}}
   {{#each model.items as |item|}}
-    {{#sortable-item model=item group=group handle=".handle"}}
+    {{#sortable-item model=item group=group handle='.handle'}}
       {{item.name}}
-      <span class="handle">&varr;</span>
+      <span class='handle'>&varr;</span>
     {{/sortable-item}}
   {{/each}}
 {{/sortable-group}}
 ```
 
 **V2**
+
 ```hbs
-{{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
+{{#sortable-group model=model.items onChange=(action 'reorderItems') as |group|}}
   {{#each group.model as |item|}}
     {{#group.item model=item}}
-    ...
+      ...
     {{/group.item}}
   {{/each}}
 {{/sortable-group}}
@@ -48,18 +54,20 @@
 3. It is recommended to use the yielded `sortable-handle` instead of referencing `handle` by `class`, as it guarantees accessibility support.
 
 **V1**
+
 ```hbs
-{{#sortable-group onChange=(action "reorderItems") as |group|}}
+{{#sortable-group onChange=(action 'reorderItems') as |group|}}
   {{#each model.items as |item|}}
-    {{#sortable-item model=item group=group handle=".handle"}}
+    {{#sortable-item model=item group=group handle='.handle'}}
       {{item.name}}
-      <span class="handle">&varr;</span>
+      <span class='handle'>&varr;</span>
     {{/sortable-item}}
   {{/each}}
 {{/sortable-group}}
 ```
 
 **V2**
+
 ```hbs
 {{#sortable-group model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |modelItem|}}
@@ -76,6 +84,7 @@
 4. `groupModel` is still supported via `groupModel` instead of `model`
 
 **V1**
+
 ```hbs
 {{#sortable-group model=model onChange=(action "reorderItems") as |group|}}
   {{#each model.items as |item|}}
@@ -84,6 +93,7 @@
 ```
 
 **V2**
+
 ```hbs
 {{#sortable-group groupModel=model model=model.items onChange=(action "reorderItems") as |group|}}
   {{#each group.model as |item|}}
@@ -94,6 +104,7 @@
 ### Modifiers
 
 ### Accessibility support
+
 1. Keyboard navigation is built into `ember-sortable`.
 2. `a11yItemName`, `a11yAnnouncementConfig`, `itemVisualClass`, `handleVisualClass` can be supplied to enhance the accessibility experience.
 3. Refer to [Accessibility Section](/README.md#Accessibility) for more details.
@@ -103,6 +114,7 @@
 ```
 
 ### Testing
+
 1. The `drag` and `reorder` test helpers are no longer global `async` helpers. They are now importable.
 
 Refer to [Testing Section](/README.md#Testing) for more details.