@stisocial/ui 0.2.1 → 0.3.0

package/dist/agency/PostComposer/PostComposer.js

@@ -0,0 +1,288 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { TextArea } from "../../components/TextArea/TextArea.js";
+import { CloseIcon } from "../../icons/generated/CloseIcon.js";
+import { Chip, ChipGroup } from "../../components/Chip/Chip.js";
+import { ImageIcon } from "../../icons/generated/ImageIcon.js";
+import { Tab, TabList, TabPanel, Tabs } from "../../components/Tabs/Tabs.js";
+import { PLATFORMS } from "../_shared/platforms.js";
+import { cx } from "../_shared/Preview.js";
+import { PLATFORM_NAMES, PlatformCharacterLimit, checkPlatformLimits } from "../PlatformCharacterLimit/PlatformCharacterLimit.js";
+import { FacebookPostPreview } from "../FacebookPostPreview/FacebookPostPreview.js";
+import { HashtagInput } from "../HashtagInput/HashtagInput.js";
+import { InstagramPostPreview } from "../InstagramPostPreview/InstagramPostPreview.js";
+import { LinkedInPostPreview } from "../LinkedInPostPreview/LinkedInPostPreview.js";
+import { PinterestPinPreview } from "../PinterestPinPreview/PinterestPinPreview.js";
+import { ThreadsPostPreview } from "../ThreadsPostPreview/ThreadsPostPreview.js";
+import { TikTokPreview } from "../TikTokPreview/TikTokPreview.js";
+import { XPostPreview } from "../XPostPreview/XPostPreview.js";
+import { YouTubeThumbnailPreview } from "../YouTubeThumbnailPreview/YouTubeThumbnailPreview.js";
+import PostComposer_module_default from "./PostComposer.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/agency/PostComposer/PostComposer.tsx
+const MAX_MEDIA = 10;
+/**
+* Çok platformlu gönderi hazırlama: platform seçimi, ortak metin, etiketler, görseller; seçilen her
+* platform için canlı önizleme (sekmeler) ve platform sınırları. Sınırı aşan platform varsa
+* gönderim kapalıdır ve neden yazılır. Altına paylaşım zamanı gibi alanlar eklenebilir.
+*/
+function PostComposer({ account, platforms = PLATFORMS, defaultValue, onChange, hashtagSuggestions, children, onSubmit, submitLabel, onSaveDraft, className, id }) {
+	const t = useMessages();
+	const [selected, setSelected] = useState(() => new Set(defaultValue?.platforms ?? platforms.slice(0, 2)));
+	const [text, setText] = useState(defaultValue?.text ?? "");
+	const [hashtags, setHashtags] = useState(defaultValue?.hashtags ?? []);
+	const [media, setMedia] = useState(() => (defaultValue?.media ?? []).map((m, i) => ({
+		...m,
+		key: `m${i}`
+	})));
+	const [pending, setPending] = useState(false);
+	const fileInput = useRef(null);
+	const seq = useRef(0);
+	const urls = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		const created = urls.current;
+		return () => {
+			for (const u of created) URL.revokeObjectURL(u);
+		};
+	}, []);
+	const chosen = platforms.filter((p) => selected.has(p));
+	const full = [text.trim(), hashtags.join(" ")].filter(Boolean).join("\n\n");
+	const over = checkPlatformLimits(full, chosen).filter((c) => c.status === "over").map((c) => PLATFORM_NAMES[c.platform]);
+	const draft = () => ({
+		platforms: chosen,
+		text,
+		hashtags,
+		files: media.flatMap((m) => m.file ? [m.file] : []),
+		media: media.map(({ src, alt }) => ({
+			src,
+			alt
+		}))
+	});
+	const latest = useRef(onChange);
+	latest.current = onChange;
+	useEffect(() => {
+		latest.current?.(draft());
+	}, [
+		selected,
+		text,
+		hashtags,
+		media
+	]);
+	const addFiles = (list) => {
+		if (!list) return;
+		const next = Array.from(list).filter((f) => f.type.startsWith("image/")).slice(0, MAX_MEDIA - media.length).map((file) => {
+			const src = URL.createObjectURL(file);
+			urls.current.add(src);
+			seq.current += 1;
+			return {
+				src,
+				alt: file.name,
+				file,
+				key: `f${seq.current}`
+			};
+		});
+		setMedia((prev) => [...prev, ...next]);
+	};
+	const remove = (key) => {
+		setMedia((prev) => {
+			const item = prev.find((m) => m.key === key);
+			if (item && urls.current.has(item.src)) {
+				URL.revokeObjectURL(item.src);
+				urls.current.delete(item.src);
+			}
+			return prev.filter((m) => m.key !== key);
+		});
+	};
+	const first = media[0] ? {
+		src: media[0].src,
+		alt: media[0].alt
+	} : void 0;
+	const preview = (p) => {
+		const label = template(t.agencyComposerPreviewOf, { platform: PLATFORM_NAMES[p] });
+		switch (p) {
+			case "instagram": return /* @__PURE__ */ jsx(InstagramPostPreview, {
+				label,
+				account,
+				caption: full,
+				media: media.map(({ src, alt }) => ({
+					src,
+					alt
+				})),
+				moreLabel: t.agencySeeMore
+			});
+			case "facebook": return /* @__PURE__ */ jsx(FacebookPostPreview, {
+				label,
+				account,
+				text: full,
+				media: first
+			});
+			case "linkedin": return /* @__PURE__ */ jsx(LinkedInPostPreview, {
+				label,
+				account,
+				text: full,
+				media: first
+			});
+			case "x": return /* @__PURE__ */ jsx(XPostPreview, {
+				label,
+				account,
+				text: full,
+				media: first
+			});
+			case "threads": return /* @__PURE__ */ jsx(ThreadsPostPreview, {
+				label,
+				account,
+				text: full,
+				media: first
+			});
+			case "tiktok": return /* @__PURE__ */ jsx(TikTokPreview, {
+				label,
+				account,
+				caption: full,
+				media: first
+			});
+			case "pinterest": return /* @__PURE__ */ jsx(PinterestPinPreview, {
+				label,
+				account,
+				title: text.split("\n")[0] ?? "",
+				description: full,
+				media: first
+			});
+			default: return /* @__PURE__ */ jsx(YouTubeThumbnailPreview, {
+				label,
+				account,
+				title: text.split("\n")[0] ?? "",
+				media: first
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(PostComposer_module_default.root, className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: PostComposer_module_default.editor,
+			children: [
+				/* @__PURE__ */ jsx(ChipGroup, {
+					label: t.agencyComposerPlatforms,
+					selectionMode: "multiple",
+					disallowEmptySelection: true,
+					selectedKeys: selected,
+					onSelectionChange: setSelected,
+					children: platforms.map((p) => /* @__PURE__ */ jsx(Chip, {
+						id: p,
+						children: PLATFORM_NAMES[p]
+					}, p))
+				}),
+				/* @__PURE__ */ jsx(TextArea, {
+					label: t.agencyComposerText,
+					value: text,
+					onChange: setText,
+					minRows: 5,
+					maxRows: 14,
+					placeholder: t.agencyComposerPlaceholder
+				}),
+				/* @__PURE__ */ jsx(HashtagInput, {
+					label: t.agencyComposerHashtags,
+					value: hashtags,
+					onChange: setHashtags,
+					suggestions: hashtagSuggestions,
+					maxTags: 30
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: PostComposer_module_default.media,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: PostComposer_module_default.mediaLabel,
+						children: t.agencyComposerMedia
+					}), /* @__PURE__ */ jsxs("ul", {
+						className: PostComposer_module_default.thumbs,
+						children: [media.map((m) => /* @__PURE__ */ jsxs("li", {
+							className: PostComposer_module_default.thumb,
+							children: [/* @__PURE__ */ jsx("img", {
+								src: m.src,
+								alt: m.alt
+							}), /* @__PURE__ */ jsx(IconButton, {
+								size: "sm",
+								variant: "secondary",
+								label: template(t.agencyComposerRemoveMedia, { name: m.alt }),
+								icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+								onPress: () => remove(m.key),
+								className: PostComposer_module_default.thumbRemove
+							})]
+						}, m.key)), media.length < MAX_MEDIA ? /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							iconStart: /* @__PURE__ */ jsx(ImageIcon, {}),
+							onPress: () => fileInput.current?.click(),
+							className: PostComposer_module_default.add,
+							children: t.agencyComposerAddMedia
+						}), /* @__PURE__ */ jsx("input", {
+							ref: fileInput,
+							type: "file",
+							accept: "image/*",
+							multiple: true,
+							hidden: true,
+							onChange: (e) => {
+								addFiles(e.currentTarget.files);
+								e.currentTarget.value = "";
+							}
+						})] }) : null]
+					})]
+				}),
+				children,
+				/* @__PURE__ */ jsx(PlatformCharacterLimit, {
+					text: full,
+					platforms: chosen
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: PostComposer_module_default.actions,
+					children: [
+						over.length ? /* @__PURE__ */ jsx("output", {
+							className: PostComposer_module_default.blocked,
+							children: template(t.agencyComposerOver, { platforms: over.join(", ") })
+						}) : null,
+						onSaveDraft ? /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							onPress: () => onSaveDraft(draft()),
+							isDisabled: pending,
+							children: t.agencyScheduleDraft
+						}) : null,
+						onSubmit ? /* @__PURE__ */ jsx(Button, {
+							variant: "primary",
+							isPending: pending,
+							isDisabled: over.length > 0 || full.length === 0 || chosen.length === 0,
+							onPress: async () => {
+								setPending(true);
+								try {
+									await onSubmit(draft());
+								} finally {
+									setPending(false);
+								}
+							},
+							children: submitLabel ?? t.agencyComposerSubmit
+						}) : null
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx("section", {
+			className: PostComposer_module_default.previews,
+			"aria-label": t.agencyComposerPreviews,
+			children: chosen.length ? /* @__PURE__ */ jsxs(Tabs, {
+				className: PostComposer_module_default.tabs,
+				children: [/* @__PURE__ */ jsx(TabList, {
+					"aria-label": t.agencyComposerPreviews,
+					children: chosen.map((p) => /* @__PURE__ */ jsx(Tab, {
+						id: p,
+						children: PLATFORM_NAMES[p]
+					}, p))
+				}), chosen.map((p) => /* @__PURE__ */ jsx(TabPanel, {
+					id: p,
+					className: PostComposer_module_default.panel,
+					children: preview(p)
+				}, p))]
+			}) : null
+		})]
+	});
+}
+export { PostComposer };

package/dist/agency/PostComposer/PostComposer.module.js

@@ -0,0 +1,18 @@
+import './PostComposer.css';
+// src/agency/PostComposer/PostComposer.module.css
+var PostComposer_module_default = {
+	"root": "sti-PostComposer-root-29079",
+	"editor": "sti-PostComposer-editor-a64af",
+	"media": "sti-PostComposer-media-b5632",
+	"mediaLabel": "sti-PostComposer-mediaLabel-a758d",
+	"thumbs": "sti-PostComposer-thumbs-62dba",
+	"thumb": "sti-PostComposer-thumb-50073",
+	"thumbRemove": "sti-PostComposer-thumbRemove-80e52",
+	"add": "sti-PostComposer-add-fc3e3",
+	"actions": "sti-PostComposer-actions-5092d",
+	"blocked": "sti-PostComposer-blocked-897ce",
+	"previews": "sti-PostComposer-previews-3b2f9",
+	"tabs": "sti-PostComposer-tabs-7eca7",
+	"panel": "sti-PostComposer-panel-d85c9"
+};
+export { PostComposer_module_default as default };

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

@@ -0,0 +1,2 @@
+import { PostComposer, PostComposerProps, PostDraft } from "./PostComposer.js";
+export { PostComposer, PostComposerProps, PostDraft };

package/dist/agency/PublishScheduler/PublishScheduler.css

@@ -0,0 +1,69 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PublishScheduler-root-a7005 {
+    gap: var(--sti-space-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-PublishScheduler-panel-2745b {
+    gap: var(--sti-space-4);
+    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-subtle);
+    display: grid;
+  }
+
+  .sti-PublishScheduler-fields-22d87 {
+    gap: var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-PublishScheduler-field-dd4a6 {
+    flex: 14rem;
+    min-inline-size: 0;
+  }
+
+  .sti-PublishScheduler-slots-ef593 {
+    gap: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-PublishScheduler-slotsLabel-6fbb7 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    display: inline-flex;
+  }
+
+  .sti-PublishScheduler-slotList-89449 {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-PublishScheduler-reason-e0867:empty {
+    display: none;
+  }
+
+  .sti-PublishScheduler-reason-e0867 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-PublishScheduler-summary-2ba05 {
+    padding: var(--sti-space-2) var(--sti-space-3);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    margin: 0;
+  }
+}

package/dist/agency/PublishScheduler/PublishScheduler.d.ts

@@ -0,0 +1,34 @@
+export type PublishMode = "now" | "schedule" | "draft";
+export interface PublishSchedule {
+  mode: PublishMode;
+  /** Yerel tarih ve saat ("2026-11-20T18:30"); yalnız `schedule` kipinde. */
+  at: string | null;
+  /** IANA saat dilimi ("Europe/Istanbul"). */
+  timeZone: string;
+}
+export interface SuggestedSlot {
+  /** Yerel tarih ve saat ("2026-11-20T18:30"). */
+  at: string;
+  /** Neden ("Takipçilerin en etkin olduğu saat"). */
+  reason?: string;
+}
+export interface PublishSchedulerProps {
+  value?: PublishSchedule;
+  defaultValue?: Partial<PublishSchedule>;
+  onChange?: (value: PublishSchedule) => void;
+  /** Önerilen zamanlar (ör. hesabın etkileşim verisinden). */
+  suggestions?: readonly SuggestedSlot[];
+  /** "Şimdi" (geçmiş zaman denetimi için; varsayılan tarayıcının şimdisi, yerel saat). */
+  now?: string;
+  /** Taslak kipi sunulur mu. */
+  allowDraft?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Paylaşım zamanı: "Hemen paylaşın", "Planlayın" (tarih-saat ve saat dilimi; önerilen zamanlar tek
+ * tıklamayla) ya da "Taslak olarak kaydedin". Geçmiş zaman seçilirse alan hata verir; seçimin
+ * özeti ("20 Kasım 2026 Cuma, 18:30 · İstanbul") okunur biçimde yazılır.
+ */
+export declare function PublishScheduler({ value, defaultValue, onChange, suggestions, now, allowDraft, isDisabled, className, id }: PublishSchedulerProps): import("react").JSX.Element;

package/dist/agency/PublishScheduler/PublishScheduler.js

@@ -0,0 +1,152 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { DateTimePicker } from "../../components/DateTimePicker/DateTimePicker.js";
+import { StarIcon } from "../../icons/generated/StarIcon.js";
+import { Radio, RadioGroup } from "../../components/RadioGroup/RadioGroup.js";
+import { TimeZoneSelect } from "../../components/TimeZoneSelect/TimeZoneSelect.js";
+import { cx } from "../_shared/Preview.js";
+import PublishScheduler_module_default from "./PublishScheduler.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/agency/PublishScheduler/PublishScheduler.tsx
+/** "2026-11-20T18:30" → Date (yerel). */
+function parseLocal(at) {
+	const [d = "", tm = "00:00"] = at.split("T");
+	const [y, m, day] = d.split("-").map(Number);
+	const [h, min] = tm.split(":").map(Number);
+	return new Date(y ?? 0, (m ?? 1) - 1, day ?? 1, h ?? 0, min ?? 0);
+}
+function localNow() {
+	const d = /* @__PURE__ */ new Date();
+	const p = (n) => String(n).padStart(2, "0");
+	return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+/**
+* Paylaşım zamanı: "Hemen paylaşın", "Planlayın" (tarih-saat ve saat dilimi; önerilen zamanlar tek
+* tıklamayla) ya da "Taslak olarak kaydedin". Geçmiş zaman seçilirse alan hata verir; seçimin
+* özeti ("20 Kasım 2026 Cuma, 18:30 · İstanbul") okunur biçimde yazılır.
+*/
+function PublishScheduler({ value, defaultValue, onChange, suggestions = [], now, allowDraft = true, isDisabled, className, id }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const [inner, setInner] = useState({
+		mode: defaultValue?.mode ?? "schedule",
+		at: defaultValue?.at ?? null,
+		timeZone: defaultValue?.timeZone ?? "Europe/Istanbul"
+	});
+	const current = value ?? inner;
+	const set = (patch) => {
+		const next = {
+			...current,
+			...patch
+		};
+		if (!value) setInner(next);
+		onChange?.(next);
+	};
+	const reference = now ?? localNow();
+	const past = current.mode === "schedule" && current.at !== null && current.at <= reference;
+	const summary = current.mode === "schedule" && current.at && !past ? template(t.agencyScheduleSummary, {
+		date: new Intl.DateTimeFormat(locale, {
+			day: "numeric",
+			month: "long",
+			year: "numeric",
+			weekday: "long",
+			hour: "2-digit",
+			minute: "2-digit"
+		}).format(parseLocal(current.at)),
+		zone: current.timeZone.split("/").pop()?.replace(/_/g, " ") ?? current.timeZone
+	}) : null;
+	const slotFormat = new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: cx(PublishScheduler_module_default.root, className),
+		children: [/* @__PURE__ */ jsxs(RadioGroup, {
+			label: t.agencyScheduleWhen,
+			value: current.mode,
+			onChange: (m) => set({ mode: m }),
+			isDisabled,
+			children: [
+				/* @__PURE__ */ jsx(Radio, {
+					value: "now",
+					description: t.agencyScheduleNowHint,
+					children: t.agencyScheduleNow
+				}),
+				/* @__PURE__ */ jsx(Radio, {
+					value: "schedule",
+					description: t.agencyScheduleLaterHint,
+					children: t.agencyScheduleLater
+				}),
+				allowDraft ? /* @__PURE__ */ jsx(Radio, {
+					value: "draft",
+					description: t.agencyScheduleDraftHint,
+					children: t.agencyScheduleDraft
+				}) : null
+			]
+		}), current.mode === "schedule" ? /* @__PURE__ */ jsxs("div", {
+			className: PublishScheduler_module_default.panel,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: PublishScheduler_module_default.fields,
+					children: [/* @__PURE__ */ jsx(DateTimePicker, {
+						label: t.agencyScheduleDateTime,
+						value: current.at,
+						onChange: (at) => set({ at }),
+						minValue: reference.slice(0, 10),
+						isRequired: true,
+						isInvalid: past,
+						errorMessage: t.agencySchedulePast,
+						isDisabled,
+						className: PublishScheduler_module_default.field
+					}), /* @__PURE__ */ jsx(TimeZoneSelect, {
+						value: current.timeZone,
+						onChange: (z) => z && set({ timeZone: z }),
+						isDisabled,
+						className: PublishScheduler_module_default.field
+					})]
+				}),
+				suggestions.length ? /* @__PURE__ */ jsxs("div", {
+					className: PublishScheduler_module_default.slots,
+					role: "group",
+					"aria-label": t.agencyScheduleSuggested,
+					children: [
+						/* @__PURE__ */ jsxs("span", {
+							className: PublishScheduler_module_default.slotsLabel,
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ jsx(StarIcon, {}), t.agencyScheduleSuggested]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: PublishScheduler_module_default.slotList,
+							children: suggestions.filter((s) => s.at > reference).slice(0, 4).map((s) => /* @__PURE__ */ jsx(Button, {
+								variant: current.at === s.at ? "primary" : "secondary",
+								size: "sm",
+								isDisabled,
+								onPress: () => set({ at: s.at }),
+								"aria-describedby": s.reason ? `${id ?? "slot"}-${s.at}` : void 0,
+								children: slotFormat.format(parseLocal(s.at))
+							}, s.at))
+						}),
+						suggestions.filter((s) => s.reason && s.at > reference).slice(0, 4).map((s) => /* @__PURE__ */ jsx("span", {
+							id: `${id ?? "slot"}-${s.at}`,
+							className: PublishScheduler_module_default.reason,
+							children: current.at === s.at ? s.reason : null
+						}, s.at))
+					]
+				}) : null,
+				summary ? /* @__PURE__ */ jsx("p", {
+					className: PublishScheduler_module_default.summary,
+					"aria-live": "polite",
+					children: summary
+				}) : null
+			]
+		}) : null]
+	});
+}
+export { PublishScheduler };

package/dist/agency/PublishScheduler/PublishScheduler.module.js

@@ -0,0 +1,14 @@
+import './PublishScheduler.css';
+// src/agency/PublishScheduler/PublishScheduler.module.css
+var PublishScheduler_module_default = {
+	"root": "sti-PublishScheduler-root-a7005",
+	"panel": "sti-PublishScheduler-panel-2745b",
+	"fields": "sti-PublishScheduler-fields-22d87",
+	"field": "sti-PublishScheduler-field-dd4a6",
+	"slots": "sti-PublishScheduler-slots-ef593",
+	"slotsLabel": "sti-PublishScheduler-slotsLabel-6fbb7",
+	"slotList": "sti-PublishScheduler-slotList-89449",
+	"reason": "sti-PublishScheduler-reason-e0867",
+	"summary": "sti-PublishScheduler-summary-2ba05"
+};
+export { PublishScheduler_module_default as default };