[Toolchain] Add emission-related 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/BorderBox/BorderBox.tsx

@@ -7,7 +7,7 @@ import { BorderBoxBase, BorderBoxProps } from "./BorderBoxBase"
  * A `div` that has a common border and padding set by default, with an optional
  * `hover` property for visually focusing content.
  */
-export const BorderBox = styledWrapper(BorderBoxBase).attrs<BorderBoxProps>({})`
+export const BorderBox = styledWrapper(BorderBoxBase)<BorderBoxProps>`
   ${({ hover }) =>
     hover &&
     css`

src/elements/BorderBox/BorderBoxBase.tsx

@@ -32,7 +32,7 @@ export interface BorderBoxProps
  * A `View` or `div` (depending on the platform) that has a common border
  * and padding set by default
  */
-export const BorderBoxBase = styledWrapper(Flex).attrs<BorderBoxProps>({})`
+export const BorderBoxBase = styledWrapper(Flex)<BorderBoxProps>`
   border: 1px solid ${color("black10")};
   border-radius: 2px;
   padding: ${space(2)}px;

src/elements/Box/Box.tsx

@@ -56,7 +56,7 @@ 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 = primitives.View<BoxProps>`
   ${background};
   ${bottom};
   ${display};

src/elements/Button/Button.tsx

@@ -235,7 +235,7 @@ export class ButtonBase extends Component<ButtonBaseProps & SansProps> {
   }
 }
 
-const Container = styled.button.attrs<ButtonBaseProps>({})`
+const Container = styled.button<ButtonBaseProps>`
   cursor: pointer;
   position: relative;
   white-space: nowrap;

src/elements/Checkbox/Checkbox.tsx

@@ -86,14 +86,27 @@ export class Checkbox extends React.Component<CheckboxProps> {
   }
 }
 
-const checkBorderColor = ({ disabled, selected, error }) => {
+interface CheckboxFeedbackState {
+  disabled?: boolean
+  selected?: boolean
+  error?: boolean
+}
+
+const checkBorderColor = ({
+  disabled,
+  selected,
+  error,
+}: CheckboxFeedbackState) => {
   if (disabled) return color("black10")
   if (selected) return color("black100")
   if (error) return color("red100")
   return color("black10")
 }
 
-const checkBackgroundColor = ({ disabled, selected }) => {
+const checkBackgroundColor = ({
+  disabled,
+  selected,
+}: CheckboxFeedbackState) => {
   switch (true) {
     case disabled:
       return color("black5")
@@ -104,7 +117,7 @@ const checkBackgroundColor = ({ disabled, selected }) => {
   }
 }
 
-const CheckboxButton = styled.div.attrs<CheckboxToggleProps>({})`
+const CheckboxButton = styled.div<CheckboxToggleProps>`
   ${borders};
   ${styledSpace};
   background-color: ${checkBackgroundColor};
@@ -146,8 +159,9 @@ const hoverStyles = ({ selected, hover, disabled }) => {
 interface ContainerProps extends FlexProps {
   selected: boolean
   hover: boolean
+  disabled: boolean
 }
-const Container = styled(Flex).attrs<ContainerProps>({})`
+const Container = styled(Flex)<ContainerProps>`
   user-select: none;
   cursor: ${({ disabled }) => !disabled && "pointer"};
   transition: color 0.25s;

src/elements/Colors/Colors.tsx

@@ -7,7 +7,7 @@ import { Display } from "../Typography"
 
 export interface ColorBlockProps extends ColorProps, BackgroundProps {}
 
-const ColorBlock = styled.div.attrs<ColorBlockProps>({})`
+const ColorBlock = styled.div<ColorBlockProps>`
   width: 100px;
   height: 100px;
   padding: 5px;

src/elements/Flex/Flex.tsx

@@ -60,7 +60,7 @@ export interface FlexProps
 /**
  * A utility component that encapsulates flexbox behavior
  */
-export const Flex = primitives.View.attrs<FlexProps>({})`
+export const Flex = primitives.View<FlexProps>`
   display: flex;
   ${alignContent};
   ${alignItems};

src/elements/Image/Image.tsx

@@ -35,7 +35,7 @@ export interface ImageProps
 /**
  * Image component with space, width and height properties
  */
-export const Image = styled.img.attrs<ImageProps>({})`
+export const Image = styled.img<ImageProps>`
   ${space};
   ${width};
   ${height};
@@ -51,7 +51,7 @@ export interface ResponsiveImageProps
 /**
  * An Image component that responsively resizes within its environment
  */
-export const ResponsiveImage = styled.div.attrs<ResponsiveImageProps>({})`
+export const ResponsiveImage = styled.div<ResponsiveImageProps>`
   background: url(${props => props.src});
   background-size: contain;
   background-repeat: no-repeat;

src/elements/Radio/Radio.tsx

@@ -94,9 +94,7 @@ export const Radio: React.SFC<RadioProps> = props => {
 /**
  * A radio button with a border
  */
-export const BorderedRadio = styled(Radio).attrs<RadioProps>({
-  p: 2,
-})`
+export const BorderedRadio = styled(Radio)<RadioProps>`
   border-radius: 2px;
   border: 1px solid ${color("black10")};
   transition: background-color 0.14s ease-in-out;
@@ -141,7 +139,7 @@ interface ContainerProps extends FlexProps {
   selected: boolean
 }
 
-const Container = styled(Flex).attrs<ContainerProps>({})`
+const Container = styled(Flex)<ContainerProps>`
   align-items: flex-start;
   cursor: ${({ disabled }) => !disabled && "pointer"};
   user-select: none;
@@ -175,7 +173,12 @@ const InnerCircle = styled.div`
   background-color: ${color("white100")};
 `
 
-const radioBackgroundColor = ({ disabled, selected }) => {
+interface RadioFeedbackState {
+  disabled?: boolean
+  selected?: boolean
+}
+
+const radioBackgroundColor = ({ disabled, selected }: RadioFeedbackState) => {
   switch (true) {
     case disabled:
       return color("black10")
@@ -186,13 +189,15 @@ const radioBackgroundColor = ({ disabled, selected }) => {
   }
 }
 
-const radioBorderColor = ({ disabled, selected }) =>
+const radioBorderColor = ({ disabled, selected }: RadioFeedbackState) =>
   selected && !disabled ? color("black100") : color("black10")
 
-const disabledInnerCircleBackgroundColor = ({ disabled, selected }) =>
-  disabled && !selected && color("black10")
+const disabledInnerCircleBackgroundColor = ({
+  disabled,
+  selected,
+}: RadioFeedbackState) => disabled && !selected && color("black10")
 
-const RadioButton = styled.div.attrs<RadioToggleProps>({})`
+const RadioButton = styled.div<RadioToggleProps>`
   ${borders};
   ${styledSpace};
   background-color: ${radioBackgroundColor};

src/elements/Select/Select.tsx

@@ -101,7 +101,7 @@ const caretArrow = css<SelectProps>`
   height: 0;
 `
 
-const LargeSelectContainer = styled.div.attrs<SelectProps>({})`
+const LargeSelectContainer = styled.div<SelectProps>`
   position: relative;
   width: 100%;
 
@@ -137,7 +137,7 @@ const LargeSelectContainer = styled.div.attrs<SelectProps>({})`
   }
 `
 
-const SmallSelectContainer = styled.div.attrs<SelectProps>({})`
+const SmallSelectContainer = styled.div<SelectProps>`
   position: relative;
 
   select {

src/elements/Separator/Separator.tsx

@@ -10,7 +10,7 @@ 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 = primitives.View<SeparatorProps>`
   border: 1px solid ${color("black10")};
   border-bottom-width: 0;
   ${space};

src/elements/Spinner/Spinner.tsx

@@ -45,7 +45,7 @@ const getSize = (props: SpinnerProps) => {
 }
 
 /** Generic Spinner component */
-export const Spinner = styled.div.attrs<SpinnerProps>({})`
+export const Spinner = styled.div<SpinnerProps>`
   background: black;
   animation: ${spin} 1s infinite linear;
   position: absolute;

src/elements/StackableBorderBox/StackableBorderBox.tsx

@@ -7,9 +7,7 @@ import { BorderBoxProps } from "../BorderBox/BorderBoxBase"
 /**
  * A stackable border box is a BorderBox that shares borders with its siblings.
  */
-export const StackableBorderBox = styledWrapper(BorderBox).attrs<
-  BorderBoxProps
->({})`
+export const StackableBorderBox = styledWrapper(BorderBox)<BorderBoxProps>`
   padding: ${space(3)}px;
   ${styledSpace};
 

src/elements/Tooltip/Tooltip.tsx

@@ -18,9 +18,10 @@ interface TipPosition {
 interface TipProps {
   tipPosition: TipPosition
   width: number
+  className?: string
 }
 
-const Tip = styled(BorderBox)`
+const Tip = styled(BorderBox)<TipProps>`
   background: white;
   border: none;
   bottom: 100%;

src/elements/Typography/Typography.tsx

@@ -94,8 +94,8 @@ export interface TextProps
 }
 
 /** Base Text component for typography */
-export const Text = primitives.Text.attrs<TextProps>({})`
-  ${fontFamilyHelper};
+export const Text = primitives.Text<TextProps>`
+  ${({ fontFamily }) => fontFamily && fontFamilyHelper({ fontFamily })};
   ${fontSize};
   ${lineHeight};
   ${color};