feat: add widgets cat-fact & age-checker

.eslintignore

@@ -0,0 +1,8 @@
+.next
+public
+node_modules
+yarn.lock
+package-lock.json
+**/*.test.js
+coverage
+build

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'plugin:@conarti/feature-sliced/recommended',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    '@conarti/feature-sliced/public-api': 'off',
+  },
+};

.github/workflows/nodejs.yml

@@ -0,0 +1,43 @@
+name: Build
+
+on:
+  - push
+  - pull_request
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      # https://github.com/actions/checkout
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        # https://github.com/actions/setup-node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: npm install
+        run: |
+          make install
+        env:
+          CI: true
+
+      - name: Run linter
+        run: make lint
+
+      # - name: Run tests
+      #   run: make test
+
+      # - name: Test & publish code coverage
+      #   uses: paambaati/codeclimate-action@v3.2.0
+      #   env:
+      #     CC_TEST_REPORTER_ID: ${{ secrets.CODECLIMATE_SECRET }}
+      #   with:
+      #     coverageCommand: make test-coverage
+      #     debug: true

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

Makefile

@@ -0,0 +1,14 @@
+install:
+	npm install
+
+test:
+	npm run test
+
+lint:
+	npm run lint
+
+lint-fix:
+	npm run lint -- --fix
+
+host:
+	npm run host

README.md

@@ -0,0 +1,55 @@
+# Basic [VK Bridge](https://github.com/VKCOM/vk-bridge) + [VKUI](https://github.com/VKCOM/VKUI) + [VK Miniapps Router](https://github.com/VKCOM/vk-mini-apps-router) app
+
+Этот шаблон предоставляет базовый код и настройки для создания мини-приложения внутри ВКонтакте.  
+В качестве сборщика проекта выступает [Vite](https://vite-docs-ru.vercel.app/guide/), подробнее про его конфигурацию и дополнительные плагины можно прочитать [здесь](https://vite-docs-ru.vercel.app/config/) и [здесь]().
+
+## 🚀 Запуск мини приложения
+
+Запустите ваш мини апп
+
+```sh
+ yarn start
+```
+
+Перейдите на [devportal](https://dev.vk.com/ru) или в [управление](https://vk.com/apps?act=manage) и создайте новый мини апп.  
+Вставьте URL на котором работает ваше приложение в настройки, предварительно включив режим разработки.
+Теперь можете открыть мини апп, нажав на его иконку.
+Список всех созданных вами мини приложений вы сможете найти [тут](https://vk.com/apps?act=manage) или [тут](https://dev.vk.com/ru/admin/apps-list).
+
+## 🌐 Деплой мини приложения
+
+Для того чтобы поделиться приложением запущенным на localhost со своими друзьями, вы можете скачать утилиту vk-tunnel и запустить уже подготовленный скрипт из package.json
+
+```sh
+yarn global add @vkontakte/vk-tunnel
+yarn run tunnel
+```
+
+После чего вы получите ссылку, по которой ваше приложение будет доступно с любого устройства, подробнее про vk-tunnel можно прочитать [тут](https://dev.vk.com/ru/libraries/tunnel).
+
+Для того чтобы захостить ваше приложение на сервера ВКонтакте нужно зайти в vk-hosting-config.json и указать id вашего приложения. Далее можно запустить уже подготовленный скрипт:
+
+```sh
+yarn run deploy
+```
+
+После чего, вы получите бессрочную ссылку на ваш мини апп.
+
+## 🗂️ Предустановленные библиотеки
+
+Мы подготовили для вас набор пакетов, с которыми вам будет легко начать разрабатывать мини аппы
+| Пакет | Назначение |
+| ------ | ------ |
+| [vk-bridge](https://dev.vk.com/ru/mini-apps/bridge) | Библиотека для отправки команд и обмена данными с платформой ВКонтакте. |
+| [VKUI](https://vkcom.github.io/VKUI/) | Библиотека React-компонентов для создания мини-приложений в стиле ВКонтакте. |
+| [vk-bridge-react](https://www.npmjs.com/package/@vkontakte/vk-bridge-react) | Пакет, который даёт возможность использовать события библиотеки VK Bridge в React-приложениях. |
+| [vk-mini-apps-router](https://dev.vk.com/ru/libraries/router) | Библиотека для маршрутизации и навигации в мини-приложениях, созданных с помощью VKUI. |
+| [icons](https://vkcom.github.io/icons/) | Набор иконок для использования в компонентах VKUI. |
+| [vk-miniapps-deploy](https://dev.vk.com/ru/mini-apps/development/hosting) | Пакет для размещения файлов мини-приложения на хостинге ВКонтакте. |
+| [eruda](https://www.npmjs.com/package/eruda) | Консоль для мобильного браузера|
+
+## 📎 Полезные ссылки
+
+[Dev портал разработчиков](https://dev.vk.com/ru)  
+[Пример мини приложения](https://dev.vk.com/ru/mini-apps/examples/shop)  
+[Если столкнулись с проблемами](https://github.com/VKCOM/create-vk-mini-app/issues)

dist/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/svg/logo.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+    />
+    <meta
+      name="description"
+      content="Тестовое задание для стажировки в VK по направлению JavaScript"
+    />
+    <title>ВК – Запросы</title>
+    <script type="module" crossorigin src="/assets/index-CYbFD04A.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-C32Trqz4.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/svg/logo.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+    />
+    <meta
+      name="description"
+      content="Тестовое задание для стажировки в VK по направлению JavaScript"
+    />
+    <title>ВК – Запросы</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/app/index.tsx"></script>
+  </body>
+</html>