[Toolchain] Add emission package.json scripts

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",

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};

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};

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};