@edvisor/product-language 0.1.1 → 0.3.0

package/src/lib/foundations/spacing/spacing.stories.mdx

@@ -0,0 +1,51 @@
+import { Meta, Description } from '@storybook/addon-docs';
+
+
+<Meta title="Foundations/Spacing" />
+
+# Spacing System
+
+All spacing for components and typography is done in increments of 8 pixels.
+This forms the basic unit of measurement for spacing.
+
+For more details, check out the guidelines on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/UI-Library-(in-progress)?node-id=388%3A364)
+
+## How to use
+
+```javascript
+import SPACING from './spacing'
+
+//get the token value
+SPACING.[`YOUR-VALUE-HERE`]
+```
+
+## When to use
+
+You can set this values from this props:
+
+- width
+- heigth
+- margin
+- padding
+
+
+## List of Values
+
+| Name | Value |
+| ---- | ----- |
+| `Size2` | 2px|
+| `Size4` | 4px|
+| `Size8` | 8px|
+| `Size12` | 12px|
+| `Size16` | 16px|
+| `Size24` | 24px|
+| `Size32` | 32px|
+| `Size64` | 64px|
+| `Size96` | 96px|
+| `Size128` | 128px|
+| `Size192` | 192px|
+| `Size256` | 256px|
+| `Size384` | 384px|
+| `Size512` | 512px|
+| `Size640` | 640px|
+| `Size768` | 768px|

package/src/lib/foundations/spacing/spacing.ts

@@ -0,0 +1,18 @@
+export enum SPACING {
+  Size2 = '2px',
+  Size4 = '4px',
+  Size8 = '8px',
+  Size12 = '12px',
+  Size16 = '16px',
+  Size24 = '24px',
+  Size32 = '32px',
+  Size64 = '64px',
+  Size96 = '96px',
+  Size128 = '128px',
+  Size192 = '192px',
+  Size256 = '256px',
+  Size384 = '384px',
+  Size512 = '512px',
+  Size640 = '640px',
+  Size768 = '768px',
+}

package/src/lib/foundations/typography/constants.ts

@@ -0,0 +1,25 @@
+
+export const enum FontWeight {
+  Regular = '400',
+  Medium = '500',
+  SemiBold = '600',
+}
+
+export const FontSize = {
+  a: '13px',
+  b: '14px',
+  c: '16px',
+  d: '18px',
+  e: '20px',
+  f: '28px',
+  g: '36px',
+} as const
+
+export const LineHeight = {
+  a: '16px',
+  b: '20px',
+  c: '24px',
+  d: '28px',
+  e: '32px',
+  f: '44px',
+} as const

package/src/lib/foundations/typography/fonts.ts

@@ -0,0 +1,205 @@
+export const InterFontFace = `
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
+    U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
+    format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
+    format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
+}
+`

package/src/lib/foundations/typography/index.tsx

@@ -0,0 +1 @@
+export * from './typography'

package/src/lib/foundations/typography/text-aspect-flags.ts

@@ -0,0 +1,61 @@
+import { bitwiseOr, isDefined, MappedEnum, PropsWithChildren, RequireOnlyOne } from '@helpers'
+import { Text } from '../color-system'
+
+export const enum TextAspects {
+  default = 1,
+  subdued = 2,
+  light = 4,
+  critical = 8,
+  success = 16,
+  onPrimary = 32,
+  onCritical = 64,
+}
+
+type TextOptions<T> = MappedEnum<typeof TextAspects, T>
+
+function toTextAspect(n: number): TextAspects {
+  switch (n) {
+    case TextAspects.subdued: return TextAspects.subdued
+    case TextAspects.light: return TextAspects.light
+    case TextAspects.critical: return TextAspects.critical
+    case TextAspects.success: return TextAspects.success
+    case TextAspects.onPrimary: return TextAspects.onPrimary
+    case TextAspects.onCritical: return TextAspects.onCritical
+    default: return TextAspects.default
+  }
+}
+
+const TextAspectColors = {
+  [TextAspects.default]: Text.Default,
+  [TextAspects.subdued]: Text.Subdued,
+  [TextAspects.light]: Text.Light,
+  [TextAspects.onPrimary]: Text.OnPrimary,
+  [TextAspects.onCritical]: Text.OnPrimary,
+  [TextAspects.success]: Text.Success,
+  [TextAspects.critical]: Text.Critical,
+}
+
+export type ITextAspectProps = Partial<RequireOnlyOne<TextOptions<boolean>>> & PropsWithChildren
+
+export type TransientTextOptions = Omit<TextOptions<boolean>, 'onCritical' | 'onPrimary'> & {
+  $onCritical?: boolean
+  $onPrimary?: boolean
+}
+
+export type ITransientTextAspectProps = Partial<RequireOnlyOne<TransientTextOptions>> & PropsWithChildren
+
+export function getTextAspect(props: ITextAspectProps & ITransientTextAspectProps) {
+  return TextAspectColors[
+    toTextAspect(
+      bitwiseOr([
+        props.default,
+        props.subdued,
+        props.light,
+        props.critical,
+        props.success,
+        isDefined(props.onPrimary) ? props.onPrimary : props.$onPrimary,
+        isDefined(props.onCritical) ? props.onCritical : props.$onCritical,
+      ])
+    )
+  ]
+}

package/src/lib/foundations/typography/typography.tsx

@@ -0,0 +1,102 @@
+import { css } from 'styled-components'
+import { getTextAspect, ITransientTextAspectProps } from './text-aspect-flags'
+import { FontWeight, FontSize, LineHeight } from './constants'
+import { is } from '@helpers'
+import { InterFontFace } from './fonts'
+
+export type ILabelProps = ITransientTextAspectProps & {
+  default?: boolean,
+  subtle?: boolean,
+  strong?: boolean, 
+}
+
+export type IBodyProps = ITransientTextAspectProps & {
+  default?: boolean,
+  strong?: boolean, 
+}
+
+const LightText = css` 
+  color: ${getTextAspect({ light: true })};
+`
+
+const Base = css<ITransientTextAspectProps>`
+  color: ${(props) => getTextAspect(props)};
+  ${InterFontFace}
+  font-family: 'Inter';
+`
+
+const Display = css<ITransientTextAspectProps>`
+  ${Base}
+  font-weight: ${FontWeight.Regular};
+  font-size: ${FontSize.g};
+  line-height: ${LineHeight.f};
+`
+
+const Heading1 = css<ITransientTextAspectProps>`
+  ${Base}
+  font-weight: ${FontWeight.SemiBold};
+  font-size: ${FontSize.f};
+  line-height: ${LineHeight.e};
+`
+
+const Heading2 = css<ITransientTextAspectProps>`
+  ${Heading1}
+  font-size: ${FontSize.e};
+  line-height: ${LineHeight.d};
+`
+
+const Heading3 = css<ITransientTextAspectProps>`
+  ${Heading1}
+  font-size: ${FontSize.c};
+  line-height: ${LineHeight.c};
+`
+
+const Heading4 = css<ITransientTextAspectProps>`
+  ${Heading1}
+  font-size: ${FontSize.b};
+  line-height: ${LineHeight.b};
+`
+
+const Body = css<IBodyProps>`
+  ${Base}
+  font-weight: ${({ strong }) => is(strong) ? FontWeight.Medium : FontWeight.Regular};
+  font-size: ${FontSize.b};
+  line-height: ${LineHeight.b};
+`
+
+const BodyLarge = css<IBodyProps>`
+  ${Base}
+  font-weight: ${({ strong }) => is(strong) ? FontWeight.SemiBold : FontWeight.Regular};
+  font-size: ${FontSize.d};
+  line-height: ${LineHeight.d};
+`
+
+const Caption = css<ITransientTextAspectProps>`
+  ${Base}
+  font-weight: ${FontWeight.Regular};
+  font-size: ${FontSize.a};
+  line-height: ${LineHeight.a};
+`
+
+const Label = css<ILabelProps>`
+  ${Base}
+  font-weight:  ${({ strong }) => is(strong) ? FontWeight.Medium : FontWeight.Regular};
+  font-size: ${({ subtle }) => is(subtle) ? FontSize.a : FontSize.b};
+  line-height: ${({ subtle }) => is(subtle) ? LineHeight.a : LineHeight.b};
+`
+
+export const Typography = {
+  Display,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Body,
+  BodyLarge,
+  Caption,
+  Label,
+}
+
+export const _Typography = {
+  LightText,
+}

package/src/lib/helpers/generic-types.ts

@@ -0,0 +1,44 @@
+// eslint-disable-next-line no-restricted-syntax
+import React, { FC as FunctionComponent, ForwardRefExoticComponent, ForwardRefRenderFunction, PropsWithChildren as PWC, PropsWithoutRef, RefAttributes } from 'react'
+import { Slot } from './slots'
+
+/** @see https://stackoverflow.com/a/49725198/29182 */
+export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
+T,
+Exclude<keyof T, Keys>
+> &
+{
+  [K in Keys]-?: Required<Pick<T, K>> &
+    Partial<Record<Exclude<Keys, K>, undefined>>;
+}[Keys];
+
+export type MappedEnum<E, T> = {
+  [key in keyof E]: T;
+}
+
+export type Values<T> = T[keyof T];
+
+export type PropsWithChildren<T = unknown> = PWC<T>
+
+// Our FC type adds the ability to specify sub-components such as Slots
+// also, just good to wrap imports from 3rd parties in general
+export type FC<
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  P = {}, 
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  E extends { [x: symbol]: FunctionComponent<PropsWithChildren> | typeof Slot } = {}
+> = FunctionComponent<P> 
+  & { 
+    [key in keyof E]: E[key]
+  }
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type ExtensibleForwardRef<T, P = {}, E = {}> = ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>
+  & {
+    [key in keyof E]: E[key]
+  }
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function forwardRef<T, P = {}, E = {}>(render: ForwardRefRenderFunction<T, P>): ExtensibleForwardRef<T, P, E> {
+  return React.forwardRef(render) as ExtensibleForwardRef<T, P, E>
+}

package/src/lib/helpers/index.ts

@@ -0,0 +1,6 @@
+export * from './safe-navigation'
+export * from './slots'
+export * from './generic-types'
+export * from './numbers'
+export * from './nothing'
+export * from './strings'

package/src/lib/helpers/nothing.tsx

@@ -0,0 +1,18 @@
+import { FC, PropsWithChildren } from './generic-types'
+import { isDefined } from './safe-navigation'
+
+// eslint-disable-next-line no-null/no-null
+export const Nothing: FC = () => null
+
+export function maybeRender<T>(prop: T, JSX: JSX.Element) {
+  return isDefined(prop) && Boolean(prop) ? JSX : <Nothing />
+}
+
+interface IIfProps {
+  is: unknown
+}
+
+export const If: FC<PropsWithChildren<IIfProps>> = (props) => {
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return maybeRender(props.is, <>{props.children}</>)
+}

package/src/lib/helpers/numbers.ts

@@ -0,0 +1,67 @@
+export type Hex = `#${string}`
+
+export function clamp(a: number, b: number, c: number) {
+  return Math.max(a, Math.min(b, c))
+}
+
+export function toHex(n: number, length: number): Hex {
+  return `#${n.toString(16).padStart(length, '0').toUpperCase()}`
+}
+
+export function concatHex(a: Hex, b: Hex): Hex {
+  return `#${a.slice(1) + b.slice(1)}`
+}
+
+/** given an array of boolean flags, bitwiseOr interprets them as an unsigned integer
+ * 
+ * ```ts
+ * bitwiseOr([false, true, false, true]) => 5 // 0b0101
+ * ```
+ * 
+ * This is useful for indexing into an enum:
+ * 
+ * ```ts
+ * const enum Level {
+ *   default = 0,
+ *   info = 0,
+ *   danger = 1,
+ *   warning = 2
+ * }
+ * 
+ * interface IProps {
+ *  info?: boolean
+ *  danger?: boolean
+ *  warning?: boolean
+ * }
+ * 
+ * function toLevel(n: number): Level {
+ *   switch (n) {
+ *     case Level.info: return Level.info
+ *     case Level.danger: return Level.danger
+ *     case Level.warning: return Level.warning
+ *     default: return Level.default
+ *   }
+ * }
+ * 
+ * const level = bitwiseOr([props.info, props.danger, props.warning])
+ * 
+ * const levelEnum = toLevel(level)
+ * ```
+*/
+export function bitwiseOr(flags: unknown[]): number {
+  return flags.reduce((mask: number, flag, i) => mask | (Number(flag) << i), 0)
+}
+
+
+/** given a number, it returns the number formed by the rightmost set bit as 1 and the 0s that comes after it
+ * 
+ * ```ts
+ * getRightmostSetBitNumber(12) => 4 // 12(1100) => 4(100)
+ * getRightmostSetBitNumber(40) => 8 // 40(101000) => 8(1000)
+ * ```
+ * 
+ * */
+
+export function getRightmostSetBitNumber(n: number) {
+  return n & -n
+}

package/src/lib/helpers/safe-navigation.ts

@@ -0,0 +1,44 @@
+
+/** even though we have null disabled in the repo,
+ * I still would not want isNil to skip checking null
+ * it is for juuuuust in case a third party sends us a null
+ * or something, and the types are not correct
+ */
+
+/* eslint-disable no-null/no-null */
+/* eslint-disable @typescript-eslint/ban-types */
+
+export function isNil<T>(value: T | undefined | null): value is undefined | null {
+  return value === null || value === undefined
+}
+
+export function isDefined<T>(value: T | undefined | null): value is T {
+  return !isNil(value)
+}
+
+export function defaultTo<T>(value: T | undefined | null, fallback: T): T {
+  return isDefined(value) ? value : fallback
+}
+
+export function isEmpty<T extends { length: number }>(obj: T) {
+  return obj.length < 1
+}
+
+/** used for evaluating tri-state logic (true | false | undefined) */
+export function is (pred?: boolean): boolean {
+  return isDefined(pred) && pred
+}
+
+export function safeArray<T>(arr: T[] | undefined | null): T[] {
+  return isDefined(arr) ? arr : []
+}
+
+export function safeCallback <T>(f?: (e: T) => void, e?: T) {
+  if (isDefined(f)) {
+    if (isDefined(e)) {
+      f(e)
+    } else {
+      (f as () => void)()
+    }
+  }
+}