Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Commit

Permalink
feat: refine styling and copy of store (#770)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@yuzl @tilmx
yuzl authored and tilmx committed Apr 9, 2019
1 parent cafc311 commit 1b4741c
Show file tree
Hide file tree
Showing 6 changed files with 132 additions and 50 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/library-box/demo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
35 changes: 27 additions & 8 deletions packages/components/src/library-box/library-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@ export enum LibraryBoxState {
}

export enum LibraryBoxSize {
Medium,
Large
Hero,
Featured,
Default,
Installed
}

export interface LibraryBoxProps {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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}>
Expand Down
88 changes: 61 additions & 27 deletions packages/core/src/container/library-store-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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} />
Expand All @@ -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}>
Expand All @@ -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"
Expand All @@ -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`
}}
Expand All @@ -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>
Expand Down Expand Up @@ -393,7 +427,7 @@ export class LibraryStoreContainer extends React.Component {
this.npmInstallState = LibraryStoreItemState.Default;
}}
>
Install
Connect
</C.InputButton>
</div>
</C.Space>
Expand All @@ -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}>
Expand All @@ -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
Expand Down
30 changes: 21 additions & 9 deletions packages/core/src/container/library-store-item-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@ export interface LibraryStoreItemContainerProps {
}

export enum LibraryStoreItemSize {
Medium,
Large
Hero,
Featured,
Default,
Installed
}

export enum LibraryStoreItemState {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -141,7 +153,7 @@ export class LibraryStoreItemContainer extends React.Component<LibraryStoreItemC
) : null}
</C.Flex>
}
size={boxSize}
size={boxSize()}
details={
props.item.homepage && (
<C.LinkIcon
Expand All @@ -155,15 +167,15 @@ export class LibraryStoreItemContainer extends React.Component<LibraryStoreItemC
})
}
>
Learn more
Docs
</C.LinkIcon>
)
}
install={
<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' }}>
Expand Down
7 changes: 6 additions & 1 deletion packages/model/src/library-store-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface LibraryStoreItemInit {
library?: PatternLibrary;
meta?: Map<string, any>;
type: LibraryStoreItemType;
category: string;
name: string;
version: string;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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
});
Expand All @@ -246,6 +250,7 @@ export class LibraryStoreItem {
return new LibraryStoreItem({
library,
type,
category: '',
name: library.getName(),
version: library.getVersion()
});
Expand Down
Loading

1 comment on commit 1b4741c

@marionebl
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployed at: https://alva-commits-1b474.surge.sh

Please sign in to comment.