TypeScript: convert storyProvider

packages/animation/src/types/element.ts

@@ -19,7 +19,7 @@
  */
 import type { DimensionableElement } from '@googleforcreators/units';
 
-export type ElementId = string | number;
+export type ElementId = string;
 
 export interface Element extends DimensionableElement {
   id: ElementId;

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

@@ -13,10 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-export { default as SnackbarContext } from './snackbar/context';
-export { default as SnackbarProvider } from './snackbar/snackbarProvider';
-export { useSnackbar } from './snackbar/useSnackbar';
+export * from './snackbar';
 export { default as PopupContext } from './popup/context';
 export { default as PopupProvider } from './popup/popupProvider';
 export { usePopup } from './popup/usePopup';

packages/design-system/src/contexts/snackbar/context.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 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 { createContext } from '@googleforcreators/react';
+
+/**
+ * Internal dependencies
+ */
+import type { SnackbarState } from '../../types/snackbar';
+
+export default createContext<SnackbarState>({
+  showSnackbar: () => false,
+  clearSnackbar: () => false,
+  removeSnack: () => false,
+  currentSnacks: [],
+  placement: '',
+});

packages/design-system/src/contexts/snackbar/context.js → packages/design-system/src/contexts/snackbar/index.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2020 Google LLC
+ * 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.
@@ -13,10 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-/**
- * External dependencies
- */
-import { createContext } from '@googleforcreators/react';
-
-export default createContext({});
+export { default as SnackbarContext } from './context';
+export { default as SnackbarProvider } from './snackbarProvider';
+export { useSnackbar } from './useSnackbar';

packages/design-system/src/contexts/snackbar/snackbarProvider.js → packages/design-system/src/contexts/snackbar/snackbarProvider.tsx

@@ -17,19 +17,27 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useCallback, useMemo, useState } from '@googleforcreators/react';
 import { v4 as uuidv4 } from 'uuid';
+import type { ReactNode } from 'react';
+
 /**
  * Internal dependencies
  */
-import { Placement } from '../../components/snackbar/constants';
+import type { Notification } from '../../types/snackbar';
 import Context from './context';
 
-function SnackbarProvider({ children, placement = 'bottom' }) {
-  const [notifications, setNotifications] = useState([]);
+interface SnackbarProviderProps {
+  children: ReactNode;
+  placement?: 'bottom' | 'top';
+}
+function SnackbarProvider({
+  children,
+  placement = 'bottom',
+}: SnackbarProviderProps) {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
 
-  const remove = useCallback((toRemove) => {
+  const remove = useCallback((toRemove: Notification | Notification[]) => {
     setNotifications((currentNotifications) =>
       currentNotifications.filter((item) => {
         if (Array.isArray(toRemove)) {
@@ -40,7 +48,7 @@ function SnackbarProvider({ children, placement = 'bottom' }) {
     );
   }, []);
 
-  const create = useCallback((notification) => {
+  const create = useCallback((notification: Omit<Notification, 'id'>) => {
     const newNotification = {
       id: uuidv4(),
       ...notification,
@@ -71,9 +79,4 @@ function SnackbarProvider({ children, placement = 'bottom' }) {
   return <Context.Provider value={state}>{children}</Context.Provider>;
 }
 
-SnackbarProvider.propTypes = {
-  placement: Placement,
-  children: PropTypes.node,
-};
-
 export default SnackbarProvider;

packages/story-editor/src/app/story/useStory.js → packages/design-system/src/contexts/snackbar/useSnackbar.ts

@@ -18,13 +18,16 @@
  * External dependencies
  */
 import { identity, useContextSelector } from '@googleforcreators/react';
+
 /**
  * Internal dependencies
  */
+import type { SnackbarState } from '../../types/snackbar';
 import Context from './context';
 
-function useStory(selector) {
-  return useContextSelector(Context, selector ?? identity);
+export function useSnackbar(): SnackbarState;
+export function useSnackbar<T>(
+  selector: (state: SnackbarState) => T | SnackbarState = identity
+) {
+  return useContextSelector(Context, selector);
 }
-
-export default useStory;

packages/design-system/src/types.ts

@@ -22,5 +22,7 @@ export * from './components/keyboard';
 export * from './types/keyboard';
 export * from './utils/constants';
 export * from './utils/localStore';
+export * from './contexts/snackbar';
+export * from './utils/sessionStore';
 
 export {};

packages/design-system/src/types/snackbar.ts

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+export interface Notification {
+  id?: string;
+  key?: string;
+  'aria-label'?: string;
+  message: string;
+  onDismiss?: () => void;
+  dismissible?: boolean;
+}
+export interface SnackbarState {
+  showSnackbar: (snackbar: Omit<Notification, 'id'>) => void;
+  clearSnackbar: () => void;
+  removeSnack: (toRemove: Notification | Notification[]) => void;
+  currentSnacks: Notification[];
+  placement: string;
+}

packages/design-system/src/utils/localStore.ts

@@ -40,17 +40,15 @@ export const LOCAL_STORAGE_PREFIX = {
   MEDIA_RECORDING_VIDEO_EFFECT: 'web_stories_media_recording_video_effect',
 };
 
-function getMessage(err: unknown): string {
-  return err instanceof Error ? err.message : 'Unknown error';
-}
-
 function getItemByKey(key: string): unknown {
   let parsed: unknown = null;
   try {
     const stored = localStorage.getItem(key);
     parsed = stored !== null ? JSON.parse(stored) : stored;
   } catch (err) {
-    void trackError('local_storage_read', getMessage(err));
+    if (err instanceof Error) {
+      void trackError('local_storage_read', err.message);
+    }
   }
   return parsed;
 }
@@ -59,7 +57,9 @@ function setItemByKey(key: string, data: unknown) {
   try {
     localStorage.setItem(key, JSON.stringify(data));
   } catch (err) {
-    void trackError('local_storage_write', getMessage(err));
+    if (err instanceof Error) {
+      void trackError('local_storage_write', err.message);
+    }
   }
 }
 

packages/design-system/src/utils/sessionStore.js → packages/design-system/src/utils/sessionStore.ts

@@ -23,31 +23,39 @@ export const SESSION_STORAGE_PREFIX = {
   LOCAL_AUTOSAVE_PREFIX: 'wp_stories_autosave_story',
 };
 
-export function getItemByKey(key) {
+export function getItemByKey(key: string) {
   let parsed;
   try {
     const stored = window.sessionStorage.getItem(key);
-    parsed = JSON.parse(stored);
+    if (stored) {
+      parsed = JSON.parse(stored) as unknown;
+    }
   } catch (err) {
-    trackError('session_storage_read', err.message);
+    if (err instanceof Error) {
+      void trackError('session_storage_read', err.message);
+    }
   }
 
   return parsed;
 }
 
-export function setItemByKey(key, data) {
+export function setItemByKey(key: string, data: Record<string, unknown>) {
   try {
     window.sessionStorage.setItem(key, JSON.stringify(data));
   } catch (err) {
-    trackError('session_storage_write', err.message);
+    if (err instanceof Error) {
+      void trackError('session_storage_write', err.message);
+    }
   }
 }
 
-export function deleteItemByKey(key) {
+export function deleteItemByKey(key: string) {
   try {
     window.sessionStorage.removeItem(key);
   } catch (err) {
-    trackError('session_storage_delete', err.message);
+    if (err instanceof Error) {
+      void trackError('session_storage_delete', err.message);
+    }
   }
 }
 

packages/design-system/tsconfig.json

@@ -11,9 +11,12 @@
     { "path": "../tracking" }
   ],
   "include": [
-    "src/types.ts",
     "src/components/keyboard/*",
+    "src/components/snackbar/constants.ts",
+    "src/contexts/snackbar/*",
     "src/types/*",
+    "src/types.ts",
+    "src/utils/*.ts",
     "src/utils/constants.ts",
     "src/utils/localStore.ts"
   ]

packages/element-library/package.json

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

packages/element-library/src/types.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+// Temporary workaround while this package is not fully converted yet.
+// Adjust tsconfig.json and "types" field in package.json and then
+// delete this file once complete.
+
+export * from './constants';
+
+export {};

packages/element-library/tsconfig.json

@@ -18,5 +18,9 @@
     { "path": "../transform" },
     { "path": "../units" }
   ],
-  "include": ["src/types/**/*"]
+  "include": [
+    "src/constants.ts",
+    "src/types.ts",
+    "src/types"
+  ]
 }

packages/elements/src/types/data.ts

@@ -14,6 +14,17 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import type { Pattern } from '@googleforcreators/patterns';
+import type { AudioResource } from '@googleforcreators/media';
+
+/**
+ * Internal dependencies
+ */
+import type { Page } from './page';
+
 export type FontStyle = 'normal' | 'italic' | 'regular';
 export enum FontVariantStyle {
   Normal = 0,
@@ -67,3 +78,17 @@ export interface ProductData {
   productTitle: string;
   productUrl: string;
 }
+
+// Data retrieved as part of the raw data from the backend, used for example in the templates, in migration.
+export interface StoryData {
+  version: number;
+  pages: Page[];
+  autoAdvance: boolean;
+  defaultPageDuration: number;
+  currentStoryStyles: {
+    colors: Pattern[];
+  };
+  backgroundAudio?: {
+    resource: AudioResource;
+  };
+}

packages/elements/src/types/element.ts

@@ -25,6 +25,7 @@ import type { ElementBox } from '@googleforcreators/units';
  * Internal dependencies
  */
 import type { ElementType } from './elementType';
+import type { ProductData } from './data';
 
 export interface Link {
   url: string;
@@ -106,3 +107,17 @@ export interface MediaElement extends BackgroundableElement {
 export interface SequenceMediaElement extends MediaElement {
   resource: SequenceResource;
 }
+
+export interface ProductElement extends Element {
+  type: ElementType.Product;
+  product: ProductData;
+}
+
+export interface TextElement extends Element {
+  content: string;
+  font: {
+    service: string;
+    family: string;
+    fallbacks: string[];
+  };
+}