From d24e44fa158787bf401caa4450cfba4bf7266dfa Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Wed, 30 May 2018 20:19:25 +0200 Subject: [PATCH 1/2] feat: add description to component --- .../typescript-react-analyzer.ts | 4 +++ src/components/pattern-list/index.tsx | 33 ++++++++++++++++--- .../pattern-list/pattern-item-container.tsx | 10 ++++-- src/model/pattern-library/builtins/box.ts | 1 + src/model/pattern-library/builtins/page.ts | 1 + .../pattern-library/builtins/placeholder.ts | 1 + src/model/pattern-library/builtins/text.ts | 1 + src/model/pattern-library/pattern-library.ts | 2 +- src/model/pattern/pattern.ts | 10 ++++++ src/model/types.ts | 1 + 10 files changed, 57 insertions(+), 7 deletions(-) diff --git a/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts b/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts index 4b8af006f..35117cb3a 100644 --- a/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts +++ b/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; @@ -128,6 +129,7 @@ function analyzePatternExport( } const [propTypes] = reactTypeArguments; + const exportName = ex.name || 'default'; const contextId = `${ctx.candidate.id}:${exportName}`; const id = ctx.options.getGlobalPatternId(contextId); @@ -152,6 +154,7 @@ function analyzePatternExport( path: ctx.candidate.artifactPath, pattern: { contextId, + description: ctx.candidate.description, exportName, id, name: exportName !== 'default' ? exportName : ctx.candidate.displayName, @@ -190,6 +193,7 @@ async function findPatternCandidates(path: string): Promise 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 diff --git a/src/components/pattern-list/index.tsx b/src/components/pattern-list/index.tsx index bc1bf451d..412dd903b 100644 --- a/src/components/pattern-list/index.tsx +++ b/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 = p color={colors.grey50} /> )} - {props.children} + {props.children} ); }; @@ -98,6 +115,14 @@ export const PatternLabel: React.StatelessComponent = props => ( {props.children} ); +export const PatternItemLabel: React.StatelessComponent = props => ( + {props.children} +); + +export const PatternItemDescription: React.StatelessComponent = props => ( + {props.children} +); + const PatternList: React.StatelessComponent = props => ( {props.children} ); diff --git a/src/container/pattern-list/pattern-item-container.tsx b/src/container/pattern-list/pattern-item-container.tsx index 8b708e9dc..afbd8b7f6 100644 --- a/src/container/pattern-list/pattern-item-container.tsx +++ b/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 this.handleDoubleClick(e)} onDragStart={e => this.handleDragStart(e)} > - {props.pattern.getName()} + {props.pattern.getName()} + {props.pattern.getDescription()} ); } diff --git a/src/model/pattern-library/builtins/box.ts b/src/model/pattern-library/builtins/box.ts index 0c9290727..f3ac4dfef 100644 --- a/src/model/pattern-library/builtins/box.ts +++ b/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', diff --git a/src/model/pattern-library/builtins/page.ts b/src/model/pattern-library/builtins/page.ts index 7e1be3504..02f25f393 100644 --- a/src/model/pattern-library/builtins/page.ts +++ b/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', diff --git a/src/model/pattern-library/builtins/placeholder.ts b/src/model/pattern-library/builtins/placeholder.ts index 16bd5c3b1..198c82c43 100644 --- a/src/model/pattern-library/builtins/placeholder.ts +++ b/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', diff --git a/src/model/pattern-library/builtins/text.ts b/src/model/pattern-library/builtins/text.ts index a3b5e2480..7897fbfcf 100644 --- a/src/model/pattern-library/builtins/text.ts +++ b/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', diff --git a/src/model/pattern-library/pattern-library.ts b/src/model/pattern-library/pattern-library.ts index 3fb290b3e..07d27f0d1 100644 --- a/src/model/pattern-library/pattern-library.ts +++ b/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 } diff --git a/src/model/pattern/pattern.ts b/src/model/pattern/pattern.ts index 364f17391..aaab51c61 100644 --- a/src/model/pattern/pattern.ts +++ b/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(); diff --git a/src/model/types.ts b/src/model/types.ts index bd9708fd5..27ae4d2d6 100644 --- a/src/model/types.ts +++ b/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; From e19d6f980e0de400b468e36a42100593b4421c6e Mon Sep 17 00:00:00 2001 From: Tilman Frick Date: Wed, 30 May 2018 20:29:16 +0200 Subject: [PATCH 2/2] fixup! remove unneeded line --- .../typescript-react-analyzer/typescript-react-analyzer.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts b/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts index 35117cb3a..c7e65efd4 100644 --- a/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts +++ b/src/analyzer/typescript-react-analyzer/typescript-react-analyzer.ts @@ -129,7 +129,6 @@ function analyzePatternExport( } const [propTypes] = reactTypeArguments; - const exportName = ex.name || 'default'; const contextId = `${ctx.candidate.id}:${exportName}`; const id = ctx.options.getGlobalPatternId(contextId);