Reworking the elements package (#12557)

* Moved types around and converted elements package

* WIP: convert element-library package

* Re-moved types to relevant packages and untyped the element-library

* Updating package.json

* Feedback improvements

* Fixed more from PR feedback

* Fix lint error

* Moved element definitions to element library package and updated dependencies

* Fixed React-17 React.FC issue and resource id reference

* Removed Page.type property as it is redundant

Also fixed a test.

Note that there are many more instance of type:"page" in the code, but most are related to tests that will probably still work fine or templates, which will also work fine with an extra unused property. Should we add a migration though?

* Fix imports of background audio prop type

* Fixed a karma test

* Finally fixed that annoying bg-shape-element copy thingy

* Added a comment to make sense of it

* Fix eyedropper

* Target correct element

* Updated type references for config providers

* Missing types in package.json?

* Reorganized data types to elements package

Co-authored-by: Marcin Pietruszka <marcin@webskill.pl>

packages/dashboard/package.json

@@ -40,6 +40,7 @@
     "@googleforcreators/animation": "*",
     "@googleforcreators/date": "*",
     "@googleforcreators/design-system": "*",
+    "@googleforcreators/element-library": "*",
     "@googleforcreators/i18n": "*",
     "@googleforcreators/media": "*",
     "@googleforcreators/migration": "*",

packages/dashboard/src/types/configProvider.ts

@@ -18,7 +18,7 @@
  * External dependencies
  */
 import type { Template } from '@googleforcreators/templates';
-import type { Product } from '@googleforcreators/types';
+import type { ProductData } from '@googleforcreators/elements';
 
 export interface Locale {
   locale?: string;
@@ -101,7 +101,7 @@ export interface ApiCallbacks {
   duplicateStory?: (story: DashboardStory) => Promise<DashboardStory>;
   fetchStories?: () => Promise<DashboardStory[]>;
   getAuthors?: (search: string) => Promise<Author[]>;
-  getProducts?: (search: string) => Promise<Product[]>;
+  getProducts?: (search: string) => Promise<ProductData[]>;
   getTaxonomies?: (args: TaxonomiesArgs) => Promise<Taxonomy[]>;
   getTaxonomyTerms?: (endpoint: string, args: TermArgs) => Promise<Term>;
   trashStory?: (id: number) => Promise<DashboardStory>;

packages/dashboard/tsconfig.json

@@ -6,6 +6,7 @@
   },
   "references": [
     { "path": "../date" },
+    { "path": "../element-library" },
     { "path": "../patterns" },
     { "path": "../react" },
     { "path": "../templates" },

packages/element-library/package.json

@@ -31,6 +31,7 @@
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
+  "types": "dist-types/index.d.ts",
   "source": "src/index.js",
   "publishConfig": {
     "access": "public"

packages/element-library/src/elementTypes.js

@@ -31,11 +31,6 @@ import * as stickerElement from './sticker';
 import * as productElement from './product';
 
 const elementTypes = [
-  {
-    type: 'page',
-    defaultAttributes: {},
-    name: __('Page', 'web-stories'),
-  },
   { type: 'text', name: __('Text', 'web-stories'), ...textElement },
   { type: 'image', name: __('Image', 'web-stories'), ...imageElement },
   { type: 'shape', name: __('Shape', 'web-stories'), ...shapeElement },

packages/element-library/src/test/index.js

@@ -162,18 +162,16 @@ describe('Element', () => {
       ];
       const oldPage = {
         id: 'abc000',
-        type: 'page',
         elements: oldElements,
-        otherProperty: '45',
+        backgroundColor: { color: { r: 255, g: 0, b: 0 } },
       };
       const newPage = duplicatePage(oldPage);
 
       // Expect same structure but new id's!
       expect(newPage).toStrictEqual({
         id: expect.not.stringMatching(new RegExp(`/^${oldPage.id}$/`)),
-        type: 'page',
-        otherProperty: '45',
         animations: [],
+        backgroundColor: { color: { r: 255, g: 0, b: 0 } },
         elements: [
           expect.objectContaining({
             id: expect.not.stringMatching(

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/element-library/src/types/elements/productElement.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import type {
+  Element,
+  ElementType,
+  ProductData,
+} from '@googleforcreators/elements';
+
+export interface ProductElement extends Element {
+  type: ElementType.Product;
+  product: ProductData;
+}

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/element-library/src/types/elements/textElement.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import type { Pattern } from '@googleforcreators/patterns';
+import type {
+  Element,
+  ElementType,
+  FontData,
+} from '@googleforcreators/elements';
+
+export interface Padding {
+  horizontal?: number;
+  vertical?: number;
+  locked?: boolean;
+  hasHiddenPadding?: boolean;
+}
+
+export type TextAlign = 'left' | 'center' | 'right' | 'justify' | 'initial';
+export type BackgroundTextMode = 'NONE' | 'FILL' | 'HIGHLIGHT';
+
+export interface TextElement extends Element {
+  type: ElementType.Text;
+  content: string;
+  font: FontData;
+
+  backgroundTextMode?: BackgroundTextMode;
+  backgroundColor?: Pattern;
+  fontSize?: number;
+  lineHeight?: number;
+  textAlign?: TextAlign;
+  tagName?: 'h1' | 'h2' | 'h3' | 'p';
+  padding?: Padding;
+  marginOffset?: number;
+}

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[];