From 511b842b129a9c97c917f5991acfbf1927494b7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sion333@gmail.com>
Date: Wed, 26 Jun 2024 09:14:58 +0200
Subject: [PATCH] Additional layout properties (#190)

* additional layout properties

* changeset
---
 .changeset/five-teachers-cheat.md             |  5 ++++
 .../transformers/partials/transformLayout.ts  |  5 ++++
 plugin-src/translators/translateLayout.ts     | 24 +++++++++++++++++++
 ui-src/lib/types/shapes/layout.ts             |  4 +++-
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/five-teachers-cheat.md

diff --git a/.changeset/five-teachers-cheat.md b/.changeset/five-teachers-cheat.md
new file mode 100644
index 0000000..69a36c6
--- /dev/null
+++ b/.changeset/five-teachers-cheat.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Add additional layout properties
diff --git a/plugin-src/transformers/partials/transformLayout.ts b/plugin-src/transformers/partials/transformLayout.ts
index dde5824..3b16ce2 100644
--- a/plugin-src/transformers/partials/transformLayout.ts
+++ b/plugin-src/transformers/partials/transformLayout.ts
@@ -3,9 +3,11 @@ import {
   translateLayoutAlignItems,
   translateLayoutFlexDir,
   translateLayoutGap,
+  translateLayoutItemAlignSelf,
   translateLayoutJustifyContent,
   translateLayoutJustifyItems,
   translateLayoutPadding,
+  translateLayoutPaddingType,
   translateLayoutSizing,
   translateLayoutWrapType
 } from '@plugin/translators';
@@ -23,6 +25,7 @@ export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
     ),
     layoutWrapType: translateLayoutWrapType(node.layoutWrap),
     layoutPadding: translateLayoutPadding(node),
+    layoutPaddingType: translateLayoutPaddingType(node),
     layoutJustifyContent: translateLayoutJustifyContent(node),
     layoutJustifyItems: translateLayoutJustifyItems(node),
     layoutAlignContent: translateLayoutAlignContent(node),
@@ -37,6 +40,7 @@ export const transformLayoutAttributes = (
   LayoutChildAttributes,
   | 'layoutItemH-Sizing'
   | 'layoutItemV-Sizing'
+  | 'layoutItemAlignSelf'
   | 'layoutItemAbsolute'
   | 'layoutItemMaxH'
   | 'layoutItemMinH'
@@ -46,6 +50,7 @@ export const transformLayoutAttributes = (
   return {
     'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal, isFrame),
     'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical, isFrame),
+    'layoutItemAlignSelf': translateLayoutItemAlignSelf(node.layoutAlign),
     'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE',
     'layoutItemMaxH': node.maxHeight ?? undefined,
     'layoutItemMinH': node.minHeight ?? undefined,
diff --git a/plugin-src/translators/translateLayout.ts b/plugin-src/translators/translateLayout.ts
index 1bb73a4..ac9ddc3 100644
--- a/plugin-src/translators/translateLayout.ts
+++ b/plugin-src/translators/translateLayout.ts
@@ -1,6 +1,7 @@
 import {
   JustifyAlignContent,
   JustifyAlignItems,
+  LayoutAlignSelf,
   LayoutFlexDir,
   LayoutGap,
   LayoutPadding,
@@ -14,6 +15,8 @@ type FigmaWrap = 'NO_WRAP' | 'WRAP';
 
 type FigmaLayoutSizing = 'FIXED' | 'HUG' | 'FILL';
 
+type FigmaLayoutAlign = 'MIN' | 'CENTER' | 'MAX' | 'STRETCH' | 'INHERIT';
+
 export const translateLayoutFlexDir = (layoutMode: FigmaLayoutMode): LayoutFlexDir | undefined => {
   switch (layoutMode) {
     case 'HORIZONTAL':
@@ -61,6 +64,14 @@ export const translateLayoutPadding = (node: BaseFrameMixin): LayoutPadding => {
   };
 };
 
+export const translateLayoutPaddingType = (node: BaseFrameMixin): 'simple' | 'multiple' => {
+  if (node.paddingTop === node.paddingBottom && node.paddingRight === node.paddingLeft) {
+    return 'simple';
+  }
+
+  return 'multiple';
+};
+
 export const translateLayoutJustifyContent = (node: BaseFrameMixin): JustifyAlignContent => {
   switch (node.primaryAxisAlignItems) {
     case 'MIN':
@@ -128,3 +139,16 @@ export const translateLayoutSizing = (
       return isFrame ? 'fix' : 'fill'; // @TODO: Penpot does not handle fill in frames as figma does
   }
 };
+
+export const translateLayoutItemAlignSelf = (align: FigmaLayoutAlign): LayoutAlignSelf => {
+  switch (align) {
+    case 'MIN':
+      return 'start';
+    case 'CENTER':
+      return 'center';
+    case 'MAX':
+      return 'end';
+    default:
+      return 'stretch';
+  }
+};
diff --git a/ui-src/lib/types/shapes/layout.ts b/ui-src/lib/types/shapes/layout.ts
index ee4f6c7..8ddce18 100644
--- a/ui-src/lib/types/shapes/layout.ts
+++ b/ui-src/lib/types/shapes/layout.ts
@@ -2,6 +2,8 @@ import { Uuid } from '@ui/lib/types/utils/uuid';
 
 export type LayoutSizing = 'fill' | 'fix' | 'auto';
 
+export type LayoutAlignSelf = 'start' | 'end' | 'center' | 'stretch';
+
 export type LayoutChildAttributes = {
   'layoutItemMarginType'?: 'simple' | 'multiple';
   'layoutItemMargin'?: {
@@ -16,7 +18,7 @@ export type LayoutChildAttributes = {
   'layoutItemMinW'?: number;
   'layoutItemH-Sizing'?: LayoutSizing;
   'layoutItemV-Sizing'?: LayoutSizing;
-  'layoutItemAlignSelf'?: 'start' | 'end' | 'center' | 'stretch';
+  'layoutItemAlignSelf'?: LayoutAlignSelf;
   'layoutItemAbsolute'?: boolean;
   'layoutItemZIndex'?: number;
 };