Update Types to 2.0.2 (#48)

* updated types

* minor fixes

* minor fixes

ui-src/lib/types/bool/boolShape.d.ts

@@ -1,6 +1,10 @@
+import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
 import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
 import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
 
 import { BoolAttributes } from './boolAttributes';
 
-export type BoolShape = ShapeBaseAttributes & ShapeAttributes & BoolAttributes;
+export type BoolShape = ShapeBaseAttributes &
+  ShapeAttributes &
+  BoolAttributes &
+  LayoutChildAttributes;

ui-src/lib/types/frame/frameAttributes.ts

@@ -1,3 +1,4 @@
+import { Stroke } from '@ui/lib/types/utils/stroke';
 import { Uuid } from '@ui/lib/types/utils/uuid';
 
 import { Fill } from '../utils/fill';
@@ -7,9 +8,9 @@ export const FRAME_TYPE: unique symbol = Symbol.for('frame');
 export type FrameAttributes = {
   type: 'frame' | typeof FRAME_TYPE;
   shapes?: Uuid[];
-  fileThumbnail?: boolean;
   hideFillOnExport?: boolean;
   showContent?: boolean;
   hideInViewer?: boolean;
   fills?: Fill[];
+  strokes?: Stroke[];
 };

ui-src/lib/types/frame/frameShape.d.ts

@@ -1,7 +1,14 @@
+import { LayoutAttributes } from '@ui/lib/types/layout/layoutAttributes';
+import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
 import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
 import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
 import { Children } from '@ui/lib/types/utils/children';
 
 import { FrameAttributes } from './frameAttributes';
 
-export type FrameShape = ShapeBaseAttributes & ShapeGeomAttributes & FrameAttributes & Children;
+export type FrameShape = ShapeBaseAttributes &
+  ShapeGeomAttributes &
+  FrameAttributes &
+  LayoutAttributes &
+  LayoutChildAttributes &
+  Children;

ui-src/lib/types/image/imageAttributes.ts

@@ -4,7 +4,7 @@ export const IMAGE_TYPE: unique symbol = Symbol.for('image');
 
 export type ImageAttributes = {
   type: 'image' | typeof IMAGE_TYPE;
-  dataUri?: string;
+  dataUri?: string; //@TODO: check how this works because it's not defined in penpot, it's just used in the export
   metadata: {
     width: number;
     height: number;

ui-src/lib/types/image/imageShape.d.ts

@@ -1,3 +1,4 @@
+import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
 import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
 import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
 import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
@@ -7,4 +8,5 @@ import { ImageAttributes } from './imageAttributes';
 export type ImageShape = ShapeBaseAttributes &
   ShapeGeomAttributes &
   ShapeAttributes &
-  ImageAttributes;
+  ImageAttributes &
+  LayoutChildAttributes;

ui-src/lib/types/layout/gridCell.d.ts

@@ -0,0 +1,14 @@
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+export type GridCell = {
+  id?: Uuid;
+  areaName?: string;
+  row: number;
+  rowSpan: number;
+  column: number;
+  columnSpan: number;
+  position?: 'auto' | 'manual' | 'area';
+  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+  justifySelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
+  shapes?: Uuid[];
+};

ui-src/lib/types/layout/gridTrack.d.ts

@@ -0,0 +1,4 @@
+export type GridTrack = {
+  type: 'percent' | 'flex' | 'auto' | 'fixed';
+  value?: number;
+};

ui-src/lib/types/layout/layoutAttributes.d.ts

@@ -0,0 +1,46 @@
+import { GridCell } from '@ui/lib/types/layout/gridCell';
+import { GridTrack } from '@ui/lib/types/layout/gridTrack';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+type JustifyAlignContent =
+  | 'start'
+  | 'center'
+  | 'end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+  | 'stretch';
+
+type JustifyAlignItems = 'start' | 'end' | 'center' | 'stretch';
+
+export type LayoutAttributes = {
+  layout?: 'flex' | 'grid';
+  layoutFlexDir?:
+    | 'row'
+    | 'reverse-row'
+    | 'row-reverse'
+    | 'column'
+    | 'reverse-column'
+    | 'column-reverse';
+  layoutGap?: {
+    rowGap?: number;
+    columnGap?: number;
+  };
+  layoutGapType?: 'simple' | 'multiple';
+  layoutWrapType?: 'wrap' | 'nowrap' | 'no-wrap';
+  layoutPaddingType?: 'simple' | 'multiple';
+  layoutPadding?: {
+    p1?: number;
+    p2?: number;
+    p3?: number;
+    p4?: number;
+  };
+  layoutJustifyContent?: JustifyAlignContent;
+  layoutJustifyItems?: JustifyAlignItems;
+  layoutAlignContent?: JustifyAlignContent;
+  layoutAlignItems?: JustifyAlignItems;
+  layoutGridDir?: 'row' | 'column';
+  layoutGridRows?: GridTrack[];
+  layoutGridColumns?: GridTrack[];
+  layoutGridCells?: { [uuid: Uuid]: GridCell };
+};

ui-src/lib/types/text/textShape.d.ts

@@ -1,3 +1,4 @@
+import { LayoutChildAttributes } from '@ui/lib/types/layout/layoutChildAttributes';
 import { ShapeAttributes } from '@ui/lib/types/shape/shapeAttributes';
 import { ShapeBaseAttributes } from '@ui/lib/types/shape/shapeBaseAttributes';
 import { ShapeGeomAttributes } from '@ui/lib/types/shape/shapeGeomAttributes';
@@ -7,4 +8,5 @@ import { TextAttributes } from './textAttributes';
 export type TextShape = ShapeBaseAttributes &
   ShapeGeomAttributes &
   ShapeAttributes &
-  TextAttributes;
+  TextAttributes &
+  LayoutChildAttributes;

ui-src/lib/types/utils/animation.d.ts

@@ -1,8 +1,23 @@
-export type Animation = {
-  animationType: symbol; // 'dissolve' | 'slide' | 'push'
+export type Animation = AnimationDissolve | AnimationSlide | AnimationPush;
+
+type AnimationDissolve = {
+  animationType: 'dissolve';
   duration: number;
-  easing: symbol; // 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
-  way?: symbol; // 'in' | 'out'
-  direction?: symbol; // 'right' | 'left' | 'up' | 'down'
-  offsetEffect?: boolean;
+  easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+};
+
+type AnimationSlide = {
+  animationType: 'slide';
+  duration: number;
+  easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+  way: 'in' | 'out';
+  direction: 'right' | 'left' | 'up' | 'down';
+  offsetEffect: boolean;
+};
+
+type AnimationPush = {
+  animationType: 'push';
+  duration: number;
+  easing: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+  direction: 'right' | 'left' | 'up' | 'down';
 };

ui-src/lib/types/utils/blur.d.ts

@@ -2,7 +2,7 @@ import { Uuid } from './uuid';
 
 export type Blur = {
   id: Uuid;
-  type: symbol; // layer-blur
+  type: 'layer-blur';
   value: number;
   hidden: boolean;
 };

ui-src/lib/types/utils/color.d.ts

@@ -0,0 +1,18 @@
+import { Gradient } from '@ui/lib/types/utils/gradient';
+import { ImageColor } from '@ui/lib/types/utils/imageColor';
+import { RgbColor } from '@ui/lib/types/utils/rgbColor';
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+export type Color = {
+  id?: Uuid;
+  name?: string;
+  path?: string;
+  value?: string;
+  color?: RgbColor;
+  opacity?: number;
+  modifiedAt?: string; //@TODO: check this attribute in penpot
+  refId?: Uuid;
+  refFile?: Uuid;
+  gradient: Gradient;
+  image?: ImageColor;
+};

ui-src/lib/types/utils/fill.d.ts

@@ -1,3 +1,5 @@
+import { ImageColor } from '@ui/lib/types/utils/imageColor';
+
 import { Gradient } from './gradient';
 import { Uuid } from './uuid';
 
@@ -7,4 +9,5 @@ type Fill = {
   fillColorGradient?: Gradient;
   fillColorRefFile?: Uuid;
   fillColorRefId?: Uuid;
+  fillImage?: ImageColor;
 };

ui-src/lib/types/utils/grid.d.ts

@@ -1,3 +1,5 @@
+import { RgbColor } from '@ui/lib/types/utils/rgbColor';
+
 export type Grid = ColumnGrid | RowGrid | SquareGrid;
 
 type ColumnGrid = {
@@ -7,7 +9,7 @@ type ColumnGrid = {
 };
 
 type RowGrid = {
-  type: 'column';
+  type: 'row';
   display: boolean;
   params: ColumnParams;
 };
@@ -33,7 +35,6 @@ type SquareParams = {
 };
 
 type GridColor = {
-  // @TODO: Maybe we need a proper type here
-  color: number;
+  color: RgbColor;
   opacity: number;
 };

ui-src/lib/types/utils/imageColor.d.ts

@@ -0,0 +1,11 @@
+import { Uuid } from '@ui/lib/types/utils/uuid';
+
+//@TODO: check how this exports the image through a dataUri
+export type ImageColor = {
+  name?: string;
+  width: number;
+  height: number;
+  mtype?: string;
+  id?: Uuid;
+  keepAspectRatio?: boolean;
+};

ui-src/lib/types/utils/interaction.d.ts

@@ -1,17 +1,81 @@
+import { Point } from '@ui/lib/types/utils/point';
+
 import { Animation } from './animation';
 import { Uuid } from './uuid';
 
-export type Interaction = {
-  eventType: symbol; // 'click' | 'mouse-press' | 'mouse-over' | 'mouse-enter' | 'mouse-leave' | 'after-delay'
-  actionType: symbol; // 'navigate' | 'open-overlay' | 'toggle-overlay' | 'close-overlay' | 'prev-screen' | 'open-url'
+export type Interaction =
+  | InteractionNavigate
+  | InteractionOpenOverlay
+  | InteractionToggleOverlay
+  | InteractionCloseOverlay
+  | InteractionPrevScreen
+  | InteractionOpenUrl;
+
+type EventType =
+  | 'click'
+  | 'mouse-press'
+  | 'mouse-over'
+  | 'mouse-enter'
+  | 'mouse-leave'
+  | 'after-delay';
+
+type OverlayPosType =
+  | 'manual'
+  | 'center'
+  | 'top-left'
+  | 'top-right'
+  | 'top-center'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'bottom-center';
+
+type InteractionNavigate = {
+  actionType: 'navigate';
+  eventType: EventType;
   destination?: Uuid;
   preserveScroll?: boolean;
   animation?: Animation;
-  overlayPosition?: { x: number; y: number };
-  overlayPosType?: symbol; // 'manual' | 'center' | 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'
+};
+
+type InteractionOpenOverlay = {
+  actionType: 'open-overlay';
+  eventType: EventType;
+  overlayPosition?: Point;
+  overlayPosType?: OverlayPosType;
+  destination?: Uuid;
   closeClickOutside?: boolean;
   backgroundOverlay?: boolean;
+  animation?: Animation;
   positionRelativeTo?: Uuid;
-  url?: string;
-  delay?: number;
+};
+
+type InteractionToggleOverlay = {
+  actionType: 'toggle-overlay';
+  eventType: EventType;
+  overlayPosition?: Point;
+  overlayPosType?: OverlayPosType;
+  destination?: Uuid;
+  closeClickOutside?: boolean;
+  backgroundOverlay?: boolean;
+  animation?: Animation;
+  positionRelativeTo?: Uuid;
+};
+
+type InteractionCloseOverlay = {
+  actionType: 'close-overlay';
+  eventType: EventType;
+  destination?: Uuid;
+  animation?: Animation;
+  positionRelativeTo?: Uuid;
+};
+
+type InteractionPrevScreen = {
+  actionType: 'prev-screen';
+  eventType: EventType;
+};
+
+type InteractionOpenUrl = {
+  actionType: 'open-url';
+  eventType: EventType;
+  url: string;
 };

ui-src/lib/types/utils/rgbColor.d.ts

@@ -0,0 +1,5 @@
+export type RgbColor = {
+  title?: string;
+  description?: string;
+  gen: string;
+};

ui-src/lib/types/utils/shadow.d.ts

@@ -1,4 +1,5 @@
-import { Gradient } from './gradient';
+import { Color } from '@ui/lib/types/utils/color';
+
 import { Uuid } from './uuid';
 
 export type Shadow = {
@@ -9,11 +10,5 @@ export type Shadow = {
   blur: number;
   spread: number;
   hidden: boolean;
-  color: {
-    color?: string;
-    opacity?: number;
-    gradient?: Gradient;
-    fileId?: Uuid;
-    id?: Uuid;
-  };
+  color: Color;
 };

ui-src/lib/types/utils/stroke.d.ts

@@ -1,5 +1,6 @@
-import { Gradient } from './gradient';
-import { Uuid } from './uuid';
+import { Gradient } from '@ui/lib/types/utils/gradient';
+import { ImageColor } from '@ui/lib/types/utils/imageColor';
+import { Uuid } from '@ui/lib/types/utils/uuid';
 
 export type Stroke = {
   strokeColor?: string;
@@ -12,6 +13,7 @@ export type Stroke = {
   strokeCapStart?: StrokeCaps;
   strokeCapEnd?: StrokeCaps;
   strokeColorGradient?: Gradient;
+  strokeImage?: ImageColor;
 };
 
 export type StrokeAlignment = 'center' | 'inner' | 'outer';