From 4e02622c3e4fdcc84f729f338486ff1c804bbbd7 Mon Sep 17 00:00:00 2001
From: Christopher Pappas <damassi.pappas@gmail.com>
Date: Wed, 3 Oct 2018 15:20:42 -0700
Subject: [PATCH] [Toolchain] Add emission package.json scripts

---
 package.json                         | 7 +++++--
 src/elements/Box/Box.tsx             | 5 ++++-
 src/elements/Flex/Flex.tsx           | 5 ++++-
 src/elements/Separator/Separator.tsx | 7 ++++++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 02fe8d3e6..f0da1185a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,9 @@
   "typings": "dist/index.d.ts",
   "scripts": {
     "clean": "rm -rf dist",
-    "compile": "babel src --out-dir dist -s --source-map --extensions '.ts,.tsx' --ignore src/**/__tests__,src/**/__stories__",
+    "clean:emission": "rm -rf ../emission/node_modules/@artsy/palette/dist",
+    "compile": "babel src -s --source-map --extensions '.ts,.tsx' --ignore src/**/__tests__,src/**/__stories__ --out-dir dist",
+    "compile:emission": "yarn compile --out-dir ../emission/node_modules/@artsy/palette/dist",
     "docs:build": "docz build",
     "docs": "docz dev",
     "lint": "tslint -c tslint.json --project tsconfig.json",
@@ -23,7 +25,8 @@
     "test": "yarn type-check && yarn jest",
     "type-check": "tsc --emitDeclarationOnly --pretty",
     "type-declarations": "tsc --emitDeclarationOnly",
-    "watch": "concurrently --raw --kill-others 'yarn compile -w' 'tsc --emitDeclarationOnly -w'"
+    "watch": "concurrently --raw --kill-others 'yarn compile -w' 'yarn type-declarations -w'",
+    "watch:emission": "yarn clean:emission && concurrently --raw --kill-others 'yarn compile:emission -w' 'yarn type-declarations -w --outDir ../emission/node_modules/@artsy/palette/dist'"
   },
   "repository": {
     "type": "git",
diff --git a/src/elements/Box/Box.tsx b/src/elements/Box/Box.tsx
index 032c1b204..dfcc1b66b 100644
--- a/src/elements/Box/Box.tsx
+++ b/src/elements/Box/Box.tsx
@@ -2,6 +2,7 @@
 import React from "react"
 import { styled as primitives } from "../../platform/primitives"
 
+import { StyledComponentClass } from "styled-components"
 import {
   background,
   BackgroundProps,
@@ -56,7 +57,9 @@ export interface BoxProps
  * Box is just a `View` or `div` (depending on the platform) with common styled-systems
  * hooks.
  */
-export const Box = primitives.View.attrs<BoxProps>({})`
+export const Box: StyledComponentClass<any, any, any> = primitives.View.attrs<
+  BoxProps
+>({})`
   ${background};
   ${bottom};
   ${display};
diff --git a/src/elements/Flex/Flex.tsx b/src/elements/Flex/Flex.tsx
index 525db5f0f..79ea18371 100644
--- a/src/elements/Flex/Flex.tsx
+++ b/src/elements/Flex/Flex.tsx
@@ -34,6 +34,7 @@ import {
 
 // @ts-ignore
 import { ClassAttributes, HTMLAttributes } from "react"
+import { StyledComponentClass } from "styled-components"
 
 const flexGrow = style({
   prop: "flexGrow",
@@ -60,7 +61,9 @@ export interface FlexProps
 /**
  * A utility component that encapsulates flexbox behavior
  */
-export const Flex = primitives.View.attrs<FlexProps>({})`
+export const Flex: StyledComponentClass<any, any, any> = primitives.View.attrs<
+  FlexProps
+>({})`
   display: flex;
   ${alignContent};
   ${alignItems};
diff --git a/src/elements/Separator/Separator.tsx b/src/elements/Separator/Separator.tsx
index af9c9d37d..a3773bb5a 100644
--- a/src/elements/Separator/Separator.tsx
+++ b/src/elements/Separator/Separator.tsx
@@ -1,6 +1,7 @@
 // @ts-ignore
 import React from "react"
 
+import { StyledComponentClass } from "styled-components"
 import { space, SpaceProps, width, WidthProps } from "styled-system"
 import { color } from "../../helpers"
 import { styled as primitives } from "../../platform/primitives"
@@ -10,7 +11,11 @@ export interface SeparatorProps extends SpaceProps, WidthProps {}
 /**
  * A horizontal divider whose width and spacing can be adjusted
  */
-export const Separator = primitives.View.attrs<SeparatorProps>({})`
+export const Separator: StyledComponentClass<
+  any,
+  any,
+  any
+> = primitives.View.attrs<SeparatorProps>({})`
   border: 1px solid ${color("black10")};
   border-bottom-width: 0;
   ${space};