feat: implement userstore property access

src/components/colors/index.tsx

@@ -7,6 +7,7 @@ export enum Color {
 	Blue40 = 'rgb(102, 169, 230)',
 	Blue60 = 'rgb(153, 198, 239)',
 	Blue80 = 'rgb(212, 226, 242)',
+	Blue90 = 'rgb(222, 236, 252)',
 	Green = 'rgb(91, 226, 122)',
 	SignalGreen = 'rgb(31, 163, 133)',
 	Grey20 = 'rgb(52, 61, 69)',

src/components/create-select/create-select.tsx

@@ -20,9 +20,12 @@ export type CreateSelectAction =
 	| { action: 'pop-value' | 'remove-value'; removedValue: CreateSelectOption };
 
 export interface CreateSelectProps {
+	autoFocus?: boolean;
+	menuIsOpen?: boolean;
 	options: CreateSelectOption[];
 	placeholder: string;
 	value?: CreateSelectOption;
+	onBlur?(e: React.ChangeEvent<HTMLElement>): void;
 	onChange?(item: CreateSelectOption, action: CreateSelectAction): void;
 	onInputChange?(e: React.ChangeEvent<HTMLElement>, action: CreateSelectAction): void;
 }
@@ -42,13 +45,21 @@ const StyledChevron = styled(Icon).attrs({ name: IconName.ArrowFillRight })`
 	transform: rotate(90deg);
 `;
 
+export const ChevronIcon: React.SFC = props => (
+	<StyledChevron {...props} name={IconName.ArrowFillLeft} />
+);
+
 export const CreateSelect: React.SFC<CreateSelectProps> = props => (
 	<>
 		<CreatableSelect
+			autoFocus={props.autoFocus}
+			backspaceRemovesValue
 			components={{
 				IndicatorsContainer: StyledChevron
 			}}
+			menuIsOpen={props.menuIsOpen}
 			options={props.options}
+			onBlur={props.onBlur}
 			onChange={props.onChange}
 			onInputChange={props.onInputChange}
 			placeholder={props.placeholder}
@@ -65,6 +76,7 @@ export const CreateSelect: React.SFC<CreateSelectProps> = props => (
 					}
 				}),
 				control: () => ({
+					boxSizing: 'border-box',
 					display: 'flex',
 					alignItems: 'center',
 					background: Color.White,
@@ -76,6 +88,10 @@ export const CreateSelect: React.SFC<CreateSelectProps> = props => (
 					height: '30px',
 					position: 'relative'
 				}),
+				input: base => ({
+					...base,
+					marginRight: '-3px'
+				}),
 				menu: base => ({
 					...base,
 					padding: 0,
@@ -95,11 +111,20 @@ export const CreateSelect: React.SFC<CreateSelectProps> = props => (
 					background: Color.White,
 					color: Color.Grey20,
 					fontSize: '15px',
-					padding: '6px 12px'
+					padding: '6px 12px 6px 9px'
 				}),
 				valueContainer: base => ({
 					...base,
-					padding: '6px 12px'
+					padding: '6px 12px 6px 9px',
+					color: Color.Grey20
+				}),
+				placeholder: base => ({
+					...base,
+					color: Color.Grey20,
+					margin: 0,
+					whiteSpace: 'nowrap',
+					textOverflow: 'ellipsis',
+					overflow: 'hidden'
 				})
 			}}
 		/>

src/components/index.ts

@@ -32,6 +32,7 @@ export * from './property-item-number';
 export * from './property-item-radiogroup';
 export * from './property-item-select';
 export * from './property-item-string';
+export * from './property-reference';
 export * from './search';
 export * from './select';
 export * from './space';

src/components/property-input/index.tsx

@@ -8,9 +8,9 @@ const INPUT_PADDING_RIGHT = (props: PropertyInputProps) =>
 	props.type === PropertyInputType.Number ? 0 : getSpace(SpaceSize.S);
 
 const StyledInput = styled.input`
-	display: inline-block;
+	display: block;
 	box-sizing: border-box;
-	width: 70%;
+	width: 100%;
 	height: 30px;
 	border: 0.5px solid ${Color.Grey90};
 	padding-top: ${getSpace(SpaceSize.XS)}px;

src/components/property-item-string/index.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { PropertyInput, PropertyInputType } from '../property-input';
 import { PropertyItem } from '../property-item';
+import { Link2 } from 'react-feather';
+import styled, { StyledComponentClass } from 'styled-components';
+import { Color } from '../colors';
 
 export interface PropertyItemStringProps {
 	className?: string;
@@ -10,16 +13,50 @@ export interface PropertyItemStringProps {
 	onChange?: React.ChangeEventHandler<HTMLInputElement>;
 	placeholder?: string;
 	value?: string;
+	icon?: React.ReactNode;
+	children?(renderProps: PropertyItemStringProps): JSX.Element | null;
 }
 
+// tslint:disable-next-line:no-any
+export const LinkIcon: StyledComponentClass<{}, any, any> = styled(Link2)`
+	position: absolute;
+	right: 0;
+	box-sizing: border-box;
+	padding: 3px 6px 3px 0;
+	width: 20px;
+	cursor: pointer;
+	transition: stroke 0.3s ease-in-out;
+	&:hover {
+		stroke: ${Color.Blue20};
+	}
+`;
+
+// tslint:disable-next-line:no-any
+export const UnlinkIcon: StyledComponentClass<{}, any, any> = styled(Link2)`
+	position: absolute;
+	right: 0;
+	box-sizing: border-box;
+	padding: 3px 6px 3px 0;
+	width: 20px;
+	cursor: pointer;
+	transition: stroke 0.3s ease-in-out;
+	&:hover {
+		stroke: ${Color.Red};
+	}
+`;
+
 export const PropertyItemString: React.StatelessComponent<PropertyItemStringProps> = props => (
 	<PropertyItem description={props.description} label={props.label}>
-		<PropertyInput
-			onChange={props.onChange}
-			onBlur={props.onBlur}
-			type={PropertyInputType.Text}
-			value={props.value || ''}
-			placeholder={props.placeholder}
-		/>
+		{props.icon}
+		{typeof props.children === 'function' && props.children(props)}
+		{typeof props.children === 'undefined' && (
+			<PropertyInput
+				onChange={props.onChange}
+				onBlur={props.onBlur}
+				type={PropertyInputType.Text}
+				value={props.value || ''}
+				placeholder={props.placeholder}
+			/>
+		)}
 	</PropertyItem>
 );

src/components/property-item/property-item.tsx

@@ -14,9 +14,9 @@ const StyledPropertyItem = styled.label`
 `;
 
 const StyledPropertyItemContainer = styled.div`
+	position: relative;
 	display: flex;
-	align-items: center;
-	flex-grow: 1;
+	width: 100%;
 `;
 
 export interface PropertyItemProps {

src/components/property-reference/index.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Color } from '../colors';
+import { fonts } from '../fonts';
+import { getSpace, SpaceSize } from '../space';
+import styled, { StyledComponentClass } from 'styled-components';
+import { Link2 } from 'react-feather';
+
+const StyledReference = styled.div`
+	display: inline-block;
+	box-sizing: border-box;
+	width: 70%;
+	border: 0.5px solid ${Color.Blue};
+	padding-top: ${getSpace(SpaceSize.XS)}px;
+	padding-right: 5px;
+	padding-bottom: ${getSpace(SpaceSize.XS)}px;
+	padding-left: ${getSpace(SpaceSize.XS + SpaceSize.XXS)}px;
+	@media screen and (-webkit-min-device-pixel-ratio: 2) {
+		border-width: 0.5px;
+	}
+	border-radius: 3px;
+	background: ${Color.Blue90};
+	color: ${Color.Grey20};
+	font-family: ${fonts().NORMAL_FONT};
+	font-size: 15px;
+	text-overflow: ellipsis;
+`;
+
+const StyledReferenceHead = styled.div`
+	position: relative;
+	display: flex;
+	align-items: center;
+`;
+
+const StyledReferenceName = styled.div`
+	box-sizing: border-box;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: ${Color.Blue20};
+	font-size: 15px;
+`;
+
+const StyledReferenceValue = styled.div`
+	box-sizing: border-box;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: ${Color.Grey60};
+	font-size: 12px;
+	padding-top: 6px;
+`;
+
+// tslint:disable-next-line:no-any
+export const StyledLinkIcon: StyledComponentClass<{}, any, any> = styled(Link2)`
+	box-sizing: border-box;
+	width: 15px;
+	height: 15px;
+	cursor: pointer;
+	transition: stroke 0.3s ease-in-out;
+	stroke: ${Color.Blue};
+	&:hover {
+		stroke: ${Color.Red};
+	}
+`;
+
+export interface PropertyReferenceProps {
+	name: string;
+	value: string;
+	onClick?: React.MouseEventHandler<HTMLElement>;
+	onLinkClick?: React.MouseEventHandler<HTMLElement>;
+}
+
+export const PropertyReference: React.SFC<PropertyReferenceProps> = props => (
+	<StyledReference onClick={props.onClick}>
+		<StyledReferenceHead>
+			<StyledReferenceName>{props.name}</StyledReferenceName>
+			<StyledLinkIcon onClick={props.onLinkClick} />
+		</StyledReferenceHead>
+		{props.value && <StyledReferenceValue>{props.value}</StyledReferenceValue>}
+	</StyledReference>
+);