Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
38 changes: 7 additions & 31 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,6 @@ jobs:
- name: Typecheck workspaces
run: npm run typecheck

- name: Guard the frozen showcase
run: npm run check:frozen-showcase
- name: Typecheck documented examples
run: npm run check:docs:examples

Expand Down Expand Up @@ -94,9 +92,6 @@ jobs:
- name: Check CodeMonster UI contracts, accessibility, and visual fixtures
run: npm run test:ui

- name: Run migration tests
run: npm run test:migration

- name: Run release preparation tests
run: npm run test:release-prep

Expand All @@ -119,8 +114,8 @@ jobs:
- name: Install dependencies
run: npm ci

# The suite hides dist itself; the build is still needed for its other output, such as the
# generated theme CSS that vueforge-core's parity check reads.
# The suite hides dist itself; the build is still needed for its other output, such as
# generated CSS that some workspaces' own tests read back.
- name: Build packages
run: npm run build

Expand Down Expand Up @@ -155,9 +150,6 @@ jobs:
- name: Check consumer tree shaking
run: npm run check:consumer-tree-shaking

- name: Check deferred runtime budgets
run: npm run check:deferred-budgets

- name: Dry-run publish artifacts
run: npm run pack:all:dry-run

Expand Down Expand Up @@ -260,12 +252,8 @@ jobs:
unzip -q "${RUNNER_TEMP}/chrome-for-testing.zip" -d "${RUNNER_TEMP}"
"${chrome_for_testing_path}" --version

- name: Verify frozen showcase visuals
- name: Verify cross-platform adapter visuals
env:
SHOWCASE_CAPTURE: ${{ runner.temp }}/codemonster-showcase-current
SHOWCASE_DIFF: ${{ runner.temp }}/codemonster-showcase-diff
SHOWCASE_STATE_CAPTURE: ${{ runner.temp }}/codemonster-showcase-state-current
SHOWCASE_STATE_DIFF: ${{ runner.temp }}/codemonster-showcase-state-diff
CROSS_PLATFORM_CAPTURE: ${{ runner.temp }}/codemonster-cross-platform-current
CROSS_PLATFORM_RAZOR_DIFF: ${{ runner.temp }}/codemonster-cross-platform-razor-diff
CROSS_PLATFORM_RAZOR_FIXTURES: ${{ runner.temp }}/codemonster-cross-platform-razor.json
Expand All @@ -274,54 +262,42 @@ jobs:
set -euo pipefail
chrome_for_testing_path="${RUNNER_TEMP}/chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing"

npm run dev -w @codemonster-ru/vueforge-playground-example -- --host 127.0.0.1 --port 5175 > "${RUNNER_TEMP}/codemonster-showcase-vite.log" 2>&1 &
vite_pid=$!
npm run visual:cross-platform:razor-render -- --output="${CROSS_PLATFORM_RAZOR_FIXTURES}"
npm run visual:cross-platform:serve -- --razor-fixtures="${CROSS_PLATFORM_RAZOR_FIXTURES}" --port=5176 > "${RUNNER_TEMP}/codemonster-cross-platform-vite.log" 2>&1 &
adapter_pid=$!
"${chrome_for_testing_path}" --headless=new --remote-debugging-port=9226 --user-data-dir="${RUNNER_TEMP}/codemonster-showcase-chrome" --disable-gpu --no-first-run --no-default-browser-check about:blank > "${RUNNER_TEMP}/codemonster-showcase-chrome.log" 2>&1 &
chrome_pid=$!

cleanup() {
kill "${vite_pid}" "${adapter_pid}" "${chrome_pid}" 2>/dev/null || true
kill "${adapter_pid}" "${chrome_pid}" 2>/dev/null || true
}
trap cleanup EXIT

for attempt in {1..60}; do
if curl --fail --silent http://127.0.0.1:5175/ >/dev/null && curl --fail --silent 'http://127.0.0.1:5176/?case=button-default&platform=vue&theme=light' >/dev/null && curl --fail --silent http://127.0.0.1:9226/json/version >/dev/null; then
if curl --fail --silent 'http://127.0.0.1:5176/?case=button-default&platform=vue&theme=light' >/dev/null && curl --fail --silent http://127.0.0.1:9226/json/version >/dev/null; then
break
fi
if [ "${attempt}" -eq 60 ]; then
cat "${RUNNER_TEMP}/codemonster-showcase-vite.log"
cat "${RUNNER_TEMP}/codemonster-cross-platform-vite.log"
cat "${RUNNER_TEMP}/codemonster-showcase-chrome.log"
exit 1
fi
sleep 1
done

node scripts/visual/capture-showcase.mjs --origin=http://127.0.0.1:5175 --output="${SHOWCASE_CAPTURE}" --label=ci-current
node scripts/visual/compare-showcase.mjs --baseline=visual-baselines/vueforge-showcase --current="${SHOWCASE_CAPTURE}" --diff="${SHOWCASE_DIFF}"
npm run visual:showcase:states:capture -- --origin=http://127.0.0.1:5175 --output="${SHOWCASE_STATE_CAPTURE}" --label=ci-state-current
npm run visual:showcase:states:compare -- --current="${SHOWCASE_STATE_CAPTURE}" --diff="${SHOWCASE_STATE_DIFF}"
npm run visual:cross-platform:capture -- --origin=http://127.0.0.1:5176 --output="${CROSS_PLATFORM_CAPTURE}" --label=ci-actual-adapters
node scripts/visual/compare-showcase.mjs --baseline=visual-baselines/vueforge-cross-platform --current="${CROSS_PLATFORM_CAPTURE}/vue" --diff="${CROSS_PLATFORM_VUE_DIFF}" --threshold=4
node scripts/visual/compare-showcase.mjs --baseline=visual-baselines/vueforge-cross-platform --current="${CROSS_PLATFORM_CAPTURE}/razor" --diff="${CROSS_PLATFORM_RAZOR_DIFF}" --threshold=4

- name: Upload showcase visual differences
- name: Upload cross-platform visual differences
if: failure()
uses: actions/upload-artifact@v7
with:
name: codemonster-showcase-visual-diff
name: codemonster-cross-platform-visual-diff
path: |
${{ runner.temp }}/codemonster-showcase-current
${{ runner.temp }}/codemonster-showcase-diff
${{ runner.temp }}/codemonster-showcase-state-current
${{ runner.temp }}/codemonster-showcase-state-diff
${{ runner.temp }}/codemonster-cross-platform-current
${{ runner.temp }}/codemonster-cross-platform-vue-diff
${{ runner.temp }}/codemonster-cross-platform-razor-diff
${{ runner.temp }}/codemonster-cross-platform-vite.log
${{ runner.temp }}/codemonster-showcase-vite.log
${{ runner.temp }}/codemonster-showcase-chrome.log
if-no-files-found: ignore
118 changes: 0 additions & 118 deletions .github/workflows/refresh-visual-baselines.yml

This file was deleted.

39 changes: 13 additions & 26 deletions ARCHITECTURE.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
# CodeMonster UI Monorepo Architecture

This repository contains the CodeMonster UI package line, the retained VueForge products, shared
contracts, cross-platform examples, and the tooling used to validate and publish them.
This repository contains the CodeMonster UI package line, shared contracts, cross-platform
examples, and the tooling used to validate and publish them. CodeMonster UI succeeds VueForge, the
Vue-only design system this project migrated from; VueForge is sunset, and its own packages and
documentation now live in [`codemonster-ru/vueforge`](https://github.com/codemonster-ru/vueforge).

## Repository layout

- `packages/*` — publishable npm packages and the Annabel Razor adapter
- `examples/*` — local runnable examples for Vue and Annabel Razor
- `contracts/*` — component manifests, behavior contracts, schemas, and visual-fixture metadata
- `docs/*` — product, package, architecture, migration, and release documentation
- `migration/*` — machine-readable VueForge-to-CodeMonster UI migration data and checks
- `scripts/*` — build, CI, contract, migration, release, and visual-validation tooling
- `docs/*` — product, package, architecture, and release documentation
- `scripts/*` — build, CI, contract, release, and visual-validation tooling
- `visual-baselines/*` — reviewed visual-regression reference images used by CI
- `.github/*` — repository workflows; `.githooks/*` — local Git hooks

Expand All @@ -32,27 +33,13 @@ Each publishable npm package should keep a consistent shape:
- `test/*`

The `razor` package follows Composer conventions and keeps its PHP metadata and tests alongside
the adapter source. Shared CodeMonster UI packages use the `ui-*` naming line; retained VueForge
products keep their published `vueforge-*` names while they are in maintenance.
the adapter source. Every publishable npm package uses the `ui-*` naming line.

## Naming conventions

### Vue components

- Component file names: `Vf*.vue`
- Public component names and plugin registrations: `Vf*`
- No `Vue*`/legacy aliases in public API

### CSS classes and tokens

- Base namespace: `vf-`
- Package namespaces:
- `core`: `vf-*`
- `layouts`: `vf-layout-*` (plus component-specific `vf-*` blocks)
- `codeblock`: `vf-codeblock*` / `--vf-codeblock-*`
- `playground`: `vf-playground*` / `--vf-playground-*`
- `icons`: `vf-icon*` / `--vf-icon-*`
- Legacy prefixes (`vif*`, `vcb*`, `cm-*`) are not used for new code.
Component names, CSS classes, custom properties, and runtime hooks all use the `Cm`/`cm-` prefix.
See [naming and prefixes](./docs/architecture/naming-and-prefixes.md) for the full, authoritative
table; it is not duplicated here so there is one place to keep it correct.

## Shared behavior layer

Expand Down Expand Up @@ -105,9 +92,9 @@ Each publishable npm package should expose, where applicable:
root `format:check`, which runs with `--if-present`, so its formatting goes unverified.
- `prepack` (usually calls `build`)

The root scripts compose package checks with repository-level documentation, contract, migration,
consumer, and visual checks. New repository checks should be added to the root workflow only when
they validate a cross-package invariant.
The root scripts compose package checks with repository-level documentation, contract, consumer,
and visual checks. New repository checks should be added to the root workflow only when they
validate a cross-package invariant.

## Release hygiene

Expand Down
Loading
Loading