feat(prefabs): add Size2D prefab (#211)

feat(targets): add iOS and web bindings for Size2D
tweak(prefabs): use Size2D for width/height on Image
tweak(examples): use Size2D for day part icons in PoodleSurf
tweak(examples): use Size2D in PoodleSurfObjC
fix(examples): expose Point2D to Objective-C
tweak(examples): use Point2D in PoodleSurfObjC

examples/lorem-ipsum/examples/web/src/App.module.scss

@@ -13,7 +13,7 @@
   // Sass variables from `@diez/styles` provide a variety of directives. Here,
   // we are using colors, URLs, and numbers.
   background-image: $images-masthead-3x;
-  background-size: $images-masthead-width $images-masthead-height;
+  background-size: $images-masthead-size;
   height: 194px;
 }
 

examples/poodle-surf/examples/android/app/src/main/java/org/diez/examples/poodlesurf/MainActivity.kt

@@ -177,8 +177,8 @@ class MainActivity : AppCompatActivity() {
         time: TextView
     ) {
         icon?.layoutParams = (icon?.layoutParams as LinearLayout.LayoutParams).apply {
-            width = cardDesign.dayPart.iconWidth.toPx()
-            height = cardDesign.dayPart.iconHeight.toPx()
+            width = cardDesign.dayPart.iconSize.width.toPx()
+            height = cardDesign.dayPart.iconSize.height.toPx()
         }
 
         valueUnit.setPadding(0, 0, 0, cardDesign.dayPartVerticalSpacing.toPx())

examples/poodle-surf/examples/ios-objc/PoodleSurfObjC/ViewController.m

@@ -57,6 +57,14 @@ - (void)viewDidLoad {
     [self.stackView appendView:gradientView];
     [gradientView.heightAnchor constraintEqualToAnchor:gradientView.widthAnchor multiplier:0.25].active = YES;
 
+    UILabel *pointLabel = [[UILabel alloc] init];
+    pointLabel.textAlignment = NSTextAlignmentCenter;
+    [self.stackView appendView:pointLabel];
+
+    UILabel *sizeLabel = [[UILabel alloc] init];
+    sizeLabel.textAlignment = NSTextAlignmentCenter;
+    [self.stackView appendView:sizeLabel];
+
     self.diez = [[DEZDiezDesignSystem alloc] initWithView:self.view];
     [self.diez attach:^(DEZDesignSystem  * _Nullable component, NSError * _Nullable error) {
         if (error != nil) {
@@ -82,6 +90,10 @@ - (void)viewDidLoad {
         [gradientView.gradientLayer dez_applyLinearGradient:component.designs.report.waterTemperature.shared.gradient];
 
         [animationView dez_loadLottie:component.designs.loading.animation completion:nil];
+
+        pointLabel.text = [NSString stringWithFormat:@"Point: %@", NSStringFromCGPoint(component.palette.contentBackground.end.cgPoint)];
+
+        sizeLabel.text = [NSString stringWithFormat:@"Size: %@", NSStringFromCGSize(component.designs.report.wind.dayPart.iconSize.cgSize)];
     }];
 }
 

examples/poodle-surf/examples/ios/PoodleSurf/Report/Cards/DayPartView.swift

@@ -52,31 +52,19 @@ class DayPartView: UIView {
         set { valueStackView.layoutMargins = newValue }
     }
 
-    var iconWidth: CGFloat? {
+    var iconSize: CGSize? {
         get {
-            let constraintValue = iconWidthConstraint.isActive ? iconWidthConstraint.constant : 0
-            if constraintValue > 0 {
-                return constraintValue
+            guard
+                let iconWidth = iconWidth,
+                let iconHeight = iconHeight else {
+                    return nil
             }
 
-            return iconView.image?.size.width
+            return CGSize(width: iconWidth, height: iconHeight)
         }
         set {
-            update(iconWidthConstraint, with: newValue)
-        }
-    }
-
-    var iconHeight: CGFloat? {
-        get {
-            let constraintValue = iconHeightConstraint.isActive ? iconHeightConstraint.constant : 0
-            if constraintValue > 0 {
-                return constraintValue
-            }
-
-            return iconView.image?.size.height
-        }
-        set {
-            update(iconHeightConstraint, with: newValue)
+            iconWidth = newValue?.width
+            iconHeight = newValue?.height
         }
     }
 
@@ -128,6 +116,16 @@ class DayPartView: UIView {
         constraint.isActive = true
     }
 
+    private var iconWidth: CGFloat? {
+        get { return iconWidthConstraint.isActive ? iconWidthConstraint.constant : iconView.image?.size.width }
+        set { update(iconWidthConstraint, with: newValue) }
+    }
+
+    private var iconHeight: CGFloat? {
+        get { return iconHeightConstraint.isActive ? iconHeightConstraint.constant : iconView.image?.size.height }
+        set { update(iconHeightConstraint, with: newValue) }
+    }
+
     @available(*, unavailable)
     required init?(coder aDecoder: NSCoder) { fatalError("\(#function) not implemented.") }
 }

examples/poodle-surf/examples/ios/PoodleSurf/Report/ReportViewController+Diez.swift

@@ -86,8 +86,7 @@ extension ReportViewController {
         view.timeLabel.apply(design.timeTypograph)
         view.valueUnitSpacing = design.valueUnitSpacing
         view.layoutMargins = UIEdgeInsets(design.layoutMargins)
-        view.iconWidth = design.iconWidth
-        view.iconHeight = design.iconHeight
+        view.iconSize = design.iconSize.cgSize
     }
 }
 
@@ -97,11 +96,11 @@ extension ReportViewController {
     func apply(_ design: NavigationTitleDesign, toView view: HorizontalImageLabelView, navigationBar: UINavigationBar) {
         view.label.text = design.title
         view.spacing = design.iconToTitleSpacing
-        
+
         // Using the UIKit class initializers for test coverage.
         navigationBar.barTintColor = UIColor(design.barTintColor)
         view.imageView.image = UIImage(design.icon)
-        
+
         // Applying the typograph manually to add test coverage for the .uiFont getter.
         view.label.font = design.typograph.uiFont
         view.label.textColor = design.typograph.color.uiColor

examples/poodle-surf/examples/web/src/components/Column.tsx

@@ -1,10 +1,11 @@
-import {DayPartDesign} from 'diez-poodle-surf';
+import {DayPartDesign, Size2D} from 'diez-poodle-surf';
 import * as React from 'react';
 
 interface ColumnProps {
   value: string;
   name: string;
   icon?: string;
+  iconSize?: Size2D;
   ds: DayPartDesign;
   style?: React.CSSProperties;
 }
@@ -14,11 +15,11 @@ interface ColumnProps {
  */
 export default class Column extends React.PureComponent<ColumnProps> {
   render () {
-    const {name, value, icon, ds, style} = this.props;
+    const {name, value, icon, iconSize, ds, style} = this.props;
 
     return (
       <div style={{textAlign: 'center', ...style}}>
-        {icon && <img src={icon} alt="" style={{width: '67px', height: '67px'}} />}
+        {icon && iconSize && <img src={icon} alt="" style={iconSize.style} />}
         <p style={{margin: 0, ...ds.valueTypograph.style}}>{value} <span style={ds.unitTypograph.style}>ft</span></p>
         <span style={ds.timeTypograph.style}>{name}</span>
       </div>

examples/poodle-surf/examples/web/src/components/ForecastCard.tsx

@@ -31,6 +31,7 @@ export default class ForecastCard extends React.PureComponent<ForecastCardProps>
               key={dayPart.dayPart}
               ds={ds.dayPart}
               icon={dayPart.direction && dayPart.direction.url}
+              iconSize={ds.dayPart.iconSize}
               name={dayPart.dayPart}
               value={dayPart.value}
             />

examples/poodle-surf/src/designs/ReportDesign.ts

@@ -1,4 +1,4 @@
-import {Typograph, LinearGradient, Color} from '@diez/prefabs';
+import {Color, LinearGradient, Size2D, Typograph} from '@diez/prefabs';
 import {prefab} from '@diez/engine';
 import {PoodleSurfSlices} from './PoodleSurf.sketch';
 import {EdgeInsets} from './components/EdgeInsets';
@@ -81,8 +81,7 @@ class DayPartDesign {
   timeTypograph = typographs.caption;
   valueUnitSpacing = LayoutValues.CompactSpacing;
   layoutMargins = new EdgeInsets();
-  iconWidth = DayPartIconSize;
-  iconHeight = DayPartIconSize;
+  iconSize = Size2D.make(DayPartIconSize, DayPartIconSize);
 }
 
 interface ForecastCardDesignData {

packages/prefabs/src/image.ts

@@ -1,5 +1,6 @@
-import {Integer, prefab, Target} from '@diez/engine';
+import {prefab, Target} from '@diez/engine';
 import {File, FileType} from './file';
+import {Size2D} from './size2d';
 
 /**
  * Responsive image data.
@@ -9,8 +10,7 @@ export interface ImageData {
   file2x: File;
   file3x: File;
   file4x: File;
-  width: Integer;
-  height: Integer;
+  size: Size2D;
 }
 
 /**
@@ -46,12 +46,11 @@ export class Image extends prefab<ImageData>() {
     const name = filename.slice(0, extensionLocation);
     const ext = filename.slice(extensionLocation);
     return new Image({
-      width,
-      height,
       file: new File({src, type: FileType.Image}),
       file2x: new File({src: `${dir}/${name}@2x${ext}`, type: FileType.Image}),
       file3x: new File({src: `${dir}/${name}@3x${ext}`, type: FileType.Image}),
       file4x: new File({src: `${dir}/${name}@4x${ext}`, type: FileType.Image}),
+      size: Size2D.make(width, height),
     });
   }
 
@@ -60,21 +59,12 @@ export class Image extends prefab<ImageData>() {
     file2x: new File({type: FileType.Image}),
     file3x: new File({type: FileType.Image}),
     file4x: new File({type: FileType.Image}),
-    width: 0,
-    height: 0,
+    size: Size2D.make(0, 0),
   };
 
   options = {
     file4x: {
       targets: [Target.Android],
     },
   };
-
-  protected sanitize (data: ImageData) {
-    return {
-      ...data,
-      width: Math.round(data.width),
-      height: Math.round(data.height),
-    };
-  }
 }

packages/prefabs/src/index.ts

@@ -4,4 +4,5 @@ export * from './image';
 export * from './linear-gradient';
 export * from './lottie';
 export * from './point2d';
+export * from './size2d';
 export * from './typography';

packages/prefabs/src/size2d.ts

@@ -0,0 +1,36 @@
+import {prefab} from '@diez/engine';
+
+/**
+ * Size data.
+ */
+export interface Size2DData {
+  /**
+   * The width value of the size.
+   */
+  width: number;
+  /**
+   * The height value of the size.
+   */
+  height: number;
+}
+
+/**
+ * Provides a two dimensional size.
+ *
+ * Usage: `size = Size2D.make(1920, 1080);`.
+ *
+ * @noinheritdoc
+ */
+export class Size2D extends prefab<Size2DData>() {
+  defaults = {
+    width: 0,
+    height: 0,
+  };
+
+  /**
+   * Creates a two dimensional size.
+   */
+  static make (width: number, height: number) {
+    return new Size2D({width, height});
+  }
+}

packages/prefabs/test/image.test.ts

@@ -1,4 +1,5 @@
 import {Image} from '../src/image';
+import {Size2D} from '../src/size2d';
 
 describe('image', () => {
   test('basic functionality', () => {
@@ -8,8 +9,7 @@ describe('image', () => {
       file2x: {src: 'path/to/image@2x.png', type: 'image'},
       file3x: {src: 'path/to/image@3x.png', type: 'image'},
       file4x: {src: 'path/to/image@4x.png', type: 'image'},
-      width: 640,
-      height: 480,
+      size: Size2D.make(640, 480).serialize(),
     });
   });
 });

packages/prefabs/test/size2d.test.ts

@@ -0,0 +1,8 @@
+import {Size2D} from '../src/size2d';
+
+describe('Size2D', () => {
+  test('basic functionality', () => {
+    const size = Size2D.make(400, 300);
+    expect(size.serialize()).toEqual({width: 400, height: 300});
+  });
+});

packages/targets/.diezrc

@@ -40,6 +40,11 @@
       "android": "./lib/bindings/Point2D/android",
       "web": "./lib/bindings/Point2D/web"
     },
+    "@diez/prefabs:Size2D": {
+      "ios": "./lib/bindings/Size2D/ios",
+      "android": "./lib/bindings/Size2D/android",
+      "web": "./lib/bindings/Size2D/web"
+    },
     "@diez/prefabs:Typograph": {
       "ios": "./lib/bindings/Typograph/ios",
       "android": "./lib/bindings/Typograph/android",

packages/targets/sources/android/bindings/Image.kt

@@ -13,6 +13,7 @@ import com.bumptech.glide.request.transition.Transition
 import com.bumptech.glide.signature.ObjectKey
 import android.widget.ImageView
 import android.widget.TextView
+import kotlin.math.roundToInt
 
 {{> androidDataClassStart }}
 
@@ -113,8 +114,8 @@ private val effectiveDensity: Int
     }
 
 private fun getFromNetwork(image: Image, view: View, callback: (BitmapDrawable) -> Unit) {
-    val width = (image.width * Environment.resources.displayMetrics.density.toDouble()).toInt()
-    val height = (image.height * Environment.resources.displayMetrics.density.toDouble()).toInt()
+    val width = (image.size.width * Environment.resources.displayMetrics.density.toDouble()).roundToInt()
+    val height = (image.size.height * Environment.resources.displayMetrics.density.toDouble()).roundToInt()
     Glide
         .with(view.context)
         .load(image.correctDensityFile.url)

packages/targets/sources/ios/bindings/Point2D+Binding.swift

@@ -1,6 +1,8 @@
+import Foundation
 import CoreGraphics
 
 extension Point2D {
+    @objc
     public var cgPoint: CGPoint {
         return CGPoint(x: x, y: y)
     }

packages/targets/sources/ios/bindings/Size2D+Binding.swift

@@ -0,0 +1,9 @@
+import Foundation
+import CoreGraphics
+
+extension Size2D {
+    @objc
+    public var cgSize: CGSize {
+        return CGSize(width: width, height: height)
+    }
+}

packages/targets/sources/web/bindings/Size2D.d.ts

@@ -0,0 +1,36 @@
+export declare class Size2D {
+  /**
+   * The width of the size.
+   */
+  width: number;
+  /**
+   * The height of the size.
+   */
+  height: number;
+  /**
+   * The CSS `width` value.
+   * @example
+   * 400px
+   */
+  widthCss: string;
+  /**
+   * The CSS `height` value.
+   * @example
+   * 300px
+   */
+  heightCss: string;
+  /**
+   * CSS declarations for the `width` and `height` CSS properties.
+   */
+  style: {width: string, height: string};
+  /**
+   * The CSS `background-size` value.
+   * @example
+   * 400px 300px
+   */
+  backgroundSizeCss: string;
+  /**
+   * CSS declarations for the `background-size` CSS property.
+   */
+  backgroundSizeStyle: {backgroundSize: string};
+}