declare other global typings (#2678)

* declare other global typings

* Cleanup old typings

* Create common typings and fix import paths

* Remove old typings folder

* Remove measureme typings

* Move fsTagName global interface to recorderType file

Author: ethanshar

src/commons/asBaseComponent.tsx

@@ -4,6 +4,7 @@ import * as Modifiers from './modifiers';
 import {Scheme, SchemeChangeListener, ThemeManager} from '../style';
 import forwardRef from './forwardRef';
 import UIComponent from './UIComponent';
+import type {ThemeComponent} from '../typings/common';
 
 export interface BaseComponentInjectedProps {
   /**
@@ -41,7 +42,7 @@ function asBaseComponent<PROPS, STATICS = {}>(WrappedComponent: React.ComponentT
       Scheme.removeChangeListener(this.appearanceListener);
     }
 
-    appearanceListener: SchemeChangeListener = (colorScheme) => {
+    appearanceListener: SchemeChangeListener = colorScheme => {
       // iOS 13 and above will trigger this call with the wrong colorScheme value. So just ignore returned colorScheme for now
       // https://github.com/facebook/react-native/issues/28525
       // this.setState({colorScheme: Appearance.getColorScheme()});

src/commons/modifiers.ts

@@ -5,6 +5,8 @@ import {BorderRadiusesLiterals} from '../style/borderRadiuses';
 import TypographyPresets from '../style/typographyPresets';
 import {SpacingLiterals} from '../style/spacings';
 import {colorsPalette} from '../style/colorsPalette';
+import type {Dictionary} from '../typings/common';
+
 export const FLEX_KEY_PATTERN = /^flex(G|S)?(-\d*)?$/;
 export const PADDING_KEY_PATTERN = new RegExp(`padding[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);
 export const MARGIN_KEY_PATTERN = new RegExp(`margin[LTRBHV]?-([0-9]*|${Spacings.getKeysPattern()})`);

src/components/button/index.tsx

@@ -4,10 +4,10 @@ import {Platform, StyleSheet, LayoutAnimation, LayoutChangeEvent, ImageStyle, Te
 import {asBaseComponent, forwardRef, Constants} from '../../commons/new';
 import {Colors, Typography, BorderRadiuses} from 'style';
 import TouchableOpacity from '../touchableOpacity';
+import type {Dictionary} from '../../typings/common';
 import Text from '../text';
 import Image from '../image';
 import Icon from '../icon';
-
 import {
   ButtonSize,
   ButtonAnimationDirection,
@@ -17,9 +17,10 @@ import {
   DEFAULT_PROPS,
   ButtonSizeProp
 } from './ButtonTypes';
+import {PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE} from './ButtonConstants';
+
 export {ButtonSize, ButtonAnimationDirection, ButtonProps};
 
-import {PADDINGS, HORIZONTAL_PADDINGS, MIN_WIDTH, DEFAULT_SIZE} from './ButtonConstants';
 
 class Button extends PureComponent<Props, ButtonState> {
   static displayName = 'Button';

src/components/icon/index.tsx

@@ -3,7 +3,7 @@ import React, {useMemo, forwardRef} from 'react';
 import {Image, ImageProps, StyleSheet} from 'react-native';
 import {asBaseComponent, BaseComponentInjectedProps, MarginModifiers, Constants} from '../../commons/new';
 import {getAsset, isSvg, isBase64ImageContent} from '../../utils/imageUtils';
-import {RecorderProps} from '../../../typings/recorderTypes';
+import {RecorderProps} from '../../typings/recorderTypes';
 import SvgImage from '../svgImage';
 
 export type IconProps = Omit<ImageProps, 'source'> &

src/components/image/index.tsx

@@ -18,7 +18,7 @@ import {
   BaseComponentInjectedProps,
   MarginModifiers
 } from '../../commons/new';
-import {RecorderProps} from '../../../typings/recorderTypes';
+import {RecorderProps} from '../../typings/recorderTypes';
 import {getAsset, isSvg} from '../../utils/imageUtils';
 import Overlay, {OverlayTypeType, OverlayIntensityType} from '../overlay';
 import SvgImage from '../svgImage';

src/components/picker/types.tsx

@@ -5,6 +5,7 @@ import {ModalTopBarProps} from '../modal/TopBar';
 // TODO: Replace with new TextField Props after migration to new TextField has completed
 // import {TextFieldProps} from '../../../typings/components/Inputs';
 import {TextFieldMethods, TextFieldProps as NewTextFieldProps} from '../../incubator/TextField';
+import type {ThemeComponent} from '../../typings/common';
 
 // Note: enum values are uppercase due to legacy
 export enum PickerModes {

src/components/sortableList/SortableListContext.ts

@@ -1,6 +1,7 @@
 import {createContext} from 'react';
 import {ViewProps} from 'react-native';
 import {SharedValue} from 'react-native-reanimated';
+import type {Dictionary} from '../../typings/common';
 import {Data, SortableListItemProps} from './types';
 
 export interface SortableListContextType<ItemT extends SortableListItemProps> {

src/components/sortableList/index.tsx

@@ -8,6 +8,8 @@ import SortableListContext from './SortableListContext';
 import SortableListItem, {DEFAULT_LIST_ITEM_HEIGHT} from './SortableListItem';
 import {useDidUpdate, useThemeProps} from 'hooks';
 import {SortableListProps, SortableListItemProps} from './types';
+import type {Dictionary} from '../../typings/common';
+
 export {SortableListProps, SortableListItemProps};
 
 function generateItemsOrder<ItemT extends SortableListItemProps>(data: SortableListProps<ItemT>['data']) {

src/components/tabController/index.tsx

@@ -10,6 +10,8 @@ import TabBarItem, {TabControllerItemProps} from './TabBarItem';
 import TabPage from './TabPage';
 import PageCarousel from './PageCarousel';
 import useImperativeTabControllerHandle, {TabControllerImperativeMethods} from './useImperativeTabControllerHandle';
+import type {ThemeComponent} from '../../typings/common';
+
 export {TabControllerItemProps, TabControllerImperativeMethods};
 
 interface TabControllerStatics {

src/components/text/index.tsx

@@ -12,7 +12,7 @@ import {
   FlexModifiers,
   Constants
 } from '../../commons/new';
-import {RecorderProps} from '../../../typings/recorderTypes';
+import {RecorderProps} from '../../typings/recorderTypes';
 import {Colors} from 'style';
 import {TextUtils} from 'utils';
 

src/components/textField/TextFieldMigrator.tsx

@@ -4,6 +4,7 @@ import hoistStatics from 'hoist-non-react-statics';
 import OldTextField from './index';
 import NewTextField, {TextFieldStaticMembers, TextFieldProps} from '../../incubator/TextField';
 import {LogService} from '../../services';
+import type {Dictionary} from '../../typings/common';
 
 export interface TextFieldMigratorComponent
   extends React.ForwardRefExoticComponent<TextFieldProps>,

src/components/touchableOpacity/index.tsx

@@ -12,7 +12,7 @@ import {
   ForwardRefInjectedProps,
   ContainerModifiers
 } from '../../commons/new';
-import {RecorderProps} from '../../../typings/recorderTypes';
+import {RecorderProps} from '../../typings/recorderTypes';
 import IncubatorTouchableOpacity from '../../incubator/TouchableOpacity';
 import {ViewProps} from '../view';
 

src/components/view/index.tsx

@@ -2,7 +2,8 @@ import {useModifiers, useThemeProps} from 'hooks';
 import React, {useEffect, useMemo, useState} from 'react';
 import {View as RNView, SafeAreaView, Animated, ViewProps as RNViewProps, StyleProp, ViewStyle} from 'react-native';
 import {Constants, ContainerModifiers} from '../../commons/new';
-import {RecorderProps} from '../../../typings/recorderTypes';
+import type {ThemeComponent} from '../../typings/common';
+import type {RecorderProps} from '../../typings/recorderTypes';
 
 export interface ViewProps extends Omit<RNViewProps, 'style'>, ThemeComponent, ContainerModifiers, RecorderProps {
   /**

src/incubator/TextField/types.ts

@@ -9,7 +9,7 @@ import {
   ForwardRefInjectedProps
 } from '../../commons/new';
 import {TextProps} from '../../components/text';
-import {RecorderProps} from '../../../typings/recorderTypes';
+import {RecorderProps} from '../../typings/recorderTypes';
 import {PropsWithChildren, ReactElement} from 'react';
 import {ViewProps} from '../../components/view';
 

src/index.ts

@@ -126,7 +126,7 @@ export {
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';
 export {default as RadioButton, RadioButtonProps} from './components/radioButton';
 export {default as RadioGroup, RadioGroupProps} from './components/radioGroup';
-export type {RecorderProps} from '../typings/recorderTypes';
+export type {RecorderProps} from './typings/recorderTypes';
 export {default as ScrollBar, ScrollBarProps} from './components/scrollBar';
 export {default as SectionsWheelPicker, SectionsWheelPickerProps} from './components/sectionsWheelPicker';
 export {
@@ -189,14 +189,3 @@ export {
 // export {default as TextFieldTestKit} from './incubator/TextField/TextField.driver';
 
 // export {default as ButtonDriverFactory} from './components/button/Button.driver';
-//================ Manual typings (all those exports should be removed one day) ==========
-// export {
-//   // BaseInput,
-//   // TextArea,
-//   // TextField,
-//   // MaskedInput,
-//   // SharedTransition,
-//   // Toast,
-//   // BaseComponent,
-//   // PureBaseComponent
-// } from '../typings';

src/style/borderRadiuses.ts

@@ -1,12 +1,13 @@
 import _ from 'lodash';
 import Constants from '../commons/Constants';
+import type {Dictionary, ExtendTypeWith} from '../typings/common';
 
 // TODO: enable template type after we're ready to use TS 4.4.0
 // interface IBorderRadiusesLiterals {
 //   [key: `br${number}`]: number
 // }
 
-export const BorderRadiusesLiterals/* : IBorderRadiusesLiterals  */ = {
+export const BorderRadiusesLiterals /* : IBorderRadiusesLiterals  */ = {
   br0: Constants.isIOS ? 0 : 0,
   br10: Constants.isIOS ? 3 : 2,
   br20: 6,
@@ -18,7 +19,7 @@ export const BorderRadiusesLiterals/* : IBorderRadiusesLiterals  */ = {
 };
 
 export class BorderRadiuses {
-  loadBorders(borders: Dictionary<number>/*  IBorderRadiusesLiterals */) {
+  loadBorders(borders: Dictionary<number> /*  IBorderRadiusesLiterals */) {
     _.forEach(borders, (value, key) => {
       //@ts-ignore
       this[key] = value;

src/style/colors.ts

@@ -9,6 +9,7 @@ import DesignTokensDM from './designTokensDM';
 //@ts-ignore
 import ColorName from './colorName';
 import Scheme, {Schemes, SchemeType} from './scheme';
+import type {ExtendTypeWith} from '../typings/common';
 
 export type DesignToken = {semantic?: [string]; resource_paths?: [string]; toString: Function};
 export type TokensOptions = {primaryColor: string};

src/style/shadows.ts

@@ -1,6 +1,7 @@
 import {ShadowStyleIOS} from 'react-native';
 import _ from 'lodash';
 import Colors from './colors';
+import type {Dictionary} from '../typings/common';
 
 type Shadow = {top?: ShadowStyleIOS; bottom?: ShadowStyleIOS} & ShadowStyleIOS;
 

src/style/spacings.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import type {Dictionary, ExtendTypeWith} from '../typings/common';
 
 export const SpacingLiterals = {
   s1: 4,

src/style/themeManager.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import type {Context} from 'react';
+import type {Dictionary, Extendable} from '../typings/common';
 
 interface Theme {
   components: Extendable;

src/style/typography.ts

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import Constants from '../commons/Constants';
 
 import TypographyPresets from './typographyPresets';
+import type {Dictionary, ExtendTypeWith} from '../typings/common';
 
 type MeasureTextTypography = TextStyle & {allowFontScaling?: boolean};
 

src/typings/common.d.ts

@@ -0,0 +1,14 @@
+export interface Extendable {
+  [key: string]: any;
+}
+
+export type Constructor<T, TA = any> = new (...args: TA[]) => T;
+export type ExtendTypeWith<T extends Constructor<any>, OtherObject extends object> = Constructor<
+  InstanceType<T> & OtherObject,
+  ConstructorParameters<T>
+>;
+export type Dictionary<TYPE> = {[key: string]: TYPE};
+
+export interface ThemeComponent {
+  useCustomTheme?: boolean;
+}

typings/global.d.ts renamed to src/typings/module.d.ts

@@ -3,6 +3,9 @@ declare namespace globalThis {
   var _UILIB_TESTING: boolean;
 }
 
+// This support importing png files, typing wise
+declare module '*.png';
+
 declare namespace JSX {
   interface IntrinsicAttributes {
     fsTagName?: string;