Fix components (#193)

* Fix components

* fix lint

common/map.ts

@@ -5,3 +5,13 @@ export const toObject = <T>(map: Map<string, T>): Record<string, T> => {
 export const toArray = <T>(map: Map<string, T>): [string, T][] => {
   return Array.from(map.entries());
 };
+
+export const init = <T>(map: Map<string, T>, records: Record<string, T>) => {
+  map.clear();
+
+  const entries = Object.entries(records);
+
+  for (const [key, value] of entries) {
+    map.set(key, value);
+  }
+};

ui-src/parser/creators/createComponentsLibrary.ts

@@ -3,8 +3,9 @@ import { sleep } from '@common/sleep';
 
 import { sendMessage } from '@ui/context';
 import { PenpotFile } from '@ui/lib/types/penpotFile';
-import { UiComponent, componentShapes, components as uiComponents } from '@ui/parser';
+import { componentShapes, components as uiComponents } from '@ui/parser';
 import { symbolFills, symbolStrokes } from '@ui/parser/creators/symbols';
+import { UiComponent } from '@ui/types';
 
 import { createItems } from '.';
 

ui-src/parser/libraries.ts

@@ -3,18 +3,7 @@ import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
 import { FillStyle } from '@ui/lib/types/utils/fill';
 import { ImageColor } from '@ui/lib/types/utils/imageColor';
 import { Uuid } from '@ui/lib/types/utils/uuid';
-
+import { UiComponent } from '@ui/types';
-export type UiComponent = {
-  componentId: Uuid;
-  mainInstancePage?: Uuid;
-  mainInstanceId: Uuid;
-  componentFigmaId: string;
-};
-
-export const init = <T>(records: Record<string, T>, map: Map<string, T>) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  map = new Map(Object.entries(records));
-};
 
 export const typographies: Map<string, TypographyStyle> = new Map();
 export const images: Map<string, ImageColor> = new Map();

ui-src/parser/parse.ts

@@ -1,3 +1,4 @@
+import { init } from '@common/map';
 import { sleep } from '@common/sleep';
 
 import { sendMessage } from '@ui/context';
@@ -5,7 +6,7 @@ import { createFile } from '@ui/lib/penpot';
 import { PenpotFile } from '@ui/lib/types/penpotFile';
 import { TypographyStyle } from '@ui/lib/types/shapes/textShape';
 import { FillStyle } from '@ui/lib/types/utils/fill';
-import { colors, componentShapes, images, init, typographies } from '@ui/parser';
+import { colors, componentShapes, images, typographies } from '@ui/parser';
 import { buildFile } from '@ui/parser/creators';
 import { PenpotDocument } from '@ui/types';
 
@@ -124,7 +125,7 @@ export const parse = async ({
   paintStyles,
   textStyles
 }: PenpotDocument) => {
-  init(components, componentShapes);
+  init(componentShapes, components);
 
   const file = createFile(name);
 

ui-src/types/component.ts

@@ -1,6 +1,7 @@
 import { LayoutAttributes, LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
 import { ShapeAttributes, ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
 import { Children } from '@ui/lib/types/utils/children';
+import { Uuid } from '@ui/lib/types/utils/uuid';
 
 export type ComponentRoot = {
   figmaId: string;
@@ -27,3 +28,10 @@ export type ComponentInstance = ShapeGeomAttributes &
     showContent?: boolean;
     type: 'instance';
   };
+
+export type UiComponent = {
+  componentId: Uuid;
+  mainInstancePage?: Uuid;
+  mainInstanceId: Uuid;
+  componentFigmaId: string;
+};