feat: add typescript typings (#1)

Author: Naturalclar

.circleci/config.yml

@@ -81,6 +81,11 @@ aliases:
   name: Jest Unit Tests
   command: yarn test:jest
 
+- &tsc
+  name: TypeScript Checks
+  command: yarn test:tsc
+
+
 # -------------------------
 #          JOBS
 # -------------------------
@@ -133,7 +138,15 @@ jobs:
     - attach_workspace:
         at: ~/toolbar-android
     - run: *jest
-  
+
+  tsc:
+    <<: *linux_defaults
+    steps:
+    - attach_workspace:
+        at: ~/toolbar-android
+    - run: *tsc
+
+
   example-61-android-compile:
     <<: *android_defaults
     steps:
@@ -184,6 +197,9 @@ workflows:
     - jest:
         requires:
         - linux-checkout
+    - tsc:
+        requires:
+        - linux-checkout
     - example-61-android-compile:
         requires:
         - linux-checkout

index.d.ts

@@ -0,0 +1,150 @@
+// Type definitions for @react-native-community/toolbar-android
+// Type definitions based off what was originally implemented in @types/react-native
+
+import React from 'react';
+import {ImageURISource, NativeMethodsMixin, ViewProps} from 'react-native';
+
+type Constructor<T> = new (...args: any[]) => T;
+
+declare module '@react-native-community/toolbar-android' {
+  export type ToolbarAndroidAction = {
+    /**
+     *  title: required, the title of this action
+     */
+    title: string;
+
+    /**
+     * icon: the icon for this action, e.g. require('./some_icon.png')
+     */
+    icon?: ImageURISource;
+
+    /**
+     * show: when to show this action as an icon or hide it in the overflow menu: always, ifRoom or never
+     */
+    show?: 'always' | 'ifRoom' | 'never';
+
+    /**
+     * showWithText: boolean, whether to show text alongside the icon or not
+     */
+    showWithText?: boolean;
+  };
+
+  export interface ToolbarAndroidProps extends ViewProps {
+    /**
+     * Sets possible actions on the toolbar as part of the action menu. These are displayed as icons
+     * or text on the right side of the widget. If they don't fit they are placed in an 'overflow'
+     * menu.
+     *
+     * This property takes an array of objects, where each object has the following keys:
+     *
+     * * `title`: **required**, the title of this action
+     * * `icon`: the icon for this action, e.g. `require('./some_icon.png')`
+     * * `show`: when to show this action as an icon or hide it in the overflow menu: `always`,
+     * `ifRoom` or `never`
+     * * `showWithText`: boolean, whether to show text alongside the icon or not
+     */
+    actions?: ToolbarAndroidAction[];
+
+    /**
+     * Sets the content inset for the toolbar ending edge.
+     * The content inset affects the valid area for Toolbar content other
+     * than the navigation button and menu. Insets define the minimum
+     * margin for these components and can be used to effectively align
+     * Toolbar content along well-known gridlines.
+     */
+    contentInsetEnd?: number;
+
+    /**
+     * Sets the content inset for the toolbar starting edge.
+     * The content inset affects the valid area for Toolbar content
+     * other than the navigation button and menu. Insets define the
+     * minimum margin for these components and can be used to effectively
+     * align Toolbar content along well-known gridlines.
+     */
+    contentInsetStart?: number;
+
+    /**
+     * Sets the toolbar logo.
+     */
+    logo?: ImageURISource;
+
+    /**
+     * Sets the navigation icon.
+     */
+    navIcon?: ImageURISource;
+
+    /**
+     * Callback that is called when an action is selected. The only
+     * argument that is passed to the callback is the position of the
+     * action in the actions array.
+     */
+    onActionSelected?: (position: number) => void;
+
+    /**
+     * Callback called when the icon is selected.
+     */
+    onIconClicked?: () => void;
+
+    /**
+     * Sets the overflow icon.
+     */
+    overflowIcon?: ImageURISource;
+
+    /**
+     * Used to set the toolbar direction to RTL.
+     * In addition to this property you need to add
+     * android:supportsRtl="true"
+     * to your application AndroidManifest.xml and then call
+     * setLayoutDirection(LayoutDirection.RTL) in your MainActivity
+     * onCreate method.
+     */
+    rtl?: boolean;
+
+    /**
+     * Sets the toolbar subtitle.
+     */
+    subtitle?: string;
+
+    /**
+     * Sets the toolbar subtitle color.
+     */
+    subtitleColor?: string;
+
+    /**
+     * Used to locate this view in end-to-end tests.
+     */
+    testID?: string;
+
+    /**
+     * Sets the toolbar title.
+     */
+    title?: string;
+
+    /**
+     * Sets the toolbar title color.
+     */
+    titleColor?: string;
+  }
+
+  /**
+   * React component that wraps the Android-only [`Toolbar` widget][0]. A Toolbar can display a logo,
+   * navigation icon (e.g. hamburger menu), a title & subtitle and a list of actions. The title and
+   * subtitle are expanded so the logo and navigation icons are displayed on the left, title and
+   * subtitle in the middle and the actions on the right.
+   *
+   * If the toolbar has an only child, it will be displayed between the title and actions.
+   *
+   * Although the Toolbar supports remote images for the logo, navigation and action icons, this
+   * should only be used in DEV mode where `require('./some_icon.png')` translates into a packager
+   * URL. In release mode you should always use a drawable resource for these icons. Using
+   * `require('./some_icon.png')` will do this automatically for you, so as long as you don't
+   * explicitly use e.g. `{uri: 'http://...'}`, you will be good.
+   *
+   * [0]: https://developer.android.com/reference/android/support/v7/widget/Toolbar.html
+   */
+  class ToolbarAndroidComponent extends React.Component<ToolbarAndroidProps> {}
+  const ToolbarAndroidBase: Constructor<NativeMethodsMixin> &
+    typeof ToolbarAndroidComponent;
+  class ToolbarAndroid extends ToolbarAndroidBase {}
+  export default ToolbarAndroid;
+}

package.json

@@ -15,15 +15,15 @@
   "license": "MIT",
   "author": "Connectdotz <[email protected]>",
   "main": "js/ToolbarAndroid",
+  "types": "index.d.ts",
   "scripts": {
     "pack:npm": "npm pack",
-    "ci:test:flow": "yarn test:flow",
-    "ci:test:js": "yarn test:js",
     "start": "node node_modules/react-native/local-cli/cli.js start",
-    "test": "yarn test:eslint && yarn test:flow && yarn test:jest",
+    "test": "yarn test:eslint && yarn test:flow && yarn test:jest && yarn test:tsc",
     "test:eslint": "eslint .",
     "test:flow": "flow check",
-    "test:jest": "jest"
+    "test:jest": "jest",
+    "test:tsc":"tsc --noEmit"
   },
   "prettier": {
     "bracketSpacing": false,
@@ -42,7 +42,8 @@
   "dependencies": {},
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.4.0",
-    "@react-native-community/eslint-config": "^0.0.7",
+    "@react-native-community/eslint-config":"0.0.7",
+    "@types/react-native": "^0.61.7",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-plugin-module-resolver": "^3.1.3",
@@ -54,7 +55,8 @@
     "prettier": "^1.16.4",
     "react": "16.6.3",
     "react-native": "0.58.4",
-    "react-test-renderer": "^16.8.6"
+    "react-test-renderer": "^16.8.6",
+    "typescript": "3.7.5"
   },
   "peerDependencies": {
     "react": "*",
@@ -70,4 +72,4 @@
     "doc": "doc",
     "example": "example"
   }
-}
+}

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "jsx":"react",
+    "lib":["es6"],
+    "noEmit": true,                        /* Do not emit outputs. */
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+  }
+}

yarn.lock

@@ -710,7 +710,7 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/yargs" "^12.0.9"
 
-"@react-native-community/eslint-config@^0.0.7":
+"@react-native-community/[email protected]":
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-0.0.7.tgz#2a91d336b413d8c77ac5fa634b66703f481243ac"
   integrity sha512-khKxg3BMsXZYSXLat0ygSqTM0KdgciK+gm+hGecM7HzQA10hNTKeMmoFNiNxV+M/5PUyTsnRAz4RtWPVWLuPfQ==
@@ -777,6 +777,26 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
   integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
+"@types/react-native@^0.61.7":
+  version "0.61.7"
+  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.61.7.tgz#e0315b5f627d61470c7f58d7298e732aab90b2c5"
+  integrity sha512-LUhIiZUfGA0+2+/+KeHDpHfBmVYZdw1vwikYF2yTap5duuXtw3SUYn6kiPyBwFf++PmhWJeGeId94vAYbptvaw==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "16.9.19"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.19.tgz#c842aa83ea490007d29938146ff2e4d9e4360c40"
+  integrity sha512-LJV97//H+zqKWMms0kvxaKYJDG05U2TtQB3chRLF8MPNs+MQh/H1aGlyDUxjaHvu08EAGerdX2z4LTBc7ns77A==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
@@ -1603,6 +1623,11 @@ cssstyle@^1.0.0:
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
+  integrity sha512-msVS9qTuMT5zwAGCVm4mxfrZ18BNc6Csd0oJAtiFMZ1FAx1CCvy2+5MDmYoix63LM/6NDbNtodCiGYGmFgO0dA==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -2177,6 +2202,7 @@ fast-deep-equal@^2.0.1:
 fast-diff@^1.1.1, fast-diff@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
@@ -4605,6 +4631,7 @@ prompts@^2.0.1:
 prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
     loose-envify "^1.4.0"
     object-assign "^4.1.1"
@@ -5627,6 +5654,11 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+[email protected]:
+  version "3.7.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
+  integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==
+
 ua-parser-js@^0.7.18:
   version "0.7.19"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"