fix: pattern and property names: Automatic name guessing, and @name a…

…nnotation

src/component/container/element_list.tsx

@@ -4,6 +4,7 @@ import { createMenu } from '../../electron/menu';
 import { observer } from 'mobx-react';
 import { Page } from '../../store/page/page';
 import { PageElement } from '../../store/page/page_element';
+import { Pattern } from '../../store/pattern/pattern';
 import { PropertyValue } from '../../store/page/property_value';
 import * as React from 'react';
 import { Store } from '../../store/store';
@@ -61,7 +62,8 @@ export class ElementList extends React.Component<ElementListProps> {
 		element: PageElement,
 		selectedElement?: PageElement
 	): ListItemProps {
-		if (!element.getPattern()) {
+		const pattern: Pattern | undefined = element.getPattern();
+		if (!pattern) {
 			return {
 				label: key,
 				value: '(invalid)',
@@ -81,8 +83,6 @@ export class ElementList extends React.Component<ElementListProps> {
 			);
 		});
 
-		const patternPath: string = element.getPatternPath() as string;
-
 		const updatePageElement: React.MouseEventHandler<HTMLElement> = event => {
 			event.stopPropagation();
 			this.props.store.setSelectedElement(element);
@@ -91,7 +91,7 @@ export class ElementList extends React.Component<ElementListProps> {
 
 		return {
 			label: key,
-			value: patternPath.replace(/^.*\//, ''),
+			value: pattern.getName(),
 			onClick: updatePageElement,
 			handleDragStart: (e: React.DragEvent<HTMLElement>) => {
 				this.props.store.setRearrangeElement(element);

src/lsg/patterns/element/index.tsx

@@ -58,7 +58,6 @@ const StyledElementLabel = styled.div`
 	align-items: center;
 	color: ${colors.black.toString()};
 	position: relative;
-	text-transform: capitalize;
 
 	&:hover {
 		background: ${colors.grey90.toString()};

src/lsg/patterns/pattern-list/index.tsx

@@ -30,7 +30,6 @@ const StyledPatternLabel = styled.div`
 	margin-top: ${getSpace(Size.L)}px;
 	margin-left: ${getSpace(Size.L)}px;
 	color: ${colors.grey60.toString()};
-	text-transform: capitalize;
 
 	&:first-of-type {
 		margin-top: ${getSpace(Size.S)}px;
@@ -46,15 +45,15 @@ const StyledPatternListItem = styled.li`
 	font-family: ${fonts().NORMAL_FONT};
 	font-size: 12px;
 	color: ${colors.black.toString()};
-	width: calc(50% - ${getSpace(Size.XS)/2}px);
+	width: calc(50% - ${getSpace(Size.XS) / 2}px);
 	box-sizing: border-box;
 	text-align: center;
 
-	box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15);
+	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
 	transition: box-shadow 0.2s;
 
 	&:hover {
-		box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3);
+		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
 	}
 
 	${(props: PatternListItemProps) =>
@@ -76,7 +75,6 @@ const StyledPatternListItemLabel = styled.div`
 	text-align: center;
 	width: 100%;
 	display: block;
-	text-transform: capitalize;
 	color: ${colors.grey36.toString()};
 `;
 

src/lsg/patterns/property-items/boolean-item/index.tsx

@@ -70,7 +70,6 @@ const StyledLabel = styled.span`
 	font-size: 12px;
 	font-family: ${fonts().NORMAL_FONT};
 	color: ${colors.black.toString()};
-	text-transform: capitalize;
 	margin-bottom: ${getSpace(Size.XS)}px;
 `;
 

src/lsg/patterns/property-items/enum-item/index.tsx

@@ -50,7 +50,6 @@ const StyledLabel = styled.span`
 	font-size: 12px;
 	font-family: ${fonts().NORMAL_FONT};
 	color: ${colors.grey36.toString()};
-	text-transform: capitalize;
 `;
 
 export const EnumItem: React.StatelessComponent<EnumItemProps> = props => {

src/lsg/patterns/property-items/string-item/index.tsx

@@ -19,7 +19,6 @@ const StyledLabel = styled.span`
 	display: block;
 	margin-bottom: ${getSpace(Size.XS)}px;
 	font-size: 12px;
-	text-transform: capitalize;
 	font-family: ${fonts().NORMAL_FONT};
 	color: ${colors.black.toString()};
 `;

src/store/pattern/folder.ts

@@ -100,7 +100,7 @@ export class PatternFolder {
 						FileUtils.existsSync(PathUtils.join(childPath, 'index.d.ts')) &&
 						FileUtils.existsSync(PathUtils.join(childPath, 'index.js'))
 					) {
-						const pattern: Pattern = new Pattern(this, childName, childName);
+						const pattern: Pattern = new Pattern(this, childName);
 						if (pattern.isValid()) {
 							this.patterns.set(childName, pattern);
 						}

src/store/pattern/parser/typescript_parser.ts

@@ -181,7 +181,7 @@ export class TypeScriptParser extends PatternParser {
 		}
 
 		const patternName: string | undefined = this.getJsDocValue(this.propsDeclaration, 'name');
-		if (patternName !== undefined && pattern.getName() === pattern.getId()) {
+		if (patternName !== undefined && patternName !== '') {
 			pattern.setName(patternName);
 		}
 
@@ -206,7 +206,7 @@ export class TypeScriptParser extends PatternParser {
 		}
 
 		const name: string | undefined = this.getJsDocValue(signature, 'name');
-		if (name !== undefined && property.getName() !== property.getId()) {
+		if (name !== undefined && name !== '') {
 			property.setName(name);
 		}
 

src/store/pattern/pattern.ts

@@ -2,6 +2,7 @@ import { PatternFolder } from './folder';
 import * as PathUtils from 'path';
 import { PatternParser } from './parser/pattern_parser';
 import { Property } from './property/property';
+import { Store } from '../../store/store';
 import { TypeScriptParser } from './parser/typescript_parser';
 
 /**
@@ -50,10 +51,10 @@ export class Pattern {
 	 * @param id The ID of the pattern (also the folder name within the parent folder).
 	 * @param name The human-readable name of the pattern.
 	 */
-	public constructor(folder: PatternFolder, id: string, name: string) {
+	public constructor(folder: PatternFolder, id: string, name?: string) {
 		this.folder = folder;
 		this.id = id;
-		this.name = name;
+		this.name = Store.guessName(id, name);
 
 		this.reload();
 	}

src/store/pattern/property/property.ts

@@ -1,3 +1,5 @@
+import { Store } from '../../../store/store';
+
 export abstract class Property {
 	// tslint:disable-next-line:no-any
 	private defaultValue: any;
@@ -8,8 +10,7 @@ export abstract class Property {
 
 	public constructor(id: string) {
 		this.id = id;
-		// sic: We start with the ID as name
-		this.name = id;
+		this.name = Store.guessName(id, name);
 	}
 
 	// tslint:disable-next-line:no-any

src/store/store.ts

@@ -107,6 +107,25 @@ export class Store {
 		}
 	}
 
+	/**
+	 * Tries to guess a human-friendly name from an ID by splitting words at camel-case positions,
+	 * and capitalizing the first letter. If an actual name is provided, this comes first.
+	 * @param id The technical (internal) ID.
+	 * @param name The human-friendly name.
+	 * @return The guessed (or given) human-friendly name.
+	 */
+	public static guessName(id: string, name?: string): string {
+		if (name) {
+			return name;
+		}
+
+		const guessedName = id
+			.replace(/[_-]+/, ' ')
+			.replace(/([a-z])([A-Z])/g, '$1 $2')
+			.toLowerCase();
+		return guessedName.substring(0, 1).toUpperCase() + guessedName.substring(1);
+	}
+
 	/**
 	 * Add a new project definition to the list of projects.
 	 * Note: Changes to the projects and page references are saved only when calling save().