feat: remove lsg interface from component, make pattern list componen…

…t independent from list compone

src/component/app.tsx

@@ -11,7 +11,7 @@ import * as MobX from 'mobx';
 import { observer } from 'mobx-react';
 import DevTools from 'mobx-react-devtools';
 import { Page } from '../store/page';
-import { PatternList } from './container/pattern_list';
+import { PatternListContainer } from './container/pattern_list';
 import PatternsPane from '../lsg/patterns/panes/patterns-pane';
 import PreviewPane from '../lsg/patterns/panes/preview-pane';
 import ProjectPane from '../lsg/patterns/panes/project-pane';
@@ -69,7 +69,7 @@ class App extends React.Component<AppProps> {
 							<ElementList store={this.props.store} />
 						</ElementPane>
 						<PatternsPane>
-							<PatternList store={this.props.store} />
+							<PatternListContainer store={this.props.store} />
 						</PatternsPane>
 					</SideBar>
 

src/component/container/pattern_list.tsx

@@ -1,32 +1,39 @@
 import Input from '../../lsg/patterns/input/';
 import { PatternFolder } from '../../store/pattern/folder';
-import List, { Label, Li, ListItemProps, Ul, Value } from '../../lsg/patterns/list';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import { PageElement } from '../../store/page/page_element';
 import { Pattern } from '../../store/pattern';
-import PatternListItem from '../../lsg/patterns/pattern-list-item';
+import PatternList, { PatternLabel, PatternListItem } from '../../lsg/patterns/pattern-list';
 import * as React from 'react';
 import Space, { Size } from '../../lsg/patterns/space';
 import { Store } from '../../store';
 
-export interface PatternListProps {
+export interface PatternListContainerProps {
 	store: Store;
 }
 
+export interface PatternFoo {
+	children?: PatternFoo[];
+	draggable?: boolean;
+	handleDragStart?: React.DragEventHandler<HTMLElement>;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	value: string;
+}
+
 @observer
-export class PatternList extends React.Component<PatternListProps> {
-	public items: ListItemProps[] = [];
-	public constructor(props: PatternListProps) {
+export class PatternListContainer extends React.Component<PatternListContainerProps> {
+	public items: PatternFoo[] = [];
+	public constructor(props: PatternListContainerProps) {
 		super(props);
 
 		this.handleSearchInputChange = this.handleSearchInputChange.bind(this);
 		this.handlePatternClick = this.handlePatternClick.bind(this);
 		this.handleDragStart = this.handleDragStart.bind(this);
 	}
 
-	public search(listItem: ListItemProps[], term: string): ListItemProps[] {
-		const result: ListItemProps[] = [];
+	public search(listItem: PatternFoo[], term: string): PatternFoo[] {
+		const result: PatternFoo[] = [];
 
 		listItem.map(item => {
 			if (item.value.indexOf(term) !== -1 && !item.children) {
@@ -50,19 +57,16 @@ export class PatternList extends React.Component<PatternListProps> {
 				<Space sizeBottom={Size.L}>
 					<Input handleChange={this.handleSearchInputChange} placeholder="Search" />
 				</Space>
-				<Space sizeBottom={Size.L}>
-					<List>{list}</List>
-				</Space>
+				<Space sizeBottom={Size.L}>{list}</Space>
 			</div>
 		);
 	}
 
-	public createItemsFromFolder(folder: PatternFolder): ListItemProps[] {
-		const result: ListItemProps[] = [];
-
+	public createItemsFromFolder(folder: PatternFolder): PatternFoo[] {
+		const result: PatternFoo[] = [];
 		if (folder) {
 			folder.getChildren().forEach((child: PatternFolder) => {
-				const childItem: ListItemProps = { value: child.getName() };
+				const childItem: PatternFoo = { value: child.getName() };
 				childItem.children = this.createItemsFromFolder(child);
 				result.push(childItem);
 			});
@@ -84,19 +88,16 @@ export class PatternList extends React.Component<PatternListProps> {
 		return result;
 	}
 
-	public createList(items: ListItemProps[]): JSX.Element {
+	public createList(items: PatternFoo[]): JSX.Element {
 		return (
-			<Ul>
-				{items.map((props: ListItemProps, index: number) => {
-					const labelComponent = props.label ? <Label>{props.label}:</Label> : null;
-					const nextLevel = props.children ? this.createList(props.children) : null;
-					if (nextLevel) {
+			<div>
+				{items.map((props: PatternFoo, index: number) => {
+					if (props.children) {
 						return (
-							<Li key={index}>
-								{labelComponent}
-								<Value>{props.value}</Value>
-								{nextLevel}
-							</Li>
+							<div>
+								<PatternLabel key={index}>{props.value}</PatternLabel>
+								<PatternList>{this.createList(props.children)}</PatternList>
+							</div>
 						);
 					} else {
 						return (
@@ -106,14 +107,12 @@ export class PatternList extends React.Component<PatternListProps> {
 								key={index}
 								onClick={props.onClick}
 							>
-								{labelComponent}
-								<Value>{props.value}</Value>
-								{nextLevel}
+								{props.value}
 							</PatternListItem>
 						);
 					}
 				})}
-			</Ul>
+			</div>
 		);
 	}
 

src/lsg/patterns/list/demo.tsx

@@ -1,27 +1,17 @@
 import DemoContainer from '../demo-container';
 import { IconName, IconRegistry } from '../icons';
-import List, {Li, Ul} from './index';
-import PatternListItem from '../pattern-list-item';
+import List, { Li, Ul } from './index';
 import * as React from 'react';
 
 const ListDemo: React.StatelessComponent<{}> = (): JSX.Element => (
 	<DemoContainer title="List Demo">
 		<List headline="Default List">
 			<Ul>
-				<Li>
-					Item1
-				</Li>
-				<Li>
-					Item2
-				</Li>
+				<Li>Item1</Li>
+				<Li>Item2</Li>
 			</Ul>
 		</List>
-		<List headline="Pattern List">
-			<Ul>
-				<PatternListItem>Item1</PatternListItem>
-			</Ul>
-		</List>
-		<IconRegistry names={IconName}/>
+		<IconRegistry names={IconName} />
 	</DemoContainer>
 );
 

src/lsg/patterns/pattern-list-item/demo.tsx → src/lsg/patterns/pattern-list/demo.tsx

@@ -5,11 +5,9 @@ import * as React from 'react';
 
 const PatternListItemDemo: React.StatelessComponent<void> = (): JSX.Element => (
 	<DemoContainer title="Pattern List Item">
-		<PatternListItem>
-			Copy
-		</PatternListItem>
+		<PatternListItem>Copy</PatternListItem>
 
-		<IconRegistry names={IconName}/>
+		<IconRegistry names={IconName} />
 	</DemoContainer>
 );
 

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

@@ -6,13 +6,24 @@ import { getSpace, Size } from '../space';
 import styled from 'styled-components';
 
 export interface PatternListItemProps {
-	className?: string;
 	draggable?: boolean;
 	handleDragStart?: React.DragEventHandler<HTMLElement>;
 	icon?: string;
 	onClick?: React.MouseEventHandler<HTMLElement>;
 }
 
+const StyledPatternList = styled.ul`
+	box-sizing: border-box;
+	display: block;
+	padding: 0;
+	margin: 0;
+`;
+
+const StyledPatternLabel = styled.div`
+	margin-bottom: ${getSpace(Size.S)}px;
+	color: ${colors.grey70.toString()};
+`;
+
 const StyledPatternListItem = styled.li`
 	display: flex;
 	align-items: center;
@@ -38,15 +49,10 @@ const StyledIcon = styled(Icon)`
 	margin-right: ${getSpace(Size.L)}px;
 `;
 
-const PatternListItem: React.StatelessComponent<PatternListItemProps> = props => {
-	const { className, draggable, handleDragStart, icon, onClick } = props;
+export const PatternListItem: React.StatelessComponent<PatternListItemProps> = props => {
+	const { draggable, handleDragStart, icon, onClick } = props;
 	return (
-		<StyledPatternListItem
-			onDragStart={handleDragStart}
-			className={className}
-			draggable={draggable}
-			onClick={onClick}
-		>
+		<StyledPatternListItem onDragStart={handleDragStart} draggable={draggable} onClick={onClick}>
 			{icon ? (
 				<StyledSVG>{icon}</StyledSVG>
 			) : (
@@ -57,4 +63,12 @@ const PatternListItem: React.StatelessComponent<PatternListItemProps> = props =>
 	);
 };
 
-export default PatternListItem;
+export const PatternLabel: React.StatelessComponent<{}> = props => (
+	<StyledPatternLabel>{props.children}</StyledPatternLabel>
+);
+
+const PatternList: React.StatelessComponent<{}> = props => (
+	<StyledPatternList>{props.children}</StyledPatternList>
+);
+
+export default PatternList;