dev-api-ui 0.1.7

package/ui/components/AuthPage.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import Link from 'next/link';
+
+const GoogleSVG = () => (
+  <svg width="16" height="16" viewBox="0 0 48 48" aria-hidden="true">
+    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
+    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
+    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+  </svg>
+);
+
+const GitHubSVG = () => (
+  <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" aria-hidden="true">
+    <path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.89 1.53 2.34 1.09 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.5 9.5 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85l-.01 2.75c0 .27.18.58.69.48A10 10 0 0 0 12 2z" />
+  </svg>
+);
+
+const oauthBtn: React.CSSProperties = {
+  width: '100%',
+  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
+  fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+  padding: '11px 15px', borderRadius: 4,
+  border: '0.5px solid var(--hairline-2)',
+  background: 'var(--surface)', color: 'var(--ink)', cursor: 'pointer',
+};
+
+interface AuthPageProps {
+  mode: 'login' | 'signup';
+  wordmark?: string;
+}
+
+export default function AuthPage({ mode, wordmark = 'Console' }: AuthPageProps) {
+  const isLogin = mode === 'login';
+
+  return (
+    <div style={{
+      minHeight: '100vh', display: 'flex', alignItems: 'center',
+      justifyContent: 'center', padding: 32, background: 'var(--paper)',
+    }}>
+      <div style={{ width: '100%', maxWidth: 380 }}>
+        {/* Wordmark */}
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 9, justifyContent: 'center',
+          fontFamily: 'var(--mono)', fontWeight: 600, fontSize: 17, letterSpacing: '-.01em',
+        }}>
+          <span style={{ width: 10, height: 10, background: 'var(--accent)', transform: 'rotate(45deg)', display: 'inline-block' }} />
+          {wordmark}
+        </div>
+
+        {/* Card */}
+        <div style={{
+          background: 'var(--surface)', border: '0.5px solid var(--hairline-2)',
+          borderRadius: 10, padding: '28px', marginTop: 22,
+        }}>
+          <h1 style={{
+            fontFamily: 'var(--mono)', fontSize: 20, fontWeight: 600,
+            letterSpacing: '-.01em', textAlign: 'center',
+          }}>
+            {isLogin ? 'Sign in' : 'Create your account'}
+          </h1>
+          <p style={{ fontSize: 13, color: 'var(--tertiary)', textAlign: 'center', marginTop: 5 }}>
+            {isLogin
+              ? 'Continue with Google or GitHub'
+              : 'No password to manage — continue with Google or GitHub'}
+          </p>
+
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22 }}>
+            <button
+              style={oauthBtn}
+              onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--secondary)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--hairline-2)'; }}
+            >
+              <GoogleSVG />
+              Continue with Google
+            </button>
+            <button
+              style={oauthBtn}
+              onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--secondary)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--hairline-2)'; }}
+            >
+              <GitHubSVG />
+              Continue with GitHub
+            </button>
+          </div>
+
+          {!isLogin && (
+            <p style={{ fontSize: 12, color: 'var(--tertiary)', textAlign: 'center', marginTop: 16, lineHeight: 1.5 }}>
+              By continuing you agree to the{' '}
+              <a href="#" style={{ fontWeight: 500, color: 'var(--accent)', textDecoration: 'none' }}>Terms</a>
+              {' '}and{' '}
+              <a href="#" style={{ fontWeight: 500, color: 'var(--accent)', textDecoration: 'none' }}>Privacy Policy</a>.
+            </p>
+          )}
+        </div>
+
+        {/* Footer link */}
+        <div style={{ textAlign: 'center', fontSize: 13, color: 'var(--tertiary)', marginTop: 16 }}>
+          {isLogin ? (
+            <>New to {wordmark}? <Link href="/signup" style={{ fontWeight: 500, color: 'var(--accent)' }}>Create an account</Link></>
+          ) : (
+            <>Already have an account? <Link href="/login" style={{ fontWeight: 500, color: 'var(--accent)' }}>Sign in</Link></>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/components/Callout.tsx

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+
+type CalloutVariant = 'warn' | 'info' | 'tip';
+
+interface CalloutProps {
+  variant?: CalloutVariant;
+  title: string;
+  children: ReactNode;
+}
+
+const ICONS: Record<CalloutVariant, ReactNode> = {
+  warn: (
+    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
+      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M12 9v4" />
+      <path d="M12 17h.01" />
+      <path d="M10.3 4.3 2.5 18a2 2 0 0 0 1.7 3h15.6a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z" />
+    </svg>
+  ),
+  info: (
+    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
+      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 8v4" />
+      <path d="M12 16h.01" />
+    </svg>
+  ),
+  tip: (
+    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor"
+      strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M12 2a7 7 0 0 1 7 7c0 3.18-2.08 5.89-5 6.71V17a2 2 0 0 1-2 2h0a2 2 0 0 1-2-2v-1.29C7.08 14.89 5 12.18 5 9a7 7 0 0 1 7-7z" />
+      <path d="M9 21h6" />
+    </svg>
+  ),
+};
+
+const ICON_COLORS: Record<CalloutVariant, string> = {
+  warn: 'var(--warn)',
+  info: 'var(--info)',
+  tip: 'var(--accent)',
+};
+
+export default function Callout({ variant = 'warn', title, children }: CalloutProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 12,
+        marginTop: 24,
+        background: '#F4F4F1',
+        border: '0.5px solid var(--hairline-2)',
+        borderRadius: 8,
+        padding: '16px 18px',
+      }}
+    >
+      <span
+        style={{
+          flex: 'none',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 20,
+          height: 20,
+          color: ICON_COLORS[variant],
+          marginTop: 1,
+        }}
+      >
+        {ICONS[variant]}
+      </span>
+      <div>
+        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{title}</div>
+        <div style={{ fontSize: 14, color: 'var(--secondary)', marginTop: 3, lineHeight: 1.55 }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/components/Chart.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { createChart, AreaSeries, ColorType, LineStyle } from 'lightweight-charts';
+
+const DATA = [
+  { time: '2024-01-02', value: 182.4 },
+  { time: '2024-01-05', value: 184.1 },
+  { time: '2024-01-08', value: 181.9 },
+  { time: '2024-01-11', value: 185.7 },
+  { time: '2024-01-14', value: 188.3 },
+  { time: '2024-01-17', value: 186.2 },
+  { time: '2024-01-22', value: 190.5 },
+  { time: '2024-01-25', value: 193.1 },
+  { time: '2024-01-29', value: 191.8 },
+  { time: '2024-02-01', value: 195.4 },
+  { time: '2024-02-05', value: 198.2 },
+  { time: '2024-02-08', value: 196.7 },
+  { time: '2024-02-12', value: 201.3 },
+  { time: '2024-02-15', value: 204.8 },
+  { time: '2024-02-20', value: 202.1 },
+  { time: '2024-02-23', value: 207.6 },
+];
+
+const ACCENT = '#1F8A5B';
+
+export default function Chart() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const chart = createChart(el, {
+      width: el.clientWidth,
+      height: 240,
+      layout: {
+        background: { type: ColorType.Solid, color: 'transparent' },
+        textColor: '#8A8F98',
+        fontFamily: 'IBM Plex Sans, sans-serif',
+        fontSize: 11,
+      },
+      grid: {
+        vertLines: { visible: false },
+        horzLines: { color: '#E6E6E2', style: LineStyle.Solid },
+      },
+      rightPriceScale: {
+        borderVisible: false,
+        ticksVisible: false,
+      },
+      timeScale: {
+        borderVisible: false,
+        ticksVisible: false,
+      },
+      crosshair: {
+        vertLine: { visible: false },
+        horzLine: { visible: false },
+      },
+      handleScroll: false,
+      handleScale: false,
+    });
+
+    const series = chart.addSeries(AreaSeries, {
+      lineColor: ACCENT,
+      lineWidth: 2,
+      topColor: 'rgba(31,138,91,0.12)',
+      bottomColor: 'rgba(31,138,91,0)',
+      priceLineVisible: false,
+      lastValueVisible: false,
+      crosshairMarkerVisible: false,
+    });
+
+    series.setData(DATA);
+    chart.timeScale().fitContent();
+
+    const ro = new ResizeObserver(() => {
+      chart.applyOptions({ width: el.clientWidth });
+    });
+    ro.observe(el);
+
+    return () => {
+      ro.disconnect();
+      chart.remove();
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        border: '0.5px solid var(--hairline-2)',
+        borderRadius: '8px',
+        background: 'var(--surface)',
+        overflow: 'hidden',
+        padding: '18px 18px 10px',
+      }}
+    >
+      <div ref={containerRef} />
+    </div>
+  );
+}

package/ui/components/CodeTabs.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState, useRef, useEffect, ReactNode } from 'react';
+
+type Tab = 'curl' | 'node' | 'python';
+
+interface CodeTabsProps {
+  group: string;
+  id: string;
+  apiUrl?: string;
+}
+
+function cy(t: string): ReactNode {
+  return <span style={{ color: 'var(--cyan)' }}>{t}</span>;
+}
+function am(t: string): ReactNode {
+  return <span style={{ color: 'var(--amber)' }}>{t}</span>;
+}
+function pu(t: string): ReactNode {
+  return <span style={{ color: 'var(--purple)' }}>{t}</span>;
+}
+function dm(t: string): ReactNode {
+  return <span style={{ color: 'var(--code-dim)' }}>{t}</span>;
+}
+
+function codeText(tab: Tab, group: string, id: string, apiUrl: string): string {
+  if (tab === 'node') {
+    return `const r = await c.${group}.get("${id}")\nconsole.log(r.value, r.ts, r.source)`;
+  }
+  if (tab === 'python') {
+    return `r = c.${group}.get("${id}")\nprint(r["value"], r["ts"], r["source"])`;
+  }
+  return `$ curl ${apiUrl}/v1/${group}/${id} \\\n    -H "Authorization: Bearer $API_KEY"\n# → value, ts, source, point_in_time`;
+}
+
+function codeFor(tab: Tab, group: string, id: string, apiUrl: string): ReactNode {
+  if (tab === 'node') {
+    return (
+      <>
+        {pu('const')} r = {pu('await')} c.{cy(group)}.{cy('get')}({am(`"${id}"`)}{')'}
+        {'\n'}
+        {cy('console')}.log(r.value, r.ts, r.source)
+      </>
+    );
+  }
+  if (tab === 'python') {
+    return (
+      <>
+        r = c.{cy(group)}.{cy('get')}({am(`"${id}"`)}{')'}
+        {'\n'}
+        {pu('print')}(r[{am('"value"')}], r[{am('"ts"')}], r[{am('"source"')}])
+      </>
+    );
+  }
+  return (
+    <>
+      {cy('$')} curl {apiUrl}/v1/{group}/{id} \{'\n'}
+      {'    '}-H {am('"Authorization: Bearer $API_KEY"')}{'\n'}
+      {dm('# → value, ts, source, point_in_time')}
+    </>
+  );
+}
+
+export default function CodeTabs({ group, id, apiUrl = 'https://api.console.dev' }: CodeTabsProps) {
+  const [tab, setTab] = useState<Tab>('curl');
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);
+
+  function handleCopy() {
+    navigator.clipboard.writeText(codeText(tab, group, id, apiUrl)).then(() => {
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 1500);
+    });
+  }
+
+  const mkTab = (t: Tab, label: string) => ({
+    label,
+    active: tab === t,
+    onClick: () => setTab(t),
+  });
+
+  const tabs = [mkTab('curl', 'curl'), mkTab('node', 'Node'), mkTab('python', 'Python')];
+
+  return (
+    <div
+      style={{
+        borderRadius: 8,
+        overflow: 'hidden',
+        border: '0.5px solid #23262B',
+        background: 'var(--code-bg)',
+      }}
+    >
+      {/* Tab bar */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderBottom: '0.5px solid #23262B',
+          padding: '0 12px',
+        }}
+      >
+        <div style={{ display: 'flex' }}>
+          {tabs.map((t) => (
+            <button
+              key={t.label}
+              onClick={t.onClick}
+              style={{
+                fontFamily: 'var(--mono)',
+                fontSize: 13,
+                padding: '11px 13px',
+                background: 'transparent',
+                border: 'none',
+                borderBottom: `2px solid ${t.active ? 'var(--cyan)' : 'transparent'}`,
+                color: t.active ? 'var(--code-fg)' : 'var(--code-dim)',
+                cursor: 'pointer',
+              }}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <button onClick={handleCopy} style={{ fontSize: 11, color: 'var(--code-dim)', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>{copied ? 'Copied!' : 'copy'}</button>
+      </div>
+
+      {/* Code panel */}
+      <pre
+        style={{
+          margin: 0,
+          padding: '18px 16px',
+          fontFamily: 'var(--mono)',
+          fontSize: 13,
+          lineHeight: 1.7,
+          color: 'var(--code-fg)',
+          overflowX: 'auto',
+        }}
+      >
+        {codeFor(tab, group, id, apiUrl)}
+      </pre>
+    </div>
+  );
+}