@kirill.konshin/utils 0.0.17 → 0.0.19

package/src/core/worker.ts

@@ -44,7 +44,7 @@ function checkMessage(obj: any, message: any) {
 // Classes
 
 export class WorkerDialog<R extends RespondersBase<any>> {
-    readonly contexts = new Set<Context<R, keyof R>>();
+    readonly contexts: Set<Context<R, keyof R>> = new Set();
     protected closed = false;
     protected currentId = 0; // IDs are intentionally not global
 
@@ -90,16 +90,16 @@ export class WorkerDialog<R extends RespondersBase<any>> {
         }
     }
 
-    getID() {
+    getID(): string {
         return (++this.currentId).toString();
     }
 
-    close() {
+    close(): void {
         for (const context of this.contexts) context.close('root');
         this.contexts.clear();
     }
 
-    withMessage<M extends keyof R>(message: M) {
+    withMessage<M extends keyof R>(message: M): RequestContext<R, M> {
         return new RequestContext<R, M>(this, message, this.getID()); // always new context
     }
 }
@@ -116,7 +116,7 @@ export class RespondersBase<R> {
 
 // can only be used to create actual contexts, carries the context data
 abstract class Context<R, M extends keyof R> {
-    protected readonly unsub = new Set<() => void>();
+    protected readonly unsub: Set<() => void> = new Set();
     protected closed = false;
 
     constructor(
@@ -135,7 +135,7 @@ abstract class Context<R, M extends keyof R> {
 
     abstract withMessage<M2 extends keyof R>(message: M2, id?: string): Context<R, M2>;
 
-    close(reason: string = 'external') {
+    close(reason: string = 'external'): void {
         /* v8 ignore next */
         if (this.dialog.debug >= 2) console.log('Closing', this.info, reason, this);
 
@@ -157,7 +157,14 @@ abstract class Context<R, M extends keyof R> {
         return `${this.dialog.name}:${this.parent?.id ?? ALL}/${this.id}:${this.message.toString()}[${this.closed ? 'closed' : 'open'},${this.type}]`;
     }
 
-    get debugInfo() {
+    get debugInfo(): {
+        id?: string;
+        parentId?: string;
+        message: string | number | symbol;
+        closed: boolean;
+        type: string;
+        listeners: number;
+    } {
         return {
             id: this.id,
             parentId: this.parent?.id,
@@ -170,7 +177,7 @@ abstract class Context<R, M extends keyof R> {
 
     abstract type: 'request' | 'response' | string;
 
-    protected postMessage(data?: Data<R, M>, done = false) {
+    protected postMessage(data?: Data<R, M>, done = false): Data<R, M> | undefined {
         checkClosed(this, 'postMessage');
 
         const transfer = getTransferrable(data);
@@ -190,7 +197,7 @@ abstract class Context<R, M extends keyof R> {
         return data;
     }
 
-    send(data?: Data<R, M>, done = false) {
+    send(data?: Data<R, M>, done = false): Data<R, M> | undefined {
         return this.postMessage(data, done);
     }
 
@@ -303,11 +310,11 @@ class RequestContext<R, M extends keyof R> extends Context<R, M> {
         return res[1];
     }
 
-    protected async expect() {
+    protected async expect(): Promise<MethodReturn<R, M>> {
         checkClosed(this, 'expect');
 
         //FIXME Manual promise type
-        return new Promise<MethodReturn<R, M>>((resolve, reject) => {
+        return new Promise((resolve, reject) => {
             const responseListener = this.listen(async (data) => {
                 try {
                     if ((data as any) instanceof Error) throw data;

package/src/core/wrpc.fixture.ts

@@ -1,15 +1,47 @@
 import { wrpc } from './wrpc';
 
-export const responder = wrpc().createResponder(self, {
+export const responder: {
+    responders: {
+        // note it's not async, and works properly
+        // @ts-ignore
+        test: ({ buf, signal }?: { signal?: AbortSignal; buf?: ArrayBuffer }) => Generator<
+            {
+                progress: number;
+                aborted?: boolean;
+            },
+            string,
+            unknown
+        >;
+        // note it's not async, and works properly
+        returnYield: () => Generator<1 | 3 | 2, any, unknown>;
+        bidirectional: (prefix?: any) => Generator<string, string, number>;
+
+        error: () => AsyncGenerator<never, never, unknown>;
+        promise: () => Promise<{
+            test: string;
+        }>;
+        promiseError: () => Promise<never>;
+        setTimeout: ({ timeout }?: { timeout?: number }) => Promise<unknown>;
+        setInterval: ({ timeout }?: { timeout?: number }) => AsyncGenerator<any, never, unknown>;
+    };
+    stop: () => void;
+} = wrpc().createResponder(self, {
     // note it's not async, and works properly
-    test: function* ({ buf, signal }: { signal?: AbortSignal; buf?: ArrayBuffer } = {}) {
+    test: function* ({ buf, signal }: { signal?: AbortSignal; buf?: ArrayBuffer } = {}): Generator<
+        {
+            progress: number;
+            aborted?: boolean;
+        },
+        string,
+        unknown
+    > {
         yield { progress: 0 };
         yield { progress: 0.5 };
         yield { progress: 1, aborted: !!signal?.aborted };
         return 'foo';
     },
     // note it's not async, and works properly
-    returnYield: function* () {
+    returnYield: function* (): Generator<1 | 3 | 2, any, unknown> {
         yield 1;
         yield 2;
         return yield 3;
@@ -23,13 +55,15 @@ export const responder = wrpc().createResponder(self, {
         return 'done';
     },
     // eslint-disable-next-line require-yield
-    error: async function* () {
+    error: async function* (): AsyncGenerator<never, never, unknown> {
         throw new Error('Test');
     },
-    promise: async function () {
+    promise: async function (): Promise<{
+        test: string;
+    }> {
         return { test: 'test' };
     },
-    promiseError: async function () {
+    promiseError: async function (): Promise<never> {
         throw new Error('Test');
     },
     setTimeout: async ({ timeout = 1000 }: { timeout?: number } = {}) =>

package/src/core/wrpc.ts

@@ -25,7 +25,7 @@ export type WorkerLike = {
         options?: { signal?: AbortSignal; once?: boolean },
     ) => void;
     removeEventListener: (event: string, listener: (e: any) => void) => void;
-};
+} & any;
 
 export enum LogLevel {
     disabled = 0,
@@ -42,10 +42,10 @@ export function deriveController(signal?: AbortSignal): [AbortController, AbortS
     return [controller, AbortSignal.any([controller.signal, signal].filter(Boolean) as AbortSignal[])];
 }
 
-export function rejectOnSignal(promise: Promise<any>, signal: AbortSignal) {
+export function rejectOnSignal(promise: Promise<any>, signal: AbortSignal): Promise<Event['data']> {
     return Promise.race([
         promise,
-        new Promise<Event['data']>((resolve, reject) => {
+        new Promise((resolve, reject) => {
             signal.addEventListener('abort', () => reject('RaceAborted:' + signal.reason), { once: true, signal });
         }),
     ]);
@@ -56,7 +56,19 @@ export function rejectOnSignal(promise: Promise<any>, signal: AbortSignal) {
 export function wrpc({
     debug = LogLevel.disabled,
     name = (globalThis as any).importScripts ? 'RESPONDER' : 'CALLER',
-} = {}) {
+}: {
+    debug?: LogLevel;
+    name?: string;
+} = {}): {
+    createResponder: <T extends Responders>(
+        worker: WorkerLike,
+        responders: T,
+    ) => {
+        responders: T;
+        stop: () => void;
+    };
+    createCaller: <T extends Responders>(worker: WorkerLike, responders: T) => T;
+} {
     // Logger
 
     function logger(type: string) {
@@ -130,7 +142,13 @@ export function wrpc({
     // Responder
 
     //TODO Name arg
-    function createResponder<T extends Responders>(worker: WorkerLike, responders: T) {
+    function createResponder<T extends Responders>(
+        worker: WorkerLike,
+        responders: T,
+    ): {
+        responders: T;
+        stop: () => void;
+    } {
         const mainController = new AbortController();
 
         worker.addEventListener('messageerror', (e) => logError(LogLevel.error, null, 'MESSAGE ERROR', e), {

package/src/electron/createWindow.ts

@@ -9,8 +9,8 @@ import defaultMenu from 'electron-default-menu';
 import Store from 'electron-store';
 import { checkForUpdates } from './updater.js';
 
-export const isDev = process.env['NODE_ENV'] === 'development';
-export const appPath = app.getAppPath();
+export const isDev: boolean = process.env['NODE_ENV'] === 'development';
+export const appPath: string = app.getAppPath();
 
 // See https://cs.chromium.org/chromium/src/net/base/net_error_list.h
 const FILE_NOT_FOUND = -6;
@@ -227,7 +227,7 @@ export function createWindow({
     app.on('activate', () => BrowserWindow.getAllWindows().length === 0 && !mainWindow && createWindow());
 
     return {
-        get mainWindow() {
+        get mainWindow(): BrowserWindow | null {
             return mainWindow;
         },
     };

package/src/electron/updater.ts

@@ -47,7 +47,7 @@ autoUpdater.on('update-downloaded', async () => {
     autoUpdater.quitAndInstall();
 });
 
-export function checkForUpdates(menuItem, focusedWindow, event) {
+export function checkForUpdates(menuItem: any): void {
     updateButton = menuItem;
     updateButton.enabled = false;
     autoUpdater.checkForUpdates().catch((e) => console.error('Update error', e));

package/src/electron-builder/images.ts

@@ -12,7 +12,7 @@ export async function generateImages({
     dmgBackgroundPsdPath: string;
     electronAssetsPath: string;
     webPublicPath: string;
-}) {
+}): Promise<void> {
     const iconPsd = await psd.open(iconPsdPath);
     await iconPsd.image!.saveAsPng(path.join(electronAssetsPath, 'icon.png'));
 

package/src/mui/formControlFieldset.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 import { GenericControl, GenericControlProps } from './genericControl';
 import { inputClasses } from '@mui/material/Input';
 
 export type FormControlFieldsetProps = GenericControlProps;
 
-export const FormControlFieldset: React.FC<FormControlFieldsetProps> = function FormControlFieldset({
+export const FormControlFieldset: FC<FormControlFieldsetProps> = function FormControlFieldset({
     children,
     sx,
     ...props

package/src/mui/formLabelLegend.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 import { default as InputLabel, InputLabelProps } from '@mui/material/InputLabel';
 
-export const FormLabelLegend: React.FC<InputLabelProps> = ({ children, ...props }) => {
+export const FormLabelLegend: FC<InputLabelProps> = ({ children, ...props }) => {
     return (
         // sx={(theme) => theme.typography.caption}
         <InputLabel {...props} shrink={true} component={'legend' as any}>

package/src/mui/genericControl.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import React, { FC } from 'react';
 import { FormControlProps, default as FormControl } from '@mui/material/FormControl';
 import { inputClasses } from '@mui/material/Input';
 
 export type GenericControlProps = FormControlProps & { children: any };
 
-export const GenericControl: React.FC<GenericControlProps> = ({ children, sx, ...props }) => (
+export const GenericControl: FC<GenericControlProps> = ({ children, sx, ...props }) => (
     <FormControl
         variant="standard"
         sx={{

package/src/mui/readOnly.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { default as Input, InputProps } from '@mui/material/Input';
 
-export const ReadOnly: React.FC<InputProps & { children: any }> = ({ children, inputProps, ...props }) => (
+export const ReadOnly: FC<InputProps & { children: any }> = ({ children, inputProps, ...props }) => (
     <Input {...props} inputComponent={'div' as any} inputProps={{ ...inputProps, children }}></Input>
 );

package/src/next/measure.ts

@@ -1,7 +1,24 @@
 import { createMeasurer } from '../core/measure';
 import { PHASE_PRODUCTION_BUILD, PHASE_PRODUCTION_SERVER } from 'next/constants';
 
-export const isProd =
+export const isProd: boolean =
     process.env.NEXT_PHASE === PHASE_PRODUCTION_BUILD || process.env.NEXT_PHASE === PHASE_PRODUCTION_SERVER;
 
-export const measurer = createMeasurer({ colors: isProd });
+export const measurer: {
+    measure: (
+        what: string,
+        step: string,
+        supplemental?: string,
+        ...args: any[]
+    ) => {
+        done: (result?: string, ...args2: any[]) => void;
+        fail: (result?: string, ...args2: any[]) => void;
+        log: (...args2: any[]) => void;
+    };
+    important: (str: any) => any;
+    subject: (str: any) => any;
+    arg: (str: any) => any;
+    sup: (str: any) => any;
+    ok: (str: any) => any;
+    err: (str: any) => any;
+} = createMeasurer({ colors: isProd });

package/src/next/noSSR.tsx

@@ -1,12 +1,31 @@
 'use client';
 
-import React, { useLayoutEffect, useState } from 'react';
+import React, { FC, JSX, useLayoutEffect, useState } from 'react';
 
-const DefaultOnSSR = () => <span />;
-
-// @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js
-// @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
-export function NoSSR({ children, onSSR = <DefaultOnSSR /> }) {
+/**
+ * Prefer using Next.js `dynamic()` import with `ssr: false` because this will also remove import from server bundle.
+ *
+ * ```tsx
+ * 'use client';
+ *
+ * import React from 'react';
+ * import dynamic from 'next/dynamic';
+ *
+ * const PageClient = dynamic(() => import('./pageClient'), { ssr: false });
+ *
+ * export default function Page() {
+ *   return (
+ *     <PageClient />
+ *   );
+ * }
+ * ```
+ *
+ * In other cases this component can be used to just prevent server rendering.
+ *
+ * @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js
+ * @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
+ */
+export const NoSSR: FC<{ children: any; onSSR?: JSX.Element }> = function NoSSR({ children, onSSR = null }): any {
     const [canRender, setCanRender] = useState(false);
 
     useLayoutEffect(() => {
@@ -14,4 +33,4 @@ export function NoSSR({ children, onSSR = <DefaultOnSSR /> }) {
     }, []);
 
     return canRender ? children : onSSR;
-}
+};

package/src/react/form/client.tsx

@@ -6,7 +6,18 @@ import { z } from 'zod';
 
 const FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';
 
-export function createClient<S extends z.ZodObject<any>>(schema: S) {
+export function createClient<S extends z.ZodObject<any>>(
+    schema: S,
+): {
+    useValidation: (
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData?: MaybeTypeOf<S>,
+    ) => [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean];
+    useValidationTransition: (
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData?: MaybeTypeOf<S>,
+    ) => [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean];
+} {
     const { validate } = create(schema);
 
     function useValidationCallback(
@@ -29,7 +40,7 @@ export function createClient<S extends z.ZodObject<any>>(schema: S) {
     function useValidation(
         actionFn: (data: FormData) => Promise<Validation<S>>,
         initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
-    ) {
+    ): [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean] {
         const cb = useValidationCallback(actionFn);
 
         return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {

package/src/react/form/form.tsx

@@ -1,10 +1,10 @@
 import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
-import { createContext, useContext, useMemo } from 'react';
+import { Context, createContext, useContext, useMemo, JSX, FC, memo } from 'react';
 import clsx from 'clsx';
 
 const nonEmpty = 'This field cannot be empty';
 
-export const stringRequired = () => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
+export const stringRequired = (): z.ZodString => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
 export const maxLength = (schema: z.ZodString): number => schema.maxLength || 0;
 export const minLength = (schema: z.ZodString): number => schema.minLength || 0;
 export const isRequired = (schema: z.ZodString): boolean => minLength(schema) > 0;
@@ -25,24 +25,65 @@ export type Validation<S extends ZodObject> =
           errors?: Errors<S>;
       };
 
-export const FormContext = createContext<{
+export const FormContext: Context<{
     schema: ZodObject;
-}>(null as never);
+}> = createContext(null as never);
 
-export const Form = <S extends ZodObject>({ schema, children }: { schema: S; children: any }) => {
+export interface FormProps<S extends ZodObject> {
+    schema: S;
+    children: any;
+}
+
+export const Form: FC<FormProps<any>> = memo(function Form({ schema, children }) {
     const value = useMemo(() => ({ schema }), [schema]);
     return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
-};
+});
 
 const getShape = <S extends ZodObject>(schema: S) =>
     (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;
 
-export function create<S extends ZodObject>(schema: S) {
+export function create<S extends ZodObject>(
+    schema: S,
+): {
+    register: (
+        name: keyof TypeOf<S>,
+        data?: MaybeTypeOf<S>,
+        errors?: Errors<S>,
+        mui?: boolean,
+    ) => {
+        label?: any;
+        helperText?: string;
+        error?: boolean;
+        name: keyof z.TypeOf<S>;
+        id: keyof z.TypeOf<S>;
+        required: boolean;
+        maxLength: number;
+        type: string;
+        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];
+    };
+    validate: (formData: FormData) => Validation<S>;
+    validationError: (data: MaybeTypeOf<S>, errors: Errors<S>) => Validation<S>;
+} {
     if (!getShape(schema)) {
         throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');
     }
 
-    function register(name: keyof TypeOf<S>, data?: MaybeTypeOf<S>, errors?: Errors<S>, mui: boolean = false) {
+    function register(
+        name: keyof TypeOf<S>,
+        data?: MaybeTypeOf<S>,
+        errors?: Errors<S>,
+        mui: boolean = false,
+    ): {
+        label?: any;
+        helperText?: string;
+        error?: boolean;
+        name: keyof z.TypeOf<S>;
+        id: keyof z.TypeOf<S>;
+        required: boolean;
+        maxLength: number;
+        type: string;
+        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];
+    } {
         const field = getShape(schema)[name];
         return {
             name,
@@ -87,7 +128,17 @@ export function create<S extends ZodObject>(schema: S) {
     return { register, validate, validationError };
 }
 
-function Field<S extends ZodObject>({
+interface FieldProps<S extends ZodObject> {
+    children?: any;
+    name: keyof TypeOf<S>;
+    errors?: Validation<S>['errors'];
+    hint?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+
+export const Field: FC<FieldProps<any>> = memo(function Field({
     children,
     name,
     errors,
@@ -95,13 +146,6 @@ function Field<S extends ZodObject>({
     className,
     labelProps,
     ...props
-}: {
-    children?: any;
-    name: keyof TypeOf<S>;
-    errors?: Validation<S>['errors'];
-    hint?: string;
-    className?: string;
-    labelProps?: any;
 }) {
     const { schema } = useContext(FormContext);
     const { description } = getShape(schema)[name];
@@ -122,8 +166,13 @@ function Field<S extends ZodObject>({
             ))}
         </div>
     );
+});
+
+export interface HintProps {
+    children: any;
+    error?: boolean;
 }
 
-export function Hint({ children, error }: { children: any; error?: boolean }) {
+export const Hint: FC<HintProps> = memo(function Hint({ children, error }) {
     return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;
-}
+});

package/src/react/keyboard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext } from 'react';
+import { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext, FC, Context } from 'react';
 
 const isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;
 
@@ -8,12 +8,17 @@ const EVENT = 'keydown';
 
 export type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;
 
-export const HotkeysContext = createContext<{
+export type HotkeyContextType = {
+    enabled: boolean;
+    setEnabled: Dispatch<SetStateAction<boolean>>;
+};
+
+export const HotkeysContext: Context<HotkeyContextType> = createContext<{
     enabled: boolean;
     setEnabled: Dispatch<SetStateAction<boolean>>;
 }>(null as never);
 
-export const HotkeysProvider = ({ children }) => {
+export const HotkeysProvider: FC<any> = ({ children }) => {
     const [enabled, setEnabled] = useState(true);
 
     const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);
@@ -21,7 +26,7 @@ export const HotkeysProvider = ({ children }) => {
     return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;
 };
 
-export const useHotkeys = (hotkeys: Hotkeys) => {
+export const useHotkeys = (hotkeys: Hotkeys): void => {
     const { enabled } = useContext(HotkeysContext);
 
     useEffect(() => {

package/src/react/useFetcher.ts

@@ -1,10 +1,15 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export function useFetcher<T = any>(
-    cb,
+    cb: any,
 
     { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},
-) {
+): {
+    loading: boolean;
+    error: Error | null;
+    data: T | null;
+    trigger: (...args: any[]) => Promise<any>;
+} {
     const [loading, setLoading] = useState(fetchOnMount);
     const [error, setError] = useState<Error | null>(null);
     const [data, setData] = useState<T | null>(null);
@@ -12,7 +17,7 @@ export function useFetcher<T = any>(
     const isMounted = useRef(false);
 
     const trigger = useCallback(
-        async (...args) => {
+        async (...args: any[]): Promise<any> => {
             try {
                 setLoading(true);
                 setError(null);

package/src/react-native/share.ts

@@ -8,7 +8,7 @@ import * as Sharing from 'expo-sharing';
  * @param fileName
  * @returns {Promise<void>}
  */
-export const shareDialog = async (base64, fileName) => {
+export const shareDialog = async (base64: string, fileName: string): Promise<void> => {
     const path = `${FileSystem.documentDirectory}/${fileName}`;
 
     try {

package/src/react-native/update.tsx

@@ -1,8 +1,8 @@
 import * as Updates from 'expo-updates';
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Text } from 'react-native';
 
-export function Update({ children }) {
+export const Update: FC<any> = function Update({ children }) {
     //FIXME useUpdates https://blog.expo.dev/feature-preview-updates-js-api-for-expo-updates-3b92beb40dab
     const [updating, setUpdating] = useState(true);
 
@@ -37,4 +37,4 @@ export function Update({ children }) {
     }
 
     return children;
-}
+};

package/src/react-native/useAppState.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { AppState } from 'react-native';
 
-export function useAppState() {
+export function useAppState(): 'active' | 'background' | 'inactive' | 'unknown' | 'extension' {
     const [appState, setAppState] = useState(AppState.currentState);
 
     useEffect(() => {

package/src/tailwind/fullpage.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { FC } from 'react';
 
-export const Fullpage = ({ divRef = null, className = '', children, ...props }) => (
+export const Fullpage: FC<any> = ({ divRef = null, className = '', children, ...props }) => (
     <div
         ref={divRef}
         {...props}