refactor(button-bar): refactoring to better support multiple independent modules

- rename DevintentModule to ButtonBarModule
- rename _theming.scss to _all-theme.scss
- create a lib/core/ folder

Author: Splaktar

package-lock.json

@@ -6,7 +6,7 @@
   "homepage": "https://devintent-dev.web.app",
   "bugs": "https://github.com/DevIntent/dev/issues",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
   "scripts": {
     "ng": "ng",
@@ -30,18 +30,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.4",
-    "@angular/cdk": "~9.2.2",
-    "@angular/common": "~9.1.4",
-    "@angular/compiler": "~9.1.4",
-    "@angular/core": "~9.1.4",
+    "@angular/animations": "~9.1.9",
+    "@angular/cdk": "~9.2.4",
+    "@angular/common": "~9.1.9",
+    "@angular/compiler": "~9.1.9",
+    "@angular/core": "~9.1.9",
     "@angular/fire": "^6.0.0",
     "@angular/flex-layout": "^9.0.0-beta.29",
-    "@angular/forms": "~9.1.4",
-    "@angular/material": "~9.2.2",
-    "@angular/platform-browser": "~9.1.4",
-    "@angular/platform-browser-dynamic": "~9.1.4",
-    "@angular/router": "~9.1.4",
+    "@angular/forms": "~9.1.9",
+    "@angular/material": "~9.2.4",
+    "@angular/platform-browser": "~9.1.9",
+    "@angular/platform-browser-dynamic": "~9.1.9",
+    "@angular/router": "~9.1.9",
     "@schuchard/prettier": "^3.1.0",
     "firebase": "^7.14.2",
     "logrocket": "^1.0.7",
@@ -50,14 +50,14 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "~0.901.4",
-    "@angular-devkit/build-angular": "~0.901.4",
-    "@angular-devkit/build-ng-packagr": "~0.901.4",
-    "@angular-devkit/core": "^9.1.4",
-    "@angular-devkit/schematics": "^9.1.4",
-    "@angular/cli": "~9.1.4",
-    "@angular/compiler-cli": "~9.1.4",
-    "@angular/language-service": "~9.1.4",
+    "@angular-devkit/architect": "~0.901.7",
+    "@angular-devkit/build-angular": "~0.901.7",
+    "@angular-devkit/build-ng-packagr": "~0.901.7",
+    "@angular-devkit/core": "^9.1.7",
+    "@angular-devkit/schematics": "^9.1.7",
+    "@angular/cli": "~9.1.7",
+    "@angular/compiler-cli": "~9.1.9",
+    "@angular/language-service": "~9.1.9",
     "@types/jasmine": "^3.5.10",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^13.13.4",
@@ -75,7 +75,7 @@
     "karma-jasmine": "^3.1.1",
     "karma-jasmine-html-reporter": "^1.5.3",
     "lint-staged": "10.2.2",
-    "ng-packagr": "^9.0.0",
+    "ng-packagr": "^9.1.5",
     "npm-check": "~5.9.2",
     "prettier": "2.0.5",
     "protractor": "~5.4.4",

package.json

@@ -50,10 +50,10 @@ Find icon names by searching the [Material Design Icons Tool](https://material.i
 #### Button Bar Module
 
 ```ts
-import {DevintentModule} from '@devintent/dev';
+import {ButtonBarModule} from '@devintent/dev';
 ...
 imports: [
-  DevintentModule
+  ButtonBarModule
 ],
 ```
 
@@ -94,12 +94,12 @@ $demo-typography: mat-typography-config(
 );
 ```
 
-Then your primary SCSS entrypoint should import this theme file and pass the theme into both the Angular Material
+Then your primary SCSS entry point should import this theme file and pass the theme into both the Angular Material
 and DevIntent Dev components.
 
 ```scss
 @import 'theme';
-@import '~@devintent/dev/theming';
+@import '~@devintent/dev/all-theme';
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
@@ -114,5 +114,5 @@ and DevIntent Dev components.
 @include dev-theme($demo-theme);
 ```
 
-Note: Custom typography is not yet implemented for these components, but you can use it with Angular Material components.
-See more in their [Typography Guide](https://material.angular.io/guide/typography).
+**Note:** We have not yet implemented custom typography for these components, but you can use it with
+Angular Material components. See more in their [Typography Guide](https://material.angular.io/guide/typography).

projects/dev/README.md

@@ -2,6 +2,6 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist/dev",
   "lib": {
-    "entryFile": "src/public_api.ts"
+    "entryFile": "src/lib/public-api.ts"
   }
 }

projects/dev/ng-package.json

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { MediaObserver } from '@angular/flex-layout';
-import { NavItem } from '../nav-item';
+import { NavItem } from '../core/nav-item';
 import { Subscription } from 'rxjs';
 
 @Component({

projects/dev/src/lib/button-bar/button-bar.component.ts

@@ -8,7 +8,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { ButtonBarComponent } from './button-bar/button-bar.component';
+import { ButtonBarComponent } from './button-bar.component';
 
 @NgModule({
   imports: [
@@ -33,4 +33,4 @@ import { ButtonBarComponent } from './button-bar/button-bar.component';
     FlexLayoutModule,
   ],
 })
-export class DevintentModule {}
+export class ButtonBarModule {}

projects/dev/src/lib/devintent.module.ts renamed to projects/dev/src/lib/button-bar/button-bar.module.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/dev/src/lib/button-bar/index.ts

@@ -0,0 +1,3 @@
+export * from './button-bar.module';
+export * from './button-bar.component';
+export * from '../core/nav-item';

projects/dev/src/lib/button-bar/public-api.ts

@@ -1,5 +1,5 @@
 // Import library functions for theme creation.
-@import '../button-bar/button-bar-theme';
+@import '../../button-bar/button-bar-theme';
 
 // Define a mixin that accepts a theme and outputs the theme-specific styles.
 @mixin dev-theme($theme) {

projects/dev/src/lib/nav-item.ts renamed to projects/dev/src/lib/core/nav-item.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/dev/src/lib/theming/_theming.scss renamed to projects/dev/src/lib/core/theming/_all-theme.scss

@@ -0,0 +1 @@
+export * from './button-bar/index';

projects/dev/src/lib/index.ts

@@ -1,7 +1,7 @@
 {
   "bundlerOptions": {
-    "entryFile": "./projects/dev/src/lib/theming/_theming.scss",
+    "entryFile": "./projects/dev/src/lib/core/theming/_all-theme.scss",
     "rootDir": "./",
-    "outFile": "dist/dev/_theming.scss"
+    "outFile": "dist/dev/_all-theme.scss"
   }
 }

projects/dev/src/lib/public-api.ts

@@ -7,7 +7,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
-import { DevintentModule } from '@devintent/dev';
+import { ButtonBarModule } from '@devintent/dev';
 import { environment } from '../environments/environment';
 
 import { AppComponent } from './app.component';
@@ -74,7 +74,7 @@ export const appRoutes: Routes = [
     BrowserAnimationsModule,
     FlexLayoutModule,
     ReactiveFormsModule,
-    DevintentModule,
+    ButtonBarModule,
     RouterModule.forRoot(appRoutes, { useHash: false }),
     AngularFireModule.initializeApp(environment.firebase),
     AngularFirePerformanceModule,

projects/dev/src/public_api.ts

@@ -1,5 +1,5 @@
 @import 'theme';
-@import '../dist/dev/theming';
+@import '../dist/dev/all-theme';
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.