From a5a2eea4a67f2bba4ec67f9df8c1941aef0b2fc3 Mon Sep 17 00:00:00 2001 From: Christopher Pappas Date: Wed, 3 Oct 2018 15:20:42 -0700 Subject: [PATCH 1/2] [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 dadff8fef..fe16df1cd 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({})` +export const Box: StyledComponentClass = 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({})` +export const Flex: StyledComponentClass = 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({})` +export const Separator: StyledComponentClass< + any, + any, + any +> = primitives.View.attrs({})` border: 1px solid ${color("black10")}; border-bottom-width: 0; ${space}; From b99aeba6e1900a62f4e98215143279425d90d0d7 Mon Sep 17 00:00:00 2001 From: Daniel Ramirez Date: Tue, 6 Nov 2018 15:25:49 -0500 Subject: [PATCH 2/2] [FIX tooling] Remove any casts, add ios missing ios stub components --- src/elements/Avatar/Avatar.ios.tsx | 0 src/elements/Banner/Banner.ios.tsx | 0 src/elements/BorderBox/BorderBox.tsx | 2 +- src/elements/BorderBox/BorderBoxBase.tsx | 2 +- src/elements/Box/Box.tsx | 5 +--- src/elements/Button/Button.tsx | 2 +- src/elements/Checkbox/Checkbox.tsx | 22 ++++++++++++++---- src/elements/Colors/Colors.tsx | 2 +- src/elements/Flex/Flex.tsx | 5 +--- src/elements/Image/Image.tsx | 4 ++-- src/elements/Radio/Radio.tsx | 23 +++++++++++-------- src/elements/Select/Select.tsx | 4 ++-- src/elements/Separator/Separator.tsx | 7 +----- src/elements/Spinner/Spinner.tsx | 2 +- .../StackableBorderBox/StackableBorderBox.tsx | 4 +--- src/elements/Tooltip/Tooltip.tsx | 3 ++- src/elements/Typography/Typography.tsx | 4 ++-- 17 files changed, 49 insertions(+), 42 deletions(-) create mode 100644 src/elements/Avatar/Avatar.ios.tsx create mode 100644 src/elements/Banner/Banner.ios.tsx diff --git a/src/elements/Avatar/Avatar.ios.tsx b/src/elements/Avatar/Avatar.ios.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/elements/Banner/Banner.ios.tsx b/src/elements/Banner/Banner.ios.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/elements/BorderBox/BorderBox.tsx b/src/elements/BorderBox/BorderBox.tsx index 6d7034bd9..766a9f14a 100644 --- a/src/elements/BorderBox/BorderBox.tsx +++ b/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({})` +export const BorderBox = styledWrapper(BorderBoxBase)` ${({ hover }) => hover && css` diff --git a/src/elements/BorderBox/BorderBoxBase.tsx b/src/elements/BorderBox/BorderBoxBase.tsx index 67fb5b155..aab01f5ff 100644 --- a/src/elements/BorderBox/BorderBoxBase.tsx +++ b/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({})` +export const BorderBoxBase = styledWrapper(Flex)` border: 1px solid ${color("black10")}; border-radius: 2px; padding: ${space(2)}px; diff --git a/src/elements/Box/Box.tsx b/src/elements/Box/Box.tsx index dfcc1b66b..15c2410d2 100644 --- a/src/elements/Box/Box.tsx +++ b/src/elements/Box/Box.tsx @@ -2,7 +2,6 @@ import React from "react" import { styled as primitives } from "../../platform/primitives" -import { StyledComponentClass } from "styled-components" import { background, BackgroundProps, @@ -57,9 +56,7 @@ export interface BoxProps * Box is just a `View` or `div` (depending on the platform) with common styled-systems * hooks. */ -export const Box: StyledComponentClass = primitives.View.attrs< - BoxProps ->({})` +export const Box = primitives.View` ${background}; ${bottom}; ${display}; diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx index 51d05bf3b..a71663f6e 100644 --- a/src/elements/Button/Button.tsx +++ b/src/elements/Button/Button.tsx @@ -235,7 +235,7 @@ export class ButtonBase extends Component { } } -const Container = styled.button.attrs({})` +const Container = styled.button` cursor: pointer; position: relative; white-space: nowrap; diff --git a/src/elements/Checkbox/Checkbox.tsx b/src/elements/Checkbox/Checkbox.tsx index c8d6ad124..897d9d44b 100644 --- a/src/elements/Checkbox/Checkbox.tsx +++ b/src/elements/Checkbox/Checkbox.tsx @@ -86,14 +86,27 @@ export class Checkbox extends React.Component { } } -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({})` +const CheckboxButton = styled.div` ${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({})` +const Container = styled(Flex)` user-select: none; cursor: ${({ disabled }) => !disabled && "pointer"}; transition: color 0.25s; diff --git a/src/elements/Colors/Colors.tsx b/src/elements/Colors/Colors.tsx index 544f2f8b4..87f08d589 100644 --- a/src/elements/Colors/Colors.tsx +++ b/src/elements/Colors/Colors.tsx @@ -7,7 +7,7 @@ import { Display } from "../Typography" export interface ColorBlockProps extends ColorProps, BackgroundProps {} -const ColorBlock = styled.div.attrs({})` +const ColorBlock = styled.div` width: 100px; height: 100px; padding: 5px; diff --git a/src/elements/Flex/Flex.tsx b/src/elements/Flex/Flex.tsx index 79ea18371..eab28d3bb 100644 --- a/src/elements/Flex/Flex.tsx +++ b/src/elements/Flex/Flex.tsx @@ -34,7 +34,6 @@ import { // @ts-ignore import { ClassAttributes, HTMLAttributes } from "react" -import { StyledComponentClass } from "styled-components" const flexGrow = style({ prop: "flexGrow", @@ -61,9 +60,7 @@ export interface FlexProps /** * A utility component that encapsulates flexbox behavior */ -export const Flex: StyledComponentClass = primitives.View.attrs< - FlexProps ->({})` +export const Flex = primitives.View` display: flex; ${alignContent}; ${alignItems}; diff --git a/src/elements/Image/Image.tsx b/src/elements/Image/Image.tsx index 1837f024e..c7daeeb5f 100644 --- a/src/elements/Image/Image.tsx +++ b/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({})` +export const Image = styled.img` ${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({})` +export const ResponsiveImage = styled.div` background: url(${props => props.src}); background-size: contain; background-repeat: no-repeat; diff --git a/src/elements/Radio/Radio.tsx b/src/elements/Radio/Radio.tsx index 90ea9fc3f..13ac94dca 100644 --- a/src/elements/Radio/Radio.tsx +++ b/src/elements/Radio/Radio.tsx @@ -94,9 +94,7 @@ export const Radio: React.SFC = props => { /** * A radio button with a border */ -export const BorderedRadio = styled(Radio).attrs({ - p: 2, -})` +export const BorderedRadio = styled(Radio)` 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({})` +const Container = styled(Flex)` 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({})` +const RadioButton = styled.div` ${borders}; ${styledSpace}; background-color: ${radioBackgroundColor}; diff --git a/src/elements/Select/Select.tsx b/src/elements/Select/Select.tsx index 8838c3a79..5b817f95a 100644 --- a/src/elements/Select/Select.tsx +++ b/src/elements/Select/Select.tsx @@ -101,7 +101,7 @@ const caretArrow = css` height: 0; ` -const LargeSelectContainer = styled.div.attrs({})` +const LargeSelectContainer = styled.div` position: relative; width: 100%; @@ -137,7 +137,7 @@ const LargeSelectContainer = styled.div.attrs({})` } ` -const SmallSelectContainer = styled.div.attrs({})` +const SmallSelectContainer = styled.div` position: relative; select { diff --git a/src/elements/Separator/Separator.tsx b/src/elements/Separator/Separator.tsx index a3773bb5a..0dd45ae25 100644 --- a/src/elements/Separator/Separator.tsx +++ b/src/elements/Separator/Separator.tsx @@ -1,7 +1,6 @@ // @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" @@ -11,11 +10,7 @@ export interface SeparatorProps extends SpaceProps, WidthProps {} /** * A horizontal divider whose width and spacing can be adjusted */ -export const Separator: StyledComponentClass< - any, - any, - any -> = primitives.View.attrs({})` +export const Separator = primitives.View` border: 1px solid ${color("black10")}; border-bottom-width: 0; ${space}; diff --git a/src/elements/Spinner/Spinner.tsx b/src/elements/Spinner/Spinner.tsx index 322b8a9d9..3b7001110 100644 --- a/src/elements/Spinner/Spinner.tsx +++ b/src/elements/Spinner/Spinner.tsx @@ -45,7 +45,7 @@ const getSize = (props: SpinnerProps) => { } /** Generic Spinner component */ -export const Spinner = styled.div.attrs({})` +export const Spinner = styled.div` background: black; animation: ${spin} 1s infinite linear; position: absolute; diff --git a/src/elements/StackableBorderBox/StackableBorderBox.tsx b/src/elements/StackableBorderBox/StackableBorderBox.tsx index b2b76021a..03fe271fd 100644 --- a/src/elements/StackableBorderBox/StackableBorderBox.tsx +++ b/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)` padding: ${space(3)}px; ${styledSpace}; diff --git a/src/elements/Tooltip/Tooltip.tsx b/src/elements/Tooltip/Tooltip.tsx index b3cd6f62e..9145b1a1d 100644 --- a/src/elements/Tooltip/Tooltip.tsx +++ b/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)` background: white; border: none; bottom: 100%; diff --git a/src/elements/Typography/Typography.tsx b/src/elements/Typography/Typography.tsx index 351fbde83..09c247dc8 100644 --- a/src/elements/Typography/Typography.tsx +++ b/src/elements/Typography/Typography.tsx @@ -94,8 +94,8 @@ export interface TextProps } /** Base Text component for typography */ -export const Text = primitives.Text.attrs({})` - ${fontFamilyHelper}; +export const Text = primitives.Text` + ${({ fontFamily }) => fontFamily && fontFamilyHelper({ fontFamily })}; ${fontSize}; ${lineHeight}; ${color};