keep adding types

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

@@ -3,8 +3,7 @@ import { Uuid } from '../utils/uuid';
 export type FrameAttributes = {
   id?: Uuid;
   type: symbol;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  shapes?: any[];
+  shapes?: Uuid[];
   fileThumbnail?: boolean;
   hideFillOnExport?: boolean;
   showContent?: boolean;

src/ui/lib/types/group/groupAttributes.d.ts

@@ -3,6 +3,5 @@ import { Uuid } from '../utils/uuid';
 export type GroupAttributes = {
   id?: Uuid;
   type: symbol;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  shapes?: any[];
+  shapes?: Uuid[];
 };

src/ui/lib/types/shape.d.ts

@@ -1,5 +1,10 @@
+import { Export } from './utils/export';
+import { Fill } from './utils/fill';
+import { Grid } from './utils/grid';
+import { Matrix } from './utils/matrix';
 import { Point } from './utils/point';
 import { Selrect } from './utils/selrect';
+import { Stroke } from './utils/stroke';
 
 export type Shape = {
   name?: string;
@@ -14,8 +19,7 @@ export type Shape = {
   locked?: boolean;
   hidden?: boolean;
   maskedGroup?: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fills?: any;
+  fills?: Fill[];
   hideFillOnExport?: boolean;
   proportion?: number;
   proportionLock?: boolean;
@@ -33,16 +37,11 @@ export type Shape = {
   width?: number;
   height?: number;
   opacity?: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  grids?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  exports?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  strokes?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  transform?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  transformInverse?: any;
+  grids?: Grid[];
+  exports?: Export[];
+  strokes?: Stroke[];
+  transform?: Matrix;
+  transformInverse?: Matrix;
   blendMode?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   interactions?: any;

src/ui/lib/types/utils/export.d.ts

@@ -0,0 +1,7 @@
+export type Export = {
+  // @TODO: in Penpot this is of type :keyword
+  //        check if it makes sense
+  type: string;
+  scale: number;
+  suffix: string;
+};

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

@@ -1,11 +1,10 @@
 import { Gradient } from './gradient';
+import { Uuid } from './uuid';
 
 type Fill = {
   fillColor?: string;
   fillOpacity?: number;
   fillColorGradient?: Gradient;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fillColorRefFile?: any;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fillColorRefId?: any;
+  fillColorRefFile?: Uuid;
+  fillColorRefId?: Uuid;
 };

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

@@ -0,0 +1,39 @@
+export type Grid = ColumnGrid | RowGrid | SquareGrid;
+
+type ColumnGrid = {
+  type: 'column';
+  display: boolean;
+  params: ColumnParams;
+};
+
+type RowGrid = {
+  type: 'column';
+  display: boolean;
+  params: ColumnParams;
+};
+
+type SquareGrid = {
+  type: 'square';
+  display: boolean;
+  params: SquareParams;
+};
+
+type ColumnParams = {
+  color: GridColor;
+  type?: 'stretch' | 'left' | 'center' | 'right';
+  size?: number;
+  margin?: number;
+  itemLength?: number;
+  gutter?: number;
+};
+
+type SquareParams = {
+  size: number;
+  color: GridColor;
+};
+
+type GridColor = {
+  // @TODO: Maybe we need a proper type here
+  color: number;
+  opacity: number;
+};

src/ui/lib/types/utils/matrix.d.ts

@@ -0,0 +1,8 @@
+export type Matrix = {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+};

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

@@ -0,0 +1,26 @@
+import { Gradient } from './gradient';
+import { Uuid } from './uuid';
+
+export type Stroke = {
+  strokeColor?: string;
+  strokeColorRefFile?: Uuid;
+  strokeColorRefId?: Uuid;
+  strokeOpacity?: number;
+  strokeStyle?: 'solid' | 'dotted' | 'dashed' | 'mixed' | 'none' | 'svg';
+  strokeWidth?: number;
+  strokeAlignment?: 'center' | 'inner' | 'outer';
+  strokeCapStart?: 'butt' | 'round' | 'square';
+  strokeCapStart: StrokeCaps;
+  strokeCapEnd?: StrokeCaps;
+  strokeColorGradient: Gradient;
+};
+
+type StrokeCapLine = 'round' | 'square';
+type StrokeCapMarker =
+  | 'line-arrow'
+  | 'triangle-arrow'
+  | 'square-marker'
+  | 'circle-marker'
+  | 'diamond-marker';
+
+type StrokeCaps = StrokeCapLine | StrokeCapMarker;