refactor(utils): move openUrl to helpers

Author: brandyscarney

core/src/components/back-button/back-button.tsx

@@ -3,8 +3,8 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes } from '@utils/helpers';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { inheritAriaAttributes, openURL } from '@utils/helpers';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { arrowBackSharp, chevronBack } from 'ionicons/icons';
 
 import { config } from '../../global/config';

core/src/components/breadcrumb/breadcrumb.tsx

@@ -3,8 +3,8 @@ import dotsThreeRegular from '@phosphor-icons/core/assets/regular/dots-three.svg
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes } from '@utils/helpers';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { inheritAriaAttributes, openURL } from '@utils/helpers';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
 
 import { config } from '../../global/config';

core/src/components/button/button.tsx

@@ -2,9 +2,9 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, State, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
+import { inheritAriaAttributes, hasShadowDom, openURL } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonTheme, getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';

core/src/components/card/card.tsx

@@ -2,8 +2,8 @@ import type { ComponentInterface } from '@stencil/core';
 import { Element, Component, Host, Prop, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { inheritAttributes } from '@utils/helpers';
-import { createColorClasses, openURL } from '@utils/theme';
+import { inheritAttributes, openURL } from '@utils/helpers';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, Theme } from '../../interface';

core/src/components/fab-button/fab-button.tsx

@@ -2,9 +2,9 @@ import xRegular from '@phosphor-icons/core/assets/regular/x.svg';
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
-import { inheritAriaAttributes } from '@utils/helpers';
+import { inheritAriaAttributes, openURL } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { close } from 'ionicons/icons';
 
 import { config } from '../../global/config';

core/src/components/item/item.tsx

@@ -3,8 +3,8 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { inheritAttributes, raf } from '@utils/helpers';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { inheritAttributes, raf, openURL } from '@utils/helpers';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { chevronForward } from 'ionicons/icons';
 
 import { config } from '../../global/config';

core/src/components/router-link/router-link.tsx

@@ -1,6 +1,7 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Host, Prop, h } from '@stencil/core';
-import { createColorClasses, openURL } from '@utils/theme';
+import { openURL } from '@utils/helpers';
+import { createColorClasses } from '@utils/theme';
 
 import { getIonTheme } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';

core/src/index.ts

@@ -7,12 +7,11 @@ export { mdTransitionAnimation } from './utils/transition/md.transition';
 export { getTimeGivenProgression } from './utils/animation/cubic-bezier';
 export { createGesture } from './utils/gesture';
 export { initialize } from './global/ionic-global';
-export { componentOnReady } from './utils/helpers';
+export { componentOnReady, openURL } from './utils/helpers';
 export { LogLevel } from './utils/logging';
 export { isPlatform, Platforms, PlatformConfig, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
 export { IonicConfig, getMode, setupConfig } from './utils/config';
-export { openURL } from './utils/theme';
 export {
   LIFECYCLE_WILL_ENTER,
   LIFECYCLE_DID_ENTER,

core/src/utils/helpers.ts

@@ -3,7 +3,9 @@ import { focusElements } from '@utils/focus-visible';
 import { printIonError } from '@utils/logging';
 
 import type { Side } from '../components/menu/menu-interface';
+import type { RouterDirection } from '../components/router/utils/interface';
 import { config } from '../global/config';
+import type { AnimationBuilder } from '../interface';
 
 // TODO(FW-2832): types
 
@@ -434,3 +436,23 @@ export const shallowEqualStringMap = (
 export const isSafeNumber = (input: unknown): input is number => {
   return typeof input === 'number' && !isNaN(input) && isFinite(input);
 };
+
+const SCHEME = /^[a-z][a-z0-9+\-.]*:/;
+
+export const openURL = async (
+  url: string | undefined | null,
+  ev: Event | undefined | null,
+  direction: RouterDirection,
+  animation?: AnimationBuilder
+): Promise<boolean> => {
+  if (url != null && url[0] !== '#' && !SCHEME.test(url)) {
+    const router = document.querySelector('ion-router');
+    if (router) {
+      if (ev != null) {
+        ev.preventDefault();
+      }
+      return router.push(url, direction, animation);
+    }
+  }
+  return false;
+};

core/src/utils/theme.ts

@@ -1,5 +1,4 @@
-import type { RouterDirection } from '../components/router/utils/interface';
-import type { AnimationBuilder, Color, CssClassMap } from '../interface';
+import type { Color, CssClassMap } from '../interface';
 
 export const hostContext = (selector: string, el: HTMLElement): boolean => {
   return el.closest(selector) !== null;
@@ -34,23 +33,3 @@ export const getClassMap = (classes: string | string[] | undefined): CssClassMap
   getClassList(classes).forEach((c) => (map[c] = true));
   return map;
 };
-
-const SCHEME = /^[a-z][a-z0-9+\-.]*:/;
-
-export const openURL = async (
-  url: string | undefined | null,
-  ev: Event | undefined | null,
-  direction: RouterDirection,
-  animation?: AnimationBuilder
-): Promise<boolean> => {
-  if (url != null && url[0] !== '#' && !SCHEME.test(url)) {
-    const router = document.querySelector('ion-router');
-    if (router) {
-      if (ev != null) {
-        ev.preventDefault();
-      }
-      return router.push(url, direction, animation);
-    }
-  }
-  return false;
-};