feat: add box component for testing purposes

src/container/property-list/property-list.tsx

@@ -109,10 +109,9 @@ class PropertyViewContainer extends React.Component<PropertyViewContainerProps>
 			default: {
 				return (
 					<div key={id}>
-						Unknown type: {type}
 						<Component.StringItem
 							{...base}
-							value={''}
+							value={property.getValue() as string}
 							onChange={e => this.handleInputChange(e)}
 						/>
 					</div>

src/preview/preview-renderer.tsx

@@ -67,7 +67,30 @@ const Page: React.SFC = (props: any) => (
 	</>
 );
 
+// tslint:disable-next-line:no-any
+const Box: React.SFC = (props: any) => {
+	const style = {
+		alignItems: props.alignItems,
+		display: props.flex ? 'flex' : 'block',
+		flexBasis: props.flexBasis,
+		// tslint:disable-next-line:no-any
+		flexDirection: props.column ? 'column' : (null as any),
+		// tslint:disable-next-line:no-any
+		flexWrap: props.wrap ? 'wrap' : ('nowrap' as any),
+		flexGrow: props.flexGrow,
+		flexShrink: props.flexShrink,
+		justifyContent: props.justifyContent,
+		order: props.order,
+		width: props.width,
+		height: props.height,
+		backgroundColor: props.backgroundColor
+	};
+
+	return <div style={style}>{props.children}</div>;
+};
+
 const SYNTHETICS = {
+	box: Box,
 	page: Page,
 	placeholder: props => <img src={props.src} style={{ width: '100%', height: 'auto' }} />,
 	text: props => <span>{props.text}</span>

src/preview/preview.tsx

@@ -288,6 +288,8 @@ function createComponentGetter(store: PreviewStore): (props: any, synthetics: an
 				return synthetics.placeholder;
 			case 'synthetic:text':
 				return synthetics.text;
+			case 'synthetic:box':
+				return synthetics.box;
 		}
 	};
 }

src/store/element/element-property/element-property.ts

@@ -24,6 +24,10 @@ export class ElementProperty {
 		this.patternProperty = init.patternProperty;
 		this.setDefault = init.setDefault;
 		this.value = init.value;
+
+		if (typeof this.value === 'undefined' && this.setDefault) {
+			this.value = this.patternProperty.getDefaultValue();
+		}
 	}
 
 	public static from(serialized: Types.SerializedElementProperty): ElementProperty {
@@ -98,11 +102,11 @@ function deserializeProperty(input: Types.SerializedPatternProperty): PatternPro
 		case PatternPropertyType.Object:
 			return P.PatternObjectProperty.from(input);
 		case PatternPropertyType.String:
-			return P.StringPatternProperty.from(input);
+			return P.PatternStringProperty.from(input);
 		case PatternPropertyType.StringArray:
 			return P.StringPatternArrayProperty.from(input);
 		default:
 			console.warn(`Tried to deserialize unknown property: ${JSON.stringify(input)}`);
-			return P.StringPatternProperty.from(input);
+			return P.PatternStringProperty.from(input);
 	}
 }

src/store/page/page.ts

@@ -85,7 +85,8 @@ export class Page {
 					name: init.name,
 					pattern: init.styleguide.getPatternByType(SyntheticPatternType.SyntheticPage),
 					contents: [],
-					properties: []
+					properties: [],
+					setDefaults: true
 				})
 		});
 	}

src/store/pattern-property/property.ts

@@ -212,18 +212,6 @@ export abstract class PatternProperty {
 		return this.required;
 	}
 
-	/**
-	 * Sets the default value of the property when creating a new page element.
-	 * This is the Alva default (such as "Lorem Ipsum"), not the default for production component
-	 * instantiation (where such defaults sometimes do not make sense).<br>
-	 * <b>Note:</b> This method should only be called from the pattern parsers.
-	 * @param defaultValue The default value.
-	 */
-	// tslint:disable-next-line:no-any
-	public setDefaultValue(defaultValue: any): void {
-		this.defaultValue = defaultValue;
-	}
-
 	/**
 	 * Sets whether this property is marked as hidden in Alva (exists in the pattern, but the designer
 	 * should not provide content for it).<br>

src/store/pattern-property/string-property.ts

@@ -8,11 +8,11 @@ import * as Types from '../types';
  * but everything is converted into a proper string (never undefined or null).
  * @see Property
  */
-export class StringPatternProperty extends PatternProperty {
+export class PatternStringProperty extends PatternProperty {
 	public readonly type = PatternPropertyType.String;
 
-	public static from(serialized: Types.SerializedStringProperty): StringPatternProperty {
-		return new StringPatternProperty({
+	public static from(serialized: Types.SerializedStringProperty): PatternStringProperty {
+		return new PatternStringProperty({
 			hidden: serialized.hidden,
 			defaultValue: serialized.defaultValue,
 			id: serialized.id,

src/store/pattern/pattern.ts

@@ -248,9 +248,12 @@ const stringToType = (input: string): PatternType => {
 			return SyntheticPatternType.SyntheticPlaceholder;
 		case 'synthetic:text':
 			return SyntheticPatternType.SyntheticText;
+		case 'synthetic:box':
+			return SyntheticPatternType.SyntheticBox;
 		case 'pattern':
-		default:
 			return ConcretePatternType.Pattern;
+		default:
+			throw new Error(`Unknown pattern type ${input}`);
 	}
 };
 
@@ -273,7 +276,7 @@ const unserializeProperty = (
 		case PatternPropertyType.Object:
 			return P.PatternObjectProperty.from(serialized);
 		case PatternPropertyType.String:
-			return P.StringPatternProperty.from(serialized);
+			return P.PatternStringProperty.from(serialized);
 		case PatternPropertyType.StringArray:
 			return P.StringPatternArrayProperty.from(serialized);
 	}

src/store/styleguide/box.ts

@@ -0,0 +1,150 @@
+import { Pattern, SyntheticPatternType } from '../pattern';
+import {
+	PatternBooleanProperty,
+	PatternEnumProperty,
+	PatternEnumPropertyOption,
+	PatternNumberProperty,
+	PatternStringProperty
+} from '../pattern-property';
+import * as uuid from 'uuid';
+
+export const Box = () => {
+	const defaultAlign = uuid.v4();
+	const defaultJustify = uuid.v4();
+
+	return new Pattern({
+		name: 'Box',
+		path: '',
+		type: SyntheticPatternType.SyntheticBox,
+		properties: [
+			new PatternBooleanProperty({
+				label: 'Flex',
+				propertyName: 'flex',
+				defaultValue: true
+			}),
+			new PatternNumberProperty({
+				label: 'Grow',
+				propertyName: 'flexGrow',
+				defaultValue: 1
+			}),
+			new PatternNumberProperty({
+				label: 'Shrink',
+				propertyName: 'flexShrink',
+				defaultValue: 1
+			}),
+			new PatternStringProperty({
+				label: 'Size',
+				propertyName: 'flexBasis',
+				defaultValue: 'auto'
+			}),
+			new PatternStringProperty({
+				label: 'Width',
+				propertyName: 'width',
+				defaultValue: 'auto'
+			}),
+			new PatternStringProperty({
+				label: 'Height',
+				propertyName: 'height',
+				defaultValue: 'auto'
+			}),
+			new PatternEnumProperty({
+				label: 'Align',
+				propertyName: 'alignItems',
+				defaultValue: defaultAlign,
+				options: [
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'Start',
+						value: 'flex-start',
+						ordinal: 0
+					}),
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'End',
+						value: 'flex-end',
+						ordinal: 1
+					}),
+					new PatternEnumPropertyOption({
+						id: defaultAlign,
+						name: 'Center',
+						value: 'center',
+						ordinal: 2
+					}),
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'Stretch',
+						value: 'stretch',
+						ordinal: 3
+					}),
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'Baseline',
+						value: 'baseline',
+						ordinal: 4
+					})
+				]
+			}),
+			new PatternEnumProperty({
+				label: 'Justify',
+				propertyName: 'justifyContent',
+				defaultValue: defaultJustify,
+				options: [
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'Start',
+						value: 'flex-start',
+						ordinal: 0
+					}),
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'End',
+						value: 'flex-end',
+						ordinal: 1
+					}),
+					new PatternEnumPropertyOption({
+						id: defaultJustify,
+						name: 'Center',
+						value: 'center',
+						ordinal: 2
+					}),
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'Space Between',
+						value: 'space-between',
+						ordinal: 3
+					}),
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'Space Around',
+						value: 'space-around',
+						ordinal: 4
+					}),
+					new PatternEnumPropertyOption({
+						id: uuid.v4(),
+						name: 'Space Evenly',
+						value: 'space-evenly',
+						ordinal: 5
+					})
+				]
+			}),
+			new PatternBooleanProperty({
+				label: 'Column',
+				propertyName: 'column',
+				defaultValue: false
+			}),
+			new PatternBooleanProperty({
+				label: 'Wrap',
+				propertyName: 'wrap',
+				defaultValue: false
+			}),
+			new PatternNumberProperty({
+				label: 'Order',
+				propertyName: 'order'
+			}),
+			new PatternStringProperty({
+				label: 'Background Color',
+				propertyName: 'backgroundColor'
+			})
+		]
+	});
+};

src/store/styleguide/page.ts

@@ -7,28 +7,35 @@ import {
 } from '../pattern-property';
 import * as uuid from 'uuid';
 
-export const Page = () =>
-	new Pattern({
+export const Page = () => {
+	const options = languages.map(
+		(language, index) =>
+			new PatternEnumPropertyOption({
+				id: uuid.v4(),
+				name: language.name,
+				ordinal: index,
+				value: language.value
+			})
+	);
+
+	const defaultLanguage = options.find(option => option.getValue() === 'en');
+
+	return new Pattern({
 		name: 'Page',
 		path: '',
 		type: SyntheticPatternType.SyntheticPage,
 		properties: [
 			new PatternBooleanProperty({
 				label: 'Mobile Viewport',
-				propertyName: 'viewport'
+				propertyName: 'viewport',
+				defaultValue: true
 			}),
 			new PatternEnumProperty({
 				label: 'Language',
 				propertyName: 'lang',
-				options: languages.map(
-					(language, index) =>
-						new PatternEnumPropertyOption({
-							id: uuid.v4(),
-							name: language.name,
-							ordinal: index,
-							value: language.value
-						})
-				)
+				options,
+				defaultValue: defaultLanguage ? defaultLanguage.getId() : undefined
 			})
 		]
 	});
+};

src/store/styleguide/styleguide.ts

@@ -1,3 +1,4 @@
+import { Box } from './box';
 import { Page } from './page';
 import { Pattern, PatternFolder, SyntheticPatternType } from '../pattern';
 import { Placeholder } from './placeholder';
@@ -42,11 +43,13 @@ export class Styleguide {
 
 			const placeholder = Placeholder();
 			const text = Text();
+			const box = Box();
 
-			this.patterns = [Page(), placeholder, text];
+			this.patterns = [Page(), text, box, placeholder];
 
-			syntheticFolder.addPattern(placeholder);
 			syntheticFolder.addPattern(text);
+			syntheticFolder.addPattern(box);
+			syntheticFolder.addPattern(placeholder);
 		}
 	}
 

src/store/styleguide/text.ts

@@ -7,7 +7,7 @@ export const Text = () =>
 		path: '',
 		type: SyntheticPatternType.SyntheticText,
 		properties: [
-			new PatternProperty.StringPatternProperty({
+			new PatternProperty.PatternStringProperty({
 				label: 'Text',
 				propertyName: 'text'
 			})