fix(package): switch to scoped packages, i.e. @skyhook/core

README.md

@@ -2,7 +2,7 @@
 [![npm](https://img.shields.io/npm/v/angular-skyhook.svg)](https://www.npmjs.com/package/angular-skyhook)
 [![Documentation coverage](https://cormacrelf.github.io/angular-skyhook/images/coverage-badge.svg)](https://cormacrelf.github.io/angular-skyhook/coverage.html)
 
-# angular-skyhook
+# Angular Skyhook
 
 `react-dnd`-style drag and drop for Angular, built on
 [`dnd-core`](https://github.com/react-dnd/react-dnd).

build-docs.sh

@@ -1,7 +1,5 @@
 #!/bin/bash
 
-pkg="angular-skyhook"
-
 usage () {
   echo "usage: $0 [--serve] [--serve-only] [--no-examples] [--port <default is 8080>]"
 }
@@ -66,8 +64,9 @@ fi
 
 DIR=$(dirname "$0")
 output="$DIR/out-docs"
-skyhook="$DIR/packages/angular-skyhook"
-multi_backend="$DIR/packages/angular-skyhook-multi-backend"
+core="$DIR/packages/core"
+sortable="$DIR/packages/sortable"
+multi_backend="$DIR/packages/multi-backend"
 examples="$DIR/packages/examples"
 
 EXAMPLES_TASK="local-docs"
@@ -90,18 +89,24 @@ build() {
     set -euxo pipefail
 
     rm -rf out-docs
-    rm -rf "$skyhook/documentation"
+    rm -rf "$core/documentation"
 
-    (cd "$skyhook" && yarn run docs)
+    (cd "$core" && yarn run docs)
 
     # move main docs into output
-    (mv "$skyhook/documentation" "$output")
+    (mv "$core/documentation" "$output")
+
+    # build sortable docs
+    (cd "$sortable" && yarn run docs)
+
+    # move multi-backend into output
+    (mv "$sortable/documentation" "$output/sortable")
 
     # build multi-backend docs
-    (cd $multi_backend && yarn run docs)
+    (cd "$multi_backend" && yarn run docs)
 
     # move multi-backend into output
-    (mv "$multi_backend/documentation" "$output/angular-skyhook-multi-backend")
+    (mv "$multi_backend/documentation" "$output/multi-backend")
 
     # build examples
     (cd "$examples" && yarn run $EXAMPLES_TASK)

docs/Guide.md

@@ -1,4 +1,4 @@
-When using `angular-skyhook`, you follow this general pattern:
+When using Skyhook, you follow this general pattern:
 
 1. Create a connection and specify its behaviour: [Creating Connections](guide/1.-creating-connections.html)
 2. Use directives or methods to connect it to real DOM elements:

docs/Quickstart.md

@@ -1,17 +1,17 @@
 ## Installation
 
 ```sh
-yarn add angular-skyhook react-dnd-html5-backend
+yarn add @skyhook/core react-dnd-html5-backend
 ```
 
-You might consider `angular-skyhook-multi-backend` instead of the HTML5
+You might consider `@skyhook/multi-backend` instead of the HTML5
 backend, because it allows adding touch support as well.
 
 Then import `SkyhookDndModule` and provide the backend:
 
 
 ```typescript
-import { SkyhookDndModule } from 'angular-skyhook';
+import { SkyhookDndModule } from "@skyhook/core";
 import { default as HTML5Backend } from 'react-dnd-html5-backend'
 
 @NgModule({
@@ -79,12 +79,12 @@ can let the browser render drag previews, when using a backend based on click
 or touch events, on mobile you have to render them yourself.
 
 A good way to solve both problems at once is using
-[`angular-skyhook-multi-backend`][skyhook-multi]. It is based on the original
+[`@skyhook/multi-backend`][skyhook-multi]. It is based on the original
 [dnd-multi-backend][dnd-multi-backend], which was designed to seamlessly switch
 between an HTML5 and a [touch backend][touch-backend] when it noticed different
 kinds of interaction. The Skyhook version includes a preview component.
 
-[skyhook-multi]: ../angular-skyhook-multi-backend/
+[skyhook-multi]: ../@skyhook/multi-backend/
 Note also that you will need to use an exported function
 to provide the backend, to retain AOT compatibility, if it requires assembly.
 `MultiBackend`, for example, can be used like so:

docs/Translating-React-Code.md

@@ -7,7 +7,7 @@ documentation](http://react-dnd.github.io/react-dnd/docs-overview.html). In the
 interest of making them useful or at least understandable, this library presents
 a fairly similar API to the original. There are, of course, some differences
 mandated by the style and limitations of React and Angular. We will illustrate
-this with the `react-dnd` `DragSource` compared to `angular-skyhook`
+this with the `react-dnd` `DragSource` compared to Skyhook's
 `SkyhookDndService.dragSource()`. Here are the [original API
 docs](http://react-dnd.github.io/react-dnd/docs-drag-source.html) on
 `DragSource`; the following is a small but complete example for a quick
@@ -173,7 +173,7 @@ asynchronous drag operations start. Angular doesn't have a way for arbitrary
 objects to listen to `ngOnChanges()`, so we have to do it manually.
 
 You can supply a default type, or `null`, and update it in later as the
-`@Input()` property is populated. If you supply `null`, `angular-skyhook` will
+`@Input()` property is populated. If you supply `null`, Skyhook will
 defer connecting the DOM and the subscription to the `monitor` until this is
 done. See `DragSource.setType` for more information.
 

docs/Tutorial.md

@@ -446,7 +446,7 @@ Here's all four in one go:
 
 ```typescript
 import { Component } from '@angular/core';
-import { SkyhookDndService } from 'angular-skyhook';
+import { SkyhookDndService } from "@skyhook/core";
 import { ItemTypes } from './constants';
 
 @Component({
@@ -506,7 +506,7 @@ isDragging$ = this.knightSource.listen(monitor => monitor.isDragging());
 
 Now, the knight on the board will be a bit transparent when you've picked it up.
 You could set it to `opacity: 0`, but in chess, players like to know where the
-piece came from. `angular-skyhook` makes no assumptions about how to render
+piece came from. Skyhook makes no assumptions about how to render
 any elements, so you can always customise their appearance at any stage of the
 drag and drop process.
 
@@ -569,7 +569,7 @@ to that wrapper `div`. It's very similar to the drag source.
 
 ```typescript
 import { Component, Input  } from "@angular/core";
-import { SkyhookDndService } from 'angular-skyhook';
+import { SkyhookDndService } from "@skyhook/core";
 import { ItemTypes } from "./constants";
 
 @Component({
@@ -717,7 +717,7 @@ Here's what it looks like:
 ![Visual guides and a horse preview image](../media/guides-nohorse.png)
 
 Lastly, we're going to customize the drag preview (that little knight that
-follows the mouse around). `angular-skyhook` has some very powerful ways to
+follows the mouse around). Skyhook has some very powerful ways to
 customize this, but we're going to use a simple image. It's quite simple:
 
 1. Create an [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)

jest.config.js

@@ -14,9 +14,7 @@ module.exports = {
 		"^.+\\.(ts|js|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js"
 	},
 	moduleNameMapper: {
-		"angular-skyhook": "<rootDir>/packages/angular-skyhook",
-		"angular-skyhook-multi-backend": "<rootDir>/packages/angular-skyhook-multi-backend",
-		"angular-skyhook-card-list": "<rootDir>/packages/angular-skyhook-card-list"
+        "@skyhook/(.*)": "<rootDir>/packages/$1"
 	},
 	testRegex: ".*spec.ts$",
 	moduleFileExtensions: [
@@ -37,8 +35,9 @@ module.exports = {
 		// "<rootDir>/packages/*"
 	],
 	collectCoverageFrom: [
-		"packages/angular-skyhook*/*/src/**/*.ts",
-		"packages/angular-skyhook*/src/**/*.ts"
+		"packages/core/*/src/**/*.ts",
+		"packages/multi-backend/*/src/**/*.ts",
+		"packages/sortable/*/src/**/*.ts",
 	],
 	coveragePathIgnorePatterns: [
 		".*(spec|const|config|mock|module|public-api|index|mock|model|d).ts"

lerna.json

@@ -24,12 +24,12 @@
         },
         "bootstrap": {
             "scope": [
-                "angular-skyhook*"
+                "@skyhook/*"
             ]
         },
         "exec": {
             "scope": [
-                "angular-skyhook*"
+                "@skyhook/*"
             ]
         },
         "clean": {

ng-package.js

@@ -12,7 +12,7 @@ module.exports = {
             "dnd-multi-backend": "dndMultiBackend",
 
 			// local
-			"angular-skyhook": "angularSkyhook",
+            "@skyhook/core": "skyhook",
 		}
 	},
 	whitelistedNonPeerDependencies: [

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "@angular-skyhook/monorepo",
+    "name": "@skyhook/monorepo",
     "private": true,
     "version": "0.0.0",
     "devDependencies": {

packages/angular-skyhook/README.md → packages/core/README.md

@@ -1,11 +1,11 @@
-# `angular-skyhook`
+# Skyhook
 
 [![Build Status](https://travis-ci.org/cormacrelf/angular-skyhook.svg?branch=master)](https://travis-ci.org/cormacrelf/angular-skyhook) 
 [![npm](https://img.shields.io/npm/v/angular-skyhook.svg)](https://www.npmjs.com/package/angular-skyhook)
 [![Documentation coverage](images/coverage-badge.svg)](coverage.html)
 [![GitHub](https://img.shields.io/github/stars/cormacrelf/angular-skyhook.svg?style=social&label=Stars)](https://github.com/cormacrelf/angular-skyhook/)
 
-`angular-skyhook` is a toolkit for building complex drag and drop interfaces in
+Skyhook is a toolkit for building complex drag and drop interfaces in
 Angular. It is based on, and very similar to [`react-dnd`][react-dnd] by [Dan
 Abramov][gaearon] and others, and is also powered by [`dnd-core`][dnd-core]. It
 is compatible with all backends.
@@ -19,7 +19,7 @@ is compatible with all backends.
 ### Installation
 
 ```sh
-yarn add angular-skyhook react-dnd-html5-backend
+yarn add @skyhook/core react-dnd-html5-backend
 ```
 
 Next, follow the [Quickstart][quickstart] and check out the [Tutorial][tutorial].
@@ -30,8 +30,8 @@ Next, follow the [Quickstart][quickstart] and check out the [Tutorial][tutorial]
 
 ### Sub-packages
 
-* [`angular-skyhook-multi-backend`](./angular-skyhook-multi-backend/)
-* `angular-skyhook-card-list` (WIP; docs not ready).
+* [`@skyhook/multi-backend`](./@skyhook/multi-backend/)
+* `@skyhook/sortable` (WIP; docs not ready).
 
 ### Features
 
@@ -63,7 +63,7 @@ Next, follow the [Quickstart][quickstart] and check out the [Tutorial][tutorial]
 ### What can you do with it?
 
 Instead of building maximally-ergonomic solutions to simple use cases,
-`react-dnd` and `angular-skyhook` provide an abstraction over most things you
+`react-dnd` and Skyhook provide an abstraction over most things you
 could want to do with drag and drop. They are lower-level building blocks that
 make it easy to implement some very complex interactions. They assign no
 specific meaning to a drag/drop operation. You get to define what happens when
@@ -86,7 +86,7 @@ It is important to note that for bare-bones sortable lists, where you have
 a mutable array of simple values, you don't necessarily need the superpowers in
 this library. There are plenty of cookie-cutter solutions out there, like the
 quite powerful [`ng2-dnd`][ng2-dnd] or [`ng2-dragula`][ng2-dragula], which may
-get you to your deadline faster than learning and using `angular-skyhook`. But
+get you to your deadline faster than learning and using Skyhook. But
 be warned; you may find yourself wanting more dragging power once you get
 a taste. In fact, this package was born when
 [@cormacrelf](https://github.com/cormacrelf) got sick of maintaining
@@ -102,14 +102,14 @@ If Angular and React aren't your thing, there's also [`vue-react-dnd`][vrd].
 
 ### Issues
 
-Not all issues are `angular-skyhook`-related. If you think you found a bug in
+Not all issues are Skyhook-related. If you think you found a bug in
 `dnd-core` or with the HTML5 backend, those issues belong on [that
 codebase](https://github.com/react-dnd/react-dnd) with their many contributors
 and wealth of experience. If there is a problem with another backend you are
 using, file an issue with that backend so you can get more specific help and so
 that the community can benefit.
 
-Issues and potential improvements to `angular-skyhook` are discussed on
+Issues and potential improvements to Skyhook are discussed on
 [GitHub](https://github.com/cormacrelf/angular-skyhook).
 
 ### License

packages/angular-skyhook/package.json → packages/core/package.json

@@ -1,5 +1,5 @@
 {
-    "name": "angular-skyhook",
+    "name": "@skyhook/core",
     "version": "1.0.9",
     "dependencies": {
         "dnd-core": "^4.0.0",

packages/angular-skyhook/src/connection-types.ts → packages/core/src/connection-types.ts

@@ -245,7 +245,7 @@ backend, because no other backend provides automatic previews. In those cases
 you must handle every draggable `type` in a drag layer to have any previews at
 all.
 
-Or, you could just use [angular-skyhook-multi-backend](../angular-skyhook-multi-backend/).
+Or, you could just use [@skyhook/multi-backend](../@skyhook/multi-backend/).
 
  */
 export interface DragLayer<Item = any>

packages/angular-skyhook/src/connector.service.ts → packages/core/src/connector.service.ts

@@ -52,7 +52,7 @@ export interface AddSubscription extends SubscriptionLike {
  *  If your components have lots of subscriptions, it can get tedious having to
  *  unsubscribe from all of them, and you might forget. A common pattern is to create an RxJS Subscription
  *  (maybe called `destroy`), to use `this.destroy.add(xxx.subscribe(...))`
- *  and to call `destroy.unsubscribe()` once to clean up all of them. angular-skyhook
+ *  and to call `destroy.unsubscribe()` once to clean up all of them. @skyhook/core
  *  supports this pattern with by using the `subscription` parameter on the
  *  constructors. Simply:
  *

packages/angular-skyhook/src/dnd.module.ts → packages/core/src/dnd.module.ts

@@ -77,7 +77,7 @@ export interface BackendInput {
  * For use with the MultiBackend:
  *
  * ```typescript
- * import { createDefaultMultiBackend } from 'angular-skyhook-multi-backend';
+ * import { createDefaultMultiBackend } from '@skyhook/multi-backend';
  * // ...
  * SkyhookDndModule.forRoot({ backendFactory: createDefaultMultiBackend })
  * ```

packages/angular-skyhook/src/wrappers.ts → packages/core/src/wrappers.ts

@@ -1,4 +1,4 @@
-import { DragSourceSpec, DragSource, DropTargetSpec, DropTarget } from "angular-skyhook";
+import { DragSourceSpec, DragSource, DropTargetSpec, DropTarget } from "@skyhook/core";
 
 export type Types = string | symbol | (string|symbol)[]
 

packages/examples/package.json

@@ -31,9 +31,9 @@
         "@ngrx/entity": "^6.0.1",
         "@ngrx/store": "^6.0.1",
         "@ngrx/store-devtools": "^6.0.1",
-        "angular-skyhook": "^1.0.9",
-        "angular-skyhook-card-list": "^1.0.9",
-        "angular-skyhook-multi-backend": "^1.0.9",
+        "@skyhook/core": "^1.0.9",
+        "@skyhook/sortable": "^1.0.9",
+        "@skyhook/multi-backend": "^1.0.9",
         "core-js": "^2.5.4",
         "faker": "^4.1.0",
         "immutable": "4.0.0-rc.9",

packages/examples/src/app/app.component.html

@@ -1,6 +1,6 @@
 <header>
   <h2>
-    angular-skyhook examples
+    Skyhook examples
   </h2>
 </header>
 <div class="wrapper">

packages/examples/src/app/app.module.ts

@@ -30,7 +30,7 @@ import { reducers, metaReducers } from './reducers';
 // import { environment } from '../environments/environment';
 import { EffectsModule } from '@ngrx/effects';
 import { AppEffects } from './app.effects';
-import { SkyhookDndModule } from 'angular-skyhook';
+import { SkyhookDndModule } from "@skyhook/core";
 import { routes } from './routes';
 import { customMultiBackend } from './customMultiBackend';
 

packages/examples/src/app/basic-sortable/card.component.ts

@@ -11,7 +11,7 @@ import {
     ChangeDetectionStrategy,
     OnDestroy
 } from "@angular/core";
-import { SkyhookDndService } from "angular-skyhook";
+import { SkyhookDndService } from "@skyhook/core";
 
 import { Directive } from "@angular/core";
 import { Subscription } from "rxjs";

packages/examples/src/app/basic-sortable/index.ts

@@ -3,11 +3,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { SkyhookDndModule } from 'angular-skyhook';
+import { SkyhookDndModule } from "@skyhook/core";
 import { SortedComponent } from './sorted.component';
 import { CardComponent, CardInnerDirective } from './card.component';
 import { UtilityModule } from '../utility.module';
-import { SkyhookMultiBackendModule } from 'angular-skyhook-multi-backend';
+import { SkyhookMultiBackendModule } from '@skyhook/multi-backend';
 
 @NgModule({
   declarations: [

packages/examples/src/app/bins/bin.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { SkyhookDndService } from 'angular-skyhook';
+import { SkyhookDndService } from "@skyhook/core";
 
 @Component({
   selector: 'app-bin',

packages/examples/src/app/bins/index.ts

@@ -6,8 +6,8 @@ import { Container } from "./container.component";
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { RouterModule } from "@angular/router";
-import { SkyhookDndModule } from "angular-skyhook";
-import { SkyhookMultiBackendModule } from "angular-skyhook-multi-backend";
+import { SkyhookDndModule } from "@skyhook/core";
+import { SkyhookMultiBackendModule } from "@skyhook/multi-backend";
 import { UtilityModule } from "../utility.module";
 
 @NgModule({