TypeScript: pageCanvas provider (#12891)

* Rename files

Convert contrastUtils

* More types

* More types

* More types

* More types

* More types.

* Add module for DisplayElement

* More types

* Adjust theme

* fix

* Type fixes

* Remove todo

* Fixes

* Lint

* PR feedback

* Partial revert

packages/design-system/src/theme/index.js

@@ -17,22 +17,10 @@
 /**
  * Internal dependencies
  */
-import { dark as darkMode, light as lightMode } from './colors';
+export * from './theme';
+import { light as lightMode } from './colors';
 import { THEME_CONSTANTS, BEZIER } from './constants';
 import * as ThemeGlobals from './global';
 import * as themeHelpers from './helpers';
-import { typography } from './typography';
-import { borders } from './borders';
-import { breakpoint, raw } from './breakpoint';
-
-export const theme = {
-  borders,
-  typography,
-  colors: { ...darkMode },
-  breakpoint: {
-    ...breakpoint,
-    raw,
-  },
-};
 
 export { lightMode, THEME_CONSTANTS, themeHelpers, ThemeGlobals, BEZIER };

packages/story-editor/src/app/pageCanvas/usePageCanvas.js → packages/design-system/src/theme/theme.ts

@@ -13,18 +13,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/**
- * External dependencies
- */
-import { useContextSelector, identity } from '@googleforcreators/react';
-
 /**
  * Internal dependencies
  */
-import Context from './context';
-
-function usePageCanvas(selector) {
-  return useContextSelector(Context, selector ?? identity);
-}
-
-export default usePageCanvas;
+import { dark as darkMode } from './colors';
+import { typography } from './typography';
+import { borders } from './borders';
+import { breakpoint, raw } from './breakpoint';
+export const theme = {
+  borders,
+  typography,
+  colors: { ...darkMode },
+  breakpoint: {
+    ...breakpoint,
+    raw,
+  },
+};

packages/design-system/src/types.ts

@@ -25,5 +25,6 @@ export * from './types/keyboard';
 export * from './utils/constants';
 export * from './utils/localStore';
 export * from './utils/sessionStore';
+export * from './theme/theme';
 
 export {};

packages/design-system/tsconfig.json

@@ -15,6 +15,7 @@
     "src/components/snackbar/constants.ts",
     "src/contexts/snackbar/*",
     "src/theme/constants",
+    "src/theme/*.ts",
     "src/types/*",
     "src/types.ts",
     "src/utils/*.ts",

packages/element-library/src/text/outputWithUnits.js → packages/element-library/src/text/outputWithUnits.tsx

@@ -17,18 +17,16 @@
 /**
  * External dependencies
  */
-import {
-  BACKGROUND_TEXT_MODE,
-  StoryPropTypes,
-} from '@googleforcreators/elements';
+import { BACKGROUND_TEXT_MODE } from '@googleforcreators/elements';
 import {
   createSolid,
   generatePatternStyles,
 } from '@googleforcreators/patterns';
 import { useMemo } from '@googleforcreators/react';
 import { getHTMLFormatters } from '@googleforcreators/rich-text';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
+import type { TextElement } from '@googleforcreators/elements';
+import type { CSSProperties } from 'react';
 
 /**
  * Internal dependencies
@@ -39,18 +37,19 @@ import {
   calcFontMetrics,
 } from './util';
 
+type DataToStyle = (prop: number) => string;
+interface TextOutputWithUnitsProps {
+  element: TextElement;
+  dataToStyleX: DataToStyle;
+  dataToStyleY: DataToStyle;
+  dataToFontSizeY?: DataToStyle;
+  dataToPaddingX?: DataToStyle;
+  dataToPaddingY?: DataToStyle;
+  className?: string;
+}
+
 /**
  * Renders DOM for the text output based on the provided unit converters.
- *
- * @param {Object<*>} props Component props.
- * @param {Object<*>} props.element Story element.
- * @param {Function} props.dataToStyleX dataToStyleX function.
- * @param {Function} props.dataToStyleY dataToStyleY function.
- * @param {Function} props.dataToFontSizeY dataToFontSizeY function. Falls back to dataToStyleY if not provided.
- * @param {Function} props.dataToPaddingX dataToPaddingX function. Falls back to dataToStyleX if not provided.
- * @param {Function} props.dataToPaddingY dataToPaddingY function. Falls back to dataToStyleX if not provided.
- * @param {string} props.className Class name.
- * @return {*} Rendered component.
  */
 function TextOutputWithUnits({
   element,
@@ -60,7 +59,7 @@ function TextOutputWithUnits({
   dataToPaddingX,
   dataToPaddingY,
   className,
-}) {
+}: TextOutputWithUnitsProps) {
   const {
     content: rawContent,
     backgroundColor,
@@ -132,24 +131,24 @@ function TextOutputWithUnits({
     background: 'none',
     lineHeight,
     overflowWrap: 'break-word',
-  };
+  } as CSSProperties;
 
   const highlightCloneStyle = {
     ...highlightStyle,
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
-  };
+  } as CSSProperties;
 
-  const marginStyle = (el) => {
+  const marginStyle = (el: TextElement): CSSProperties => {
     const { marginOffset } = calcFontMetrics(el);
     return {
       display: 'block',
       position: 'relative',
       left: 0,
       top: '0',
-      margin: `${dataToPaddingY(-marginOffset / 2)} 0`,
+      margin: `${dataToPaddingY ? dataToPaddingY(-marginOffset / 2) : 0} 0`,
       /* stylelint-disable-next-line */
       WebkitBoxDecorationBreak: 'clone',
       boxDecorationBreak: 'clone',
@@ -167,7 +166,7 @@ function TextOutputWithUnits({
     borderRadius: `${borderRadius?.topLeft || 0}px ${
       borderRadius?.topRight || 0
     }px ${borderRadius?.bottomRight || 0}px ${borderRadius?.bottomLeft || 0}px`,
-  };
+  } as CSSProperties;
 
   const backgroundTextStyle = {
     ...textStyle,
@@ -226,14 +225,4 @@ function TextOutputWithUnits({
   );
 }
 
-TextOutputWithUnits.propTypes = {
-  element: StoryPropTypes.textContent.isRequired,
-  dataToStyleX: PropTypes.func.isRequired,
-  dataToStyleY: PropTypes.func.isRequired,
-  dataToFontSizeY: PropTypes.func,
-  dataToPaddingX: PropTypes.func,
-  dataToPaddingY: PropTypes.func,
-  className: PropTypes.string,
-};
-
 export default TextOutputWithUnits;

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

@@ -14,26 +14,39 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+import type {
+  Padding,
+  TextAlign,
+  TextElement,
+  TextElementFont,
+} from '@googleforcreators/elements';
+
+type DataToStyle = (prop: number) => string;
+interface Props {
+  font: TextElementFont;
+  fontSize: number;
+  lineHeight: number;
+  padding?: Padding;
+  textAlign: TextAlign;
+}
 /**
  * Generates paragraph text style for a text element.
- *
- * @param {Object} props Props.
- * @param {function(number):any} dataToStyleX Converts a x-unit to CSS.
- * @param {function(number):any} dataToStyleY Converts a y-unit to CSS.
- * @param {function(number):any} dataToFontSizeY Converts a font-size metric to
- * y-unit CSS.
- * @param {Object<*>} element Text element properties.
- * @param {function(number):any} dataToPaddingY Falls back to dataToStyleX if not provided.
- * @return {Object} The map of text style properties and values.
  */
 export function generateParagraphTextStyle(
-  props,
-  dataToStyleX,
-  dataToStyleY,
+  props: Props,
+  dataToStyleX: DataToStyle,
+  dataToStyleY: DataToStyle,
   dataToFontSizeY = dataToStyleY,
-  element,
+  element: TextElement,
   dataToPaddingY = dataToStyleY
-) {
+): Omit<CSSProperties, 'font'> & {
+  dataToEditorY: DataToStyle;
+  font: TextElementFont;
+} {
   const { font, fontSize, lineHeight, padding, textAlign } = props;
   const { marginOffset } = calcFontMetrics(element);
 
@@ -59,7 +72,14 @@ export function generateParagraphTextStyle(
   };
 }
 
-export const generateFontFamily = ({ family, fallbacks } = {}) => {
+interface GenerateFontFamilyProps {
+  family?: string;
+  fallbacks?: string[];
+}
+export const generateFontFamily = ({
+  family,
+  fallbacks,
+}: GenerateFontFamilyProps = {}) => {
   const genericFamilyKeywords = [
     'cursive',
     'fantasy',
@@ -80,11 +100,11 @@ export const generateFontFamily = ({ family, fallbacks } = {}) => {
   return fontFamilyDisplay;
 };
 
-export const getHighlightLineheight = function (
-  lineHeight,
+export const getHighlightLineheight = (
+  lineHeight: number,
   verticalPadding = 0,
   unit = 'px'
-) {
+) => {
   if (verticalPadding === 0) {
     return `${lineHeight}em`;
   }
@@ -93,7 +113,7 @@ export const getHighlightLineheight = function (
   }${unit})`;
 };
 
-export function calcFontMetrics(element) {
+export function calcFontMetrics(element: TextElement) {
   if (!element.font?.metrics) {
     return {
       contentAreaPx: 0,

packages/element-library/src/types.ts

@@ -19,5 +19,6 @@
 // delete this file once complete.
 
 export * from './constants';
+export * from './utils/textMeasurements';
 
 export {};