fix(store): re-implement pattern grouping / folders

src/component/container/pattern_list.tsx

@@ -1,4 +1,5 @@
 import Input from '../../lsg/patterns/input/';
+import { Folder } from '../../store/styleguide/utils/folder';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { PageElement } from '../../store/page/page-element';
@@ -11,7 +12,6 @@ import PatternList, {
 import * as React from 'react';
 import Space, { Size } from '../../lsg/patterns/space';
 import { Store } from '../../store/store';
-import { Styleguide } from '../../store/styleguide/styleguide';
 
 export interface PatternListContainerProps {
 	store: Store;
@@ -51,7 +51,16 @@ export class PatternListContainer extends React.Component<PatternListContainerPr
 	}
 
 	public render(): JSX.Element {
-		this.items = this.createItemsFromStyleguide(this.props.store.getStyleguide());
+		let items: PatternListContainerItemProps[] = [];
+
+		this.props.store
+			.getStyleguide()
+			.getFolders()
+			.forEach(folder => {
+				items = items.concat(this.createItemsFromFolder(folder));
+			});
+
+		this.items = items;
 
 		if (this.props.store.getPatternSearchTerm() !== '') {
 			this.items = this.search(this.items, this.props.store.getPatternSearchTerm());
@@ -67,14 +76,16 @@ export class PatternListContainer extends React.Component<PatternListContainerPr
 		);
 	}
 
-	public createItemsFromStyleguide(styleguide: Styleguide): PatternListContainerItemProps[] {
+	public createItemsFromFolder(folder: Folder<Pattern>): PatternListContainerItemProps[] {
 		const result: PatternListContainerItemProps[] = [];
 
-		styleguide.getPatterns().forEach((pattern: Pattern) => {
+		folder.getItems().forEach(pattern => {
+			const icon = pattern.getIconPath();
+
 			result.push({
 				value: pattern.getName(),
 				draggable: true,
-				icon: pattern.getIconPath(),
+				icon,
 				handleDragStart: (e: React.DragEvent<HTMLElement>) => {
 					this.handleDragStart(e, pattern);
 				},
@@ -84,6 +95,17 @@ export class PatternListContainer extends React.Component<PatternListContainerPr
 			});
 		});
 
+		folder.getSubFolders().forEach(subFolder => {
+			if (subFolder.totalItems() === 0) {
+				return;
+			}
+
+			result.push({
+				value: subFolder.getName(),
+				children: this.createItemsFromFolder(subFolder)
+			});
+		});
+
 		return result;
 	}
 

src/store/page/page-element.ts

@@ -65,14 +65,10 @@ export class PageElement {
 	 * @return A new page element object containing the loaded data.
 	 */
 	public static fromJsonObject(
-		json: JsonObject | undefined,
+		json: JsonObject,
 		store: Store,
 		parent?: PageElement
 	): PageElement | undefined {
-		if (!json) {
-			return;
-		}
-
 		let patternId = json['pattern'] as string;
 		let analyzerId = json['analyzer'] as string | undefined;
 
@@ -83,7 +79,7 @@ export class PageElement {
 			if (patternId === 'text') {
 				analyzerId = 'synthetic';
 			} else {
-				patternId = `lib/patterns/${patternId}/index`;
+				patternId = `${patternId}/index`;
 				analyzerId = 'react';
 			}
 		}

src/store/store.ts

@@ -9,7 +9,6 @@ import { Page } from './page/page';
 import { PageElement } from './page/page-element';
 import { PageRef } from './project/page-ref';
 import * as PathUtils from 'path';
-import { Pattern } from './pattern/pattern';
 import { Preferences } from './preferences';
 import { Project } from './project//project';
 import { Styleguide } from './styleguide/styleguide';
@@ -365,7 +364,7 @@ export class Store {
 			const typescriptReactAnalyzer = new TypescriptReactAnalyzer('react');
 			const syntheticAnalyzer = new SyntheticAnalyzer('synthetic');
 
-			const styleguide = new Styleguide(styleguidePath, [
+			const styleguide = new Styleguide(`${styleguidePath}/lib/patterns`, [
 				typescriptReactAnalyzer,
 				syntheticAnalyzer
 			]);
@@ -507,15 +506,6 @@ export class Store {
 		Persister.saveYaml(this.getPreferencesPath(), this.preferences.toJsonObject());
 	}
 
-	/**
-	 * Searches the current styleguide's pattern for a given search term.
-	 * @param term The case insensitive search term.
-	 * @return All patterns that match.
-	 */
-	public searchPatterns(term: string): Pattern[] {
-		return this.styleguide.searchPatterns(term);
-	}
-
 	/**
 	 * Sets the element currently in the clipboard, or undefined if there is none.
 	 * Note: The element is cloned lazily, so you don't need to clone it when setting.

src/store/styleguide/styleguide-analyzer.ts

@@ -1,3 +1,4 @@
+import { Folder } from './utils/folder';
 import { Pattern } from '../pattern/pattern';
 import { PatternType } from '../pattern/pattern-type';
 
@@ -14,5 +15,5 @@ export abstract class StyleguideAnalyzer<T extends Pattern = Pattern> {
 
 	public abstract getPatternType(): PatternType;
 
-	public abstract analyze(path: string): T[];
+	public abstract analyze(path: string): Folder<T>;
 }

src/store/styleguide/styleguide.ts

@@ -1,11 +1,12 @@
+import { Folder } from './utils/folder';
 import { Pattern } from '../pattern/pattern';
 import { StyleguideAnalyzer } from './styleguide-analyzer';
 
 export class Styleguide {
 	private readonly analyzers: StyleguideAnalyzer[];
 	private readonly path: string;
-
 	private patterns: Map<string, Pattern> = new Map();
+	private folders: Folder<Pattern>[] = [];
 
 	public constructor(path: string, analyzers?: StyleguideAnalyzer[]) {
 		this.analyzers = analyzers || [];
@@ -24,11 +25,19 @@ export class Styleguide {
 		return this.patterns;
 	}
 
+	public getFolders(): Folder<Pattern>[] {
+		return this.folders;
+	}
+
 	public load(): void {
 		this.patterns = new Map();
+		this.folders = [];
 
 		this.analyzers.forEach(analyzer => {
-			const patterns = analyzer.analyze(this.path);
+			const groupedPatterns = analyzer.analyze(this.path);
+			const patterns = groupedPatterns.flatten();
+
+			this.folders.push(groupedPatterns);
 
 			patterns.forEach(pattern => {
 				const localId = getStyleguideLocalPatternId(analyzer.getId(), pattern.getId());
@@ -41,34 +50,6 @@ export class Styleguide {
 		const localId = getStyleguideLocalPatternId(analyzerId, id);
 		return this.patterns.get(localId);
 	}
-
-	/**
-	 * Returns all pattern of this folder and its sub-folders matching a given search string.
-	 * @param term The search string as provided by the user.
-	 * @return The list of matching patterns.
-	 */
-	public searchPatterns(term: string): Pattern[] {
-		const result: Pattern[] = [];
-		this.patterns.forEach(pattern => {
-			if (patternMatchesSearch(pattern, term)) {
-				result.push(pattern);
-			}
-		});
-
-		return result;
-	}
-}
-
-function patternMatchesSearch(pattern: Pattern, term: string): boolean {
-	if (!term || !pattern.getName) {
-		return false;
-	}
-	return (
-		pattern
-			.getName()
-			.toLowerCase()
-			.indexOf(term.toLowerCase()) >= 0
-	);
 }
 
 function getStyleguideLocalPatternId(analyzerId: string, patternId: string): string {

src/store/styleguide/synthetic-analyzer/index.ts

@@ -1,6 +1,7 @@
 import { Pattern } from '../../pattern/pattern';
 import { StyleguideAnalyzer } from '../styleguide-analyzer';
 
+import { Folder } from '../utils/folder';
 import { PatternType } from '../../pattern/pattern-type';
 import * as patternFactories from './patterns';
 
@@ -9,13 +10,20 @@ export class SyntheticAnalyzer extends StyleguideAnalyzer {
 		return PatternType.synthetic;
 	}
 
-	public analyze(path: string): Pattern[] {
-		return [
+	public analyze(path: string): Folder<Pattern> {
+		const patterns: Pattern[] = [
 			patternFactories.createTextPattern({
 				analyzer: this,
 				id: 'text',
 				name: 'text'
 			})
 		];
+
+		const folder = new Folder<Pattern>('synthetic');
+		const subFolder = new Folder<Pattern>('synthetic');
+		subFolder.setItems(patterns);
+		folder.setSubFolders([subFolder]);
+
+		return folder;
 	}
 }