From 1b4741c37768c4e2f6374574a49ec71ac8d21a62 Mon Sep 17 00:00:00 2001
From: Yuri Ziebell <hallo@yuriziebell.de>
Date: Wed, 10 Apr 2019 00:31:13 +0200
Subject: [PATCH] feat: refine styling and copy of store (#770)

* WIP: feat: categorise recommended packages

* fix: wire up category

* feat: separate design systems from other store packages

* fix: make all package blocks wrap

* feat: refine styling and copy of store

* fix: add missing categories

* fix: refine styling of library store

* fix: refine store spaces

* fix: adjust library store item spaces
---
 packages/components/src/library-box/demo.tsx  |  2 +-
 .../src/library-box/library-box.tsx           | 35 ++++++--
 .../src/container/library-store-container.tsx | 88 +++++++++++++------
 .../library-store-item-container.tsx          | 30 +++++--
 packages/model/src/library-store-item.ts      |  7 +-
 packages/model/src/library-store.ts           | 20 ++++-
 6 files changed, 132 insertions(+), 50 deletions(-)

diff --git a/packages/components/src/library-box/demo.tsx b/packages/components/src/library-box/demo.tsx
index aeaaeafd2..edffd3da5 100644
--- a/packages/components/src/library-box/demo.tsx
+++ b/packages/components/src/library-box/demo.tsx
@@ -12,7 +12,7 @@ const LibraryBoxDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			name="Wireframe Kit"
 			description="Simple wireframing kit to kickstart your product ideas."
 			state={LibraryBoxState.Idle}
-			size={LibraryBoxSize.Large}
+			size={LibraryBoxSize.Featured}
 			install={
 				<Button
 					order={ButtonOrder.Primary}
diff --git a/packages/components/src/library-box/library-box.tsx b/packages/components/src/library-box/library-box.tsx
index ed7db0c62..77683626e 100644
--- a/packages/components/src/library-box/library-box.tsx
+++ b/packages/components/src/library-box/library-box.tsx
@@ -15,8 +15,10 @@ export enum LibraryBoxState {
 }
 
 export enum LibraryBoxSize {
-	Medium,
-	Large
+	Hero,
+	Featured,
+	Default,
+	Installed
 }
 
 export interface LibraryBoxProps {
@@ -35,19 +37,26 @@ const StyledBox =
 	styled.div <
 	LibraryBoxProps >
 	`
-	width: 348px;
+	width: ${(props: LibraryBoxProps) =>
+		props.size === LibraryBoxSize.Hero
+			? '100%'
+			: props.size === LibraryBoxSize.Featured
+				? '348px'
+				: '258px'};
+	margin: ${getSpace(SpaceSize.XS)}px;
+
 	background: ${props => (props.color ? props.color : Color.Grey20)};
 	border-radius: 6px;
 	box-shadow: 0 0 24px 0 ${props =>
 		props.color ? new ColorTool(props.color).fade(0.4).toString() : Color.BlackAlpha15};
 	color: ${Color.White};
 	text-align: left;
-	margin: ${getSpace(SpaceSize.S)}px ${getSpace(SpaceSize.XS)}px;
+
 	user-select: none;
 	overflow: hidden;
 
 	${props =>
-		props.size === LibraryBoxSize.Medium &&
+		props.size === LibraryBoxSize.Installed &&
 		`
 		animation: show .2s ease-out both;
 
@@ -83,7 +92,12 @@ const StyledBox =
 const IMAGE = (props: LibraryBoxProps) => (props.image ? props.image : toDataUrl(<LibraryImage />));
 
 const StyledImage = styled.div`
-	height: 140px;
+	height: ${(props: LibraryBoxProps) =>
+		props.size === LibraryBoxSize.Hero
+			? '200'
+			: props.size === LibraryBoxSize.Featured
+				? '140'
+				: '101'}px;
 	width: 100%;
 	background-image: url('${IMAGE}');
 	background-size: cover;
@@ -92,7 +106,12 @@ const StyledImage = styled.div`
 `;
 
 const StyledDetails = styled.div`
-	min-height: 200px;
+	min-height: ${(props: LibraryBoxProps) =>
+		props.size === LibraryBoxSize.Hero
+			? '300'
+			: props.size === LibraryBoxSize.Featured
+				? '200'
+				: '185'}px;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -122,7 +141,7 @@ const StyledBottom = styled.div`
 
 export const LibraryBox: React.StatelessComponent<LibraryBoxProps> = (props): JSX.Element => (
 	<StyledBox {...props}>
-		{props.size === LibraryBoxSize.Large && (
+		{props.size !== LibraryBoxSize.Installed && (
 			<StyledImage state={props.state} image={props.image} size={props.size} />
 		)}
 		<StyledDetails {...props}>
diff --git a/packages/core/src/container/library-store-container.tsx b/packages/core/src/container/library-store-container.tsx
index 4fdb223e7..b75c85a34 100644
--- a/packages/core/src/container/library-store-container.tsx
+++ b/packages/core/src/container/library-store-container.tsx
@@ -16,6 +16,7 @@ import * as T from '@meetalva/types';
 import { MessageType as MT } from '@meetalva/message';
 import { PatternLibraryInstallType } from '@meetalva/types';
 import { When } from './when';
+import { partition } from 'lodash';
 import { animateScroll } from 'react-scroll';
 import SmoothCollapse from 'react-smooth-collapse';
 
@@ -155,9 +156,11 @@ export class LibraryStoreContainer extends React.Component {
 
 	public render(): JSX.Element | null {
 		const { store } = this.props as WithStore;
-		const app = store.getApp();
 		const isValidPackage = this.isValidPackage;
 		const libraryStore = store.libraryStore;
+		const [designSystemPackages, otherPackages] = partition(libraryStore.recommendations, {
+			category: 'design-system'
+		});
 
 		function translateState(state: LibraryStoreItemState): C.ButtonState {
 			switch (state) {
@@ -190,12 +193,17 @@ export class LibraryStoreContainer extends React.Component {
 					<div
 						style={{
 							width: '90%',
-							maxWidth: '1092px',
+							maxWidth: '1104px',
 							margin: '0 auto',
 							padding: `${C.getSpace(C.SpaceSize.L)}px 0`
 						}}
 					>
-						<C.Space size={C.SpaceSize.XS} onClick={this.handleDetailsClick}>
+						<C.Space
+							size={C.SpaceSize.XS}
+							sizeLeft={C.SpaceSize.L}
+							sizeRight={C.SpaceSize.L}
+							onClick={this.handleDetailsClick}
+						>
 							<C.Flex alignItems={C.FlexAlignItems.FlexStart}>
 								<div>
 									<C.Space sizeTop={2} />
@@ -215,8 +223,8 @@ export class LibraryStoreContainer extends React.Component {
 										}
 									>
 										{libraryStore.updateAvailable
-											? 'Updates available'
-											: 'Everything up to date'}
+											? 'Updates available 🙌'
+											: 'Up to date 👌'}
 									</C.Headline>
 									<C.Space sizeBottom={C.SpaceSize.XS} />
 									<When mayToggle={libraryStore.updateCount === 0}>
@@ -239,21 +247,23 @@ export class LibraryStoreContainer extends React.Component {
 							</C.Flex>
 						</C.Space>
 						<SmoothCollapse expanded={libraryStore.installedOpen}>
-							<C.Space sizeBottom={C.SpaceSize.S} />
-							<InstalledPackagesContainer>
-								{(libraryStore.updateCount === 0
-									? libraryStore.withLibrary
-									: libraryStore.withUpdate
-								).map(item => (
-									<LibraryStoreItemContainer
-										key={item.id}
-										item={item}
-										size={LibraryStoreItemSize.Medium}
-									/>
-								))}
-							</InstalledPackagesContainer>
+							<C.Space size={C.SpaceSize.S}>
+								<C.Flex flexWrap={true}>
+									{libraryStore.withLibrary.map(item => (
+										<LibraryStoreItemContainer
+											key={item.id}
+											item={item}
+											size={LibraryStoreItemSize.Installed}
+										/>
+									))}
+								</C.Flex>
+							</C.Space>
 							{this.online && (
-								<C.Space size={C.SpaceSize.XS}>
+								<C.Space
+									size={C.SpaceSize.XS}
+									sizeLeft={C.SpaceSize.L}
+									sizeRight={C.SpaceSize.L}
+								>
 									<C.LinkIcon
 										color={C.Color.Grey50}
 										icon="RotateCw"
@@ -280,7 +290,7 @@ export class LibraryStoreContainer extends React.Component {
 							width: '90%',
 							maxWidth: '1080px',
 							margin: '0 auto',
-							padding: `${C.getSpace(C.SpaceSize.XXXL * 3)}px 0 ${C.getSpace(
+							padding: `${C.getSpace(C.SpaceSize.XXXL * 2)}px 0 ${C.getSpace(
 								C.SpaceSize.XXXL + C.SpaceSize.L
 							)}px 0`
 						}}
@@ -294,18 +304,42 @@ export class LibraryStoreContainer extends React.Component {
 										</C.Headline>
 										<C.Space sizeBottom={C.SpaceSize.M} />
 										<C.Copy textColor={C.Color.Grey36} size={C.CopySize.M}>
-											Browse and install compatible code libraries for your prototype
+											Connect interactive design systems and components with your
+											prototype
 										</C.Copy>
 									</div>
 								</C.Space>
 
 								<C.Space sizeBottom={C.SpaceSize.XXL} />
-								<C.Flex>
-									{libraryStore.recommendations.map(item => (
+
+								<C.Flex flexWrap={true}>
+									{designSystemPackages.map(item => (
+										<LibraryStoreItemContainer
+											key={item.id}
+											item={item}
+											size={LibraryStoreItemSize.Featured}
+										/>
+									))}
+								</C.Flex>
+								<C.Space
+									size={C.SpaceSize.XS}
+									style={{ paddingTop: `${C.SpaceSize.XXL * 2}px` }}
+								>
+									<C.Headline order={3} bold textColor={C.Color.Grey10}>
+										Packages
+									</C.Headline>
+									<C.Space sizeBottom={C.SpaceSize.XS} />
+									<C.Copy textColor={C.Color.Grey36} size={C.CopySize.M}>
+										Ready-to-use interactive code components
+									</C.Copy>
+								</C.Space>
+								<C.Space sizeBottom={C.SpaceSize.L} />
+								<C.Flex flexWrap={true}>
+									{otherPackages.map(item => (
 										<LibraryStoreItemContainer
 											key={item.id}
 											item={item}
-											size={LibraryStoreItemSize.Large}
+											size={LibraryStoreItemSize.Default}
 										/>
 									))}
 								</C.Flex>
@@ -393,7 +427,7 @@ export class LibraryStoreContainer extends React.Component {
 													this.npmInstallState = LibraryStoreItemState.Default;
 												}}
 											>
-												Install
+												Connect
 											</C.InputButton>
 										</div>
 									</C.Space>
@@ -404,7 +438,7 @@ export class LibraryStoreContainer extends React.Component {
 									<C.Space size={C.SpaceSize.XS}>
 										<div style={{ maxWidth: '360px' }}>
 											<C.Headline order={4} bold textColor={C.Color.Grey10}>
-												Install Local Library
+												Connect Local Library
 											</C.Headline>
 											<C.Space sizeBottom={C.SpaceSize.XS} />
 											<C.Copy textColor={C.Color.Grey36} size={C.CopySize.M}>
@@ -417,7 +451,7 @@ export class LibraryStoreContainer extends React.Component {
 												size={C.ButtonSize.Medium}
 												onClick={this.handleLocalInstallClick}
 											>
-												Install Local Library
+												Connect Local Library
 											</C.Button>
 											<C.Space sizeBottom={C.SpaceSize.S} />
 											<C.Link
diff --git a/packages/core/src/container/library-store-item-container.tsx b/packages/core/src/container/library-store-item-container.tsx
index b02989fdf..74aaeb6ce 100644
--- a/packages/core/src/container/library-store-item-container.tsx
+++ b/packages/core/src/container/library-store-item-container.tsx
@@ -16,8 +16,10 @@ export interface LibraryStoreItemContainerProps {
 }
 
 export enum LibraryStoreItemSize {
-	Medium,
-	Large
+	Hero,
+	Featured,
+	Default,
+	Installed
 }
 
 export enum LibraryStoreItemState {
@@ -110,10 +112,20 @@ export class LibraryStoreItemContainer extends React.Component<LibraryStoreItemC
 				? C.LibraryBoxState.Progress
 				: C.LibraryBoxState.Idle;
 
-		const boxSize =
-			props.size === LibraryStoreItemSize.Large
-				? C.LibraryBoxSize.Large
-				: C.LibraryBoxSize.Medium;
+		const boxSize = () => {
+			switch (props.size) {
+				case LibraryStoreItemSize.Hero:
+					return C.LibraryBoxSize.Hero;
+				case LibraryStoreItemSize.Featured:
+					return C.LibraryBoxSize.Featured;
+				case LibraryStoreItemSize.Default:
+					return C.LibraryBoxSize.Default;
+				case LibraryStoreItemSize.Installed:
+					return C.LibraryBoxSize.Installed;
+				default:
+					return C.LibraryBoxSize.Default;
+			}
+		};
 
 		return (
 			<C.LibraryBox
@@ -141,7 +153,7 @@ export class LibraryStoreItemContainer extends React.Component<LibraryStoreItemC
 						) : null}
 					</C.Flex>
 				}
-				size={boxSize}
+				size={boxSize()}
 				details={
 					props.item.homepage && (
 						<C.LinkIcon
@@ -155,7 +167,7 @@ export class LibraryStoreItemContainer extends React.Component<LibraryStoreItemC
 								})
 							}
 						>
-							Learn more
+							Docs
 						</C.LinkIcon>
 					)
 				}
@@ -163,7 +175,7 @@ export class LibraryStoreItemContainer extends React.Component<LibraryStoreItemC
 					<C.Flex alignItems={C.FlexAlignItems.Center}>
 						<Match value={props.item.state}>
 							<MatchBranch when={Model.LibraryStoreItemState.Listed}>
-								<ActiveButton label="Install" onClick={this.handleButtonClick} />
+								<ActiveButton label="Connect" onClick={this.handleButtonClick} />
 							</MatchBranch>
 							<MatchBranch when={whenHasLibraryAnd(installing)}>
 								<div style={{ height: '28px', display: 'flex', alignItems: 'center' }}>
diff --git a/packages/model/src/library-store-item.ts b/packages/model/src/library-store-item.ts
index e027a5db3..170ff8f66 100644
--- a/packages/model/src/library-store-item.ts
+++ b/packages/model/src/library-store-item.ts
@@ -17,6 +17,7 @@ export interface LibraryStoreItemInit {
 	library?: PatternLibrary;
 	meta?: Map<string, any>;
 	type: LibraryStoreItemType;
+	category: string;
 	name: string;
 	version: string;
 }
@@ -25,6 +26,7 @@ export class LibraryStoreItem {
 	public readonly id: string;
 	private library?: PatternLibrary;
 	private type: LibraryStoreItemType;
+	public readonly category: string;
 	private fetching?: Promise<unknown>;
 
 	@Mobx.observable private internalItemName: string;
@@ -199,6 +201,7 @@ export class LibraryStoreItem {
 	public constructor(init: LibraryStoreItemInit) {
 		this.id = init.id || uuid.v4();
 		this.library = init.library;
+		this.category = init.category;
 		this.type = init.type;
 		this.internalItemName = init.name;
 		this.internalItemVersion = init.version;
@@ -222,7 +225,7 @@ export class LibraryStoreItem {
 	}
 
 	public static fromRecommendation(
-		name: { name: string; version: string },
+		name: { name: string; category: string; version: string },
 		ctx: {
 			meta: Map<string, any>;
 			getLibraryByPackageName(name: string): PatternLibrary | undefined;
@@ -232,6 +235,7 @@ export class LibraryStoreItem {
 			library: ctx.getLibraryByPackageName(name.name),
 			type: LibraryStoreItemType.Recommended,
 			name: name.name,
+			category: name.category || '',
 			version: name.version,
 			meta: ctx.meta
 		});
@@ -246,6 +250,7 @@ export class LibraryStoreItem {
 		return new LibraryStoreItem({
 			library,
 			type,
+			category: '',
 			name: library.getName(),
 			version: library.getVersion()
 		});
diff --git a/packages/model/src/library-store.ts b/packages/model/src/library-store.ts
index 0c5b03b5f..31913462a 100644
--- a/packages/model/src/library-store.ts
+++ b/packages/model/src/library-store.ts
@@ -12,26 +12,38 @@ export class LibraryStore {
 	private readonly recommended = [
 		{
 			name: '@meetalva/alva-design',
+			category: 'design-system',
 			version: 'latest'
 		},
 		{
-			name: '@meetalva/feather-icons',
+			name: '@meetalva/material-design',
+			category: 'design-system',
 			version: 'latest'
 		},
 		{
-			name: '@meetalva/unsplash',
+			name: '@meetalva/video-player',
+			category: 'media',
 			version: 'latest'
 		},
 		{
-			name: '@meetalva/video-player',
+			name: '@meetalva/maps',
+			category: 'media',
 			version: 'latest'
 		},
 		{
-			name: '@meetalva/maps',
+			name: '@meetalva/unsplash',
+			category: 'media',
+			version: 'latest'
+		},
+		{
+			name: '@meetalva/feather-icons',
+			category: 'media',
 			version: 'latest'
 		},
+
 		{
 			name: '@meetalva/music-player',
+			category: 'media',
 			version: 'latest'
 		}
 	];