@icomponents/tokens 0.1.0

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@icomponents/tokens",
+  "version": "0.1.0",
+  "description": "Платформо-независимая основа кита: контракт data-testid и набор шрифтов",
+  "type": "module",
+  "license": "UNLICENSED",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./testids": "./src/testids.ts",
+    "./fonts": "./src/fonts.ts"
+  },
+  "scripts": {
+    "type-check": "bunx tsc --noEmit",
+    "test": "bun test"
+  },
+  "devDependencies": {
+    "@icomponents/typescript-config": "workspace:*",
+    "@types/bun": "latest",
+    "typescript": "latest",
+    "@types/node": "latest"
+  }
+}

package/src/fonts.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "bun:test";
+
+import { fonts } from "./fonts";
+
+describe("shadcn-admin default fonts", () => {
+  it("does not offer any banned font family", () => {
+    const banned = ["dm-sans", "barlow-condensed", "roboto", "arial", "space-grotesk"];
+    for (const f of fonts) expect(banned).not.toContain(f);
+  });
+  it("offers the shadcn-admin default families", () => {
+    expect(fonts).toContain("inter");
+    expect(fonts).toContain("manrope");
+  });
+});

package/src/fonts.ts

@@ -0,0 +1,17 @@
+/**
+ * List of available font names (visit the url `/settings/appearance`).
+ * This array is used to generate dynamic font classes (e.g., `font-inter`,
+ * `font-manrope`).
+ *
+ * 📝 How to Add a New Font (Tailwind v4+):
+ * 1. Add the font name here (kebab-case, e.g. 'jetbrains-mono').
+ * 2. Update the `<link>` tag in 'index.html' to load the family from Google Fonts.
+ * 3. Add the family to 'theme.css' via `@theme inline`, e.g.:
+ *   @theme inline {
+ *      // ... other font families
+ *      --font-jetbrains-mono: "JetBrains Mono", monospace;
+ *   }
+ *
+ * shadcn-admin default type set.
+ */
+export const fonts = ["inter", "manrope", "system"] as const;

package/src/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Платформо-независимая основа кита.
+ *
+ * Здесь только то, что одинаково для веба и React Native: контракт `data-testid`, на который
+ * опирается приёмка, и список шрифтов. Ни одного импорта React — иначе пакет перестанет быть
+ * общим ровно в тот момент, когда появится вторая реализация.
+ */
+export * from "./fonts";
+export * from "./testids";

package/src/testids.ts

@@ -0,0 +1,66 @@
+/**
+ * КОНТРАКТ ВЁРСТКИ: устойчивые `data-testid`.
+ *
+ * Зачем он существует. Дизайн меняют двумя способами, и второй ломает всё, что цепляется за наш DOM:
+ *
+ *   1. Перекраска (shadcn / Base UI): меняются токены и классы — разметка остаётся нашей.
+ *   2. Готовая вёрстка прототипа: разметка ЗАМЕНЯЕТСЯ ЦЕЛИКОМ, и в неё вайрится наша логика.
+ *
+ * Во втором случае тест, написанный по классу (`.btn-primary`), по тексту («Добавить запись») или по
+ * структуре (`table > tbody > tr`), покраснеет весь разом — и не докажет ничего: он покраснел не
+ * потому, что сломалась функция, а потому, что дизайнер иначе назвал кнопку. Такой набор тестов после
+ * редизайна просто выключают — а сеть нужна ровно тогда.
+ *
+ * Поэтому контракт один и явный: **новая вёрстка обязана нести эти `data-testid`**. Тогда прогон
+ * означает то, что должен: экран смонтировался, список отдал строки, разрушительное действие
+ * спрашивает подтверждение. Подписи, цвета и структура — свободны.
+ *
+ * Правила:
+ *   — ID стабилен. Переименование = поломка контракта, а не «мелкая правка».
+ *   — ID описывает РОЛЬ элемента, а не его вид: `table-empty`, а не `grey-box`.
+ *   — Для строк списка — `row-<id>`, чтобы тест мог адресовать конкретную сущность.
+ *
+ * ЗДЕСЬ ТОЛЬКО ОБЩЕЕ. Ядро знает про экран, навигацию, список, форму и вход — то есть про то, что
+ * есть у любого приложения. Хваталки СВОИХ действий (`plan-subscribe-*`, `role-save-*`) объявляет
+ * слайс, который ими владеет, — в своём пакете, рядом с экраном: `@app/<пакет>/testids`. Складывать
+ * их сюда значило бы, что ядро знает про биллинг продукта, а `sync-core.sh` затирал бы их при каждом
+ * обновлении ядра.
+ */
+export const TESTID = {
+  /** Корень экрана. Есть = экран смонтировался (а не отрисовался пустой каркас или экран ошибки). */
+  screen: "screen",
+  /** Заголовок экрана. */
+  screenTitle: "screen-title",
+  /** Главное действие экрана: «Добавить запись», «Создать проект» и т. п. */
+  screenPrimaryAction: "screen-primary-action",
+
+  /** Навигация. Пропала — человек заперт на одном экране, и это не «косметика». */
+  nav: "nav",
+  navItem: (key: string) => `nav-item-${key}`,
+
+  /** Таблица/список. */
+  table: "table",
+  tableRow: (id: string) => `row-${id}`,
+  /** Пустое состояние. Молчащая пустая таблица читается как «данные грузятся» — и человек ждёт зря. */
+  tableEmpty: "table-empty",
+
+  /** Диалог подтверждения разрушительного действия. */
+  confirmDialog: "confirm-dialog",
+  confirmAccept: "confirm-accept",
+  confirmCancel: "confirm-cancel",
+
+  /** Форма в панели/диалоге. */
+  formSubmit: "form-submit",
+  formError: "form-error",
+  /** Поле формы по имени: `field-email`. Позволяет тесту заполнить форму, не зная её вёрстки. */
+  field: (name: string) => `field-${name}`,
+
+  /** Вход/выход. */
+  signIn: "sign-in",
+  signOut: "sign-out",
+  /** Переключение «вход ↔ регистрация» на экране входа. */
+  signUpToggle: "sign-up-toggle",
+} as const;
+
+/** Готовый атрибут: `<div {...testid(TESTID.screen)}>`. */
+export const testid = (id: string): { "data-testid": string } => ({ "data-testid": id });