feat(design): convert image to standalone (#3054)

graycoreio · Sep 27, 2024 · 19ca741 · 19ca741
1 parent 8fd50a6
commit 19ca741
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 25 deletions.
diff --git a/libs/design/image/README.md b/libs/design/image/README.md
@@ -1,11 +1,54 @@
 # Image
 Image utilizes the native HTML `<img>` element to display responsive images on a page and prevent content jumping while images are loading. `<daff-image>` is an opinionated version that encourages friendly end-user usage.
 
+<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
+
 ## Attributes
 The `src`, `width`, `height`, and `alt` attributes must be defined. An error will be thrown any of these attributes are missing.
 
 `width` and `height` are required to calculate the aspect ratio of an image, used for the [aspect ratio padding trick](https://css-tricks.com/aspect-ratio-boxes/) that helps to prevent content jumping while images are loading. The `width` and `height` values are rendered as pixels.
 
+## Usage
+
+### Within a standalone component
+To use image in a standalone component, import it directly into your custom component:
+
+```ts
+@Component({
+  selector: 'custom-component',
+  templateUrl: './custom-component.component.html',
+  standalone: true,
+  imports: [
+    DAFF_IMAGE_COMPONENTS,
+  ],
+})
+export class CustomComponent {}
+```
+
+### Within a module (deprecated)
+To use image in a module, import `DaffImageModule` into your custom module:
+
+```ts
+import { NgModule } from '@angular/core';
+
+import { DaffImageModule } from '@daffodil/design/image';
+
+@NgModule({
+	declarations: [
+    CustomComponent,
+  ],
+  exports: [
+    CustomComponent,
+  ],
+  imports: [
+    DaffImageModule,
+  ],
+})
+export class CustomComponentModule { }
+```
+
+> This method is deprecated. It's recommended to update all custom components to standalone.
+
 ## Errors
 
 **DaffImageComponent must have a defined src attribute.**
@@ -22,10 +65,3 @@ This error appears when `<daff-image>` is missing a `height` attribute. The heig
 
 ## Accessbility
 Images should be given a meaningful description using the native `alt` attribute to ensure an accessible experience by default. An error will be thrown if the `alt` attribute is missing.
-
-## Usage
-### Basic Image
-<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
-
-### Image Load Output
-<design-land-example-viewer-container example="load-image"></design-land-example-viewer-container>
diff --git a/libs/design/image/examples/src/basic-image/basic-image.component.ts b/libs/design/image/examples/src/basic-image/basic-image.component.ts
@@ -3,15 +3,17 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'basic-image',
   templateUrl: './basic-image.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffImageModule],
+  imports: [
+    DAFF_IMAGE_COMPONENTS,
+  ],
 })
 export class BasicImageComponent {
 

diff --git a/libs/design/image/examples/src/load-image/load-image.component.ts b/libs/design/image/examples/src/load-image/load-image.component.ts
@@ -4,15 +4,18 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'load-image',
   templateUrl: './load-image.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffImageModule, NgIf],
+  imports: [
+    DAFF_IMAGE_COMPONENTS,
+    NgIf,
+  ],
 })
 export class LoadImageComponent {
   loaded = false;

diff --git a/libs/design/image/examples/src/skeleton-image/skeleton-image.component.ts b/libs/design/image/examples/src/skeleton-image/skeleton-image.component.ts
@@ -3,15 +3,17 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'skeleton-image',
   templateUrl: './skeleton-image.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffImageModule],
+  imports: [
+    DAFF_IMAGE_COMPONENTS,
+  ],
 })
 export class SkeletonImageComponent {
 

diff --git a/libs/design/image/src/image.module.ts b/libs/design/image/src/image.module.ts
@@ -3,12 +3,13 @@ import { NgModule } from '@angular/core';
 
 import { DaffImageComponent } from './image/image.component';
 
+/**
+ * @deprecated in favor of {@link DAFF_IMAGE_COMPONENTS}
+ * */
 @NgModule({
-  declarations: [
-    DaffImageComponent,
-  ],
   imports: [
     CommonModule,
+    DaffImageComponent,
   ],
   exports: [
     DaffImageComponent,

diff --git a/libs/design/image/src/image.ts b/libs/design/image/src/image.ts
@@ -0,0 +1,5 @@
+import { DaffImageComponent } from './image/image.component';
+
+export const DAFF_IMAGE_COMPONENTS = <const>[
+  DaffImageComponent,
+];
diff --git a/libs/design/image/src/image/image.component.spec.ts b/libs/design/image/src/image/image.component.spec.ts
@@ -13,6 +13,10 @@ import { DaffImageComponent } from './image.component';
 
 @Component({
   template: `<daff-image [src]="src" [alt]="alt" [width]="width" [height]="height" [skeleton]="skeleton"></daff-image>`,
+  standalone: true,
+  imports: [
+    DaffImageComponent,
+  ],
 })
 
 class WrapperComponent {
@@ -32,8 +36,7 @@ describe('@daffodil/design/image | DaffImageComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        DaffImageComponent,
+      imports: [
         WrapperComponent,
       ],
     })

diff --git a/libs/design/image/src/image/image.component.ts b/libs/design/image/src/image/image.component.ts
@@ -48,6 +48,7 @@ const validateProperties = (object: Record<string, any>, props: string[]) => {
     directive: DaffSkeletonableDirective,
     inputs: ['skeleton'],
   }],
+  standalone: true,
 })
 export class DaffImageComponent implements OnInit {
 

diff --git a/libs/design/image/src/image/specs/image-props.spec.ts b/libs/design/image/src/image/specs/image-props.spec.ts
@@ -23,8 +23,10 @@ describe('DaffImageComponent | Props Validation', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         DaffImageComponent,
+      ],
+      declarations: [
         WrapperComponent,
       ],
     })

diff --git a/libs/design/image/src/public_api.ts b/libs/design/image/src/public_api.ts
@@ -1,2 +1,3 @@
 export { DaffImageModule } from './image.module';
 export { DaffImageComponent } from './image/image.component';
+export { DAFF_IMAGE_COMPONENTS } from './image';
diff --git a/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.component.ts b/libs/design/media-gallery/examples/src/basic-media-gallery/basic-media-gallery.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 @Component({
@@ -12,7 +12,7 @@ import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
   templateUrl: './basic-media-gallery.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffMediaGalleryModule, DaffImageModule],
+  imports: [DaffMediaGalleryModule, DAFF_IMAGE_COMPONENTS],
 })
 export class BasicMediaGalleryComponent {
 

diff --git a/...y/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts b/...y/examples/src/mismatched-sizes-media-gallery/mismatched-sizes-media-gallery.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 @Component({
@@ -12,6 +12,9 @@ import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
   templateUrl: './mismatched-sizes-media-gallery.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffMediaGalleryModule, DaffImageModule],
+  imports: [
+    DaffMediaGalleryModule,
+    DAFF_IMAGE_COMPONENTS,
+  ],
 })
 export class MismatchedSizesMediaGalleryComponent {}
diff --git a/...ign/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.ts b/...ign/media-gallery/examples/src/skeleton-media-gallery/skeleton-media-gallery.component.ts
@@ -3,7 +3,7 @@ import {
   Component,
 } from '@angular/core';
 
-import { DaffImageModule } from '@daffodil/design/image';
+import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
 
 @Component({
@@ -12,7 +12,10 @@ import { DaffMediaGalleryModule } from '@daffodil/design/media-gallery';
   templateUrl: './skeleton-media-gallery.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [DaffMediaGalleryModule, DaffImageModule],
+  imports: [
+    DaffMediaGalleryModule,
+    DAFF_IMAGE_COMPONENTS,
+  ],
 })
 export class SkeletonMediaGalleryComponent {