Reworking the elements package

packages/types/src/element/gifElement.ts → packages/element-library/src/types/elements/gifElement.ts

@@ -15,13 +15,15 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { GifResource } from '../resource';
-import type { MediaElement } from './mediaElement';
-import type { ElementType } from './element';
+import type { GifResource } from '@googleforcreators/media';
+import type {
+  SequenceMediaElement,
+  ElementType,
+} from '@googleforcreators/elements';
 
-export interface GifElement extends MediaElement {
+export interface GifElement extends SequenceMediaElement {
   resource: GifResource;
   type: ElementType.Gif;
 }

packages/types/src/element/imageElement.ts → packages/element-library/src/types/elements/imageElement.ts

@@ -15,14 +15,15 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { MediaElement } from './mediaElement';
-import type { ElementType } from './element';
-import type { Pattern } from './pattern';
+import type { Resource } from '@googleforcreators/media';
+import type { Pattern } from '@googleforcreators/patterns';
+import type { MediaElement, ElementType } from '@googleforcreators/elements';
 
 export type ImageElement = MediaElement & {
   type: ElementType.Image;
+  resource: Resource;
 
   // TODO(#12437): Figure out why some images have this property.
   backgroundColor?: Pattern;

packages/types/src/element/index.ts → packages/element-library/src/types/elements/index.ts

@@ -14,12 +14,8 @@
  * limitations under the License.
  */
 
-export * from './element';
-export * from './elementBox';
 export * from './gifElement';
 export * from './imageElement';
-export * from './mediaElement';
-export * from './pattern';
 export * from './productElement';
 export * from './shapeElement';
 export * from './stickerElement';

packages/types/src/element/productElement.ts → packages/element-library/src/types/elements/productElement.ts

@@ -15,9 +15,9 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { Element, ElementType } from './element';
+import type { Element, ElementType } from '@googleforcreators/elements';
 
 interface ProductImage {
   alt: string;

packages/types/src/element/shapeElement.ts → packages/element-library/src/types/elements/shapeElement.ts

@@ -15,10 +15,10 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { Element, ElementType } from './element';
-import type { Pattern } from './pattern';
+import type { Pattern } from '@googleforcreators/patterns';
+import type { Element, ElementType } from '@googleforcreators/elements';
 
 export interface ShapeElement extends Element {
   backgroundColor?: Pattern;

packages/types/src/element/stickerElement.ts → packages/element-library/src/types/elements/stickerElement.ts

@@ -15,9 +15,9 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { Element, ElementType } from './element';
+import type { Element, ElementType } from '@googleforcreators/elements';
 
 export interface Sticker {
   type: string;

packages/types/src/element/textElement.ts → packages/element-library/src/types/elements/textElement.ts

@@ -15,10 +15,10 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { Element, ElementType } from './element';
-import type { Pattern } from './pattern';
+import type { Pattern } from '@googleforcreators/patterns';
+import type { Element, ElementType } from '@googleforcreators/elements';
 
 export type FontStyle = 'normal' | 'italic' | 'regular';
 export enum FontVariantStyle {

packages/types/src/element/videoElement.ts → packages/element-library/src/types/elements/videoElement.ts

@@ -15,11 +15,13 @@
  */
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import type { VideoResource } from '../resource';
-import type { MediaElement } from './mediaElement';
-import type { ElementType } from './element';
+import type { VideoResource } from '@googleforcreators/media';
+import type {
+  SequenceMediaElement,
+  ElementType,
+} from '@googleforcreators/elements';
 
 export interface VideoTrack {
   id: string;
@@ -31,7 +33,7 @@ export interface VideoTrack {
   needsProxy?: boolean;
 }
 
-export interface VideoElement extends MediaElement {
+export interface VideoElement extends SequenceMediaElement {
   resource: VideoResource;
   poster?: string;
   tracks?: VideoTrack[];

packages/types/src/story/index.ts → packages/element-library/src/types/index.ts

@@ -14,6 +14,4 @@
  * limitations under the License.
  */
 
-export * from './animation';
-export * from './page';
-export * from './story';
+export * from './elements';

packages/element-library/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist-types"
+  },
+  "references": [
+    { "path": "../dom" },
+    { "path": "../elements" },
+    { "path": "../i18n" },
+    { "path": "../masks" },
+    { "path": "../media" },
+    { "path": "../moveable" },
+    { "path": "../patterns" },
+    { "path": "../react" },
+    { "path": "../rich-text" },
+    { "path": "../stickers" },
+    { "path": "../transform" },
+    { "path": "../units" }
+  ],
+  "include": ["src/types/**/*"]
+}

packages/elements/package.json

@@ -40,7 +40,6 @@
     "@googleforcreators/i18n": "*",
     "@googleforcreators/media": "*",
     "@googleforcreators/patterns": "*",
-    "@googleforcreators/types": "*",
     "@googleforcreators/units": "*",
     "prop-types": "^15.7.2",
     "uuid": "^9.0.0"

packages/elements/src/constants.ts

@@ -22,14 +22,14 @@ export const ELEMENT_TYPES = {
   GIF: 'gif',
   STICKER: 'sticker',
   PRODUCT: 'product',
-};
+} as const;
 
 export const MEDIA_ELEMENT_TYPES = [
   ELEMENT_TYPES.IMAGE,
   ELEMENT_TYPES.VIDEO,
   ELEMENT_TYPES.GIF,
   ELEMENT_TYPES.PRODUCT,
-];
+] as const;
 
 export const MULTIPLE_VALUE = '((MULTIPLE))';
 

packages/elements/src/elementType.ts

@@ -15,60 +15,14 @@
  */
 
 /**
- * External dependencies
+ * Internal dependencies
  */
-import type { ElementType, Element } from '@googleforcreators/types';
-import type { FunctionComponent } from 'react';
-
-interface BaseDefinition {
-  type: string;
-  name: string;
-  defaultAttributes: Record<string, unknown>;
-}
-
-export interface PageElementDefinition extends BaseDefinition {
-  type: 'page';
-  defaultAttributes: Record<string, never>;
-}
-
-export interface ElementDefinition extends BaseDefinition {
-  type: ElementType;
-  name: string;
-  defaultAttributes: Record<string, unknown>;
-  Display: FunctionComponent;
-  Edit: FunctionComponent;
-  Frame: FunctionComponent;
-  Output: FunctionComponent;
-  TextContent: FunctionComponent;
-  canFlip: boolean;
-  isMedia: boolean;
-  isMaskable: boolean;
-  isAspectAlwaysLocked: boolean;
-  hasDesignMenu: boolean;
-  hasDuplicateMenu: boolean;
-  hasEditMode: boolean;
-  hasEditModeIfLocked: boolean;
-  hasEditModeMoveable: boolean;
-  editModeGrayout: boolean;
-  resizeRules: {
-    vertical: boolean;
-    horizontal: boolean;
-    diagonal: boolean;
-    minWidth: number;
-    minHeight: number;
-  };
-  panels: string[];
-  getLayerText: (element: Element) => string;
-  onDropHandler?: (dropTargetId: string) => void;
-}
-
-export type ElementTypeDefinition = PageElementDefinition | ElementDefinition;
+import type { ElementDefinition, ElementTypes } from './types';
 
 // @todo Create a custom hook to manage state.
+const elementTypes: Partial<ElementTypes> = {};
 
-const elementTypes: Record<string, ElementTypeDefinition> = {};
-
-function registerElementType(elementType: ElementTypeDefinition) {
+function registerElementType(elementType: ElementDefinition) {
   elementTypes[elementType.type] = elementType;
 }