Convert element-library to TypeScript (#13503)

packages/element-library/package.json

@@ -26,13 +26,13 @@
   },
   "customExports": {
     ".": {
-      "default": "./src/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/index.js",
   "module": "dist-module/index.js",
-  "types": "dist-types/types.d.ts",
-  "source": "src/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },

packages/element-library/src/audioSticker/constants.js → packages/element-library/src/audioSticker/constants.ts

@@ -45,6 +45,8 @@ export const resizeRules = {
   vertical: false,
   horizontal: false,
   diagonal: false,
+  minWidth: 120,
+  minHeight: 120,
 };
 
 export const defaultAttributes = {

packages/element-library/src/audioSticker/display.js → packages/element-library/src/audioSticker/display.tsx

@@ -17,7 +17,11 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  Element,
+  AudioStickerElement,
+  DisplayProps,
+} from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -29,12 +33,16 @@ import {
   AUDIO_STICKER_LABELS,
 } from '../constants';
 
-const Element = styled.img`
+interface ElementProps {
+  stickerStyle: keyof typeof AUDIO_STICKER_STYLES;
+}
+
+const Element = styled.img<ElementProps>`
   ${elementFillContent}
   ${({ stickerStyle }) => AUDIO_STICKER_STYLES[stickerStyle]}
 `;
 
-function AudioStickerDisplay({ element }) {
+function AudioStickerDisplay({ element }: DisplayProps<AudioStickerElement>) {
   const {
     width: elementWidth,
     height: elementHeight,
@@ -53,8 +61,4 @@ function AudioStickerDisplay({ element }) {
   );
 }
 
-AudioStickerDisplay.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
-};
-
 export default AudioStickerDisplay;

packages/element-library/src/audioSticker/output.js → packages/element-library/src/audioSticker/output.tsx

@@ -17,9 +17,12 @@
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type {
+  AudioStickerElement,
+  OutputProps,
+} from '@googleforcreators/elements';
 
-function AudioStickerOutput({ element }) {
+function AudioStickerOutput({ element }: OutputProps<AudioStickerElement>) {
   return (
     <div className="audio-sticker">
       <amp-story-audio-sticker
@@ -36,8 +39,4 @@ function AudioStickerOutput({ element }) {
   );
 }
 
-AudioStickerOutput.propTypes = {
-  element: StoryPropTypes.elements.audioSticker.isRequired,
-};
-
 export default AudioStickerOutput;

packages/element-library/src/elementTypes.js → packages/element-library/src/elementTypes.ts

@@ -18,6 +18,18 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
+import {
+  type ElementDefinition,
+  type AudioStickerElement,
+  type TextElement,
+  type ImageElement,
+  type ShapeElement,
+  type VideoElement,
+  type GifElement,
+  type StickerElement,
+  type ProductElement,
+  ElementType,
+} from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -32,22 +44,46 @@ import * as productElement from './product';
 import * as audioStickerElement from './audioSticker';
 
 const elementTypes = [
-  { type: 'text', name: __('Text', 'web-stories'), ...textElement },
-  { type: 'image', name: __('Image', 'web-stories'), ...imageElement },
-  { type: 'shape', name: __('Shape', 'web-stories'), ...shapeElement },
-  { type: 'video', name: __('Video', 'web-stories'), ...videoElement },
-  { type: 'gif', name: __('GIF', 'web-stories'), ...gifElement },
-  { type: 'sticker', name: __('Sticker', 'web-stories'), ...stickerElement },
-  {
-    type: 'product',
+  {
+    type: ElementType.Text,
+    name: __('Text', 'web-stories'),
+    ...textElement,
+  } as ElementDefinition<TextElement>,
+  {
+    type: ElementType.Image,
+    name: __('Image', 'web-stories'),
+    ...imageElement,
+  } as ElementDefinition<ImageElement>,
+  {
+    type: ElementType.Shape,
+    name: __('Shape', 'web-stories'),
+    ...shapeElement,
+  } as ElementDefinition<ShapeElement>,
+  {
+    type: ElementType.Video,
+    name: __('Video', 'web-stories'),
+    ...videoElement,
+  } as ElementDefinition<VideoElement>,
+  {
+    type: ElementType.Gif,
+    name: __('GIF', 'web-stories'),
+    ...gifElement,
+  } as ElementDefinition<GifElement>,
+  {
+    type: ElementType.Sticker,
+    name: __('Sticker', 'web-stories'),
+    ...stickerElement,
+  } as ElementDefinition<StickerElement>,
+  {
+    type: ElementType.Product,
     name: __('Product', 'web-stories'),
     ...productElement,
-  },
+  } as ElementDefinition<ProductElement>,
   {
-    type: 'audioSticker',
+    type: ElementType.AudioSticker,
     name: __('Audio Sticker', 'web-stories'),
     ...audioStickerElement,
-  },
+  } as ElementDefinition<AudioStickerElement>,
 ];
 
 export default elementTypes;

packages/element-library/src/gif/constants.js → packages/element-library/src/gif/constants.ts

@@ -17,6 +17,7 @@
  * External dependencies
  */
 import { PanelTypes } from '@googleforcreators/design-system';
+import { ResourceType } from '@googleforcreators/media';
 
 /**
  * Internal dependencies
@@ -27,9 +28,11 @@ import { MEDIA_DEFAULT_ATTRIBUTES, MEDIA_PANELS } from '../media';
 export {
   canFlip,
   isMaskable,
+  isAspectAlwaysLocked,
   isMedia,
   hasEditMode,
   hasEditModeIfLocked,
+  hasEditModeMoveable,
   hasDuplicateMenu,
   hasDesignMenu,
   editModeGrayout,
@@ -40,6 +43,19 @@ export { resizeRules } from '../media/constants';
 export const defaultAttributes = {
   ...SHARED_DEFAULT_ATTRIBUTES,
   ...MEDIA_DEFAULT_ATTRIBUTES,
+  resource: {
+    type: ResourceType.Gif,
+    id: 0,
+    width: 0,
+    height: 0,
+    alt: '',
+    src: '',
+    mimeType: 'image/gif',
+    output: {
+      mimeType: 'video/mp4',
+      src: '',
+    },
+  },
 };
 
 export const panels = [

packages/element-library/src/gif/display.js → packages/element-library/src/gif/display.tsx

@@ -17,25 +17,25 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useRef } from '@googleforcreators/react';
 import { getMediaSizePositionProps } from '@googleforcreators/media';
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { GifElement, DisplayProps } from '@googleforcreators/elements';
+import type { RefObject } from 'react';
 
 /**
  * Internal dependencies
  */
 import MediaDisplay from '../media/display';
 import { getBackgroundStyle, Video, VideoImage } from '../media/util';
 
-function VideoDisplay({
+function GifDisplay({
   previewMode,
   box: { width, height },
   element,
   renderResourcePlaceholder,
-}) {
+}: DisplayProps<GifElement>) {
   const { id, poster, resource, isBackground, scale, focalX, focalY } = element;
-  const ref = useRef();
+  const ref = useRef<HTMLImageElement | HTMLVideoElement>(null);
   let style = {};
   if (isBackground) {
     const styleProps = getBackgroundStyle();
@@ -55,7 +55,7 @@ function VideoDisplay({
   );
 
   return (
-    <MediaDisplay
+    <MediaDisplay<GifElement>
       element={element}
       mediaRef={ref}
       showPlaceholder
@@ -69,7 +69,7 @@ function VideoDisplay({
             alt={element.alt || resource.alt}
             style={style}
             {...videoProps}
-            ref={ref}
+            ref={ref as RefObject<HTMLImageElement>}
           />
         )
       ) : (
@@ -82,7 +82,7 @@ function VideoDisplay({
           autoPlay
           muted
           preload="all"
-          ref={ref}
+          ref={ref as RefObject<HTMLVideoElement>}
           data-testid="videoElement"
           data-leaf-element="true"
         >
@@ -95,11 +95,4 @@ function VideoDisplay({
   );
 }
 
-VideoDisplay.propTypes = {
-  previewMode: PropTypes.bool,
-  element: StoryPropTypes.elements.video.isRequired,
-  box: StoryPropTypes.box.isRequired,
-  renderResourcePlaceholder: PropTypes.func,
-};
-
-export default VideoDisplay;
+export default GifDisplay;

packages/element-library/src/gif/edit.js → packages/element-library/src/gif/edit.tsx

@@ -16,20 +16,15 @@
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { GifElement, EditProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import MediaEdit from '../media/edit';
 
-function GifEdit({ element, box, ...rest }) {
-  return <MediaEdit element={element} box={box} {...rest} />;
+function GifEdit({ element, box, ...rest }: EditProps<GifElement>) {
+  return <MediaEdit<GifElement> element={element} box={box} {...rest} />;
 }
 
-GifEdit.propTypes = {
-  element: StoryPropTypes.elements.gif.isRequired,
-  box: StoryPropTypes.box.isRequired,
-};
-
 export default GifEdit;

packages/element-library/src/media/textContent.js → packages/element-library/src/gif/frame.tsx

@@ -14,8 +14,12 @@
  * limitations under the License.
  */
 
-function TextContent({ src }) {
-  return `image: ${src}`;
-}
+/**
+ * Internal dependencies
+ */
+import MediaFrame from '../media/frame';
 
-export default TextContent;
+function GifFrame() {
+  return <MediaFrame />;
+}
+export default GifFrame;

packages/element-library/src/gif/icon.js → packages/element-library/src/gif/icon.tsx

@@ -13,10 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
+import type { GifElement, LayerIconProps } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -27,12 +28,7 @@ function GifLayerIcon({
   element: {
     resource: { poster, alt },
   },
-}) {
+}: LayerIconProps<GifElement>) {
   return <VisibleImage src={poster} alt={alt} height={21} width={21} />;
 }
-
-GifLayerIcon.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
-
 export default GifLayerIcon;