feat(prefabs): add DropShadow (#225)

examples/lorem-ipsum/build/diez-lorem-ipsum-web/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {
-    "@diez/web-sdk-common": "^10.0.0-beta.2",
+    "@diez/web-sdk-common": "^10.0.0-beta.3",
     "lottie-web": "^5.5.2"
   }
 }

examples/lorem-ipsum/examples/ios/LoremIpsum/ViewController.swift

@@ -35,6 +35,7 @@ class ViewController: UIViewController {
         }
 
         view.iconView.image = designSystem.images.logo.uiImage
+        view.iconView.layer.apply(designSystem.shadows.logo)
 
         view.contentBackgroundView.backgroundColor = designSystem.palette.contentBackground.uiColor
         let margin = designSystem.layoutValues.contentMargin

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

@@ -64,6 +64,7 @@
 
 .icon {
   @include images-logo-background-image();
+  @include shadows-logo-filter();
   transform: translate(0, -50%);
   position: absolute;
   margin-left: $layout-values-spacing-medium-px;

examples/lorem-ipsum/src/DesignSystem.ts

@@ -1,4 +1,4 @@
-import {Color, Image, Lottie, Toward, Typograph, Font, LinearGradient} from '@diez/prefabs';
+import {Color, DropShadow, Image, Lottie, Toward, Typograph, Font, LinearGradient, Point2D} from '@diez/prefabs';
 import {Margin} from './components/Margin';
 
 /**
@@ -106,6 +106,14 @@ class Strings {
   helper = 'Modify the contents of “src/DesignSystem.ts” (relative to the root of the Diez project) to see changes to the design system in real time.';
 }
 
+class Shadows {
+  logo = new DropShadow({
+    offset: Point2D.make(0, 1),
+    radius: 16,
+    color: colors.black.fade(0.59),
+  });
+}
+
 /**
  * Note how this component is exported from `index.ts`. Diez compiles these
  * exported components for your apps' codebases.
@@ -128,4 +136,5 @@ export class DesignSystem {
   layoutValues = new LayoutValues();
   strings = new Strings();
   loadingAnimation = Lottie.fromJson('assets/loadingAnimation.json', false);
+  shadows = new Shadows();
 }

examples/poodle-surf/build/diez-poodle-surf-web/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {
-    "@diez/web-sdk-common": "^10.0.0-beta.2",
+    "@diez/web-sdk-common": "^10.0.0-beta.3",
     "lottie-web": "^5.5.2"
   }
 }

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

@@ -87,6 +87,8 @@ - (void)viewDidLoad {
 
         imageView.image = component.designs.navigationTitle.icon.uiImage;
 
+        [imageView.layer dez_applyDropShadow:component.designs.report.wind.shared.dropShadow];
+
         [gradientView.gradientLayer dez_applyLinearGradient:component.designs.report.waterTemperature.shared.gradient];
 
         [animationView dez_loadLottie:component.designs.loading.animation completion:nil];

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

@@ -76,8 +76,9 @@ extension ReportViewController {
         view.titleLabel.attributedText = design.titleTypograph.attributedString(decorating: design.title)
         view.titleContentSpacing = design.titleContentSpacing
         view.layoutMargins = UIEdgeInsets(design.layoutMargins)
-        view.cornerRadius = design.cornerRadius
         view.backgroundView.gradientLayer.apply(design.gradient)
+        view.backgroundView.cornerRadius = design.cornerRadius
+        view.layer.apply(design.dropShadow)
     }
 
     private func apply(_ design: DayPartDesign, to view: DayPartView) {

examples/poodle-surf/examples/web/src/App.tsx

@@ -31,17 +31,19 @@ class App extends React.PureComponent<{}, {ds: DesignSystem, mocks: ModelMocks}>
         />
         <div
           style={{
-            columns: '320px 2',
-            columnGap: ds.designs.report.contentSpacing,
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-around',
+            alignItems: 'baseline',
             maxWidth: 680,
             margin: '0 auto',
             paddingLeft: ds.designs.report.contentLayoutMargins.left,
             paddingRight: ds.designs.report.contentLayoutMargins.right,
           }}
         >
           <WaterTemperatureCard ds={ds.designs.report.waterTemperature} mocks={mocks.report.temperature} />
-          <ForecastCard ds={ds.designs.report.wind} mocks={mocks.report.wind} />
           <ForecastCard ds={ds.designs.report.swell} mocks={mocks.report.swell} />
+          <ForecastCard ds={ds.designs.report.wind} mocks={mocks.report.wind} />
           <ForecastCard ds={ds.designs.report.tide} mocks={mocks.report.tide} />
         </div>
       </div>

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

@@ -14,6 +14,7 @@ export default class Card extends React.PureComponent<CardProps> {
 
     return (
       <div
+        className="card"
         style={{
           backgroundImage: ds.gradient.linearGradient,
           paddingTop: ds.layoutMargins.top,
@@ -22,10 +23,11 @@ export default class Card extends React.PureComponent<CardProps> {
           paddingRight: ds.layoutMargins.right,
           borderRadius: ds.cornerRadius,
           marginBottom: ds.layoutMargins.bottom,
-          breakInside: 'avoid',
+          boxShadow: ds.dropShadow.boxShadow,
           display: 'flex',
           flexWrap: 'wrap',
           flexDirection: 'column',
+          width: '42%',
         }}
       >
         <h3 style={{marginBottom: 20, ...ds.titleTypograph.style}}>{ds.title}</h3>

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

@@ -19,15 +19,12 @@ export default class ForecastCard extends React.PureComponent<ForecastCardProps>
       <Card ds={ds.shared}>
         <div
           style={{
-            columns: 3,
-            columnGap: ds.dayPartsHorizontalSpacing,
-            columnRule: `${ds.separatorWidth}px solid ${ds.separatorColor}`,
-            display: 'inline-block',
+            display: 'flex',
+            justifyContent: 'space-around',
           }}
         >
           {Object.values(mocks).map((dayPart: WindDayPartMock) => (
             <Column
-              // style={{marginRight: ds.dayPartsHorizontalSpacing}}
               key={dayPart.dayPart}
               ds={ds.dayPart}
               icon={dayPart.direction && dayPart.direction.url}

examples/poodle-surf/examples/web/src/index.css

@@ -17,3 +17,9 @@ h1, h2, h3, h4, h5 {
   margin: 0;
   font-weight: normal;
 }
+
+@media (max-width: 680px) {
+  .card {
+    width: 100%!important;
+  }
+}

examples/poodle-surf/src/designs/PoodleSurf.sketch.ts

@@ -1,4 +1,4 @@
-import { Color, File, GradientStop, Image, LinearGradient, Point2D } from "@diez/prefabs";
+import { Color, DropShadow, File, GradientStop, Image, LinearGradient, Point2D } from "@diez/prefabs";
 
 class PoodleSurfColors {
     pink = Color.rgba(255, 63, 112, 1);
@@ -13,6 +13,10 @@ class PoodleSurfGradients {
     gradient = new LinearGradient({stops: [GradientStop.make(0.000000, Color.rgba(255, 63, 112, 1)), GradientStop.make(1.000000, Color.rgba(255, 154, 58, 1))], start: Point2D.make(0.256905, -0.052988), end: Point2D.make(0.912005, 1.039424)});
 }
 
+class PoodleSurfShadows {
+    cardStyleDropShadow = new DropShadow({offset: Point2D.make(0.000000, 2.000000), radius: 30.000000, color: Color.rgba(255, 63, 112, 0.7)});
+}
+
 export class PoodleSurfSlicesFiles {
     static Thermometer = new File({src: "assets/PoodleSurf.sketch.contents/slices/Thermometer.png"});
     static Thermometer2x = new File({src: "assets/PoodleSurf.sketch.contents/slices/Thermometer@2x.png"});
@@ -67,6 +71,7 @@ export class PoodleSurfSlices {
 export class PoodleSurfTokens {
     colors = new PoodleSurfColors();
     gradients = new PoodleSurfGradients();
+    shadows = new PoodleSurfShadows();
 }
 
 export const poodleSurfTokens = new PoodleSurfTokens();

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

@@ -1,8 +1,8 @@
-import {Color, LinearGradient, Size2D, Typograph} from '@diez/prefabs';
+import {Color, DropShadow, LinearGradient, Size2D, Typograph} from '@diez/prefabs';
 import {prefab} from '@diez/engine';
 import {PoodleSurfSlices} from './PoodleSurf.sketch';
 import {EdgeInsets} from './components/EdgeInsets';
-import {LayoutValues, palette, typographs} from './constants';
+import {LayoutValues, palette, shadows, typographs} from './constants';
 
 class LocationImageDesign {
   strokeWidth = 3;
@@ -31,6 +31,7 @@ interface SharedCardDesignData {
   gradient: LinearGradient;
   layoutMargins: EdgeInsets;
   cornerRadius: number;
+  dropShadow: DropShadow;
 }
 
 class SharedCardDesign extends prefab<SharedCardDesignData>() {
@@ -45,7 +46,8 @@ class SharedCardDesign extends prefab<SharedCardDesignData>() {
       left: LayoutValues.DefaultMargin,
       right: LayoutValues.DefaultMargin,
     }),
-    cornerRadius: 5,
+    cornerRadius: 8,
+    dropShadow: shadows.card,
   };
 }
 

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

@@ -17,6 +17,12 @@ class Palette {
  */
 export const palette = new Palette();
 
+class Shadows {
+  card = poodleSurfTokens.shadows.cardStyleDropShadow;
+}
+
+export const shadows = new Shadows();
+
 /**
  * A registry of all of the design's fonts.
  */

packages/generation/src/api.ts

@@ -53,6 +53,7 @@ export interface CodegenDesignSystem {
   projectRoot: string;
   colors: CodegenEntity[];
   gradients: CodegenEntity[];
+  shadows: CodegenEntity[];
   typographs: CodegenEntity[];
   fonts: GeneratedFonts;
   assets: GeneratedAssets;

packages/generation/src/constants.ts

@@ -0,0 +1,6 @@
+/**
+ * The precision to use when rounding numbers to a reasonable float value.
+ *
+ * @ignore
+ */
+export const floatPrecision = 6;

packages/generation/src/drop-shadow.ts

@@ -0,0 +1,16 @@
+import {floatPrecision} from './constants';
+import {GeneratedPoint2D, getPoint2DInitializer} from './point2d';
+
+interface GeneratedDropShadow {
+  colorInitializer: string;
+  offset: GeneratedPoint2D;
+  radius: number;
+}
+
+/**
+ * Returns a drop shadow initializer.
+ * @ignore
+ */
+export const getDropShadowInitializer = (shadow: GeneratedDropShadow) => {
+  return `new DropShadow({offset: ${getPoint2DInitializer(shadow.offset)}, radius: ${shadow.radius.toFixed(floatPrecision)}, color: ${shadow.colorInitializer}})`;
+};

packages/generation/src/index.ts

@@ -1,5 +1,7 @@
 export * from './api';
 export * from './color';
+export * from './drop-shadow';
 export * from './linear-gradient';
+export * from './point2d';
 export * from './typography';
 export * from './utils';

packages/generation/src/linear-gradient.ts

@@ -1,25 +1,22 @@
-interface GeneratedPoint2D {
-  x: number;
-  y: number;
-}
+import {floatPrecision} from './constants';
+import {GeneratedPoint2D, getPoint2DInitializer} from './point2d';
 
 interface GeneratedGradientStop {
   position: number;
   colorInitializer: string;
 }
 
-const FloatPrecision = 6;
-
-const getPoint2DInitializer = (point: GeneratedPoint2D) =>
-  `Point2D.make(${point.x.toFixed(FloatPrecision)}, ${point.y.toFixed(FloatPrecision)})`;
-
 /**
  * Returns a linear gradient initializer.
  * @ignore
  */
-export const getLinearGradientInitializer = (stops: GeneratedGradientStop[], start: GeneratedPoint2D, end: GeneratedPoint2D) => {
+export const getLinearGradientInitializer = (
+  stops: GeneratedGradientStop[],
+  start: GeneratedPoint2D,
+  end: GeneratedPoint2D,
+) => {
   const colorStopInitializers = stops.map((stop) => {
-    return `GradientStop.make(${stop.position.toFixed(FloatPrecision)}, ${stop.colorInitializer})`;
+    return `GradientStop.make(${stop.position.toFixed(floatPrecision)}, ${stop.colorInitializer})`;
   });
   const colorStopInitializer = `[${colorStopInitializers.join(', ')}]`;
   return `new LinearGradient({stops: ${colorStopInitializer}, start: ${getPoint2DInitializer(start)}, end: ${getPoint2DInitializer(end)}})`;

packages/generation/src/point2d.ts

@@ -0,0 +1,17 @@
+import {floatPrecision} from './constants';
+
+/**
+ * A 2D point.
+ * @ignore
+ */
+export interface GeneratedPoint2D {
+  x: number;
+  y: number;
+}
+
+/**
+ * Returns a 2D point initializer.
+ * @ignore
+ */
+export const getPoint2DInitializer = (point: GeneratedPoint2D) =>
+  `Point2D.make(${point.x.toFixed(floatPrecision)}, ${point.y.toFixed(floatPrecision)})`;

packages/generation/src/utils.ts

@@ -67,6 +67,7 @@ export const createDesignSystemSpec = (
   projectRoot,
   colors: [],
   gradients: [],
+  shadows: [],
   typographs: [],
   fonts: new Map(),
   assets: new Map(),
@@ -157,10 +158,12 @@ export const codegenDesignSystem = async (spec: CodegenDesignSystem) => {
   const designSystemImports = new Set<string>();
   const colorsName = localResolver.getComponentName(`${designSystemName} Colors`);
   const gradientsName = localResolver.getComponentName(`${designSystemName} Gradients`);
+  const shadowsName = localResolver.getComponentName(`${designSystemName} Shadows`);
   const typographsName = localResolver.getComponentName(`${designSystemName} Typographs`);
 
   const hasColors = spec.colors.length > 0;
   const hasGradients = spec.gradients.length > 0;
+  const hasShadows = spec.shadows.length > 0;
   const hasTypographs = spec.typographs.length > 0;
 
   if (hasColors) {
@@ -194,6 +197,22 @@ export const codegenDesignSystem = async (spec: CodegenDesignSystem) => {
     });
   }
 
+  if (hasShadows) {
+    designSystemImports.add('Color');
+    designSystemImports.add('Point2D');
+    designSystemImports.add('DropShadow');
+    sourceFile.addClass({
+      name: shadowsName,
+      properties: spec.shadows.map(({name, initializer}) => {
+        const shadowName = localResolver.getPropertyName(name || 'Untitled Shadow', shadowsName);
+        return {
+          initializer,
+          name: shadowName,
+        };
+      }),
+    });
+  }
+
   if (hasTypographs) {
     designSystemImports.add('Color');
     designSystemImports.add('Typograph');
@@ -304,6 +323,13 @@ export const codegenDesignSystem = async (spec: CodegenDesignSystem) => {
     });
   }
 
+  if (hasShadows) {
+    exportedClassDeclaration.addProperty({
+      name: 'shadows',
+      initializer: `new ${shadowsName}()`,
+    });
+  }
+
   if (hasTypographs) {
     designSystemImports.add('Font');
     exportedClassDeclaration.addProperty({

packages/generation/test/codegen.e2e.test.ts

@@ -120,6 +120,17 @@ describe('codegen.e2e', () => {
       },
     );
 
+    spec.shadows.push(
+      {
+        name: '',
+        initializer: '6',
+      },
+      {
+        name: 'Some Shadow',
+        initializer: '7',
+      },
+    );
+
     registerAsset(
       {
         src: 'assets/blah/Foobar.png',