@morphika/webframe 0.1.0

package/components/admin/styles/TypographyEditor.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { SiteStyles, TypographyLevel } from "../../../lib/sanity/types";
+import { Section, SaveButton } from "./shared";
+
+const TYPO_SAMPLE_TEXTS: Record<string, string> = {
+  h1: "The quick brown fox",
+  h2: "Jumps over the lazy dog",
+  h3: "Pack my box with five dozen",
+  h4: "How vexingly quick daft zebras jump",
+  body: "Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle.",
+  small: "Value your time — nothing is impossible",
+};
+
+const TYPO_LEVEL_LABELS: Record<string, string> = {
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  body: "Body",
+  small: "Small",
+};
+
+function ChevronDownIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      className="transition-transform duration-200"
+      style={{ transform: open ? "rotate(180deg)" : "rotate(0deg)" }}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+const DEFAULT_TYPOGRAPHY: Record<string, TypographyLevel> = {
+  h1: { font_size: "3rem", font_weight: "700", line_height: "1.1", letter_spacing: "-0.02em" },
+  h2: { font_size: "2rem", font_weight: "700", line_height: "1.2", letter_spacing: "-0.01em" },
+  h3: { font_size: "1.5rem", font_weight: "500", line_height: "1.3", letter_spacing: "0" },
+  h4: { font_size: "1.125rem", font_weight: "500", line_height: "1.4", letter_spacing: "0" },
+  body: { font_size: "0.875rem", font_weight: "400", line_height: "1.6", letter_spacing: "0" },
+  small: { font_size: "0.75rem", font_weight: "400", line_height: "1.5", letter_spacing: "0.02em" },
+};
+
+export function TypographyEditor({
+  typography,
+  fontFamilies,
+  onSave,
+  saving,
+}: {
+  typography?: SiteStyles["typography"];
+  fontFamilies: string[];
+  onSave: (data: Record<string, unknown>) => void;
+  saving: boolean;
+}) {
+  const levels = ["h1", "h2", "h3", "h4", "body", "small"] as const;
+
+  const [local, setLocal] = useState<Record<string, TypographyLevel>>(() => {
+    const result: Record<string, TypographyLevel> = {};
+    for (const level of levels) {
+      result[level] = typography?.[level] || DEFAULT_TYPOGRAPHY[level];
+    }
+    return result;
+  });
+
+  const [expanded, setExpanded] = useState<string | null>(null);
+
+  useEffect(() => {
+    const result: Record<string, TypographyLevel> = {};
+    for (const level of levels) {
+      result[level] = typography?.[level] || DEFAULT_TYPOGRAPHY[level];
+    }
+    setLocal(result);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [typography]);
+
+  const updateLevel = (level: string, updates: Partial<TypographyLevel>) => {
+    setLocal({ ...local, [level]: { ...local[level], ...updates } });
+  };
+
+  const handleSave = () => {
+    const data: Record<string, unknown> = {};
+    for (const level of levels) {
+      data[`typography_${level}`] = local[level];
+    }
+    onSave(data);
+  };
+
+  const toggle = (level: string) => {
+    setExpanded(expanded === level ? null : level);
+  };
+
+  // Resolve the primary font family from h1 for the big "Aa" preview
+  const primaryFont = local.h1?.font_family || fontFamilies[0] || "monospace";
+
+  // Collect unique weights used across all levels
+  const usedWeights = Array.from(
+    new Set(levels.map((l) => local[l]?.font_weight).filter(Boolean))
+  ).sort();
+
+  return (
+    <Section title="Typography" description="Define the typographic hierarchy. Click any level to edit its properties.">
+      <div className="rounded-2xl border border-neutral-200 bg-white overflow-hidden">
+        {/* Preview area */}
+        <div className="px-8 pt-8 pb-6 md:px-10 md:pt-10">
+          {/* Typeface hero */}
+          <div className="flex items-end gap-8 mb-8 pb-8 border-b border-neutral-100">
+            <span
+              style={{ fontFamily: `'${primaryFont}', monospace` }}
+              className="text-[5rem] font-bold leading-none text-neutral-900 select-none"
+            >
+              Aa
+            </span>
+            <div className="pb-1">
+              <p className="text-[10px] uppercase tracking-[0.1em] text-neutral-400 mb-1.5">Typeface</p>
+              <p className="text-sm font-semibold text-neutral-900">{primaryFont}</p>
+              <p className="text-[11px] text-neutral-400 mt-0.5">
+                {usedWeights.length > 0
+                  ? `Weights: ${usedWeights.join(" · ")}`
+                  : "No weights configured"}
+              </p>
+            </div>
+          </div>
+
+          {/* Type scale — live preview rows */}
+          <div className="flex flex-col">
+            {levels.map((level) => {
+              const t = local[level];
+              const isExpanded = expanded === level;
+
+              return (
+                <div key={level}>
+                  {/* Clickable preview row */}
+                  <button
+                    type="button"
+                    onClick={() => toggle(level)}
+                    className={`w-full grid items-baseline gap-4 py-3 px-3 -mx-3 rounded-lg cursor-pointer transition-colors text-left ${
+                      isExpanded ? "bg-neutral-50" : "hover:bg-neutral-50/60"
+                    }`}
+                    style={{ gridTemplateColumns: "120px 1fr" }}
+                  >
+                    {/* Label */}
+                    <span className="flex items-center gap-1.5">
+                      <ChevronDownIcon open={isExpanded} />
+                      <span className="text-[10px] uppercase tracking-[0.1em] text-neutral-400 font-medium">
+                        {TYPO_LEVEL_LABELS[level]}
+                      </span>
+                    </span>
+
+                    {/* Live sample */}
+                    <span
+                      style={{
+                        fontFamily: t.font_family ? `'${t.font_family}', monospace` : "inherit",
+                        fontSize: t.font_size,
+                        fontWeight: Number(t.font_weight) || 400,
+                        lineHeight: t.line_height,
+                        letterSpacing: t.letter_spacing,
+                        textTransform: (t.text_transform || "none") as React.CSSProperties["textTransform"],
+                        color: t.color || "#0a0a0a",
+                      }}
+                      className={level === "body" ? "" : "truncate block"}
+                    >
+                      {TYPO_SAMPLE_TEXTS[level]}
+                    </span>
+                  </button>
+
+                  {/* Expanded controls */}
+                  {isExpanded && (
+                    <div className="bg-neutral-50 rounded-xl border border-neutral-100 p-4 mb-2 -mx-3">
+                      <div className="grid grid-cols-6 gap-3">
+                        <div>
+                          <label className="text-[9px] uppercase tracking-[0.08em] text-neutral-400 font-medium block mb-1">Font</label>
+                          <select
+                            value={t.font_family || ""}
+                            onChange={(e) => updateLevel(level, { font_family: e.target.value })}
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                          >
+                            <option value="">Inherit</option>
+                            {fontFamilies.map((f) => (
+                              <option key={f} value={f}>{f}</option>
+                            ))}
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-[9px] uppercase tracking-[0.08em] text-neutral-400 font-medium block mb-1">Size</label>
+                          <input
+                            type="text"
+                            value={t.font_size}
+                            onChange={(e) => updateLevel(level, { font_size: e.target.value })}
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            placeholder="3rem"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-[9px] uppercase tracking-[0.08em] text-neutral-400 font-medium block mb-1">Weight</label>
+                          <select
+                            value={t.font_weight}
+                            onChange={(e) => updateLevel(level, { font_weight: e.target.value })}
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                          >
+                            {["100", "300", "400", "500", "600", "700", "800", "900"].map((w) => (
+                              <option key={w} value={w}>{w}</option>
+                            ))}
+                          </select>
+                        </div>
+                        <div>
+                          <label className="text-[9px] uppercase tracking-[0.08em] text-neutral-400 font-medium block mb-1">Line Height</label>
+                          <input
+                            type="text"
+                            value={t.line_height}
+                            onChange={(e) => updateLevel(level, { line_height: e.target.value })}
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            placeholder="1.1"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-[9px] uppercase tracking-[0.08em] text-neutral-400 font-medium block mb-1">Spacing</label>
+                          <input
+                            type="text"
+                            value={t.letter_spacing}
+                            onChange={(e) => updateLevel(level, { letter_spacing: e.target.value })}
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                            placeholder="-0.02em"
+                          />
+                        </div>
+                        <div>
+                          <label className="text-[9px] uppercase tracking-[0.08em] text-neutral-400 font-medium block mb-1">Transform</label>
+                          <select
+                            value={t.text_transform || "none"}
+                            onChange={(e) => updateLevel(level, { text_transform: e.target.value as TypographyLevel["text_transform"] })}
+                            className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1.5 text-[11px] text-neutral-700 focus:border-[#076bff] focus:outline-none"
+                          >
+                            <option value="none">None</option>
+                            <option value="uppercase">UPPERCASE</option>
+                            <option value="lowercase">lowercase</option>
+                            <option value="capitalize">Capitalize</option>
+                          </select>
+                        </div>
+                      </div>
+                      {/* Specs summary line */}
+                      <p className="mt-3 text-[10px] text-neutral-300 tracking-wide">
+                        {t.font_family || "Inherit"} · {t.font_size} · {t.font_weight} · {t.line_height} · {t.letter_spacing}
+                        {t.text_transform && t.text_transform !== "none" ? ` · ${t.text_transform}` : ""}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Save footer */}
+        <div className="px-8 py-4 md:px-10 bg-neutral-50 border-t border-neutral-100 flex justify-end">
+          <SaveButton onClick={handleSave} saving={saving} />
+        </div>
+      </div>
+    </Section>
+  );
+}

package/components/admin/styles/index.ts

@@ -0,0 +1,9 @@
+// Shared components
+export { Section, ColorField, SaveButton, FieldInput } from "./shared";
+
+// Editor components
+export { GridLayoutEditor } from "./GridLayoutEditor";
+export { FontsEditor } from "./FontsEditor";
+export { TypographyEditor } from "./TypographyEditor";
+export { ColorsEditor } from "./ColorsEditor";
+export { LinksButtonsEditor } from "./LinksButtonsEditor";

package/components/admin/styles/shared.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+export function Section({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {
+  return (
+    <section className="bg-white rounded-2xl border border-neutral-200 p-6">
+      <h2 className="text-lg font-semibold text-neutral-900 mb-1">{title}</h2>
+      {description && <p className="text-xs text-neutral-500 mb-5">{description}</p>}
+      {!description && <div className="mb-5" />}
+      {children}
+    </section>
+  );
+}
+
+export function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
+  return (
+    <div className="flex items-center gap-3">
+      <input
+        type="color"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-8 h-8 rounded-lg border border-neutral-200 cursor-pointer bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:rounded-md [&::-webkit-color-swatch]:border-none"
+      />
+      <div className="flex-1">
+        <label className="text-xs text-neutral-500 block mb-0.5">{label}</label>
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full rounded-lg border border-neutral-200 bg-white px-2 py-1 text-xs text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        />
+      </div>
+    </div>
+  );
+}
+
+export function SaveButton({ onClick, saving, label = "Save" }: { onClick: () => void; saving: boolean; label?: string }) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={saving}
+      className="rounded-lg bg-[#076bff] px-5 py-1.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+    >
+      {saving ? "Saving..." : label}
+    </button>
+  );
+}
+
+export function FieldInput({ label, value, onChange, placeholder, helpText }: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  helpText?: string;
+}) {
+  return (
+    <div>
+      <label className="text-[10px] text-neutral-400 uppercase tracking-wider block mb-1">{label}</label>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        placeholder={placeholder}
+      />
+      {helpText && <p className="text-[10px] text-neutral-400 mt-1">{helpText}</p>}
+    </div>
+  );
+}