feat: add TypeScript support with new types and update Toast components

Author: mCodex

index.d.ts

@@ -0,0 +1,2 @@
+// This file helps IDEs find types more easily
+export * from './build';

package.json

@@ -8,6 +8,17 @@
   "module": "build/index.es.js",
   "jsnext:main": "build/index.es.js",
   "types": "build/index.d.ts",
+  "typings": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.es.js",
+      "require": "./build/index.js",
+      "default": "./build/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
   "keywords": [
     "react-native",
     "react-native-rooster",
@@ -28,7 +39,10 @@
   "scripts": {
     "build": "rimraf -rf build && rollup -c",
     "prepublish": "yarn build",
-    "test": "jest --coverage"
+    "test": "jest --coverage",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "validate": "yarn type-check && yarn lint && yarn test"
   },
   "peerDependencies": {
     "react": "*",

rollup.config.js

@@ -80,6 +80,13 @@ export default [
   {
     input: 'src/index.ts',
     output: [{ file: 'build/index.d.ts', format: 'es' }],
-    plugins: [dts()],
+    plugins: [
+      dts({
+        respectExternal: true,
+        compilerOptions: {
+          preserveSymlinks: false,
+        }
+      })
+    ],
   },
 ];

src/@types/config.d.ts

@@ -7,15 +7,16 @@ import {
   Platform,
 } from 'react-native';
 import useToast from 'hooks/useToast';
+import type { ToastMessage, ToastConfig } from '../../types';
 
-interface IToastComponent {
-  message: IToastMessage;
-  toastConfig: IConfig;
+interface ToastComponentProps {
+  message: ToastMessage;
+  toastConfig: ToastConfig;
   index: number;            // stack index
   bottomOffset: number;     // base bottom inset (safe area + keyboard)
 }
 
-const Toast: React.FC<IToastComponent> = ({
+const Toast: React.FC<ToastComponentProps> = ({
   message,
   toastConfig,
   index,

src/@types/toast.d.ts

@@ -4,15 +4,16 @@ import useKeyboard from 'hooks/useKeyboard';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 // import the actual Toast component instead of self-import
 import Toast from '../Toast';
+import type { ToastMessage, ToastConfig } from '../../types';
 
-interface IToastContainer {
+interface ToastContainerProps {
   // messages may be missing or undefined at runtime
-  messages?: IToastMessage[];
-  toastConfig: IConfig;
+  messages?: ToastMessage[];
+  toastConfig: ToastConfig;
 }
 
 // Provide a default empty array to avoid undefined
-const ToastContainer: React.FC<IToastContainer> = (props) => {
+const ToastContainer: React.FC<ToastContainerProps> = (props) => {
   const { messages = [], toastConfig } = props;
 
   const [keyboardHeight] = useKeyboard();

src/@types/toastContext.d.ts

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
+import type { ToastContextProps } from '../types';
 
-const ToastContext = createContext<IToastContext>({} as IToastContext);
+const ToastContext = createContext<ToastContextProps>({} as ToastContextProps);
 
 export default ToastContext;

src/components/Toast/index.tsx

@@ -1,8 +1,9 @@
 import { useContext } from 'react';
 
 import ToastContext from 'contexts/ToastContext';
+import type { ToastContextProps } from '../types';
 
-const useToast = (): IToastContext => {
+const useToast = (): ToastContextProps => {
   const context = useContext(ToastContext);
 
   if (!context) {