✨ Add TypeScript Declarations for Enhanced Type Safety (#78)

* feat: add types

* chore: bump minor version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apple-signin-auth",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": " Apple signin for React using the official Apple JS SDK",
   "author": {
     "name": "Ahmed Tarek",
@@ -12,6 +12,7 @@
     "url": "https://github.com/a-tokyo/react-apple-signin-auth.git"
   },
   "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "files": [
     "dist/"
   ],
@@ -21,7 +22,7 @@
   },
   "scripts": {
     "start": "webpack serve --mode development",
-    "transpile": "rm -rf dist && babel src -d dist --copy-files && rm -rf dist/**/__snapshots__ && find ./dist -name '*.test.js*' -type f -delete",
+    "transpile": "rm -rf dist && tsc && babel src -d dist --copy-files && rm -rf dist/**/__snapshots__ && find ./dist -name '*.test.js*' -type f -delete ",
     "prepublishOnly": "npm run transpile",
     "build": "webpack --mode production",
     "deploy": "gh-pages -d demo/dist",
@@ -71,6 +72,7 @@
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
     "style-loader": "^3.2.1",
+    "typescript": "^5.2.2",
     "webpack": "^5.46.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2"

src/types/index.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+
+declare module 'react-apple-signin-auth' {
+  export type AppleAuthOptions = {
+    /** Client ID - eg: 'com.example.com' */
+    clientId: string;
+    /** Requested scopes, seperated by spaces - eg: 'email name' */
+    scope: string;
+    /** Apple's redirectURI - must be one of the URIs you added to the serviceID - the undocumented trick in apple docs is that you should call auth from a page that is listed as a redirectURI, localhost fails */
+    redirectURI: string;
+    /** State string that is returned with the apple response */
+    state?: string;
+    /** Nonce */
+    nonce?: string;
+    /** Uses popup auth instead of redirection */
+    usePopup?: boolean;
+  };
+
+  export type AppleAuthResponse = {
+    authorization: {
+      /** ID JWT */
+      id_token: string;
+      /** Grant code valid for 5m */
+      code: string;
+      /** State string passed to the request */
+      state?: string;
+    };
+    /** Only provided by apple in the first request */
+    user?: {
+      email: string;
+      name: {
+        firstName: string;
+        lastName: string;
+      };
+    };
+  };
+
+  export type AppleSignInButtonProps = {
+    authOptions: AppleAuthOptions;
+    /** Called upon signin success in case authOptions.usePopup = true -- which means auth is handled client side */
+    onSuccess: Function;
+    /** Called upon signin error */
+    onError: Function;
+    /** Skips loading the apple script if true */
+    skipScript?: boolean;
+    /** Apple image props */
+    iconProps?: Object;
+    /** render function - called with all props - can be used to fully customize the UI by rendering your own component  */
+    render?: Function;
+    /** UI type */
+    uiType: 'light' | 'dark';
+    /** className */
+    className?: string | null | undefined;
+    /** prevents rendering of default styles */
+    noDefaultStyle?: boolean;
+    /** Allows to change the button's children, eg: for changing the button text */
+    buttonExtraChildren?: string | ReactNode;
+    /** Rest is spread on the root button component */
+  };
+
+  export type SignInProps = {
+    authOptions: AppleAuthOptions;
+    onSuccess?: Function;
+    onError?: Function;
+  };
+
+  function useScript(src: string | null | undefined): void;
+
+  namespace appleAuthHelpers {
+    let APPLE_SCRIPT_SRC: string;
+    function signIn(props: SignInProps): Promise<AppleAuthResponse | null>;
+  }
+
+  function AppleSignInButton(props: AppleSignInButtonProps): JSX.Element;
+
+  export default AppleSignInButton;
+  export { appleAuthHelpers, useScript };
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "./types"
+  },
+  "include": ["src/**/*.ts"]
+}

yarn.lock

@@ -10178,6 +10178,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+typescript@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
+  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
+
 typhonjs-ast-walker@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/typhonjs-ast-walker/-/typhonjs-ast-walker-0.1.1.tgz#814554a6dad29e1cb2cb62bc8a8e86c174c168e3"