@tma.js/sdk-react 0.4.3

package/src/lib/index.ts

@@ -0,0 +1,13 @@
+export * from './back-button/index.js';
+export * from './closing-behavior/index.js';
+export * from './haptic-feedback/index.js';
+export * from './init-data/index.js';
+export * from './launch-params/index.js';
+export * from './main-button/index.js';
+export * from './popup/index.js';
+export * from './qr-scanner/index.js';
+export * from './theme-params/index.js';
+export * from './viewport/index.js';
+export * from './web-app/index.js';
+export * from './cloud-storage.js';
+export { usePostEvent } from './hooks.js';

package/src/lib/init-data/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useInitData.js';
+export * from './withInitData.js';

package/src/lib/init-data/types.ts

@@ -0,0 +1 @@
+export type { InitData } from '@tma.js/sdk';

package/src/lib/init-data/useInitData.ts

@@ -0,0 +1,9 @@
+import { useUnit } from '../../provider/index.js';
+import type { InitData } from './types.js';
+
+/**
+ * Returns InitData component instance.
+ */
+export function useInitData(): InitData | null {
+  return useUnit('initData') || null;
+}

package/src/lib/init-data/withInitData.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useInitData } from './useInitData.js';
+import type { InitData } from './types.js';
+
+/**
+ * HOC which passes InitData SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withInitData<P extends { initData?: InitData }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'initData'>> {
+  return function WithInitData(props: Omit<P, 'initData'>) {
+    const p = { ...props, initData: useInitData() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/launch-params/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useLaunchParams.js';
+export * from './withLaunchParams.js';

package/src/lib/launch-params/types.ts

@@ -0,0 +1 @@
+export type { LaunchParams } from '@tma.js/sdk';

package/src/lib/launch-params/useLaunchParams.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { retrieveLaunchParams } from '@tma.js/sdk';
+
+import type { LaunchParams } from './types.js';
+
+/**
+ * The hook which returns launch parameters initially passed to Web App.
+ */
+export function useLaunchParams(): LaunchParams {
+  return useMemo(retrieveLaunchParams, []);
+}

package/src/lib/launch-params/withLaunchParams.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import type { LaunchParams } from './types.js';
+import { useLaunchParams } from './useLaunchParams.js';
+
+/**
+ * HOC which passes launch parameters to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withLaunchParams<P extends { launchParams?: LaunchParams }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'launchParams'>> {
+  return function WithLaunchParams(props: Omit<P, 'launchParams'>) {
+    const p = { ...props, launchParams: useLaunchParams() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/main-button/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useMainButton.js';
+export * from './withMainButton.js';

package/src/lib/main-button/types.ts

@@ -0,0 +1 @@
+export type { MainButton } from '@tma.js/sdk';

package/src/lib/main-button/useMainButton.ts

@@ -0,0 +1,16 @@
+import { useUnit } from '../../provider/index.js';
+import { useEventsTracking } from '../hooks.js';
+import type { MainButton } from './types.js';
+
+/**
+ * Returns MainButton component instance.
+ */
+export function useMainButton(): MainButton {
+  const mainButton = useUnit('mainButton');
+  useEventsTracking(mainButton, [
+    'isEnabledChanged', 'backgroundColorChanged', 'isProgressVisibleChanged',
+    'textChanged', 'textColorChanged', 'isVisibleChanged',
+  ]);
+
+  return mainButton;
+}

package/src/lib/main-button/withMainButton.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useMainButton } from './useMainButton.js';
+import type { MainButton } from './types.js';
+
+/**
+ * HOC which passes MainButton SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withMainButton<P extends { mainButton?: MainButton }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'mainButton'>> {
+  return function WithMainButton(props: Omit<P, 'mainButton'>) {
+    const p = { ...props, mainButton: useMainButton() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/popup/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './usePopup.js';
+export * from './withPopup.js';

package/src/lib/popup/types.ts

@@ -0,0 +1 @@
+export type { Popup } from '@tma.js/sdk';

package/src/lib/popup/usePopup.ts

@@ -0,0 +1,13 @@
+import { useUnit } from '../../provider/index.js';
+import { useEventsTracking } from '../hooks.js';
+import type { Popup } from './types.js';
+
+/**
+ * Returns Popup component instance.
+ */
+export function usePopup(): Popup {
+  const popup = useUnit('popup');
+  useEventsTracking(popup, ['isOpenedChanged']);
+
+  return popup;
+}

package/src/lib/popup/withPopup.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { usePopup } from './usePopup.js';
+import type { Popup } from './types.js';
+
+/**
+ * HOC which passes Popup SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withPopup<P extends { popup?: Popup }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'popup'>> {
+  return function WithPopup(props: Omit<P, 'popup'>) {
+    const p = { ...props, popup: usePopup() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/qr-scanner/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useQRScanner.js';
+export * from './withQRScanner.js';

package/src/lib/qr-scanner/types.ts

@@ -0,0 +1 @@
+export type { QRScanner } from '@tma.js/sdk';

package/src/lib/qr-scanner/useQRScanner.ts

@@ -0,0 +1,13 @@
+import { useUnit } from '../../provider/index.js';
+import { useEventsTracking } from '../hooks.js';
+import type { QRScanner } from './types.js';
+
+/**
+ * Returns QRScanner component instance.
+ */
+export function useQRScanner(): QRScanner {
+  const qrScanner = useUnit('qrScanner');
+  useEventsTracking(qrScanner, ['isOpenedChanged']);
+
+  return qrScanner;
+}

package/src/lib/qr-scanner/withQRScanner.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useQRScanner } from './useQRScanner.js';
+import type { QRScanner } from './types.js';
+
+/**
+ * HOC which passes QRScanner SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withQRScanner<P extends { qrScanner?: QRScanner }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'qrScanner'>> {
+  return function WithQRScanner(props: Omit<P, 'qrScanner'>) {
+    const p = { ...props, qrScanner: useQRScanner() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/theme-params/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useThemeParams.js';
+export * from './withThemeParams.js';

package/src/lib/theme-params/types.ts

@@ -0,0 +1 @@
+export type { ThemeParams } from '@tma.js/sdk';

package/src/lib/theme-params/useThemeParams.ts

@@ -0,0 +1,13 @@
+import { useUnit } from '../../provider/index.js';
+import { useEventsTracking } from '../hooks.js';
+import type { ThemeParams } from './types.js';
+
+/**
+ * Returns ThemeParams component instance.
+ */
+export function useThemeParams(): ThemeParams {
+  const theme = useUnit('themeParams');
+  useEventsTracking(theme, ['changed']);
+
+  return theme;
+}

package/src/lib/theme-params/withThemeParams.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useThemeParams } from './useThemeParams.js';
+import type { ThemeParams } from './types.js';
+
+/**
+ * HOC which passes ThemeParams SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withThemeParams<P extends { themeParams?: ThemeParams }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'themeParams'>> {
+  return function WithThemeParams(props: Omit<P, 'themeParams'>) {
+    const p = { ...props, themeParams: useThemeParams() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/viewport/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useViewport.js';
+export * from './withViewport.js';

package/src/lib/viewport/types.ts

@@ -0,0 +1 @@
+export type { Viewport } from '@tma.js/sdk';

package/src/lib/viewport/useViewport.ts

@@ -0,0 +1,15 @@
+import { useUnit } from '../../provider/index.js';
+import { useEventsTracking } from '../hooks.js';
+import type { Viewport } from './types.js';
+
+/**
+ * Returns Viewport component instance.
+ */
+export function useViewport(): Viewport {
+  const viewport = useUnit('viewport');
+  useEventsTracking(viewport, [
+    'stableHeightChanged', 'isExpandedChanged', 'heightChanged', 'widthChanged',
+  ]);
+
+  return viewport;
+}

package/src/lib/viewport/withViewport.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useViewport } from './useViewport.js';
+import type { Viewport } from './types.js';
+
+/**
+ * HOC which passes Viewport SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withViewport<P extends { viewport?: Viewport }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'viewport'>> {
+  return function WithViewport(props: Omit<P, 'viewport'>) {
+    const p = { ...props, viewport: useViewport() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/lib/web-app/index.ts

@@ -0,0 +1,3 @@
+export * from './types.js';
+export * from './useWebApp.js';
+export * from './withWebApp.js';

package/src/lib/web-app/types.ts

@@ -0,0 +1 @@
+export type { WebApp } from '@tma.js/sdk';

package/src/lib/web-app/useWebApp.ts

@@ -0,0 +1,13 @@
+import { useUnit } from '../../provider/index.js';
+import type { WebApp } from './types.js';
+import { useEventsTracking } from '../hooks.js';
+
+/**
+ * Returns WebApp component instance.
+ */
+export function useWebApp(): WebApp {
+  const webApp = useUnit('webApp');
+  useEventsTracking(webApp, ['headerColorChanged', 'backgroundColorChanged']);
+
+  return webApp;
+}

package/src/lib/web-app/withWebApp.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import { useWebApp } from './useWebApp.js';
+import type { WebApp } from './types.js';
+
+/**
+ * HOC which passes WebApp SDK component to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withWebApp<P extends { webApp?: WebApp }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'webApp'>> {
+  return function WithWebApp(props: Omit<P, 'webApp'>) {
+    const p = { ...props, webApp: useWebApp() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/provider/SDKProvider.tsx

@@ -0,0 +1,47 @@
+import React, {
+  memo,
+  useEffect,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from 'react';
+import { init, type InitOptions } from '@tma.js/sdk';
+
+import { sdkContext } from './context.js';
+import type { SDKComponents, SDKContext } from './types.js';
+
+export type SDKInitOptions = InitOptions;
+
+export type SDKProviderProps = PropsWithChildren<{ initOptions?: SDKInitOptions }>;
+
+/**
+ * Component which provides access to SDK components.
+ */
+export const SDKProvider = memo<SDKProviderProps>((props) => {
+  const { children, initOptions } = props;
+  const [didInit, setDidInit] = useState(false);
+  const [error, setError] = useState<null | unknown>(null);
+  const [components, setComponents] = useState<SDKComponents | null>(null);
+
+  // Initialize SDK on DOM attach.
+  useEffect(() => {
+    // Update init status.
+    setDidInit(true);
+
+    // Init SDK.
+    init(initOptions)
+      .then(setComponents)
+      .catch(setError);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const context = useMemo<SDKContext>(() => ({
+    components,
+    didInit,
+    error,
+  }), [didInit, components, error]);
+
+  return <sdkContext.Provider value={context}>{children}</sdkContext.Provider>;
+});
+
+SDKProvider.displayName = 'SDKProvider';

package/src/provider/context.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+import type { SDKContext } from './types.js';
+
+export const sdkContext = createContext<SDKContext>({
+  components: null,
+  didInit: false,
+  error: null,
+});
+
+sdkContext.displayName = 'SDKContext';

package/src/provider/hocs.tsx

@@ -0,0 +1,18 @@
+import React, { type ComponentType } from 'react';
+
+import type { SDKContext } from './types.js';
+import { useSDK } from './hooks.js';
+
+/**
+ * HOC which passes SDK context to wrapped React component.
+ * @param Component - component to wrap.
+ */
+export function withSDK<P extends { sdk?: SDKContext }>(
+  Component: ComponentType<P>,
+): ComponentType<Omit<P, 'sdk'>> {
+  return function WithLaunchParams(props: Omit<P, 'sdk'>) {
+    const p = { ...props, sdk: useSDK() } as P;
+
+    return <Component {...p} />;
+  };
+}

package/src/provider/hooks.ts

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+
+import { sdkContext } from './context.js';
+import type { SDKComponent, SDKComponentName } from './types.js';
+
+/**
+ * Returns current SDK information.
+ */
+export const useSDK = () => useContext(sdkContext);
+
+/**
+ * Returns value by its field name from SDK init result.
+ * @param name - component name.
+ * @throws {Error} SDK is not initialized.
+ */
+export function useUnit<N extends SDKComponentName>(name: N): SDKComponent<N> {
+  const { components } = useSDK();
+
+  if (components === null) {
+    throw new Error(`Unable to get unit "${name}" as long as SDK is not initialized.`);
+  }
+  return components[name];
+}

package/src/provider/index.ts

@@ -0,0 +1,5 @@
+export * from './context.js';
+export * from './hocs.js';
+export * from './hooks.js';
+export * from './SDKProvider.js';
+export * from './types.js';

package/src/provider/types.ts

@@ -0,0 +1,34 @@
+import type { InitResult } from '@tma.js/sdk';
+
+/**
+ * List of provided SDK components.
+ */
+export type SDKComponents = InitResult;
+
+/**
+ * Known SDK component name.
+ */
+export type SDKComponentName = keyof SDKComponents;
+
+/**
+ * Returns SDK component type by its name.
+ */
+export type SDKComponent<N extends SDKComponentName> = SDKComponents[N];
+
+export interface SDKContext {
+  /**
+   * Components ready to use. This value will be null until initialization
+   * is done.
+   */
+  components: SDKComponents | null;
+
+  /**
+   * States, that SDK called `init()` method.
+   */
+  didInit: boolean;
+
+  /**
+   * Error occurred during initialization.
+   */
+  error: unknown | null;
+}