Merge pull request #496 from airbnb/f/text-style-props

add text style proptypes

Author: mathieudutour

src/components/TextStylePropTypes.ts

@@ -1,5 +1,33 @@
-import ViewStylePropTypes from './ViewStylePropTypes';
+import * as PropTypes from 'prop-types';
+import ViewStylePropTypes, { Color } from './ViewStylePropTypes';
 
 export default {
   ...ViewStylePropTypes,
+  fontFamily: PropTypes.string,
+  fontSize: PropTypes.number,
+  fontStyle: PropTypes.oneOf<'normal' | 'italic'>(['normal', 'italic']),
+  fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  textDecoration: PropTypes.oneOf<'none' | 'underline' | 'double' | 'line-through'>([
+    'none',
+    'underline',
+    'double',
+    'line-through',
+  ]),
+  textShadowOpacity: PropTypes.number,
+  textShadowSpread: PropTypes.number,
+  textShadowOffset: PropTypes.shape({ width: PropTypes.number, height: PropTypes.number }),
+  textShadowRadius: PropTypes.number,
+  textShadowColor: Color,
+  textTransform: PropTypes.oneOf<'uppercase' | 'lowercase'>(['uppercase', 'lowercase']),
+  letterSpacing: PropTypes.number,
+  lineHeight: PropTypes.number,
+  textAlign: PropTypes.oneOf<'auto' | 'left' | 'right' | 'center' | 'justify'>([
+    'auto',
+    'left',
+    'right',
+    'center',
+    'justify',
+  ]),
+  paragraphSpacing: PropTypes.number,
+  writingDirection: PropTypes.oneOf<'auto' | 'ltr' | 'rtl'>(['auto', 'ltr', 'rtl']),
 };

src/components/ViewStylePropTypes.ts

@@ -1,10 +1,19 @@
 import * as PropTypes from 'prop-types';
 
-const BorderStyle = PropTypes.oneOf(['solid', 'dotted', 'dashed']);
-const Color = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-const Overflow = PropTypes.oneOf(['visible', 'hidden', 'scroll']);
+export const BorderStyle = PropTypes.oneOf<'solid' | 'dotted' | 'dashed'>([
+  'solid',
+  'dotted',
+  'dashed',
+]);
+export const Color = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+export const Overflow = PropTypes.oneOf<'visible' | 'hidden' | 'scroll'>([
+  'visible',
+  'hidden',
+  'scroll',
+]);
 
 export default {
+  display: PropTypes.oneOf(['flex', 'none']),
   color: Color,
   shadowColor: Color,
   shadowInner: PropTypes.bool,
@@ -39,18 +48,46 @@ export default {
   paddingBottom: PropTypes.number,
   paddingLeft: PropTypes.number,
   paddingRight: PropTypes.number,
-  position: PropTypes.oneOf(['absolute', 'relative']),
-  flexDirection: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
-  flexWrap: PropTypes.oneOf(['wrap', 'nowrap']),
-  justifyContent: PropTypes.oneOf([
+  position: PropTypes.oneOf<'absolute' | 'relative'>(['absolute', 'relative']),
+  flexDirection: PropTypes.oneOf<'row' | 'row-reverse' | 'column' | 'column-reverse'>([
+    'row',
+    'row-reverse',
+    'column',
+    'column-reverse',
+  ]),
+  flexWrap: PropTypes.oneOf<'wrap' | 'nowrap' | 'wrap-reverse'>(['wrap', 'nowrap', 'wrap-reverse']),
+  justifyContent: PropTypes.oneOf<
+    'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'
+  >(['flex-start', 'flex-end', 'center', 'space-between', 'space-around']),
+  alignContent: PropTypes.oneOf<
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'stretch'
+    | 'baseline'
+    | 'auto'
+  >([
     'flex-start',
     'flex-end',
     'center',
     'space-between',
     'space-around',
+    'stretch',
+    'baseline',
+    'auto',
+  ]),
+  alignItems: PropTypes.oneOf<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>([
+    'flex-start',
+    'flex-end',
+    'center',
+    'stretch',
+    'baseline',
   ]),
-  alignItems: PropTypes.oneOf(['flex-start', 'flex-end', 'center', 'stretch']),
-  alignSelf: PropTypes.oneOf(['auto', 'flex-start', 'flex-end', 'center', 'stretch']),
+  alignSelf: PropTypes.oneOf<
+    'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+  >(['auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline']),
   overflow: Overflow,
   overflowX: Overflow,
   overflowY: Overflow,
@@ -60,7 +97,7 @@ export default {
   flexBasis: PropTypes.number,
   aspectRatio: PropTypes.number,
   zIndex: PropTypes.number,
-  backfaceVisibility: PropTypes.oneOf(['visible', 'hidden']),
+  backfaceVisibility: PropTypes.oneOf<'visible' | 'hidden'>(['visible', 'hidden']),
   backgroundColor: Color,
   borderColor: Color,
   borderTopColor: Color,

src/jsonUtils/borders.ts

@@ -1,17 +1,17 @@
 import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
 import { makeColorFromCSS, emptyGradient } from './models';
-import { ViewStyle, LayoutInfo, BorderStyle } from '../types';
+import { ViewStyle, LayoutInfo, BorderStyle, Color } from '../types';
 import same from '../utils/same';
 import { makeVerticalBorder, makeHorizontalBorder } from './shapeLayers';
 import { makeBorderOptions } from './style';
 
 const DEFAULT_BORDER_COLOR = 'transparent';
-const DEFAULT_BORDER_STYLE = 'solid';
+export const DEFAULT_BORDER_STYLE = 'solid';
 
 export const createUniformBorder = (
   width: number,
-  color: string,
-  style: BorderStyle = 'solid',
+  color: Color,
+  style: BorderStyle = DEFAULT_BORDER_STYLE,
   position: FileFormat.BorderPosition = FileFormat.BorderPosition.Center,
   lineCapStyle: FileFormat.LineCapStyle = FileFormat.LineCapStyle.Butt,
   lineJoinStyle: FileFormat.LineJoinStyle = FileFormat.LineJoinStyle.Miter,
@@ -71,14 +71,14 @@ export const createBorders = (
   ) {
     // all sides have same border width
     // in this case, we can do everything with just a single shape.
-    if (borderTopStyle !== undefined) {
+    if (borderTopStyle !== undefined && borderTopWidth !== null) {
       const borderOptions = makeBorderOptions(borderTopStyle, borderTopWidth);
       if (borderOptions && content.style) {
         content.style.borderOptions = borderOptions;
       }
     }
 
-    if (borderTopWidth > 0 && content.style) {
+    if (borderTopWidth && borderTopWidth > 0 && content.style) {
       content.style.borders = createUniformBorder(
         borderTopWidth,
         borderTopColor,
@@ -101,7 +101,7 @@ export const createBorders = (
 
   const layers = [content];
 
-  if (borderTopWidth > 0) {
+  if (borderTopWidth && borderTopWidth > 0) {
     const topBorder = makeHorizontalBorder(0, 0, layout.width, borderTopWidth, borderTopColor);
     topBorder.name = 'Border (top)';
 
@@ -113,7 +113,7 @@ export const createBorders = (
     layers.push(topBorder);
   }
 
-  if (borderRightWidth > 0) {
+  if (borderRightWidth && borderRightWidth > 0) {
     const rightBorder = makeVerticalBorder(
       layout.width - borderRightWidth,
       0,
@@ -131,7 +131,7 @@ export const createBorders = (
     layers.push(rightBorder);
   }
 
-  if (borderBottomWidth > 0) {
+  if (borderBottomWidth && borderBottomWidth > 0) {
     const bottomBorder = makeHorizontalBorder(
       0,
       layout.height - borderBottomWidth,
@@ -149,7 +149,7 @@ export const createBorders = (
     layers.push(bottomBorder);
   }
 
-  if (borderLeftWidth > 0) {
+  if (borderLeftWidth && borderLeftWidth > 0) {
     const leftBorder = makeVerticalBorder(0, 0, layout.height, borderLeftWidth, borderLeftColor);
     leftBorder.name = 'Border (left)';
 

src/jsonUtils/nodeImpl/makeSvgLayer.ts

@@ -41,7 +41,7 @@ function makeLayerFromPathElement(pathElement: any, _parentFrame: FileFormat.Rec
     const borderStyle = createUniformBorder(
       style.strokeWidth * scale,
       style.stroke,
-      'solid',
+      undefined,
       FileFormat.BorderPosition.Center,
       lineCap,
       lineCap,

src/jsonUtils/shapeLayers.ts

@@ -4,7 +4,7 @@ import { generateID, makeRect, makeColorFromCSS, emptyGradient } from './models'
 import { makeStyle } from './style';
 import { Color, ResizeConstraints, ViewStyle } from '../types';
 
-type Radii = number[];
+type Radii = (number | null)[];
 
 export const makeHorizontalPath = (): Pick<FileFormat.ShapePath, 'isClosed' | 'points'> => ({
   isClosed: false,
@@ -67,7 +67,7 @@ export const makeRectPath = (
     points: [
       {
         _class: 'curvePoint',
-        cornerRadius: r0,
+        cornerRadius: r0 || 0,
         curveFrom: '{0, 0}',
         curveMode: FileFormat.CurveMode.Straight,
         curveTo: '{0, 0}',
@@ -77,7 +77,7 @@ export const makeRectPath = (
       },
       {
         _class: 'curvePoint',
-        cornerRadius: r1,
+        cornerRadius: r1 || 0,
         curveFrom: '{1, 0}',
         curveMode: FileFormat.CurveMode.Straight,
         curveTo: '{1, 0}',
@@ -87,7 +87,7 @@ export const makeRectPath = (
       },
       {
         _class: 'curvePoint',
-        cornerRadius: r2,
+        cornerRadius: r2 || 0,
         curveFrom: '{1, 1}',
         curveMode: FileFormat.CurveMode.Straight,
         curveTo: '{1, 1}',
@@ -97,7 +97,7 @@ export const makeRectPath = (
       },
       {
         _class: 'curvePoint',
-        cornerRadius: r3,
+        cornerRadius: r3 || 0,
         curveFrom: '{0, 1}',
         curveMode: FileFormat.CurveMode.Straight,
         curveTo: '{0, 1}',

src/jsonUtils/sketchImpl/createStringMeasurer.ts

@@ -50,11 +50,11 @@ function createStringAttributes(textStyles: TextStyle): Object {
   const color = makeColorFromCSS(textStyles.color || 'black');
   attribs.MSAttributedStringColorAttribute = color;
 
-  if (textStyles.letterSpacing !== undefined) {
+  if (textStyles.letterSpacing !== undefined && textStyles.letterSpacing !== null) {
     attribs.NSKern = textStyles.letterSpacing;
   }
 
-  if (textStyles.textTransform !== undefined) {
+  if (textStyles.textTransform !== undefined && textStyles.textTransform !== null) {
     attribs.MSAttributedStringTextTransformAttribute = TEXT_TRANSFORM[textStyles.textTransform] * 1;
   }
 

src/jsonUtils/style.ts

@@ -1,7 +1,8 @@
 import { FileFormat1 as FileFormat } from '@sketch-hq/sketch-file-format-ts';
 import { makeColorFromCSS, makeColorFill } from './models';
-import { ViewStyle, TextStyle } from '../types';
+import { ViewStyle, TextStyle, BorderStyle } from '../types';
 import hasAnyDefined from '../utils/hasAnyDefined';
+import { DEFAULT_BORDER_STYLE } from './borders';
 
 const DEFAULT_SHADOW_COLOR = '#000';
 
@@ -18,7 +19,7 @@ const SHADOW_STYLES = [
   'textShadowSpread',
 ];
 
-const makeDashPattern = (style: 'dashed' | 'dotted' | 'solid', width: number): number[] => {
+const makeDashPattern = (style: BorderStyle, width: number): number[] => {
   switch (style) {
     case 'dashed':
       return [width * 3, width * 3];
@@ -32,7 +33,7 @@ const makeDashPattern = (style: 'dashed' | 'dotted' | 'solid', width: number): n
 };
 
 export const makeBorderOptions = (
-  style: 'dashed' | 'dotted' | 'solid',
+  style: BorderStyle,
   width: number,
   lineCapStyle: FileFormat.LineCapStyle = FileFormat.LineCapStyle.Butt,
   lineJoinStyle: FileFormat.LineJoinStyle = FileFormat.LineJoinStyle.Miter,
@@ -48,30 +49,43 @@ export const makeShadow = (
   style: ViewStyle | TextStyle,
 ): FileFormat.Shadow | FileFormat.InnerShadow => {
   const opacity =
-    style.shadowOpacity !== undefined
+    style.shadowOpacity !== undefined && style.shadowOpacity !== null
       ? style.shadowOpacity
-      : 'textShadowOpacity' in style && style.textShadowOpacity !== undefined
+      : 'textShadowOpacity' in style &&
+        style.textShadowOpacity !== undefined &&
+        style.textShadowOpacity !== null
       ? style.textShadowOpacity
       : 1;
   const color =
     style.shadowColor ||
     ('textShadowColor' in style && style.textShadowColor) ||
     DEFAULT_SHADOW_COLOR;
   const radius =
-    style.shadowRadius !== undefined
+    style.shadowRadius !== undefined && style.shadowRadius !== null
       ? style.shadowRadius
-      : 'textShadowRadius' in style && style.textShadowRadius !== undefined
+      : 'textShadowRadius' in style &&
+        style.textShadowRadius !== undefined &&
+        style.textShadowRadius !== null
       ? style.textShadowRadius
       : 1;
   const spread =
-    style.shadowSpread !== undefined
+    style.shadowSpread !== undefined && style.shadowSpread !== null
       ? style.shadowSpread
-      : 'textShadowSpread' in style && style.textShadowSpread !== undefined
+      : 'textShadowSpread' in style &&
+        style.textShadowSpread !== undefined &&
+        style.textShadowSpread !== null
       ? style.textShadowSpread
       : 1;
-  const { width: offsetX = 0, height: offsetY = 0 } =
+  let { width: offsetX, height: offsetY } =
     style.shadowOffset || ('textShadowOffset' in style && style.textShadowOffset) || {};
 
+  if (!offsetX) {
+    offsetX = 0;
+  }
+  if (!offsetY) {
+    offsetY = 0;
+  }
+
   const commonProps = {
     isEnabled: true,
     blurRadius: radius,
@@ -110,7 +124,7 @@ export const makeStyle = (
     miterLimit: 10,
     innerShadows: [],
     shadows: [],
-    borderOptions: makeBorderOptions('solid', 0, 0, 0),
+    borderOptions: makeBorderOptions(DEFAULT_BORDER_STYLE, 0, 0, 0),
     startMarkerType: FileFormat.MarkerType.OpenArrow,
     endMarkerType: FileFormat.MarkerType.OpenArrow,
     windingRule: FileFormat.WindingRule.EvenOdd,