feat(prefabs): add linear gradient prefab (#191)

Additionally: - Add linear gradient extraction support to Figma and Sketch. - Extract linear gradient and colors from `PoodleSurf.sketch` for use in the PoodleSurf examples. - Add linear gradient to Lorem Ipsum example. - Add a `web-sdk-common` package (see `packages/web-sdk-common/README.md`).
diez · Nov 14, 2019 · dd3d35c · dd3d35c
1 parent 68a47b9
commit dd3d35c
Show file tree

Hide file tree

Showing 102 changed files with 1,861 additions and 393 deletions.
diff --git a/examples/lorem-ipsum/build/diez-lorem-ipsum-web/package.json b/examples/lorem-ipsum/build/diez-lorem-ipsum-web/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {
+    "@diez/web-sdk-common": "^10.0.0-beta.1",
     "lottie-web": "^5.5.2"
   }
 }
diff --git a/...rem-ipsum/examples/android/app/src/main/java/org/diez/examples/loremipsum/MainActivity.kt b/...rem-ipsum/examples/android/app/src/main/java/org/diez/examples/loremipsum/MainActivity.kt
@@ -1,6 +1,8 @@
 package org.diez.examples.loremipsum
 
 import android.content.res.Resources
+import android.graphics.drawable.PaintDrawable
+import android.graphics.drawable.shapes.RectShape
 import android.support.v7.app.AppCompatActivity
 import android.os.Bundle
 import android.util.TypedValue
@@ -28,7 +30,7 @@ class MainActivity : AppCompatActivity() {
     private fun apply(designSystem: DesignSystem) {
         root.setBackgroundColor(designSystem.colors.lightBackground.color)
 
-        headerLayout.setBackgroundColor(designSystem.colors.darkBackground.color)
+        headerLayout.background = backgroundFromGradient(designSystem.gradients.midnight)
 
         headerView.loadBackgroundImage(designSystem.images.masthead)
 
@@ -57,6 +59,13 @@ class MainActivity : AppCompatActivity() {
         animationTextView.apply(designSystem.typography.body)
     }
 
+    private fun backgroundFromGradient(gradient: LinearGradient): PaintDrawable {
+        val drawable = PaintDrawable()
+        drawable.shape = RectShape()
+        drawable.shaderFactory = gradient.shaderFactory
+        return drawable
+    }
+
     // TODO: add to --target android core.
     private fun Number.toPx(): Int {
         return TypedValue.applyDimension(

diff --git a/examples/lorem-ipsum/examples/ios/LoremIpsum/View.swift b/examples/lorem-ipsum/examples/ios/LoremIpsum/View.swift
@@ -3,6 +3,7 @@ import Lottie
 import DiezLoremIpsum
 
 class View: UIView {
+    let headerBackgroundView = GradientView()
     let headerView = UIView()
     let contentBackgroundView = UIView()
     let contentStackView = UIStackView()
@@ -43,7 +44,16 @@ class View: UIView {
     }
 
     private func addHeaderView() {
+        headerBackgroundView.translatesAutoresizingMaskIntoConstraints = false
+        insertSubview(headerBackgroundView, belowSubview: stackView)
+
+        headerBackgroundView.topAnchor.constraint(equalTo: topAnchor).isActive = true
+        headerBackgroundView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
+        headerBackgroundView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
+
         stackView.addArrangedSubview(headerView)
+
+        headerView.bottomAnchor.constraint(equalTo: headerBackgroundView.bottomAnchor).isActive = true
         headerView.heightAnchor.constraint(equalToConstant: 112).isActive = true
     }
 
@@ -106,3 +116,8 @@ class View: UIView {
     @available(*, unavailable)
     required init(coder aDecoder: NSCoder) { fatalError("\(#function) not implemented.") }
 }
+
+class GradientView: UIView {
+    var gradientLayer: CAGradientLayer { return layer as! CAGradientLayer }
+    override class var layerClass: AnyClass { return CAGradientLayer.self }
+}
diff --git a/examples/lorem-ipsum/examples/ios/LoremIpsum/ViewController.swift b/examples/lorem-ipsum/examples/ios/LoremIpsum/ViewController.swift
@@ -27,6 +27,8 @@ class ViewController: UIViewController {
         }
 
         view.backgroundColor = designSystem.colors.darkBackground.uiColor
+
+        view.headerBackgroundView.gradientLayer.apply(designSystem.gradients.midnight);
 
         if let mastheadImage = designSystem.images.masthead.uiImage {
             view.headerView.backgroundColor = UIColor(patternImage: mastheadImage)

diff --git a/examples/lorem-ipsum/examples/web/src/App.jsx b/examples/lorem-ipsum/examples/web/src/App.jsx
@@ -49,7 +49,9 @@ export default class App extends React.PureComponent {
 
     return (
       <div className={styles.wrapper}>
-        <div className={styles.masthead} />
+        <div className={styles.mastheadContainer}>
+          <div className={styles.masthead} />
+        </div>
         <div className={styles.contentContainer}>
           <div className={styles.content}>
             <Icon

diff --git a/examples/lorem-ipsum/examples/web/src/App.module.scss b/examples/lorem-ipsum/examples/web/src/App.module.scss
@@ -12,12 +12,15 @@
 .masthead {
   // Sass variables from `@diez/styles` provide a variety of directives. Here,
   // we are using colors, URLs, and numbers.
-  background-color: $colors-dark-background;
   background-image: $images-masthead-3x;
   background-size: $images-masthead-width $images-masthead-height;
   height: 194px;
 }
 
+.mastheadContainer {
+  background-image: $gradients-midnight;
+}
+
 .title {
   // Higher-order design tokens like `Typograph` provide reusable mixins.
   @include typography-heading1();

diff --git a/examples/lorem-ipsum/src/DesignSystem.ts b/examples/lorem-ipsum/src/DesignSystem.ts
@@ -1,4 +1,4 @@
-import {Color, Image, Lottie, Typograph, Font} from '@diez/prefabs';
+import {Color, Image, Lottie, Typograph, Font, LinearGradient} from '@diez/prefabs';
 import {Component, property} from '@diez/engine';
 import {Margin} from './components/Margin';
 
@@ -13,6 +13,7 @@ class Palette extends Component {
   @property white = Color.hex('#FFFFFF');
   @property black = Color.hex('#000010');
   @property purple = Color.rgb(86, 35, 238);
+  @property darkPurple = Color.rgb(22, 11, 54);
   @property lightPurple = this.purple.lighten(this.lightener);
 }
 
@@ -37,6 +38,10 @@ class Colors extends Component {
 
 const colors = new Colors();
 
+class Gradients extends Component {
+  @property midnight = LinearGradient.simpleVertical(palette.darkPurple, palette.black);
+}
+
 /**
  * All of rich language features of TypeScript are at your disposal; for example,
  * you can define an object to keep track of your fonts.
@@ -122,6 +127,7 @@ class Strings extends Component {
  */
 export class DesignSystem extends Component {
   @property colors = colors;
+  @property gradients = new Gradients();
   @property typography = new Typography();
   @property images = new Images();
   @property layoutValues = new LayoutValues();

diff --git a/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard.png b/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard.png
diff --git a/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard@2x.png b/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard@2x.png
diff --git a/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard@3x.png b/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard@3x.png
diff --git a/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard@4x.png b/examples/poodle-surf/assets/PoodleSurf.sketch.contents/slices/Artboard@4x.png
diff --git a/examples/poodle-surf/build/diez-poodle-surf-web/package.json b/examples/poodle-surf/build/diez-poodle-surf-web/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {
+    "@diez/web-sdk-common": "^10.0.0-beta.1",
     "lottie-web": "^5.5.2"
   }
 }
diff --git a/examples/poodle-surf/designs/PoodleSurf.sketch b/examples/poodle-surf/designs/PoodleSurf.sketch
diff --git a/...odle-surf/examples/android/app/src/main/java/org/diez/examples/poodlesurf/MainActivity.kt b/...odle-surf/examples/android/app/src/main/java/org/diez/examples/poodlesurf/MainActivity.kt
@@ -3,6 +3,8 @@ package org.diez.examples.poodlesurf
 import android.animation.Animator
 import android.content.res.Resources
 import android.graphics.drawable.GradientDrawable
+import android.graphics.drawable.PaintDrawable
+import android.graphics.drawable.shapes.RectShape
 import android.os.Bundle
 import android.support.v7.app.AppCompatActivity
 import android.util.TypedValue
@@ -91,7 +93,7 @@ class MainActivity : AppCompatActivity() {
         }
 
         // Header > LocationImage (Circle Image)
-        locationImage.borderColor = diez.designs.report.header.locationImage.strokeGradient.startColor.color
+        locationImage.borderColor = diez.designs.report.header.locationImage.strokeGradient.stops.first().color.color
         locationImage.borderWidth = diez.designs.report.header.locationImage.strokeWidth.toPx()
         locationImage.layoutParams = (locationImage.layoutParams as FrameLayout.LayoutParams).apply {
             width = diez.designs.report.header.locationImage.widthAndHeight.toPx()
@@ -126,8 +128,6 @@ class MainActivity : AppCompatActivity() {
         cardRoot: LinearLayout,
         cardTitle: TextView
     ) {
-        val gradient = diez.palette.gradient
-
         cardRoot.setPadding(
             shared.layoutMargins.left.toPx(),
             shared.layoutMargins.top.toPx(),
@@ -138,11 +138,12 @@ class MainActivity : AppCompatActivity() {
             bottomMargin = diez.designs.report.contentSpacing.toPx()
         }
 
-        cardRoot.background = GradientDrawable(
-            getOrientation(gradient),
-            intArrayOf(gradient.startColor.color, gradient.endColor.color)
-        ).apply {
-            cornerRadius = shared.cornerRadius.toPx().toFloat()
+        val background = PaintDrawable()
+        background.shape = RectShape()
+        background.shaderFactory = diez.palette.gradients.gradient.shaderFactory
+
+        cardRoot.background = background.apply {
+            setCornerRadius(shared.cornerRadius.toPx().toFloat())
         }
 
         cardTitle.text = shared.title
@@ -340,11 +341,6 @@ class MainActivity : AppCompatActivity() {
         tideLateValue.text = mocks.report.tide.late.value
     }
 
-    // TODO: implement.
-    private fun getOrientation(gradient: SimpleGradient): GradientDrawable.Orientation {
-        return GradientDrawable.Orientation.TL_BR
-    }
-
     private val animationListener = object : Animator.AnimatorListener {
         override fun onAnimationEnd(animation: Animator?) {}
 
@@ -384,4 +380,3 @@ class MainActivity : AppCompatActivity() {
         ).toInt()
     }
 }
-
diff --git a/examples/poodle-surf/examples/ios-objc/PoodleSurfObjC/Generic Views/GradientView.h b/examples/poodle-surf/examples/ios-objc/PoodleSurfObjC/Generic Views/GradientView.h
@@ -13,7 +13,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface GradientView : UIView
 
-- (void)applyGradient:(DEZSimpleGradient *)gradient;
+@property (nonatomic, readonly) CAGradientLayer *gradientLayer;
 
 - (instancetype)initWithCoder:(NSCoder *)aDecoder __attribute__((unavailable("This class does not support NSCoding.")));
 

diff --git a/examples/poodle-surf/examples/ios-objc/PoodleSurfObjC/Generic Views/GradientView.m b/examples/poodle-surf/examples/ios-objc/PoodleSurfObjC/Generic Views/GradientView.m
@@ -10,49 +10,14 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface GradientView ()
-
-@property (nonatomic, readonly) CAGradientLayer *gradientLayer;
-
-@end
-
 @implementation GradientView
 
-- (instancetype)initWithFrame:(CGRect)frame {
-    self = [super initWithFrame:frame];
-
-    _gradientLayer = [CAGradientLayer layer];
-    _gradientLayer.frame = self.layer.bounds;
-
-    [self.layer addSublayer:_gradientLayer];
-
-    return self;
-}
-
-- (void)layoutSubviews {
-    [super layoutSubviews];
-
-    self.gradientLayer.frame = self.layer.bounds;
-}
-
-- (void)applyGradient:(DEZSimpleGradient *)gradient {
-    self.gradientLayer.colors = @[
-        (id)gradient.startColor.uiColor.CGColor,
-        (id)gradient.endColor.uiColor.CGColor,
-    ];
-    self.gradientLayer.locations = @[@0, @1];
-    self.gradientLayer.startPoint = (CGPoint){
-        .x =  gradient.startPointX,
-        .y = gradient.startPointX,
-    };
-    self.gradientLayer.endPoint = (CGPoint){
-        .x = gradient.endPointX,
-        .y = gradient.endPointX,
-    };
+- (CAGradientLayer *)gradientLayer {
+    return (CAGradientLayer *)self.layer;
 }
 
-- (instancetype)initWithCoder:(NSCoder *)aDecoder {
-    @throw [NSException exceptionWithName:NSInternalInconsistencyException reason:@"initWithCoder: not implemented." userInfo:nil];
++ (Class)layerClass {
+    return CAGradientLayer.class;
 }
 
 @end

diff --git a/examples/poodle-surf/examples/ios-objc/PoodleSurfObjC/ViewController.m b/examples/poodle-surf/examples/ios-objc/PoodleSurfObjC/ViewController.m
@@ -79,7 +79,7 @@ - (void)viewDidLoad {
 
         imageView.image = component.designs.navigationTitle.icon.uiImage;
 
-        [gradientView applyGradient:component.designs.report.waterTemperature.shared.gradient];
+        [gradientView.gradientLayer dez_applyLinearGradient:component.designs.report.waterTemperature.shared.gradient];
 
         [animationView dez_loadLottie:component.designs.loading.animation withSession:NSURLSession.sharedSession completion:nil];
     }];

diff --git a/examples/poodle-surf/examples/ios/PoodleSurf.xcodeproj/project.pbxproj b/examples/poodle-surf/examples/ios/PoodleSurf.xcodeproj/project.pbxproj
@@ -27,11 +27,8 @@
 		46087C39225FD3F500F4B63F /* CardViewDescribable.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C38225FD3F500F4B63F /* CardViewDescribable.swift */; };
 		46087C3B225FDA8800F4B63F /* NSLayoutConstraint+Named.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C3A225FDA8800F4B63F /* NSLayoutConstraint+Named.swift */; };
 		46087C45225FF79C00F4B63F /* GradientView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C44225FF79C00F4B63F /* GradientView.swift */; };
-		46087C47225FFC1800F4B63F /* Gradient.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C46225FFC1800F4B63F /* Gradient.swift */; };
-		46087C49225FFC3000F4B63F /* Gradient+Example.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C48225FFC3000F4B63F /* Gradient+Example.swift */; };
 		46087C4F226105B500F4B63F /* ReportViewModelBinder.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C4E226105B400F4B63F /* ReportViewModelBinder.swift */; };
 		46087C532261307500F4B63F /* UIEdgeInsets+Diez.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C522261307500F4B63F /* UIEdgeInsets+Diez.swift */; };
-		46087C552261499000F4B63F /* Gradient+Diez.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C542261499000F4B63F /* Gradient+Diez.swift */; };
 		46087C572261758D00F4B63F /* ReportModel+Diez.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C562261758D00F4B63F /* ReportModel+Diez.swift */; };
 		46087C5922617A9000F4B63F /* UIImage+URL.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C5822617A9000F4B63F /* UIImage+URL.swift */; };
 		46087C5F22623D8800F4B63F /* ReportViewController+Diez.swift in Sources */ = {isa = PBXBuildFile; fileRef = 46087C5E22623D8800F4B63F /* ReportViewController+Diez.swift */; };
@@ -64,11 +61,8 @@
 		46087C38225FD3F500F4B63F /* CardViewDescribable.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CardViewDescribable.swift; sourceTree = "<group>"; };
 		46087C3A225FDA8800F4B63F /* NSLayoutConstraint+Named.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "NSLayoutConstraint+Named.swift"; sourceTree = "<group>"; };
 		46087C44225FF79C00F4B63F /* GradientView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GradientView.swift; sourceTree = "<group>"; };
-		46087C46225FFC1800F4B63F /* Gradient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Gradient.swift; sourceTree = "<group>"; };
-		46087C48225FFC3000F4B63F /* Gradient+Example.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Gradient+Example.swift"; sourceTree = "<group>"; };
 		46087C4E226105B400F4B63F /* ReportViewModelBinder.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ReportViewModelBinder.swift; sourceTree = "<group>"; };
 		46087C522261307500F4B63F /* UIEdgeInsets+Diez.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "UIEdgeInsets+Diez.swift"; sourceTree = "<group>"; };
-		46087C542261499000F4B63F /* Gradient+Diez.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Gradient+Diez.swift"; sourceTree = "<group>"; };
 		46087C562261758D00F4B63F /* ReportModel+Diez.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "ReportModel+Diez.swift"; sourceTree = "<group>"; };
 		46087C5822617A9000F4B63F /* UIImage+URL.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIImage+URL.swift"; sourceTree = "<group>"; };
 		46087C5E22623D8800F4B63F /* ReportViewController+Diez.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "ReportViewController+Diez.swift"; sourceTree = "<group>"; };
@@ -144,9 +138,6 @@
 				46087C0D225D62CF00F4B63F /* HorizontalImageVerticalLabelsView.swift */,
 				46087BFE225D544400F4B63F /* StrokedCircularImageView.swift */,
 				46087C44225FF79C00F4B63F /* GradientView.swift */,
-				46087C46225FFC1800F4B63F /* Gradient.swift */,
-				46087C542261499000F4B63F /* Gradient+Diez.swift */,
-				46087C48225FFC3000F4B63F /* Gradient+Example.swift */,
 			);
 			path = "Generic Views";
 			sourceTree = "<group>";
@@ -389,16 +380,13 @@
 				46087BFF225D544400F4B63F /* StrokedCircularImageView.swift in Sources */,
 				46087C572261758D00F4B63F /* ReportModel+Diez.swift in Sources */,
 				46087BFC225D419500F4B63F /* ReportHeaderView.swift in Sources */,
-				46087C552261499000F4B63F /* Gradient+Diez.swift in Sources */,
 				46087C39225FD3F500F4B63F /* CardViewDescribable.swift in Sources */,
 				46087C14225D795000F4B63F /* LoadingViewController.swift in Sources */,
 				46087BE7225D341600F4B63F /* AppDelegate.swift in Sources */,
 				46087C45225FF79C00F4B63F /* GradientView.swift in Sources */,
 				46087C5F22623D8800F4B63F /* ReportViewController+Diez.swift in Sources */,
 				46087C4F226105B500F4B63F /* ReportViewModelBinder.swift in Sources */,
 				46087C3B225FDA8800F4B63F /* NSLayoutConstraint+Named.swift in Sources */,
-				46087C47225FFC1800F4B63F /* Gradient.swift in Sources */,
-				46087C49225FFC3000F4B63F /* Gradient+Example.swift in Sources */,
 				46087BFA225D3F9900F4B63F /* ReportView.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

diff --git a/examples/poodle-surf/examples/ios/PoodleSurf/Generic Views/Gradient+Diez.swift b/examples/poodle-surf/examples/ios/PoodleSurf/Generic Views/Gradient+Diez.swift
diff --git a/examples/poodle-surf/examples/ios/PoodleSurf/Generic Views/Gradient+Example.swift b/examples/poodle-surf/examples/ios/PoodleSurf/Generic Views/Gradient+Example.swift