feat: add library store (#733)

* feat: add library store

* feat: wire up data from package

* fix: remove unneeded text color

* fix: rewire update logic

* fix: avoid webpack eval

* fix: propagate projectViewMode via project/:id/store

* fix: be defensive about meta data

* feat: open guide on click

* feat: add fallback image for libraries

* feat: fetch libraries from npm

* chore: copy vendor files to nccbuild

* style: remove debris

* feat: begin library store data modelling

* feat: wire up recommendations to messaging

* fix: provide backward-compatible mkdir

* feat: allow updates from disk

* feat: make installed libraries toggleable

* feat: prepare npm updates

* feat: allow switching from remote to local install type

* feat: allow switching from local to remote install type

* feat: redispatch npm updates appropriately

* fix: dedupe update/connect transactions based on npm name

* fix: adjust wording

* feat: add option to set library displayName

* feat: add library homepage

* style: simplify layout mechanics

* fix: simplify library meta data

* fix: remove faulty memoization

* fix: retain optimization

* fix: avoid null pointer errors

* fix: remove details arrow

* fix: write packageFile on import

* fix: remove stray log

* feat: fetch library meta data from npm

* chore: remove console.log

* fix: remove library menu ftb

* chore: remove console.log

* feat: check for remote library updates

* fix: allow up and downgrades

* fix: avoid submit loops

* feat: show update indicator

* feat: highlight updatable libraries

* feat: add option to check for updates

* feat: add link to library store

* fix: fix minor visual bugs

* feat: add option to view website

* fix: resolve npm tags correctly

* refactor: lift installed detail state to LibraryStore

* feat: show only update if > 0 are available

* fix: toggle libraries only on summary click

* fix: abort on failure

* fix: disable entire title on library store

* fix: abstract updateAvailable computation

* chore: remove material design ftb

* fix: add active state for links with icons

* WIP fix: add migrator for library name and description

* fix: laxen our way out of some ts corners

* fix: sand some rough edges

* feat: open remote files, e.g. website example on splashscreen

* fix: harden packageFile passing

* chore: factor out alva ui components

* fix: trigger remote file request correctly with node hosts

* fix: allow remote updates for recommended store items

* feat: indicate update target version

* chore: pass around component artifacts

* fix: adjust library image height

* fix: avoid jumping button heights

* fix: remove faulty meta data

* chore: avoid unnecessary work when building site

* fix: find vendor dir correctly

* fix: ensure vendored yarn is executable

* chore: avoid duplication

* fix: expose more data when fetch fails

* chore: expose more data for fetch errors

* fix: switch to fork from execa

.circleci/config.yml

@@ -1,6 +1,24 @@
 version: 2.1
 
 commands:
+  build_electron:
+    description: "Perform an electron-build of @meetalva/core"
+    parameters:
+        args:
+          type: string
+    steps:
+      - run:
+          name: Copy Scripts
+          command: lerna run copy:scripts --stream
+
+      - run:
+          name: Copy Vendors
+          command: lerna run copy:vendor --stream
+
+      - run:
+          name: Publish Release
+          command: alva-release --project packages/core/nccbuild << parameters.args >>
+
   setup:
     description: "Set up the repo to work on"
     parameters:
@@ -26,6 +44,7 @@ commands:
       - save_cache:
           paths:
             - node_modules
+            - packages/components/node_modules
             - packages/core/node_modules
             - packages/tools/node_modules
           key: v5-dependencies-<< parameters.key >>-{{ checksum "yarn.lock" }}
@@ -61,6 +80,7 @@ jobs:
       - save_cache:
           paths:
             - node_modules
+            - packages/components/node_modules
             - packages/core/node_modules
             - packages/tools/node_modules
           key: v5-dependencies-macos-{{ checksum "yarn.lock" }}
@@ -117,6 +137,7 @@ jobs:
       - persist_to_workspace:
           root: ~/repo
           paths:
+              - packages/components/lib
               - packages/core/lib
               - packages/essentials/lib
               - packages/site/lib
@@ -218,13 +239,8 @@ jobs:
       - attach_workspace:
           at: ~/repo
 
-      - run:
-          name: Copy Scripts
-          command: lerna run copy:scripts
-
-      - run:
-          name: Publish Release
-          command: alva-release --project packages/core/nccbuild
+      - build_electron:
+          args: ''
 
   linux:
     docker:
@@ -243,9 +259,8 @@ jobs:
           name: Copy Scripts
           command: lerna run copy:scripts
 
-      - run:
-          name: Publish Release
-          command: alva-release --project packages/core/nccbuild
+      - build_electron:
+          args: ''
 
   windows:
     docker:
@@ -260,13 +275,8 @@ jobs:
       - attach_workspace:
           at: ~/repo
 
-      - run:
-          name: Copy Scripts
-          command: lerna run copy:scripts
-
-      - run:
-          name: Publish Release
-          command: alva-release --project packages/core/nccbuild -- --win
+      - build_electron:
+          args: '-- --win'
 
   site:
     docker:
@@ -295,7 +305,7 @@ jobs:
 
       - run:
           name: Create static site
-          command: patternplate build --out=./.static --base=/
+          command: NODE_DENV=production patternplate build --out=./.static --base=/
 
       - run:
           name: Deploy to static hosting

package.json

@@ -9,7 +9,7 @@
     "lint": "tslint --project . -c tslint.json 'src/**/*.ts'",
     "precommit": "lint-staged",
     "watch": "lerna run watch --stream",
-    "analyse:essentials": "alva analyze --out=packages/essentials/src/analysis.ts --in=packages/essentials/package.json"
+    "analyze:essentials": "alva analyze --out=packages/essentials/src/analysis.ts --in=packages/essentials/package.json"
   },
   "repository": {
     "type": "git",
@@ -43,6 +43,8 @@
     "@meetalva/core": "0.9.2",
     "@meetalva/site": "0.8.1",
     "@meetalva/tools": "0.8.1",
+    "@patternplate/cli": "^3.2.6",
+    "@patternplate/render-styled-components": "2.5.18",
     "@types/jest": "22.2.2",
     "husky": "0.14.3",
     "jest": "^23.6.0",
@@ -51,12 +53,12 @@
     "lerna": "^3.6.0",
     "lint-staged": "7.0.4",
     "prettier": "1.12.0",
-    "typescript": "3.2.2",
     "ts-jest": "^23.10.5",
     "tslint": "5.11.0",
-    "tslint-config-prettier": "1.15.0"
+    "tslint-config-prettier": "1.15.0",
+    "typescript": "3.2.2"
   },
-  "homepage": "https://meetalva.github.io/",
+  "homepage": "https://meetalva.io/",
   "workspaces": [
     "packages/*"
   ],

packages/components/index.d.ts

@@ -0,0 +1 @@
+export * from './lib';

packages/components/index.js

@@ -0,0 +1 @@
+module.exports = require('./lib');

packages/components/package.json

@@ -0,0 +1,39 @@
+{
+    "name": "@meetalva/components",
+    "version": "1.0.0",
+    "description": "Alva UI components",
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/meetalva/alva.git"
+    },
+    "author": {
+      "email": "[email protected]",
+      "name": "Meet Alva Team",
+      "url": "https://meetalva.io/"
+    },
+    "license": "MIT",
+    "bugs": {
+      "url": "https://github.com/meetalva/alva/issues"
+    },
+    "devDependencies": {
+      "react-testing-library": "5.4.0",
+      "ts-jest": "^23.10.5",
+      "ts-loader": "4.4.1"
+    },
+    "dependencies": {
+      "@types/feather-icons": "4.7.0",
+      "@types/react": "16.7.18",
+      "@types/react-dom": "16.0.7",
+      "@types/react-textarea-autosize": "4.3.3",
+      "@types/styled-components": "4.0.3",
+      "feather-icons": "4.7.3",
+      "react": "16.7.0",
+      "react-dom": "16.4.2",
+      "react-feather": "^1.1.5",
+      "react-select": "2.0.0-beta.6",
+      "react-textarea-autosize": "7.0.4",
+      "react-virtualized": "^9.21.0",
+      "tag-hoc": "1.0.0"
+    },
+    "homepage": "https://meetalva.github.io/"
+  }

packages/components/src/badge-icon/demo.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import DemoContainer from '../demo-container';
+import { BadgeIcon } from './';
+import { Color } from '../colors';
+
+export default (): JSX.Element => (
+	<DemoContainer title="Badge Icon">
+		<BadgeIcon color={Color.Blue20}>3</BadgeIcon>
+	</DemoContainer>
+);

packages/components/src/badge-icon/index.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Color } from '../colors';
+
+export interface BadgeIconProps {
+	color: Color;
+}
+
+const StyledBadge = styled.div`
+	display: flex;
+	height: 15px;
+	width: 15px;
+	padding-top: 1px;
+	box-sizing: border-box;
+	justify-content: center;
+	font-weight: bold;
+	font-size: 10px;
+	border-radius: 50%;
+	background: ${(props: BadgeIconProps) => props.color};
+	color: ${Color.White};
+`;
+
+export const BadgeIcon: React.StatelessComponent<BadgeIconProps> = props => {
+	return <StyledBadge color={props.color}>{props.children}</StyledBadge>;
+};

packages/components/src/badge-icon/pattern.json

@@ -0,0 +1,8 @@
+{
+	"name": "badge-icon",
+	"displayName": "Badge Icon",
+	"description": "Counts e.g. notifications",
+	"flag": "alpha",
+	"version": "1.0.0",
+	"tags": ["atom"]
+ }

packages/core/src/components/button/index.tsx → packages/components/src/button/index.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 export interface ButtonProps {
 	children?: React.ReactNode;
 	disabled?: boolean;
+	disabledAppearance?: boolean;
 	/** @description For dark backgrounds */
 	inverted?: boolean;
 	onClick?: React.MouseEventHandler<HTMLElement>;
@@ -15,9 +16,11 @@ export interface ButtonProps {
 	buttonRole?: ButtonRole;
 	/** @description Spatial weight @default */
 	size?: ButtonSize;
-	textColor?: Color;
+	color?: string;
 	as?: keyof JSX.IntrinsicElements;
 	style?: React.CSSProperties;
+	className?: string;
+	type?: 'submit' | 'button';
 }
 
 export enum ButtonOrder {
@@ -53,9 +56,9 @@ const toPadding = (sizes: SpaceSize[]) => sizes.map(s => `${getSpace(s)}px`).joi
 const BUTTON_PADDING = (props: ButtonProps): string => {
 	switch (props.size) {
 		case ButtonSize.Small:
-			return toPadding([SpaceSize.XXS, SpaceSize.M]);
+			return toPadding([SpaceSize.XXS, SpaceSize.XS]);
 		case ButtonSize.Medium:
-			return toPadding([SpaceSize.XS, SpaceSize.L]);
+			return toPadding([SpaceSize.XS, SpaceSize.M]);
 		case ButtonSize.Large:
 		default:
 			return toPadding([SpaceSize.M, SpaceSize.XXXL]);
@@ -95,40 +98,58 @@ const SizedBaseButton = styled(DecoratedBaseButton)`
 	flex-grow: ${BUTTON_GROW};
 `;
 
-const StyledPrimaryButton = styled(SizedBaseButton)`
+const primaryFill = (props: ButtonProps) =>
+	props.disabled || props.disabledAppearance ? Color.Grey60 : Color.Blue20;
+const primaryFillActive = (props: ButtonProps) =>
+	props.disabled || props.disabledAppearance ? Color.Grey60 : Color.Blue;
+
+const StyledPrimaryButton =
+	styled(SizedBaseButton) <
+	ButtonProps >
+	`
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	align-content: center;
 	text-align: center;
-	background: ${props => (props.inverted ? Color.White : Color.Blue20)};
-	border-color: ${props => (props.inverted ? Color.White : Color.Blue20)};
-	color: ${props => (props.inverted ? Color.Blue20 : Color.White)};
+	background: ${props => (props.inverted ? Color.White : primaryFill(props))};
+	border-color: transparent;
+	color: ${props => (props.inverted ? primaryFill(props) : Color.White)};
 
 	&:active {
-		background: ${props => (props.inverted ? '' : Color.Blue)};
-		border-color: ${props => (props.inverted ? '' : Color.Blue)};
+		background: ${props => (props.inverted ? '' : primaryFillActive(props))};
+		border-color: ${props => (props.inverted ? '' : primaryFillActive(props))};
 		opacity: ${props => (props.inverted ? 0.8 : 1)};
 	}
 `;
 
-const StyledSecondaryButton = styled(SizedBaseButton)`
+const secondaryFill = (props: ButtonProps) => (props.color ? props.color : Color.Grey50);
+const secondaryFillActive = (props: ButtonProps) =>
+	props.disabled || props.disabledAppearance ? secondaryFill(props) : Color.Black;
+
+const StyledSecondaryButton =
+	styled(SizedBaseButton) <
+	ButtonProps >
+	`
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	align-content: center;
 	text-align: center;
 	background: transparent;
-	border-color: ${Color.Grey50};
-	color: ${Color.Grey50};
+	border-color: ${secondaryFill};
+	color: ${secondaryFill};
 
 	&:active {
-		border-color: ${Color.Black};
-		color: ${Color.Black};
+		border-color: ${secondaryFillActive};
+		color: ${secondaryFillActive};
 	}
 `;
 
-const StyledTertiaryButton = styled(SizedBaseButton)`
+const StyledTertiaryButton =
+	styled(SizedBaseButton) <
+	ButtonProps >
+	`
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -162,20 +183,22 @@ const getComponent = (props: ButtonProps): AnyButton => {
 };
 
 export const Button: React.StatelessComponent<ButtonProps> = props => {
-	const Component = getComponent(props);
+	const Component = getComponent(props) as any;
 
 	return (
 		<Component
+			as={props.as}
+			buttonRole={props.buttonRole}
+			className={props.className}
+			disabled={props.disabled}
+			disabledAppearance={props.disabledAppearance}
+			inverted={props.inverted}
 			onClick={props.onClick}
 			onDoubleClick={props.onDoubleClick}
-			textColor={props.textColor}
 			order={props.order}
-			buttonRole={props.buttonRole}
 			size={props.size}
-			inverted={props.inverted}
-			style={{ color: props.textColor, ...props.style }}
-			disabled={props.disabled}
-			as={props.as}
+			style={{ color: props.color, ...props.style }}
+			color={props.color}
 		>
 			{props.children}
 		</Component>

packages/core/src/components/colors/index.tsx → packages/components/src/colors/index.tsx

@@ -1,14 +1,15 @@
 export enum Color {
 	Black = 'rgb(1, 12, 22)',
-	BlackAlpha13 = 'rgba(0, 0, 0, .13)',
+	BlackAlpha15 = 'rgba(0, 0, 0, .15)',
+	BlackAlpha50 = 'rgba(0, 0, 0, .5)',
 	Blue = 'rgb(0, 112, 214)',
 	BlueAlpha40 = 'rgba(0, 112, 214, .4)',
 	Blue20 = 'rgb(51, 141, 222)',
 	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)',
+	Green = 'rgb(50, 180, 150)',
 	SignalGreen = 'rgb(31, 163, 133)',
 	Grey10 = 'rgb(30, 32, 36)',
 	Grey20 = 'rgb(52, 61, 69)',
@@ -19,6 +20,7 @@ export enum Color {
 	Grey90 = 'rgb(229, 230, 231)',
 	Grey97 = 'rgb(247, 247, 247)',
 	Orange = 'rgb(255, 127, 115)',
+	Yellow = 'rgb(251, 186, 80)',
 	Red = 'rgb(187, 50, 94)',
 	White = 'rgb(255, 255, 255)',
 	WhiteAlpha75 = 'rgba(255, 255, 255, .75)'