STM.UI.NET 1.0.0

There is a newer version of this package available.
See the version list below for details.
dotnet add package STM.UI.NET --version 1.0.0
                    
NuGet\Install-Package STM.UI.NET -Version 1.0.0
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="STM.UI.NET" Version="1.0.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="STM.UI.NET" Version="1.0.0" />
                    
Directory.Packages.props
<PackageReference Include="STM.UI.NET" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add STM.UI.NET --version 1.0.0
                    
#r "nuget: STM.UI.NET, 1.0.0"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package STM.UI.NET@1.0.0
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=STM.UI.NET&version=1.0.0
                    
Install as a Cake Addin
#tool nuget:?package=STM.UI.NET&version=1.0.0
                    
Install as a Cake Tool

STM.UI.NET

Design system STM cho ASP.NET Core (Razor Pages / MVC) — bản .NET song sinh của @stmjsc/ui.

Public trên nuget.org, MIT — dùng được trong bất kỳ dự án .NET nào (dotnet add package STM.UI.NET).

Không chạy React server-side. Thay vào đó chia sẻ lớp token (đồng bộ từ @stmjsc/ui) và cung cấp Tag Helper + CSS component để web .NET (STM.ID, STM.Sign…) khớp giao diện với các app Next.js.

Nguyên tắc: token là single source of truth, đồng bộ tự động từ @stmjsc/ui (không copy tay). Component viết bằng CSS thuần theo class contract shadcn STM → không cần Node/Tailwind trong build .NET.

Dùng


<PackageReference Include="STM.UI.NET" Version="1.0.*" />
@* _Layout.cshtml — nạp token TRƯỚC, component SAU *@
<link rel="stylesheet" href="~/_content/STM.UI.NET/css/stm-ui-tokens.css" />
<link rel="stylesheet" href="~/_content/STM.UI.NET/css/stm-ui.css" />
@* _ViewImports.cshtml *@
@addTagHelper *, STM.UI.NET

Component

Dùng Kết quả
<stm-button variant="primary" size="lg" block type="submit">Đăng nhập</stm-button> Nút (button/a), variant primary·secondary·destructive·outline·ghost·link, size default·sm·lg·icon
<stm-alert variant="destructive">Sai mật khẩu</stm-alert> Hộp thông báo (destructive·success·warning·info)
<stm-field label="Tên đăng nhập" for="Username" error="@Model.Error"> <input class="stm-input" asp-for="Username"/> </stm-field> Nhãn + control + lỗi

Input/label giữ Razor chuẩn để không mất asp-for (bind + validate): thêm class .stm-input, .stm-label. Ngoài ra có class .stm-card, .stm-auth / .stm-auth__card / .stm-brand cho khung màn đăng nhập.

Prefix stm (element <stm-*>, class .stm-*) là thương hiệu design system, thống nhất với @stmjsc/ui. Chỉ package/namespace là STM.UI.NET (khớp quy ước STM.* của các dự án .NET khác).

Token & dark mode

Token (màu, radius, status, sidebar…) đồng bộ từ @stmjsc/ui/styles.css. Dark mode class-based: đặt class="dark" trên <html>. Cập nhật token khi bump design system:

src/STM.UI.NET/tools/sync-tokens.sh   # đọc @stmjsc/ui (node_modules) hoặc repo stm.ui cạnh bên

Phát hành lên NuGet công khai (nuget.org)

Package cấu hình sẵn để publish public, MIT — bên thứ ba dùng được trong bất kỳ dự án nào (tương tự @stmjsc/ui public trên npm): PackageId = STM.UI.NET, PackageLicenseExpression = MIT (kèm file LICENSE), README + symbol (.snupkg) nhúng sẵn. Thiết lập một lần → checklist → version → publish → kiểm tra → CI.

0. Trạng thái đã chốt

Mục Giá trị
Tên package STM.UI.NET (owner stmjsc trên nuget.org)
License MIT (PackageLicenseExpression + file LICENSE) — cho bên khác tái sử dụng
Registry nuget.org (public), source https://api.nuget.org/v3/index.json

1. Thiết lập một lần

  1. Tạo tài khoản tại nuget.org (dùng chung org/owner stmjsc).
  2. Tạo API key (Account → API Keys → Create):
    • Scope: Push (Push new packages and package versions).
    • Glob package: STM.UI.NET* — giới hạn key chỉ đẩy được package này.
    • Lưu key an toàn (chỉ hiện 1 lần); CI để trong secret NUGET_API_KEY.
export NUGET_API_KEY=<khóa vừa tạo>   # KHÔNG commit khóa vào repo

2. Checklist trước mỗi lần publish

Chạy tại thư mục gốc repo — tất cả phải xanh:

src/STM.UI.NET/tools/sync-tokens.sh          # token khớp @stmjsc/ui mới nhất (nếu vừa bump)
rm -rf out && dotnet pack src/STM.UI.NET/STM.UI.NET.csproj -c Release -o out   # pack đã gồm build + báo warning/error
# Xem CHÍNH XÁC nội dung package (out sạch → đúng 1 .nupkg; nội dung: DLL + staticwebassets/css/*.css + README + LICENSE):
unzip -l out/*.nupkg

dotnet pack phải không còn cảnh báo "missing a readme" (README đã nhúng), và sinh kèm *.snupkg.

Pack vào thư mục out sạch (rm -rf out) để tránh lẫn nhiều version. Nếu để trong bin/Release (tích lũy nhiều version), unzip -l …STM.UI.NET.*.nupkg khớp nhiều fileunzip hiểu file thứ 2 là bộ lọc bên trong file thứ nhất → báo "0 files". Khi đó chỉ định rõ version: unzip -l …/STM.UI.NET.<ver>.nupkg.

3. Đặt version (SemVer)

Sửa <Version> trong src/STM.UI.NET/STM.UI.NET.csproj (không publish đè version đã tồn tại — nuget.org từ chối). Quy ước:

Bump Khi nào
patch 0.1.0 → 0.1.1 sửa lỗi/style, không đổi API tag helper
minor 0.1.0 → 0.2.0 thêm component/tag helper/prop, không phá vỡ
major 0.1.0 → 1.0.0 breaking: đổi/bỏ tag helper, đổi tên class token

Gắn tag git cho mỗi release:

git commit -am "release: v1.0.0"
git tag v1.0.0 && git push --follow-tags

4. Publish

rm -rf out && dotnet pack src/STM.UI.NET/STM.UI.NET.csproj -c Release -o out
dotnet nuget push out/STM.UI.NET.<ver>.nupkg \
  --api-key "$NUGET_API_KEY" \
  --source https://api.nuget.org/v3/index.json
# .snupkg (symbol) cùng thư mục được đẩy kèm tự động.

5. Kiểm tra sau publish

nuget.org duyệt/đánh chỉ mục vài phút. Sau đó thử cài ở project trống:

dotnet new web -o /tmp/stmui-smoke && cd /tmp/stmui-smoke
dotnet add package STM.UI.NET            # resolve từ nuget.org (source mặc định)
# _ViewImports: @addTagHelper *, STM.UI.NET
# _Layout: <link href="~/_content/STM.UI.NET/css/stm-ui-tokens.css"> + stm-ui.css

6. Tự động hóa CI (GitHub Actions)

.github/workflows/publish.yml — publish khi push tag v*:

name: publish
on:
  push:
    tags: ["v*"]
jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-dotnet@v4
        with: { dotnet-version: "10.0.x" }
      - run: dotnet pack src/STM.UI.NET/STM.UI.NET.csproj -c Release -o out
      - run: dotnet nuget push "out/*.nupkg" --api-key "${{ secrets.NUGET_API_KEY }}" --source https://api.nuget.org/v3/index.json --skip-duplicate

Thêm NUGET_API_KEY vào Settings → Secrets and variables → Actions.

7. Lỗi thường gặp

Triệu chứng Nguyên nhân / khắc phục
409 Conflict khi push Version đã tồn tại → tăng <Version>. Dùng --skip-duplicate trong CI để không fail khi chạy lại.
403 Forbidden API key sai scope/hết hạn, hoặc glob không khớp STM.UI.NET.
Consumer không thấy _content/STM.UI.NET/… Chưa restore lại; hoặc dùng version cache cũ — dotnet nuget locals http-cache --clear rồi restore.
Consumer thiếu Tag Helper Thiếu @addTagHelper *, STM.UI.NET trong _ViewImports.cshtml.

Giai đoạn test (local feed)

Trước khi publish public, có thể test qua local feed: dotnet pack -c Release -o <local-feed> rồi trỏ nuget.config của app tới thư mục đó (đổi sang api.nuget.org khi đã publish).

Product Compatible and additional computed target framework versions.
.NET net10.0 is compatible.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • net10.0

    • No dependencies.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.1.0 205 7/8/2026
1.0.0 110 7/8/2026