Convert element-library to TypeScript

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

@@ -22,7 +22,7 @@ import { PanelTypes } from '@googleforcreators/design-system';
 /**
  * Internal dependencies
  */
-import { SHARED_DEFAULT_ATTRIBUTES } from '../shared/constants';
+import { SHARED_DEFAULT_ATTRIBUTES } from '../shared';
 
 const defaultBackgroundColor = createSolidFromString('#c4c4c4');
 

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

@@ -23,8 +23,7 @@ import {
   createSolid,
   generatePatternStyles,
 } from '@googleforcreators/patterns';
-import { StoryPropTypes } from '@googleforcreators/elements';
-import PropTypes from 'prop-types';
+import type { Element } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
@@ -145,26 +144,22 @@ const ShoppingTagDot = styled.div`
   }
 `;
 
-function ProductDisplay({ element, siblingCount }) {
+function ProductDisplay({ element, siblingCount }: {
+  element: Element;
+  siblingCount: number;
+}) {
   const { id, width: elementWidth, height: elementHeight } = element;
 
-  const ref = useRef(null);
+  const ref = useRef<HTMLElement | null>(null);
   useColorTransformHandler({ id, targetRef: ref });
 
   return (
     <Element ref={ref} width={elementWidth} height={elementHeight}>
       <ShoppingTagDot
         key={`dots-${siblingCount}`} /* see: https://github.com/GoogleForCreators/web-stories-wp/issues/11705 */
-        elementWidth={elementWidth}
-        elementHeight={elementHeight}
       />
     </Element>
   );
 }
 
-ProductDisplay.propTypes = {
-  element: StoryPropTypes.elements.shape.isRequired,
-  siblingCount: PropTypes.number,
-};
-
 export default ProductDisplay;

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

@@ -24,8 +24,11 @@ import { Icons } from '@googleforcreators/design-system';
  * Internal dependencies
  */
 import VisibleImage from '../shared/visibleImage';
+import type { ProductElement } from '../types';
 
-function ProductLayerIcon({ element: { product } }) {
+function ProductLayerIcon({ element: { product } }: {
+  element: ProductElement
+}) {
   const productImage = product?.productImages?.[0] || {};
   const { url, alt } = productImage;
   if (!url) {

packages/element-library/src/product/layer.js → packages/element-library/src/product/layer.tsx

@@ -19,7 +19,9 @@
  */
 import { __ } from '@googleforcreators/i18n';
 
-function getProductLayerText(element) {
+import type { ProductElement } from '../types';
+
+function getProductLayerText(element: ProductElement) {
   return element?.product?.productTitle || __('Product', 'web-stories');
 }
 

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

@@ -18,14 +18,15 @@
  * External 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.
  */
-function ProductOutput({ element }) {
+function ProductOutput({ element }: { element: ProductElement }) {
   const { product } = element;
 
   if (!product?.productId) {

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

@@ -18,13 +18,15 @@
  * External dependencies
  */
 import { css } from 'styled-components';
-import { generatePatternStyles } from '@googleforcreators/patterns';
+import { generatePatternStyles, Pattern } from '@googleforcreators/patterns';
 import { getBorderStyle, getBorderRadius } from '@googleforcreators/masks';
+import type { BorderRadius, Element } from '@googleforcreators/elements';
 
 /**
  * Internal dependencies
  */
 import { generateFontFamily } from '../text/util';
+import type { TextElement } from '../types';
 
 export const elementFillContent = css`
   position: absolute;
@@ -34,31 +36,33 @@ export const elementFillContent = css`
   height: 100%;
 `;
 
-export const elementWithPosition = css`
+export const elementWithPosition = css<Element>`
   position: absolute;
   z-index: 1;
   left: ${({ x }) => `${x}px`};
   top: ${({ y }) => `${y}px`};
 `;
 
 // TODO: removed round/ceil, calculateFitTextFontSize needs to be improved?
-export const elementWithSize = css`
+export const elementWithSize = css<{width: number; height: number}>`
   width: ${({ width }) => `${width}px`};
   height: ${({ height }) => `${height}px`};
 `;
 
-export const elementWithRotation = css`
+export const elementWithRotation = css<{rotationAngle: number}>`
   transform: ${({ rotationAngle }) => `rotate(${rotationAngle}deg)`};
 `;
 
-export const elementWithBorderRadius = css`
+export const elementWithBorderRadius = css<Element>`
   ${(props) => getBorderRadius(props)}
 `;
 
+type DataToStyle = (prop: number) => string;
+
 export const elementWithHighlightBorderRadius = ({
   borderRadius,
   dataToEditorY,
-}) =>
+}: { borderRadius: BorderRadius, dataToEditorY?: DataToStyle}) =>
   dataToEditorY &&
   css`
     border-radius: ${dataToEditorY(borderRadius?.topLeft || 0)}px
@@ -67,7 +71,7 @@ export const elementWithHighlightBorderRadius = ({
       ${dataToEditorY(borderRadius?.bottomLeft || 0)}px;
   `;
 
-export const elementWithBorder = css`
+export const elementWithBorder = css<Element>`
   ${({ border, borderRadius, width, height, mask }) =>
     getBorderStyle({
       border,
@@ -79,12 +83,14 @@ export const elementWithBorder = css`
   background-clip: padding-box;
 `;
 
-export const elementWithBackgroundColor = css`
+export const elementWithBackgroundColor = css<{
+  backgroundColor?: Pattern;
+}>`
   ${({ backgroundColor }) =>
     backgroundColor && generatePatternStyles(backgroundColor)};
 `;
 
-export const elementWithFont = css`
+export const elementWithFont = css<TextElement>`
   white-space: pre-line;
   font-family: ${({ font }) => generateFontFamily(font)};
   overflow-wrap: break-word;
@@ -97,14 +103,21 @@ export const elementWithFont = css`
 `;
 
 // See generateParagraphTextStyle for the full set of properties.
-export const elementWithTextParagraphStyle = css`
+export const elementWithTextParagraphStyle = css<{
+  margin: number;
+  padding?: number;
+  lineHeight: number;
+  textAlign: 'left'|'right'|'center'|'justify'|'initial'|'inherit';
+}>`
   margin: ${({ margin }) => margin};
   padding: ${({ padding }) => padding || 0};
   line-height: ${({ lineHeight }) => lineHeight};
   text-align: ${({ textAlign }) => textAlign};
   overflow-wrap: break-word;
 `;
 
-export const elementWithFlip = css`
+export const elementWithFlip = css<{
+  transformFlip: string;
+}>`
   transform: ${({ transformFlip }) => transformFlip};
 `;

packages/element-library/src/shared/useCSSVarColorTransformHandler.js → packages/element-library/src/shared/useCSSVarColorTransformHandler.ts

@@ -13,16 +13,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
+import type { ElementId } from '@googleforcreators/elements';
 import { useTransformHandler } from '@googleforcreators/transform';
+import type { RefObject } from 'react';
 
 function useCSSVarColorTransformHandler({
   id,
   targetRef,
   cssVar,
   expectedStyle,
+}: {
+  id: ElementId;
+  targetRef: RefObject<HTMLElement>
+  cssVar: string;
+  expectedStyle: string;
 }) {
   useTransformHandler(id, (transform) => {
     const target = targetRef.current;

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

@@ -22,12 +22,19 @@ import {
   convertToCSS,
 } from '@googleforcreators/patterns';
 import { useTransformHandler } from '@googleforcreators/transform';
+import type { ElementId } from '@googleforcreators/elements';
+import type { RefObject } from "react";
 
 function useColorTransformHandler({
   id,
   targetRef,
   expectedStyle,
   resetOnNullTransform = true,
+}: {
+  id: ElementId;
+  targetRef: RefObject<HTMLElement | null>;
+  expectedStyle: string;
+  resetOnNullTransform: boolean;
 }) {
   useTransformHandler(id, (transform) => {
     const target =

packages/element-library/src/shared/visibleImage.js → packages/element-library/src/shared/visibleImage.tsx

@@ -18,7 +18,7 @@
  * External dependencies
  */
 import styled from 'styled-components';
-import PropTypes from 'prop-types';
+import type { HTMLAttributes } from 'react';
 
 const Image = styled.img`
   display: block;
@@ -28,17 +28,10 @@ const Image = styled.img`
   object-fit: cover;
 `;
 
-function VisibleImage({ ...attrs }) {
+function VisibleImage({ ...attrs }: HTMLAttributes<HTMLImageElement>) {
   // The image is purely decorative by default, because the alt text is already used
   // for the layer description. Hence using alt="" to avoid repetition.
   return <Image alt="" {...attrs} decoding="async" crossOrigin="anonymous" />;
 }
 
-VisibleImage.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-};
-
 export default VisibleImage;

packages/element-library/src/text/util.ts

@@ -19,10 +19,11 @@
  */
 import type { CSSProperties } from 'react';
 import type {
+  BaseFontData,
   Padding,
   TextAlign,
   TextElement,
-  TextElementFont,
+  TextElementFont
 } from '@googleforcreators/elements';
 
 type DataToStyle = (prop: number) => string;
@@ -72,14 +73,10 @@ export function generateParagraphTextStyle(
   };
 }
 
-interface GenerateFontFamilyProps {
-  family?: string;
-  fallbacks?: string[];
-}
 export const generateFontFamily = ({
   family,
   fallbacks,
-}: GenerateFontFamilyProps = {}) => {
+}: Partial<BaseFontData>) => {
   const genericFamilyKeywords = [
     'cursive',
     'fantasy',

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

@@ -15,3 +15,6 @@
  */
 
 export * from './elements';
+
+export * from '../constants';
+export * from '../utils/textMeasurements';

packages/element-library/tsconfig.json

@@ -19,11 +19,8 @@
     { "path": "../units" }
   ],
   "include": [
-    "src/constants.ts",
-    "src/types.ts",
-    "src/types",
-    "src/utils/textMeasurements.tsx",
-    "src/text/*.ts",
-    "src/text/*.tsx"
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/types"
   ]
 }