Merge pull request #25 from twa-dev/v7.10

v7.10

.eslintrc

@@ -15,5 +15,8 @@
       "jsx": true
     }
   },
-  "ignorePatterns": ["telegram-web-apps.js"]
+  "ignorePatterns": ["telegram-web-apps.js"],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
 }

Readme.md

@@ -38,5 +38,10 @@ And yes, it supports TS.
 [Codesandbox](https://codesandbox.io/s/sdk-kj5961)
 
 ### React
-If you use React in your project, check out [MainButton](src/react/MainButton/Readme.md) and [BackButton](src/react/BackButton/Readme.md) components that we have prepared for you.
+If you use React in your project, check out components that we have prepared for you.
+- [MainButton](src/react/MainButton/Readme.md)
+- [SecondaryButton](src/react/SecondaryButton/Readme.md)
+- [BottomBar](src/react/BottomBar/Readme.md)
+- [BackButton](src/react/BackButton/Readme.md)
+
 These components significantly simplify developer experience.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twa-dev/sdk",
-  "version": "7.8.0",
+  "version": "7.10.0",
   "main": "dist/index.js",
   "sideEffects": [
     "./dist/telegram-web-apps.js"
@@ -35,24 +35,24 @@
   "author": "Artur Stambultsian <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@types/react": "^18.0.19",
+    "@types/react": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.8",
     "prettier": "^2.7.1",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "typescript": "^4.7.4"
   },
   "scripts": {
     "test": "eslint --ext .ts,.tsx ./",
     "build": "rm -rf dist && npm run test && tsc --outDir dist/"
   },
   "dependencies": {
-    "@twa-dev/types": "^7.8.0"
+    "@twa-dev/types": "^7.10.0"
   },
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": "^18.3.1"
   }
 }

src/react/BackButton/Readme.md

@@ -9,7 +9,7 @@ npm i @twa-dev/sdk
 ## Motivation
 TWA SDK contains an interface that controls [BackButton](https://core.telegram.org/bots/webapps#backbutton). It's written in imperative way:
 
-```js
+```jsx
 const BackButton = window.Telegram.WebApp.BackButton;
 
 BackButton.show();

src/react/BottomBar/BottomBar.tsx

@@ -0,0 +1,26 @@
+import { ReactNode, useEffect } from "react";
+import { WebApp } from "../../sdk";
+
+const defaultBottomBarColor =
+  WebApp.themeParams.bottom_bar_bg_color ??
+  WebApp.themeParams.secondary_bg_color;
+
+export const BottomBar = ({
+  bgColor = defaultBottomBarColor,
+  children = null,
+}: {
+  bgColor?: string;
+  children?: ReactNode;
+}) => {
+  useEffect(() => {
+    WebApp.setBottomBarColor(bgColor);
+  }, [bgColor]);
+
+  useEffect(() => {
+    return () => {
+      WebApp.setBottomBarColor(defaultBottomBarColor);
+    };
+  }, []);
+
+  return <>{children}</>;
+};

src/react/BottomBar/Readme.md

@@ -0,0 +1,38 @@
+# BottomBar
+React component for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps) bottom bar. Bottom bar is an area that wraps [Main](../MainButton/Readme.md) and [Secondary](../SecondaryButton/Readme.md) buttons.
+
+## Installation
+```bash
+npm i @twa-dev/sdk
+```
+
+## Motivation
+TWA SDK contains an interface that controls [bottom bar](https://core.telegram.org/bots/webapps#september-6-2024). It's written in imperative way:
+
+```js
+const bottomBarColor = window.Telegram.WebApp.bottomBarColor;
+window.Telegram.WebApp.setBottomBarColor('#ff0000');
+```
+
+It's not the best way to write code, especially if you use libraries like React.
+
+This package exports React component that wraps TWA bottom bar SDK:
+
+```jsx
+import { BottomBar, MainButton, SecondaryButton } from '@twa-dev/sdk/react';
+
+<BottomBar bgColor="#ff0000">
+  <MainButton text="Continue" onClick={() => alert('continue')} />
+  <SecondaryButton text="Cancel" position="bottom" onClick={() => alert('cancelled')} />    
+</BottomBar>
+```
+
+## Demo
+[@BottomButtonBot](https://t.me/BottomButtonBot)
+
+[Codesandbox](https://codesandbox.io/p/sandbox/bottom-button-demo-s8wdgp)
+
+## Props
+Naming is pretty straight forward and corresponds SDK props and methods:
+- `children`
+- `bgColor`

src/react/MainButton/MainButton.tsx

@@ -1,75 +1,25 @@
-import { FC, useEffect } from "react";
-import { WebApp } from "../../sdk";
+import { FC } from "react";
+import { BottomButtonProps, useBottomButton } from "../bottomButton";
 
-interface MainButtonProps {
-  disabled?: boolean;
-  progress?: boolean;
-  color?: string;
-  textColor?: string;
-  onClick: VoidFunction;
-  text: string;
-}
-
-const mainButton = WebApp.MainButton;
-const { button_color, button_text_color } = WebApp.themeParams;
-
-export const MainButton: FC<MainButtonProps> = ({
+export const MainButton: FC<BottomButtonProps> = ({
   disabled,
   color,
   textColor,
   text,
   onClick,
   progress,
+  hasShineEffect,
 }) => {
-  useEffect(() => {
-    return () => {
-      mainButton.hide();
-      mainButton.enable();
-      mainButton.hideProgress();
-      mainButton.setParams({
-        color: button_color,
-        text_color: button_text_color,
-      });
-    };
-  }, []);
-
-  useEffect(() => {
-    if (typeof progress === "boolean") {
-      if (progress) {
-        mainButton.showProgress();
-        mainButton.disable();
-      } else {
-        mainButton.hideProgress();
-      }
-    }
-    if (typeof disabled === "boolean") {
-      disabled || progress ? mainButton.disable() : mainButton.enable();
-    }
-  }, [disabled, progress]);
-
-  useEffect(() => {
-    if (color || textColor) {
-      mainButton.setParams({ color, text_color: textColor });
-    }
-  }, [color, textColor]);
-
-  useEffect(() => {
-    if (text) {
-      mainButton.setText(text);
-      !mainButton.isVisible && mainButton.show();
-    } else if (mainButton.isVisible) {
-      mainButton.hide();
-    }
-  }, [text]);
-
-  useEffect(() => {
-    if (onClick) {
-      WebApp.MainButton.onClick(onClick);
-      return () => {
-        WebApp.MainButton.offClick(onClick);
-      };
-    }
-  }, [onClick]);
+  useBottomButton({
+    type: "main",
+    disabled,
+    progress,
+    textColor,
+    text,
+    onClick,
+    color,
+    hasShineEffect,
+  });
 
   return null;
 };

src/react/MainButton/Readme.md

@@ -1,5 +1,5 @@
 # MainButton
-React component for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps) Main Button.
+React component for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps) MainButton.
 
 ## Installation
 ```bash
@@ -21,16 +21,16 @@ It's not the best way to write code, especially if you use libraries like React.
 
 This package exports React component that wraps TWA MainButton SDK:
 
-```js
+```jsx
 import { MainButton } from '@twa-dev/sdk/react';
 
 <MainButton text="Submit" onClick={() => alert('submitted')} />
 ```
 
 ## Demo
-[@MainButtonDemoBot](https://t.me/MainButtonDemoBot)
+[@BottomButtonBot](https://t.me/BottomButtonBot)
 
-[Codesandbox](https://codesandbox.io/s/main-button-demo-732l5z)
+[Codesandbox](https://codesandbox.io/p/sandbox/bottom-button-demo-s8wdgp)
 
 ## Props
 Naming is pretty straight forward and corresponds SDK props and methods:
@@ -40,3 +40,4 @@ Naming is pretty straight forward and corresponds SDK props and methods:
 - `disabled`
 - `progress`
 - `onClick`
+- `hasShineEffect`

src/react/SecondaryButton/Readme.md

@@ -0,0 +1,45 @@
+# SecondaryButton
+React component for [Telegram Web Apps (TWA)](https://core.telegram.org/bots/webapps) SecondaryButton.
+
+## Installation
+```bash
+npm i @twa-dev/sdk
+```
+
+## Motivation
+TWA SDK contains an interface that controls [BottomButton](https://core.telegram.org/bots/webapps#bottombutton). It's written in imperative way:
+
+```js
+const SecondaryButton = window.Telegram.WebApp.SecondaryButton;
+
+SecondaryButton.setParams({ text: 'Cancel', position: 'bottom' });
+SecondaryButton.show();
+SecondaryButton.onClick(() => alert('cancelled'));
+```
+
+It's not the best way to write code, especially if you use libraries like React.
+
+This package exports React component that wraps TWA SecondaryButton SDK:
+
+```jsx
+import { MainButton, SecondaryButton } from '@twa-dev/sdk/react';
+
+<MainButton text="Continue" onClick={() => alert('continue')} />
+<SecondaryButton text="Cancel" position="bottom" onClick={() => alert('cancelled')} />
+```
+
+## Demo
+[@BottomButtonBot](https://t.me/BottomButtonBot)
+
+[Codesandbox](https://codesandbox.io/p/sandbox/bottom-button-demo-s8wdgp)
+
+## Props
+Naming is pretty straight forward and corresponds SDK props and methods:
+- `text`
+- `color`
+- `textColor`
+- `disabled`
+- `progress`
+- `onClick`
+- `hasShineEffect`
+- `position`