feat: add description to component (#493)

* feat: add description to component

* fixup! remove unneeded line

src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts

@@ -18,6 +18,7 @@ const loadPatternplateMeta = require('@patternplate/load-meta');
 export interface PatternCandidate {
 	artifactPath: string;
 	declarationPath: string | undefined;
+	description: string;
 	displayName: string;
 	id: string;
 	sourcePath: string;
@@ -152,6 +153,7 @@ function analyzePatternExport(
 		path: ctx.candidate.artifactPath,
 		pattern: {
 			contextId,
+			description: ctx.candidate.description,
 			exportName,
 			id,
 			name: exportName !== 'default' ? exportName : ctx.candidate.displayName,
@@ -190,6 +192,7 @@ async function findPatternCandidates(path: string): Promise<PatternCandidate[]>
 		return {
 			artifactPath: Fs.existsSync(artifactPath) ? artifactPath : undefined,
 			declarationPath: Fs.existsSync(declarationPath) ? declarationPath : undefined,
+			description: pattern.manifest.description || '',
 			displayName: pattern.manifest.displayName || pattern.manifest.name,
 			id: pattern.id,
 			sourcePath

src/components/pattern-list/index.tsx

@@ -39,7 +39,6 @@ const StyledPatternListItem = styled.div`
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
 	border-radius: 3px;
 	transition: box-shadow 0.2s, color 0.2s;
-	align-items: center;
 	color: ${colors.grey20.toString()};
 
 	&:hover {
@@ -52,11 +51,29 @@ const StyledPatternListItem = styled.div`
 `;
 
 const StyledIcon = styled(Icon)`
-	margin-right: 6px;
+	margin-right: ${getSpace(SpaceSize.XS)}px;
+	flex: 0 0 ${IconSize.S}px;
 `;
 
-const StyledPatternListItemLabel = styled.div`
+const StyledPatternListItemContainer = styled.div`
+	padding: ${getSpace(SpaceSize.XXS)}px 0;
+	overflow: hidden;
+`;
+
+const StyledPatternListItemName = styled.div`
 	font-size: 15px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+`;
+
+const StyledPatternListItemDescription = styled.div`
+	padding-top: ${getSpace(SpaceSize.XXS)}px;
+	font-size: 12px;
+	color: ${colors.grey50.toString()};
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 `;
 
 export interface PatternFolderViewProps {
@@ -89,7 +106,7 @@ export const PatternListItem: React.StatelessComponent<PatternListItemProps> = p
 					color={colors.grey50}
 				/>
 			)}
-			<StyledPatternListItemLabel>{props.children}</StyledPatternListItemLabel>
+			<StyledPatternListItemContainer>{props.children}</StyledPatternListItemContainer>
 		</StyledPatternListItem>
 	);
 };
@@ -98,6 +115,14 @@ export const PatternLabel: React.StatelessComponent = props => (
 	<StyledPatternLabel>{props.children}</StyledPatternLabel>
 );
 
+export const PatternItemLabel: React.StatelessComponent = props => (
+	<StyledPatternListItemName>{props.children}</StyledPatternListItemName>
+);
+
+export const PatternItemDescription: React.StatelessComponent = props => (
+	<StyledPatternListItemDescription>{props.children}</StyledPatternListItemDescription>
+);
+
 const PatternList: React.StatelessComponent = props => (
 	<StyledPatternList>{props.children}</StyledPatternList>
 );

src/container/pattern-list/pattern-item-container.tsx

@@ -1,4 +1,9 @@
-import { PatternAnchor, PatternListItem } from '../../components';
+import {
+	PatternAnchor,
+	PatternItemDescription,
+	PatternItemLabel,
+	PatternListItem
+} from '../../components';
 import { Pattern } from '../../model';
 import * as React from 'react';
 import { ViewStore } from '../../store';
@@ -60,7 +65,8 @@ export class PatternItemContainer extends React.Component<PatternItemContainerCo
 				onDoubleClick={e => this.handleDoubleClick(e)}
 				onDragStart={e => this.handleDragStart(e)}
 			>
-				{props.pattern.getName()}
+				<PatternItemLabel>{props.pattern.getName()}</PatternItemLabel>
+				<PatternItemDescription>{props.pattern.getDescription()}</PatternItemDescription>
 			</PatternListItem>
 		);
 	}

src/model/pattern-library/builtins/box.ts

@@ -245,6 +245,7 @@ export const Box = (context: BuiltInContext): BuiltInResult => {
 		pattern: new Pattern(
 			{
 				contextId: CONTEXT_ID,
+				description: 'for Flexbox Layouts',
 				exportName: 'default',
 				id: patternId,
 				name: 'Box',

src/model/pattern-library/builtins/page.ts

@@ -55,6 +55,7 @@ export const Page = (context: BuiltInContext): BuiltInResult => {
 	const pattern = new Pattern(
 		{
 			contextId: PATTERN_CONTEXT_ID,
+			description: '',
 			exportName: 'default',
 			id: patternId,
 			name: 'Page',

src/model/pattern-library/builtins/placeholder.ts

@@ -70,6 +70,7 @@ export const Placeholder = (context: BuiltInContext): BuiltInResult => {
 	const pattern = new Pattern(
 		{
 			contextId: PATTERN_CONTEXT_ID,
+			description: 'for Design Drafts',
 			exportName: 'default',
 			id: patternId,
 			name: 'Placeholder',

src/model/pattern-library/builtins/text.ts

@@ -25,6 +25,7 @@ export const Text = (context: BuiltInContext): BuiltInResult => {
 		pattern: new Pattern(
 			{
 				contextId: PATTERN_CONTEXT_ID,
+				description: 'for Headlines, Copy and more',
 				exportName: 'default',
 				id: patternId,
 				name: 'Text',

src/model/pattern-library/pattern-library.ts

@@ -76,7 +76,7 @@ export class PatternLibrary {
 
 		const syntheticFolder = new PatternFolder(
 			{
-				name: 'Synthetic',
+				name: 'Built-In Components',
 				type: Types.PatternFolderType.Builtin
 			},
 			{ patternLibrary }

src/model/pattern/pattern.ts

@@ -9,6 +9,7 @@ import * as uuid from 'uuid';
 
 export interface PatternInit {
 	contextId: string;
+	description: string;
 	exportName: string;
 	id?: string;
 	name: string;
@@ -24,6 +25,7 @@ export interface PatternContext {
 
 export class Pattern {
 	@Mobx.observable private contextId: string;
+	@Mobx.observable private description: string;
 	@Mobx.observable private exportName: string;
 	@Mobx.observable private folder: PatternFolder;
 	@Mobx.observable private id: string;
@@ -36,6 +38,7 @@ export class Pattern {
 
 	public constructor(init: PatternInit, context: PatternContext) {
 		this.contextId = init.contextId;
+		this.description = init.description;
 		this.exportName = init.exportName;
 		this.id = init.id || uuid.v4();
 		this.name = AlvaUtil.guessName(init.name);
@@ -50,6 +53,7 @@ export class Pattern {
 		return new Pattern(
 			{
 				contextId: serialized.contextId,
+				description: serialized.description,
 				exportName: serialized.exportName,
 				id: serialized.id,
 				name: serialized.name,
@@ -70,6 +74,10 @@ export class Pattern {
 		return this.contextId;
 	}
 
+	public getDescription(): string {
+		return this.description;
+	}
+
 	public getExportName(): string {
 		return this.exportName;
 	}
@@ -117,6 +125,7 @@ export class Pattern {
 	public toJSON(): Types.SerializedPattern {
 		return {
 			contextId: this.contextId,
+			description: this.description,
 			exportName: this.exportName,
 			id: this.id,
 			name: this.name,
@@ -129,6 +138,7 @@ export class Pattern {
 
 	public update(pattern: Pattern, context: PatternContext): void {
 		this.contextId = pattern.getContextId();
+		this.description = pattern.getDescription();
 		this.exportName = pattern.getExportName();
 		this.name = pattern.getName();
 		this.origin = pattern.getOrigin();

src/model/types.ts

@@ -97,6 +97,7 @@ export type SerializedPatternOrigin = 'built-in' | 'user-provided';
 
 export interface SerializedPattern {
 	contextId: string;
+	description: string;
 	exportName: string;
 	id: string;
 	name: string;