bourdon/simple-react-app-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n): add Lingui runtime and development tooling

Browse Source 
- add SSR-safe I18nProvider, Translate, locale hooks, catalog activation, and typed runtime APIs

- add consumer-owned Lingui configuration helpers and a CLI for locale creation, extraction, compilation, and project discovery

- add catalog read/write services plus a Vite development API plugin scoped to each consuming application

- add the portal-based I18nDevtool, message editor, dark-theme tracking, and standalone Message Studio

- document the consumer workflow and cover runtime, configuration, catalog, CLI, and Devtool behavior with tests
This commit is contained in:
Maofeng
2026-07-29 21:23:00 +08:00
parent 011e7d8115
commit 9e3f1d6b59
39 changed files with 2897 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/i18n/src/devtool/i18n-devtool.css
+236
View File
@@ -0,0 +1,236 @@
.i18n-devtool {
--i18n-devtool-background: #f7f7f8;
--i18n-devtool-border: rgb(15 23 42 / 14%);
--i18n-devtool-foreground: #18181b;
--i18n-devtool-muted: #71717a;
--i18n-devtool-panel: #fff;
--i18n-devtool-primary: #2563eb;
position: fixed;
z-index: 2147483647;
color: var(--i18n-devtool-foreground);
color-scheme: light;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
.i18n-devtool[data-dark] {
--i18n-devtool-background: #111318;
--i18n-devtool-border: rgb(255 255 255 / 14%);
--i18n-devtool-foreground: #f4f4f5;
--i18n-devtool-muted: #a1a1aa;
--i18n-devtool-panel: #181a20;
--i18n-devtool-primary: #60a5fa;
color-scheme: dark;
}
.i18n-devtool *,
.i18n-devtool *::before,
.i18n-devtool *::after {
box-sizing: border-box;
}
.i18n-devtool button,
.i18n-devtool select {
color: inherit;
font: inherit;
}
.i18n-devtool__trigger {
position: fixed;
right: 1rem;
bottom: 1rem;
display: inline-flex;
height: 2.75rem;
align-items: center;
gap: 0.45rem;
padding: 0 0.85rem;
border: 1px solid var(--i18n-devtool-border);
border-radius: 999px;
background: var(--i18n-devtool-panel);
box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
cursor: pointer;
font-size: 0.8125rem;
font-weight: 650;
}
.i18n-devtool__trigger span:first-child {
display: grid;
width: 1.5rem;
height: 1.5rem;
place-items: center;
border-radius: 0.4rem;
background: var(--i18n-devtool-primary);
color: white;
font-size: 0.75rem;
}
.i18n-devtool__panel {
position: fixed;
top: 1rem;
right: 1rem;
bottom: 1rem;
display: grid;
width: min(54rem, calc(100vw - 2rem));
overflow: hidden;
grid-template-rows: auto auto minmax(0, 1fr);
border: 1px solid var(--i18n-devtool-border);
border-radius: 1rem;
outline: none;
background: var(--i18n-devtool-background);
box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
}
.i18n-devtool[data-mode="standalone"] {
inset: 0;
}
.i18n-devtool[data-mode="standalone"] .i18n-devtool__panel {
inset: 0;
width: 100vw;
border: 0;
border-radius: 0;
box-shadow: none;
}
.i18n-devtool__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--i18n-devtool-border);
background: var(--i18n-devtool-panel);
}
.i18n-devtool__header h2,
.i18n-devtool__eyebrow {
margin: 0;
}
.i18n-devtool__header h2 {
font-size: 1rem;
}
.i18n-devtool__eyebrow {
margin-bottom: 0.1rem;
color: var(--i18n-devtool-muted);
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.i18n-devtool__controls {
display: flex;
align-items: end;
gap: 0.4rem;
}
.i18n-devtool__controls label {
display: grid;
gap: 0.2rem;
}
.i18n-devtool__controls label span {
color: var(--i18n-devtool-muted);
font-size: 0.625rem;
font-weight: 650;
text-transform: uppercase;
}
.i18n-devtool__controls select,
.i18n-devtool__controls button {
height: 2.25rem;
padding: 0 0.7rem;
border: 1px solid var(--i18n-devtool-border);
border-radius: 0.55rem;
background: var(--i18n-devtool-panel);
}
.i18n-devtool__controls button {
cursor: pointer;
}
.i18n-devtool__controls button:disabled {
cursor: default;
opacity: 0.45;
}
.i18n-devtool__controls .i18n-devtool__close {
width: 2.25rem;
padding: 0;
font-size: 1.25rem;
}
.i18n-devtool__output {
max-height: 10rem;
overflow: auto;
margin: 0;
padding: 0.65rem 1rem;
border-bottom: 1px solid var(--i18n-devtool-border);
background: color-mix(
in srgb,
var(--i18n-devtool-primary) 10%,
var(--i18n-devtool-panel)
);
font-size: 0.72rem;
white-space: pre-wrap;
}
.i18n-devtool__output[data-error] {
background: color-mix(in srgb, #ef4444 12%, var(--i18n-devtool-panel));
color: #ef4444;
}
.i18n-devtool__main {
min-height: 0;
overflow: auto;
}
.i18n-devtool .i18n-message-panel {
--i18n-border: var(--i18n-devtool-border);
--i18n-muted: var(--i18n-devtool-muted);
--i18n-surface: var(--i18n-devtool-panel);
}
.i18n-devtool .i18n-message-panel__toolbar {
background: color-mix(
in srgb,
var(--i18n-devtool-background) 90%,
transparent
);
}
.i18n-devtool .i18n-message-panel input[type="search"],
.i18n-devtool .i18n-message-panel textarea,
.i18n-devtool .i18n-message-panel button {
background: var(--i18n-devtool-panel);
}
@media (max-width: 42rem) {
.i18n-devtool__panel {
inset: 0;
width: 100vw;
border-radius: 0;
}
.i18n-devtool__header {
align-items: stretch;
flex-direction: column;
}
.i18n-devtool__controls {
flex-wrap: wrap;
}
.i18n-devtool__controls label {
min-width: 10rem;
flex: 1;
}
}