feat: M0 monorepo skeleton with services, clients, deploy and CI

- api/openapi.yaml: contract with /healthz, /readyz, /api/v1/server-info - services/api (Go): api with oapi-codegen strict server, goose migrations, readiness checks for Postgres/Redis; storage-agent stub with internal token - services/recommender (Python, uv): FastAPI health/readiness/internal status, `pipu-rec serve` and `pipu-rec analyze` entrypoints - packages: generated api-client, core (server URL + server check), i18n (ru/en + dictionary check), design-tokens (CSS vars + TS from tokens.json) - apps/web: Vite + React shell showing server status, language switch - apps/mobile: Expo (SDK 53) Android app with server connect screen - deploy: Dockerfiles, compose (prod + dev), nginx template, install/update scripts - .gitea/workflows: ci.yml and tag-based release.yml (images, signed APK, release) - scripts/version.mjs: version and Android versionCode from git tag - tests/fixtures/music/generate.sh: synthetic test library via ffmpeg - docs: versionCode formula, OpenAPI 3.0.3, dev instructions in README Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-19 23:55:11 +03:00
1 parent 9eb1c25147
commit ebf296542c
@@ -0,0 +1,20 @@
+# syntax=docker/dockerfile:1
+# Образ `web` = nginx + собранная SPA + конфиг (TLS, прокси на api, X-Accel-раздача аудио).
+# Сборка из корня репозитория: docker build -f apps/web/Dockerfile --build-arg VERSION=1.2.3 .
+
+FROM node:22-alpine AS build
+RUN npm install -g pnpm@11.9.0
+WORKDIR /repo
+COPY . .
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
+    pnpm install --frozen-lockfile --filter @pipu/web...
+# Сгенерированные клиенты и токены лежат в репозитории (их актуальность проверяет CI), поэтому generate здесь не нужен.
+RUN pnpm --filter @pipu/web build
+
+FROM nginx:1.28-alpine
+COPY deploy/nginx/default.conf.template /etc/nginx/templates/default.conf.template
+COPY --from=build /repo/apps/web/dist /usr/share/nginx/html
+ARG VERSION=0.0.0-dev
+LABEL org.opencontainers.image.version=${VERSION}
+ENV API_UPSTREAM=api:8080
+EXPOSE 80
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="ru" data-theme="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark light" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <title>pipu</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,36 @@
+{
+  "name": "@pipu/web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.2.6",
+    "@fontsource/onest": "^5.2.6",
+    "@fontsource/unbounded": "^5.2.6",
+    "@pipu/api-client": "workspace:*",
+    "@pipu/core": "workspace:*",
+    "@pipu/design-tokens": "workspace:*",
+    "@pipu/i18n": "workspace:*",
+    "@tanstack/react-query": "^5.80.7",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-i18next": "^15.5.3"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "jsdom": "^26.1.0",
+    "vite": "^6.3.5",
+    "vitest": "^3.2.4"
+  }
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><radialGradient id="g" cx="35%" cy="30%" r="75%"><stop offset="0" stop-color="#9CC6FF"/><stop offset=".55" stop-color="#2F80FF"/><stop offset="1" stop-color="#3A1FA8"/></radialGradient></defs><circle cx="16" cy="16" r="14" fill="url(#g)"/></svg>
@@ -0,0 +1,51 @@
+import { createApiClient } from '@pipu/api-client';
+import { createI18n } from '@pipu/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { App } from './App';
+
+afterEach(cleanup);
+
+const info = {
+  name: 'pipu-music',
+  version: '0.1.0',
+  api_version: 'v1',
+  supported_locales: ['ru', 'en'],
+  min_android_version_code: 100,
+};
+
+async function renderApp(fetchImpl: typeof fetch) {
+  const i18n = await createI18n('ru');
+  const client = createApiClient({ baseUrl: 'http://localhost', fetch: fetchImpl });
+  render(
+    <I18nextProvider i18n={i18n}>
+      <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+        <App client={client} />
+      </QueryClientProvider>
+    </I18nextProvider>,
+  );
+}
+
+describe('App', () => {
+  it('shows the server version when the server is online', async () => {
+    await renderApp(async () => Response.json(info));
+    expect(await screen.findByText('Сервер 0.1.0 на связи')).toBeTruthy();
+  });
+
+  it('shows an error when the server is unreachable', async () => {
+    await renderApp(async () => {
+      throw new TypeError('Failed to fetch');
+    });
+    expect(await screen.findByText(/Сервер не отвечает/)).toBeTruthy();
+  });
+
+  it('switches the interface language', async () => {
+    await renderApp(async () => Response.json(info));
+    await screen.findByText('Сервер 0.1.0 на связи');
+    fireEvent.click(screen.getByRole('button', { name: 'EN' }));
+    expect(await screen.findByText('Server 0.1.0 is online')).toBeTruthy();
+  });
+});
@@ -0,0 +1,57 @@
+import { createApiClient, type ApiClient } from '@pipu/api-client';
+import { checkServer } from '@pipu/core';
+import { SUPPORTED_LOCALES } from '@pipu/i18n';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+const defaultClient = createApiClient();
+
+export function App({ client = defaultClient }: { client?: ApiClient }) {
+  const { t, i18n } = useTranslation();
+  const server = useQuery({ queryKey: ['server-info'], queryFn: () => checkServer(client) });
+
+  return (
+    <div className="shell">
+      <header className="top">
+        <div className="logo">
+          <span className="logo-dot" aria-hidden />
+          {t('app.name')}
+        </div>
+        <div className="langs" role="group" aria-label={t('language.label')}>
+          {SUPPORTED_LOCALES.map((l) => (
+            <button
+              key={l}
+              type="button"
+              aria-pressed={i18n.language === l}
+              onClick={() => {
+                void i18n.changeLanguage(l);
+                document.documentElement.lang = l;
+              }}
+            >
+              {l.toUpperCase()}
+            </button>
+          ))}
+        </div>
+      </header>
+      <main className="main">
+        <section className="card">
+          <h1>{t('app.name')}</h1>
+          <p className="muted">{t('app.tagline')}</p>
+          {server.data?.status === 'ok' ? (
+            <div className="status" data-state="ok" role="status">
+              {t('server.online', { version: server.data.info.version })}
+            </div>
+          ) : server.data ? (
+            <div className="status" data-state="error" role="status">
+              {t('server.offline')}
+            </div>
+          ) : (
+            <div className="status" data-state="pending" role="status">
+              {t('server.checking')}
+            </div>
+          )}
+        </section>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,42 @@
+import './styles.css';
+
+import { createI18n, pickLocale } from '@pipu/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { I18nextProvider } from 'react-i18next';
+
+import { App } from './App';
+
+const LOCALE_KEY = 'pipu.locale';
+
+function storedLocale(): string[] {
+  try {
+    const v = localStorage.getItem(LOCALE_KEY);
+    return v ? [v] : [];
+  } catch {
+    return [];
+  }
+}
+
+const i18n = await createI18n(pickLocale([...storedLocale(), ...navigator.languages]));
+document.documentElement.lang = i18n.language;
+i18n.on('languageChanged', (l) => {
+  try {
+    localStorage.setItem(LOCALE_KEY, l);
+  } catch {
+    // недоступное хранилище не мешает работе
+  }
+});
+
+const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 1, refetchOnWindowFocus: false } } });
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <I18nextProvider i18n={i18n}>
+      <QueryClientProvider client={queryClient}>
+        <App />
+      </QueryClientProvider>
+    </I18nextProvider>
+  </StrictMode>,
+);
@@ -0,0 +1,151 @@
+@import '@pipu/design-tokens/tokens.css';
+@import '@fontsource/onest/400.css';
+@import '@fontsource/onest/600.css';
+@import '@fontsource/unbounded/600.css';
+@import '@fontsource/jetbrains-mono/400.css';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 15px;
+  -webkit-font-smoothing: antialiased;
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+
+.shell {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 60px;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--line);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 19px;
+  letter-spacing: -0.02em;
+}
+
+.logo-dot {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: radial-gradient(circle at 35% 30%, #9cc6ff, #2f80ff 55%, #3a1fa8);
+  box-shadow: 0 0 18px rgba(47, 128, 255, 0.55);
+}
+
+.langs {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: var(--glass);
+  border: 1px solid var(--line);
+}
+
+.langs button {
+  height: 30px;
+  padding: 0 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text2);
+}
+
+.langs button[aria-pressed='true'] {
+  background: var(--accent-soft);
+  color: var(--text);
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+}
+
+.card {
+  width: 400px;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 36px;
+  border-radius: var(--radius-xl);
+  background: var(--glass);
+  border: 1px solid var(--line2);
+  box-shadow: var(--shadow);
+}
+
+.card h1 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 26px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.muted {
+  margin: 0;
+  color: var(--text2);
+  line-height: 1.5;
+}
+
+.status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.status[data-state='ok'] {
+  background: var(--ok-soft);
+  color: var(--ok);
+}
+
+.status[data-state='error'] {
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.status[data-state='pending'] {
+  background: var(--surface2);
+  color: var(--text2);
+}
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
@@ -0,0 +1,23 @@
+/// <reference types="vitest/config" />
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    target: 'es2022',
+  },
+  server: {
+    host: '127.0.0.1',
+    port: 5173,
+    strictPort: true,
+    // В разработке API поднимается docker compose (deploy/compose.dev.yaml) на :8080
+    proxy: {
+      '/api': 'http://localhost:8080',
+      '/healthz': 'http://localhost:8080',
+    },
+  },
+  test: {
+    environment: 'jsdom',
+  },
+});
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><radialGradient id="g" cx="35%" cy="30%" r="75%"><stop offset="0" stop-color="#9CC6FF"/><stop offset=".55" stop-color="#2F80FF"/><stop offset="1" stop-color="#3A1FA8"/></radialGradient></defs><circle cx="16" cy="16" r="14" fill="url(#g)"/></svg>`