How to use @sketch-hq/sketch-file-format-ts - 10 common examples

name,
  nameIsFixed: false,
  resizingConstraint: makeResizeConstraint(resizingConstraint),
  resizingType: FileFormat.ResizeType.Stretch,
  rotation: 0,
  shouldBreakMaskChain: false,
  attributedString: makeAttributedString(textNodes),
  style: makeTextStyle((textNodes[0] || { textStyles: {} }).textStyles, shadows),
  automaticallyDrawOnUnderlyingPath: false,
  dontSynchroniseWithSymbol: false,
  // NOTE(akp): I haven't fully figured out the meaning of glyphBounds
  glyphBounds: '',
  // glyphBounds: '{{0, 0}, {116, 17}}',
  lineSpacingBehaviour: FileFormat.LineSpacingBehaviour.ConsistentBaseline,
  textBehaviour: FileFormat.TextBehaviour.Fixed,
  booleanOperation: FileFormat.BooleanOperation.NA,
  exportOptions: {
    _class: 'exportOptions',
    exportFormats: [],
    includedLayerIds: [],
    layerOptions: 0,
    shouldTrim: false,
  },
  isFixedToViewport: false,
});

const makeTextLayer = (
  frame: FileFormat.Rect,
  name: string,
  textNodes: TextNode[],
  _style: ViewStyle,
  resizingConstraint?: ResizeConstraints,
  shadows?: ViewStyle[],
): FileFormat.Text => ({
  _class: 'text',
  do_objectID: generateID(`text:${name}-${textNodes.map(node => node.content).join('')}`),
  frame,
  isFlippedHorizontal: false,
  isFlippedVertical: false,
  isLocked: false,
  isVisible: true,
  layerListExpandedType: FileFormat.LayerListExpanded.Undecided,
  name,
  nameIsFixed: false,
  resizingConstraint: makeResizeConstraint(resizingConstraint),
  resizingType: FileFormat.ResizeType.Stretch,
  rotation: 0,
  shouldBreakMaskChain: false,
  attributedString: makeAttributedString(textNodes),
  style: makeTextStyle((textNodes[0] || { textStyles: {} }).textStyles, shadows),
  automaticallyDrawOnUnderlyingPath: false,
  dontSynchroniseWithSymbol: false,
  // NOTE(akp): I haven't fully figured out the meaning of glyphBounds
  glyphBounds: '',
  // glyphBounds: '{{0, 0}, {116, 17}}',
  lineSpacingBehaviour: FileFormat.LineSpacingBehaviour.ConsistentBaseline,
  textBehaviour: FileFormat.TextBehaviour.Fixed,
  booleanOperation: FileFormat.BooleanOperation.NA,

_style: ViewStyle,
  resizingConstraint?: ResizeConstraints,
  shadows?: ViewStyle[],
): FileFormat.Text => ({
  _class: 'text',
  do_objectID: generateID(`text:${name}-${textNodes.map(node => node.content).join('')}`),
  frame,
  isFlippedHorizontal: false,
  isFlippedVertical: false,
  isLocked: false,
  isVisible: true,
  layerListExpandedType: FileFormat.LayerListExpanded.Undecided,
  name,
  nameIsFixed: false,
  resizingConstraint: makeResizeConstraint(resizingConstraint),
  resizingType: FileFormat.ResizeType.Stretch,
  rotation: 0,
  shouldBreakMaskChain: false,
  attributedString: makeAttributedString(textNodes),
  style: makeTextStyle((textNodes[0] || { textStyles: {} }).textStyles, shadows),
  automaticallyDrawOnUnderlyingPath: false,
  dontSynchroniseWithSymbol: false,
  // NOTE(akp): I haven't fully figured out the meaning of glyphBounds
  glyphBounds: '',
  // glyphBounds: '{{0, 0}, {116, 17}}',
  lineSpacingBehaviour: FileFormat.LineSpacingBehaviour.ConsistentBaseline,
  textBehaviour: FileFormat.TextBehaviour.Fixed,
  booleanOperation: FileFormat.BooleanOperation.NA,
  exportOptions: {
    _class: 'exportOptions',
    exportFormats: [],
    includedLayerIds: [],

if (typeof json.textStyle.encodedAttributes.kerning !== 'undefined') {
      style.letterSpacing = json.textStyle.encodedAttributes.kerning;
    }

    const color = json.textStyle.encodedAttributes.MSAttributedStringColorAttribute;
    style.color = `#${Math.round(color.red * 255).toString(16)}${Math.round(
      color.green * 255,
    ).toString(16)}${Math.round(color.blue * 255).toString(16)}`;

    if (color.alpha !== 1) {
      style.color += `${Math.round(color.alpha * 255).toString(16)}`;
    }

    if (
      json.textStyle.encodedAttributes.MSAttributedStringTextTransformAttribute !==
      FileFormat.TextTransform.None
    ) {
      style.textTransform =
        json.textStyle.encodedAttributes.MSAttributedStringTextTransformAttribute ===
        FileFormat.TextTransform.Lowercase
          ? 'lowercase'
          : 'uppercase';
    }

    const font = json.textStyle.encodedAttributes.MSAttributedStringFontAttribute;

    style.fontSize = font.attributes.size;

    // we are cheating here, setting the name of the font instead of parsing
    // the family, weight and traits. react-sketchapp will handle it nevertheless
    style.fontFamily = font.attributes.name;
  }

justify: FileFormat.TextHorizontalAlignment.Justified,
};

const TEXT_ALIGN_REVERSE = {
  [FileFormat.TextHorizontalAlignment.Right]: 'right',
  [FileFormat.TextHorizontalAlignment.Centered]: 'center',
  [FileFormat.TextHorizontalAlignment.Justified]: 'justify',
};

export const TEXT_DECORATION_LINETHROUGH = {
  none: 0,
  'line-through': 1,
};

export const TEXT_TRANSFORM = {
  uppercase: FileFormat.TextTransform.Uppercase,
  lowercase: FileFormat.TextTransform.Lowercase,
  initial: FileFormat.TextTransform.None,
  inherit: FileFormat.TextTransform.None,
  none: FileFormat.TextTransform.None,
  capitalize: FileFormat.TextTransform.None,
};

// this borrows heavily from react-native's RCTFont class
// thanks y'all
// https://github.com/facebook/react-native/blob/master/React/Views/RCTFont.mm

export const FONT_STYLES = {
  normal: false,
  italic: true,
  oblique: true,
};

isVisible: true,
  layerListExpandedType: FileFormat.LayerListExpanded.Undecided,
  name,
  nameIsFixed: false,
  resizingConstraint: makeResizeConstraint(resizingConstraint),
  resizingType: FileFormat.ResizeType.Stretch,
  rotation: 0,
  shouldBreakMaskChain: false,
  attributedString: makeAttributedString(textNodes),
  style: makeTextStyle((textNodes[0] || { textStyles: {} }).textStyles, shadows),
  automaticallyDrawOnUnderlyingPath: false,
  dontSynchroniseWithSymbol: false,
  // NOTE(akp): I haven't fully figured out the meaning of glyphBounds
  glyphBounds: '',
  // glyphBounds: '{{0, 0}, {116, 17}}',
  lineSpacingBehaviour: FileFormat.LineSpacingBehaviour.ConsistentBaseline,
  textBehaviour: FileFormat.TextBehaviour.Fixed,
  booleanOperation: FileFormat.BooleanOperation.NA,
  exportOptions: {
    _class: 'exportOptions',
    exportFormats: [],
    includedLayerIds: [],
    layerOptions: 0,
    shouldTrim: false,
  },
  isFixedToViewport: false,
});

layerListExpandedType: FileFormat.LayerListExpanded.Undecided,
  name,
  nameIsFixed: false,
  resizingConstraint: makeResizeConstraint(resizingConstraint),
  resizingType: FileFormat.ResizeType.Stretch,
  rotation: 0,
  shouldBreakMaskChain: false,
  attributedString: makeAttributedString(textNodes),
  style: makeTextStyle((textNodes[0] || { textStyles: {} }).textStyles, shadows),
  automaticallyDrawOnUnderlyingPath: false,
  dontSynchroniseWithSymbol: false,
  // NOTE(akp): I haven't fully figured out the meaning of glyphBounds
  glyphBounds: '',
  // glyphBounds: '{{0, 0}, {116, 17}}',
  lineSpacingBehaviour: FileFormat.LineSpacingBehaviour.ConsistentBaseline,
  textBehaviour: FileFormat.TextBehaviour.Fixed,
  booleanOperation: FileFormat.BooleanOperation.NA,
  exportOptions: {
    _class: 'exportOptions',
    exportFormats: [],
    includedLayerIds: [],
    layerOptions: 0,
    shouldTrim: false,
  },
  isFixedToViewport: false,
});

): FileFormat.ShapePath => ({
  _class: 'shapePath',
  frame,
  do_objectID: generateID(),
  isFlippedHorizontal: false,
  isFlippedVertical: false,
  isLocked: false,
  isVisible: true,
  layerListExpandedType: FileFormat.LayerListExpanded.Undecided,
  name: 'Path',
  nameIsFixed: false,
  resizingConstraint: makeResizeConstraint(resizingConstraint),
  resizingType: FileFormat.ResizeType.Stretch,
  rotation: 0,
  shouldBreakMaskChain: false,
  booleanOperation: FileFormat.BooleanOperation.NA,
  edited: false,
  ...path,
  isFixedToViewport: false,
  pointRadiusBehaviour: FileFormat.PointsRadiusBehaviour.Rounded,
  exportOptions: {
    _class: 'exportOptions',
    exportFormats: [],
    includedLayerIds: [],
    layerOptions: 0,
    shouldTrim: false,
  },
});

hasClickThrough: false,
  layers,
  clippingMaskMode: 0,
  hasClippingMask: false,
  windingRule: FileFormat.WindingRule.EvenOdd,
  isFixedToViewport: false,
  exportOptions: {
    _class: 'exportOptions',
    exportFormats: [],
    includedLayerIds: [],
    layerOptions: 0,
    shouldTrim: false,
  },
  isFlippedHorizontal: false,
  isFlippedVertical: false,
  booleanOperation: FileFormat.BooleanOperation.NA,
  layerListExpandedType: FileFormat.LayerListExpanded.Undecided,
});

frame: FileFormat.Rect,
  symbolID: string,
  name: string,
  resizingConstraint?: ResizeConstraints,
): FileFormat.SymbolInstance => ({
  _class: 'symbolInstance',
  horizontalSpacing: 0,
  verticalSpacing: 0,
  nameIsFixed: true,
  isVisible: true,
  do_objectID: generateID(`symbolInstance:${name}:${symbolID}`),
  resizingConstraint: makeResizeConstraint(resizingConstraint),
  name,
  symbolID,
  frame,
  booleanOperation: FileFormat.BooleanOperation.NA,
  isLocked: false,
  isFixedToViewport: false,
  isFlippedHorizontal: false,
  isFlippedVertical: false,
  layerListExpandedType: FileFormat.LayerListExpanded.Undecided,
  resizingType: FileFormat.ResizeType.Stretch,
  rotation: 0,
  shouldBreakMaskChain: false,
  overrideValues: [],
  scale: 1,
  exportOptions: {
    _class: 'exportOptions',
    exportFormats: [],
    includedLayerIds: [],
    layerOptions: 0,
    shouldTrim: false,