A couple of type fixes

packages/element-library/src/product/output.tsx

@@ -15,16 +15,15 @@
  */
 
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { StoryPropTypes } from '@googleforcreators/elements';
 import type { ProductElement } from '../types';
 
 /**
  * Returns AMP HTML for saving into post content for displaying in the FE.
  *
- * @param {Object<*>} props Props.
- * @return {*} Rendered component.
+ * @param props Props.
+ * @return Rendered component.
  */
 function ProductOutput({ element }: { element: ProductElement }) {
   const { product } = element;
@@ -36,8 +35,4 @@ function ProductOutput({ element }: { element: ProductElement }) {
   return <amp-story-shopping-tag data-product-id={product.productId} />;
 }
 
-ProductOutput.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
-};
-
 export default ProductOutput;

packages/element-library/src/shared/shared.ts

@@ -18,7 +18,10 @@
  * External dependencies
  */
 import { css } from 'styled-components';
-import { generatePatternStyles, Pattern } from '@googleforcreators/patterns';
+import {
+  generatePatternStyles,
+  type Pattern,
+} from '@googleforcreators/patterns';
 import { getBorderStyle, getBorderRadius } from '@googleforcreators/masks';
 import type { BorderRadius, Element } from '@googleforcreators/elements';
 
@@ -44,12 +47,12 @@ export const elementWithPosition = css<Element>`
 `;
 
 // TODO: removed round/ceil, calculateFitTextFontSize needs to be improved?
-export const elementWithSize = css<{width: number; height: number}>`
+export const elementWithSize = css<{ width: number; height: number }>`
   width: ${({ width }) => `${width}px`};
   height: ${({ height }) => `${height}px`};
 `;
 
-export const elementWithRotation = css<{rotationAngle: number}>`
+export const elementWithRotation = css<{ rotationAngle: number }>`
   transform: ${({ rotationAngle }) => `rotate(${rotationAngle}deg)`};
 `;
 
@@ -62,7 +65,10 @@ type DataToStyle = (prop: number) => string;
 export const elementWithHighlightBorderRadius = ({
   borderRadius,
   dataToEditorY,
-}: { borderRadius: BorderRadius, dataToEditorY?: DataToStyle}) =>
+}: {
+  borderRadius: BorderRadius;
+  dataToEditorY?: DataToStyle;
+}) =>
   dataToEditorY &&
   css`
     border-radius: ${dataToEditorY(borderRadius?.topLeft || 0)}px
@@ -107,7 +113,7 @@ export const elementWithTextParagraphStyle = css<{
   margin: number;
   padding?: number;
   lineHeight: number;
-  textAlign: 'left'|'right'|'center'|'justify'|'initial'|'inherit';
+  textAlign: 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
 }>`
   margin: ${({ margin }) => margin};
   padding: ${({ padding }) => padding || 0};

packages/element-library/src/shared/useColorTransformHandler.ts

@@ -23,7 +23,7 @@ import {
 } from '@googleforcreators/patterns';
 import { useTransformHandler } from '@googleforcreators/transform';
 import type { ElementId } from '@googleforcreators/elements';
-import type { RefObject } from "react";
+import type { RefObject } from 'react';
 
 function useColorTransformHandler({
   id,

packages/element-library/src/typings/global.d.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2024 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.
+ */
+
+interface AmpStoryShoppingTag {
+  'data-product-id'?: string | number;
+}
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      'amp-story-shopping-tag': AmpStoryShoppingTag;
+    }
+  }
+}
+
+export {};

packages/element-library/src/typings/svg.d.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2023 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.
+ */
+
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+  const ReactComponent: FunctionComponent<
+    SVGProps<SVGElement> & { title?: string }
+  >;
+  export default ReactComponent;
+}