feat(design)!: shard media gallery component (#2679)

BREAKING CHANGE: `DaffMediaGalleryModule` has moved to its own package. Update imports to `@daffodil/design/media-gallery`
graycoreio · Dec 20, 2023 · bf1a0f6 · bf1a0f6
1 parent 6d96924
commit bf1a0f6
Show file tree

Hide file tree

Showing 27 changed files with 40 additions and 35 deletions.
diff --git a/libs/design/image/src/image/image.component.ts b/libs/design/image/src/image/image.component.ts
@@ -14,8 +14,8 @@ import { DomSanitizer } from '@angular/platform-browser';
 import {
   daffSkeletonableMixin,
   DaffSkeletonable,
-  daffThumbnailCompatToken,
 } from '@daffodil/design';
+import { daffThumbnailCompatToken } from '@daffodil/design/media-gallery';
 
 const validateProperty = (object: Record<string, any>, prop: string) => {
   if (object[prop] === null || object[prop] === undefined || object[prop] === '') {

diff --git a/...ign/src/molecules/media-gallery/README.md → libs/design/media-gallery/README.md b/...ign/src/molecules/media-gallery/README.md → libs/design/media-gallery/README.md
diff --git a/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts b/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryModule } from '@daffodil/design';
 import { DaffImageModule } from '@daffodil/design/image';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { BasicMediaGalleryComponent } from './basic-media-gallery.component';
 

diff --git a/...lery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts b/...lery/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryModule } from '@daffodil/design';
 import { DaffImageModule } from '@daffodil/design/image';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { MismatchedSizesMediaGalleryComponent } from './mismatched-sizes-media-gallery.component';
 

diff --git a/...design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts b/...design/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryModule } from '@daffodil/design';
 import { DaffImageModule } from '@daffodil/design/image';
+import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 import { SkeletonMediaGalleryComponent } from './skeleton-media-gallery.component';
 

diff --git a/libs/design/media-gallery/ng-package.json b/libs/design/media-gallery/ng-package.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/design/media-gallery",
+  "deleteDestPath": false,
+  "lib": {
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../src/scss"]
+  }
+} 
diff --git a/...y/media-gallery-registration.interface.ts → ...s/media-gallery-registration.interface.ts b/...y/media-gallery-registration.interface.ts → ...s/media-gallery-registration.interface.ts
diff --git a/...ules/media-gallery/media-gallery-token.ts → ...allery/src/helpers/media-gallery-token.ts b/...ules/media-gallery/media-gallery-token.ts → ...allery/src/helpers/media-gallery-token.ts
diff --git a/libs/design/media-gallery/src/index.ts b/libs/design/media-gallery/src/index.ts
@@ -0,0 +1 @@
+export * from './public_api';
diff --git a/...es/media-gallery/media-gallery-theme.scss → ...edia-gallery/src/media-gallery-theme.scss b/...es/media-gallery/media-gallery-theme.scss → ...edia-gallery/src/media-gallery-theme.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
-@use '../../../scss/theming';
-@use '../../../scss/core';
+@use '../../scss/theming';
+@use '../../scss/core';
 
 @mixin daff-media-gallery-theme($theme) {
 	$gray: core.daff-map-deep-get($theme, 'core.gray');

diff --git a/...les/media-gallery/media-gallery.module.ts → ...media-gallery/src/media-gallery.module.ts b/...les/media-gallery/media-gallery.module.ts → ...media-gallery/src/media-gallery.module.ts
@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { DaffMediaGalleryComponent } from './media-gallery.component';
+import { DaffMediaGalleryComponent } from './media-gallery/media-gallery.component';
 import { DaffMediaRendererComponent } from './media-renderer/media-renderer.component';
 import { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';
 

diff --git a/...edia-gallery/media-gallery.component.html → ...edia-gallery/media-gallery.component.html b/...edia-gallery/media-gallery.component.html → ...edia-gallery/media-gallery.component.html
diff --git a/...edia-gallery/media-gallery.component.scss → ...edia-gallery/media-gallery.component.scss b/...edia-gallery/media-gallery.component.scss → ...edia-gallery/media-gallery.component.scss
@@ -3,8 +3,6 @@
 @use '../../../scss/state';
 
 :host(.daff-media-gallery) {
-	// stylelint-disable-next-line scss/comment-no-loud
-	/* autoprefixer grid: autoplace */
 	$root: '.daff-media-gallery';
 	display: flex;
 	flex-direction: column;

diff --git a/...a-gallery/media-gallery.component.spec.ts → ...a-gallery/media-gallery.component.spec.ts b/...a-gallery/media-gallery.component.spec.ts → ...a-gallery/media-gallery.component.spec.ts
@@ -10,9 +10,9 @@ import {
 import { By } from '@angular/platform-browser';
 
 import { DaffMediaGalleryComponent } from './media-gallery.component';
-import { DaffMediaGalleryRegistry } from './registry/media-gallery.registry';
-import { daffThumbnailCompatToken } from './thumbnail/thumbnail-compat.token';
-import { DaffThumbnailDirective } from './thumbnail/thumbnail.directive';
+import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
+import { daffThumbnailCompatToken } from '../thumbnail/thumbnail-compat.token';
+import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';
 
 @Component({
   template: `<daff-media-gallery [name]="nameValue" [skeleton]="skeleton">

diff --git a/.../media-gallery/media-gallery.component.ts → .../media-gallery/media-gallery.component.ts b/.../media-gallery/media-gallery.component.ts → .../media-gallery/media-gallery.component.ts
@@ -9,14 +9,15 @@ import {
   Renderer2,
 } from '@angular/core';
 
-import { DaffMediaGalleryRegistration } from './media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from './media-gallery-token';
-import { DaffMediaGalleryRegistry } from './registry/media-gallery.registry';
-import { daffArticleEncapsulatedMixin } from '../../core/article-encapsulated/public_api';
 import {
   daffSkeletonableMixin,
   DaffSkeletonable,
-} from '../../core/skeletonable/public_api';
+  daffArticleEncapsulatedMixin,
+} from '@daffodil/design';
+
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
+import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 let uniqueGalleryId = 0;
 

diff --git a/...renderer/media-renderer.component.spec.ts → ...renderer/media-renderer.component.spec.ts b/...renderer/media-renderer.component.spec.ts → ...renderer/media-renderer.component.spec.ts
@@ -13,8 +13,8 @@ import { BehaviorSubject } from 'rxjs';
 import { DaffArticleComponent } from '@daffodil/design/article';
 
 import { DaffMediaRendererComponent } from './media-renderer.component';
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 import { daffThumbnailCompatToken } from '../thumbnail/thumbnail-compat.token';
 import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';

diff --git a/...edia-renderer/media-renderer.component.ts → ...edia-renderer/media-renderer.component.ts b/...edia-renderer/media-renderer.component.ts → ...edia-renderer/media-renderer.component.ts
@@ -13,8 +13,8 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 /**
@@ -23,7 +23,7 @@ import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
  */
 @Component({
   selector: 'daff-media-renderer',
-  templateUrl: './media-renderer.component.html',
+  template: '<ng-template></ng-template>',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffMediaRendererComponent implements OnInit, OnDestroy {

diff --git a/...src/molecules/media-gallery/public_api.ts → libs/design/media-gallery/src/public_api.ts b/...src/molecules/media-gallery/public_api.ts → libs/design/media-gallery/src/public_api.ts
@@ -1,4 +1,4 @@
-export * from './media-gallery.component';
+export * from './media-gallery/media-gallery.component';
 export * from './media-gallery.module';
 export * from './thumbnail/thumbnail.directive';
 

diff --git a/...y/registry/media-gallery.registry.spec.ts → ...c/registry/media-gallery.registry.spec.ts b/...y/registry/media-gallery.registry.spec.ts → ...c/registry/media-gallery.registry.spec.ts
@@ -12,16 +12,14 @@ import {
   DaffMediaGallery,
   DaffMediaGalleryRegistry,
 } from './media-gallery.registry';
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 import { DaffThumbnailDirective } from '../thumbnail/thumbnail.directive';
 
 @Component({})
 export class FakeComponent {}
 
 export class ChangeDetectorRefMock implements Partial<ChangeDetectorRef> {
-  markForCheck() {
-
-  }
+  markForCheck() {}
 }
 
 describe('DaffMediaGalleryRegistry', () => {

diff --git a/...allery/registry/media-gallery.registry.ts → ...ry/src/registry/media-gallery.registry.ts b/...allery/registry/media-gallery.registry.ts → ...ry/src/registry/media-gallery.registry.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 import { DaffThumbnailRegistration } from '../thumbnail/thumbnail-registration.interface';
 
 export interface DaffMediaGalleryDict {

diff --git a/...llery/thumbnail/thumbnail-compat.token.ts → ...y/src/thumbnail/thumbnail-compat.token.ts b/...llery/thumbnail/thumbnail-compat.token.ts → ...y/src/thumbnail/thumbnail-compat.token.ts
diff --git a/...bnail/thumbnail-registration.interface.ts → ...bnail/thumbnail-registration.interface.ts b/...bnail/thumbnail-registration.interface.ts → ...bnail/thumbnail-registration.interface.ts
@@ -1,6 +1,6 @@
 import { Type } from '@angular/core';
 
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
 
 export interface DaffThumbnailRegistration {
   gallery: DaffMediaGalleryRegistration;

diff --git a/...ery/thumbnail/thumbnail.directive.spec.ts → ...src/thumbnail/thumbnail.directive.spec.ts b/...ery/thumbnail/thumbnail.directive.spec.ts → ...src/thumbnail/thumbnail.directive.spec.ts
@@ -11,7 +11,7 @@ import { By } from '@angular/platform-browser';
 
 import { daffThumbnailCompatToken } from './thumbnail-compat.token';
 import { DaffThumbnailDirective } from './thumbnail.directive';
-import { DaffMediaGalleryComponent } from '../media-gallery.component';
+import { DaffMediaGalleryComponent } from '../media-gallery/media-gallery.component';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 @Component({

diff --git a/...-gallery/thumbnail/thumbnail.directive.ts → ...lery/src/thumbnail/thumbnail.directive.ts b/...-gallery/thumbnail/thumbnail.directive.ts → ...lery/src/thumbnail/thumbnail.directive.ts
@@ -13,8 +13,8 @@ import {
 
 import { daffThumbnailCompatToken } from './thumbnail-compat.token';
 import { DaffThumbnailRegistration } from './thumbnail-registration.interface';
-import { DaffMediaGalleryRegistration } from '../media-gallery-registration.interface';
-import { DAFF_MEDIA_GALLERY_TOKEN } from '../media-gallery-token';
+import { DaffMediaGalleryRegistration } from '../helpers/media-gallery-registration.interface';
+import { DAFF_MEDIA_GALLERY_TOKEN } from '../helpers/media-gallery-token';
 import { DaffMediaGalleryRegistry } from '../registry/media-gallery.registry';
 
 /**

diff --git a/libs/design/scss/theme.scss b/libs/design/scss/theme.scss
@@ -31,7 +31,7 @@
 @use '../card/src/card-theme' as card;
 @use '../hero/src/hero-theme' as hero;
 @use '../list/src/list-theme' as list;
-@use '../src/molecules/media-gallery/media-gallery-theme' as media-gallery;
+@use '../media-gallery/src/media-gallery-theme' as media-gallery;
 @use '../src/molecules/menu/menu-theme' as menu;
 @use '../src/molecules/modal/modal-theme' as modal;
 @use '../src/molecules/navbar/navbar-theme' as navbar;

diff --git a/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.html b/libs/design/src/molecules/media-gallery/media-renderer/media-renderer.component.html
diff --git a/libs/design/src/public_api.ts b/libs/design/src/public_api.ts
@@ -19,7 +19,6 @@ export * from './molecules/backdrop/public_api';
 export * from './molecules/button-set/public_api';
 export * from './molecules/image-gallery/public_api';
 export * from './molecules/image-list/public_api';
-export * from './molecules/media-gallery/public_api';
 export * from './molecules/menu/public_api';
 export * from './molecules/modal/public_api';
 export * from './molecules/navbar/public_api';