@stisocial/ui 0.2.1 → 0.3.0

package/dist/agency/CampaignCard/CampaignCard.css

@@ -0,0 +1,229 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CampaignCard-root-f48ac {
+    align-content: start;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-out);
+    display: grid;
+    position: relative;
+  }
+
+  .sti-CampaignCard-root-f48ac:hover {
+    border-color: var(--sti-border-strong);
+  }
+
+  .sti-CampaignCard-root-f48ac:has(.sti-CampaignCard-link-9a7eb:focus-visible) {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-CampaignCard-head-27ba6 {
+    align-items: flex-start;
+    gap: var(--sti-space-2);
+    display: flex;
+  }
+
+  .sti-CampaignCard-titles-428d8 {
+    flex: auto;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CampaignCard-client-45d49 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-CampaignCard-title-6f69b {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-CampaignCard-link-9a7eb {
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    text-align: start;
+    background: none;
+    border: 0;
+    padding: 0;
+    text-decoration: none;
+  }
+
+  .sti-CampaignCard-link-9a7eb:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-CampaignCard-link-9a7eb:focus-visible {
+    outline: none;
+  }
+
+  .sti-CampaignCard-actions-50905 {
+    z-index: 1;
+    position: relative;
+  }
+
+  .sti-CampaignCard-status-34752 {
+    padding: 0 var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    flex: none;
+  }
+
+  .sti-CampaignCard-root-f48ac[data-status="active"] .sti-CampaignCard-status-34752 {
+    background: var(--sti-bg-success-subtle);
+    color: var(--sti-fg-success-strong);
+  }
+
+  .sti-CampaignCard-root-f48ac[data-status="paused"] .sti-CampaignCard-status-34752 {
+    background: var(--sti-bg-warning-subtle);
+    color: var(--sti-fg-warning-strong);
+  }
+
+  .sti-CampaignCard-root-f48ac[data-status="planning"] .sti-CampaignCard-status-34752 {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  .sti-CampaignCard-meta-4ad51 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-CampaignCard-budget-a3891 {
+    gap: var(--sti-space-1);
+    display: grid;
+  }
+
+  .sti-CampaignCard-budgetText-946b2 {
+    justify-content: space-between;
+    gap: var(--sti-space-2);
+    font-size: var(--sti-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-CampaignCard-pace-2bde3 {
+    color: var(--sti-fg-muted);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-CampaignCard-pace-2bde3[data-status="over"], .sti-CampaignCard-pace-2bde3[data-status="exhausted"] {
+    color: var(--sti-fg-danger-strong);
+  }
+
+  .sti-CampaignCard-pace-2bde3[data-status="under"] {
+    color: var(--sti-fg-warning-strong);
+  }
+
+  .sti-CampaignCard-track-dafe7 {
+    --sti-campaign-fill: 0%;
+    block-size: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-subtle);
+    display: block;
+    overflow: hidden;
+  }
+
+  .sti-CampaignCard-fill-3ff92 {
+    inline-size: var(--sti-campaign-fill);
+    border-radius: inherit;
+    background: var(--sti-fill-accent);
+    block-size: 100%;
+    display: block;
+  }
+
+  .sti-CampaignCard-track-dafe7:not([data-placed]) .sti-CampaignCard-fill-3ff92 {
+    visibility: hidden;
+  }
+
+  .sti-CampaignCard-kpis-7a71f {
+    gap: var(--sti-space-3);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin: 0;
+    padding-block-start: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-CampaignCard-kpi-0dd29 {
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CampaignCard-kpiLabel-4a604 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-CampaignCard-kpiValue-b93cc {
+    align-items: baseline;
+    gap: var(--sti-space-1) var(--sti-space-2);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-CampaignCard-change-18df1 {
+    color: var(--sti-fg-danger-strong);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-CampaignCard-change-18df1[data-good] {
+    color: var(--sti-fg-success-strong);
+  }
+
+  .sti-CampaignCard-team-04d67 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  .sti-CampaignCard-more-67fdc {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-CampaignCard-srOnly-67b0b {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-CampaignCard-root-f48ac {
+      transition: none;
+    }
+  }
+}

package/dist/agency/CampaignCard/CampaignCard.d.ts

@@ -0,0 +1,42 @@
+import { Platform } from "../_shared/platforms.js";
+import { ReactNode } from "react";
+export type CampaignStatus = "planning" | "active" | "paused" | "completed";
+export interface CampaignKpi {
+  label: string;
+  value: string;
+  /** Önceki döneme göre değişim (oran; 0,12 = %12 artış). */
+  change?: number;
+  /** Artışın kötü olduğu ölçüt (maliyet): renk ters çevrilir. */
+  lowerIsBetter?: boolean;
+}
+export interface CampaignCardProps {
+  name: string;
+  client?: string;
+  status: CampaignStatus;
+  start: Date | number | string;
+  end: Date | number | string;
+  channels?: readonly Platform[];
+  budget?: {
+    total: number;
+    spent: number;
+    currency?: string;
+  };
+  /** En çok dört ölçüt. */
+  kpis?: readonly CampaignKpi[];
+  team?: readonly {
+    name: string;
+    avatarSrc?: string;
+  }[];
+  /** Kartın ana eylemi. */
+  href?: string;
+  onOpen?: () => void;
+  actions?: ReactNode;
+  now?: Date | number | string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kampanya kartı: ad ve müşteri, durum, tarih aralığı, kanallar, bütçe harcaması (çubuk ve hız
+ * durumu), en çok dört ölçüt (değişim okuyla) ve ekip. Kartın tamamı kampanyayı açar.
+ */
+export declare function CampaignCard({ name, client, status, start, end, channels, budget, kpis, team, href, onOpen, actions, now, className, id }: CampaignCardProps): import("react").JSX.Element;

package/dist/agency/CampaignCard/CampaignCard.js

@@ -0,0 +1,143 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Avatar } from "../../components/Avatar/Avatar.js";
+import { cx } from "../_shared/Preview.js";
+import { PLATFORM_NAMES } from "../PlatformCharacterLimit/PlatformCharacterLimit.js";
+import { budgetPace } from "../BudgetTracker/budgetPace.js";
+import CampaignCard_module_default from "./CampaignCard.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/agency/CampaignCard/CampaignCard.tsx
+/**
+* Kampanya kartı: ad ve müşteri, durum, tarih aralığı, kanallar, bütçe harcaması (çubuk ve hız
+* durumu), en çok dört ölçüt (değişim okuyla) ve ekip. Kartın tamamı kampanyayı açar.
+*/
+function CampaignCard({ name, client, status, start, end, channels = [], budget, kpis = [], team = [], href, onOpen, actions, now, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const statusText = {
+		planning: t.agencyCampaignPlanning,
+		active: t.agencyCampaignActive,
+		paused: t.agencyCampaignPaused,
+		completed: t.agencyCampaignCompleted
+	};
+	const pace = budget ? budgetPace(budget.total, budget.spent, start, end, now ?? Date.now()) : null;
+	const money = (v) => f.currency(v, {
+		currency: budget?.currency ?? "TRY",
+		whole: true
+	});
+	const titleId = `${id ?? name}-title`;
+	const fill = (ratio) => (el) => {
+		if (!el) return;
+		el.style.setProperty("--sti-campaign-fill", `${Math.min(100, ratio * 100)}%`);
+		el.dataset.placed = "";
+	};
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		className: cx(CampaignCard_module_default.root, className),
+		"aria-labelledby": titleId,
+		"data-status": status,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: CampaignCard_module_default.head,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: CampaignCard_module_default.titles,
+						children: [client ? /* @__PURE__ */ jsx("span", {
+							className: CampaignCard_module_default.client,
+							children: client
+						}) : null, /* @__PURE__ */ jsx("h3", {
+							id: titleId,
+							className: CampaignCard_module_default.title,
+							children: href ? /* @__PURE__ */ jsx("a", {
+								className: CampaignCard_module_default.link,
+								href,
+								children: name
+							}) : onOpen ? /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: CampaignCard_module_default.link,
+								onClick: onOpen,
+								children: name
+							}) : name
+						})]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: CampaignCard_module_default.status,
+						children: statusText[status]
+					}),
+					actions ? /* @__PURE__ */ jsx("span", {
+						className: CampaignCard_module_default.actions,
+						children: actions
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: CampaignCard_module_default.meta,
+				children: [f.dateRange(new Date(start), new Date(end)), channels.length ? ` · ${channels.map((c) => PLATFORM_NAMES[c]).join(", ")}` : ""]
+			}),
+			budget && pace ? /* @__PURE__ */ jsxs("div", {
+				className: CampaignCard_module_default.budget,
+				children: [/* @__PURE__ */ jsxs("p", {
+					className: CampaignCard_module_default.budgetText,
+					children: [/* @__PURE__ */ jsx("span", { children: template(t.agencyCampaignBudget, {
+						spent: money(budget.spent),
+						total: money(budget.total)
+					}) }), /* @__PURE__ */ jsx("span", {
+						className: CampaignCard_module_default.pace,
+						"data-status": pace.status,
+						children: pace.status === "over" ? t.agencyBudgetOver : pace.status === "under" ? t.agencyBudgetUnder : pace.status === "exhausted" ? t.agencyBudgetExhausted : f.percent(pace.spentRatio)
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					ref: fill(pace.spentRatio),
+					className: CampaignCard_module_default.track,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("span", { className: CampaignCard_module_default.fill })
+				})]
+			}) : null,
+			kpis.length ? /* @__PURE__ */ jsx("dl", {
+				className: CampaignCard_module_default.kpis,
+				children: kpis.slice(0, 4).map((k) => {
+					const good = k.change === void 0 ? null : k.lowerIsBetter ? k.change <= 0 : k.change >= 0;
+					return /* @__PURE__ */ jsxs("div", {
+						className: CampaignCard_module_default.kpi,
+						children: [/* @__PURE__ */ jsx("dt", {
+							className: CampaignCard_module_default.kpiLabel,
+							children: k.label
+						}), /* @__PURE__ */ jsxs("dd", {
+							className: CampaignCard_module_default.kpiValue,
+							children: [k.value, k.change !== void 0 ? /* @__PURE__ */ jsxs("span", {
+								className: CampaignCard_module_default.change,
+								"data-good": good ? "" : void 0,
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										children: k.change >= 0 ? "▲" : "▼"
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: CampaignCard_module_default.srOnly,
+										children: k.change >= 0 ? t.agencyChangeUp : t.agencyChangeDown
+									}),
+									" ",
+									f.percent(Math.abs(k.change))
+								]
+							}) : null]
+						})]
+					}, k.label);
+				})
+			}) : null,
+			team.length ? /* @__PURE__ */ jsxs("ul", {
+				className: CampaignCard_module_default.team,
+				"aria-label": t.agencyCampaignTeam,
+				children: [team.slice(0, 5).map((m) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Avatar, {
+					name: m.name,
+					src: m.avatarSrc,
+					size: "xs"
+				}) }, m.name)), team.length > 5 ? /* @__PURE__ */ jsxs("li", {
+					className: CampaignCard_module_default.more,
+					children: ["+", team.length - 5]
+				}) : null]
+			}) : null
+		]
+	});
+}
+export { CampaignCard };

package/dist/agency/CampaignCard/CampaignCard.module.js

@@ -0,0 +1,27 @@
+import './CampaignCard.css';
+// src/agency/CampaignCard/CampaignCard.module.css
+var CampaignCard_module_default = {
+	"root": "sti-CampaignCard-root-f48ac",
+	"link": "sti-CampaignCard-link-9a7eb",
+	"head": "sti-CampaignCard-head-27ba6",
+	"titles": "sti-CampaignCard-titles-428d8",
+	"client": "sti-CampaignCard-client-45d49",
+	"title": "sti-CampaignCard-title-6f69b",
+	"actions": "sti-CampaignCard-actions-50905",
+	"status": "sti-CampaignCard-status-34752",
+	"meta": "sti-CampaignCard-meta-4ad51",
+	"budget": "sti-CampaignCard-budget-a3891",
+	"budgetText": "sti-CampaignCard-budgetText-946b2",
+	"pace": "sti-CampaignCard-pace-2bde3",
+	"track": "sti-CampaignCard-track-dafe7",
+	"fill": "sti-CampaignCard-fill-3ff92",
+	"kpis": "sti-CampaignCard-kpis-7a71f",
+	"kpi": "sti-CampaignCard-kpi-0dd29",
+	"kpiLabel": "sti-CampaignCard-kpiLabel-4a604",
+	"kpiValue": "sti-CampaignCard-kpiValue-b93cc",
+	"change": "sti-CampaignCard-change-18df1",
+	"team": "sti-CampaignCard-team-04d67",
+	"more": "sti-CampaignCard-more-67fdc",
+	"srOnly": "sti-CampaignCard-srOnly-67b0b"
+};
+export { CampaignCard_module_default as default };

package/dist/agency/CampaignCard/index.d.ts

@@ -0,0 +1,2 @@
+import { CampaignCard, CampaignCardProps, CampaignKpi, CampaignStatus } from "./CampaignCard.js";
+export { CampaignCard, CampaignCardProps, CampaignKpi, CampaignStatus };

package/dist/agency/ChannelPerformanceTable/ChannelPerformanceTable.css

@@ -0,0 +1,113 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ChannelPerformanceTable-root-4eb12 {
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+  }
+
+  .sti-ChannelPerformanceTable-scroller-a54f8 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    outline: none;
+    overflow-x: auto;
+  }
+
+  .sti-ChannelPerformanceTable-scroller-a54f8:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ChannelPerformanceTable-table-6d83e {
+    border-collapse: separate;
+    border-spacing: 0;
+    inline-size: 100%;
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+  }
+
+  .sti-ChannelPerformanceTable-caption-a0bd8 {
+    padding: var(--sti-space-3) var(--sti-space-4);
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    text-align: start;
+    caption-side: top;
+  }
+
+  .sti-ChannelPerformanceTable-table-6d83e th, .sti-ChannelPerformanceTable-table-6d83e td {
+    padding: var(--sti-space-2) var(--sti-space-4);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    white-space: nowrap;
+  }
+
+  .sti-ChannelPerformanceTable-table-6d83e thead th {
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-ChannelPerformanceTable-channelHead-b2195, .sti-ChannelPerformanceTable-channel-780f5 {
+    z-index: 1;
+    background: var(--sti-bg-surface);
+    text-align: start;
+    position: sticky;
+    inset-inline-start: 0;
+  }
+
+  .sti-ChannelPerformanceTable-channel-780f5 {
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-ChannelPerformanceTable-numHead-e0d70, .sti-ChannelPerformanceTable-num-c7e74 {
+    text-align: end;
+  }
+
+  .sti-ChannelPerformanceTable-num-c7e74 {
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-ChannelPerformanceTable-sort-1eb61 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    background: none;
+    border: 0;
+    padding: 0;
+    display: inline-flex;
+  }
+
+  .sti-ChannelPerformanceTable-numHead-e0d70 .sti-ChannelPerformanceTable-sort-1eb61 {
+    flex-direction: row-reverse;
+  }
+
+  .sti-ChannelPerformanceTable-sort-1eb61:focus-visible {
+    border-radius: var(--sti-radius-sm);
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ChannelPerformanceTable-sortIcon-3bfb3 {
+    font-size: var(--sti-icon-sm);
+    opacity: .35;
+    display: inline-flex;
+  }
+
+  .sti-ChannelPerformanceTable-sortIcon-3bfb3[data-active] {
+    color: var(--sti-fg-accent-strong);
+    opacity: 1;
+  }
+
+  .sti-ChannelPerformanceTable-table-6d83e tfoot th, .sti-ChannelPerformanceTable-table-6d83e tfoot td {
+    border-block-start: var(--sti-border-width-strong) solid var(--sti-border);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-ChannelPerformanceTable-table-6d83e tbody tr:hover :is(th, td) {
+    background: var(--sti-bg-surface-hover);
+  }
+}

package/dist/agency/ChannelPerformanceTable/ChannelPerformanceTable.d.ts

@@ -0,0 +1,41 @@
+export interface ChannelRow {
+  id: string;
+  /** Kanal adı ("Meta", "Google Arama", "TikTok"). */
+  channel: string;
+  spend: number;
+  impressions: number;
+  clicks: number;
+  conversions: number;
+  /** Gelir (ROAS için). */
+  revenue?: number;
+}
+export type ChannelMetric = "spend" | "impressions" | "clicks" | "ctr" | "cpc" | "conversions" | "cpa" | "roas";
+export interface ChannelMetrics extends ChannelRow {
+  ctr: number | null;
+  cpc: number | null;
+  cpa: number | null;
+  roas: number | null;
+}
+/** Türetilmiş ölçütler: TO (tıklama oranı), TBM, edinme başı maliyet, reklam harcaması getirisi. */
+export declare function channelMetrics(row: ChannelRow): ChannelMetrics;
+/** Satırların toplamı (türetilmiş ölçütler toplamlardan yeniden hesaplanır). */
+export declare function totalRow(rows: readonly ChannelRow[], name: string): ChannelMetrics;
+export interface ChannelPerformanceTableProps {
+  rows: readonly ChannelRow[];
+  /** Tablonun başlığı (zorunlu): "Kasım kanal performansı". */
+  caption: string;
+  currency?: string;
+  /** Başlangıç sıralaması. */
+  defaultSort?: {
+    metric: ChannelMetric | "channel";
+    direction: "ascending" | "descending";
+  };
+  className?: string;
+  id?: string;
+}
+/**
+ * Kanal performans tablosu: harcama, gösterim, tıklama, TO, TBM, dönüşüm, edinme başı maliyet ve
+ * ROAS; başlıklardan sıralanır (yön `aria-sort` ile), altta toplam satırı. Sayılar sağa hizalı ve
+ * tablo rakamlarıyla; dar ekranda tablo yatay kayar, kanal sütunu yapışkan.
+ */
+export declare function ChannelPerformanceTable({ rows, caption, currency, defaultSort, className, id }: ChannelPerformanceTableProps): import("react").JSX.Element;