tamga-ui 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +90 -0
- package/README.md +83 -91
- package/dist/blocks/count-row.d.ts +3 -3
- package/dist/blocks/count-row.d.ts.map +1 -1
- package/dist/blocks/filter-bar.d.ts +13 -13
- package/dist/blocks/filter-bar.d.ts.map +1 -1
- package/dist/blocks/save-bar.d.ts +3 -3
- package/dist/blocks/save-bar.d.ts.map +1 -1
- package/dist/components/chrome.d.ts +54 -3
- package/dist/components/chrome.d.ts.map +1 -1
- package/dist/components/chrome.js +43 -2
- package/dist/components/primitives.d.ts +32 -2
- package/dist/components/primitives.d.ts.map +1 -1
- package/dist/components/primitives.js +11 -4
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/kit.css +45 -0
- package/dist/lib/color.d.ts +31 -11
- package/dist/lib/color.d.ts.map +1 -1
- package/dist/lib/color.js +40 -18
- package/dist/lib/palette.d.ts +38 -19
- package/dist/lib/palette.d.ts.map +1 -1
- package/dist/lib/palette.js +45 -33
- package/dist/patterns/app-shell.d.ts +22 -6
- package/dist/patterns/app-shell.d.ts.map +1 -1
- package/dist/patterns/app-shell.js +13 -4
- package/dist/patterns/auth-template.d.ts +9 -6
- package/dist/patterns/auth-template.d.ts.map +1 -1
- package/dist/patterns/detail-template.d.ts +5 -5
- package/dist/patterns/detail-template.d.ts.map +1 -1
- package/dist/patterns/index.d.ts +1 -1
- package/dist/patterns/index.d.ts.map +1 -1
- package/dist/patterns/index.js +5 -1
- package/dist/patterns/list-template.d.ts +6 -6
- package/dist/patterns/list-template.d.ts.map +1 -1
- package/dist/patterns/overview-template.d.ts +3 -3
- package/dist/patterns/overview-template.d.ts.map +1 -1
- package/dist/patterns/public-template.d.ts +3 -3
- package/dist/patterns/public-template.d.ts.map +1 -1
- package/dist/patterns/settings-template.d.ts +3 -3
- package/dist/patterns/settings-template.d.ts.map +1 -1
- package/dist/patterns/shared.d.ts +3 -3
- package/dist/patterns/shared.d.ts.map +1 -1
- package/dist/patterns/wizard-template.d.ts +1 -1
- package/dist/patterns/wizard-template.d.ts.map +1 -1
- package/dist/patterns/wizard-template.js +2 -9
- package/package.json +4 -3
package/dist/lib/palette.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { lightness, deltaL, isHex, hexToOklch, oklchToHex, contrast } from "./color.js";
|
|
2
2
|
/**
|
|
3
3
|
* Nötrlerin AÇIKLIK basamakları, iki temada.
|
|
4
4
|
*
|
|
@@ -23,7 +23,7 @@ const BASAMAK = {
|
|
|
23
23
|
* sabit, rengi değişken.
|
|
24
24
|
*/
|
|
25
25
|
const NOTR_DOYUM = { zemin: 0.006, yuzey: 0, cizgi: 0.009, murekkep: 0.014 };
|
|
26
|
-
const notr = (h, l, c) =>
|
|
26
|
+
const notr = (h, l, c) => oklchToHex({ l, c, h });
|
|
27
27
|
/**
|
|
28
28
|
* Yüzün üstündeki mürekkep: beyaz mı koyu mu.
|
|
29
29
|
*
|
|
@@ -32,7 +32,7 @@ const notr = (h, l, c) => oklchHex({ l, c, h });
|
|
|
32
32
|
* markada okunmayan bir düğme üretiyor.
|
|
33
33
|
*/
|
|
34
34
|
function yuzMurekkebi(yuz, acikNotr, koyuNotr) {
|
|
35
|
-
return
|
|
35
|
+
return contrast(acikNotr, yuz) >= contrast(koyuNotr, yuz) ? acikNotr : koyuNotr;
|
|
36
36
|
}
|
|
37
37
|
function temaUret(marka, koyu) {
|
|
38
38
|
const h = marka.h;
|
|
@@ -57,25 +57,25 @@ function temaUret(marka, koyu) {
|
|
|
57
57
|
const yuzL = Math.max(band.alt, Math.min(band.ust, marka.l));
|
|
58
58
|
/* DOYUM KIRPILMIYOR. Bir süre `min(marka.c, 0.16)` vardı ve doygun bir marka
|
|
59
59
|
kırmızısını (C 0.215) `#c74a4a`ya soldurup markayı gözle görülür şekilde
|
|
60
|
-
değiştiriyordu. Kırpma gereksizdi: `
|
|
60
|
+
değiştiriyordu. Kırpma gereksizdi: `oklchToHex` zaten gamut'a sığmayan bir
|
|
61
61
|
rengi ikili aramayla sığdırıyor ve TONU koruyor. Kırpmak, çözülmüş bir
|
|
62
62
|
sorunu ikinci kez ve daha kötü çözmekti. */
|
|
63
63
|
const kroma = marka.c;
|
|
64
|
-
let yuz =
|
|
64
|
+
let yuz = oklchToHex({ l: yuzL, c: kroma, h });
|
|
65
65
|
let murekkep = yuzMurekkebi(yuz, shell, ink);
|
|
66
|
-
for (let i = 1; i <= 40 &&
|
|
66
|
+
for (let i = 1; i <= 40 && contrast(yuz, murekkep) < 4.5; i++) {
|
|
67
67
|
/* Mürekkep açıksa yüz koyulaşır, koyuysa açılır: mesafe hep açılıyor. */
|
|
68
|
-
const yon =
|
|
69
|
-
yuz =
|
|
68
|
+
const yon = lightness(murekkep) > 50 ? -1 : 1;
|
|
69
|
+
yuz = oklchToHex({ l: Math.max(0.2, Math.min(0.92, yuzL + yon * 0.01 * i)), c: kroma, h });
|
|
70
70
|
murekkep = yuzMurekkebi(yuz, shell, ink);
|
|
71
71
|
}
|
|
72
|
-
const yuzOk =
|
|
73
|
-
const adim = (d) =>
|
|
72
|
+
const yuzOk = hexToOklch(yuz);
|
|
73
|
+
const adim = (d) => oklchToHex({ ...yuzOk, l: Math.max(0.06, Math.min(0.96, yuzOk.l + d)) });
|
|
74
74
|
/* ÇİZGİ RENGİ (bağlantı, odak halkası) sayfada AA geçmek zorunda: bir
|
|
75
75
|
bağlantı metindir. Yüz genelde geçmiyor, o yüzden ayrıca aranıyor. */
|
|
76
76
|
let cizgi = koyu ? adim(0.08) : adim(-0.18);
|
|
77
|
-
for (let i = 0; i < 40 &&
|
|
78
|
-
cizgi =
|
|
77
|
+
for (let i = 0; i < 40 && contrast(cizgi, page) < 4.5; i++) {
|
|
78
|
+
cizgi = oklchToHex({ ...yuzOk, l: Math.max(0.08, Math.min(0.95, yuzOk.l + (koyu ? 1 : -1) * (0.18 + 0.01 * i))) });
|
|
79
79
|
}
|
|
80
80
|
return {
|
|
81
81
|
page,
|
|
@@ -97,9 +97,9 @@ function temaUret(marka, koyu) {
|
|
|
97
97
|
accentInk: murekkep,
|
|
98
98
|
accentLine: cizgi,
|
|
99
99
|
/* Seçili satır zemini: sayfaya çok yakın, ama ayrı okunuyor. */
|
|
100
|
-
accentBg:
|
|
100
|
+
accentBg: oklchToHex({ l: koyu ? b.page + 0.06 : b.page - 0.035, c: 0.03, h }),
|
|
101
101
|
/* Taban: yüzün ALTINDA duran koyu, doygun renk (13 Yasa 1). */
|
|
102
|
-
accentShadow:
|
|
102
|
+
accentShadow: oklchToHex({ l: koyu ? 0.42 : 0.28, c: Math.min(marka.c, 0.13), h }),
|
|
103
103
|
navIdle: notr(h, b.navIdle, NOTR_DOYUM.murekkep),
|
|
104
104
|
navHover: notr(h, b.navHover, NOTR_DOYUM.murekkep),
|
|
105
105
|
navHoverBg: notr(h, koyu ? b.hover : b.hover - 0.01, NOTR_DOYUM.zemin),
|
|
@@ -109,15 +109,15 @@ function temaUret(marka, koyu) {
|
|
|
109
109
|
* Bir marka renginden iki tema.
|
|
110
110
|
*
|
|
111
111
|
* Geçersiz bir kodda FIRLATIYOR, sessizce griye düşmüyor: yarım yazılmış bir
|
|
112
|
-
* hex'in ne anlama geldiğine çağıran karar veriyor (`
|
|
112
|
+
* hex'in ne anlama geldiğine çağıran karar veriyor (`isHex`).
|
|
113
113
|
*/
|
|
114
|
-
export function
|
|
115
|
-
if (!
|
|
114
|
+
export function makePalette(markaHex) {
|
|
115
|
+
if (!isHex(markaHex))
|
|
116
116
|
throw new Error(`Geçersiz marka rengi: ${JSON.stringify(markaHex)}`);
|
|
117
|
-
const marka =
|
|
117
|
+
const marka = hexToOklch(markaHex);
|
|
118
118
|
return { light: temaUret(marka, false), dark: temaUret(marka, true) };
|
|
119
119
|
}
|
|
120
|
-
export {
|
|
120
|
+
export { isHex };
|
|
121
121
|
/**
|
|
122
122
|
* Üretilen paleti `check-token-contrast` ile AYNI eşiklerden geçirir.
|
|
123
123
|
*
|
|
@@ -125,14 +125,14 @@ export { gecerliHex };
|
|
|
125
125
|
* yarın bir ton için yanlış olur. Marka rengi değiştiğinde bu liste yeniden
|
|
126
126
|
* koşuyor, ve geçmeyen bir palet build'i kırıyor.
|
|
127
127
|
*/
|
|
128
|
-
export function
|
|
129
|
-
const metin = (
|
|
130
|
-
const
|
|
131
|
-
return {
|
|
128
|
+
export function measurePalette(p) {
|
|
129
|
+
const metin = (name, a, b, threshold = 4.5) => {
|
|
130
|
+
const value = Number(contrast(a, b).toFixed(2));
|
|
131
|
+
return { name, kind: "contrast", value, threshold, passed: value >= threshold };
|
|
132
132
|
};
|
|
133
|
-
const yuzey = (
|
|
134
|
-
const
|
|
135
|
-
return {
|
|
133
|
+
const yuzey = (name, a, b, threshold) => {
|
|
134
|
+
const value = Number(deltaL(a, b).toFixed(1));
|
|
135
|
+
return { name, kind: "deltaL", value, threshold, passed: value >= threshold };
|
|
136
136
|
};
|
|
137
137
|
return [
|
|
138
138
|
metin("ink · page", p.ink, p.page),
|
|
@@ -150,9 +150,9 @@ export function paletiOlc(p) {
|
|
|
150
150
|
}
|
|
151
151
|
/** `:root` bloğuna yapıştırılabilir CSS. */
|
|
152
152
|
/**
|
|
153
|
-
*
|
|
153
|
+
* Palette alanı → CSS simge adı.
|
|
154
154
|
*
|
|
155
|
-
* DIŞARI AÇIK, ÇÜNKÜ ÜÇÜNCÜ KOPYASI DOĞACAKTI. Bu eşleme `
|
|
155
|
+
* DIŞARI AÇIK, ÇÜNKÜ ÜÇÜNCÜ KOPYASI DOĞACAKTI. Bu eşleme `paletteCss`in içinde
|
|
156
156
|
* özeldi; bir ürün paneli aynısını kendi dosyasına elle yazmıştı (rengi
|
|
157
157
|
* çalışma zamanında köke yazmak için), ve doküman sitesi de üçüncüsünü
|
|
158
158
|
* yazacaktı. Aynı yirmi iki satırın üç kopyası, kite bir simge eklendiği gün
|
|
@@ -172,22 +172,34 @@ const AD = {
|
|
|
172
172
|
/**
|
|
173
173
|
* Bir paleti CSS değişkeni sözlüğüne çevirir: `{ "--color-accent": "#..." }`.
|
|
174
174
|
*
|
|
175
|
-
* NEDEN `
|
|
175
|
+
* NEDEN `paletteCss` YETMİYOR: o bir STİL SAYFASI dizgisi üretiyor (`:root { … }`),
|
|
176
176
|
* ve bir stil sayfası ancak belgenin tamamına uygulanabiliyor. Bir paleti tek
|
|
177
177
|
* bir kutuya uygulamak (bir önizleme, bir tema seçici) ya da köke çalışma
|
|
178
178
|
* zamanında yazmak için gereken şey bir SÖZLÜK. Simge adları kalıtsal olduğu
|
|
179
179
|
* için bir kutuya yazılan palet, içindeki her bileşeni birlikte döndürüyor.
|
|
180
180
|
*/
|
|
181
|
-
export function
|
|
181
|
+
export function paletteVars(p) {
|
|
182
182
|
const stil = {};
|
|
183
183
|
for (const alan of Object.keys(AD))
|
|
184
184
|
stil[AD[alan]] = p[alan];
|
|
185
185
|
return stil;
|
|
186
186
|
}
|
|
187
|
-
export function
|
|
188
|
-
const blok = (p) => Object.entries(
|
|
187
|
+
export function paletteCss(cift) {
|
|
188
|
+
const blok = (p) => Object.entries(paletteVars(p))
|
|
189
189
|
.map(([ad, deger]) => ` ${ad}: ${deger};`)
|
|
190
190
|
.join("\n");
|
|
191
191
|
return `:root {\n${blok(cift.light)}\n}\n\n.dark {\n${blok(cift.dark)}\n}\n`;
|
|
192
192
|
}
|
|
193
|
-
export {
|
|
193
|
+
export { lightness, deltaL, contrast };
|
|
194
|
+
/* Eski Türkçe adlar, 0.3.0'a kadar. SİLME: 0.1.1 npm'de yayında ve bu adları
|
|
195
|
+
kullanan bir tüketici var. */
|
|
196
|
+
/** @deprecated `makePalette` kullan. 0.3.0'da kaldırılacak. */
|
|
197
|
+
export const paletUret = makePalette;
|
|
198
|
+
/** @deprecated `measurePalette` kullan. 0.3.0'da kaldırılacak. */
|
|
199
|
+
export const paletiOlc = measurePalette;
|
|
200
|
+
/** @deprecated `paletteVars` kullan. 0.3.0'da kaldırılacak. */
|
|
201
|
+
export const paletStili = paletteVars;
|
|
202
|
+
/** @deprecated `paletteCss` kullan. 0.3.0'da kaldırılacak. */
|
|
203
|
+
export const paletCss = paletteCss;
|
|
204
|
+
/** @deprecated `isHex` kullan (tamga-ui/palette üzerinden). 0.3.0'da kaldırılacak. */
|
|
205
|
+
export { gecerliHex, hexRgb, rgbHex, parlaklik, oran, acikligi, dL, hexOklch, oklchHex, oranaGoreAcikligi } from "./color.js";
|
|
@@ -10,21 +10,37 @@ import { type LinkComponent } from "./shared.js";
|
|
|
10
10
|
export type NavEntry = {
|
|
11
11
|
key: string;
|
|
12
12
|
href: string;
|
|
13
|
-
/**
|
|
13
|
+
/** The translated label. In the tooltip on a narrow rail, on the row itself on a wide one. TR: Çevrilmiş etiket. Dar rayda ipucunda, geniş rayda satırın kendisinde. */
|
|
14
14
|
label: string;
|
|
15
15
|
icon: ComponentProps<typeof Icon>["icon"];
|
|
16
16
|
};
|
|
17
17
|
export type AppShellProps = {
|
|
18
|
-
/** Rayın tepesindeki marka işareti; kendi bağlantısını çağıran veriyor. */
|
|
18
|
+
/** The brand mark at the top of the rail; the caller supplies its own link. TR: Rayın tepesindeki marka işareti; kendi bağlantısını çağıran veriyor. */
|
|
19
19
|
brand?: ReactNode;
|
|
20
20
|
nav: readonly NavEntry[];
|
|
21
|
-
/** Açık yol. Rota `usePathname()` geçiyor. */
|
|
21
|
+
/** The open path. The route passes `usePathname()`. TR: Açık yol. Rota `usePathname()` geçiyor. */
|
|
22
22
|
activePath: string;
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
25
|
-
*
|
|
24
|
+
* How wide the rail is. TR: Rayın genişliği.
|
|
25
|
+
*
|
|
26
|
+
* `narrow` yalnız simge, etiket ipucunda; `wide` simge ve etiket yan yana.
|
|
27
|
+
* Dar ray ekranı içeriğe bırakıyor ve simgeleri tanıyan birine yetiyor;
|
|
28
|
+
* geniş ray yeni gelen birine menüyü okutuyor. Hangisinin doğru olduğu
|
|
29
|
+
* ürüne bağlı, o yüzden şablon karar vermiyor, soruyor.
|
|
30
|
+
*
|
|
31
|
+
* "Kullanıcı seçsin" diye bir üçüncü değer YOK ve olmamalı: o bir TERCİH,
|
|
32
|
+
* ve tercihin nerede saklandığını (oturum, hesap, tarayıcı) kit bilemez.
|
|
33
|
+
* Ürün tercihi okur, buraya `narrow` ya da `wide` geçer.
|
|
34
|
+
*/
|
|
35
|
+
rail?: "narrow" | "wide";
|
|
36
|
+
/**
|
|
37
|
+
* The top bar is GLOBAL CONTEXT, not work. The content belongs to the caller; the template
|
|
38
|
+
* only guarantees its place. TR: Üst şerit KÜRESEL BAĞLAM, iş değil. İçerik çağıranın; şablon
|
|
39
|
+
* yalnız yerini garanti ediyor.
|
|
26
40
|
*/
|
|
27
41
|
topbar?: ReactNode;
|
|
42
|
+
/** A control at the foot of the rail: an expand/collapse button, say. TR: Rayın dibine giren kontrol: genişlet/daralt düğmesi gibi. */
|
|
43
|
+
railFooter?: ReactNode;
|
|
28
44
|
linkComponent?: LinkComponent;
|
|
29
45
|
labels: {
|
|
30
46
|
home: string;
|
|
@@ -32,5 +48,5 @@ export type AppShellProps = {
|
|
|
32
48
|
};
|
|
33
49
|
children: ReactNode;
|
|
34
50
|
};
|
|
35
|
-
export declare function AppShell({ brand, nav, activePath, topbar, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
|
|
51
|
+
export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
|
|
36
52
|
//# sourceMappingURL=app-shell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,UAAU,EACV,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAkFf"}
|
|
@@ -1,14 +1,23 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Icon } from "../components/icon.js";
|
|
4
|
+
import { Tooltip } from "../components/overlay.js";
|
|
4
5
|
import { PlainLink } from "./shared.js";
|
|
5
|
-
export function AppShell({ brand, nav, activePath, topbar, linkComponent: Link = PlainLink, labels, children, }) {
|
|
6
|
+
export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, railFooter, linkComponent: Link = PlainLink, labels, children, }) {
|
|
6
7
|
/* Bir giriş kendi alt ağacına sahip: `/urunler`, `/urunler/42/fotograflar`
|
|
7
8
|
üzerinde de açık giriştir. Tam eşleşme yalnız kök yol için, yoksa kısa href
|
|
8
9
|
altındaki her rotayı yutar. */
|
|
9
10
|
const isCurrent = (href) => href === "/" ? activePath === href : activePath === href || activePath.startsWith(`${href}/`);
|
|
10
|
-
|
|
11
|
+
const wide = rail === "wide";
|
|
12
|
+
return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-shell text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-shell py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: nav.map((entry) => {
|
|
11
13
|
const current = isCurrent(entry.href);
|
|
12
|
-
|
|
13
|
-
|
|
14
|
+
const link = (_jsxs(Link, { href: entry.href, "aria-label": wide ? undefined : entry.label, "aria-current": current ? "page" : undefined, "data-active": current, "data-nav": entry.key, className: "tamga-rail-link", children: [_jsx(Icon, { icon: entry.icon, size: "base" }), wide ? _jsx("span", { className: "min-w-0 truncate", children: entry.label }) : null] }, entry.key));
|
|
15
|
+
/* DAR RAYDA KİTİN İPUCU, `title` DEĞİL.
|
|
16
|
+
Burada `title={entry.label}` vardı: tarayıcının kendi gecikmeli
|
|
17
|
+
gri balonu. Kullanan kişi bunu "ipucu yok" diye okuyor, çünkü
|
|
18
|
+
kitin her yerdeki ipucu başka türlü görünüyor ve hemen çıkıyor.
|
|
19
|
+
Geniş rayda etiket zaten yazılı; orada ipucu aynı sözcüğü ikinci
|
|
20
|
+
kez söylemek olurdu. */
|
|
21
|
+
return wide ? (link) : (_jsx(Tooltip, { label: entry.label, placement: "right", children: link }, entry.key));
|
|
22
|
+
}) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: "tamga-surface h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
|
|
14
23
|
}
|
|
@@ -6,17 +6,20 @@ import type { ReactNode } from "react";
|
|
|
6
6
|
* Gerekçe: docs/adr/0004-sablon-katmani.md
|
|
7
7
|
*/
|
|
8
8
|
export declare function AuthTemplate({ brand, title, subtitle, children, footer, aside, }: {
|
|
9
|
-
/** Markanın işareti. Sözcük markası değil işaret: bu ekranın işi tek alan ve tek düğme. */
|
|
9
|
+
/** The brand's mark. The mark, not the wordmark: this screen's job is one field and one button. TR: Markanın işareti. Sözcük markası değil işaret: bu ekranın işi tek alan ve tek düğme. */
|
|
10
10
|
brand?: ReactNode;
|
|
11
11
|
title: string;
|
|
12
12
|
subtitle?: string;
|
|
13
13
|
children: ReactNode;
|
|
14
14
|
footer?: ReactNode;
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
16
|
+
* The panel on the screen's other half. Present on sign-up, absent on sign-in, and the
|
|
17
|
+
* asymmetry is deliberate: the person signing in is a returning user in a hurry; the person
|
|
18
|
+
* signing up is still deciding. Selling something to the first is noise; saying nothing to
|
|
19
|
+
* the second wastes the screen. TR: Ekranın öteki yarısındaki panel. Kayıtta var, girişte
|
|
20
|
+
* yok, ve asimetri kasıtlı: giriş yapan kişi acelesi olan, dönen bir kullanıcı; kaydolan kişi
|
|
21
|
+
* hâlâ karar veriyor. Birinciye bir şey satmak gürültü, ikinciye hiçbir şey dememek ekranı
|
|
22
|
+
* ziyan etmek.
|
|
20
23
|
*/
|
|
21
24
|
aside?: ReactNode;
|
|
22
25
|
}): import("react").JSX.Element;
|
|
@@ -30,7 +33,7 @@ export declare function AuthTemplate({ brand, title, subtitle, children, footer,
|
|
|
30
33
|
*/
|
|
31
34
|
export declare function AuthProviders({ children, dividerLabel, }: {
|
|
32
35
|
children: ReactNode;
|
|
33
|
-
/** Ayıracın üstündeki sözcük. */
|
|
36
|
+
/** The word sitting on the divider. TR: Ayıracın üstündeki sözcük. */
|
|
34
37
|
dividerLabel: string;
|
|
35
38
|
}): import("react").JSX.Element;
|
|
36
39
|
//# sourceMappingURL=auth-template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auth-template.d.ts","sourceRoot":"","sources":["../../src/patterns/auth-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE;IACD,
|
|
1
|
+
{"version":3,"file":"auth-template.d.ts","sourceRoot":"","sources":["../../src/patterns/auth-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE;IACD,4LAA4L;IAC5L,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BAyDA;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GACb,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;CACtB,+BAWA"}
|
|
@@ -8,20 +8,20 @@ import { type ErrorLabels, type LinkComponent, type TemplateError } from "./shar
|
|
|
8
8
|
*/
|
|
9
9
|
export type DetailState = "ready" | "loading" | "error";
|
|
10
10
|
export type DetailTab = {
|
|
11
|
-
/** Kararlı kimlik; karşılaştırma ve testler bununla. */
|
|
11
|
+
/** A stable identity; comparisons and tests use this. TR: Kararlı kimlik; karşılaştırma ve testler bununla. */
|
|
12
12
|
key: string;
|
|
13
|
-
/** Çevrilmiş etiket: şablon kendisine verilen sözcüğü çiziyor, aramıyor. */
|
|
13
|
+
/** The translated label: the template draws the word it is given, it does not look one up. TR: Çevrilmiş etiket: şablon kendisine verilen sözcüğü çiziyor, aramıyor. */
|
|
14
14
|
label: string;
|
|
15
15
|
href: string;
|
|
16
16
|
};
|
|
17
17
|
export type DetailTemplateProps = {
|
|
18
|
-
/** Başlığın üstündeki iz. Son öğe o anki nesnedir ve href almaz. */
|
|
18
|
+
/** The trail above the title. The last item is the current object and takes no href. TR: Başlığın üstündeki iz. Son öğe o anki nesnedir ve href almaz. */
|
|
19
19
|
breadcrumb: {
|
|
20
20
|
label: string;
|
|
21
21
|
href?: string;
|
|
22
22
|
}[];
|
|
23
23
|
title: string;
|
|
24
|
-
/** Başlığın altı: nesnenin kimlik satırı. */
|
|
24
|
+
/** Under the title: the object's identity line. TR: Başlığın altı: nesnenin kimlik satırı. */
|
|
25
25
|
subtitle?: string;
|
|
26
26
|
actions?: ReactNode;
|
|
27
27
|
/**
|
|
@@ -45,7 +45,7 @@ export type DetailTemplateProps = {
|
|
|
45
45
|
breadcrumb: string;
|
|
46
46
|
tabs: string;
|
|
47
47
|
} & ErrorLabels;
|
|
48
|
-
/** Açık sekmenin gövdesi. Şablon hangi sekme olduğunu bilmiyor, bilmemeli. */
|
|
48
|
+
/** The body of the open tab. The template does not know which tab it is, and must not. TR: Açık sekmenin gövdesi. Şablon hangi sekme olduğunu bilmiyor, bilmemeli. */
|
|
49
49
|
children?: ReactNode;
|
|
50
50
|
};
|
|
51
51
|
export declare function DetailTemplate({ breadcrumb, title, subtitle, actions, tabs, activeTab, state, error, linkComponent: Link, labels, children, }: DetailTemplateProps): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"detail-template.d.ts","sourceRoot":"","sources":["../../src/patterns/detail-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB
|
|
1
|
+
{"version":3,"file":"detail-template.d.ts","sourceRoot":"","sources":["../../src/patterns/detail-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB,+GAA+G;IAC/G,GAAG,EAAE,MAAM,CAAC;IACZ,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,0JAA0J;IAC1J,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE5E,sKAAsK;IACtK,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BA+CrB"}
|
package/dist/patterns/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* dayatıyor, çünkü işleri o. Ayrı bir giriş, bir ürünün "yalnız bileşenleri
|
|
7
7
|
* alayım" diyebilmesi demek.
|
|
8
8
|
*/
|
|
9
|
-
export { PlainLink,
|
|
9
|
+
export { PlainLink, errorDetail, type ErrorLabels, type LinkComponent, type TemplateError, } from "./shared.js";
|
|
10
10
|
export { ListTemplate, type ListState, type ListTemplateProps } from "./list-template.js";
|
|
11
11
|
export { OverviewTemplate, type OverviewState, type OverviewTemplateProps, } from "./overview-template.js";
|
|
12
12
|
export { DetailTemplate, type DetailState, type DetailTab, type DetailTemplateProps, } from "./detail-template.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/patterns/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/patterns/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EACL,SAAS,EACT,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EACL,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAClG,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
|
package/dist/patterns/index.js
CHANGED
|
@@ -6,7 +6,11 @@
|
|
|
6
6
|
* dayatıyor, çünkü işleri o. Ayrı bir giriş, bir ürünün "yalnız bileşenleri
|
|
7
7
|
* alayım" diyebilmesi demek.
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
/* `ErrorSlot` ve `Busy` DIŞA VURULMUYOR: şablonların iç makinesi. Hata ve
|
|
10
|
+
yükleme hâllerini şablonlar zaten kendileri çiziyor, ve ikisini ayrıca
|
|
11
|
+
sunmak "aynı hâli iki farklı yoldan çizme" davetiydi. Bir tüketici o
|
|
12
|
+
görünümü istiyorsa şablonu kullanıyor. */
|
|
13
|
+
export { PlainLink, errorDetail, } from "./shared.js";
|
|
10
14
|
export { ListTemplate } from "./list-template.js";
|
|
11
15
|
export { OverviewTemplate, } from "./overview-template.js";
|
|
12
16
|
export { DetailTemplate, } from "./detail-template.js";
|
|
@@ -9,18 +9,18 @@ import { type ErrorLabels, type TemplateError } from "./shared.js";
|
|
|
9
9
|
export type ListState = "ready" | "loading" | "empty" | "error";
|
|
10
10
|
export type ListTemplateProps = {
|
|
11
11
|
title: string;
|
|
12
|
-
/** Başlığın altındaki satır: sayı, kapsam, tazelik. Çağıran çevirmiş olarak veriyor. */
|
|
12
|
+
/** The line under the title: a count, a scope, a freshness. The caller supplies it translated. TR: Başlığın altındaki satır: sayı, kapsam, tazelik. Çağıran çevirmiş olarak veriyor. */
|
|
13
13
|
subtitle?: string;
|
|
14
|
-
/** Bu listenin birincil eylemleri. Şeridin sağında. */
|
|
14
|
+
/** This list's primary actions. On the right of the bar. TR: Bu listenin birincil eylemleri. Şeridin sağında. */
|
|
15
15
|
actions?: ReactNode;
|
|
16
|
-
/** Filtre satırı: arama, kırılımlar, aralıklar. Şeridin altında, içeriğin üstünde. */
|
|
16
|
+
/** The filter row: search, breakdowns, ranges. Below the bar, above the content. TR: Filtre satırı: arama, kırılımlar, aralıklar. Şeridin altında, içeriğin üstünde. */
|
|
17
17
|
filters?: ReactNode;
|
|
18
18
|
state?: ListState;
|
|
19
|
-
/** Yüklenirken tutulacak satır sayısı: gerçekten kaç kayıt geliyorsa o. */
|
|
19
|
+
/** How many rows to hold while loading: however many records are actually coming. TR: Yüklenirken tutulacak satır sayısı: gerçekten kaç kayıt geliyorsa o. */
|
|
20
20
|
loadingRows?: number;
|
|
21
|
-
/** İskeletin sütun genişlikleri, yerini tuttuğu tablonun şekline uysun diye. */
|
|
21
|
+
/** The skeleton's column widths, so it holds the shape of the table it stands in for. TR: İskeletin sütun genişlikleri, yerini tuttuğu tablonun şekline uysun diye. */
|
|
22
22
|
loadingColumns?: string[];
|
|
23
|
-
/** `state === "empty"` iken görünen. Ekrana özel, o yüzden ekran yazıyor. */
|
|
23
|
+
/** What shows when `state === "empty"`. Screen-specific, so the screen writes it. TR: `state === "empty"` iken görünen. Ekrana özel, o yüzden ekran yazıyor. */
|
|
24
24
|
empty?: ReactNode;
|
|
25
25
|
error?: TemplateError;
|
|
26
26
|
labels: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-template.d.ts","sourceRoot":"","sources":["../../src/patterns/list-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;;GAKG;AAEH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,
|
|
1
|
+
{"version":3,"file":"list-template.d.ts","sourceRoot":"","sources":["../../src/patterns/list-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;;GAKG;AAEH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,wLAAwL;IACxL,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iHAAiH;IACjH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wKAAwK;IACxK,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,8JAA8J;IAC9J,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uKAAuK;IACvK,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,gKAAgK;IAChK,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAe,EACf,WAAgB,EAChB,cAAc,EACd,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,iBAAiB,+BA2BnB"}
|
|
@@ -10,13 +10,13 @@ export type OverviewTemplateProps = {
|
|
|
10
10
|
title: string;
|
|
11
11
|
subtitle?: string;
|
|
12
12
|
actions?: ReactNode;
|
|
13
|
-
/** Ekrandaki en önemli tek şey. Bir tane, asla iki. */
|
|
13
|
+
/** The single most important thing on the screen. One, never two. TR: Ekrandaki en önemli tek şey. Bir tane, asla iki. */
|
|
14
14
|
hero?: ReactNode;
|
|
15
|
-
/** Destekleyen kartlar. Düzeni şablon veriyor ki iki özet ekranı ayrışamasın. */
|
|
15
|
+
/** The supporting cards. The template supplies the layout so two overview screens cannot drift apart. TR: Destekleyen kartlar. Düzeni şablon veriyor ki iki özet ekranı ayrışamasın. */
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
state?: OverviewState;
|
|
18
18
|
error?: TemplateError;
|
|
19
|
-
/** Izgaranın kaç kart tutacağı, yükleme hâli doğru şekli ayırsın diye. */
|
|
19
|
+
/** How many cards the grid holds, so the loading state reserves the right shape. TR: Izgaranın kaç kart tutacağı, yükleme hâli doğru şekli ayırsın diye. */
|
|
20
20
|
loadingCards?: number;
|
|
21
21
|
labels: {
|
|
22
22
|
loading: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overview-template.d.ts","sourceRoot":"","sources":["../../src/patterns/overview-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;GAIG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,
|
|
1
|
+
{"version":3,"file":"overview-template.d.ts","sourceRoot":"","sources":["../../src/patterns/overview-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;GAIG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,0HAA0H;IAC1H,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,wLAAwL;IACxL,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4JAA4J;IAC5J,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;CAC3C,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAe,EACf,KAAK,EACL,YAAgB,EAChB,MAAM,GACP,EAAE,qBAAqB,+BAoCvB"}
|
|
@@ -9,13 +9,13 @@ import { type ErrorLabels, type TemplateError } from "./shared.js";
|
|
|
9
9
|
*/
|
|
10
10
|
export type PublicState = "ready" | "loading" | "error";
|
|
11
11
|
export type PublicTemplateProps = {
|
|
12
|
-
/** Sahibin işareti. Verilmezse hiçbir şey çizilmiyor; varsayılanı ürün koyar. */
|
|
12
|
+
/** The owner's mark. With none, nothing is drawn; the product supplies the default. TR: Sahibin işareti. Verilmezse hiçbir şey çizilmiyor; varsayılanı ürün koyar. */
|
|
13
13
|
brand?: ReactNode;
|
|
14
14
|
title: string;
|
|
15
15
|
subtitle?: string;
|
|
16
|
-
/** Başlığın sağı: abone ol kontrolü, dönem seçici, bir doğrulama damgası. */
|
|
16
|
+
/** The right of the title: a subscribe control, a period picker, a verification stamp. TR: Başlığın sağı: abone ol kontrolü, dönem seçici, bir doğrulama damgası. */
|
|
17
17
|
headerAside?: ReactNode;
|
|
18
|
-
/** Alttaki satır. Beyaz etiketli sayfada sahibin; ne yazacağı bir plan sorusu. */
|
|
18
|
+
/** The bottom line. On a white-labelled page it belongs to the owner; what it says is a plan question. TR: Alttaki satır. Beyaz etiketli sayfada sahibin; ne yazacağı bir plan sorusu. */
|
|
19
19
|
footer?: ReactNode;
|
|
20
20
|
state?: PublicState;
|
|
21
21
|
error?: TemplateError;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"public-template.d.ts","sourceRoot":"","sources":["../../src/patterns/public-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;;;GAMG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,mBAAmB,GAAG;IAChC,
|
|
1
|
+
{"version":3,"file":"public-template.d.ts","sourceRoot":"","sources":["../../src/patterns/public-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAmB,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAEpF;;;;;;GAMG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,mBAAmB,GAAG;IAChC,sKAAsK;IACtK,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qKAAqK;IACrK,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0LAA0L;IAC1L,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAM,EACN,KAAe,EACf,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BAiCrB"}
|
|
@@ -17,11 +17,11 @@ export type SettingsSection = {
|
|
|
17
17
|
};
|
|
18
18
|
export type SettingsTemplateProps = {
|
|
19
19
|
sections: readonly SettingsSection[];
|
|
20
|
-
/** Şu an açık bölüm, `key` ile. */
|
|
20
|
+
/** The section currently open, by `key`. TR: Şu an açık bölüm, `key` ile. */
|
|
21
21
|
activeSection: string;
|
|
22
22
|
title: string;
|
|
23
23
|
subtitle?: string;
|
|
24
|
-
/** Bölüm düzeyindeki eylemler; genelde tek bir "Kaydet". */
|
|
24
|
+
/** Section-level actions; usually a single "Save". TR: Bölüm düzeyindeki eylemler; genelde tek bir "Kaydet". */
|
|
25
25
|
actions?: ReactNode;
|
|
26
26
|
state?: SettingsState;
|
|
27
27
|
error?: TemplateError;
|
|
@@ -43,7 +43,7 @@ export declare function SettingsTemplate({ sections, activeSection, title, subti
|
|
|
43
43
|
export declare function SettingsPanel({ title, description, inheritedFrom, children, }: {
|
|
44
44
|
title: string;
|
|
45
45
|
description?: string;
|
|
46
|
-
/** "çalışma alanından geliyor" gibi, çağıran tarafından yazılmış tam cümle. */
|
|
46
|
+
/** Like "inherited from the workspace": a full sentence written by the caller. TR: "çalışma alanından geliyor" gibi, çağıran tarafından yazılmış tam cümle. */
|
|
47
47
|
inheritedFrom?: string;
|
|
48
48
|
children: ReactNode;
|
|
49
49
|
}): import("react").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"settings-template.d.ts","sourceRoot":"","sources":["../../src/patterns/settings-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,kCAAkC;AAClC,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,
|
|
1
|
+
{"version":3,"file":"settings-template.d.ts","sourceRoot":"","sources":["../../src/patterns/settings-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,kCAAkC;AAClC,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,6EAA6E;IAC7E,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gHAAgH;IAChH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KACtC,GAAG,WAAW,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,aAAa,EACb,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,qBAAqB,+BAsDvB;AA0BD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+JAA+J;IAC/J,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA0BA"}
|
|
@@ -14,11 +14,11 @@ export { PlainLink, type LinkComponent } from "../components/link.js";
|
|
|
14
14
|
* çünkü teknik satırın biçimi (`code · request_id`) tek bir karar.
|
|
15
15
|
*/
|
|
16
16
|
export type TemplateError = {
|
|
17
|
-
/** Zarfın makine tarafından okunan `code`u: kararlı, çevrilmez, desteğin dallandığı şey. */
|
|
17
|
+
/** The envelope's machine-read `code`: stable, never translated, the thing support branches on. TR: Zarfın makine tarafından okunan `code`u: kararlı, çevrilmez, desteğin dallandığı şey. */
|
|
18
18
|
code?: string;
|
|
19
|
-
/** `meta.request_id`; sunucu günlüğüne giden tek iplik. */
|
|
19
|
+
/** `meta.request_id`; the one thread that leads to the server log. TR: `meta.request_id`; sunucu günlüğüne giden tek iplik. */
|
|
20
20
|
requestId?: string;
|
|
21
|
-
/** Yalnız çağıran gerçekten yeniden deneyebiliyorsa; yoksa düğme hiç çizilmiyor. */
|
|
21
|
+
/** Only when the caller really can retry; without it the button is not drawn at all. TR: Yalnız çağıran gerçekten yeniden deneyebiliyorsa; yoksa düğme hiç çizilmiyor. */
|
|
22
22
|
onRetry?: () => void;
|
|
23
23
|
};
|
|
24
24
|
export type ErrorLabels = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/patterns/shared.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;;;GAQG;AAKH,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtE;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,
|
|
1
|
+
{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/patterns/shared.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;;;GAQG;AAKH,OAAO,EAAE,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtE;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,6LAA6L;IAC7L,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+HAA+H;IAC/H,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0KAA0K;IAC1K,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oFAAoF;AACpF,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,SAAS,CAErE;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,aAAa,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,+BAU1F;AAED,8DAA8D;AAC9D,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAQ/E"}
|
|
@@ -8,7 +8,7 @@ import { type ErrorLabels, type TemplateError } from "./shared.js";
|
|
|
8
8
|
*/
|
|
9
9
|
export type WizardStep = {
|
|
10
10
|
key: string;
|
|
11
|
-
/** Çevrilmiş etiket. */
|
|
11
|
+
/** The translated label. TR: Çevrilmiş etiket. */
|
|
12
12
|
label: string;
|
|
13
13
|
};
|
|
14
14
|
export type WizardState = "ready" | "error";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wizard-template.d.ts","sourceRoot":"","sources":["../../src/patterns/wizard-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"wizard-template.d.ts","sourceRoot":"","sources":["../../src/patterns/wizard-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAa,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE9E;;;;;GAKG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,KAAe,EACf,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BA4CrB"}
|
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
4
|
-
import { Check } from "../components/icons.js";
|
|
3
|
+
import { Steps } from "../components/display.js";
|
|
5
4
|
import { ErrorSlot } from "./shared.js";
|
|
6
5
|
export function WizardTemplate({ steps, activeStep, title, subtitle, back, next, state = "ready", error, labels, children, }) {
|
|
7
6
|
const activeIndex = steps.findIndex((s) => s.key === activeStep);
|
|
8
|
-
return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-wizard-state": state, children: [_jsx("
|
|
9
|
-
const current = step.key === activeStep;
|
|
10
|
-
/* "Bitti" konumsal, çağıranın taşıması gereken bir bayrak değil: açık
|
|
11
|
-
adımdan öncekilerin hepsinden geçilmiş. Tek kaynak, kayma yok. */
|
|
12
|
-
const done = activeIndex >= 0 && i < activeIndex;
|
|
13
|
-
return (_jsxs("li", { "data-step": step.key, "data-current": current, "data-done": done, "aria-current": current ? "step" : undefined, className: `flex items-center gap-2 text-small ${current ? "font-medium text-ink" : done ? "text-ink-soft" : "text-ink-faint"}`, children: [_jsx("span", { className: "inline-flex w-5 shrink-0 justify-center font-mono text-caption tabular-nums", children: done ? (_jsx(Icon, { icon: Check, size: "xs", weight: "bold" })) : (String(i + 1).padStart(2, "0")) }), step.label] }, step.key));
|
|
14
|
-
}) }), _jsx("div", { className: "tamga-gutter min-h-0 flex-1 py-6", children: _jsxs("div", { className: "max-w-[var(--measure)]", children: [_jsx("h2", { className: "text-title font-semibold text-ink", children: title }), subtitle ? _jsx("p", { className: "mt-1 text-small text-ink-faint", children: subtitle }) : null, _jsx("div", { className: "mt-6", children: state === "error" ? _jsx(ErrorSlot, { error: error, labels: labels }) : children })] }) }), back || next ? (_jsxs("div", { className: "tamga-section tamga-gutter flex items-center gap-2 py-4", children: [back, _jsx("div", { className: "ml-auto flex items-center gap-2", children: next })] })) : null, _jsx("span", { className: "sr-only", "aria-live": "polite", children: activeIndex >= 0 ? `${activeIndex + 1} / ${steps.length}` : "" })] }));
|
|
7
|
+
return (_jsxs("div", { className: "flex min-h-0 flex-col", "data-wizard-state": state, children: [_jsx("div", { className: "tamga-section tamga-gutter py-4", children: _jsx(Steps, { steps: steps.map((s) => s.label), current: activeIndex < 0 ? 0 : activeIndex }) }), _jsx("div", { className: "tamga-gutter min-h-0 flex-1 py-6", children: _jsxs("div", { className: "max-w-[var(--measure)]", children: [_jsx("h2", { className: "text-title font-semibold text-ink", children: title }), subtitle ? _jsx("p", { className: "mt-1 text-small text-ink-faint", children: subtitle }) : null, _jsx("div", { className: "mt-6", children: state === "error" ? _jsx(ErrorSlot, { error: error, labels: labels }) : children })] }) }), back || next ? (_jsxs("div", { className: "tamga-section tamga-gutter sticky bottom-0 z-10 flex items-center gap-2 bg-shell py-4", children: [back, _jsx("div", { className: "ml-auto flex items-center gap-2", children: next })] })) : null, _jsx("span", { className: "sr-only", "aria-live": "polite", children: activeIndex >= 0 ? `${activeIndex + 1} / ${steps.length}` : "" })] }));
|
|
15
8
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tamga-ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Mantıksal's shared interface library: tokens, physics and components.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"sideEffects": [
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
"files": [
|
|
11
11
|
"dist",
|
|
12
12
|
"README.md",
|
|
13
|
+
"CHANGELOG.md",
|
|
13
14
|
"LICENSE"
|
|
14
15
|
],
|
|
15
16
|
"exports": {
|
|
@@ -70,7 +71,7 @@
|
|
|
70
71
|
"url": "git+https://github.com/mantiksal/tamga.git",
|
|
71
72
|
"directory": "packages/ui"
|
|
72
73
|
},
|
|
73
|
-
"homepage": "https://tamga.
|
|
74
|
+
"homepage": "https://tamga.org.tr",
|
|
74
75
|
"bugs": {
|
|
75
76
|
"url": "https://github.com/mantiksal/tamga/issues"
|
|
76
77
|
},
|