Add web sample WordWiz

.github/workflows/deployWebSample.yml

@@ -0,0 +1,63 @@
+# Simple workflow for deploying Web SDK Sample to GitHub Pages
+name: Deploy Web SDK Sample to Github Pages
+
+on:
+  pull_request:
+    branches:
+      - 'main'
+    paths:
+      - 'web/**'
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets the GITHUB_TOKEN permissions to allow comment on PRs
+permissions:
+  contents: read
+  pull-requests: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  web-sdk-sample-deploy:
+    runs-on: ubuntu-latest
+    env:
+      SAMPLE_DIR: web/samples/WordWiz
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22.14.0'
+
+      - name: Enable pnpm
+        run: |
+          corepack enable
+          corepack use pnpm@10.8.0
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+        working-directory: ${{ env.SAMPLE_DIR }}
+
+      - name: Build
+        run: pnpm run build
+        working-directory: ${{ env.SAMPLE_DIR }}
+
+      - name: Publish Web SDK Sample Build
+        run: ./build/bin/upload-web-sdk-sample-build.sh
+        env:
+          GITHUB_USERNAME: ${{ secrets.GIT_WEB_SDK_SAMPLE_USERNAME }}
+          GITHUB_PASSWORD: ${{ secrets.GIT_WEB_SDK_SAMPLE_PASSWORD }}
+          SAMPLE_DIR: ${{ env.SAMPLE_DIR }}
+
+      - uses: github-actions-up-and-running/pr-comment@v1.0.1
+        if: ${{ github.event_name == 'pull_request' }}
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          message: Web SDK Sample Build [link](https://beamable.github.io/web-sdk-sample/)

.github/workflows/release-web.yml

@@ -71,7 +71,7 @@ jobs:
 
       # Install project dependencies using pnpm
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       # Run code linter
       - name: Lint

build/bin/upload-web-sdk-sample-build.sh

@@ -0,0 +1,66 @@
+#!/bin/bash
+
+# Exit immediately if any command fails
+set -e
+
+# Use GitHub workspace if available, otherwise use current directory
+workspace="${GITHUB_WORKSPACE:-.}"
+
+# Set Up Paths
+build_directory="$workspace/web-sdk-sample-build"
+github_repo_url="https://$GITHUB_USERNAME:$GITHUB_PASSWORD@github.com/beamable/web-sdk-sample.git"
+source_dist_folder="$workspace/$SAMPLE_DIR/dist"
+
+# Validate Source Files Exist
+if [[ ! -d "$source_dist_folder" ]]; then
+  echo "Error: Expected dist folder not found at $source_dist_folder" >&2
+  exit 1
+fi
+
+echo "Preparing build directory..."
+
+# Create fresh build directory
+mkdir -p "$build_directory"
+
+# Move into build directory
+cd "$build_directory"
+
+echo "Setting up git repository..."
+
+git init
+git config user.email "github-actions[bot]@users.noreply.github.com"
+git config user.name "github-actions[bot]"
+git remote add origin "$github_repo_url"
+
+# Fetch existing main branch or create new one
+echo "Checking for existing repository..."
+if git ls-remote --exit-code origin main &>/dev/null; then
+  echo "Found existing main branch, fetching..."
+  git fetch origin main --depth=1
+  git checkout -B main origin/main
+else
+  echo "No existing main branch found, creating new one..."
+  git checkout -B main
+fi
+
+echo "Copying new files..."
+
+cp -a "$source_dist_folder"/. .
+
+echo "Checking for changes..."
+
+# Stage all changes
+git add --all
+git status
+
+# Check if there are any changes to commit
+if git diff --cached --quiet; then
+  echo "No changes detected - nothing to commit"
+else
+  echo "Changes detected, committing and pushing..."
+  git commit -m "Update web sdk sample build"
+  git push --set-upstream --force origin main
+  echo "Successfully deployed changes"
+fi
+
+echo "Done!"

web/samples/WordWiz/.eslintrc.cjs

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+  ],
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint', 'react'],
+  rules: {
+    'react/react-in-jsx-scope': 0,
+  },
+};

web/samples/WordWiz/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.pem

web/samples/WordWiz/.prettierignore

@@ -0,0 +1 @@
+node_modules/

web/samples/WordWiz/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "semi": true,
+  "singleQuote": true
+}

web/samples/WordWiz/README.md

@@ -0,0 +1,123 @@
+# Word Wiz
+
+This template demonstrates how developers can implement a single-page
+application on the Telegram Mini Apps platform using the following technologies
+and libraries:
+
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Vite](https://vitejs.dev/)
+
+> The template was created using [npm](https://www.npmjs.com/). Therefore, it is
+> required to use it for this project as well. Using other package managers, you
+> will receive a corresponding error.
+
+## Install Dependencies
+
+If you have just cloned this template, you should install the project
+dependencies using the command:
+
+```Bash
+pnpm install
+```
+
+## Scripts
+
+This project contains the following scripts:
+
+- `dev`. Runs the application in development mode.
+- `dev:https`. Runs the application in development mode using locally created valid SSL-certificates.
+- `build`. Builds the application for production.
+- `lint`. Runs [eslint](https://eslint.org/) to ensure the code quality meets
+  the required standards.
+- `deploy`. Deploys the application to GitHub Pages.
+
+To run a script, use the `pnpm run` command:
+
+```Bash
+pnpm run {script}
+# Example: pnpm run build
+```
+
+## Deploy
+
+This boilerplate uses GitHub Pages as the way to host the application
+externally. GitHub Pages provides a CDN which will let your users receive the
+application rapidly.
+
+### Manual Deployment
+
+This boilerplate uses the [gh-pages](https://www.npmjs.com/package/gh-pages)
+tool, which allows deploying the application right from the PC.
+
+#### Configuring
+
+Before running the deployment process, ensure that you have done the following:
+
+1. Replaced the `homepage` value in `package.json`. The GitHub Pages deploy tool
+   uses this value to
+   determine the related GitHub project.
+2. Replaced the `base` value in `vite.config.ts` and have set it to the name of
+   your GitHub
+   repository. Vite will use this value when creating paths to static assets.
+
+For instance, if your GitHub username is `telegram-mini-apps` and the repository
+name is `is-awesome`, the value in the `homepage` field should be the following:
+
+```json
+{
+  "homepage": "https://telegram-mini-apps.github.io/is-awesome"
+}
+```
+
+And `vite.config.ts` should have this content:
+
+```ts
+export default defineConfig({
+  base: '/is-awesome/',
+  // ...
+});
+```
+
+You can find more information on configuring the deployment in the `gh-pages`
+[docs](https://github.com/tschaub/gh-pages?tab=readme-ov-file#github-pages-project-sites).
+
+#### Before Deploying
+
+Before deploying the application, make sure that you've built it and going to
+deploy the fresh static files:
+
+```bash
+npm run build
+```
+
+Then, run the deployment process, using the `deploy` script:
+
+```Bash
+npm run deploy
+```
+
+### GitHub Workflow
+
+To simplify the deployment process, this template includes a
+pre-configured [GitHub workflow](.github/workflows/github-pages-deploy.yml) that
+automatically deploys the project when changes are pushed to the `master`
+branch.
+
+To enable this workflow, create a new environment (or edit the existing one) in
+the GitHub repository settings and name it `github-pages`. Then, add the
+`master` branch to the list of deployment branches.
+
+You can find the environment settings using this
+URL: `https://github.com/{username}/{repository}/settings/environments`.
+
+![img.png](.github/deployment-branches.png)
+
+In case, you don't want to do it automatically, or you don't use GitHub as the
+project codebase, remove the `.github` directory.
+
+### GitHub Web Interface
+
+Alternatively, developers can configure automatic deployment using the GitHub
+web interface. To do this, follow the link:
+`https://github.com/{username}/{repository}/settings/pages`.

web/samples/WordWiz/eslint.config.js

@@ -0,0 +1,41 @@
+// @ts-check
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+
+const baseDir = path.dirname(fileURLToPath(import.meta.url));
+
+export default tseslint.config({
+  files: ['src/**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+  extends: [
+    eslint.configs.recommended,
+    ...tseslint.configs.recommendedTypeChecked,
+  ],
+  plugins: {
+    react,
+    'react-hooks': reactHooks,
+  },
+  languageOptions: {
+    parserOptions: {
+      project: './tsconfig.json',
+      tsconfigRootDir: baseDir,
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+    globals: {
+      ...globals.browser,
+    },
+  },
+  rules: {
+    '@typescript-eslint/no-unused-expressions': 0,
+  },
+});

web/samples/WordWiz/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Word Wiz</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>