fix(component): restore old pattern_list rendering behavior

 * structure is now flat again
 * don't show empty pattern containers

src/component/container/pattern_list.tsx

@@ -17,9 +17,13 @@ export interface PatternListContainerProps {
 	store: Store;
 }
 
-export interface PatternListContainerItemProps extends PatternListItemProps {
-	children?: PatternListContainerItemProps[];
-	value: string;
+export interface PatternListContainerItemProps {
+	items: NamedPatternListItemProps[];
+	name: string;
+}
+
+export interface NamedPatternListItemProps extends PatternListItemProps {
+	name: string;
 }
 
 @observer
@@ -34,19 +38,25 @@ export class PatternListContainer extends React.Component<PatternListContainerPr
 	}
 
 	public search(
-		listItem: PatternListContainerItemProps[],
+		containers: PatternListContainerItemProps[],
 		term: string
 	): PatternListContainerItemProps[] {
 		const result: PatternListContainerItemProps[] = [];
 
-		listItem.map(item => {
-			if (item.value.toLowerCase().indexOf(term.toLowerCase()) !== -1 && !item.children) {
-				result.push(item);
-			} else if (item.children) {
-				const folder = { value: item.value, children: [] };
-				result.push(folder, ...this.search(item.children, term));
+		for (const container of containers) {
+			if (!container.items.length) {
+				continue;
 			}
-		});
+
+			const matchingItems = container.items.filter(
+				item => item.name.toLowerCase().indexOf(term.toLowerCase()) !== -1
+			);
+			result.push({
+				name: container.name,
+				items: matchingItems
+			});
+		}
+
 		return result;
 	}
 
@@ -79,59 +89,58 @@ export class PatternListContainer extends React.Component<PatternListContainerPr
 	public createItemsFromFolder(folder: Folder<Pattern>): PatternListContainerItemProps[] {
 		const result: PatternListContainerItemProps[] = [];
 
-		folder.getItems().forEach(pattern => {
-			const icon = pattern.getIconPath();
-
-			result.push({
-				value: pattern.getName(),
-				draggable: true,
-				icon,
-				handleDragStart: (e: React.DragEvent<HTMLElement>) => {
-					this.handleDragStart(e, pattern);
-				},
-				onClick: () => {
-					this.handlePatternClick(pattern);
-				}
-			});
-		});
-
-		folder.getSubFolders().forEach(subFolder => {
-			if (subFolder.totalItems() === 0) {
-				return;
+		for (const flatFolder of folder.flattenFolders()) {
+			const containerItem: PatternListContainerItemProps = {
+				name: flatFolder.getName(),
+				items: []
+			};
+
+			for (const pattern of flatFolder.getItems()) {
+				const icon = pattern.getIconPath();
+
+				containerItem.items.push({
+					name: pattern.getName(),
+					draggable: true,
+					icon,
+					handleDragStart: (e: React.DragEvent<HTMLElement>) => {
+						this.handleDragStart(e, pattern);
+					},
+					onClick: () => {
+						this.handlePatternClick(pattern);
+					}
+				});
 			}
 
-			result.push({
-				value: subFolder.getName(),
-				children: this.createItemsFromFolder(subFolder)
-			});
-		});
+			result.push(containerItem);
+		}
 
 		return result;
 	}
 
-	public createList(items: PatternListContainerItemProps[]): JSX.Element {
+	public createList(containers: PatternListContainerItemProps[]): JSX.Element {
 		return (
 			<PatternList>
-				{items.map((props: PatternListContainerItemProps, index: number) => {
-					if (props.children) {
+				{containers.map((container: PatternListContainerItemProps, index: number) => {
+					if (container.items.length) {
 						return (
 							<PatternList key={index}>
-								<PatternLabel>{props.value}</PatternLabel>
-								{this.createList(props.children)}
+								<PatternLabel>{container.name}</PatternLabel>
+								{container.items.map((item, itemIndex) => (
+									<PatternListItem
+										draggable={item.draggable}
+										handleDragStart={item.handleDragStart}
+										key={itemIndex}
+										icon={item.icon}
+										onClick={item.onClick}
+									>
+										{item.name}
+									</PatternListItem>
+								))}
 							</PatternList>
 						);
 					}
-					return (
-						<PatternListItem
-							draggable={props.draggable}
-							handleDragStart={props.handleDragStart}
-							key={index}
-							icon={props.icon}
-							onClick={props.onClick}
-						>
-							{props.value}
-						</PatternListItem>
-					);
+
+					return;
 				})}
 			</PatternList>
 		);

src/component/presentation/preview.tsx

@@ -111,8 +111,11 @@ export class Preview extends React.Component<PreviewProps> {
 				return null;
 			}
 
-			if (pattern.getType() === PatternType.synthetic) {
-				switch (pattern.getId()) {
+			const patternId: string = pattern.getId();
+			const patternType: PatternType = pattern.getType();
+
+			if (patternType === PatternType.synthetic) {
+				switch (patternId) {
 					case 'text':
 						return pageElement.getPropertyValue('text');
 				}
@@ -121,17 +124,19 @@ export class Preview extends React.Component<PreviewProps> {
 			// tslint:disable-next-line:no-any
 			const componentProps: any = {};
 			pattern.getProperties().forEach(property => {
-				componentProps[property.getId()] = this.createComponent(
-					property.convertToRender(pageElement.getPropertyValue(property.getId())),
-					property.getId()
+				const propertyId = property.getId();
+
+				componentProps[propertyId] = this.createComponent(
+					property.convertToRender(pageElement.getPropertyValue(propertyId)),
+					propertyId
 				);
 			});
 
 			componentProps.children = pageElement
 				.getChildren()
 				.map((child, index) => this.createComponent(child, String(index)));
 
-			if (pattern.getType() !== PatternType.react) {
+			if (patternType !== PatternType.react) {
 				return null;
 			}
 
@@ -140,13 +145,13 @@ export class Preview extends React.Component<PreviewProps> {
 			// Then, load the pattern factory
 			const patternPath: string = reactPattern.fileInfo.jsFilePath;
 			let patternFactory: React.StatelessComponent | ObjectConstructor = this.patternFactories[
-				pattern.getId()
+				patternId
 			];
 			if (patternFactory == null) {
 				const exportName = reactPattern.exportInfo.name || 'default';
 				const module = require(patternPath);
 				patternFactory = module[exportName];
-				this.patternFactories[pattern.getId()] = patternFactory;
+				this.patternFactories[patternId] = patternFactory;
 			}
 
 			const reactComponent = React.createElement(patternFactory, componentProps);

src/store/page/page-element.ts

@@ -69,6 +69,10 @@ export class PageElement {
 		store: Store,
 		parent?: PageElement
 	): PageElement | undefined {
+		if (!json) {
+			return;
+		}
+
 		let patternId = json['pattern'] as string;
 		let analyzerId = json['analyzer'] as string | undefined;
 

src/store/pattern/pattern.ts

@@ -15,14 +15,35 @@ export interface PatternInit {
  * of various types, like strings, numbers, page elements, etc.
  * The designer then creates page elements within a page using these patterns as a basis.
  * Patterns may be structured into folders (like 'atoms', 'modules', etc.).
- * Depending on the pattern parser used, various styleguide formats are supported,
+ * Depending on the StyleguideAnalyzer used, various styleguide formats are supported,
  * e.g. Patternplate.
  */
 export class Pattern {
+	/**
+	 * The ID of the pattern. It's local to the StyleguideAnalyzer that detected the pattern.
+	 * How this is generated is completely up to the StyleguideAnalyzer that creates the pattern.
+	 */
 	protected id: string;
+
+	/**
+	 * The StyleguideAnalyzer that detected the pattern.
+	 */
 	protected analyzer: StyleguideAnalyzer;
+
+	/**
+	 * The human-readable name of the pattern.
+	 * In the frontend, to be displayed instead of the ID.
+	 */
 	protected name: string;
+
+	/**
+	 * The properties this pattern supports.
+	 */
 	protected properties: Map<string, Property> = new Map();
+
+	/**
+	 * The absolute path to the icon of the pattern, if provided by the implementation.
+	 */
 	protected iconPath: string | undefined;
 
 	public constructor(init: PatternInit) {
@@ -32,26 +53,33 @@ export class Pattern {
 	}
 
 	/**
-	 * The ID of the pattern (also the folder name within the parent folder).
+	 * Returns the ID of the pattern. It's local to the StyleguideAnalyzer that detected the pattern.
+	 * How this is generated is completely up to the StyleguideAnalyzer that creates the pattern.
+	 * @return The ID of the pattern.
 	 */
 	public getId(): string {
 		return this.id;
 	}
 
-	/** The StylguideAnalyzer the pattern emerged from. */
+	/**
+	 * Returns the StyleguideAnalyzer that detected the pattern.
+	 * @return The StyleguideAnalyzer that detected the pattern.
+	 */
 	public getAnalyzer(): StyleguideAnalyzer {
 		return this.analyzer;
 	}
 
 	/**
-	 * The type of the pattern (eg.: react, vue...)
+	 * Returns the type of the pattern (eg.: react, vue...)
+	 * @return The type of the pattern (eg.: react, vue...)
 	 */
 	public getType(): PatternType {
 		return this.analyzer.getPatternType();
 	}
 
 	/**
-	 * The absolute path to the icon of the pattern, if provided by the implementation.
+	 * Returns the absolute path to the icon of the pattern, if provided by the implementation.
+	 * @return The absolute path to the icon of the pattern.
 	 */
 	public getIconPath(): string | undefined {
 		return this.iconPath;
@@ -62,8 +90,9 @@ export class Pattern {
 	}
 
 	/**
-	 * The human-readable name of the pattern.
+	 * Returns the human-readable name of the pattern.
 	 * In the frontend, to be displayed instead of the ID.
+	 * @return The human-readable name of the pattern.
 	 */
 	public getName(): string {
 		return this.name;
@@ -74,7 +103,8 @@ export class Pattern {
 	}
 
 	/**
-	 * The properties this pattern supports.
+	 * Returns the properties this pattern supports.
+	 * @return The properties this pattern supports.
 	 */
 	public getProperties(): Map<string, Property> {
 		return this.properties;

src/store/store.ts

@@ -233,6 +233,10 @@ export class Store {
 			id.splice(0, 1);
 		}
 
+		if (!startElement) {
+			return;
+		}
+
 		const foundElement: PageElement = startElement.getChildren()[id[0]];
 
 		if (id.length === 1) {

src/store/styleguide/typescript-react-analyzer/index.ts

@@ -85,10 +85,7 @@ function createFileInfoFolder(path: string, rootPath?: string): Folder<PatternFi
 	const directory = new Directory(path);
 	const rootDirectory = rootPath ? new Directory(rootPath) : directory;
 
-	const folder: Folder<PatternFileInfo> = new Folder<PatternFileInfo>(
-		directory.getName(),
-		directory.getPath()
-	);
+	const folder: Folder<PatternFileInfo> = new Folder<PatternFileInfo>(directory.getName());
 
 	const patternInfos = detectPatternsInDirectory(rootDirectory, directory);
 	folder.setItems(patternInfos);
@@ -122,10 +119,8 @@ function detectPatternsInDirectory(
 
 		let iconPath: string | undefined = PathUtils.join(directory.getPath(), 'icon.svg');
 		iconPath = PathUtils.relative(rootDirectory.getPath(), iconPath);
-		iconPath = iconPath
-			.split('/')
-			.slice(1)
-			.join('/');
+		iconPath = PathUtils.join(rootDirectory.getPath(), '../../patterns', iconPath);
+
 		iconPath = PathUtils.resolve(rootDirectory.getPath(), iconPath);
 		iconPath = FileUtils.existsSync(iconPath) ? iconPath : undefined;
 

src/store/styleguide/utils/folder.ts

@@ -1,12 +1,10 @@
 export class Folder<T> {
 	private name: string;
-	private path: string | undefined;
 	private items: T[] = [];
 	private subFolders: Folder<T>[] = [];
 
-	public constructor(name: string, path?: string) {
+	public constructor(name: string) {
 		this.name = name;
-		this.path = path;
 	}
 
 	public getName(): string {
@@ -17,14 +15,6 @@ export class Folder<T> {
 		this.name = name;
 	}
 
-	public getPath(): string | undefined {
-		return this.path;
-	}
-
-	public setPath(path: string | undefined): void {
-		this.path = path;
-	}
-
 	public getItems(): T[] {
 		return this.items;
 	}
@@ -69,13 +59,16 @@ export class Folder<T> {
 		return result;
 	}
 
-	public totalItems(): number {
-		let totalItems = this.items.length;
+	public flattenFolders(): Folder<T>[] {
+		const flatFolder = new Folder<T>(this.name);
+		flatFolder.setItems(this.items);
+
+		let result: Folder<T>[] = [flatFolder];
 
 		for (const subFolder of this.subFolders) {
-			totalItems += subFolder.totalItems();
+			result = result.concat(subFolder.flattenFolders());
 		}
 
-		return totalItems;
+		return result;
 	}
 }