tweak: update poodle-surf and lorem-ipsum to use instance syntax (#317)

examples/lorem-ipsum/design-system/src/DesignSystem.ts

@@ -2,41 +2,26 @@ import {Color, DropShadow, Image, Lottie, Toward, Typograph, Font, LinearGradien
 import {Margin} from './components/Margin';
 
 /**
- * You can collect anything inside a Diez component. Design tokens specified as public
- * properties will be made available in the SDKs transpiled with Diez. Everything
- * else is purely internal.
+ * You can collect anything inside a Diez component. Design tokens specified as
+ * properties will be made available in the SDKs transpiled with Diez.
  */
-class Colors {
-  private lightener = 0.2;
-
-  white = Color.hex('#FFFFFF');
-  black = Color.hex('#000010');
-  purple = Color.rgb(86, 35, 238);
-  darkPurple = Color.rgb(22, 11, 54);
-  lightPurple = this.purple.lighten(this.lightener);
+const colors = {
+  white: Color.hex('#FFFFFF'),
+  black: Color.hex('#000010'),
+  purple: Color.rgb(86, 35, 238),
+  darkPurple: Color.rgb(22, 11, 54),
 }
 
-/**
- * Sometimes, it's helpful to keep a copy of a component instance you intend to
- * reuse while defining higher-level components in your design system.
- *
- * For example, you can use this instance of the `Palette` component to design your
- * typography.
- */
-const colors = new Colors();
-
 /**
  * You can reference properties from other components.
  */
-class Palette {
-  contentBackground = colors.white;
-  text = colors.black;
-  caption = colors.purple;
-  headerBackground = LinearGradient.make(Toward.Bottom, colors.darkPurple, colors.black);
+const palette = {
+  contentBackground: colors.white,
+  text: colors.black,
+  caption: colors.purple,
+  headerBackground: LinearGradient.make(Toward.Bottom, colors.darkPurple, colors.black),
 }
 
-const palette = new Palette();
-
 /**
  * All of rich language features of TypeScript are at your disposal; for example,
  * you can define an object to keep track of your fonts.
@@ -51,67 +36,67 @@ const Fonts = {
  * Typographs encapsulate type styles with support for a specific font, font size,
  * and color. More typograph properties are coming soon.
  */
-class Typography {
-  heading1 = new Typograph({
+const typography = {
+  heading1: new Typograph({
     font: Fonts.SourceSansPro.Regular,
     fontSize: 24,
     color: palette.text,
-  });
+  }),
 
-  body = new Typograph({
+  body: new Typograph({
     font: Fonts.SourceSansPro.Regular,
     fontSize: 18,
     color: palette.text,
     alignment: TextAlignment.Center,
-  });
+  }),
 
-  caption = new Typograph({
+  caption: new Typograph({
     font: Fonts.SourceSansPro.Regular,
     fontSize: 14,
     color: palette.caption,
-  });
+  }),
 }
 
 /**
  * In addition to colors and typography, you can also collect other types of
  * design system primitives in components as well — such as images, icons &
  * animations.
  */
-class Images {
-  logo = Image.responsive('assets/logo.png', 52, 48);
-  masthead = Image.responsive('assets/masthead.png', 208, 88);
+const images = {
+  logo: Image.responsive('assets/logo.png', 52, 48),
+  masthead: Image.responsive('assets/masthead.png', 208, 88),
 }
 
 /**
  * You can even collect your own custom components.
  */
-class LayoutValues {
-  spacingSmall = 5;
-  spacingMedium = 25;
-  spacingLarge = 40;
-  contentMargin = new Margin({
-    top: this.spacingLarge,
-    left: this.spacingMedium,
-    right: this.spacingMedium,
-    bottom: this.spacingMedium
-  });
+const layoutValues = {
+  spacingSmall: 5,
+  spacingMedium: 25,
+  spacingLarge: 40,
+  contentMargin: new Margin({
+    top: 40,
+    left: 10,
+    right: 10,
+    bottom: 10,
+  }),
 }
 
 /**
  * You can also define strings.
  */
-class Strings {
-  title = 'Diez';
-  caption = 'Keep your designs in sync with code';
-  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.';
+const strings = {
+  title: 'Diez',
+  caption: 'Keep your designs in sync with code',
+  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({
+const shadows = {
+  logo: new DropShadow({
     offset: Point2D.make(0, 1),
     radius: 16,
     color: colors.black.fade(0.59),
-  });
+  }),
 }
 
 /**
@@ -129,12 +114,12 @@ class Shadows {
  *     Look for `MainActivity.kt` inside `examples/android` to see how you can
  *     use Diez in an Android codebase.
  */
-export class DesignSystem {
-  palette = palette;
-  typography = new Typography();
-  images = new Images();
-  layoutValues = new LayoutValues();
-  strings = new Strings();
-  loadingAnimation = Lottie.fromJson('assets/loadingAnimation.json', false);
-  shadows = new Shadows();
+export const designSystem = {
+  palette,
+  typography,
+  images,
+  layoutValues,
+  strings,
+  shadows,
+  loadingAnimation: Lottie.fromJson('assets/loadingAnimation.json', false),
 }

examples/lorem-ipsum/design-system/src/index.ts

@@ -3,4 +3,4 @@
  * components exported here will be made available to the packages generated when
  * you run `diez compile`.
  */
-export {DesignSystem} from './DesignSystem';
+export {designSystem} from './DesignSystem';

examples/poodle-surf/design-system/src/DesignSystem.ts

@@ -1,16 +1,16 @@
-import {LoadingDesign, NavigationTitleDesign, palette, ReportDesign, typographs} from './designs';
+import {loadingDesign, navigationTitleDesign, palette, reportDesign, typographs} from './designs';
 
-class Designs {
-  report = new ReportDesign();
-  loading = new LoadingDesign();
-  navigationTitle = new NavigationTitleDesign();
+const designs = {
+  report: reportDesign,
+  loading: loadingDesign,
+  navigationTitle: navigationTitleDesign,
 }
 
 /**
  * The design system for Poodle Surf.
  */
-export class DesignSystem {
-  palette = palette;
-  typographs = typographs;
-  designs = new Designs();
+export const designSystem = {
+  designs,
+  palette,
+  typographs,
 }

examples/poodle-surf/design-system/src/ModelMocks.ts

@@ -1,8 +1,8 @@
-import {ReportModelMock} from './mocks';
+import {reportModelMock} from './mocks';
 
 /**
  * The model mocks for Poodle Surf.
  */
-export class ModelMocks {
-  report = new ReportModelMock();
+export const modelMocks = {
+  report: reportModelMock,
 }

examples/poodle-surf/design-system/src/designs/LoadingDesign.ts

@@ -10,7 +10,7 @@ enum LottieJsons {
 /**
  * The loading design.
  */
-export class LoadingDesign {
-  backgroundColor = palette.loadingBackground;
-  animation = Lottie.fromJson(LottieJsons.PoodleSurf);
+export const loadingDesign = {
+  backgroundColor: palette.loadingBackground,
+  animation: Lottie.fromJson(LottieJsons.PoodleSurf),
 }

examples/poodle-surf/design-system/src/designs/NavigationTitleDesign.ts

@@ -4,10 +4,10 @@ import {LayoutValues, palette, typographs} from './constants';
 /**
  * The navigation title design.
  */
-export class NavigationTitleDesign {
-  barTintColor = palette.background;
-  icon = PoodleSurfSlices.Icon;
-  title = 'P o o d l e S u r f';
-  typograph = typographs.headerTitle;
-  iconToTitleSpacing = LayoutValues.DefaultSpacing;
+export const navigationTitleDesign = {
+  barTintColor: palette.background,
+  icon: PoodleSurfSlices.Icon,
+  title: 'P o o d l e S u r f',
+  typograph: typographs.headerTitle,
+  iconToTitleSpacing: LayoutValues.DefaultSpacing,
 }